@obosbbl/grunnmuren-react 0.1.1 → 0.2.2

package/dist/TextArea/TextArea.d.ts

@@ -7,5 +7,7 @@ export interface TextAreaProps extends React.ComponentPropsWithoutRef<'textarea'
     error?: string;
     /**  Label for the form control */
     label: string;
+    /** Automatically valdiate the form control using the HTML constraint validation API. @default true */
+    validate?: boolean;
 }
 export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/TextField/TextField.d.ts

@@ -8,5 +8,7 @@ export interface TextFieldProps extends React.ComponentPropsWithoutRef<'input'>
     /**  Label for the form control */
     label: string;
     prefix?: string;
+    /** Automatically valdiate the form control using the HTML constraint validation API. @default true */
+    validate?: boolean;
 }
 export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/grunnmuren.es.js

@@ -248,25 +248,33 @@ function useMedia(query) {
   return matches;
 }
 const useScreenMaxWidthMd = () => useMedia("(max-width: 767.9px)");
-function useFormControlValidity(ref) {
+function useFormControlValidity(ref, enabled = true) {
   const [validity, setValidity] = useState("indeterminate");
-  const onBlur = (event) => {
+  const [validationMessage, setValidationMessage] = useState();
+  const onBlur = useCallback((event) => {
     const isValid = event.target.checkValidity();
-    if (isValid) {
+    if (isValid && enabled) {
       setValidity("valid");
+      setValidationMessage(void 0);
     }
-  };
-  const onInput = (event) => {
-    if (validity !== "indeterminate") {
+  }, [enabled]);
+  const onInput = useCallback((event) => {
+    if (enabled && validity !== "indeterminate") {
       const isValid = event.target.checkValidity();
       if (isValid) {
         setValidity("valid");
+        setValidationMessage(void 0);
       }
     }
-  };
-  const onInvalid = () => {
-    setValidity("invalid");
-  };
+  }, [enabled, validity]);
+  const onInvalid = useCallback((event) => {
+    if (enabled) {
+      event.preventDefault();
+      const message = event.target.validationMessage;
+      setValidationMessage(message);
+      setValidity("invalid");
+    }
+  }, [enabled]);
   useEffect(() => {
     const { current } = ref;
     current == null ? void 0 : current.addEventListener("blur", onBlur);
@@ -278,7 +286,7 @@ function useFormControlValidity(ref) {
       current == null ? void 0 : current.removeEventListener("invalid", onInvalid);
     };
   });
-  return { validity };
+  return { validity, validationMessage };
 }
 function useFallbackId(id) {
   const generatedId = useId();
@@ -985,21 +993,25 @@ const TextArea = forwardRef((props, ref) => {
     error,
     id: idProp,
     label,
-    required
+    required,
+    validate = true
   } = _a, rest = __objRest(_a, [
     "description",
     "error",
     "id",
     "label",
-    "required"
+    "required",
+    "validate"
   ]);
   const ownRef = useRef(null);
   const {
-    validity
-  } = useFormControlValidity(ownRef);
+    validity,
+    validationMessage
+  } = useFormControlValidity(ownRef, validate);
   const id = useFallbackId(idProp);
-  const helpTextId = id + "-help";
-  const errorMsgId = id + "-err-msg";
+  const helpTextId = id + "help";
+  const errorMsgId = id + "err";
+  const errorMsg = error != null ? error : validationMessage;
   return /* @__PURE__ */ jsxs("div", {
     className: "grid gap-2",
     children: [/* @__PURE__ */ jsx(FormLabel, {
@@ -1020,9 +1032,9 @@ const TextArea = forwardRef((props, ref) => {
     })), description && /* @__PURE__ */ jsx(FormHelperText, {
       id: helpTextId,
       children: description
-    }), error && /* @__PURE__ */ jsx(FormErrorMessage, {
+    }), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
       id: errorMsgId,
-      children: error
+      children: errorMsg
     })]
   });
 });
@@ -1033,22 +1045,26 @@ const TextField = forwardRef((props, ref) => {
     id: idProp,
     label,
     required,
-    type = "text"
+    type = "text",
+    validate = true
   } = _a, rest = __objRest(_a, [
     "description",
     "error",
     "id",
     "label",
     "required",
-    "type"
+    "type",
+    "validate"
   ]);
   const ownRef = useRef(null);
   const {
-    validity
-  } = useFormControlValidity(ownRef);
+    validity,
+    validationMessage
+  } = useFormControlValidity(ownRef, validate);
   const id = useFallbackId(idProp);
-  const helpTextId = id + "-help";
-  const errorMsgId = id + "-err";
+  const helpTextId = id + "help";
+  const errorMsgId = id + "err";
+  const errorMsg = error != null ? error : validationMessage;
   return /* @__PURE__ */ jsxs("div", {
     className: "grid gap-2",
     children: [/* @__PURE__ */ jsx(FormLabel, {
@@ -1069,9 +1085,9 @@ const TextField = forwardRef((props, ref) => {
     })), description && /* @__PURE__ */ jsx(FormHelperText, {
       id: helpTextId,
       children: description
-    }), error && /* @__PURE__ */ jsx(FormErrorMessage, {
+    }), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
       id: errorMsgId,
-      children: error
+      children: errorMsg
     })]
   });
 });

package/dist/hooks/useFormControlValidity.d.ts

@@ -8,7 +8,8 @@ declare type Validity = 'indeterminate' | 'invalid' | 'valid';
  */
 export declare function useFormControlValidity(ref: RefObject<HTMLElement & {
     checkValidity(): boolean;
-}>): {
+}>, enabled?: boolean): {
     validity: Validity;
+    validationMessage: string | undefined;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -18,12 +18,12 @@
   "types": "./dist/index.d.ts",
   "devDependencies": {
     "@babel/core": "7.17.10",
-    "@storybook/addon-controls": "6.4.22",
-    "@storybook/addon-docs": "6.4.22",
+    "@storybook/addon-controls": "6.5.4",
+    "@storybook/addon-docs": "6.5.4",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.4.22",
-    "@storybook/manager-webpack5": "6.4.22",
-    "@storybook/react": "6.4.22",
+    "@storybook/builder-webpack5": "6.5.4",
+    "@storybook/manager-webpack5": "6.5.4",
+    "@storybook/react": "6.5.4",
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.3",
     "@vitejs/plugin-react": "1.3.2",
@@ -31,11 +31,12 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "tailwindcss": "3.0.24",
-    "vite": "2.9.9"
+    "vite": "2.9.9",
+    "webpack": "5.72.1"
   },
   "dependencies": {
     "@obosbbl/grunnmuren-icons": "^0.3.0",
-    "@obosbbl/grunnmuren-tailwind": "^0.2.1",
+    "@obosbbl/grunnmuren-tailwind": "^0.3.1",
     "clsx": "1.1.1"
   },
   "peerDependencies": {