@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
49 lines • 3.15 kB
JavaScript
import React, { forwardRef } from "react";
import { BodyShort } from "../../typography/index.js";
import { omit, useId } from "../../utils-external/index.js";
import { cl } from "../../utils/helpers/index.js";
import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon.js";
import useCheckbox from "./useCheckbox.js";
export const Checkbox = forwardRef((props, ref) => {
const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
const descriptionId = useId();
return (React.createElement("div", { className: cl(props.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"] },
React.createElement("div", { className: "aksel-checkbox__input-wrapper" },
React.createElement("input", Object.assign({}, 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) => {
var _a;
if (el) {
el.indeterminate = (_a = props.indeterminate) !== null && _a !== void 0 ? _a : false;
}
if (typeof ref === "function") {
ref(el);
}
else if (ref != null) {
ref.current = el;
}
} })),
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 10", fill: "none", focusable: false, role: "img", "aria-hidden": true, className: "aksel-checkbox__icon" },
React.createElement("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" }))),
React.createElement(BodyShort, { as: "label", htmlFor: inputProps.id, size: size, className: cl("aksel-checkbox__label", {
"aksel-sr-only": props.hideLabel,
}) },
!nested && readOnly && React.createElement(ReadOnlyIconWithTitle, null),
props.children),
props.description && (React.createElement(BodyShort, { id: descriptionId, size: size, className: "aksel-form-field__subdescription aksel-checkbox__description" }, props.description))));
});
export default Checkbox;
//# sourceMappingURL=Checkbox.js.map