@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
55 lines • 3.55 kB
JavaScript
import React, { forwardRef } from "react";
import { useRenameCSS } from "../../theme/Theme.js";
import { BodyShort } from "../../typography/index.js";
import { omit } from "../../util/index.js";
import { useId } from "../../util/hooks/index.js";
import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon.js";
import useCheckbox from "./useCheckbox.js";
export const Checkbox = forwardRef((props, ref) => {
const { cn } = useRenameCSS();
const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
const labelId = useId();
const descriptionId = useId();
return (React.createElement("div", { className: cn(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
"navds-checkbox--error": hasError,
"navds-checkbox--disabled": inputProps.disabled,
"navds-checkbox--readonly": readOnly,
}), "data-color": hasError ? "danger" : props["data-color"] },
React.createElement("input", Object.assign({}, omit(props, [
"children",
"size",
"error",
"description",
"hideLabel",
"indeterminate",
"errorId",
"readOnly",
]), omit(inputProps, ["aria-invalid"]), { type: "checkbox", className: cn("navds-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;
}
}, "aria-labelledby": cn(labelId, !!props["aria-labelledby"] && props["aria-labelledby"], {
[descriptionId]: props.description,
}) })),
React.createElement("label", { htmlFor: inputProps.id, className: cn("navds-checkbox__label") },
React.createElement("span", { className: cn("navds-checkbox__icon") },
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0.8125rem", height: "0.625rem", viewBox: "0 0 13 10", fill: "none", focusable: false, role: "img", "aria-hidden": true },
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("span", { className: cn("navds-checkbox__icon-indeterminate") }),
React.createElement("span", { className: cn("navds-checkbox__content", {
"navds-sr-only": props.hideLabel,
}) },
React.createElement(BodyShort, { as: "span", id: labelId, size: size, className: cn("navds-checkbox__label-text"), "aria-hidden": true },
!nested && readOnly && React.createElement(ReadOnlyIconWithTitle, null),
props.children),
props.description && (React.createElement(BodyShort, { as: "span", id: descriptionId, size: size, className: cn("navds-form-field__subdescription navds-checkbox__description"), "aria-hidden": true }, props.description))))));
});
export default Checkbox;
//# sourceMappingURL=Checkbox.js.map