@contentful/f36-inputs - npm Package Compare versions

Comparing version 4.0.1-next-v4-6179.2211 to 4.0.1-next-v4-6254.2212

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,{Minus:c,Done: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:M,labelProps:I,...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==M?void 0:M.className),D=t(N.container,b),O=t(N.ghost,{[N.ghostRadioButton]:"radio"===C,[N.ghostCheckbox]:"checkbox"===C},null==I?void 0:I.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({},M,{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({},I,{className:O,htmlFor:h}),n.createElement("span",null)):n.createElement("label",e({},I,{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=h(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),r=require("react"),n=h(r),{useCallback:i,useEffect:a,useRef:l}=r,{Minus:c,Done: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:M,labelProps:I,...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==M?void 0:M.className),D=t(N.container,b),O=t(N.ghost,{[N.ghostRadioButton]:"radio"===C,[N.ghostCheckbox]:"checkbox"===C},null==I?void 0:I.className),P=i((e=>{e.persist(),"Escape"===e.nativeEvent.code&&R&&e.currentTarget.blur()}),[R]);a((()=>{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({},M,{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({},I,{className:O,htmlFor:h}),n.createElement("span",null)):n.createElement("label",e({},I,{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);
		//# 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 a,{useCallback as r,useRef as n,useEffect as i}from"react";import{Done as l,Minus 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,a){Object.defineProperty(e,o,{get:t,set:a,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=n(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 a.createElement(c,e({as:"div",display:"inline-block",ref:S,testId:v},B,{className:O}),a.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?a.createElement("label",e({},M,{className:P,htmlFor:h}),a.createElement("span",null)):a.createElement("label",e({},M,{className:P,htmlFor:h}),E?a.createElement(s,j):a.createElement(l,j)))},m=a.forwardRef(f);var p={};b(p,"Checkbox",(()=>y));const k=({testId:o="cf-ui-checkbox",...t},r)=>a.createElement(m,e({testId:o,type:"checkbox",ref:r},t)),y=a.forwardRef(k);var x={};b(x,"RadioButton",(()=>C));const v=({testId:o="cf-ui-radio-button",...t},r)=>a.createElement(m,e({testId:o,type:"radio",ref:r},t)),C=a.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,{useRef as r,useCallback as n,useEffect as i}from"react";import{Done as l,Minus 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,a){Object.defineProperty(e,o,{get:t,set:a,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=r(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=n((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 a.createElement(c,e({as:"div",display:"inline-block",ref:S,testId:v},B,{className:O}),a.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?a.createElement("label",e({},M,{className:P,htmlFor:h}),a.createElement("span",null)):a.createElement("label",e({},M,{className:P,htmlFor:h}),E?a.createElement(s,j):a.createElement(l,j)))},m=a.forwardRef(f);var p={};b(p,"Checkbox",(()=>y));const k=({testId:o="cf-ui-checkbox",...t},r)=>a.createElement(m,e({testId:o,type:"checkbox",ref:r},t)),y=a.forwardRef(k);var x={};b(x,"RadioButton",(()=>C));const v=({testId:o="cf-ui-radio-button",...t},r)=>a.createElement(m,e({testId:o,type:"radio",ref:r},t)),C=a.forwardRef(v);u(g,h),u(g,p),u(g,x);export{m as ControlledInput,y as Checkbox,C as RadioButton};
		//# sourceMappingURL=module.js.map

package.json

		{
		"name": "@contentful/f36-inputs",
		"version": "4.0.1-next-v4-6179.2211+735c3526",
		"version": "4.0.1-next-v4-6254.2212+7cd119b0",
		"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-6179.2211+735c3526",
		"@contentful/f36-icons": "4.0.1-next-v4-6179.2211+735c3526",
		"@contentful/f36-tokens": "4.0.1-next-v4-6179.2211+735c3526",
		"@contentful/f36-core": "4.0.1-next-v4-6254.2212+7cd119b0",
		"@contentful/f36-icons": "4.0.1-next-v4-6254.2212+7cd119b0",
		"@contentful/f36-tokens": "4.0.1-next-v4-6254.2212+7cd119b0",
		"emotion": "^10.0.17"
		@@ -37,3 +37,3 @@ },
		},
		"gitHead": "735c3526412617d6fea7f92f732f8eea70a30436"
		"gitHead": "7cd119b0d4ecbccc5930f8ab6bb95e84b97f3df5"
		}

@contentful/f36-inputs - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes