@mailstep/design-system 0.7.39 → 0.7.40-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.39",
+  "version": "0.7.40-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Forms/Input/Input.d.ts

@@ -1,2 +1,2 @@
-import { InputProps } from './types';
+import { type InputProps } from './types';
 export declare const Input: ({ appearance, type, name, label, value, icon, variant, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, asTextArea, ...rest }: InputProps) => JSX.Element;

package/ui/Forms/Input/Input.js

@@ -35,7 +35,9 @@ export var Input = function (_a) {
     var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;
     var $hasSuffix = !!suffix;
     var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
-    var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
+    var onAddItem = useCallback(function () {
+        setNumber && setNumber(function (base) { return base + 1; });
+    }, [setNumber]);
     var onRemoveItem = useCallback(function () {
         setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
     }, [setNumber]);
@@ -60,5 +62,5 @@ export var Input = function (_a) {
             onEnter === null || onEnter === void 0 ? void 0 : onEnter();
         }
     }, [onEnter]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": name ? "".concat(name, "Inp") : undefined, "data-testid": name ? "input-".concat(name) : undefined, value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
 };

package/ui/index.es.js

@@ -14558,7 +14558,9 @@ const jue = Z.div`
   asTextArea: te = !1,
   ...X
 }) => {
-  const ee = f !== void 0 ? f : !!u, ce = !!V && (!!i || W) && !c && !m, ve = !!w, de = B ? "left" : I, Y = me(() => z && z(($) => $ + 1), [z]), Q = me(() => {
+  const ee = f !== void 0 ? f : !!u, ce = !!V && (!!i || W) && !c && !m, ve = !!w, de = B ? "left" : I, Y = me(() => {
+    z && z(($) => $ + 1);
+  }, [z]), Q = me(() => {
     z && z(($) => $ > 1 ? $ - 1 : 1);
   }, [z]), se = He(), oe = h || se;
   at(() => {
@@ -14575,7 +14577,7 @@ const jue = Z.div`
     /* @__PURE__ */ g.jsxs(cde, { children: [
       n && /* @__PURE__ */ g.jsx(Zf, { htmlFor: r, children: n }),
       /* @__PURE__ */ g.jsxs(dde, { hasValue: !!i, $isInvalid: ee, disabled: !!c, $icon: o, variant: l, children: [
-        /* @__PURE__ */ g.jsx(lde, { autoFocus: H, className: `${e} ${de}`, type: t, name: r, "data-cy": `${r}Inp`, value: i, $isInvalid: ee, $isClearable: ce, $hasSuffix: ve, disabled: c || m, ref: oe, autoComplete: v, onKeyDown: ae, big: T, onBlur: he, $asTextArea: te, variant: l, ...X }),
+        /* @__PURE__ */ g.jsx(lde, { autoFocus: H, className: `${e} ${de}`, type: t, name: r, "data-cy": r ? `${r}Inp` : void 0, "data-testid": r ? `input-${r}` : void 0, value: i, $isInvalid: ee, $isClearable: ce, $hasSuffix: ve, disabled: c || m, ref: oe, autoComplete: v, onKeyDown: ae, big: T, onBlur: he, $asTextArea: te, variant: l, ...X }),
         o && /* @__PURE__ */ g.jsx(Rc, { right: B ? !1 : I === "right", hasValue: !!i, $isInvalid: ee, disabled: c, onClick: P, children: /* @__PURE__ */ g.jsxs(fde, { children: [
           /* @__PURE__ */ g.jsx(wt, { icon: o }),
           O && /* @__PURE__ */ g.jsx("span", { children: O })

package/ui/index.umd.js

@@ -1660,7 +1660,7 @@ Message: ${e}`),e}}const Ba=e=>typeof e=="string",L5=e=>typeof e=="function",TM=
       display: block;
     }
   }
-`,p0e=["text","number","password"],fo=({appearance:e="primary",type:t,name:r,label:n,value:i,icon:o,variant:l="default",disabled:c,error:u,isInvalid:f=void 0,spaceAround:p=!1,inputRef:h,autoComplete:v,isLoading:m,className:y,suffix:w,suffixOnClick:x,errorAppearance:C,iconPlacement:k="left",iconOnClick:M,iconTooltip:P,big:L,showArrowsController:V=!1,onClear:F,alwaysShowClear:H,setNumber:G,onEnter:Z,forceFocus:R=!1,autoFocus:z=!1,onBlur:j,asTextArea:re=!1,...Q})=>{const te=f!==void 0?f:!!u,de=!!F&&(!!i||H)&&!c&&!m,me=!!w,pe=V?"left":k,J=I.useCallback(()=>G&&G(ee=>ee+1),[G]),K=I.useCallback(()=>{G&&G(ee=>ee>1?ee-1:1)},[G]),ce=I.useRef(),le=h||ce;I.useEffect(()=>{var ee;R&&!c&&!m&&((ee=le==null?void 0:le.current)==null||ee.focus())},[c,R,m]);const Ae=I.useCallback(ee=>{var oe,fe,ge,Me,we;j==null||j(ee),R&&(((fe=(oe=ee.relatedTarget)==null?void 0:oe.tagName)==null?void 0:fe.toLowerCase())!=="input"||!p0e.includes((Me=(ge=ee.relatedTarget)==null?void 0:ge.type)==null?void 0:Me.toLowerCase()))&&((we=ee.target)==null||we.focus())},[R,j]),se=I.useCallback(ee=>{ee.key==="Enter"&&(Z==null||Z())},[Z]);return g.jsxs(Ts,{spaceAround:p,className:y,children:[g.jsxs(c0e,{children:[n&&g.jsx(hu,{htmlFor:r,children:n}),g.jsxs(d0e,{hasValue:!!i,$isInvalid:te,disabled:!!c,$icon:o,variant:l,children:[g.jsx(l0e,{autoFocus:z,className:`${e} ${pe}`,type:t,name:r,"data-cy":`${r}Inp`,value:i,$isInvalid:te,$isClearable:de,$hasSuffix:me,disabled:c||m,ref:le,autoComplete:v,onKeyDown:se,big:L,onBlur:Ae,$asTextArea:re,variant:l,...Q}),o&&g.jsx(Hl,{right:V?!1:k==="right",hasValue:!!i,$isInvalid:te,disabled:c,onClick:M,children:g.jsxs(f0e,{children:[g.jsx(At,{icon:o}),P&&g.jsx("span",{children:P})]})}),V&&g.jsxs(s0e,{children:[g.jsx(UM,{onClick:J,children:g.jsx(At,{icon:"goUp",fill:"gray1"})}),g.jsx(UM,{onClick:K,children:g.jsx(At,{icon:"goDown",fill:"gray1"})})]}),de&&g.jsx(o0e,{right:!0,onClick:F,children:g.jsx(At,{icon:"deleteX",size:"16px",fill:"gray1"})}),w&&!m&&g.jsx(u0e,{onClick:x,$isPointer:!!x,$isInvalid:te,children:w}),m&&g.jsx(Hl,{right:!0,children:g.jsx(X0,{variant:"sm"})})]})]}),u&&g.jsx(i1,{appearance:C,children:u})]})},Au=e=>{const t=I.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return I.useLayoutEffect(()=>{t.current=e}),I.useCallback((...r)=>{var n;return(n=t.current)==null?void 0:n.apply(null,r)},[])},h0e=Y.ul`
+`,p0e=["text","number","password"],fo=({appearance:e="primary",type:t,name:r,label:n,value:i,icon:o,variant:l="default",disabled:c,error:u,isInvalid:f=void 0,spaceAround:p=!1,inputRef:h,autoComplete:v,isLoading:m,className:y,suffix:w,suffixOnClick:x,errorAppearance:C,iconPlacement:k="left",iconOnClick:M,iconTooltip:P,big:L,showArrowsController:V=!1,onClear:F,alwaysShowClear:H,setNumber:G,onEnter:Z,forceFocus:R=!1,autoFocus:z=!1,onBlur:j,asTextArea:re=!1,...Q})=>{const te=f!==void 0?f:!!u,de=!!F&&(!!i||H)&&!c&&!m,me=!!w,pe=V?"left":k,J=I.useCallback(()=>{G&&G(ee=>ee+1)},[G]),K=I.useCallback(()=>{G&&G(ee=>ee>1?ee-1:1)},[G]),ce=I.useRef(),le=h||ce;I.useEffect(()=>{var ee;R&&!c&&!m&&((ee=le==null?void 0:le.current)==null||ee.focus())},[c,R,m]);const Ae=I.useCallback(ee=>{var oe,fe,ge,Me,we;j==null||j(ee),R&&(((fe=(oe=ee.relatedTarget)==null?void 0:oe.tagName)==null?void 0:fe.toLowerCase())!=="input"||!p0e.includes((Me=(ge=ee.relatedTarget)==null?void 0:ge.type)==null?void 0:Me.toLowerCase()))&&((we=ee.target)==null||we.focus())},[R,j]),se=I.useCallback(ee=>{ee.key==="Enter"&&(Z==null||Z())},[Z]);return g.jsxs(Ts,{spaceAround:p,className:y,children:[g.jsxs(c0e,{children:[n&&g.jsx(hu,{htmlFor:r,children:n}),g.jsxs(d0e,{hasValue:!!i,$isInvalid:te,disabled:!!c,$icon:o,variant:l,children:[g.jsx(l0e,{autoFocus:z,className:`${e} ${pe}`,type:t,name:r,"data-cy":r?`${r}Inp`:void 0,"data-testid":r?`input-${r}`:void 0,value:i,$isInvalid:te,$isClearable:de,$hasSuffix:me,disabled:c||m,ref:le,autoComplete:v,onKeyDown:se,big:L,onBlur:Ae,$asTextArea:re,variant:l,...Q}),o&&g.jsx(Hl,{right:V?!1:k==="right",hasValue:!!i,$isInvalid:te,disabled:c,onClick:M,children:g.jsxs(f0e,{children:[g.jsx(At,{icon:o}),P&&g.jsx("span",{children:P})]})}),V&&g.jsxs(s0e,{children:[g.jsx(UM,{onClick:J,children:g.jsx(At,{icon:"goUp",fill:"gray1"})}),g.jsx(UM,{onClick:K,children:g.jsx(At,{icon:"goDown",fill:"gray1"})})]}),de&&g.jsx(o0e,{right:!0,onClick:F,children:g.jsx(At,{icon:"deleteX",size:"16px",fill:"gray1"})}),w&&!m&&g.jsx(u0e,{onClick:x,$isPointer:!!x,$isInvalid:te,children:w}),m&&g.jsx(Hl,{right:!0,children:g.jsx(X0,{variant:"sm"})})]})]}),u&&g.jsx(i1,{appearance:C,children:u})]})},Au=e=>{const t=I.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return I.useLayoutEffect(()=>{t.current=e}),I.useCallback((...r)=>{var n;return(n=t.current)==null?void 0:n.apply(null,r)},[])},h0e=Y.ul`
   background-color: white;
   box-shadow: dropShadow;
   border-radius: 10px;