@yakad/ui 1.2.110-beta → 1.2.111-beta

package/checkbox/checkbox.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
     name?: string;
     label?: string;
+    checked?: boolean;
     disabled?: boolean;
 }
 export default function Chekbox(props: CheckboxProps): JSX.Element;

package/checkbox/checkbox.js

@@ -5,14 +5,13 @@ import styles from "./checkbox.module.css";
 import { joinClassNames } from "@yakad/lib";
 export default function Chekbox(props) {
     const joinedClassNames = joinClassNames(styles.checkbox, props.label ? styles.labeled : "");
-    const [checked, setChecked] = React.useState();
-    const onChangeCheckboxHandler = (event) => {
-        const targetInputElement = event.target;
-        setChecked(targetInputElement.checked);
+    const [checked, setChecked] = React.useState(props.checked ? props.checked : false);
+    const onClickCheckboxHandler = () => {
+        setChecked((value) => !value);
     };
     return (React.createElement("div", { className: joinedClassNames },
         props.label ? (React.createElement("label", { className: styles.label, htmlFor: props.name }, props.label)) : null,
-        React.createElement(Button, { disabled: props.disabled, icon: checked ? "check_box" : "check_box_outline_blank" }),
-        React.createElement("input", { ...props, className: styles.input, type: "checkbox", name: props.name, disabled: props.disabled, onChange: (event) => onChangeCheckboxHandler(event) })));
+        React.createElement(Button, { disabled: props.disabled, icon: checked ? "check_box" : "check_box_outline_blank", onClick: (event) => onClickCheckboxHandler() }),
+        React.createElement("input", { ...props, className: styles.input, type: "checkbox", name: props.name, checked: checked, disabled: props.disabled })));
 }
 //# sourceMappingURL=checkbox.js.map

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAQ5C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAoB;IAChD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,QAAQ,EACf,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CACpC,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAW,CAAC;IACxD,MAAM,uBAAuB,GAAG,CAC5B,KAAwC,EAC1C,EAAE;QACA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC5D,UAAU,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,gBAAgB;QAC3B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACX,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,IAC9C,KAAK,CAAC,KAAK,CACR,CACX,CAAC,CAAC,CAAC,IAAI;QACR,oBAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,yBAAyB,GACzD;QACF,kCACQ,KAAK,EACT,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAuB,CAAC,KAAK,CAAC,GACrD,CACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAS5C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAoB;IAChD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,QAAQ,EACf,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CACpC,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CACxC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CACxC,CAAC;IACF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,SAAS,EAAE,gBAAgB;QAC3B,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACX,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,IAC9C,KAAK,CAAC,KAAK,CACR,CACX,CAAC,CAAC,CAAC,IAAI;QACR,oBAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,yBAAyB,EACvD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,sBAAsB,EAAE,GAC9C;QACF,kCACQ,KAAK,EACT,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,CACA,CACT,CAAC;AACN,CAAC"}

package/checkbox/checkbox.module.css

@@ -1,27 +1,22 @@
 .checkbox {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  width: 4rem;
-  height: 4rem;
+    display: flex;
+    flex-direction: row;
+    width: 4rem;
+    height: 4rem;
 }
 .checkbox.labeled {
-  width: 100%;
+    width: 100%;
 }
 
 .input {
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
+    display: none;
 }
 
 .label {
-  display: block;
-  width: auto;
-  margin: 0.9rem 1rem;
-  margin-inline-end: auto;
-  line-height: 2.2rem;
-  font-size: 1.4rem;
+    display: block;
+    width: auto;
+    margin: 0.9rem 1rem;
+    margin-inline-end: auto;
+    line-height: 2.2rem;
+    font-size: 1.4rem;
 }

package/checkbox/checkbox.tsx

@@ -8,6 +8,7 @@ import { joinClassNames } from "@yakad/lib";
 export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
     name?: string;
     label?: string;
+    checked?: boolean;
     disabled?: boolean;
 }
 
@@ -17,12 +18,11 @@ export default function Chekbox(props: CheckboxProps) {
         props.label ? styles.labeled : ""
     );
 
-    const [checked, setChecked] = React.useState<boolean>();
-    const onChangeCheckboxHandler = (
-        event: React.FormEvent<HTMLInputElement>
-    ) => {
-        const targetInputElement = event.target as HTMLInputElement;
-        setChecked(targetInputElement.checked);
+    const [checked, setChecked] = React.useState<boolean>(
+        props.checked ? props.checked : false
+    );
+    const onClickCheckboxHandler = () => {
+        setChecked((value) => !value);
     };
 
     return (
@@ -35,14 +35,15 @@ export default function Chekbox(props: CheckboxProps) {
             <Button
                 disabled={props.disabled}
                 icon={checked ? "check_box" : "check_box_outline_blank"}
+                onClick={(event) => onClickCheckboxHandler()}
             />
             <input
                 {...props}
                 className={styles.input}
                 type="checkbox"
                 name={props.name}
+                checked={checked}
                 disabled={props.disabled}
-                onChange={(event) => onChangeCheckboxHandler(event)}
             />
         </div>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.110-beta",
+    "version": "1.2.111-beta",
     "description": "UI components for NextJS/React",
     "main": "./src/index.js",
     "scripts": {