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

Comparing version 7.0.1 to 8.0.0

CHANGELOG.md

 # @leafygreen-ui/text-input
 
+## 8.0.0
+
+### Major Changes
+
+- f3aad7e2: Updates Dark Mode for visual brand refresh
+
+### Patch Changes
+
+- Updated dependencies [233ac580]
+- Updated dependencies [ba4aab15]
+- Updated dependencies [ba4aab15]
+- Updated dependencies [2cf1bc4a]
+- Updated dependencies [679b6239]
+- Updated dependencies [f3aad7e2]
+  - @leafygreen-ui/tokens@1.2.0
+  - @leafygreen-ui/typography@10.0.0
+  - @leafygreen-ui/lib@9.2.1
+
 ## 7.0.1
@@ -4,0 +22,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useState as r}from"react";import n from"prop-types";import{css as o,cx as a}from"@leafygreen-ui/emotion";import t from"@leafygreen-ui/icon/dist/Checkmark";import i from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import l from"@leafygreen-ui/icon/dist/Warning";import d from"@leafygreen-ui/interaction-ring";import{palette as s,uiColors as c}from"@leafygreen-ui/palette";import{createDataProp as p}from"@leafygreen-ui/lib";import{useIdAllocator as u,useValidation as g}from"@leafygreen-ui/hooks";import{Label as f,Description as b}from"@leafygreen-ui/typography";import{fontFamilies as h}from"@leafygreen-ui/tokens";import{jsx as m}from"@emotion/react";function y(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function x(){return(x=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function v(e,r){if(null==e)return{};var n,o,a=function(e,r){if(null==e)return{};var n,o,a={},t=Object.keys(e);for(o=0;o<t.length;o++)n=t[o],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(o=0;o<t.length;o++)n=t[o],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function k(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}function C(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var o,a,t=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(o=n.next()).done)&&(t.push(o.value),!r||t.length!==r);i=!0);}catch(e){l=!0,a=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw a}}return t}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return w(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return w(e,r)}(e,r)||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 w(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,o=new Array(r);n<r;n++)o[n]=e[n];return o}var O,B,z,N,S,T,j,F,I,E,M,H,V,A,D,P,R,X,L,U,W,q,K,$,G,J,Q,Y,Z,_=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],ee=p("icon-selector"),re={None:"none",Valid:"valid",Error:"error"},ne={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},oe="light",ae="dark",te={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},ie=30,le=o(O||(O=k(["\n  width: 100%;\n"]))),de=o(B||(B=k(["\n  display: flex;\n  flex-direction: column;\n"]))),se=o(z||(z=k(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),ce=o(N||(N=k(["\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  transition: border-color 150ms ease-in-out;\n  z-index: 1;\n  outline: none;\n\n  &:disabled {\n    cursor: not-allowed;\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"]))),pe=o(S||(S=k(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),ue=(y(E={},te.XSmall,o(T||(T=k(["\n    right: 10px;\n  "])))),y(E,te.Small,o(j||(j=k(["\n    right: 10px;\n  "])))),y(E,te.Default,o(F||(F=k(["\n    right: 12px;\n  "])))),y(E,te.Large,o(I||(I=k(["\n    right: 16px;\n  "])))),E),ge=o(M||(M=k(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]))),fe=o(H||(H=k(["\n  font-size: 13px;\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]))),be=(y(V={},oe,{inputColor:s.black,inputBackgroundColor:s.white,defaultBorder:s.gray.base,placeholderColor:s.gray.light1,disabledColor:s.gray.base,disabledBorderColor:s.gray.light1,disabledBackgroundColor:s.gray.light2,errorIconColor:s.red.base,errorMessage:s.red.base,errorBorder:s.red.base,validBorder:s.green.dark1,validIconColor:s.green.dark1,optional:s.gray.dark1}),y(V,ae,{inputColor:c.white,inputBackgroundColor:"#394F5A",defaultBorder:"#394F5A",placeholderColor:c.gray.base,disabledColor:c.gray.dark1,disabledBorderColor:"#394F5A",disabledBackgroundColor:"#263843",errorIconColor:"#EF8D6F",errorMessage:"#EF8D6F",errorBorder:"#5a3c3b",validBorder:"#394F5A",validIconColor:c.green.base,optional:c.gray.light1}),V),he=(y(P={},oe,(y(A={},re.Error,s.red.light3),y(A,re.Valid,s.green.light3),A)),y(P,ae,(y(D={},re.Error,c.red.dark2),y(D,re.Valid,c.gray.dark1),D)),P);function me(e){var r=e.state,n=e.optional,t=e.mode,i=e.disabled,l=e.sizeSet;switch(r){case re.Valid:return o(R||(R=k(["\n        // TODO: Refresh - remove mode === 'dark' toggle when new dark mode is added\n        padding-right: ","px;\n        border-color: ",";\n      "])),"dark"===t?30:36,i?"inherit":be[t].validBorder);case re.Error:return a(o(X||(X=k(["\n          // TODO: Refresh - remove mode === 'dark' toggle when new dark mode is added\n          padding-right: ","px;\n          border-color: ",";\n        "])),"dark"===t?30:36,i?"inherit":be[t].errorBorder),y({},o(L||(L=k(["\n            background-color: #5a3c3b;\n          "]))),t===ae));default:return o(U||(U=k(["\n        padding-right: ","px;\n        border-color: ",";\n      "])),n?60:l.padding,i?be[t].disabledBorderColor:be[t].defaultBorder)}}var ye=e.forwardRef((function(e,n){var s=e.label,c=e.description,p=e.onChange,w=e.onBlur,O=e.placeholder,B=e.errorMessage,z=e.optional,N=void 0!==z&&z,S=e.disabled,T=void 0!==S&&S,j=e.state,F=void 0===j?re.None:j,I=e.type,E=void 0===I?ne.Text:I,M=e.id,H=e.value,V=e.className,A=e.darkMode,D=void 0!==A&&A,P=e.sizeVariant,R=void 0===P?te.Default:P,X=e["aria-labelledby"],L=e.handleValidation,U=e.baseFontSize,ie=void 0===U?14:U,ye=v(e,_),xe=D?ae:oe,ve="string"==typeof H,ke=C(r(""),2),Ce=ke[0],we=ke[1],Oe=ve?H:Ce,Be=u({prefix:"textinput",id:M}),ze=function(e,r,n){var o;return(y(o={},te.XSmall,{inputHeight:22,inputText:13,text:13,lineHeight:20,padding:10}),y(o,te.Small,{inputHeight:28,inputText:13,text:13,lineHeight:20,padding:10}),y(o,te.Default,{inputHeight:36,inputText:"dark"==n?e:14===e?13:e,text:"dark"==n?e:14===e?13:e,lineHeight:"dark"==n&&14===e?16:20,padding:12}),y(o,te.Large,{inputHeight:48,inputText:18,text:18,lineHeight:22,padding:16}),o)[r]}(ie,R,xe),Ne=g(L);"search"===E||s||X||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"!==E||ye["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput.");var Se=D?i:t;return m("div",{className:a(de,V,o(W||(W=k(["\n            // TODO: Refresh - remove mode === 'dark' toggles when new dark mode is added\n            font-family: ",";\n          "])),"dark"===xe?h.legacy:h.default))},s&&m(f,{darkMode:D,htmlFor:Be,disabled:T,className:o(q||(q=k(["\n              font-size: ","px;\n            "])),ze.text)},s),c&&m(b,{darkMode:D,disabled:T,className:a(o(K||(K=k(["\n                font-size: ","px;\n                line-height: ","px;\n              "])),ze.text,ze.lineHeight),y({},o($||($=k(["\n                  padding-bottom: 4px;\n                "]))),!D))},c),m("div",{className:se},m(d,{borderRadius:"dark"===xe?"4px":"6px",className:le,darkMode:D,disabled:T,ignoreKeyboardContext:!0,color:F===re.Valid||F===re.Error?{hovered:he[xe][F]}:void 0},m("input",x({},ye,{"aria-labelledby":X,type:E,className:a(ce,o(G||(G=k(["\n                  color: ",";\n                  background-color: ",";\n                  font-size: ","px;\n                  height: ","px;\n                  padding-left: ","px;\n\n                  // TODO: Refresh - remove mode === 'dark' toggles when new dark mode is added\n                  font-family: ",";\n                  border-radius: ","px;\n\n                  &::placeholder {\n                    color: ",";\n                    font-weight: normal;\n                  }\n\n                  &:focus {\n                    border: 1px solid ",";\n                  }\n\n                  &:disabled {\n                    color: ",";\n                    background-color: ",";\n                    border-color: ",";\n\n                    &::placeholder {\n                      color: ",";\n                    }\n\n                    &:-webkit-autofill {\n                      &,\n                      &:hover,\n                      &:focus {\n                        appearance: none;\n                        border: 1px solid ",";\n                        -webkit-text-fill-color: ",";\n                        -webkit-box-shadow: 0 0 0px 1000px\n                          "," inset;\n                      }\n                    }\n                  }\n                "])),be[xe].inputColor,be[xe].inputBackgroundColor,ze.inputText,ze.inputHeight,ze.padding,"dark"===xe?h.legacy:h.default,"dark"===xe?4:6,be[xe].placeholderColor,be[xe].inputBackgroundColor,be[xe].disabledColor,be[xe].disabledBackgroundColor,be[xe].disabledBorderColor,be[xe].disabledColor,be[xe].defaultBorder,be[xe].disabledColor,be[xe].disabledBackgroundColor),me({state:F,optional:N,mode:xe,disabled:T,sizeSet:ze})),value:Oe,required:!N,disabled:T,placeholder:O,onChange:function(e){p&&p(e),ve||we(e.target.value),Ne.onChange(e)},onBlur:function(e){w&&w(e),Ne.onBlur(e)},ref:n,id:Be,autoComplete:T?"off":(null==ye?void 0:ye.autoComplete)||"on","aria-invalid":"error"===F}))),m("div",x({},ee.prop,{className:a(pe,ue[R])}),F===re.Valid&&m(Se,{role:"presentation",className:o(J||(J=k(["\n                  color: ",";\n                "])),be[xe].validIconColor)}),F===re.Error&&m(l,{role:"presentation",className:o(Q||(Q=k(["\n                  color: ",";\n                "])),be[xe].errorIconColor)}),F===re.None&&!T&&N&&m("div",{className:a(ge,o(Y||(Y=k(["\n                    color: ",";\n                  "])),be[xe].optional))},m("p",null,"Optional")))),F===re.Error&&B&&m("div",{className:a(fe,o(Z||(Z=k(["\n                color: ",";\n                font-size: ","px;\n                line-height: ","px;\n              "])),be[xe].errorMessage,ze.text,ze.lineHeight))},m("label",null,B)))}));ye.displayName="TextInput",ye.propTypes={id:n.string,label:n.string,description:n.string,optional:n.bool,disabled:n.bool,onChange:n.func,placeholder:n.string,errorMessage:n.string,state:n.oneOf(Object.values(re)),value:n.string,className:n.string,sizeVariant:n.oneOf(Object.values(te)),baseFontSize:n.oneOf([14,16])};export default ye;export{ie as BaseFontSize,te as SizeVariant,re as State,ne as TextInputType};
+import e,{useState as n}from"react";import r from"prop-types";import{css as o,cx as t}from"@leafygreen-ui/emotion";import a from"@leafygreen-ui/icon/dist/Checkmark";import i from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import l from"@leafygreen-ui/icon/dist/Warning";import{useIdAllocator as d,useValidation as s}from"@leafygreen-ui/hooks";import{useUpdatedBaseFontSize as c,Label as p,Description as g}from"@leafygreen-ui/typography";import{BaseFontSize as b,fontFamilies as h,typeScales as u}from"@leafygreen-ui/tokens";import{createUniqueClassName as f}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";import{jsx as m}from"@emotion/react";function x(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,o)}return r}function v(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?x(Object(r),!0).forEach((function(n){k(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function k(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function w(){return w=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},w.apply(this,arguments)}function O(e,n){if(null==e)return{};var r,o,t=function(e,n){if(null==e)return{};var r,o,t={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}function j(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function S(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)return;var o,t,a=[],i=!0,l=!1;try{for(r=r.call(e);!(i=(o=r.next()).done)&&(a.push(o.value),!n||a.length!==n);i=!0);}catch(e){l=!0,t=e}finally{try{i||null==r.return||r.return()}finally{if(l)throw t}}return a}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return z(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 z(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 z(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,o=new Array(n);r<n;r++)o[r]=e[r];return o}var N,D,L,P,C,E,V,I,M,T,A,F,B,X,H,U,W,q,R,Y,$,G,J,K,Q,Z,_,ee,ne,re,oe,te,ae,ie,le,de,se,ce,pe,ge,be,he,ue,fe,ye,me,xe={None:"none",Valid:"valid",Error:"error"},ve={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},ke={Light:"light",Dark:"dark"},we={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},Oe=v(v({},b),{},{Large:18}),je=f("icon-selector"),Se=o(N||(N=j(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),h.default),ze=function(e,n){switch(e){case we.XSmall:return o(D||(D=j(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),u.body1.fontSize,u.body1.lineHeight);case we.Small:return o(L||(L=j(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),u.body1.fontSize,u.body1.lineHeight);case we.Large:return o(P||(P=j(["\n        font-size: 18px;\n        line-height: 32px;\n      "])));default:var r=n==b.Body1?u.body1:u.body2;return o(C||(C=j(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),r.fontSize,r.lineHeight)}},Ne=o(E||(E=j(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),De=o(V||(V=j(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-top: 4px;\n  z-index: 0;\n"]))),Le=o(I||(I=j(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: 150ms 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"])),Ne,h.default,Ne),Pe=(k(A={},ke.Light,o(M||(M=j(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:hover,\n    &:active {\n      box-shadow: 0 0 0 3px ",";\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: 0 0 0px 1000px "," inset;\n        }\n      }\n    }\n  "])),y.black,y.white,y.gray.base,y.gray.light1,y.gray.light2,y.gray.base,y.gray.light2,y.gray.light1,y.gray.base,y.gray.base,y.gray.light2)),k(A,ke.Dark,o(T||(T=j(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:hover,\n    &:active {\n      box-shadow: 0 0 0 3px ",";\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\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: 0 0 0px 1000px "," inset;\n        }\n      }\n    }\n  "])),y.gray.light3,y.black,y.gray.dark1,y.gray.dark2,y.gray.base,y.gray.dark1,y.gray.dark3,y.gray.dark2,y.gray.dark1,y.gray.dark1,y.gray.dark2)),A),Ce=o(F||(F=j(["\n  &:focus {\n    border-color: ",";\n    box-shadow: 0 0 0 2px ",";\n  }\n"])),y.blue.light1,y.blue.light1),Ee=(k(W={},we.XSmall,o(B||(B=j(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),k(W,we.Small,o(X||(X=j(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),k(W,we.Default,o(H||(H=j(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),k(W,we.Large,o(U||(U=j(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),W),Ve=(k(_={},xe.Valid,(k(Y={},ke.Light,o(q||(q=j(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),y.green.dark1,y.green.light2)),k(Y,ke.Dark,o(R||(R=j(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),y.green.dark1,y.green.dark3)),Y)),k(_,xe.Error,(k(J={},ke.Light,o($||($=j(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),y.red.base,y.red.light2)),k(J,ke.Dark,o(G||(G=j(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          // Yes, yellow\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),y.red.light1,y.yellow.dark3)),J)),k(_,xe.None,(k(Z={},ke.Light,o(K||(K=j([""])))),k(Z,ke.Dark,o(Q||(Q=j([""])))),Z)),_),Ie=o(ee||(ee=j(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),Me=(k(ae={},we.XSmall,o(ne||(ne=j(["\n    right: 10px;\n  "])))),k(ae,we.Small,o(re||(re=j(["\n    right: 10px;\n  "])))),k(ae,we.Default,o(oe||(oe=j(["\n    right: 12px;\n  "])))),k(ae,we.Large,o(te||(te=j(["\n    right: 16px;\n  "])))),ae),Te=(k(ge={},xe.Valid,(k(de={},ke.Light,o(ie||(ie=j(["\n      color: ",";\n    "])),y.green.dark1)),k(de,ke.Dark,o(le||(le=j(["\n      color: ",";\n    "])),y.green.base)),de)),k(ge,xe.Error,(k(pe={},ke.Light,o(se||(se=j(["\n      color: ",";\n    "])),y.red.base)),k(pe,ke.Dark,o(ce||(ce=j(["\n      color: ",";\n    "])),y.red.light1)),pe)),ge),Ae=o(be||(be=j(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n  color: ","; // Same in light & dark mode\n"])),y.gray.dark1),Fe=o(he||(he=j(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"])),Ne),Be=(k(ye={},ke.Light,o(ue||(ue=j(["\n    color: ",";\n  "])),y.red.base)),k(ye,ke.Dark,o(fe||(fe=j(["\n    color: ",";\n  "])),y.red.light1)),ye),Xe=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],He=e.forwardRef((function(e,r){var b=e.label,h=e.description,u=e.onChange,f=e.onBlur,y=e.placeholder,x=e.errorMessage,v=e.optional,z=void 0!==v&&v,N=e.disabled,D=void 0!==N&&N,L=e.state,P=void 0===L?xe.None:L,C=e.type,E=void 0===C?ve.Text:C,V=e.id,I=e.value,M=e.className,T=e.darkMode,A=void 0!==T&&T,F=e.sizeVariant,B=void 0===F?we.Default:F,X=e["aria-labelledby"],H=e.handleValidation,U=e.baseFontSize,W=O(e,Xe),q=A?ke.Dark:ke.Light,R="string"==typeof I,Y=S(n(""),2),$=Y[0],G=Y[1],J=R?I:$,K=d({prefix:"textinput",id:V}),Q=c(U),Z=s(H);"search"===E||b||X||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"!==E||W["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput.");var _=A?i:a;return m("div",{className:t(Se,ze(B,Q),M)},b&&m(p,{darkMode:A,htmlFor:K,disabled:D,className:Ne},b),h&&m(g,{darkMode:A,disabled:D,className:Ne},h),m("div",{className:De},m("input",w({},W,{"aria-labelledby":X,type:E,className:t(Le,Pe[q],Ee[B],Ve[P][q],Ce,k({},o(me||(me=j(["\n                    padding-right: 60px;\n                  "]))),z&&!D)),value:J,required:!z,disabled:D,placeholder:y,onChange:function(e){u&&u(e),R||G(e.target.value),Z.onChange(e)},onBlur:function(e){f&&f(e),Z.onBlur(e)},ref:r,id:K,autoComplete:D?"off":(null==W?void 0:W.autoComplete)||"on","aria-invalid":"error"===P})),m("div",{className:t(je,Ie,Me[B])},P===xe.Valid&&m(_,{role:"presentation",className:Te.valid[q]}),P===xe.Error&&m(l,{role:"presentation",className:Te.error[q]}),P===xe.None&&!D&&z&&m("div",{className:Ae},m("p",null,"Optional")))),P===xe.Error&&x&&m("div",{className:t(Fe,Be[q])},m("span",null,x)))}));He.displayName="TextInput",He.propTypes={id:r.string,label:r.string,description:r.string,optional:r.bool,disabled:r.bool,onChange:r.func,placeholder:r.string,errorMessage:r.string,state:r.oneOf(Object.values(xe)),value:r.string,className:r.string,sizeVariant:r.oneOf(Object.values(we)),baseFontSize:r.oneOf(Object.values(b))};export{ke as Mode,we as SizeVariant,xe as State,Oe as TextInputFontSize,ve as TextInputType,He as default};
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -1,4 +0,4 @@
-import TextInput, { TextInputType, State, SizeVariant, BaseFontSize } from './TextInput';
-export { TextInputType, State, SizeVariant, BaseFontSize };
-export default TextInput;
+export { default } from './TextInput';
+export type { TextInputProps } from './types';
+export { State, TextInputType, Mode, SizeVariant, TextInputFontSize, } from './types';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/CheckmarkWithCircle"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/interaction-ring"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/tokens"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/CheckmarkWithCircle","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/interaction-ring","@leafygreen-ui/palette","@leafygreen-ui/lib","@leafygreen-ui/hooks","@leafygreen-ui/typography","@leafygreen-ui/tokens","@emotion/react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/text-input"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e.Checkmark,e.CheckmarkWithCircle,e.Warning,e["@leafygreen-ui/interaction-ring"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/tokens"],e.react)}(this,(function(e,r,n,t,o,a,i,l,d,s,u,c,p,f){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=g(r),h=g(n),y=g(o),m=g(a),x=g(i),k=g(l);function v(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function C(){return(C=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function w(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function O(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}function j(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var t,o,a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(t=n.next()).done)&&(a.push(t.value),!r||a.length!==r);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return B(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return B(e,r)}(e,r)||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 B(e,r){(null==r||r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}var S,T,z,F,N,I,q,E,M,V,D,A,H,P,R,W,L,X,U,_,K,$,G,J,Q,Y,Z,ee,re,ne=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],te=s.createDataProp("icon-selector"),oe={None:"none",Valid:"valid",Error:"error"},ae={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},ie="light",le="dark",de={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},se=t.css(S||(S=O(["\n  width: 100%;\n"]))),ue=t.css(T||(T=O(["\n  display: flex;\n  flex-direction: column;\n"]))),ce=t.css(z||(z=O(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]))),pe=t.css(F||(F=O(["\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  transition: border-color 150ms ease-in-out;\n  z-index: 1;\n  outline: none;\n\n  &:disabled {\n    cursor: not-allowed;\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"]))),fe=t.css(N||(N=O(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),ge=(v(V={},de.XSmall,t.css(I||(I=O(["\n    right: 10px;\n  "])))),v(V,de.Small,t.css(q||(q=O(["\n    right: 10px;\n  "])))),v(V,de.Default,t.css(E||(E=O(["\n    right: 12px;\n  "])))),v(V,de.Large,t.css(M||(M=O(["\n    right: 16px;\n  "])))),V),be=t.css(D||(D=O(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]))),he=t.css(A||(A=O(["\n  font-size: 13px;\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]))),ye=(v(H={},ie,{inputColor:d.palette.black,inputBackgroundColor:d.palette.white,defaultBorder:d.palette.gray.base,placeholderColor:d.palette.gray.light1,disabledColor:d.palette.gray.base,disabledBorderColor:d.palette.gray.light1,disabledBackgroundColor:d.palette.gray.light2,errorIconColor:d.palette.red.base,errorMessage:d.palette.red.base,errorBorder:d.palette.red.base,validBorder:d.palette.green.dark1,validIconColor:d.palette.green.dark1,optional:d.palette.gray.dark1}),v(H,le,{inputColor:d.uiColors.white,inputBackgroundColor:"#394F5A",defaultBorder:"#394F5A",placeholderColor:d.uiColors.gray.base,disabledColor:d.uiColors.gray.dark1,disabledBorderColor:"#394F5A",disabledBackgroundColor:"#263843",errorIconColor:"#EF8D6F",errorMessage:"#EF8D6F",errorBorder:"#5a3c3b",validBorder:"#394F5A",validIconColor:d.uiColors.green.base,optional:d.uiColors.gray.light1}),H),me=(v(W={},ie,(v(P={},oe.Error,d.palette.red.light3),v(P,oe.Valid,d.palette.green.light3),P)),v(W,le,(v(R={},oe.Error,d.uiColors.red.dark2),v(R,oe.Valid,d.uiColors.gray.dark1),R)),W);function xe(e){var r=e.state,n=e.optional,o=e.mode,a=e.disabled,i=e.sizeSet;switch(r){case oe.Valid:return t.css(L||(L=O(["\n        // TODO: Refresh - remove mode === 'dark' toggle when new dark mode is added\n        padding-right: ","px;\n        border-color: ",";\n      "])),"dark"===o?30:36,a?"inherit":ye[o].validBorder);case oe.Error:return t.cx(t.css(X||(X=O(["\n          // TODO: Refresh - remove mode === 'dark' toggle when new dark mode is added\n          padding-right: ","px;\n          border-color: ",";\n        "])),"dark"===o?30:36,a?"inherit":ye[o].errorBorder),v({},t.css(U||(U=O(["\n            background-color: #5a3c3b;\n          "]))),o===le));default:return t.css(_||(_=O(["\n        padding-right: ","px;\n        border-color: ",";\n      "])),n?60:i.padding,a?ye[o].disabledBorderColor:ye[o].defaultBorder)}}var ke=b.default.forwardRef((function(e,n){var o=e.label,a=e.description,i=e.onChange,l=e.onBlur,d=e.placeholder,s=e.errorMessage,g=e.optional,b=void 0!==g&&g,h=e.disabled,B=void 0!==h&&h,S=e.state,T=void 0===S?oe.None:S,z=e.type,F=void 0===z?ae.Text:z,N=e.id,I=e.value,q=e.className,E=e.darkMode,M=void 0!==E&&E,V=e.sizeVariant,D=void 0===V?de.Default:V,A=e["aria-labelledby"],H=e.handleValidation,P=e.baseFontSize,R=void 0===P?14:P,W=w(e,ne),L=M?le:ie,X="string"==typeof I,U=j(r.useState(""),2),_=U[0],ke=U[1],ve=X?I:_,Ce=u.useIdAllocator({prefix:"textinput",id:N}),we=function(e,r,n){var t;return(v(t={},de.XSmall,{inputHeight:22,inputText:13,text:13,lineHeight:20,padding:10}),v(t,de.Small,{inputHeight:28,inputText:13,text:13,lineHeight:20,padding:10}),v(t,de.Default,{inputHeight:36,inputText:"dark"==n?e:14===e?13:e,text:"dark"==n?e:14===e?13:e,lineHeight:"dark"==n&&14===e?16:20,padding:12}),v(t,de.Large,{inputHeight:48,inputText:18,text:18,lineHeight:22,padding:16}),t)[r]}(R,D,L),Oe=u.useValidation(H);"search"===F||o||A||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"!==F||W["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput.");var je=M?m.default:y.default;return f.jsx("div",{className:t.cx(ue,q,t.css(K||(K=O(["\n            // TODO: Refresh - remove mode === 'dark' toggles when new dark mode is added\n            font-family: ",";\n          "])),"dark"===L?p.fontFamilies.legacy:p.fontFamilies.default))},o&&f.jsx(c.Label,{darkMode:M,htmlFor:Ce,disabled:B,className:t.css($||($=O(["\n              font-size: ","px;\n            "])),we.text)},o),a&&f.jsx(c.Description,{darkMode:M,disabled:B,className:t.cx(t.css(G||(G=O(["\n                font-size: ","px;\n                line-height: ","px;\n              "])),we.text,we.lineHeight),v({},t.css(J||(J=O(["\n                  padding-bottom: 4px;\n                "]))),!M))},a),f.jsx("div",{className:ce},f.jsx(k.default,{borderRadius:"dark"===L?"4px":"6px",className:se,darkMode:M,disabled:B,ignoreKeyboardContext:!0,color:T===oe.Valid||T===oe.Error?{hovered:me[L][T]}:void 0},f.jsx("input",C({},W,{"aria-labelledby":A,type:F,className:t.cx(pe,t.css(Q||(Q=O(["\n                  color: ",";\n                  background-color: ",";\n                  font-size: ","px;\n                  height: ","px;\n                  padding-left: ","px;\n\n                  // TODO: Refresh - remove mode === 'dark' toggles when new dark mode is added\n                  font-family: ",";\n                  border-radius: ","px;\n\n                  &::placeholder {\n                    color: ",";\n                    font-weight: normal;\n                  }\n\n                  &:focus {\n                    border: 1px solid ",";\n                  }\n\n                  &:disabled {\n                    color: ",";\n                    background-color: ",";\n                    border-color: ",";\n\n                    &::placeholder {\n                      color: ",";\n                    }\n\n                    &:-webkit-autofill {\n                      &,\n                      &:hover,\n                      &:focus {\n                        appearance: none;\n                        border: 1px solid ",";\n                        -webkit-text-fill-color: ",";\n                        -webkit-box-shadow: 0 0 0px 1000px\n                          "," inset;\n                      }\n                    }\n                  }\n                "])),ye[L].inputColor,ye[L].inputBackgroundColor,we.inputText,we.inputHeight,we.padding,"dark"===L?p.fontFamilies.legacy:p.fontFamilies.default,"dark"===L?4:6,ye[L].placeholderColor,ye[L].inputBackgroundColor,ye[L].disabledColor,ye[L].disabledBackgroundColor,ye[L].disabledBorderColor,ye[L].disabledColor,ye[L].defaultBorder,ye[L].disabledColor,ye[L].disabledBackgroundColor),xe({state:T,optional:b,mode:L,disabled:B,sizeSet:we})),value:ve,required:!b,disabled:B,placeholder:d,onChange:function(e){i&&i(e),X||ke(e.target.value),Oe.onChange(e)},onBlur:function(e){l&&l(e),Oe.onBlur(e)},ref:n,id:Ce,autoComplete:B?"off":(null==W?void 0:W.autoComplete)||"on","aria-invalid":"error"===T}))),f.jsx("div",C({},te.prop,{className:t.cx(fe,ge[D])}),T===oe.Valid&&f.jsx(je,{role:"presentation",className:t.css(Y||(Y=O(["\n                  color: ",";\n                "])),ye[L].validIconColor)}),T===oe.Error&&f.jsx(x.default,{role:"presentation",className:t.css(Z||(Z=O(["\n                  color: ",";\n                "])),ye[L].errorIconColor)}),T===oe.None&&!B&&b&&f.jsx("div",{className:t.cx(be,t.css(ee||(ee=O(["\n                    color: ",";\n                  "])),ye[L].optional))},f.jsx("p",null,"Optional")))),T===oe.Error&&s&&f.jsx("div",{className:t.cx(he,t.css(re||(re=O(["\n                color: ",";\n                font-size: ","px;\n                line-height: ","px;\n              "])),ye[L].errorMessage,we.text,we.lineHeight))},f.jsx("label",null,s)))}));ke.displayName="TextInput",ke.propTypes={id:h.default.string,label:h.default.string,description:h.default.string,optional:h.default.bool,disabled:h.default.bool,onChange:h.default.func,placeholder:h.default.string,errorMessage:h.default.string,state:h.default.oneOf(Object.values(oe)),value:h.default.string,className:h.default.string,sizeVariant:h.default.oneOf(Object.values(de)),baseFontSize:h.default.oneOf([14,16])},e.BaseFontSize=30,e.SizeVariant=de,e.State=oe,e.TextInputType=ae,e.default=ke,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/CheckmarkWithCircle"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/CheckmarkWithCircle","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/hooks","@leafygreen-ui/typography","@leafygreen-ui/tokens","@leafygreen-ui/lib","@leafygreen-ui/palette","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/text-input"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e.Checkmark,e.CheckmarkWithCircle,e.Warning,e["@leafygreen-ui/hooks"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.react)}(this,(function(e,n,t,r,a,l,o,i,s,c,d,p,u){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(n),h=f(t),b=f(a),y=f(l),x=f(o);function m(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function v(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?m(Object(t),!0).forEach((function(n){k(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function k(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function w(){return w=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},w.apply(this,arguments)}function j(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function O(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function S(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,a,l=[],o=!0,i=!1;try{for(t=t.call(e);!(o=(r=t.next()).done)&&(l.push(r.value),!n||l.length!==n);o=!0);}catch(e){i=!0,a=e}finally{try{o||null==t.return||t.return()}finally{if(i)throw a}}return l}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return z(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return z(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 z(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var N,C,D,P,L,q,T,F,E,I,V,M,B,A,W,X,U,H,R,_,Y,$,G,J,K,Q,Z,ee,ne,te,re,ae,le,oe,ie,se,ce,de,pe,ue,fe,ge,he,be,ye,xe,me={None:"none",Valid:"valid",Error:"error"},ve={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel",Number:"number"},ke={Light:"light",Dark:"dark"},we={XSmall:"xsmall",Small:"small",Default:"default",Large:"large"},je=v(v({},c.BaseFontSize),{},{Large:18}),Oe=d.createUniqueClassName("icon-selector"),Se=r.css(N||(N=O(["\n  font-family: ",";\n  display: flex;\n  flex-direction: column;\n"])),c.fontFamilies.default),ze=function(e,n){switch(e){case we.XSmall:return r.css(C||(C=O(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),c.typeScales.body1.fontSize,c.typeScales.body1.lineHeight);case we.Small:return r.css(D||(D=O(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),c.typeScales.body1.fontSize,c.typeScales.body1.lineHeight);case we.Large:return r.css(P||(P=O(["\n        font-size: 18px;\n        line-height: 32px;\n      "])));default:var t=n==c.BaseFontSize.Body1?c.typeScales.body1:c.typeScales.body2;return r.css(L||(L=O(["\n        font-size: ","px;\n        line-height: ","px;\n      "])),t.fontSize,t.lineHeight)}},Ne=r.css(q||(q=O(["\n  font-size: inherit;\n  line-height: inherit;\n"]))),Ce=r.css(T||(T=O(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-top: 4px;\n  z-index: 0;\n"]))),De=r.css(F||(F=O(["\n  ",";\n  font-family: ",";\n  width: 100%;\n  height: 36px;\n  font-weight: normal;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n  border-radius: 6px;\n  transition: 150ms 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"])),Ne,c.fontFamilies.default,Ne),Pe=(k(V={},ke.Light,r.css(E||(E=O(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\n    }\n\n    &:hover,\n    &:active {\n      box-shadow: 0 0 0 3px ",";\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: 0 0 0px 1000px "," inset;\n        }\n      }\n    }\n  "])),p.palette.black,p.palette.white,p.palette.gray.base,p.palette.gray.light1,p.palette.gray.light2,p.palette.gray.base,p.palette.gray.light2,p.palette.gray.light1,p.palette.gray.base,p.palette.gray.base,p.palette.gray.light2)),k(V,ke.Dark,r.css(I||(I=O(["\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n\n    &:hover,\n    &:active {\n      box-shadow: 0 0 0 3px ",";\n    }\n\n    &::placeholder {\n      color: ",";\n      font-weight: normal;\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: 0 0 0px 1000px "," inset;\n        }\n      }\n    }\n  "])),p.palette.gray.light3,p.palette.black,p.palette.gray.dark1,p.palette.gray.dark2,p.palette.gray.base,p.palette.gray.dark1,p.palette.gray.dark3,p.palette.gray.dark2,p.palette.gray.dark1,p.palette.gray.dark1,p.palette.gray.dark2)),V),Le=r.css(M||(M=O(["\n  &:focus {\n    border-color: ",";\n    box-shadow: 0 0 0 2px ",";\n  }\n"])),p.palette.blue.light1,p.palette.blue.light1),qe=(k(U={},we.XSmall,r.css(B||(B=O(["\n    height: 22px;\n    padding-left: 10px;\n  "])))),k(U,we.Small,r.css(A||(A=O(["\n    height: 28px;\n    padding-left: 10px;\n  "])))),k(U,we.Default,r.css(W||(W=O(["\n    height: 36px;\n    padding-left: 12px;\n  "])))),k(U,we.Large,r.css(X||(X=O(["\n    height: 48px;\n    padding-left: 16px;\n  "])))),U),Te=(k(Z={},me.Valid,(k(_={},ke.Light,r.css(H||(H=O(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),p.palette.green.dark1,p.palette.green.light2)),k(_,ke.Dark,r.css(R||(R=O(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),p.palette.green.dark1,p.palette.green.dark3)),_)),k(Z,me.Error,(k(G={},ke.Light,r.css(Y||(Y=O(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),p.palette.red.base,p.palette.red.light2)),k(G,ke.Dark,r.css($||($=O(["\n      &:not(:disabled) {\n        border-color: ",";\n\n        &:hover,\n        &:active {\n          // Yes, yellow\n          box-shadow: 0 0 0 3px ",";\n        }\n      }\n    "])),p.palette.red.light1,p.palette.yellow.dark3)),G)),k(Z,me.None,(k(Q={},ke.Light,r.css(J||(J=O([""])))),k(Q,ke.Dark,r.css(K||(K=O([""])))),Q)),Z),Fe=r.css(ee||(ee=O(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  z-index: 1;\n"]))),Ee=(k(le={},we.XSmall,r.css(ne||(ne=O(["\n    right: 10px;\n  "])))),k(le,we.Small,r.css(te||(te=O(["\n    right: 10px;\n  "])))),k(le,we.Default,r.css(re||(re=O(["\n    right: 12px;\n  "])))),k(le,we.Large,r.css(ae||(ae=O(["\n    right: 16px;\n  "])))),le),Ie=(k(ue={},me.Valid,(k(se={},ke.Light,r.css(oe||(oe=O(["\n      color: ",";\n    "])),p.palette.green.dark1)),k(se,ke.Dark,r.css(ie||(ie=O(["\n      color: ",";\n    "])),p.palette.green.base)),se)),k(ue,me.Error,(k(pe={},ke.Light,r.css(ce||(ce=O(["\n      color: ",";\n    "])),p.palette.red.base)),k(pe,ke.Dark,r.css(de||(de=O(["\n      color: ",";\n    "])),p.palette.red.light1)),pe)),ue),Ve=r.css(fe||(fe=O(["\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n  color: ","; // Same in light & dark mode\n"])),p.palette.gray.dark1),Me=r.css(ge||(ge=O(["\n  ",";\n  min-height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"])),Ne),Be=(k(ye={},ke.Light,r.css(he||(he=O(["\n    color: ",";\n  "])),p.palette.red.base)),k(ye,ke.Dark,r.css(be||(be=O(["\n    color: ",";\n  "])),p.palette.red.light1)),ye),Ae=["label","description","onChange","onBlur","placeholder","errorMessage","optional","disabled","state","type","id","value","className","darkMode","sizeVariant","aria-labelledby","handleValidation","baseFontSize"],We=g.default.forwardRef((function(e,t){var a=e.label,l=e.description,o=e.onChange,c=e.onBlur,d=e.placeholder,p=e.errorMessage,f=e.optional,g=void 0!==f&&f,h=e.disabled,m=void 0!==h&&h,v=e.state,z=void 0===v?me.None:v,N=e.type,C=void 0===N?ve.Text:N,D=e.id,P=e.value,L=e.className,q=e.darkMode,T=void 0!==q&&q,F=e.sizeVariant,E=void 0===F?we.Default:F,I=e["aria-labelledby"],V=e.handleValidation,M=e.baseFontSize,B=j(e,Ae),A=T?ke.Dark:ke.Light,W="string"==typeof P,X=S(n.useState(""),2),U=X[0],H=X[1],R=W?P:U,_=i.useIdAllocator({prefix:"textinput",id:D}),Y=s.useUpdatedBaseFontSize(M),$=i.useValidation(V);"search"===C||a||I||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to TextInput."),"search"!==C||B["aria-label"]||console.error("For screen-reader accessibility, aria-label must be provided to TextInput.");var G=T?y.default:b.default;return u.jsx("div",{className:r.cx(Se,ze(E,Y),L)},a&&u.jsx(s.Label,{darkMode:T,htmlFor:_,disabled:m,className:Ne},a),l&&u.jsx(s.Description,{darkMode:T,disabled:m,className:Ne},l),u.jsx("div",{className:Ce},u.jsx("input",w({},B,{"aria-labelledby":I,type:C,className:r.cx(De,Pe[A],qe[E],Te[z][A],Le,k({},r.css(xe||(xe=O(["\n                    padding-right: 60px;\n                  "]))),g&&!m)),value:R,required:!g,disabled:m,placeholder:d,onChange:function(e){o&&o(e),W||H(e.target.value),$.onChange(e)},onBlur:function(e){c&&c(e),$.onBlur(e)},ref:t,id:_,autoComplete:m?"off":(null==B?void 0:B.autoComplete)||"on","aria-invalid":"error"===z})),u.jsx("div",{className:r.cx(Oe,Fe,Ee[E])},z===me.Valid&&u.jsx(G,{role:"presentation",className:Ie.valid[A]}),z===me.Error&&u.jsx(x.default,{role:"presentation",className:Ie.error[A]}),z===me.None&&!m&&g&&u.jsx("div",{className:Ve},u.jsx("p",null,"Optional")))),z===me.Error&&p&&u.jsx("div",{className:r.cx(Me,Be[A])},u.jsx("span",null,p)))}));We.displayName="TextInput",We.propTypes={id:h.default.string,label:h.default.string,description:h.default.string,optional:h.default.bool,disabled:h.default.bool,onChange:h.default.func,placeholder:h.default.string,errorMessage:h.default.string,state:h.default.oneOf(Object.values(me)),value:h.default.string,className:h.default.string,sizeVariant:h.default.oneOf(Object.values(we)),baseFontSize:h.default.oneOf(Object.values(c.BaseFontSize))},e.Mode=ke,e.SizeVariant=we,e.State=me,e.TextInputFontSize=je,e.TextInputType=ve,e.default=We,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

dist/TextInput.d.ts

 import React from 'react';
-import { HTMLElementProps, Either } from '@leafygreen-ui/lib';
-export declare const State: {
-    readonly None: "none";
-    readonly Valid: "valid";
-    readonly Error: "error";
-};
-export declare type State = typeof State[keyof typeof State];
-export declare const TextInputType: {
-    readonly Email: "email";
-    readonly Password: "password";
-    readonly Search: "search";
-    readonly Text: "text";
-    readonly Url: "url";
-    readonly Tel: "tel";
-    readonly Number: "number";
-};
-export declare type TextInputType = typeof TextInputType[keyof typeof TextInputType];
-export declare const SizeVariant: {
-    readonly XSmall: "xsmall";
-    readonly Small: "small";
-    readonly Default: "default";
-    readonly Large: "large";
-};
-export declare type SizeVariant = typeof SizeVariant[keyof typeof SizeVariant];
-export declare const BaseFontSize: number;
-export declare type BaseFontSize = typeof BaseFontSize;
-interface TextInputProps extends HTMLElementProps<'input', HTMLInputElement> {
-    /**
-     * id associated with the TextInput component.
-     */
-    id?: string;
-    /**
-     * Text shown in bold above the input element.
-     */
-    label?: string | null;
-    /**
-     * Text that gives more detail about the requirements for the input.
-     */
-    description?: string;
-    /**
-     * Whether or not the field is optional.
-     * Default: false
-     */
-    optional?: boolean;
-    /**
-     * Whether or not the field is currently disabled.
-     * Default: false
-     */
-    disabled?: boolean;
-    /**
-     * Callback to be executed when the input stops being focused.
-     */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /**
-     * Callback to be executed when the value of the input field changes.
-     */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The placeholder text shown in the input field before the user begins typing.
-     */
-    placeholder?: string;
-    /**
-     * The message shown below the input field if the value is invalid.
-     */
-    errorMessage?: string;
-    /**
-     * The current state of the TextInput. This can be none, valid, or error.
-     */
-    state?: State;
-    /**
-     * The current value of the input field. If a value is passed to this prop, component will be controlled by consumer.
-     */
-    value?: string;
-    /**
-     * className supplied to the TextInput container.
-     */
-    className?: string;
-    /**
-     *  determines whether or not the component appears in dark mode.
-     */
-    darkMode?: boolean;
-    type?: TextInputType;
-    handleValidation?: (value: string) => void;
-    ['aria-labelledby']?: string;
-    /**
-     *  determines the font size and padding.
-     */
-    sizeVariant?: SizeVariant;
-    /**
-     *  determines the base font size if sizeVariant is set to default.
-     */
-    baseFontSize?: BaseFontSize;
-}
-declare type AriaLabels = 'label' | 'aria-labelledby';
-declare type AccessibleTextInputProps = Either<TextInputProps, AriaLabels> | (TextInputProps & {
-    type: 'search';
-    'aria-label': string;
-});
+import { TextInputProps } from './types';
 /**
@@ -123,4 +26,4 @@ * # TextInput
  */
-declare const TextInput: React.ComponentType<React.PropsWithRef<AccessibleTextInputProps>>;
+declare const TextInput: React.ComponentType<React.PropsWithRef<TextInputProps>>;
 export default TextInput;
 //# sourceMappingURL=TextInput.d.ts.map

package.json

 {
   "name": "@leafygreen-ui/text-input",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "leafyGreen UI Kit Text Input",
@@ -26,6 +26,6 @@ "main": "./dist/index.js",
     "@leafygreen-ui/interaction-ring": "^2.0.0",
-    "@leafygreen-ui/lib": "^9.2.0",
+    "@leafygreen-ui/lib": "^9.2.1",
     "@leafygreen-ui/palette": "^3.3.2",
-    "@leafygreen-ui/typography": "^9.0.0",
-    "@leafygreen-ui/tokens": "^1.1.0"
+    "@leafygreen-ui/typography": "^10.0.0",
+    "@leafygreen-ui/tokens": "^1.2.0"
   },
@@ -32,0 +32,0 @@ "peerDependencies": {

src/index.ts

@@ -1,8 +0,11 @@
-import TextInput, {
+export { default } from './TextInput';
+// Export types
+export type { TextInputProps } from './types';
+// Export constants
+export {
+  State,
   TextInputType,
-  State,
+  Mode,
   SizeVariant,
-  BaseFontSize,
-} from './TextInput';
-export { TextInputType, State, SizeVariant, BaseFontSize };
-export default TextInput;
+  TextInputFontSize,
+} from './types';

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

23

increased by35.29%

Lines of code

1259

increased by6.16%

Worsened metrics

Total package byte prevSize

182401

decreased by-42.18%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@leafygreen-ui/typography@10.0.0(transitive)

• - Removed@leafygreen-ui/typography@9.1.1(transitive)

• Updated@leafygreen-ui/lib@^9.2.1

• Updated@leafygreen-ui/tokens@^1.2.0

• Updated@leafygreen-ui/typography@^10.0.0