@contentful/f36-inputs - npm Package Compare versions

Comparing version 4.0.1-next-v4-4488.2000 to 4.0.1-next-v4-4528.2001

dist/main.js

@@ -1,2 +0,2 @@
-var e=g(require("@babel/runtime/helpers/extends")),{cx:o,css:t}=require("emotion"),r=require("react"),i=g(r),{useCallback:n,useRef:l,useEffect:a}=r,{Minus:c,Done:s}=require("@contentful/f36-icons"),{Label:d}=require("@contentful/f36-forms"),{Box:u}=require("@contentful/f36-core"),b=g(require("@contentful/f36-tokens"));function h(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 f(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}function g(e){return e&&e.__esModule?e.default:e}var m={},p={};f(p,"ControlledInput",(()=>v));const k={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",border:`2px solid ${b.colorPrimary}`,boxShadow:b.glowPrimary},"&:checked + label":{borderColor:b.colorBlueMid,background:b.colorBlueMid},"&:disabled + label":{borderColor:b.colorElementDark,background:b.colorElementDark}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:b.colorWhite},"&:disabled + label::before":{background:b.colorTextLightest}},"&:disabled + label::before":{background:b.colorElementDarkest}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:b.colorBlueMid,background:b.colorBlueMid},"&:disabled + label svg":{fill:b.colorTextLightest}},"&:disabled":{"& + label":{borderColor:b.colorElementDark,background:b.colorElementDark,"& svg":{fill:b.colorElementDark}}}},""),ghost:t({background:b.colorWhite,width:b.spacingM,height:b.spacingM,border:`2px solid ${b.colorElementDark}`,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}},"")},x=({isChecked:t,className:r,isDisabled:b=!1,id:h,label:f,name:g,onBlur:m,onChange:p,onFocus:x,isRequired:v=!1,testId:E="cf-ui-controlled-input",type:y="checkbox",value:M,canBlurOnEsc:C=!0,isIndeterminate:w,inputProps:R,labelProps:B,...D},I)=>{const q=l(null),S=o(k.input,{[k.inputRadioButton]:"radio"===y,[k.inputCheckbox]:"checkbox"===y,[k.inputDisabled]:b},null==R?void 0:R.className),N=o(k.container,r),z=o(k.ghost,{[k.ghostRadioButton]:"radio"===y,[k.ghostCheckbox]:"checkbox"===y},null==B?void 0:B.className),P=n((e=>{e.persist(),"Escape"===e.nativeEvent.code&&C&&e.currentTarget.blur()}),[C]);a((()=>{q.current.indeterminate=w}),[w]);const O={size:"medium",variant:b?"secondary":"white"};return i.createElement(u,e({as:"div",display:"inline-block",ref:I,testId:E},D,{className:N}),i.createElement("input",e({},R,{className:S,value:M,name:g,checked:t,type:y,ref:q,onChange:e=>{p&&p(e)},onBlur:e=>{m&&m(e)},onFocus:e=>{x&&x(e)},"aria-label":f,id:h,required:v,disabled:b,onKeyDown:P})),"radio"===y?i.createElement(d,e({},B,{className:z,htmlFor:h})):i.createElement(d,e({},B,{className:z,htmlFor:h}),w?i.createElement(c,O):i.createElement(s,O)))},v=i.forwardRef(x);var E={};f(E,"Checkbox",(()=>M));const y=({testId:o="cf-ui-checkbox",...t},r)=>i.createElement(v,e({testId:o,type:"checkbox",ref:r},t)),M=i.forwardRef(y);var C={};f(C,"RadioButton",(()=>R));const w=({testId:o="cf-ui-radio-button",...t},r)=>i.createElement(v,e({testId:o,type:"radio",ref:r},t)),R=i.forwardRef(w);h(m,p),h(m,E),h(m,C),h(module.exports,m);
+var e=g(require("@babel/runtime/helpers/extends")),{cx:o,css:t}=require("emotion"),r=require("react"),n=g(r),{useRef:i,useCallback:l,useEffect:a}=r,{Minus:c,Done:s}=require("@contentful/f36-icons"),{Box:d}=require("@contentful/f36-core"),u=g(require("@contentful/f36-tokens"));function b(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 h(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}function g(e){return e&&e.__esModule?e.default:e}var f={},m={};h(m,"ControlledInput",(()=>x));const p={container:t({position:"relative",textOverflow:"ellipsis",lineHeight:u.lineHeightL,margin:"0",width:u.spacingM,height:u.spacingM,minHeight:u.spacingM,overflow:"visible"},""),input:t({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",border:`2px solid ${u.colorPrimary}`,boxShadow:u.glowPrimary},"&:checked + label":{borderColor:u.colorBlueMid,background:u.colorBlueMid},"&:disabled + label":{borderColor:u.colorElementDark,background:u.colorElementDark}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:u.colorWhite},"&:disabled + label::before":{background:u.colorTextLightest}},"&:disabled + label::before":{background:u.colorElementDarkest}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:u.colorBlueMid,background:u.colorBlueMid},"&:disabled + label svg":{fill:u.colorTextLightest}},"&:disabled":{"& + label":{borderColor:u.colorElementDark,background:u.colorElementDark,"& svg":{fill:u.colorElementDark}}}},""),ghost:t({background:u.colorWhite,width:u.spacingM,height:u.spacingM,border:`2px solid ${u.colorElementDark}`,fill:u.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:t({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:u.colorWhite,width:u.borderRadiusMedium,height:u.borderRadiusMedium}},""),ghostCheckbox:t({borderRadius:"20%",svg:{width:u.spacingS,minWidth:u.spacingS,minHeight:u.spacingS,height:u.spacingS}},"")},k=({isChecked:t,className:r,isDisabled:u=!1,id:b,label:h,name:g,onBlur:f,onChange:m,onFocus:k,isRequired:x=!1,testId:v="cf-ui-controlled-input",type:E="checkbox",value:y,canBlurOnEsc:M=!0,isIndeterminate:C,inputProps:w,labelProps:R,...B},D)=>{const I=i(null),q=o(p.input,{[p.inputRadioButton]:"radio"===E,[p.inputCheckbox]:"checkbox"===E,[p.inputDisabled]:u},null==w?void 0:w.className),S=o(p.container,r),N=o(p.ghost,{[p.ghostRadioButton]:"radio"===E,[p.ghostCheckbox]:"checkbox"===E},null==R?void 0:R.className),z=l((e=>{e.persist(),"Escape"===e.nativeEvent.code&&M&&e.currentTarget.blur()}),[M]);a((()=>{I.current.indeterminate=C}),[C]);const P={size:"medium",variant:u?"secondary":"white"};return n.createElement(d,e({as:"div",display:"inline-block",ref:D,testId:v},B,{className:S}),n.createElement("input",e({},w,{className:q,value:y,name:g,checked:t,type:E,ref:I,onChange:e=>{m&&m(e)},onBlur:e=>{f&&f(e)},onFocus:e=>{k&&k(e)},"aria-label":h,id:b,required:x,disabled:u,onKeyDown:z})),"radio"===E?n.createElement("label",e({},R,{className:N,htmlFor:b}),n.createElement("span",null)):n.createElement("label",e({},R,{className:N,htmlFor:b}),C?n.createElement(c,P):n.createElement(s,P)))},x=n.forwardRef(k);var v={};h(v,"Checkbox",(()=>y));const E=({testId:o="cf-ui-checkbox",...t},r)=>n.createElement(x,e({testId:o,type:"checkbox",ref:r},t)),y=n.forwardRef(E);var M={};h(M,"RadioButton",(()=>w));const C=({testId:o="cf-ui-radio-button",...t},r)=>n.createElement(x,e({testId:o,type:"radio",ref:r},t)),w=n.forwardRef(C);b(f,m),b(f,v),b(f,M),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 r,{useEffect as i,useRef as n,useCallback as a}from"react";import{Minus as l,Done as c}from"@contentful/f36-icons";import{Label as s}from"@contentful/f36-forms";import{Box as d}from"@contentful/f36-core";import u from"@contentful/f36-tokens";function b(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 m(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var f={},h={};m(h,"ControlledInput",(()=>k));const p={container:t({position:"relative",textOverflow:"ellipsis",lineHeight:u.lineHeightL,margin:"0",width:u.spacingM,height:u.spacingM,minHeight:u.spacingM,overflow:"visible"},""),input:t({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",border:`2px solid ${u.colorPrimary}`,boxShadow:u.glowPrimary},"&:checked + label":{borderColor:u.colorBlueMid,background:u.colorBlueMid},"&:disabled + label":{borderColor:u.colorElementDark,background:u.colorElementDark}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:u.colorWhite},"&:disabled + label::before":{background:u.colorTextLightest}},"&:disabled + label::before":{background:u.colorElementDarkest}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:u.colorBlueMid,background:u.colorBlueMid},"&:disabled + label svg":{fill:u.colorTextLightest}},"&:disabled":{"& + label":{borderColor:u.colorElementDark,background:u.colorElementDark,"& svg":{fill:u.colorElementDark}}}},""),ghost:t({background:u.colorWhite,width:u.spacingM,height:u.spacingM,border:`2px solid ${u.colorElementDark}`,fill:u.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:t({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:u.colorWhite,width:u.borderRadiusMedium,height:u.borderRadiusMedium}},""),ghostCheckbox:t({borderRadius:"20%",svg:{width:u.spacingS,minWidth:u.spacingS,minHeight:u.spacingS,height:u.spacingS}},"")},g=({isChecked:t,className:u,isDisabled:b=!1,id:m,label:f,name:h,onBlur:g,onChange:k,onFocus:x,isRequired:v=!1,testId:E="cf-ui-controlled-input",type:C="checkbox",value:y,canBlurOnEsc:M=!0,isIndeterminate:R,inputProps:w,labelProps:B,...D},I)=>{const S=n(null),N=o(p.input,{[p.inputRadioButton]:"radio"===C,[p.inputCheckbox]:"checkbox"===C,[p.inputDisabled]:b},null==w?void 0:w.className),z=o(p.container,u),P=o(p.ghost,{[p.ghostRadioButton]:"radio"===C,[p.ghostCheckbox]:"checkbox"===C},null==B?void 0:B.className),O=a((e=>{e.persist(),"Escape"===e.nativeEvent.code&&M&&e.currentTarget.blur()}),[M]);i((()=>{S.current.indeterminate=R}),[R]);const W={size:"medium",variant:b?"secondary":"white"};return r.createElement(d,e({as:"div",display:"inline-block",ref:I,testId:E},D,{className:z}),r.createElement("input",e({},w,{className:N,value:y,name:h,checked:t,type:C,ref:S,onChange:e=>{k&&k(e)},onBlur:e=>{g&&g(e)},onFocus:e=>{x&&x(e)},"aria-label":f,id:m,required:v,disabled:b,onKeyDown:O})),"radio"===C?r.createElement(s,e({},B,{className:P,htmlFor:m})):r.createElement(s,e({},B,{className:P,htmlFor:m}),R?r.createElement(l,W):r.createElement(c,W)))},k=r.forwardRef(g);var x={};m(x,"Checkbox",(()=>E));const v=({testId:o="cf-ui-checkbox",...t},i)=>r.createElement(k,e({testId:o,type:"checkbox",ref:i},t)),E=r.forwardRef(v);var C={};m(C,"RadioButton",(()=>M));const y=({testId:o="cf-ui-radio-button",...t},i)=>r.createElement(k,e({testId:o,type:"radio",ref:i},t)),M=r.forwardRef(y);b(f,h),b(f,x),b(f,C);export{k as ControlledInput,E as Checkbox,M as RadioButton};
+import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as t}from"emotion";import r,{useCallback as n,useRef as i,useEffect as l}from"react";import{Minus as a,Done as c}from"@contentful/f36-icons";import{Box as s}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,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var m={},h={};b(h,"ControlledInput",(()=>g));const f={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",border:`2px solid ${d.colorPrimary}`,boxShadow:d.glowPrimary},"&:checked + label":{borderColor:d.colorBlueMid,background:d.colorBlueMid},"&:disabled + label":{borderColor:d.colorElementDark,background:d.colorElementDark}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:d.colorWhite},"&:disabled + label::before":{background:d.colorTextLightest}},"&:disabled + label::before":{background:d.colorElementDarkest}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:d.colorBlueMid,background:d.colorBlueMid},"&:disabled + label svg":{fill:d.colorTextLightest}},"&:disabled":{"& + label":{borderColor:d.colorElementDark,background:d.colorElementDark,"& svg":{fill:d.colorElementDark}}}},""),ghost:t({background:d.colorWhite,width:d.spacingM,height:d.spacingM,border:`2px solid ${d.colorElementDark}`,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}},"")},p=({isChecked:t,className:d,isDisabled:u=!1,id:b,label:m,name:h,onBlur:p,onChange:g,onFocus:k,isRequired:x=!1,testId:E="cf-ui-controlled-input",type:v="checkbox",value:C,canBlurOnEsc:y=!0,isIndeterminate:M,inputProps:R,labelProps:w,...B},D)=>{const I=i(null),S=o(f.input,{[f.inputRadioButton]:"radio"===v,[f.inputCheckbox]:"checkbox"===v,[f.inputDisabled]:u},null==R?void 0:R.className),N=o(f.container,d),z=o(f.ghost,{[f.ghostRadioButton]:"radio"===v,[f.ghostCheckbox]:"checkbox"===v},null==w?void 0:w.className),P=n((e=>{e.persist(),"Escape"===e.nativeEvent.code&&y&&e.currentTarget.blur()}),[y]);l((()=>{I.current.indeterminate=M}),[M]);const O={size:"medium",variant:u?"secondary":"white"};return r.createElement(s,e({as:"div",display:"inline-block",ref:D,testId:E},B,{className:N}),r.createElement("input",e({},R,{className:S,value:C,name:h,checked:t,type:v,ref:I,onChange:e=>{g&&g(e)},onBlur:e=>{p&&p(e)},onFocus:e=>{k&&k(e)},"aria-label":m,id:b,required:x,disabled:u,onKeyDown:P})),"radio"===v?r.createElement("label",e({},w,{className:z,htmlFor:b}),r.createElement("span",null)):r.createElement("label",e({},w,{className:z,htmlFor:b}),M?r.createElement(a,O):r.createElement(c,O)))},g=r.forwardRef(p);var k={};b(k,"Checkbox",(()=>E));const x=({testId:o="cf-ui-checkbox",...t},n)=>r.createElement(g,e({testId:o,type:"checkbox",ref:n},t)),E=r.forwardRef(x);var v={};b(v,"RadioButton",(()=>y));const C=({testId:o="cf-ui-radio-button",...t},n)=>r.createElement(g,e({testId:o,type:"radio",ref:n},t)),y=r.forwardRef(C);u(m,h),u(m,k),u(m,v);export{g as ControlledInput,E as Checkbox,y as RadioButton};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import React, { EventHandler, ChangeEvent, FocusEvent } from "react";
-import { LabelProps } from "@contentful/f36-forms";
 import { BoxProps } from "@contentful/f36-core";
@@ -20,13 +19,11 @@ export interface ControlledInputProps extends Omit<BoxProps<'div'>, 'ref'> {
     isIndeterminate?: boolean;
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    labelProps?: LabelProps;
+    inputProps?: Partial<React.InputHTMLAttributes<HTMLInputElement>>;
+    labelProps?: Partial<React.InputHTMLAttributes<HTMLLabelElement>>;
 }
 export const ControlledInput: React.ForwardRefExoticComponent<ControlledInputProps & React.RefAttributes<HTMLDivElement>>;
-export interface CheckboxProps extends ControlledInputProps {
-}
+export type CheckboxProps = Omit<ControlledInputProps, 'type'>;
 export const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
-export interface RadioButtonProps extends Omit<ControlledInputProps, 'isIndeterminate'> {
-}
+export type RadioButtonProps = Omit<ControlledInputProps, 'isIndeterminate' | 'type'>;
 export const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@contentful/f36-inputs",
-  "version": "4.0.1-next-v4-4488.2000+842f5936",
+  "version": "4.0.1-next-v4-4528.2001+5925f0d4",
   "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-4488.2000+842f5936",
-    "@contentful/f36-icons": "4.0.1-next-v4-4488.2000+842f5936",
-    "@contentful/f36-tokens": "4.0.1-next-v4-4488.2000+842f5936",
+    "@contentful/f36-core": "4.0.1-next-v4-4528.2001+5925f0d4",
+    "@contentful/f36-icons": "4.0.1-next-v4-4528.2001+5925f0d4",
+    "@contentful/f36-tokens": "4.0.1-next-v4-4528.2001+5925f0d4",
     "emotion": "^10.0.17"
@@ -37,3 +37,3 @@ },
   },
-  "gitHead": "842f5936ce062fcff8feb26e5ac7dc8254144390"
+  "gitHead": "5925f0d432318f2e5ec58bf559995c1bc81350a4"
 }

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

Worsened metrics

Total package byte prevSize

151771

decreased by-1.34%

Lines of code

476

decreased by-0.21%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-4528.2001+5925f0d4

• Updated@contentful/f36-icons@4.0.1-next-v4-4528.2001+5925f0d4

• Updated@contentful/f36-tokens@4.0.1-next-v4-4528.2001+5925f0d4