@contentful/f36-inputs - npm Package Compare versions

Comparing version 4.0.1-next-v4-6795.2281 to 4.0.1-next-v4-6811.2284

dist/main.js

@@ -1,2 +0,2 @@
-var e=h(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),r=require("react"),n=h(r),{useEffect:i,useCallback:a,useRef:l}=r,{MinusIcon:c,DoneIcon:s}=require("@contentful/f36-icons"),{Box:d}=require("@contentful/f36-core"),u=h(require("@contentful/f36-tokens"));function b(e,t){return Object.keys(t).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[o]}})})),e}function g(e,t,o,r){Object.defineProperty(e,t,{get:o,set:r,enumerable:!0,configurable:!0})}function h(e){return e&&e.__esModule?e.default:e}var f={},p={};g(p,"ControlledInput",(()=>k));const m=({isChecked:r,className:b,isDisabled:g=!1,id:h,label:f,name:p,onBlur:m,onChange:k,onFocus:y,isRequired:x=!1,testId:v="cf-ui-controlled-input",type:C="checkbox",value:w,canBlurOnEsc:R=!0,isIndeterminate:E,inputProps:I,labelProps:M,...B},q)=>{const S=l(null),N={container:o({position:"relative",textOverflow:"ellipsis",lineHeight:u.lineHeightL,margin:"0",width:u.spacingM,height:u.spacingM,minHeight:u.spacingM,overflow:"visible"},""),input:o({display:"inline-block",fontSize:u.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:u.spacingM,height:u.spacingM,zIndex:u.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:u.glowPrimary},"&:checked + label":{borderColor:u.blue600,background:u.blue600},"&:disabled + label":{borderColor:u.gray300,background:u.gray300}},""),inputDisabled:o({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:o({"&:checked":{"& + label::before":{background:u.colorWhite},"&:disabled + label::before":{background:u.gray600}},"&:disabled + label::before":{background:u.gray300}},""),inputCheckbox:o({"&:checked, &:indeterminate":{"& + label":{borderColor:u.blue600,background:u.blue600},"&:disabled + label svg":{fill:u.gray600}},"&:disabled":{"& + label":{borderColor:u.gray300,background:u.gray300,"& svg":{fill:u.gray300}}}},""),ghost:o({background:u.colorWhite,width:u.spacingM,height:u.spacingM,border:`2px solid ${u.gray300}`,fill:u.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:o({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:u.colorWhite,width:u.borderRadiusMedium,height:u.borderRadiusMedium}},""),ghostCheckbox:o({borderRadius:"20%",svg:{width:u.spacingS,minWidth:u.spacingS,minHeight:u.spacingS,height:u.spacingS}},"")},z=t(N.input,{[N.inputRadioButton]:"radio"===C,[N.inputCheckbox]:"checkbox"===C,[N.inputDisabled]:g},null==I?void 0:I.className),D=t(N.container,b),O=t(N.ghost,{[N.ghostRadioButton]:"radio"===C,[N.ghostCheckbox]:"checkbox"===C},null==M?void 0:M.className),P=a((e=>{e.persist(),"Escape"===e.nativeEvent.code&&R&&e.currentTarget.blur()}),[R]);i((()=>{S.current.indeterminate=E}),[E]);const W={size:"medium",variant:g?"secondary":"white"};return n.createElement(d,e({as:"div",display:"inline-block",ref:q,testId:v},B,{className:D}),n.createElement("input",e({},I,{className:z,value:w,name:p,checked:r,type:C,ref:S,onChange:e=>{k&&k(e)},onBlur:e=>{m&&m(e)},onFocus:e=>{y&&y(e)},"aria-label":f,id:h,required:x,disabled:g,onKeyDown:P})),"radio"===C?n.createElement("label",e({},M,{className:O,htmlFor:h}),n.createElement("span",null)):n.createElement("label",e({},M,{className:O,htmlFor:h}),E?n.createElement(c,W):n.createElement(s,W)))},k=n.forwardRef(m);var y={};g(y,"Checkbox",(()=>v));const x=({testId:t="cf-ui-checkbox",...o},r)=>n.createElement(k,e({testId:t,type:"checkbox",ref:r},o)),v=n.forwardRef(x);var C={};g(C,"RadioButton",(()=>R));const w=({testId:t="cf-ui-radio-button",...o},r)=>n.createElement(k,e({testId:t,type:"radio",ref:r},o)),R=n.forwardRef(w);b(f,p),b(f,y),b(f,C),b(module.exports,f);
+var e=m(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),a=require("react"),n=m(a),{useEffect:i,useCallback:r,useRef:l,useState:s}=a,{MinusIcon:c,DoneIcon:d}=require("@contentful/f36-icons"),{Box:u,usePrimitive:b}=require("@contentful/f36-core"),g=m(require("@contentful/f36-tokens"));function p(e,t){return Object.keys(t).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[o]}})})),e}function h(e,t,o,a){Object.defineProperty(e,t,{get:o,set:a,enumerable:!0,configurable:!0})}function m(e){return e&&e.__esModule?e.default:e}var f={},y={};h(y,"ControlledInput",(()=>x));const v=({isChecked:a,className:s,isDisabled:b=!1,id:p,label:h,name:m,onBlur:f,onChange:y,onFocus:v,isRequired:x=!1,testId:k="cf-ui-controlled-input",type:w="checkbox",value:I,canBlurOnEsc:C=!0,isIndeterminate:E,inputProps:R,labelProps:S,...M},B)=>{const D=l(null),z={container:o({position:"relative",textOverflow:"ellipsis",lineHeight:g.lineHeightL,margin:"0",width:g.spacingM,height:g.spacingM,minHeight:g.spacingM,overflow:"visible"},""),input:o({display:"inline-block",fontSize:g.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:g.spacingM,height:g.spacingM,zIndex:g.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:g.glowPrimary},"&:checked + label":{borderColor:g.blue600,background:g.blue600},"&:disabled + label":{borderColor:g.gray300,background:g.gray300}},""),inputDisabled:o({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:o({"&:checked":{"& + label::before":{background:g.colorWhite},"&:disabled + label::before":{background:g.gray600}},"&:disabled + label::before":{background:g.gray300}},""),inputCheckbox:o({"&:checked, &:indeterminate":{"& + label":{borderColor:g.blue600,background:g.blue600},"&:disabled + label svg":{fill:g.gray600}},"&:disabled":{"& + label":{borderColor:g.gray300,background:g.gray300,"& svg":{fill:g.gray300}}}},""),ghost:o({background:g.colorWhite,width:g.spacingM,height:g.spacingM,border:`2px solid ${g.gray300}`,fill:g.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:o({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:g.colorWhite,width:g.borderRadiusMedium,height:g.borderRadiusMedium}},""),ghostCheckbox:o({borderRadius:"20%",svg:{width:g.spacingS,minWidth:g.spacingS,minHeight:g.spacingS,height:g.spacingS}},"")},N=t(z.input,{[z.inputRadioButton]:"radio"===w,[z.inputCheckbox]:"checkbox"===w,[z.inputDisabled]:b},null==R?void 0:R.className),P=t(z.container,s),W=t(z.ghost,{[z.ghostRadioButton]:"radio"===w,[z.ghostCheckbox]:"checkbox"===w},null==S?void 0:S.className),q=r((e=>{e.persist(),"Escape"===e.nativeEvent.code&&C&&e.currentTarget.blur()}),[C]);i((()=>{D.current.indeterminate=E}),[E]);const H={size:"medium",variant:b?"secondary":"white"};return n.createElement(u,e({as:"div",display:"inline-block",ref:B,testId:k},M,{className:P}),n.createElement("input",e({},R,{className:N,value:I,name:m,checked:a,type:w,ref:D,onChange:e=>{y&&y(e)},onBlur:e=>{f&&f(e)},onFocus:e=>{v&&v(e)},"aria-label":h,id:p,required:x,disabled:b,onKeyDown:q})),"radio"===w?n.createElement("label",e({},S,{className:W,htmlFor:p}),n.createElement("span",null)):n.createElement("label",e({},S,{className:W,htmlFor:p}),E?n.createElement(c,H):n.createElement(d,H)))},x=n.forwardRef(v);var k={};h(k,"Checkbox",(()=>I));const w=({testId:t="cf-ui-checkbox",...o},a)=>n.createElement(x,e({testId:t,type:"checkbox",ref:a},o)),I=n.forwardRef(w);var C={};h(C,"RadioButton",(()=>R));const E=({testId:t="cf-ui-radio-button",...o},a)=>n.createElement(x,e({testId:t,type:"radio",ref:a},o)),R=n.forwardRef(E);var S={};h(S,"BaseInput",(()=>z));var M=({isDisabled:e,isInvalid:t})=>({rootComponentWithIcon:o({name:"r0bbdu",styles:"position:relative;display:flex;width:100%;"}),input:o({outline:"none",boxShadow:g.insetBoxShadowDefault,boxSizing:"border-box",backgroundColor:e?g.gray100:g.colorWhite,border:`1px solid ${t?g.red600:g.gray300}`,borderRadius:g.borderRadiusMedium,maxHeight:`calc(1rem * (40 / ${g.fontBaseDefault}))`,color:g.gray700,fontFamily:g.fontStackPrimary,fontSize:g.fontSizeM,lineHeight:g.lineHeightM,padding:`10px ${g.spacingS}`,margin:0,cursor:e?"not-allowed":"auto",width:"100%","&::placeholder":{color:g.gray500},"&:active, &:active:hover":{borderColor:t?g.red600:e?g.gray300:g.blue600,boxShadow:t?g.glowNegative:e?"none":g.glowPrimary},"&:focus":{zIndex:g.zIndexDefault,borderColor:t?g.red600:e?g.gray300:g.blue600,boxShadow:t?g.glowNegative:e?"none":g.glowPrimary}},""),inputWithIcon:o({name:"1sf8ua8",styles:"padding-left:38px;"}),iconPlaceholder:o({position:"absolute",pointerEvents:"none",top:0,bottom:0,left:g.spacingS,display:"flex",alignItems:"center",zIndex:g.zIndexDefault},"")});const B="input",D=(o,a)=>{const{as:l=B,className:c,isDisabled:d,isReadOnly:g,isInvalid:p,id:h,label:m,name:f,onBlur:y,onChange:v,onFocus:x,onKeyDown:k,testId:w="cf-ui-base-input",type:I="text",value:C,placeholder:E,willBlurOnEsc:R=!0,style:S,icon:D,...z}=o,[N,P]=s(C),W=M({isDisabled:d,isInvalid:p}),{Element:q,primitiveProps:H}=b({testId:w,as:l,className:c,style:S}),F=e=>{e.persist(),(d||g)&&e.target.select()},O=r((e=>{e.persist(),d||g||(v&&v(e),P(e.currentTarget.value))}),[v,d,g]),j=r((e=>{e.persist(),k&&k(e),"Escape"===e.nativeEvent.code&&R&&e.currentTarget.blur()}),[R,k]);i((()=>{P(C)}),[C]);const $=D&&n.createElement(u,{as:"span",className:W.iconPlaceholder},n.cloneElement(D,{size:"small",variant:"muted",ariaHiden:!0})),_=o=>n.createElement(q,e({},z,H,{"data-test-id":w,placeholder:E,className:t(W.input,o,c),value:N,name:f,type:I,ref:a,"aria-label":m,id:h,disabled:d,onChange:O,onBlur:y,onKeyDown:j,onFocus:F}));return"textarea"===l?_():D?n.createElement(u,{as:"div",className:W.rootComponentWithIcon},_(W.inputWithIcon),$):_()},z=n.forwardRef(D);p(f,y),p(f,k),p(f,C),p(f,S),p(module.exports,f);
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as t}from"emotion";import n,{useRef as a,useCallback as r,useEffect as i}from"react";import{MinusIcon as l,DoneIcon as s}from"@contentful/f36-icons";import{Box as c}from"@contentful/f36-core";import d from"@contentful/f36-tokens";function u(e,o){return Object.keys(o).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return o[t]}})})),e}function b(e,o,t,n){Object.defineProperty(e,o,{get:t,set:n,enumerable:!0,configurable:!0})}var g={},h={};b(h,"ControlledInput",(()=>m));const f=({isChecked:u,className:b,isDisabled:g=!1,id:h,label:f,name:m,onBlur:p,onChange:k,onFocus:y,isRequired:x=!1,testId:v="cf-ui-controlled-input",type:C="checkbox",value:R,canBlurOnEsc:w=!0,isIndeterminate:E,inputProps:I,labelProps:M,...B},S)=>{const N=a(null),z={container:t({position:"relative",textOverflow:"ellipsis",lineHeight:d.lineHeightL,margin:"0",width:d.spacingM,height:d.spacingM,minHeight:d.spacingM,overflow:"visible"},""),input:t({display:"inline-block",fontSize:d.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:d.spacingM,height:d.spacingM,zIndex:d.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:d.glowPrimary},"&:checked + label":{borderColor:d.blue600,background:d.blue600},"&:disabled + label":{borderColor:d.gray300,background:d.gray300}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:d.colorWhite},"&:disabled + label::before":{background:d.gray600}},"&:disabled + label::before":{background:d.gray300}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:d.blue600,background:d.blue600},"&:disabled + label svg":{fill:d.gray600}},"&:disabled":{"& + label":{borderColor:d.gray300,background:d.gray300,"& svg":{fill:d.gray300}}}},""),ghost:t({background:d.colorWhite,width:d.spacingM,height:d.spacingM,border:`2px solid ${d.gray300}`,fill:d.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:t({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:d.colorWhite,width:d.borderRadiusMedium,height:d.borderRadiusMedium}},""),ghostCheckbox:t({borderRadius:"20%",svg:{width:d.spacingS,minWidth:d.spacingS,minHeight:d.spacingS,height:d.spacingS}},"")},D=o(z.input,{[z.inputRadioButton]:"radio"===C,[z.inputCheckbox]:"checkbox"===C,[z.inputDisabled]:g},null==I?void 0:I.className),O=o(z.container,b),P=o(z.ghost,{[z.ghostRadioButton]:"radio"===C,[z.ghostCheckbox]:"checkbox"===C},null==M?void 0:M.className),W=r((e=>{e.persist(),"Escape"===e.nativeEvent.code&&w&&e.currentTarget.blur()}),[w]);i((()=>{N.current.indeterminate=E}),[E]);const j={size:"medium",variant:g?"secondary":"white"};return n.createElement(c,e({as:"div",display:"inline-block",ref:S,testId:v},B,{className:O}),n.createElement("input",e({},I,{className:D,value:R,name:m,checked:u,type:C,ref:N,onChange:e=>{k&&k(e)},onBlur:e=>{p&&p(e)},onFocus:e=>{y&&y(e)},"aria-label":f,id:h,required:x,disabled:g,onKeyDown:W})),"radio"===C?n.createElement("label",e({},M,{className:P,htmlFor:h}),n.createElement("span",null)):n.createElement("label",e({},M,{className:P,htmlFor:h}),E?n.createElement(l,j):n.createElement(s,j)))},m=n.forwardRef(f);var p={};b(p,"Checkbox",(()=>y));const k=({testId:o="cf-ui-checkbox",...t},a)=>n.createElement(m,e({testId:o,type:"checkbox",ref:a},t)),y=n.forwardRef(k);var x={};b(x,"RadioButton",(()=>C));const v=({testId:o="cf-ui-radio-button",...t},a)=>n.createElement(m,e({testId:o,type:"radio",ref:a},t)),C=n.forwardRef(v);u(g,h),u(g,p),u(g,x);export{m as ControlledInput,y as Checkbox,C as RadioButton};
+import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as t}from"emotion";import a,{useCallback as n,useEffect as i,useRef as r,useState as l}from"react";import{DoneIcon as s,MinusIcon as c}from"@contentful/f36-icons";import{Box as d,usePrimitive as u}from"@contentful/f36-core";import b from"@contentful/f36-tokens";function p(e,o){return Object.keys(o).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return o[t]}})})),e}function g(e,o,t,a){Object.defineProperty(e,o,{get:t,set:a,enumerable:!0,configurable:!0})}var m={},h={};g(h,"ControlledInput",(()=>y));const f=({isChecked:l,className:u,isDisabled:p=!1,id:g,label:m,name:h,onBlur:f,onChange:y,onFocus:v,isRequired:x=!1,testId:k="cf-ui-controlled-input",type:w="checkbox",value:I,canBlurOnEsc:C=!0,isIndeterminate:E,inputProps:R,labelProps:S,...B},D)=>{const M=r(null),z={container:t({position:"relative",textOverflow:"ellipsis",lineHeight:b.lineHeightL,margin:"0",width:b.spacingM,height:b.spacingM,minHeight:b.spacingM,overflow:"visible"},""),input:t({display:"inline-block",fontSize:b.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:b.spacingM,height:b.spacingM,zIndex:b.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:b.glowPrimary},"&:checked + label":{borderColor:b.blue600,background:b.blue600},"&:disabled + label":{borderColor:b.gray300,background:b.gray300}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:b.colorWhite},"&:disabled + label::before":{background:b.gray600}},"&:disabled + label::before":{background:b.gray300}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:b.blue600,background:b.blue600},"&:disabled + label svg":{fill:b.gray600}},"&:disabled":{"& + label":{borderColor:b.gray300,background:b.gray300,"& svg":{fill:b.gray300}}}},""),ghost:t({background:b.colorWhite,width:b.spacingM,height:b.spacingM,border:`2px solid ${b.gray300}`,fill:b.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:t({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:b.colorWhite,width:b.borderRadiusMedium,height:b.borderRadiusMedium}},""),ghostCheckbox:t({borderRadius:"20%",svg:{width:b.spacingS,minWidth:b.spacingS,minHeight:b.spacingS,height:b.spacingS}},"")},N=o(z.input,{[z.inputRadioButton]:"radio"===w,[z.inputCheckbox]:"checkbox"===w,[z.inputDisabled]:p},null==R?void 0:R.className),P=o(z.container,u),W=o(z.ghost,{[z.ghostRadioButton]:"radio"===w,[z.ghostCheckbox]:"checkbox"===w},null==S?void 0:S.className),H=n((e=>{e.persist(),"Escape"===e.nativeEvent.code&&C&&e.currentTarget.blur()}),[C]);i((()=>{M.current.indeterminate=E}),[E]);const F={size:"medium",variant:p?"secondary":"white"};return a.createElement(d,e({as:"div",display:"inline-block",ref:D,testId:k},B,{className:P}),a.createElement("input",e({},R,{className:N,value:I,name:h,checked:l,type:w,ref:M,onChange:e=>{y&&y(e)},onBlur:e=>{f&&f(e)},onFocus:e=>{v&&v(e)},"aria-label":m,id:g,required:x,disabled:p,onKeyDown:H})),"radio"===w?a.createElement("label",e({},S,{className:W,htmlFor:g}),a.createElement("span",null)):a.createElement("label",e({},S,{className:W,htmlFor:g}),E?a.createElement(c,F):a.createElement(s,F)))},y=a.forwardRef(f);var v={};g(v,"Checkbox",(()=>k));const x=({testId:o="cf-ui-checkbox",...t},n)=>a.createElement(y,e({testId:o,type:"checkbox",ref:n},t)),k=a.forwardRef(x);var w={};g(w,"RadioButton",(()=>C));const I=({testId:o="cf-ui-radio-button",...t},n)=>a.createElement(y,e({testId:o,type:"radio",ref:n},t)),C=a.forwardRef(I);var E={};g(E,"BaseInput",(()=>D));var R=({isDisabled:e,isInvalid:o})=>({rootComponentWithIcon:t({name:"r0bbdu",styles:"position:relative;display:flex;width:100%;"}),input:t({outline:"none",boxShadow:b.insetBoxShadowDefault,boxSizing:"border-box",backgroundColor:e?b.gray100:b.colorWhite,border:`1px solid ${o?b.red600:b.gray300}`,borderRadius:b.borderRadiusMedium,maxHeight:`calc(1rem * (40 / ${b.fontBaseDefault}))`,color:b.gray700,fontFamily:b.fontStackPrimary,fontSize:b.fontSizeM,lineHeight:b.lineHeightM,padding:`10px ${b.spacingS}`,margin:0,cursor:e?"not-allowed":"auto",width:"100%","&::placeholder":{color:b.gray500},"&:active, &:active:hover":{borderColor:o?b.red600:e?b.gray300:b.blue600,boxShadow:o?b.glowNegative:e?"none":b.glowPrimary},"&:focus":{zIndex:b.zIndexDefault,borderColor:o?b.red600:e?b.gray300:b.blue600,boxShadow:o?b.glowNegative:e?"none":b.glowPrimary}},""),inputWithIcon:t({name:"1sf8ua8",styles:"padding-left:38px;"}),iconPlaceholder:t({position:"absolute",pointerEvents:"none",top:0,bottom:0,left:b.spacingS,display:"flex",alignItems:"center",zIndex:b.zIndexDefault},"")});const S="input",B=(t,r)=>{const{as:s=S,className:c,isDisabled:b,isReadOnly:p,isInvalid:g,id:m,label:h,name:f,onBlur:y,onChange:v,onFocus:x,onKeyDown:k,testId:w="cf-ui-base-input",type:I="text",value:C,placeholder:E,willBlurOnEsc:B=!0,style:D,icon:M,...z}=t,[N,P]=l(C),W=R({isDisabled:b,isInvalid:g}),{Element:H,primitiveProps:F}=u({testId:w,as:s,className:c,style:D}),O=e=>{e.persist(),(b||p)&&e.target.select()},j=n((e=>{e.persist(),b||p||(v&&v(e),P(e.currentTarget.value))}),[v,b,p]),$=n((e=>{e.persist(),k&&k(e),"Escape"===e.nativeEvent.code&&B&&e.currentTarget.blur()}),[B,k]);i((()=>{P(C)}),[C]);const K=M&&a.createElement(d,{as:"span",className:W.iconPlaceholder},a.cloneElement(M,{size:"small",variant:"muted",ariaHiden:!0})),T=t=>a.createElement(H,e({},z,F,{"data-test-id":w,placeholder:E,className:o(W.input,t,c),value:N,name:f,type:I,ref:r,"aria-label":h,id:m,disabled:b,onChange:j,onBlur:y,onKeyDown:$,onFocus:O}));return"textarea"===s?T():M?a.createElement(d,{as:"div",className:W.rootComponentWithIcon},T(W.inputWithIcon),K):T()},D=a.forwardRef(B);p(m,h),p(m,v),p(m,w),p(m,E);export{y as ControlledInput,k as Checkbox,C as RadioButton,D as BaseInput};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,3 +0,3 @@
-import React, { EventHandler, ChangeEvent, FocusEvent } from "react";
-import { BoxProps } from "@contentful/f36-core";
+import React, { EventHandler, ChangeEvent, FocusEvent, ChangeEventHandler, KeyboardEventHandler, ElementType } from "react";
+import { BoxProps, CommonProps, PolymorphicComponentProps, PolymorphicComponent } from "@contentful/f36-core";
 export interface ControlledInputProps extends Omit<BoxProps<'div'>, 'ref'> {
@@ -27,3 +27,82 @@ id?: string;
 export const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
+interface BaseInputInternalProps extends CommonProps {
+    /**
+     * Sets the id of the input
+     */
+    id?: string;
+    /**
+     * Allows to render input | textarea tag
+     */
+    as?: 'input' | 'textarea';
+    /**
+     * Label value is set as aria-label attribute in the input
+     */
+    label: string;
+    /**
+     * Set the value of the input
+     */
+    value?: string;
+    /**
+     * Set the name of the input
+     */
+    name?: string;
+    /**
+     * Set the type of the input
+     * @default text
+     */
+    type?: 'text' | 'email' | 'file' | 'number' | 'password' | 'search' | 'url';
+    /**
+     * Applies disabled styles
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Applies read-only styles
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Applies invalid styles
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Validate the input
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Property that set the placeholder value for input
+     */
+    placeholder?: string;
+    /**
+     * Boolean property that allows to blur on escape
+     * @default true
+     */
+    willBlurOnEsc?: boolean;
+    /**
+     * Expects any of the icon components
+     */
+    icon?: React.ReactElement;
+    /**
+     * Allows to listen to an input’s change in value
+     */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    /**
+     * Allows to listen to an event when a key is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    /**
+     * Allows to listen to an event when an element loses focus
+     */
+    onBlur?: EventHandler<FocusEvent<HTMLTextAreaElement | HTMLInputElement>>;
+    /**
+     * Allows to listen to an event when an element get focused
+     */
+    onFocus?: EventHandler<FocusEvent<HTMLTextAreaElement | HTMLInputElement>>;
+}
+declare const DEFAULT_TAG: ElementType;
+export type BaseInputProps<E extends React.ElementType> = PolymorphicComponentProps<E, BaseInputInternalProps, 'disabled'>;
+export const BaseInput: PolymorphicComponent<BaseInputInternalProps, typeof DEFAULT_TAG, 'disabled'>;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@contentful/f36-inputs",
-  "version": "4.0.1-next-v4-6795.2281+a79c4356",
+  "version": "4.0.1-next-v4-6811.2284+e70f58a9",
   "description": "Forma 36: Input React Components",
@@ -25,5 +25,5 @@ "license": "MIT",
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-6795.2281+a79c4356",
-    "@contentful/f36-icons": "4.0.1-next-v4-6795.2281+a79c4356",
-    "@contentful/f36-tokens": "4.0.1-next-v4-6795.2281+a79c4356",
+    "@contentful/f36-core": "4.0.1-next-v4-6811.2284+e70f58a9",
+    "@contentful/f36-icons": "4.0.1-next-v4-6811.2284+e70f58a9",
+    "@contentful/f36-tokens": "4.0.1-next-v4-6811.2284+e70f58a9",
     "emotion": "^10.0.17"
@@ -37,3 +37,3 @@ },
   },
-  "gitHead": "a79c43565da14e28a3ca93825c0dbad7b20fa068"
+  "gitHead": "e70f58a9db293569e511c624deb789c471a1bb53"
 }

src/index.ts

 export * from './controlled-input';
 export * from './checkbox';
 export * from './radio-button';
+export * from './base-input';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

196348

increased by50.59%

Number of package files

31

increased by29.17%

Lines of code

957

increased by95.31%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-6811.2284+e70f58a9

• Updated@contentful/f36-icons@4.0.1-next-v4-6811.2284+e70f58a9

• Updated@contentful/f36-tokens@4.0.1-next-v4-6811.2284+e70f58a9