@k8slens/lds-form 0.39.0 → 0.39.2

package/lib/cjs/FormField/FormField.d.ts

@@ -24,7 +24,7 @@ CustomError extends string> extends Pick<FormFieldProps, "label" | "labelProps"
     validate?: Validator<T, CustomError>;
     /** Return error message for given error key. */
     errorParser?: ErrorParser<T, CustomError>;
-    onChange: (value: T, isValid: boolean) => void;
+    onChange?: (value: T, isValid: boolean) => void;
 }
 /**
  * Generic form field component with label and error message.

package/lib/cjs/FormInput/FormInput.js

@@ -1 +1 @@
-"use strict";var r=require("../_virtual/_tslib.js"),e=require("react"),a=require("../common/usePrevious.js"),l=require("../common/useFieldIds.js"),i=require("../common/useInputErrorProps.js"),u=require("../common/useFormComponentData.js"),o=require("../FormField/FormField.js"),n=require("../common/helpers.js"),s=require("../node_modules/@k8slens/lds/lib/es/Input/Input.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var d=t(e);var v=function(r,e,a,l,i){void 0===i&&(i={valid:!0});var u=i;if(l&&null!==l&&(u=n.getInputValidity(l)),a){var o=a(r,u,e.name,e);"string"==typeof o?(u[o]=!0,u.valid=!1):o&&(o.forEach((function(r){u[r]=!0})),u.valid=!1)}return u};module.exports=function(t){var p=t.id,c=t.label,f=t.wrapperProps,m=t.labelProps,P=t.validate,_=t.errorParser,b=void 0===_?u.defaultErrorParser:_,y=t.errorProps,g=t.value,I=t.onChange,q=t.type,j=r.__rest(t,["id","label","wrapperProps","labelProps","validate","errorParser","errorProps","value","onChange","type"]),F=a.usePrevious(g),E=e.useRef(null),C=l.useFieldIds(p),h=C.id,V=C.labelId,k=C.errorId,w=u.useFormComponentData({value:g,errorParser:b,constraints:j,label:c}),D=w.currentValue,x=w.setCurrentValue,N=w.errors,R=i.useInputErrorProps({id:k,errors:N}),z=e.useCallback((function(e){var a=e.target,l=function(r,e){return"number"===e?parseFloat(r):r}(a.value,q),i=v(l,j,P,a,r.__assign({},a.validity));x({value:l,validity:r.__assign({},i)}),I(l,null==i?void 0:i.valid)}),[q,P,I,x,j]);return e.useEffect((function(){var e,a;if(F!==g&&g!==D.value){var l=g;E.current&&n.setNativeValue(E.current,l);var u=v(l,i.useInputErrorProps,P,E.current),o=null===(e=D.validity)||void 0===e?void 0:e.valid,s=null==u?void 0:u.valid;x({value:l,validity:u}),o!==s&&I(l,s)}else if(D.validity){var t=v(D.value,j,P,E.current);(o=null===(a=D.validity)||void 0===a?void 0:a.valid)!==(s=null==t?void 0:t.valid)&&(x((function(e){return r.__assign(r.__assign({},e),{validity:t})})),I(D.value,s))}}),[P,g,F,D,x,I,j]),d.default.createElement(o,r.__assign({id:h,label:c,labelId:V,errorId:k,errors:N,required:j.required,labelProps:m,errorProps:y},f),d.default.createElement(s,r.__assign({ref:E,id:h,"aria-labelledby":V},R,j,{type:q,value:null==D?void 0:D.value,onChange:z})))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),l=require("../common/usePrevious.js"),a=require("../common/useFieldIds.js"),u=require("../common/useInputErrorProps.js"),i=require("../common/useFormComponentData.js"),o=require("../FormField/FormField.js"),n=require("../common/helpers.js"),t=require("../node_modules/@k8slens/lds/lib/es/Input/Input.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(r);var v=function(e,r,l,a,u){void 0===u&&(u={valid:!0});var i=u;if(a&&null!==a&&(i=n.getInputValidity(a)),l){var o=l(e,i,r.name,r);"string"==typeof o?(i[o]=!0,i.valid=!1):o&&(o.forEach((function(e){i[e]=!0})),i.valid=!1)}return i};module.exports=function(s){var p=s.id,c=s.label,f=s.wrapperProps,m=s.labelProps,P=s.validate,_=s.errorParser,b=void 0===_?i.defaultErrorParser:_,y=s.errorProps,g=s.value,I=s.onChange,q=s.type,j=e.__rest(s,["id","label","wrapperProps","labelProps","validate","errorParser","errorProps","value","onChange","type"]),F=l.usePrevious(g),E=r.useRef(null),C=a.useFieldIds(p),V=C.id,h=C.labelId,k=C.errorId,w=i.useFormComponentData({value:g,errorParser:b,constraints:j,label:c}),D=w.currentValue,x=w.setCurrentValue,N=w.errors,R=u.useInputErrorProps({id:k,errors:N}),z=r.useCallback((function(r){var l=r.target,a=function(e,r){return"number"===r?parseFloat(e):e}(l.value,q),u=v(a,j,P,l,e.__assign({},l.validity));x({value:a,validity:e.__assign({},u)}),null==I||I(a,null==u?void 0:u.valid)}),[q,P,I,x,j]);return r.useEffect((function(){var r,l;if(F!==g&&g!==D.value){var a=g;E.current&&n.setNativeValue(E.current,a);var i=v(a,u.useInputErrorProps,P,E.current),o=null===(r=D.validity)||void 0===r?void 0:r.valid,t=null==i?void 0:i.valid;x({value:a,validity:i}),o!==t&&I(a,t)}else if(D.validity){var s=v(D.value,j,P,E.current);(o=null===(l=D.validity)||void 0===l?void 0:l.valid)!==(t=null==s?void 0:s.valid)&&(x((function(r){return e.__assign(e.__assign({},r),{validity:s})})),I(D.value,t))}}),[P,g,F,D,x,I,j]),d.default.createElement(o,e.__assign({id:V,label:c,labelId:h,errorId:k,errors:N,required:j.required,labelProps:m,errorProps:y},f),d.default.createElement(t,e.__assign({ref:E,id:V,"aria-labelledby":h},R,j,{type:q,defaultValue:null==j?void 0:j.defaultValue,value:null==D?void 0:D.value,onChange:z})))};

package/lib/cjs/FormLabel/FormLabel.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "id" | "htmlFor"> {
     id: string;
     forId: string;
-    label: string;
+    label: ReactElement | string;
     required?: boolean;
 }
 /**

package/lib/es/FormField/FormField.d.ts

@@ -24,7 +24,7 @@ CustomError extends string> extends Pick<FormFieldProps, "label" | "labelProps"
     validate?: Validator<T, CustomError>;
     /** Return error message for given error key. */
     errorParser?: ErrorParser<T, CustomError>;
