Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@contentful/f36-inputs

Package Overview
Dependencies
Maintainers
102
Versions
73
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-inputs - npm Package Compare versions

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

2

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,{useEffect as a,useRef as r,useCallback 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=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=i((e=>{e.persist(),"Escape"===e.nativeEvent.code&&w&&e.currentTarget.blur()}),[w]);a((()=>{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 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};
//# sourceMappingURL=module.js.map
{
"name": "@contentful/f36-inputs",
"version": "4.0.1-next-v4-6763.2280+68ec7ca7",
"version": "4.0.1-next-v4-6795.2281+a79c4356",
"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-6763.2280+68ec7ca7",
"@contentful/f36-icons": "4.0.1-next-v4-6763.2280+68ec7ca7",
"@contentful/f36-tokens": "4.0.1-next-v4-6763.2280+68ec7ca7",
"@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",
"emotion": "^10.0.17"

@@ -37,3 +37,3 @@ },

},
"gitHead": "68ec7ca78ed6341bed0b5d20a383f1589123569f"
"gitHead": "a79c43565da14e28a3ca93825c0dbad7b20fa068"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc