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

Comparing version 5.0.1 to 5.0.2

CHANGELOG.md

 # @leafygreen-ui/text-input
 
+## 5.0.2
+
+### Patch Changes
+
+- 358a072e: Fixes visual regression where the border of inputs do not appear until text is entered
+- Updated dependencies [fc18e572]
+  - @leafygreen-ui/typography@7.3.0
+
 ## 5.0.1
@@ -4,0 +12,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import r,{useState as e,useMemo as n}from"react";import t from"prop-types";import{css as o,cx as a}from"@leafygreen-ui/emotion";import i from"@leafygreen-ui/icon/dist/Checkmark";import l from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import u from"@leafygreen-ui/icon/dist/Warning";import c from"@leafygreen-ui/interaction-ring";import{uiColors as d}from"@leafygreen-ui/palette";import{createDataProp as s,IdAllocator as f}from"@leafygreen-ui/lib";import{Label as p,Description as g}from"@leafygreen-ui/typography";function b(r,e,n){return e in r?Object.defineProperty(r,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):r[e]=n,r}function m(){return(m=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r}).apply(this,arguments)}function y(r,e){if(null==r)return{};var n,t,o=function(r,e){if(null==r)return{};var n,t,o={},a=Object.keys(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0||(o[n]=r[n]);return o}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(r,n)&&(o[n]=r[n])}return o}function v(r,e){return e||(e=r.slice(0)),Object.freeze(Object.defineProperties(r,{raw:{value:Object.freeze(e)}}))}function h(r,e){return function(r){if(Array.isArray(r))return r}(r)||function(r,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(r)))return;var n=[],t=!0,o=!1,a=void 0;try{for(var i,l=r[Symbol.iterator]();!(t=(i=l.next()).done)&&(n.push(i.value),!e||n.length!==e);t=!0);}catch(r){o=!0,a=r}finally{try{t||null==l.return||l.return()}finally{if(o)throw a}}return n}(r,e)||function(r,e){if(!r)return;if("string"==typeof r)return x(r,e);var n=Object.prototype.toString.call(r).slice(8,-1);"Object"===n&&r.constructor&&(n=r.constructor.name);if("Map"===n||"Set"===n)return Array.from(r);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return x(r,e)}(r,e)||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 x(r,e){(null==e||e>r.length)&&(e=r.length);for(var n=0,t=new Array(e);n<e;n++)t[n]=r[n];return t}var k;function C(){var r=v(["\n                color: ",";\n              "]);return C=function(){return r},r}function E(){var r=v(["\n                    color: ",";\n                  "]);return E=function(){return r},r}function w(){var r=v(["\n                  color: ",";\n                "]);return w=function(){return r},r}function O(){var r=v(["\n                  color: ",";\n                  background-color: ",";\n\n                  &:focus {\n                    border: 1px solid ",";\n                  }\n\n                  &:disabled {\n                    color: ",";\n                    background-color: ",";\n                  }\n                "]);return O=function(){return r},r}function B(){var r=v(["\n        padding-right: ","px;\n        border-color: ",";\n      "]);return B=function(){return r},r}function N(){var r=v(["\n            background-color: #5a3c3b;\n          "]);return N=function(){return r},r}function j(){var r=v(["\n          padding-right: 30px;\n          border-color: ",";\n        "]);return j=function(){return r},r}function z(){var r=v(["\n        padding-right: 30px;\n        border-color: ",";\n      "]);return z=function(){return r},r}function M(){var r=v(["\n  font-size: 14px;\n  height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]);return M=function(){return r},r}function A(){var r=v(["\n  color: ",";\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]);return A=function(){return r},r}function F(){var r=v(["\n  color: ",";\n"]);return F=function(){return r},r}function I(){var r=v(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  right: 12px;\n  z-index: 1;\n"]);return I=function(){return r},r}function S(){var r=v(["\n  width: 100%;\n  height: 36px;\n  border-radius: 4px;\n  padding-left: 12px;\n  font-size: 14px;\n  font-weight: normal;\n  font-family: Akzidenz, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n\n  &::placeholder {\n    color: ",";\n  }\n\n  &:focus {\n    z-index: 2;\n    border-color: ",";\n    transition: border-color 150ms ease-in-out;\n\n    & ~ "," {\n      z-index: 2;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n"]);return S=function(){return r},r}function P(){var r=v(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]);return P=function(){return r},r}function T(){var r=v(["\n  display: flex;\n  flex-direction: column;\n"]);return T=function(){return r},r}function V(){var r=v(["\n  width: 100%;\n"]);return V=function(){return r},r}var D=s("icon-selector"),H={None:"none",Valid:"valid",Error:"error"},U={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel"},W="light",q="dark",R=o(V()),$=o(T()),G=o(P()),J=o(S(),d.gray.base,d.blue.light1,D.selector),K=o(I()),L=o(F(),d.green.base),Q=o(A(),d.gray.dark1),X=o(M()),Y=(b(k={},W,{inputColor:d.gray.dark3,inputBackgroundColor:d.white,disabledColor:d.gray.base,disabledBackgroundColor:d.gray.light2,errorIconColor:d.red.base,errorMessage:d.red.base,errorBorder:d.red.base,optional:d.gray.dark1,defaultBorder:d.gray.light1,validBorder:d.green.base}),b(k,q,{inputColor:d.white,inputBackgroundColor:"#394F5A",disabledColor:d.gray.dark1,disabledBackgroundColor:"#263843",errorIconColor:"#EF8D6F",errorMessage:"#EF8D6F",errorBorder:"#5a3c3b",optional:d.gray.light1,defaultBorder:"#394F5A",validBorder:"#394F5A"}),k);function Z(r,e,n){switch(r){case H.Valid:return o(z(),Y[n].validBorder);case H.Error:return a(o(j(),Y[n].errorBorder),b({},o(N()),n===q));default:return o(B(),e?60:12,Y[n].defaultBorder)}}var _=f.create("text-input"),rr=r.forwardRef((function(t,d){var s=t.label,f=t.description,v=t.onChange,x=t.placeholder,k=t.errorMessage,B=t.optional,N=void 0!==B&&B,j=t.disabled,z=void 0!==j&&j,M=t.state,A=void 0===M?H.None:M,F=t.type,I=void 0===F?U.Text:F,S=t.id,P=t["aria-labelledby"],T=t.value,V=t.className,rr=t.darkMode,er=void 0!==rr&&rr,nr=y(t,["label","description","onChange","placeholder","errorMessage","optional","disabled","state","type","id","aria-labelledby","value","className","darkMode"]),tr=er?q:W,or="string"==typeof T,ar=h(e(""),2),ir=ar[0],lr=ar[1],ur=or?T:ir,cr=n((function(){return null!=S?S:_.generate()}),[S]);s||P||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to IconButton.");var dr=er?l:i;return r.createElement("div",{className:a($,V)},s&&r.createElement(p,{darkMode:er,htmlFor:cr,disabled:z},s),f&&r.createElement(g,{darkMode:er},f),r.createElement("div",{className:G},r.createElement(c,{className:R,darkMode:er,disabled:z},r.createElement("input",m({},nr,{"aria-labelledby":P,type:I,className:a(J,o(O(),Y[tr].inputColor,Y[tr].inputBackgroundColor,Y[tr].inputBackgroundColor,Y[tr].disabledColor,Y[tr].disabledBackgroundColor),b({},Z(A,N,tr),!z)),value:ur,required:!N,disabled:z,placeholder:x,onChange:function(r){v&&v(r),or||lr(r.target.value)},ref:d,id:cr}))),r.createElement("div",m({},D.prop,{className:K}),A===H.Valid&&r.createElement(dr,{className:L}),A===H.Error&&r.createElement(u,{className:o(w(),Y[tr].errorIconColor)}),A===H.None&&N&&r.createElement("div",{className:a(Q,o(E(),Y[tr].optional))},r.createElement("p",null,"Optional")))),A===H.Error&&k&&r.createElement("div",{className:a(X,o(C(),Y[tr].errorMessage))},r.createElement("label",null,k)))}));rr.displayName="TextInput",rr.propTypes={id:t.string,label:t.string,description:t.string,optional:t.bool,disabled:t.bool,onChange:t.func,placeholder:t.string,errorMessage:t.string,state:t.oneOf(Object.values(H)),value:t.string,className:t.string};export default rr;export{H as State,U as TextInputType};
+import r,{useState as e,useMemo as n}from"react";import t from"prop-types";import{css as o,cx as a}from"@leafygreen-ui/emotion";import i from"@leafygreen-ui/icon/dist/Checkmark";import l from"@leafygreen-ui/icon/dist/CheckmarkWithCircle";import u from"@leafygreen-ui/icon/dist/Warning";import c from"@leafygreen-ui/interaction-ring";import{useUsingKeyboardContext as d}from"@leafygreen-ui/leafygreen-provider";import{uiColors as s}from"@leafygreen-ui/palette";import{createDataProp as f,IdAllocator as p}from"@leafygreen-ui/lib";import{Label as g,Description as b}from"@leafygreen-ui/typography";function m(r,e,n){return e in r?Object.defineProperty(r,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):r[e]=n,r}function y(){return(y=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r}).apply(this,arguments)}function v(r,e){if(null==r)return{};var n,t,o=function(r,e){if(null==r)return{};var n,t,o={},a=Object.keys(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0||(o[n]=r[n]);return o}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(r,n)&&(o[n]=r[n])}return o}function h(r,e){return e||(e=r.slice(0)),Object.freeze(Object.defineProperties(r,{raw:{value:Object.freeze(e)}}))}function x(r,e){return function(r){if(Array.isArray(r))return r}(r)||function(r,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(r)))return;var n=[],t=!0,o=!1,a=void 0;try{for(var i,l=r[Symbol.iterator]();!(t=(i=l.next()).done)&&(n.push(i.value),!e||n.length!==e);t=!0);}catch(r){o=!0,a=r}finally{try{t||null==l.return||l.return()}finally{if(o)throw a}}return n}(r,e)||function(r,e){if(!r)return;if("string"==typeof r)return k(r,e);var n=Object.prototype.toString.call(r).slice(8,-1);"Object"===n&&r.constructor&&(n=r.constructor.name);if("Map"===n||"Set"===n)return Array.from(r);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return k(r,e)}(r,e)||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 k(r,e){(null==e||e>r.length)&&(e=r.length);for(var n=0,t=new Array(e);n<e;n++)t[n]=r[n];return t}var C;function E(){var r=h(["\n                color: ",";\n              "]);return E=function(){return r},r}function w(){var r=h(["\n                    color: ",";\n                  "]);return w=function(){return r},r}function O(){var r=h(["\n                  color: ",";\n                "]);return O=function(){return r},r}function B(){var r=h(["\n                    &:focus {\n                      border: 1px solid ",";\n                    }\n                  "]);return B=function(){return r},r}function N(){var r=h(["\n                  color: ",";\n                  background-color: ",";\n\n                  &:disabled {\n                    color: ",";\n                    background-color: ",";\n                  }\n                "]);return N=function(){return r},r}function j(){var r=h(["\n        padding-right: ","px;\n        border-color: ",";\n      "]);return j=function(){return r},r}function M(){var r=h(["\n            background-color: #5a3c3b;\n          "]);return M=function(){return r},r}function A(){var r=h(["\n          padding-right: 30px;\n          border-color: ",";\n        "]);return A=function(){return r},r}function z(){var r=h(["\n        padding-right: 30px;\n        border-color: ",";\n      "]);return z=function(){return r},r}function F(){var r=h(["\n  font-size: 14px;\n  height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]);return F=function(){return r},r}function I(){var r=h(["\n  color: ",";\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]);return I=function(){return r},r}function S(){var r=h(["\n  color: ",";\n"]);return S=function(){return r},r}function P(){var r=h(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  right: 12px;\n  z-index: 1;\n"]);return P=function(){return r},r}function T(){var r=h(["\n  width: 100%;\n  height: 36px;\n  border-radius: 4px;\n  padding-left: 12px;\n  font-size: 14px;\n  font-weight: normal;\n  font-family: Akzidenz, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;\n  border: 1px solid;\n  transition: border-color 150ms ease-in-out;\n  z-index: 1;\n  outline: none;\n\n  &::placeholder {\n    color: ",";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n"]);return T=function(){return r},r}function V(){var r=h(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]);return V=function(){return r},r}function D(){var r=h(["\n  display: flex;\n  flex-direction: column;\n"]);return D=function(){return r},r}function H(){var r=h(["\n  width: 100%;\n"]);return H=function(){return r},r}var U=f("icon-selector"),W={None:"none",Valid:"valid",Error:"error"},q={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel"},K="light",R="dark",$=o(H()),G=o(D()),J=o(V()),L=o(T(),s.gray.base),Q=o(P()),X=o(S(),s.green.base),Y=o(I(),s.gray.dark1),Z=o(F()),_=(m(C={},K,{inputColor:s.gray.dark3,inputBackgroundColor:s.white,disabledColor:s.gray.base,disabledBackgroundColor:s.gray.light2,errorIconColor:s.red.base,errorMessage:s.red.base,errorBorder:s.red.base,optional:s.gray.dark1,defaultBorder:s.gray.light1,validBorder:s.green.base}),m(C,R,{inputColor:s.white,inputBackgroundColor:"#394F5A",disabledColor:s.gray.dark1,disabledBackgroundColor:"#263843",errorIconColor:"#EF8D6F",errorMessage:"#EF8D6F",errorBorder:"#5a3c3b",optional:s.gray.light1,defaultBorder:"#394F5A",validBorder:"#394F5A"}),C);function rr(r,e,n){switch(r){case W.Valid:return o(z(),_[n].validBorder);case W.Error:return a(o(A(),_[n].errorBorder),m({},o(M()),n===R));default:return o(j(),e?60:12,_[n].defaultBorder)}}var er=p.create("text-input"),nr=r.forwardRef((function(t,s){var f,p=t.label,h=t.description,k=t.onChange,C=t.placeholder,j=t.errorMessage,M=t.optional,A=void 0!==M&&M,z=t.disabled,F=void 0!==z&&z,I=t.state,S=void 0===I?W.None:I,P=t.type,T=void 0===P?q.Text:P,V=t.id,D=t["aria-labelledby"],H=t.value,nr=t.className,tr=t.darkMode,or=void 0!==tr&&tr,ar=v(t,["label","description","onChange","placeholder","errorMessage","optional","disabled","state","type","id","aria-labelledby","value","className","darkMode"]),ir=or?R:K,lr=d().usingKeyboard,ur="string"==typeof H,cr=x(e(""),2),dr=cr[0],sr=cr[1],fr=ur?H:dr,pr=n((function(){return null!=V?V:er.generate()}),[V]);p||D||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to IconButton.");var gr=or?l:i;return r.createElement("div",{className:a(G,nr)},p&&r.createElement(g,{darkMode:or,htmlFor:pr,disabled:F},p),h&&r.createElement(b,{darkMode:or},h),r.createElement("div",{className:J},r.createElement(c,{className:$,darkMode:or,disabled:F},r.createElement("input",y({},ar,{"aria-labelledby":D,type:T,className:a(L,o(N(),_[ir].inputColor,_[ir].inputBackgroundColor,_[ir].disabledColor,_[ir].disabledBackgroundColor),(f={},m(f,rr(S,A,ir),!F),m(f,o(B(),_[ir].inputBackgroundColor),lr),f)),value:fr,required:!A,disabled:F,placeholder:C,onChange:function(r){k&&k(r),ur||sr(r.target.value)},ref:s,id:pr}))),r.createElement("div",y({},U.prop,{className:Q}),S===W.Valid&&r.createElement(gr,{className:X}),S===W.Error&&r.createElement(u,{className:o(O(),_[ir].errorIconColor)}),S===W.None&&A&&r.createElement("div",{className:a(Y,o(w(),_[ir].optional))},r.createElement("p",null,"Optional")))),S===W.Error&&j&&r.createElement("div",{className:a(Z,o(E(),_[ir].errorMessage))},r.createElement("label",null,j)))}));nr.displayName="TextInput",nr.propTypes={id:t.string,label:t.string,description:t.string,optional:t.bool,disabled:t.bool,onChange:t.func,placeholder:t.string,errorMessage:t.string,state:t.oneOf(Object.values(W)),value:t.string,className:t.string};export default nr;export{W as State,q as TextInputType};
 //# sourceMappingURL=index.js.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/typography")):"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/typography"],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/typography"])}(this,(function(e,r,n,t,o,a,i,l,u,c,d){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f,p=s(r),g=s(n),y=s(o),b=s(a),m=s(i),h=s(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 x(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 k(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}function E(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],t=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(t=(i=l.next()).done)&&(n.push(i.value),!r||n.length!==r);t=!0);}catch(e){o=!0,a=e}finally{try{t||null==l.return||l.return()}finally{if(o)throw a}}return n}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return O(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 O(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 O(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}function w(){var e=k(["\n                color: ",";\n              "]);return w=function(){return e},e}function j(){var e=k(["\n                    color: ",";\n                  "]);return j=function(){return e},e}function B(){var e=k(["\n                  color: ",";\n                "]);return B=function(){return e},e}function N(){var e=k(["\n                  color: ",";\n                  background-color: ",";\n\n                  &:focus {\n                    border: 1px solid ",";\n                  }\n\n                  &:disabled {\n                    color: ",";\n                    background-color: ",";\n                  }\n                "]);return N=function(){return e},e}function M(){var e=k(["\n        padding-right: ","px;\n        border-color: ",";\n      "]);return M=function(){return e},e}function z(){var e=k(["\n            background-color: #5a3c3b;\n          "]);return z=function(){return e},e}function A(){var e=k(["\n          padding-right: 30px;\n          border-color: ",";\n        "]);return A=function(){return e},e}function q(){var e=k(["\n        padding-right: 30px;\n        border-color: ",";\n      "]);return q=function(){return e},e}function I(){var e=k(["\n  font-size: 14px;\n  height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]);return I=function(){return e},e}function S(){var e=k(["\n  color: ",";\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]);return S=function(){return e},e}function T(){var e=k(["\n  color: ",";\n"]);return T=function(){return e},e}function F(){var e=k(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  right: 12px;\n  z-index: 1;\n"]);return F=function(){return e},e}function P(){var e=k(["\n  width: 100%;\n  height: 36px;\n  border-radius: 4px;\n  padding-left: 12px;\n  font-size: 14px;\n  font-weight: normal;\n  font-family: Akzidenz, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;\n  border: 1px solid;\n  z-index: 1;\n  outline: none;\n\n  &::placeholder {\n    color: ",";\n  }\n\n  &:focus {\n    z-index: 2;\n    border-color: ",";\n    transition: border-color 150ms ease-in-out;\n\n    & ~ "," {\n      z-index: 2;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n"]);return P=function(){return e},e}function W(){var e=k(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]);return W=function(){return e},e}function D(){var e=k(["\n  display: flex;\n  flex-direction: column;\n"]);return D=function(){return e},e}function V(){var e=k(["\n  width: 100%;\n"]);return V=function(){return e},e}var H=c.createDataProp("icon-selector"),R={None:"none",Valid:"valid",Error:"error"},U={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel"},_="light",L="dark",$=t.css(V()),G=t.css(D()),J=t.css(W()),K=t.css(P(),u.uiColors.gray.base,u.uiColors.blue.light1,H.selector),Q=t.css(F()),X=t.css(T(),u.uiColors.green.base),Y=t.css(S(),u.uiColors.gray.dark1),Z=t.css(I()),ee=(v(f={},_,{inputColor:u.uiColors.gray.dark3,inputBackgroundColor:u.uiColors.white,disabledColor:u.uiColors.gray.base,disabledBackgroundColor:u.uiColors.gray.light2,errorIconColor:u.uiColors.red.base,errorMessage:u.uiColors.red.base,errorBorder:u.uiColors.red.base,optional:u.uiColors.gray.dark1,defaultBorder:u.uiColors.gray.light1,validBorder:u.uiColors.green.base}),v(f,L,{inputColor:u.uiColors.white,inputBackgroundColor:"#394F5A",disabledColor:u.uiColors.gray.dark1,disabledBackgroundColor:"#263843",errorIconColor:"#EF8D6F",errorMessage:"#EF8D6F",errorBorder:"#5a3c3b",optional:u.uiColors.gray.light1,defaultBorder:"#394F5A",validBorder:"#394F5A"}),f);function re(e,r,n){switch(e){case R.Valid:return t.css(q(),ee[n].validBorder);case R.Error:return t.cx(t.css(A(),ee[n].errorBorder),v({},t.css(z()),n===L));default:return t.css(M(),r?60:12,ee[n].defaultBorder)}}var ne=c.IdAllocator.create("text-input"),te=p.default.forwardRef((function(e,n){var o=e.label,a=e.description,i=e.onChange,l=e.placeholder,u=e.errorMessage,c=e.optional,s=void 0!==c&&c,f=e.disabled,g=void 0!==f&&f,k=e.state,O=void 0===k?R.None:k,M=e.type,z=void 0===M?U.Text:M,A=e.id,q=e["aria-labelledby"],I=e.value,S=e.className,T=e.darkMode,F=void 0!==T&&T,P=x(e,["label","description","onChange","placeholder","errorMessage","optional","disabled","state","type","id","aria-labelledby","value","className","darkMode"]),W=F?L:_,D="string"==typeof I,V=E(r.useState(""),2),te=V[0],oe=V[1],ae=D?I:te,ie=r.useMemo((function(){return null!=A?A:ne.generate()}),[A]);o||q||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to IconButton.");var le=F?b.default:y.default;return p.default.createElement("div",{className:t.cx(G,S)},o&&p.default.createElement(d.Label,{darkMode:F,htmlFor:ie,disabled:g},o),a&&p.default.createElement(d.Description,{darkMode:F},a),p.default.createElement("div",{className:J},p.default.createElement(h.default,{className:$,darkMode:F,disabled:g},p.default.createElement("input",C({},P,{"aria-labelledby":q,type:z,className:t.cx(K,t.css(N(),ee[W].inputColor,ee[W].inputBackgroundColor,ee[W].inputBackgroundColor,ee[W].disabledColor,ee[W].disabledBackgroundColor),v({},re(O,s,W),!g)),value:ae,required:!s,disabled:g,placeholder:l,onChange:function(e){i&&i(e),D||oe(e.target.value)},ref:n,id:ie}))),p.default.createElement("div",C({},H.prop,{className:Q}),O===R.Valid&&p.default.createElement(le,{className:X}),O===R.Error&&p.default.createElement(m.default,{className:t.css(B(),ee[W].errorIconColor)}),O===R.None&&s&&p.default.createElement("div",{className:t.cx(Y,t.css(j(),ee[W].optional))},p.default.createElement("p",null,"Optional")))),O===R.Error&&u&&p.default.createElement("div",{className:t.cx(Z,t.css(w(),ee[W].errorMessage))},p.default.createElement("label",null,u)))}));te.displayName="TextInput",te.propTypes={id:g.default.string,label:g.default.string,description:g.default.string,optional:g.default.bool,disabled:g.default.bool,onChange:g.default.func,placeholder:g.default.string,errorMessage:g.default.string,state:g.default.oneOf(Object.values(R)),value:g.default.string,className:g.default.string},e.State=R,e.TextInputType=U,e.default=te,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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/leafygreen-provider"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/typography")):"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/leafygreen-provider","@leafygreen-ui/palette","@leafygreen-ui/lib","@leafygreen-ui/typography"],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/leafygreen-provider"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/typography"])}(this,(function(e,r,n,t,o,a,i,l,u,c,d,s){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p,g=f(r),y=f(n),b=f(o),v=f(a),m=f(i),h=f(l);function C(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 t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function k(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 E(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}function O(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],t=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(t=(i=l.next()).done)&&(n.push(i.value),!r||n.length!==r);t=!0);}catch(e){o=!0,a=e}finally{try{t||null==l.return||l.return()}finally{if(o)throw a}}return n}(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,t=new Array(r);n<r;n++)t[n]=e[n];return t}function j(){var e=E(["\n                color: ",";\n              "]);return j=function(){return e},e}function B(){var e=E(["\n                    color: ",";\n                  "]);return B=function(){return e},e}function N(){var e=E(["\n                  color: ",";\n                "]);return N=function(){return e},e}function M(){var e=E(["\n                    &:focus {\n                      border: 1px solid ",";\n                    }\n                  "]);return M=function(){return e},e}function q(){var e=E(["\n                  color: ",";\n                  background-color: ",";\n\n                  &:disabled {\n                    color: ",";\n                    background-color: ",";\n                  }\n                "]);return q=function(){return e},e}function A(){var e=E(["\n        padding-right: ","px;\n        border-color: ",";\n      "]);return A=function(){return e},e}function I(){var e=E(["\n            background-color: #5a3c3b;\n          "]);return I=function(){return e},e}function S(){var e=E(["\n          padding-right: 30px;\n          border-color: ",";\n        "]);return S=function(){return e},e}function T(){var e=E(["\n        padding-right: 30px;\n        border-color: ",";\n      "]);return T=function(){return e},e}function z(){var e=E(["\n  font-size: 14px;\n  height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]);return z=function(){return e},e}function F(){var e=E(["\n  color: ",";\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]);return F=function(){return e},e}function P(){var e=E(["\n  color: ",";\n"]);return P=function(){return e},e}function W(){var e=E(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  right: 12px;\n  z-index: 1;\n"]);return W=function(){return e},e}function D(){var e=E(["\n  width: 100%;\n  height: 36px;\n  border-radius: 4px;\n  padding-left: 12px;\n  font-size: 14px;\n  font-weight: normal;\n  font-family: Akzidenz, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;\n  border: 1px solid;\n  transition: border-color 150ms ease-in-out;\n  z-index: 1;\n  outline: none;\n\n  &::placeholder {\n    color: ",";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n"]);return D=function(){return e},e}function U(){var e=E(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]);return U=function(){return e},e}function V(){var e=E(["\n  display: flex;\n  flex-direction: column;\n"]);return V=function(){return e},e}function H(){var e=E(["\n  width: 100%;\n"]);return H=function(){return e},e}var K=d.createDataProp("icon-selector"),R={None:"none",Valid:"valid",Error:"error"},_={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel"},L="light",$="dark",G=t.css(H()),J=t.css(V()),Q=t.css(U()),X=t.css(D(),c.uiColors.gray.base),Y=t.css(W()),Z=t.css(P(),c.uiColors.green.base),ee=t.css(F(),c.uiColors.gray.dark1),re=t.css(z()),ne=(C(p={},L,{inputColor:c.uiColors.gray.dark3,inputBackgroundColor:c.uiColors.white,disabledColor:c.uiColors.gray.base,disabledBackgroundColor:c.uiColors.gray.light2,errorIconColor:c.uiColors.red.base,errorMessage:c.uiColors.red.base,errorBorder:c.uiColors.red.base,optional:c.uiColors.gray.dark1,defaultBorder:c.uiColors.gray.light1,validBorder:c.uiColors.green.base}),C(p,$,{inputColor:c.uiColors.white,inputBackgroundColor:"#394F5A",disabledColor:c.uiColors.gray.dark1,disabledBackgroundColor:"#263843",errorIconColor:"#EF8D6F",errorMessage:"#EF8D6F",errorBorder:"#5a3c3b",optional:c.uiColors.gray.light1,defaultBorder:"#394F5A",validBorder:"#394F5A"}),p);function te(e,r,n){switch(e){case R.Valid:return t.css(T(),ne[n].validBorder);case R.Error:return t.cx(t.css(S(),ne[n].errorBorder),C({},t.css(I()),n===$));default:return t.css(A(),r?60:12,ne[n].defaultBorder)}}var oe=d.IdAllocator.create("text-input"),ae=g.default.forwardRef((function(e,n){var o,a=e.label,i=e.description,l=e.onChange,c=e.placeholder,d=e.errorMessage,f=e.optional,p=void 0!==f&&f,y=e.disabled,E=void 0!==y&&y,w=e.state,A=void 0===w?R.None:w,I=e.type,S=void 0===I?_.Text:I,T=e.id,z=e["aria-labelledby"],F=e.value,P=e.className,W=e.darkMode,D=void 0!==W&&W,U=k(e,["label","description","onChange","placeholder","errorMessage","optional","disabled","state","type","id","aria-labelledby","value","className","darkMode"]),V=D?$:L,H=u.useUsingKeyboardContext().usingKeyboard,ae="string"==typeof F,ie=O(r.useState(""),2),le=ie[0],ue=ie[1],ce=ae?F:le,de=r.useMemo((function(){return null!=T?T:oe.generate()}),[T]);a||z||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to IconButton.");var se=D?v.default:b.default;return g.default.createElement("div",{className:t.cx(J,P)},a&&g.default.createElement(s.Label,{darkMode:D,htmlFor:de,disabled:E},a),i&&g.default.createElement(s.Description,{darkMode:D},i),g.default.createElement("div",{className:Q},g.default.createElement(h.default,{className:G,darkMode:D,disabled:E},g.default.createElement("input",x({},U,{"aria-labelledby":z,type:S,className:t.cx(X,t.css(q(),ne[V].inputColor,ne[V].inputBackgroundColor,ne[V].disabledColor,ne[V].disabledBackgroundColor),(o={},C(o,te(A,p,V),!E),C(o,t.css(M(),ne[V].inputBackgroundColor),H),o)),value:ce,required:!p,disabled:E,placeholder:c,onChange:function(e){l&&l(e),ae||ue(e.target.value)},ref:n,id:de}))),g.default.createElement("div",x({},K.prop,{className:Y}),A===R.Valid&&g.default.createElement(se,{className:Z}),A===R.Error&&g.default.createElement(m.default,{className:t.css(N(),ne[V].errorIconColor)}),A===R.None&&p&&g.default.createElement("div",{className:t.cx(ee,t.css(B(),ne[V].optional))},g.default.createElement("p",null,"Optional")))),A===R.Error&&d&&g.default.createElement("div",{className:t.cx(re,t.css(j(),ne[V].errorMessage))},g.default.createElement("label",null,d)))}));ae.displayName="TextInput",ae.propTypes={id:y.default.string,label:y.default.string,description:y.default.string,optional:y.default.bool,disabled:y.default.bool,onChange:y.default.func,placeholder:y.default.string,errorMessage:y.default.string,state:y.default.oneOf(Object.values(R)),value:y.default.string,className:y.default.string},e.State=R,e.TextInputType=_,e.default=ae,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/text-input",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "leafyGreen UI Kit Text Input",
@@ -27,3 +27,3 @@ "main": "./dist/index.js",
     "@leafygreen-ui/palette": "^3.1.0",
-    "@leafygreen-ui/typography": "^7.2.0"
+    "@leafygreen-ui/typography": "^7.3.0"
   },
@@ -30,0 +30,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

262583

increased by3.14%

Number of package files

19

increased by11.76%

Lines of code

880

increased by12.82%

Dependency changes

• Updated@leafygreen-ui/typography@^7.3.0