@navikt/ds-react 0.17.27 → 0.18.2

package/src/form/Select.tsx

@@ -26,81 +26,85 @@ export interface SelectProps
   hideLabel?: boolean;
 }
 
-const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textField");
 
-  const {
-    children,
-    label,
-    className,
-    description,
-    htmlSize,
-    hideLabel = false,
-    ...rest
-  } = props;
+    const {
+      children,
+      label,
+      className,
+      description,
+      htmlSize,
+      hideLabel = false,
+      ...rest
+    } = props;
 
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        {
-          "navds-select--error": hasError,
-          "navds-select--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-select__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    return (
+      <div
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          {
+            "navds-select--error": hasError,
+            "navds-select--disabled": !!inputProps.disabled,
+          }
+        )}
       >
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cl("navds-select__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-select__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className="navds-select__container">
-        <select
-          {...omit(rest, ["error", "errorId", "size"])}
-          {...inputProps}
-          ref={ref}
-          className={cl(
-            "navds-select__input",
-            "navds-body-short",
-            `navds-body--${size ?? "medium"}`
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cl("navds-select__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-select__container">
+          <select
+            {...omit(rest, ["error", "errorId", "size"])}
+            {...inputProps}
+            ref={ref}
+            className={cl(
+              "navds-select__input",
+              "navds-body-short",
+              `navds-body--${size ?? "medium"}`
+            )}
+            size={props.htmlSize}
+          >
+            {children}
+          </select>
+          <Expand className="navds-select__chevron" aria-hidden />
+        </div>
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
           )}
-          size={props.htmlSize}
-        >
-          {children}
-        </select>
-        <Expand className="navds-select__chevron" aria-hidden />
-      </div>
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default Select;

package/src/form/Switch.tsx

@@ -51,92 +51,94 @@ export interface SwitchProps
   position?: "left" | "right";
 }
 
-const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
-  const { inputProps, size } = useFormField(props, "switch");
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (props, ref) => {
+    const { inputProps, size } = useFormField(props, "switch");
 
-  const {
-    children,
-    className,
-    description,
-    hideLabel = false,
-    loading,
-    checked: checkedProp,
-    defaultChecked,
-    position = "left",
-    ...rest
-  } = props;
+    const {
+      children,
+      className,
+      description,
+      hideLabel = false,
+      loading,
+      checked: checkedProp,
+      defaultChecked,
+      position = "left",
+      ...rest
+    } = props;
 
-  const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyShort : Detail;
 
-  const [checked, setChecked] = useState(
-    defaultChecked ?? checkedProp ?? false
-  );
+    const [checked, setChecked] = useState(
+      defaultChecked ?? checkedProp ?? false
+    );
 
-  useEffect(() => {
-    checkedProp !== undefined && setChecked(checkedProp);
-  }, [checkedProp]);
+    useEffect(() => {
+      checkedProp !== undefined && setChecked(checkedProp);
+    }, [checkedProp]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(e.target.checked);
-    props.onChange && props.onChange(e);
-  };
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(e.target.checked);
+      props.onChange && props.onChange(e);
+    };
 
-  return (
-    <div
-      className={cl(
-        "navds-switch",
-        props.className,
-        `navds-switch--${size}`,
-        `navds-switch--${position}`,
-        {
-          "navds-switch--loading": loading,
-          "navds-switch--disabled": inputProps.disabled ?? loading,
-        }
-      )}
-    >
-      <input
-        {...omit(rest, ["size"])}
-        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        disabled={inputProps.disabled ?? loading}
-        checked={checkedProp}
-        defaultChecked={defaultChecked}
-        ref={ref}
-        type="checkbox"
-        onChange={(e) => handleChange(e)}
-        className={cl(className, "navds-switch__input")}
-      />
-      <span className="navds-switch__track">
-        <span className="navds-switch__thumb">
-          {loading ? (
-            <Loader size="xsmall" aria-live="polite" />
-          ) : checked ? (
-            <SelectedIcon />
-          ) : null}
+    return (
+      <div
+        className={cl(
+          "navds-switch",
+          props.className,
+          `navds-switch--${size}`,
+          `navds-switch--${position}`,
+          {
+            "navds-switch--loading": loading,
+            "navds-switch--disabled": inputProps.disabled ?? loading,
+          }
+        )}
+      >
+        <input
+          {...omit(rest, ["size"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          disabled={inputProps.disabled ?? loading}
+          checked={checkedProp}
+          defaultChecked={defaultChecked}
+          ref={ref}
+          type="checkbox"
+          onChange={(e) => handleChange(e)}
+          className={cl(className, "navds-switch__input")}
+        />
+        <span className="navds-switch__track">
+          <span className="navds-switch__thumb">
+            {loading ? (
+              <Loader size="xsmall" aria-live="polite" />
+            ) : checked ? (
+              <SelectedIcon />
+            ) : null}
+          </span>
         </span>
-      </span>
-      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
-        <div
-          className={cl("navds-switch__content", {
-            "navds-sr-only": hideLabel,
-            "navds-switch--with-description": !!description && !hideLabel,
-          })}
-        >
-          <BodyShort as="div" size={size} className="navds-switch__label">
-            {children}
-          </BodyShort>
-          {description && (
-            <Description
-              as="div"
-              size="small"
-              className="navds-switch__description"
-            >
-              {description}
-            </Description>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-});
+        <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+          <div
+            className={cl("navds-switch__content", {
+              "navds-sr-only": hideLabel,
+              "navds-switch--with-description": !!description && !hideLabel,
+            })}
+          >
+            <BodyShort as="div" size={size} className="navds-switch__label">
+              {children}
+            </BodyShort>
+            {description && (
+              <Description
+                as="div"
+                size="small"
+                className="navds-switch__description"
+              >
+                {description}
+              </Description>
+            )}
+          </div>
+        </label>
+      </div>
+    );
+  }
+);
 
 export default Switch;

package/src/form/TextField.tsx

@@ -34,93 +34,97 @@ export interface TextFieldProps
   type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
-  const {
-    inputProps,
-    errorId,
-    showErrorMsg,
-    hasError,
-    size,
-    inputDescriptionId,
-  } = useFormField(props, "textField");
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      errorId,
+      showErrorMsg,
+      hasError,
+      size,
+      inputDescriptionId,
+    } = useFormField(props, "textField");
 
-  const {
-    label,
-    className,
-    description,
-    htmlSize,
-    hideLabel = false,
-    type = "text",
-    ...rest
-  } = props;
+    const {
+      label,
+      className,
+      description,
+      htmlSize,
+      hideLabel = false,
+      type = "text",
+      ...rest
+    } = props;
 
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        {
-          "navds-text-field--error": hasError,
-          "navds-text-field--disabled": !!inputProps.disabled,
-        }
-      )}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        as="label"
-        className={cl("navds-text-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    return (
+      <div
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          {
+            "navds-text-field--error": hasError,
+            "navds-text-field--disabled": !!inputProps.disabled,
+          }
+        )}
       >
