@leafygreen-ui/text-input - npm Package Compare versions

Comparing version 12.1.13-next.1 to 12.1.13-next.2

CHANGELOG.md

 # @leafygreen-ui/text-input
 
+## 12.1.13-next.2
+
+### Patch Changes
+
+- b060d06ce: Updates story files for Storybook 7.x
+- Updated dependencies [6a3f03fd2]
+- Updated dependencies [b060d06ce]
+- Updated dependencies [b060d06ce]
+  - @leafygreen-ui/typography@16.4.1-next.2
+  - @leafygreen-ui/hooks@7.7.4-next.2
+  - @leafygreen-ui/icon@11.16.1-next.2
+  - @leafygreen-ui/leafygreen-provider@3.1.3-next.2
+  - @leafygreen-ui/lib@10.3.4-next.2
+
 ## 12.1.13-next.1
@@ -4,0 +18,0 @@

package.json

 {
   "name": "@leafygreen-ui/text-input",
-  "version": "12.1.13-next.1",
+  "version": "12.1.13-next.2",
   "description": "leafyGreen UI Kit Text Input",
@@ -24,11 +24,11 @@ "main": "./dist/index.js",
     "@leafygreen-ui/emotion": "^4.0.4",
-    "@leafygreen-ui/hooks": "^7.7.4-next.1",
-    "@leafygreen-ui/icon": "^11.16.1-next.1",
-    "@leafygreen-ui/lib": "^10.3.4-next.1",
+    "@leafygreen-ui/hooks": "^7.7.4-next.2",
+    "@leafygreen-ui/icon": "^11.16.1-next.2",
+    "@leafygreen-ui/lib": "^10.3.4-next.2",
     "@leafygreen-ui/palette": "^4.0.4",
     "@leafygreen-ui/tokens": "^2.1.0",
-    "@leafygreen-ui/typography": "^16.4.1-next.1"
+    "@leafygreen-ui/typography": "^16.4.1-next.2"
   },
   "peerDependencies": {
-    "@leafygreen-ui/leafygreen-provider": "^3.1.3-next.1"
+    "@leafygreen-ui/leafygreen-provider": "^3.1.3-next.2"
   },
@@ -35,0 +35,0 @@ "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/text-input",

stories.js