-    onChange: (value: T, isValid: boolean) => void;
+    onChange?: (value: T, isValid: boolean) => void;
 }
 /**
  * Generic form field component with label and error message.

package/lib/es/FormInput/FormInput.js

@@ -1 +1 @@
-import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import l,{useRef as o,useCallback as a,useEffect as i}from"react";import{usePrevious as t}from"../common/usePrevious.js";import{useFieldIds as n}from"../common/useFieldIds.js";import{useInputErrorProps as u}from"../common/useInputErrorProps.js";import{useFormComponentData as v,defaultErrorParser as d}from"../common/useFormComponentData.js";import s from"../FormField/FormField.js";import{setNativeValue as m,getInputValidity as p}from"../common/helpers.js";import f from"../node_modules/@k8slens/lds/lib/es/Input/Input.js";var c=function(r,e,l,o,a){void 0===a&&(a={valid:!0});var i=a;if(o&&null!==o&&(i=p(o)),l){var t=l(r,i,e.name,e);"string"==typeof t?(i[t]=!0,i.valid=!1):t&&(t.forEach((function(r){i[r]=!0})),i.valid=!1)}return i};function b(p){var b=p.id,P=p.label,y=p.wrapperProps,j=p.labelProps,I=p.validate,F=p.errorParser,g=void 0===F?d:F,h=p.errorProps,C=p.value,E=p.onChange,_=p.type,q=r(p,["id","label","wrapperProps","labelProps","validate","errorParser","errorProps","value","onChange","type"]),w=t(C),V=o(null),k=n(b),x=k.id,D=k.labelId,z=k.errorId,A=v({value:C,errorParser:g,constraints:q,label:P}),B=A.currentValue,G=A.setCurrentValue,H=A.errors,J=u({id:z,errors:H}),K=a((function(r){var l=r.target,o=function(r,e){return"number"===e?parseFloat(r):r}(l.value,_),a=c(o,q,I,l,e({},l.validity));G({value:o,validity:e({},a)}),E(o,null==a?void 0:a.valid)}),[_,I,E,G,q]);return i((function(){var r,l;if(w!==C&&C!==B.value){var o=C;V.current&&m(V.current,o);var a=c(o,u,I,V.current),i=null===(r=B.validity)||void 0===r?void 0:r.valid,t=null==a?void 0:a.valid;G({value:o,validity:a}),i!==t&&E(o,t)}else if(B.validity){var n=c(B.value,q,I,V.current);(i=null===(l=B.validity)||void 0===l?void 0:l.valid)!==(t=null==n?void 0:n.valid)&&(G((function(r){return e(e({},r),{validity:n})})),E(B.value,t))}}),[I,C,w,B,G,E,q]),l.createElement(s,e({id:x,label:P,labelId:D,errorId:z,errors:H,required:q.required,labelProps:j,errorProps:h},y),l.createElement(f,e({ref:V,id:x,"aria-labelledby":D},J,q,{type:_,value:null==B?void 0:B.value,onChange:K})))}export{b as default};
+import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import l,{useRef as o,useCallback as a,useEffect as i}from"react";import{usePrevious as t}from"../common/usePrevious.js";import{useFieldIds as n}from"../common/useFieldIds.js";import{useInputErrorProps as u}from"../common/useInputErrorProps.js";import{useFormComponentData as d,defaultErrorParser as v}from"../common/useFormComponentData.js";import s from"../FormField/FormField.js";import{setNativeValue as m,getInputValidity as p}from"../common/helpers.js";import f from"../node_modules/@k8slens/lds/lib/es/Input/Input.js";var c=function(r,e,l,o,a){void 0===a&&(a={valid:!0});var i=a;if(o&&null!==o&&(i=p(o)),l){var t=l(r,i,e.name,e);"string"==typeof t?(i[t]=!0,i.valid=!1):t&&(t.forEach((function(r){i[r]=!0})),i.valid=!1)}return i};function b(p){var b=p.id,P=p.label,y=p.wrapperProps,j=p.labelProps,I=p.validate,F=p.errorParser,g=void 0===F?v:F,h=p.errorProps,C=p.value,E=p.onChange,V=p.type,_=r(p,["id","label","wrapperProps","labelProps","validate","errorParser","errorProps","value","onChange","type"]),q=t(C),w=o(null),k=n(b),x=k.id,D=k.labelId,z=k.errorId,A=d({value:C,errorParser:g,constraints:_,label:P}),B=A.currentValue,G=A.setCurrentValue,H=A.errors,J=u({id:z,errors:H}),K=a((function(r){var l=r.target,o=function(r,e){return"number"===e?parseFloat(r):r}(l.value,V),a=c(o,_,I,l,e({},l.validity));G({value:o,validity:e({},a)}),null==E||E(o,null==a?void 0:a.valid)}),[V,I,E,G,_]);return i((function(){var r,l;if(q!==C&&C!==B.value){var o=C;w.current&&m(w.current,o);var a=c(o,u,I,w.current),i=null===(r=B.validity)||void 0===r?void 0:r.valid,t=null==a?void 0:a.valid;G({value:o,validity:a}),i!==t&&E(o,t)}else if(B.validity){var n=c(B.value,_,I,w.current);(i=null===(l=B.validity)||void 0===l?void 0:l.valid)!==(t=null==n?void 0:n.valid)&&(G((function(r){return e(e({},r),{validity:n})})),E(B.value,t))}}),[I,C,q,B,G,E,_]),l.createElement(s,e({id:x,label:P,labelId:D,errorId:z,errors:H,required:_.required,labelProps:j,errorProps:h},y),l.createElement(f,e({ref:w,id:x,"aria-labelledby":D},J,_,{type:V,defaultValue:null==_?void 0:_.defaultValue,value:null==B?void 0:B.value,onChange:K})))}export{b as default};

package/lib/es/FormLabel/FormLabel.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { type ReactElement } from "react";
 export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "id" | "htmlFor"> {
     id: string;
     forId: string;
-    label: string;
+    label: ReactElement | string;
     required?: boolean;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-form",
-  "version": "0.39.0",
+  "version": "0.39.2",
   "description": "Lens Design System – React Form components",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -28,10 +28,10 @@
     "format": "eslint --fix ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.44.0"
+    "@k8slens/lds": "^0.44.2"
   },
   "devDependencies": {
-    "@k8slens/lds-tokens": "^0.45.0",
+    "@k8slens/lds-tokens": "^0.45.2",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0"
@@ -54,5 +54,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "93855584482cdf3301a19d739d7442f45f90b4ce"
+  "gitHead": "6955684e5055065eeeac4ec8a34762cc0e74bf49"
 }