@mobilestockweb/form 1.0.3 → 1.0.5

package/index.d.ts

@@ -45,7 +45,14 @@ type EventOnChangeRemoveFile = {
 };
 interface MultipleArchiveProps extends Omit<MultipleArchiveProviderProps, 'children' | 'accept'> {
     children?: React.ReactNode;
+    /**
+     * @description Accepted file types. Can be an array of TypeFiles enum values or a string in the same format as the HTML input accept attribute.
+     */
     accept?: (keyof typeof TypeFiles)[] | string;
+    /**
+     * @default 'START'
+     * @description Alignment of the label text.
+     */
     alignLabel?: 'END' | 'CENTER' | 'START';
     label?: string;
 }
@@ -92,10 +99,30 @@ interface CounterRootProps {
     minCount?: number;
     label?: string;
     name: string;
+    /**
+     * @default false
+     * @description if true, the Display component will be editable, allowing the user to type a number directly into it.
+     */
     editable?: boolean;
+    /**
+     * @default 1
+     * @description The value by which the counter increments or decrements when the buttons are pressed in long press mode.
+     */
     multiplier?: number;
+    /**
+     * @default 'TOP_START'
+     * @description Position of the label relative to the counter.
+     */
     labelPosition?: 'TOP_START' | 'LEFT' | 'TOP_CENTER';
+    /**
+     * @default false
+     * @description If true, the buttons will have a transparent background.
+     */
     buttonTransparent?: boolean;
+    /**
+     * @default false
+     * @description If true, the counter elements (buttons and display) will be grouped together.
+     */
     groupElements?: boolean;
     onChange?(data: {
         value: number;
@@ -131,7 +158,15 @@ type TypeEventOnChange = EventOnChangeRemoveImage | EventOnChangeReorderImages |
 type PhotoListProviderProps<TypeEventOnChangeGeneric extends TypeEventOnChange = TypeEventOnChange> = {
     children: ReactNode;
     onChange?(event: TypeEventOnChangeGeneric): void;
+    /**
+     * @default true
+     * @description Allows selection of multiple images.
+     */
     multiple?: boolean;
+    /**
+     * @default true
+     * @description Enables drag and drop functionality for reordering images.
+     */
     dragAndDrop?: boolean;
     buttonAddDirection?: 'LEFT' | 'RIGHT';
     name: string;
@@ -153,8 +188,20 @@ type EventOnChangeCropSave = {
 };
 interface PhotoInputProps extends Omit<PhotoListProviderProps, 'children'> {
     label?: string;
+    /**
+     * @default 'START'
+     * @description Alignment of the label text.
+     */
     alignLabel?: 'END' | 'CENTER' | 'START';
+    /**
+     * @default 'LEFT'
+     * @description Direction of the add button.
+     */
     buttonAddDirection?: 'LEFT' | 'RIGHT';
+    /**
+     * @default 0
+     * @description Number of images visible in the viewport.
+     */
     numberOfImagesVisible?: number;
 }
 declare function FormPhotoList({ label, alignLabel, buttonAddDirection, numberOfImagesVisible, ...props }: PhotoInputProps): react_jsx_runtime.JSX.Element;

package/index.js

@@ -42,7 +42,7 @@
   text-align: center;
   width: 40px;
   height: 34px;
-`;he.displayName="Form.FormCounter.Display";var R=require("react/jsx-runtime");function Kt(){let{label:e,labelPosition:t,error:o}=U();return(0,R.jsxs)(re.Container.Vertical,{align:"CENTER_START",children:[t==="TOP_START"&&e&&(0,R.jsxs)(re.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,R.jsx)(oe,{children:e}),o&&(0,R.jsx)(Y,{children:o})]}),t!=="LEFT"&&(0,R.jsxs)(re.Container.Vertical,{align:"CENTER",children:[t!=="TOP_START"&&(e||o)&&(0,R.jsxs)(re.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[e&&(0,R.jsx)(oe,{children:e}),o&&(0,R.jsx)(Y,{children:o})]}),(0,R.jsxs)(ge,{children:[(0,R.jsx)(Q,{type:"MINUS"}),(0,R.jsx)(he,{}),(0,R.jsx)(Q,{type:"PLUS"})]})]}),t==="LEFT"&&(0,R.jsx)(re.Container.Vertical,{children:(0,R.jsxs)(re.Container.Horizontal,{align:"CENTER",children:[(e||o)&&(0,R.jsxs)(re.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[e&&(0,R.jsx)(oe,{children:e}),o&&(0,R.jsx)(Y,{children:o})]}),(0,R.jsxs)(ge,{children:[(0,R.jsx)(Q,{type:"MINUS"}),(0,R.jsx)(he,{}),(0,R.jsx)(Q,{type:"PLUS"})]})]})})]})}var Ne=require("react/jsx-runtime");function Zt(o){var n=o,{children:e}=n,t=P(n,["children"]);return(0,Ne.jsx)(xt,v(h({buttonTransparent:!1,labelPosition:"TOP_START",multiplier:1},t),{children:e?(0,Ne.jsx)(Ut,{children:e}):(0,Ne.jsx)(Kt,{})}))}var Yt=require("react/jsx-runtime");function Ke(e){return(0,Yt.jsx)(Q,v(h({},e),{type:"MINUS"}))}Ke.displayName="Form.FormCounter.Minus";var Jt=require("react/jsx-runtime");function Ze(e){return(0,Jt.jsx)(Q,v(h({},e),{type:"PLUS"}))}Ze.displayName="Form.FormCounter.Plus";var Qt=Object.assign(Zt,{Display:he,Plus:Ze,Minus:Ke,Badge:Fe});var jt=require("@mobilestockweb/container");var to=require("react/jsx-runtime");function eo(o){var n=o,{children:e}=n,t=P(n,["children"]);return(0,to.jsx)(jt.Container.Horizontal,v(h({gap:"SM"},t),{children:e}))}var oo=require("@unform/core"),O=require("react"),Pe=I(require("styled-components")),ro=require("@mobilestockweb/button"),Je=require("@mobilestockweb/container"),Ye=I(require("@mobilestockweb/tools")),Qe=require("@mobilestockweb/typography");var ne=require("react/jsx-runtime"),no=(0,O.forwardRef)(function(s,b){var m=s,{name:t,label:o,defaultValue:n,type:r,autoSubmit:u,full:i,error:l,format:a,onChange:g,maxLength:c}=m,p=P(m,["name","label","defaultValue","type","autoSubmit","full","error","format","onChange","maxLength"]);let{loading:E}=k(),C=(0,oo.useField)(t),d=(0,O.useRef)(null),[F,L]=(0,O.useState)(!1),[y,S]=(0,O.useState)(""),B=r==="password",N=r==="tel"?15:r==="zipcode"?9:c,$=t+"-input"+(0,O.useId)();(0,O.useEffect)(()=>{let f=y||n||(C==null?void 0:C.defaultValue)||"";d.current.value=f,S(f),C.registerField({name:C.fieldName,ref:d,getValue:T=>{var W;return((W=T.current)==null?void 0:W.value)||""},setValue:(T,W)=>{T.current&&(T.current.value=W,S(W))},clearValue:T=>{T.current&&(T.current.value="",S(""))}})},[C==null?void 0:C.fieldName,C==null?void 0:C.registerField]),(0,O.useImperativeHandle)(b,()=>({focus(){var f;(f=d.current)==null||f.focus()},blur(){var f;(f=d.current)==null||f.blur()}}));let ee=(0,O.useCallback)(f=>{let T=f.target.value;switch(r){case"tel":T=Ye.default.phoneNumberFormatter(T);break;case"email":case"url":T=T.trim();break;case"zipcode":T=Ye.default.formatZipcode(T);break}a&&(T=a(T)),S(T),f.target.value=T,d.current.value=T,g==null||g(f),r==="tel"&&u&&T.length===15&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur()),r==="zipcode"&&u&&T.length===9&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur())},[r,a,u,g,C]);function fe(){return r==="password"?F?"text":"password":r}return(0,ne.jsxs)(Kr,{full:i,$show:r!=="hidden",children:[o&&(0,ne.jsx)(Zr,{htmlFor:$,size:"SM",children:o}),(0,ne.jsxs)(Yr,{align:"CENTER",padding:"XS_NONE",gap:"SM",$isError:!!(C!=null&&C.error),$isPassword:B,children:[(0,ne.jsx)(Jr,v(h({},p),{ref:d,id:$,value:y,onChange:ee,maxLength:N,type:fe(),disabled:E||p.disabled})),B&&(0,ne.jsx)(ro.Button,{size:"SM",onClick:()=>L(!F),icon:F?"EyeOutline":"EyeOff",variant:"TRANSPARENT",type:"button"})]}),(C==null?void 0:C.error)&&(0,ne.jsx)(Qe.Typography,{color:"DANGER",size:"SM",children:C==null?void 0:C.error})]})}),Kr=(0,Pe.default)(Je.Container.Vertical)`
+`;he.displayName="Form.FormCounter.Display";var R=require("react/jsx-runtime");function Kt(){let{label:e,labelPosition:t,error:o}=U();return(0,R.jsxs)(re.Container.Vertical,{align:"CENTER_START",children:[t==="TOP_START"&&e&&(0,R.jsxs)(re.Container.Horizontal,{padding:"NONE_NONE_2XS_NONE",gap:"2XS",children:[(0,R.jsx)(oe,{children:e}),o&&(0,R.jsx)(Y,{children:o})]}),t!=="LEFT"&&(0,R.jsxs)(re.Container.Vertical,{align:"CENTER",children:[t!=="TOP_START"&&(e||o)&&(0,R.jsxs)(re.Container.Vertical,{align:"CENTER",padding:"NONE_NONE_2XS_NONE",children:[e&&(0,R.jsx)(oe,{children:e}),o&&(0,R.jsx)(Y,{children:o})]}),(0,R.jsxs)(ge,{children:[(0,R.jsx)(Q,{type:"MINUS"}),(0,R.jsx)(he,{}),(0,R.jsx)(Q,{type:"PLUS"})]})]}),t==="LEFT"&&(0,R.jsx)(re.Container.Vertical,{children:(0,R.jsxs)(re.Container.Horizontal,{align:"CENTER",children:[(e||o)&&(0,R.jsxs)(re.Container.Vertical,{padding:"NONE_2XS_NONE_NONE",children:[e&&(0,R.jsx)(oe,{children:e}),o&&(0,R.jsx)(Y,{children:o})]}),(0,R.jsxs)(ge,{children:[(0,R.jsx)(Q,{type:"MINUS"}),(0,R.jsx)(he,{}),(0,R.jsx)(Q,{type:"PLUS"})]})]})})]})}var Ne=require("react/jsx-runtime");function Zt(o){var n=o,{children:e}=n,t=P(n,["children"]);return(0,Ne.jsx)(xt,v(h({buttonTransparent:!1,labelPosition:"TOP_START",multiplier:1},t),{children:e?(0,Ne.jsx)(Ut,{children:e}):(0,Ne.jsx)(Kt,{})}))}var Yt=require("react/jsx-runtime");function Ke(e){return(0,Yt.jsx)(Q,v(h({},e),{type:"MINUS"}))}Ke.displayName="Form.FormCounter.Minus";var Jt=require("react/jsx-runtime");function Ze(e){return(0,Jt.jsx)(Q,v(h({},e),{type:"PLUS"}))}Ze.displayName="Form.FormCounter.Plus";var Qt=Object.assign(Zt,{Display:he,Plus:Ze,Minus:Ke,Badge:Fe});var jt=require("@mobilestockweb/container");var to=require("react/jsx-runtime");function eo(o){var n=o,{children:e}=n,t=P(n,["children"]);return(0,to.jsx)(jt.Container.Horizontal,v(h({gap:"SM"},t),{children:e}))}var oo=require("@unform/core"),O=require("react"),Pe=I(require("styled-components")),ro=require("@mobilestockweb/button"),Je=require("@mobilestockweb/container"),Ye=I(require("@mobilestockweb/tools")),Qe=require("@mobilestockweb/typography");var ne=require("react/jsx-runtime"),no=(0,O.forwardRef)(function(s,b){var m=s,{name:t,label:o,defaultValue:n,type:r,autoSubmit:u,full:i,error:l,format:a,onChange:g,maxLength:c}=m,p=P(m,["name","label","defaultValue","type","autoSubmit","full","error","format","onChange","maxLength"]);let{loading:E}=k(),C=(0,oo.useField)(t),d=(0,O.useRef)(null),[F,L]=(0,O.useState)(!1),[y,S]=(0,O.useState)(""),B=r==="password",N=r==="tel"?15:r==="zipcode"?9:c,$=t+"-input"+(0,O.useId)();(0,O.useEffect)(()=>{let f=y||n||(C==null?void 0:C.defaultValue)||"";d.current.value=f,S(f),C.registerField({name:C.fieldName,ref:d,getValue:T=>{var W;return((W=T.current)==null?void 0:W.value)||""},setValue:(T,W)=>{T.current&&(T.current.value=W,S(W))},clearValue:T=>{T.current&&(T.current.value="",S(""))}})},[C==null?void 0:C.fieldName,C==null?void 0:C.registerField]),(0,O.useImperativeHandle)(b,()=>({focus(){var f;(f=d.current)==null||f.focus()},blur(){var f;(f=d.current)==null||f.blur()}}));let ee=(0,O.useCallback)(f=>{let T=f.target.value;switch(r){case"tel":T=Ye.default.phoneNumberFormatter(T);break;case"email":case"url":T=T.trim();break;case"zipcode":T=Ye.default.formatZipcode(T);break}a&&(T=a(T)),S(T),f.target.value=T,d.current.value=T,g==null||g(f),r==="tel"&&u&&T.length===15&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur()),r==="zipcode"&&u&&T.length===9&&d.current.form&&(d.current.form.requestSubmit(),d.current.blur())},[r,a,u,g,C]);function fe(){return r==="password"?F?"text":"password":r}return(0,ne.jsxs)(Kr,{full:i,$show:r!=="hidden",children:[o&&(0,ne.jsx)(Zr,{htmlFor:$,size:"SM",children:o}),(0,ne.jsxs)(Yr,{align:"CENTER",padding:"XS_NONE",gap:"SM",$isError:!!(C!=null&&C.error),$isPassword:B,children:[(0,ne.jsx)(Jr,v(h({},p),{ref:d,id:$,value:y,onChange:ee,maxLength:N,type:fe(),disabled:E||p.disabled})),B&&(0,ne.jsx)(ro.Button,{size:"SM",onClick:()=>L(!F),icon:F?"EyeOutline":"EyeOff",variant:"TRANSPARENT",type:"button"})]}),!!(C!=null&&C.error)&&(0,ne.jsx)(Qe.Typography,{color:"DANGER",size:"SM",children:C==null?void 0:C.error})]})}),Kr=(0,Pe.default)(Je.Container.Vertical)`
   display: ${({$show:e})=>e?"flex":"none"};
 `,Zr=(0,Pe.default)(Qe.Typography).attrs({forwardedAs:"label"})``,Yr=(0,Pe.default)(Je.Container.Horizontal)`
   padding: ${({$isPassword:e})=>e?"0 0 0 10px":"0 10px"};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobilestockweb/form",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "main": "index.js",
   "dependencies": {
     "notistack": "^3.0.1",
@@ -14,13 +14,13 @@
     "ua-parser-js": "^2.0.6",
     "react-image-crop": "^11.0.10",
     "react-modal": "^3.16.3",
-    "@mobilestockweb/button": "^1.0.12",
+    "@mobilestockweb/button": "^1.0.13",
     "@mobilestockweb/badge": "^0.0.6",
-    "@mobilestockweb/snackbar": "^0.0.17",
+    "@mobilestockweb/snackbar": "^0.0.18",
     "@mobilestockweb/tools": "^0.0.16",
     "@mobilestockweb/typography": "^0.0.6",
-    "@mobilestockweb/clickable": "^1.0.7",
-    "@mobilestockweb/data-table": "^1.0.2",
+    "@mobilestockweb/clickable": "^1.0.8",
+    "@mobilestockweb/data-table": "^2.0.1",
     "@mobilestockweb/spacer": "^1.0.6",
     "@mobilestockweb/container": "^1.0.0"
   },