@@ -1,1 +0,1 @@
-import e,{useState as n}from"react";import{createUniqueClassName as r,Theme as t,consoleOnce as o,storybookArgTypes as a,storybookExcludedControlParams as i}from"@leafygreen-ui/lib";import l from"prop-types";import{css as d,cx as s}from"@leafygreen-ui/emotion";import{useIdAllocator as c,useValidation as p}from"@leafygreen-ui/hooks";import u from"@leafygreen-ui/icon/dist/Checkmark";import b from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import g from"@leafygreen-ui/icon/dist/Warning";import{useDarkMode as f}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as h,fontFamilies as y,spacing as m,fontWeights as x,transitionDuration as v,focusRing as w,hoverRing as k,typeScales as O}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as S,Label as j,Description as z,Error as E}from"@leafygreen-ui/typography";import{palette as N}from"@leafygreen-ui/palette";function L(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function D(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?L(Object(r),!0).forEach((function(n){P(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function P(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function I(){return I=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},I.apply(this,arguments)}function C(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function M(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function V(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,a,i,l=[],d=!0,s=!1;try{if(a=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;d=!1}else for(;!(d=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);d=!0);}catch(e){s=!0,o=e}finally{try{if(!d&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}(e,n)||T(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,n){if(e){if("string"==typeof e)return A(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?A(e,n):void 0}}function A(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var F,B,X,W,H,$,_,q,R,U,G,J,K,Q,Y,Z,ee,ne,re,te,oe,ae,ie,le,de,se,ce,pe,ue,be,ge,fe,he,ye,me,xe,ve,we,ke,Oe,Se,je,ze,Ee,Ne,Le,De,Pe,Ie,Ce,Me,Ve,Te,Ae,Fe,Be,Xe,We,He={None:"none",Valid:"valid",Error:"error"},$e="text",_e={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"};D(D({},h),{},{Large:18});var qe=function(e){return"0 0 0 100px ".concat(e," inset")},Re=r("icon-selector"),Ue=d(F||(F=M(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),y.default),Ge=function(e,n){switch(e){case _e.XSmall:return d(B||(B=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),O.body1.fontSize,O.body1.lineHeight);case _e.Small:return d(X||(X=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),O.body1.fontSize,O.body1.lineHeight);case _e.Large:return d(W||(W=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),O.large.fontSize,O.large.lineHeight);default:var r=n==h.Body1?O.body1:O.body2;return d(H||(H=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),r.fontSize,r.lineHeight)}},Je=d($||($=M(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),Ke=d(_||(_=M(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ","px;\n"])),m[1]),Qe=d(q||(q=M(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),Ye=d(R||(R=M(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n\n  &:disabled {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    ",";\n  }\n\n  /* clears the ‘X’ from Internet Explorer & Chrome */\n  &[type='search'] {\n    &::-ms-clear,\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  }\n"])),Je,y.default,x.regular,v.default,Je),Ze=(P(J={},t.Light,d(U||(U=M(["\n    color: ",";\n    background: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      color: ",";\n      background: ",";\n      border: 1px solid ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),N.black,N.white,N.gray.base,N.black,N.white,N.gray.base,N.black,qe(N.white),qe(N.white),w.light.input,N.white,qe(N.white),k.light.gray,N.gray.light1,x.regular,k.light.gray,N.gray.base,N.gray.light2,N.gray.light1,N.gray.base,N.gray.base,qe(N.gray.light2))),P(J,t.Dark,d(G||(G=M(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      border: 1px solid ",";\n      color: ",";\n      background: ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),N.gray.light3,N.gray.dark4,N.gray.base,N.gray.base,N.gray.light3,N.gray.dark4,N.gray.light3,qe(N.gray.dark4),qe(N.gray.dark4),w.dark.input,N.blue.light1,qe(N.gray.dark4),k.dark.gray,k.dark.gray,N.gray.dark1,x.regular,N.gray.dark1,N.gray.dark3,N.gray.dark2,N.gray.dark1,N.gray.dark1,qe(N.gray.dark2))),J),en=(P(Y={},t.Light,d(K||(K=M(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),w.light.input,N.white)),P(Y,t.Dark,d(Q||(Q=M(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),w.dark.input,N.gray.dark4)),Y),nn=(P(te={},_e.XSmall,d(Z||(Z=M(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),P(te,_e.Small,d(ee||(ee=M(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),P(te,_e.Default,d(ne||(ne=M(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),P(te,_e.Large,d(re||(re=M(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),te),rn=(P(de={},_e.XSmall,d(oe||(oe=M(["\n    padding-right: 31px;\n  "])))),P(de,_e.Small,d(ae||(ae=M(["\n    padding-right: 34px;\n  "])))),P(de,_e.Default,d(ie||(ie=M(["\n    padding-right: 37px;\n  "])))),P(de,_e.Large,d(le||(le=M(["\n    padding-right: 39px;\n  "])))),de),tn=(P(be={},_e.XSmall,d(se||(se=M(["\n    padding-right: 64px;\n  "])))),P(be,_e.Small,d(ce||(ce=M(["\n    padding-right: 69px;\n  "])))),P(be,_e.Default,d(pe||(pe=M(["\n    padding-right: 71px;\n  "])))),P(be,_e.Large,d(ue||(ue=M(["\n    padding-right: 74px;\n  "])))),be),on=(P(Oe={},He.Valid,(P(he={},t.Light,d(ge||(ge=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),N.green.dark1,k.light.green)),P(he,t.Dark,d(fe||(fe=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),N.green.dark1,k.dark.green)),he)),P(Oe,He.Error,(P(xe={},t.Light,d(ye||(ye=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),N.red.base,k.light.red)),P(xe,t.Dark,d(me||(me=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),N.red.light1,k.dark.red)),xe)),P(Oe,He.None,(P(ke={},t.Light,d(ve||(ve=M([""])))),P(ke,t.Dark,d(we||(we=M([""])))),ke)),Oe),an=d(Se||(Se=M(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n  padding-left: ","px;\n  right: 2px; // account for border width\n"])),m[2]),ln=(P(Le={},_e.XSmall,d(je||(je=M(["\n    padding-right: 6px;\n  "])))),P(Le,_e.Small,d(ze||(ze=M(["\n    padding-right: 10px;\n  "])))),P(Le,_e.Default,d(Ee||(Ee=M(["\n    padding-right: 12px;\n  "])))),P(Le,_e.Large,d(Ne||(Ne=M(["\n    padding-right: 14px;\n  "])))),Le),dn=(P(Te={},He.Valid,(P(Ie={},t.Light,d(De||(De=M(["\n      color: ",";\n    "])),N.green.dark1)),P(Ie,t.Dark,d(Pe||(Pe=M(["\n      color: ",";\n    "])),N.green.base)),Ie)),P(Te,He.Error,(P(Ve={},t.Light,d(Ce||(Ce=M(["\n      color: ",";\n    "])),N.red.base)),P(Ve,t.Dark,d(Me||(Me=M(["\n      color: ",";\n    "])),N.red.light1)),Ve)),Te),sn=d(Ae||(Ae=M(["\n  font-size: 12px;\n  line-height: 12px;\n  font-style: italic;\n  font-weight: ",";\n  display: flex;\n  align-items: center;\n  > p {\n    margin: 0;\n  }\n"])),x.regular),cn=(P(Xe={},t.Light,d(Fe||(Fe=M(["\n    color: ",";\n  "])),N.gray.dark1)),P(Xe,t.Dark,d(Be||(Be=M(["\n    color: ",";\n  "])),N.gray.base)),Xe),pn=d(We||(We=M(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: ",";\n"])),Je,x.regular),un=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],bn=e.forwardRef((function(r,t){var a,i=r.label,l=r.description,d=r.onChange,h=r.onBlur,y=r.placeholder,m=r.errorMessage,x=r.optional,v=void 0!==x&&x,w=r.disabled,k=void 0!==w&&w,O=r.state,N=void 0===O?He.None:O,L=r.type,D=void 0===L?$e:L,M=r.id,T=r.value,A=r.className,F=r.darkMode,B=r.sizeVariant,X=void 0===B?_e.Default:B,W=r["aria-labelledby"],H=r.handleValidation,$=r.baseFontSize,_=C(r,un),q=f(F),R=q.darkMode,U=q.theme,G="string"==typeof T,J=V(n(""),2),K=J[0],Q=J[1],Y=G?T:K,Z=c({prefix:"textinput",id:M}),ee=S($),ne=p(H);"search"===D||i||W||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"===D&&(o.warn('We recommend using the Leafygreen SearchInput for `type="search"` inputs.'),_["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput.")),"password"===D&&o.warn('We recommend using the Leafygreen PasswordInput for `type="password"` inputs.'),"number"===D&&o.warn('We recommend using the Leafygreen NumberInput for `type="number"` inputs.');var re=R?b:u,te=N===He.None&&!k&&v;return e.createElement("div",{className:s(Ue,Ge(X,ee),A)},(i||l)&&e.createElement("div",{className:Ke},i&&e.createElement(j,{darkMode:R,htmlFor:Z,disabled:k,className:Je},i),l&&e.createElement(z,{darkMode:R,disabled:k,className:Je},l)),e.createElement("div",{className:Qe},e.createElement("input",I({},_,{"aria-labelledby":W,type:D,className:s(Ye,Ze[U],nn[X],on[N][U],en[U],(a={},P(a,rn[X],N!==He.None),P(a,tn[X],te),a)),value:Y,required:!v,disabled:k,placeholder:y,onChange:function(e){d&&d(e),G||Q(e.target.value),ne.onChange(e)},onBlur:function(e){h&&h(e),ne.onBlur(e)},ref:t,id:Z,autoComplete:k?"off":(null==_?void 0:_.autoComplete)||"on","aria-invalid":"error"===N})),e.createElement("div",{className:s(Re,an,ln[X])},N===He.Valid&&e.createElement(re,{role:"presentation",className:dn.valid[U]}),N===He.Error&&e.createElement(g,{role:"presentation",className:dn.error[U]}),te&&e.createElement("div",{className:s(sn,cn[U])},e.createElement("p",null,"Optional")))),N===He.Error&&m&&e.createElement(E,{darkMode:R,className:pn},m))}));bn.displayName="TextInput",bn.propTypes={id:l.string,label:l.string,"aria-labelledby":l.string,description:l.string,optional:l.bool,disabled:l.bool,onChange:l.func,placeholder:l.string,errorMessage:l.string,state:l.oneOf(Object.values(He)),value:l.string,className:l.string,sizeVariant:l.oneOf(Object.values(_e)),baseFontSize:l.oneOf(Object.values(h)),darkMode:l.bool};var gn,fn={title:"Components/TextInput",component:bn,args:{label:"Label",description:"This is a description for the input"},argTypes:{darkMode:{control:"boolean"},disabled:{control:"boolean"},label:{control:"text"},description:{control:"text"},placeholder:{control:"text"},optional:{control:"boolean"},id:{control:"text"},errorMessage:{control:"text"},state:{control:"select",options:Object.values(He)},sizeVariant:{control:"select",options:Object.values(_e)},baseFontSize:a.updatedBaseFontSize},parameters:{default:"Basic",controls:{exclude:[].concat((gn=i,function(e){if(Array.isArray(e))return A(e)}(gn)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(gn)||T(gn)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),["value","handleValidation"])}}},hn=function(n){var r=I({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(n),n));return e.createElement(bn,r)}.bind({}),yn=/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,mn=function(r){var t=V(n("none"),2),o=t[0],a=t[1];return e.createElement(bn,I({placeholder:"[e-mail]",state:o,type:"email",errorMessage:"Invalid email",handleValidation:function(e){e.match(yn)?a("valid"):a("error")}},r))};export{hn as Basic,mn as WithValidation,fn as default};
+import e,{useState as n}from"react";import{createUniqueClassName as r,Theme as t,consoleOnce as o,storybookArgTypes as a}from"@leafygreen-ui/lib";import i from"prop-types";import{css as l,cx as d}from"@leafygreen-ui/emotion";import{useIdAllocator as s,useValidation as c}from"@leafygreen-ui/hooks";import p from"@leafygreen-ui/icon/dist/Checkmark";import u from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import g from"@leafygreen-ui/icon/dist/Warning";import{useDarkMode as b}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as f,fontFamilies as h,spacing as m,fontWeights as y,transitionDuration as x,focusRing as v,hoverRing as w,typeScales as k}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as O,Label as j,Description as z,Error as S}from"@leafygreen-ui/typography";import{palette as E}from"@leafygreen-ui/palette";function N(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function L(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?N(Object(r),!0).forEach((function(n){D(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):N(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function D(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n||"default");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function P(){return P=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},P.apply(this,arguments)}function C(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function M(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function I(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,a,i,l=[],d=!0,s=!1;try{if(a=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;d=!1}else for(;!(d=(t=a.call(r)).done)&&(l.push(t.value),l.length!==n);d=!0);}catch(e){s=!0,o=e}finally{try{if(!d&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return V(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return V(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function V(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=new Array(n);r<n;r++)t[r]=e[r];return t}var T,F,B,X,A,W,H,$,_,q,R,U,G,J,K,Q,Y,Z,ee,ne,re,te,oe,ae,ie,le,de,se,ce,pe,ue,ge,be,fe,he,me,ye,xe,ve,we,ke,Oe,je,ze,Se,Ee,Ne,Le,De,Pe,Ce,Me,Ie,Ve,Te,Fe,Be,Xe,Ae={None:"none",Valid:"valid",Error:"error"},We="text",He={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"};L(L({},f),{},{Large:18});var $e=function(e){return"0 0 0 100px ".concat(e," inset")},_e=r("icon-selector"),qe=l(T||(T=M(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),h.default),Re=function(e,n){switch(e){case He.XSmall:return l(F||(F=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),k.body1.fontSize,k.body1.lineHeight);case He.Small:return l(B||(B=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),k.body1.fontSize,k.body1.lineHeight);case He.Large:return l(X||(X=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),k.large.fontSize,k.large.lineHeight);default:var r=n==f.Body1?k.body1:k.body2;return l(A||(A=M(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),r.fontSize,r.lineHeight)}},Ue=l(W||(W=M(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),Ge=l(H||(H=M(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ","px;\n"])),m[1]),Je=l($||($=M(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),Ke=l(_||(_=M(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: ",";\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: ","ms ease-in-out;\n  transition-property: border-color, box-shadow;\n\n  &:disabled {\n    cursor: not-allowed;\n\n    &:hover,\n    &:active {\n      box-shadow: none;\n    }\n  }\n\n  &::placeholder {\n    ",";\n  }\n\n  /* clears the ‘X’ from Internet Explorer & Chrome */\n  &[type='search'] {\n    &::-ms-clear,\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-webkit-search-decoration,\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-results-button,\n    &::-webkit-search-results-decoration {\n      display: none;\n    }\n  }\n"])),Ue,h.default,y.regular,x.default,Ue),Qe=(D(U={},t.Light,l(q||(q=M(["\n    color: ",";\n    background: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      color: ",";\n      background: ",";\n      border: 1px solid ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),E.black,E.white,E.gray.base,E.black,E.white,E.gray.base,E.black,$e(E.white),$e(E.white),v.light.input,E.white,$e(E.white),w.light.gray,E.gray.light1,y.regular,w.light.gray,E.gray.base,E.gray.light2,E.gray.light1,E.gray.base,E.gray.base,$e(E.gray.light2))),D(U,t.Dark,l(R||(R=M(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:-webkit-autofill {\n      border: 1px solid ",";\n      color: ",";\n      background: ",";\n      -webkit-text-fill-color: ",";\n      box-shadow: ",";\n\n      &:not(:disabled):focus {\n        box-shadow: ",",\n          ",";\n        border-color: ",";\n      }\n\n      &:not(:disabled):hover:not(:focus) {\n        box-shadow: ",",\n          ",";\n      }\n    }\n\n    &:hover,\n    &:active {\n      &:not(:disabled):not(:focus) {\n        box-shadow: ",";\n      }\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: ",";\n    }\n\n    &:disabled {\n      color: ",";\n      background-color: ",";\n      border-color: ",";\n\n      &::placeholder {\n        color: inherit;\n      }\n\n      &:-webkit-autofill {\n        &,\n        &:hover,\n        &:focus {\n          appearance: none;\n          border: 1px solid ",";\n          -webkit-text-fill-color: ",";\n          box-shadow: ",";\n        }\n      }\n    }\n  "])),E.gray.light3,E.gray.dark4,E.gray.base,E.gray.base,E.gray.light3,E.gray.dark4,E.gray.light3,$e(E.gray.dark4),$e(E.gray.dark4),v.dark.input,E.blue.light1,$e(E.gray.dark4),w.dark.gray,w.dark.gray,E.gray.dark1,y.regular,E.gray.dark1,E.gray.dark3,E.gray.dark2,E.gray.dark1,E.gray.dark1,$e(E.gray.dark2))),U),Ye=(D(K={},t.Light,l(G||(G=M(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),v.light.input,E.white)),D(K,t.Dark,l(J||(J=M(["\n    &:not(:disabled):focus {\n      box-shadow: ",";\n      border-color: ",";\n    }\n  "])),v.dark.input,E.gray.dark4)),K),Ze=(D(ne={},He.XSmall,l(Q||(Q=M(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),D(ne,He.Small,l(Y||(Y=M(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),D(ne,He.Default,l(Z||(Z=M(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),D(ne,He.Large,l(ee||(ee=M(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),ne),en=(D(ie={},He.XSmall,l(re||(re=M(["\n    padding-right: 31px;\n  "])))),D(ie,He.Small,l(te||(te=M(["\n    padding-right: 34px;\n  "])))),D(ie,He.Default,l(oe||(oe=M(["\n    padding-right: 37px;\n  "])))),D(ie,He.Large,l(ae||(ae=M(["\n    padding-right: 39px;\n  "])))),ie),nn=(D(pe={},He.XSmall,l(le||(le=M(["\n    padding-right: 64px;\n  "])))),D(pe,He.Small,l(de||(de=M(["\n    padding-right: 69px;\n  "])))),D(pe,He.Default,l(se||(se=M(["\n    padding-right: 71px;\n  "])))),D(pe,He.Large,l(ce||(ce=M(["\n    padding-right: 74px;\n  "])))),pe),rn=(D(we={},Ae.Valid,(D(be={},t.Light,l(ue||(ue=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),E.green.dark1,w.light.green)),D(be,t.Dark,l(ge||(ge=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),E.green.dark1,w.dark.green)),be)),D(we,Ae.Error,(D(me={},t.Light,l(fe||(fe=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),E.red.base,w.light.red)),D(me,t.Dark,l(he||(he=M(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          &:not(:disabled):not(:focus) {\n            box-shadow: ",";\n          }\n        }\n      }\n    "])),E.red.light1,w.dark.red)),me)),D(we,Ae.None,(D(ve={},t.Light,l(ye||(ye=M([""])))),D(ve,t.Dark,l(xe||(xe=M([""])))),ve)),we),tn=l(ke||(ke=M(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n  padding-left: ","px;\n  right: 2px; // account for border width\n"])),m[2]),on=(D(Ee={},He.XSmall,l(Oe||(Oe=M(["\n    padding-right: 6px;\n  "])))),D(Ee,He.Small,l(je||(je=M(["\n    padding-right: 10px;\n  "])))),D(Ee,He.Default,l(ze||(ze=M(["\n    padding-right: 12px;\n  "])))),D(Ee,He.Large,l(Se||(Se=M(["\n    padding-right: 14px;\n  "])))),Ee),an=(D(Ie={},Ae.Valid,(D(De={},t.Light,l(Ne||(Ne=M(["\n      color: ",";\n    "])),E.green.dark1)),D(De,t.Dark,l(Le||(Le=M(["\n      color: ",";\n    "])),E.green.base)),De)),D(Ie,Ae.Error,(D(Me={},t.Light,l(Pe||(Pe=M(["\n      color: ",";\n    "])),E.red.base)),D(Me,t.Dark,l(Ce||(Ce=M(["\n      color: ",";\n    "])),E.red.light1)),Me)),Ie),ln=l(Ve||(Ve=M(["\n  font-size: 12px;\n  line-height: 12px;\n  font-style: italic;\n  font-weight: ",";\n  display: flex;\n  align-items: center;\n  > p {\n    margin: 0;\n  }\n"])),y.regular),dn=(D(Be={},t.Light,l(Te||(Te=M(["\n    color: ",";\n  "])),E.gray.dark1)),D(Be,t.Dark,l(Fe||(Fe=M(["\n    color: ",";\n  "])),E.gray.base)),Be),sn=l(Xe||(Xe=M(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: ",";\n"])),Ue,y.regular),cn=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],pn=e.forwardRef((function(r,t){var a,i=r.label,l=r.description,f=r.onChange,h=r.onBlur,m=r.placeholder,y=r.errorMessage,x=r.optional,v=void 0!==x&&x,w=r.disabled,k=void 0!==w&&w,E=r.state,N=void 0===E?Ae.None:E,L=r.type,M=void 0===L?We:L,V=r.id,T=r.value,F=r.className,B=r.darkMode,X=r.sizeVariant,A=void 0===X?He.Default:X,W=r["aria-labelledby"],H=r.handleValidation,$=r.baseFontSize,_=C(r,cn),q=b(B),R=q.darkMode,U=q.theme,G="string"==typeof T,J=I(n(""),2),K=J[0],Q=J[1],Y=G?T:K,Z=s({prefix:"textinput",id:V}),ee=O($),ne=c(H);"search"===M||i||W||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"===M&&(o.warn('We recommend using the Leafygreen SearchInput for `type="search"` inputs.'),_["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput.")),"password"===M&&o.warn('We recommend using the Leafygreen PasswordInput for `type="password"` inputs.'),"number"===M&&o.warn('We recommend using the Leafygreen NumberInput for `type="number"` inputs.');var re=R?u:p,te=N===Ae.None&&!k&&v;return e.createElement("div",{className:d(qe,Re(A,ee),F)},(i||l)&&e.createElement("div",{className:Ge},i&&e.createElement(j,{darkMode:R,htmlFor:Z,disabled:k,className:Ue},i),l&&e.createElement(z,{darkMode:R,disabled:k,className:Ue},l)),e.createElement("div",{className:Je},e.createElement("input",P({},_,{"aria-labelledby":W,type:M,className:d(Ke,Qe[U],Ze[A],rn[N][U],Ye[U],(a={},D(a,en[A],N!==Ae.None),D(a,nn[A],te),a)),value:Y,required:!v,disabled:k,placeholder:m,onChange:function(e){f&&f(e),G||Q(e.target.value),ne.onChange(e)},onBlur:function(e){h&&h(e),ne.onBlur(e)},ref:t,id:Z,autoComplete:k?"off":(null==_?void 0:_.autoComplete)||"on","aria-invalid":"error"===N})),e.createElement("div",{className:d(_e,tn,on[A])},N===Ae.Valid&&e.createElement(re,{role:"presentation",className:an.valid[U]}),N===Ae.Error&&e.createElement(g,{role:"presentation",className:an.error[U]}),te&&e.createElement("div",{className:d(ln,dn[U])},e.createElement("p",null,"Optional")))),N===Ae.Error&&y&&e.createElement(S,{darkMode:R,className:sn},y))}));pn.displayName="TextInput",pn.propTypes={id:i.string,label:i.string,"aria-labelledby":i.string,description:i.string,optional:i.bool,disabled:i.bool,onChange:i.func,placeholder:i.string,errorMessage:i.string,state:i.oneOf(Object.values(Ae)),value:i.string,className:i.string,sizeVariant:i.oneOf(Object.values(He)),baseFontSize:i.oneOf(Object.values(f)),darkMode:i.bool};var un={title:"Components/TextInput",component:pn,args:{label:"Label",description:"This is a description for the input"},argTypes:{darkMode:{control:"boolean"},disabled:{control:"boolean"},label:{control:"text"},description:{control:"text"},placeholder:{control:"text"},optional:{control:"boolean"},id:{control:"text"},errorMessage:{control:"text"},state:{control:"select",options:Object.values(Ae)},sizeVariant:{control:"select",options:Object.values(He)},baseFontSize:a.updatedBaseFontSize},parameters:{default:"Basic",controls:{exclude:["value","handleValidation"]}}},gn=function(n){var r=P({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(n),n));return e.createElement(pn,r)}.bind({}),bn=/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,fn=function(r){var t=I(n("none"),2),o=t[0],a=t[1];return e.createElement(pn,P({placeholder:"[e-mail]",state:o,type:"email",errorMessage:"Invalid email",handleValidation:function(e){e.match(bn)?a("valid"):a("error")}},r))};export{gn as Basic,fn as WithValidation,un as default};

No alert changes

Worsened metrics

Total package byte prevSize

274295

decreased by-0.18%

Lines of code

1797

decreased by-0.33%

Dependency changes

• Updated@leafygreen-ui/hooks@^7.7.4-next.2

• Updated@leafygreen-ui/icon@^11.16.1-next.2

• Updated@leafygreen-ui/lib@^10.3.4-next.2

• Updated@leafygreen-ui/typography@^16.4.1-next.2