@mailstep/design-system 0.4.16 → 0.4.18

package/package.json

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

package/ui/Forms/Input/Input.js

@@ -28,7 +28,7 @@ import { SpaceAroundWrap } from '../../Elements/SpaceAround';
 import { ErrorMessage } from '../../Elements/ErrorMessage';
 import { Icon } from '../../Elements/Icon';
 import { Spinner } from '../../Elements/Spinner';
-var allowedInputTypes = ['text', 'number'];
+var allowedInputTypes = ['text', 'number', 'password'];
 export var Input = function (_a) {
     var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _f = _a.showArrowsController, showArrowsController = _f === void 0 ? false : _f, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _g = _a.forceFocus, forceFocus = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, onBlur = _a.onBlur, _j = _a.asTextArea, asTextArea = _j === void 0 ? false : _j, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
     var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;

package/ui/index.es.js

@@ -17683,7 +17683,7 @@ const nO = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
       display: block;
     }
   }
-`, _O = ["text", "number"], EB = ({
+`, _O = ["text", "number", "password"], EB = ({
   appearance: e = "primary",
   type: t,
   name: r,

package/ui/index.umd.js

@@ -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&&!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`
+`,PB=["text","number","password"],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;