@mailstep/design-system 0.4.15 → 0.4.16

package/package.json

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

package/ui/Forms/Input/Input.js

@@ -60,5 +60,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, "$isInvalid": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, 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 }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', 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(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "lightGray3" }) })), suffix && (_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, "$isInvalid": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, 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 }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', 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(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "lightGray3" }) })), 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/Forms/Input/styles.js

@@ -34,7 +34,7 @@ export var StyledInput = styled.input.attrs(function (props) { return ({
         ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "], ["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "]))) : '';
 });
 export var InputWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var Suffix = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ", ";\n\n  input,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ", ";\n\n  input,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"])), th('fonts.primary'), function (_a) {
+export var Suffix = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ", ";\n\n  input:focus ~ &,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ", ";\n\n  input:focus ~ &,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"])), th('fonts.primary'), function (_a) {
     var $isPointer = _a.$isPointer;
     return $isPointer
         ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          cursor: pointer;\n        "], ["\n          cursor: pointer;\n        "]))) : '';

package/ui/index.es.js

@@ -17608,7 +17608,7 @@ const nO = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
           cursor: pointer;
         ` : ""};
 
-  input,
+  input:focus ~ &,
   textarea:focus ~ & {
     border-color: blue2;
   }
@@ -17770,7 +17770,7 @@ const nO = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
           /* @__PURE__ */ f.jsx(m0, { onClick: S, children: /* @__PURE__ */ f.jsx(Te, { icon: "goDown", fill: "gray1" }) })
         ] }),
         ne && /* @__PURE__ */ f.jsx(kt, { right: !0, onClick: V, children: /* @__PURE__ */ f.jsx(Te, { icon: "deleteX", size: "16px", fill: "lightGray3" }) }),
-        p && /* @__PURE__ */ f.jsx(QO, { onClick: A, $isPointer: !!A, $isInvalid: te, children: p }),
+        p && !h && /* @__PURE__ */ f.jsx(QO, { onClick: A, $isPointer: !!A, $isInvalid: te, children: p }),
         h && /* @__PURE__ */ f.jsx(kt, { right: !0, children: /* @__PURE__ */ f.jsx(v3, { variant: "sm" }) })
       ] })
     ] }),

package/ui/index.umd.js

@@ -2297,7 +2297,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           cursor: pointer;
         `:""};
 
-  input,
+  input:focus ~ &,
   textarea:focus ~ & {
     border-color: blue2;
   }
@@ -2372,7 +2372,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       display: block;
     }
   }
-`,PB=["text","number"],IB=({appearance:e="primary",type:t,name:r,label:n,value:i,icon:a,disabled:o,error:s,isInvalid:l=void 0,spaceAround:d=!1,inputRef:c,autoComplete:u,isLoading:h,className:g,suffix:p,suffixOnClick:A,errorAppearance:b,iconPlacement:m="left",iconOnClick:E,iconTooltip:x,big:k,showArrowsController:y=!1,onClear:W,alwaysShowClear:U,setNumber:N,onEnter:H,forceFocus:j=!1,autoFocus:Z=!1,onBlur:_,asTextArea:Y=!1,...te})=>{const re=l!==void 0?l:!!s,ie=!!W&&(!!i||U)&&!o&&!h,ge=!!p,le=y?"left":m,K=T.useCallback(()=>N&&N(M=>M+1),[N]),S=T.useCallback(()=>{N&&N(M=>M>1?M-1:1)},[N]),C=T.useRef(),B=c||C;T.useEffect(()=>{var M;j&&!o&&!h&&((M=B==null?void 0:B.current)==null||M.focus())},[o,j,h]);const z=T.useCallback(M=>{var P,I,D,Q,ee;_==null||_(M),j&&(((I=(P=M.relatedTarget)==null?void 0:P.tagName)==null?void 0:I.toLowerCase())!=="input"||!PB.includes((Q=(D=M.relatedTarget)==null?void 0:D.type)==null?void 0:Q.toLowerCase()))&&((ee=M.target)==null||ee.focus())},[j,_]),J=T.useCallback(M=>{M.key==="Enter"&&(H==null||H())},[H]);return f.jsxs(Xn,{spaceAround:d,className:g,children:[f.jsxs(EB,{children:[n&&f.jsx(Zo,{htmlFor:r,$isInvalid:re,children:n}),f.jsxs(xB,{hasValue:!!i,$isInvalid:re,disabled:!!o,$icon:a,children:[f.jsx(CB,{autoFocus:Z,className:`${e} ${le}`,type:t,name:r,"data-cy":`${r}Inp`,value:i,$isInvalid:re,$isClearable:ie,$hasSuffix:ge,disabled:o||h,ref:B,autoComplete:u,onKeyDown:J,big:k,onBlur:z,$asTextArea:Y,...te}),a&&f.jsx(Lt,{right:y?!1:m==="right",onClick:E,children:f.jsxs(kB,{children:[f.jsx(Oe,{icon:a}),x&&f.jsx("span",{children:x})]})}),y&&f.jsxs(wB,{children:[f.jsx(af,{onClick:K,children:f.jsx(Oe,{icon:"goUp",fill:"gray1"})}),f.jsx(af,{onClick:S,children:f.jsx(Oe,{icon:"goDown",fill:"gray1"})})]}),ie&&f.jsx(Lt,{right:!0,onClick:W,children:f.jsx(Oe,{icon:"deleteX",size:"16px",fill:"lightGray3"})}),p&&f.jsx(SB,{onClick:A,$isPointer:!!A,$isInvalid:re,children:p}),h&&f.jsx(Lt,{right:!0,children:f.jsx(ua,{variant:"sm"})})]})]}),s&&f.jsx(Yd,{appearance:b,children:s})]})},MB=V.div`
+`,PB=["text","number"],IB=({appearance:e="primary",type:t,name:r,label:n,value:i,icon:a,disabled:o,error:s,isInvalid:l=void 0,spaceAround:d=!1,inputRef:c,autoComplete:u,isLoading:h,className:g,suffix:p,suffixOnClick:A,errorAppearance:b,iconPlacement:m="left",iconOnClick:E,iconTooltip:x,big:k,showArrowsController:y=!1,onClear:W,alwaysShowClear:U,setNumber:N,onEnter:H,forceFocus:j=!1,autoFocus:Z=!1,onBlur:_,asTextArea:Y=!1,...te})=>{const re=l!==void 0?l:!!s,ie=!!W&&(!!i||U)&&!o&&!h,ge=!!p,le=y?"left":m,K=T.useCallback(()=>N&&N(M=>M+1),[N]),S=T.useCallback(()=>{N&&N(M=>M>1?M-1:1)},[N]),C=T.useRef(),B=c||C;T.useEffect(()=>{var M;j&&!o&&!h&&((M=B==null?void 0:B.current)==null||M.focus())},[o,j,h]);const z=T.useCallback(M=>{var P,I,D,Q,ee;_==null||_(M),j&&(((I=(P=M.relatedTarget)==null?void 0:P.tagName)==null?void 0:I.toLowerCase())!=="input"||!PB.includes((Q=(D=M.relatedTarget)==null?void 0:D.type)==null?void 0:Q.toLowerCase()))&&((ee=M.target)==null||ee.focus())},[j,_]),J=T.useCallback(M=>{M.key==="Enter"&&(H==null||H())},[H]);return f.jsxs(Xn,{spaceAround:d,className:g,children:[f.jsxs(EB,{children:[n&&f.jsx(Zo,{htmlFor:r,$isInvalid:re,children:n}),f.jsxs(xB,{hasValue:!!i,$isInvalid:re,disabled:!!o,$icon:a,children:[f.jsx(CB,{autoFocus:Z,className:`${e} ${le}`,type:t,name:r,"data-cy":`${r}Inp`,value:i,$isInvalid:re,$isClearable:ie,$hasSuffix:ge,disabled:o||h,ref:B,autoComplete:u,onKeyDown:J,big:k,onBlur:z,$asTextArea:Y,...te}),a&&f.jsx(Lt,{right:y?!1:m==="right",onClick:E,children:f.jsxs(kB,{children:[f.jsx(Oe,{icon:a}),x&&f.jsx("span",{children:x})]})}),y&&f.jsxs(wB,{children:[f.jsx(af,{onClick:K,children:f.jsx(Oe,{icon:"goUp",fill:"gray1"})}),f.jsx(af,{onClick:S,children:f.jsx(Oe,{icon:"goDown",fill:"gray1"})})]}),ie&&f.jsx(Lt,{right:!0,onClick:W,children:f.jsx(Oe,{icon:"deleteX",size:"16px",fill:"lightGray3"})}),p&&!h&&f.jsx(SB,{onClick:A,$isPointer:!!A,$isInvalid:re,children:p}),h&&f.jsx(Lt,{right:!0,children:f.jsx(ua,{variant:"sm"})})]})]}),s&&f.jsx(Yd,{appearance:b,children:s})]})},MB=V.div`
   display: flex;
   align-items: center;
   height: auto;