-        {label}
-      </Label>
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          as="label"
+          className={cl("navds-text-field__label", {
+            "navds-sr-only": hideLabel,
+          })}
+        >
+          {label}
+        </Label>
 
-      {!!description && (
-        <>
-          {size === "medium" ? (
-            <BodyShort
-              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
-              })}
-              id={inputDescriptionId}
-              size="small"
-              as="div"
-            >
-              {description}
-            </BodyShort>
-          ) : (
-            <Detail
-              className={cl("navds-text-field__description", {
-                "navds-sr-only": hideLabel,
-              })}
-              id={inputDescriptionId}
-              size="small"
-              as="div"
-            >
-              {description}
-            </Detail>
-          )}
-        </>
-      )}
-      <input
-        {...omit(rest, ["error", "errorId", "size"])}
-        {...inputProps}
-        ref={ref}
-        type={type}
-        className={cl(
-          "navds-text-field__input",
-          "navds-body-short",
-          `navds-body-${size ?? "medium"}`
+        {!!description && (
+          <>
+            {size === "medium" ? (
+              <BodyShort
+                className={cl("navds-text-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </BodyShort>
+            ) : (
+              <Detail
+                className={cl("navds-text-field__description", {
+                  "navds-sr-only": hideLabel,
+                })}
+                id={inputDescriptionId}
+                size="small"
+                as="div"
+              >
+                {description}
+              </Detail>
+            )}
+          </>
         )}
-        size={htmlSize}
-      />
-      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        <input
+          {...omit(rest, ["error", "errorId", "size"])}
+          {...inputProps}
+          ref={ref}
+          type={type}
+          className={cl(
+            "navds-text-field__input",
+            "navds-body-short",
+            `navds-body-${size ?? "medium"}`
+          )}
+          size={htmlSize}
+        />
+        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default TextField;

package/src/form/Textarea.tsx

@@ -37,7 +37,7 @@ export interface TextareaProps
   hideLabel?: boolean;
 }
 
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const {
       inputProps,

package/src/form/checkbox/Checkbox.tsx

@@ -31,70 +31,72 @@ export interface CheckboxProps
   indeterminate?: boolean;
 }
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { inputProps, hasError, size } = useCheckbox(props);
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const { inputProps, hasError, size } = useCheckbox(props);
 
-  const Description = size === "medium" ? BodyShort : Detail;
+    const Description = size === "medium" ? BodyShort : Detail;
 
-  return (
-    <div
-      className={cl(
-        props.className,
-        "navds-checkbox",
-        `navds-checkbox--${size}`,
-        {
-          "navds-checkbox--error": hasError,
-          "navds-checkbox--disabled": inputProps.disabled,
-        }
-      )}
-    >
-      <input
-        {...omit(props, [
-          "children",
-          "size",
-          "error",
-          "description",
-          "hideLabel",
-          "indeterminate",
-        ])}
-        {...inputProps}
-        type="checkbox"
-        className="navds-checkbox__input"
-        aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
-        ref={(el) => {
-          if (el) {
-            el.indeterminate = props.indeterminate ?? false;
+    return (
+      <div
+        className={cl(
+          props.className,
+          "navds-checkbox",
+          `navds-checkbox--${size}`,
+          {
+            "navds-checkbox--error": hasError,
+            "navds-checkbox--disabled": inputProps.disabled,
           }
+        )}
+      >
+        <input
+          {...omit(props, [
+            "children",
+            "size",
+            "error",
+            "description",
+            "hideLabel",
+            "indeterminate",
+          ])}
+          {...inputProps}
+          type="checkbox"
+          className="navds-checkbox__input"
+          aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
+          ref={(el) => {
+            if (el) {
+              el.indeterminate = props.indeterminate ?? false;
+            }
 
-          if (typeof ref === "function") {
-            ref(el);
-          } else if (ref != null) {
-            ref.current = el;
-          }
-        }}
-      />
-      <label htmlFor={inputProps.id} className="navds-checkbox__label">
-        <div
-          className={cl("navds-checkbox__content", {
-            "navds-sr-only": props.hideLabel,
-          })}
-        >
-          <BodyShort as="div" size={size}>
-            {props.children}
-          </BodyShort>
-          {props.description && (
-            <Description
-              as="div"
-              size="small"
-              className="navds-checkbox__description"
-            >
-              {props.description}
-            </Description>
-          )}
-        </div>
-      </label>
-    </div>
-  );
-});
+            if (typeof ref === "function") {
+              ref(el);
+            } else if (ref != null) {
+              ref.current = el;
+            }
+          }}
+        />
+        <label htmlFor={inputProps.id} className="navds-checkbox__label">
+          <div
+            className={cl("navds-checkbox__content", {
+              "navds-sr-only": props.hideLabel,
+            })}
+          >
+            <BodyShort as="div" size={size}>
+              {props.children}
+            </BodyShort>
+            {props.description && (
+              <Description
+                as="div"
+                size="small"
+                className="navds-checkbox__description"
+              >
+                {props.description}
+              </Description>
+            )}
+          </div>
+        </label>
+      </div>
+    );
+  }
+);
 
 export default Checkbox;

package/src/form/checkbox/CheckboxGroup.tsx

@@ -35,7 +35,10 @@ export interface CheckboxGroupProps
   onChange?: (value: any[]) => void;
 }
 
-const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
+export const CheckboxGroup = forwardRef<
+  HTMLFieldSetElement,
+  CheckboxGroupProps
+>(
   (
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref