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

Comparing version 3.0.2 to 3.0.3

CHANGELOG.md

 # @leafygreen-ui/text-input
 
+## 3.0.3
+
+### Patch Changes
+
+- 6aadc0b: Make id generation deterministic using IdAllocator.create class. This improves the SSR compatibility of these components.
+- Updated dependencies [6aadc0b]
+- Updated dependencies [5ee2098]
+  - @leafygreen-ui/lib@5.1.0
+  - @leafygreen-ui/icon@6.3.1
+
 ## 3.0.2
@@ -4,0 +14,0 @@

dist/index.js

@@ -1,4 +0,2 @@
-import TextInput, { TextInputType } from './TextInput';
-export { TextInputType };
-export default TextInput;
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/lib"));else if("function"==typeof define&&define.amd)define(["react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Warning","@leafygreen-ui/palette","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/lib"],r);else{var n="object"==typeof exports?r(require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Warning"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/lib")):r(e.react,e["prop-types"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/icon/dist/Checkmark"],e["@leafygreen-ui/icon/dist/Warning"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/lib"]);for(var t in n)("object"==typeof exports?exports:e)[t]=n[t]}}(window,(function(e,r,n,t,o,i,a,u){return function(e){var r={};function n(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=r,n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,r){if(1&r&&(e=n(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(n.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)n.d(t,o,function(r){return e[r]}.bind(null,o));return t},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},n.p="",n(n.s=0)}([function(e,r,n){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(r,"__esModule",{value:!0}),Object.defineProperty(r,"TextInputType",{enumerable:!0,get:function(){return o.TextInputType}}),r.default=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==t(e)&&"function"!=typeof e)return{default:e};var r=i();if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if(Object.prototype.hasOwnProperty.call(e,a)){var u=o?Object.getOwnPropertyDescriptor(e,a):null;u&&(u.get||u.set)?Object.defineProperty(n,a,u):n[a]=e[a]}n.default=e,r&&r.set(e,n);return n}(n(1));function i(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return i=function(){return e},e}var a=o.default;r.default=a},function(e,r,n){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(r,"__esModule",{value:!0}),r.default=r.TextInputType=r.State=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==t(e)&&"function"!=typeof e)return{default:e};var r=d();if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,r&&r.set(e,n);return n}(n(2)),i=p(n(3)),a=n(4),u=p(n(5)),l=p(n(6)),c=n(7),f=n(8),s=n(9);function p(e){return e&&e.__esModule?e:{default:e}}function d(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return d=function(){return e},e}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 b(){return(b=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 g(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,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(t=(a=u.next()).done)&&(n.push(a.value),!r||n.length!==r);t=!0);}catch(e){o=!0,i=e}finally{try{t||null==u.return||u.return()}finally{if(o)throw i}}return n}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return m(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(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return m(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 m(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 v(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function x(){var e=I(["\n        padding-right: ","px;\n        border-color: ",";\n      "]);return x=function(){return e},e}function h(){var e=I(["\n        padding-right: 30px;\n        border-color: ",";\n      "]);return h=function(){return e},e}function O(){var e=I(["\n        padding-right: 30px;\n        border-color: ",";\n      "]);return O=function(){return e},e}function j(){var e=I(["\n  color: ",";\n  font-size: 14px;\n  height: 20px;\n  padding-top: 4px;\n  font-weight: normal;\n"]);return j=function(){return e},e}function w(){var e=I(["\n  color: ",";\n  font-size: 12px;\n  font-style: italic;\n  font-weight: normal;\n"]);return w=function(){return e},e}function S(){var e=I(["\n  color: ",";\n"]);return S=function(){return e},e}function P(){var e=I(["\n  color: ",";\n"]);return P=function(){return e},e}function C(){var e=I(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  right: 12px;\n  z-index: 1;\n"]);return C=function(){return e},e}function k(){var e=I(["\n  ",":hover ~ & {\n    transform: scale(1);\n  }\n"]);return k=function(){return e},e}function E(){var e=I(["\n  ",":focus ~ & {\n    background-color: #9dd0e7;\n    transform: scale(1);\n    z-index: 1;\n  }\n"]);return E=function(){return e},e}function N(){var e=I(["\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  background-color: ",";\n  border: 1px solid;\n  z-index: 1;\n\n  &::placeholder {\n    color: ",";\n  }\n\n  &:focus {\n    outline: none;\n    z-index: 2;\n    border-color: #9dd0e7;\n    transition: border-color 150ms ease-in-out;\n\n    & ~ "," {\n      z-index: 2;\n    }\n  }\n\n  &:disabled {\n    background-color: ",";\n  }\n"]);return N=function(){return e},e}function M(){var e=I(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  z-index: 0;\n"]);return M=function(){return e},e}function q(){var e=I(["\n  color: ",";\n  font-size: 14px;\n  line-height: 16px;\n  font-weight: normal;\n  padding-bottom: 4px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n"]);return q=function(){return e},e}function T(){var e=I(["\n  color: ",";\n  font-size: 14px;\n  font-weight: bold;\n  line-height: 16px;\n  padding-bottom: 4px;\n"]);return T=function(){return e},e}function _(){var e=I(["\n  display: flex;\n  flex-direction: column;\n"]);return _=function(){return e},e}function z(){var e=I(["\n  transition: all 150ms ease-in-out;\n  transform: scale(0.9, 0.8);\n  border-radius: 7px;\n  position: absolute;\n  top: -3px;\n  bottom: -3px;\n  left: -3px;\n  right: -3px;\n  pointer-events: none;\n  background-color: ",";\n"]);return z=function(){return e},e}function I(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}var A=(0,s.createDataProp)("input-selector"),W=(0,s.createDataProp)("icon-selector"),D={None:"none",Valid:"valid",Error:"error"};r.State=D;var U={Email:"email",Password:"password",Search:"search",Text:"text",Url:"url",Tel:"tel"};r.TextInputType=U;var V=(0,a.css)(z(),c.uiColors.gray.light2),F=(0,a.css)(_()),H=(0,a.css)(T(),c.uiColors.gray.dark2),K=(0,a.css)(q(),c.uiColors.gray.dark1),B=(0,a.css)(M()),R=(0,a.css)(N(),c.uiColors.white,c.uiColors.gray.base,W.selector,c.uiColors.gray.light2),$=(0,a.css)(E(),A.selector),G=(0,a.css)(k(),A.selector),J=(0,a.css)(C()),L=(0,a.css)(P(),c.uiColors.red.base),Q=(0,a.css)(S(),c.uiColors.green.base),X=(0,a.css)(w(),c.uiColors.gray.dark1),Y=(0,a.css)(j(),c.uiColors.red.base);function Z(e,r){switch(e){case D.Valid:return(0,a.css)(O(),c.uiColors.green.base);case D.Error:return(0,a.css)(h(),c.uiColors.red.base);default:return(0,a.css)(x(),r?60:12,c.uiColors.gray.light1)}}var ee=s.IdAllocator.create("text-input"),re=o.default.forwardRef((function(e,r){var n=e.label,t=e.description,i=e.onChange,c=e.placeholder,s=e.errorMessage,p=e.optional,d=void 0!==p&&p,m=e.disabled,x=void 0!==m&&m,h=e.state,O=void 0===h?D.None:h,j=e.type,w=void 0===j?U.Text:j,S=e.id,P=e["aria-labelledby"],C=e.value,k=e.className,E=v(e,["label","description","onChange","placeholder","errorMessage","optional","disabled","state","type","id","aria-labelledby","value","className"]),N="string"==typeof C,M=g((0,o.useState)(""),2),q=M[0],T=M[1],_=N?C:q,z=(0,f.useUsingKeyboardContext)().usingKeyboard,I=(0,o.useMemo)((function(){return null!=S?S:ee.generate()}),[S]);return n||P||console.error("For screen-reader accessibility, label or aria-labelledby must be provided to IconButton."),o.default.createElement("div",{className:(0,a.cx)(F,k)},n&&o.default.createElement("label",{htmlFor:I,className:H},n),t&&o.default.createElement("p",{className:K},t),o.default.createElement("div",{className:B},o.default.createElement("input",b({},A.prop,E,{"aria-labelledby":P,type:w,className:(0,a.cx)(R,Z(O,d)),value:_,required:!d,disabled:x,placeholder:c,onChange:function(e){i&&i(e),N||T(e.target.value)},ref:r,id:I})),o.default.createElement("div",b({},W.prop,{className:J}),O===D.Valid&&o.default.createElement(u.default,{className:Q}),O===D.Error&&o.default.createElement(l.default,{className:L}),O===D.None&&d&&o.default.createElement("div",{className:X},o.default.createElement("p",null,"Optional"))),o.default.createElement("div",{className:(0,a.cx)(V,G,y({},$,z))})),O===D.Error&&s&&o.default.createElement("div",{className:Y},o.default.createElement("label",null,s)))}));re.displayName="TextInput",re.propTypes={id:i.default.string,label:i.default.string,description:i.default.string,optional:i.default.bool,disabled:i.default.bool,onChange:i.default.func,placeholder:i.default.string,errorMessage:i.default.string,state:i.default.oneOf(Object.values(D)),value:i.default.string,className:i.default.string};var ne=re;r.default=ne},function(r,n){r.exports=e},function(e,n){e.exports=r},function(e,r){e.exports=n},function(e,r){e.exports=t},function(e,r){e.exports=o},function(e,r){e.exports=i},function(e,r){e.exports=a},function(e,r){e.exports=u}])}));
 //# sourceMappingURL=index.js.map

dist/TextInput.js

@@ -27,3 +27,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 };
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -35,3 +35,3 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { useUsingKeyboardContext } from '@leafygreen-ui/leafygreen-provider';
-import { createDataProp } from '@leafygreen-ui/lib';
+import { createDataProp, IdAllocator, } from '@leafygreen-ui/lib';
 var inputSelectorProp = createDataProp('input-selector');
@@ -78,2 +78,3 @@ var iconSelectorProp = createDataProp('icon-selector');
 }
+var idAllocator = IdAllocator.create('text-input');
 /**
@@ -106,4 +107,3 @@ * # TextInput
     var showFocus = useUsingKeyboardContext().usingKeyboard;
-    var generatedId = useState("text-input-" + Math.floor(Math.random() * 10000000))[0];
-    var id = propsId !== null && propsId !== void 0 ? propsId : generatedId;
+    var id = useMemo(function () { return propsId !== null && propsId !== void 0 ? propsId : idAllocator.generate(); }, [propsId]);
     function onValueChange(e) {
@@ -110,0 +110,0 @@ if (onChange) {

package.json

 {
   "name": "@leafygreen-ui/text-input",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "leafyGreen UI Kit Text Input",
-  "browser": "./dist/index.web.js",
-  "main": "./dist/index.node.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -16,4 +15,4 @@ "scripts": {
   "dependencies": {
-    "@leafygreen-ui/lib": "^5.0.0",
-    "@leafygreen-ui/icon": "^6.3.0",
+    "@leafygreen-ui/lib": "^5.1.0",
+    "@leafygreen-ui/icon": "^6.3.1",
     "@leafygreen-ui/palette": "^2.0.0"
@@ -20,0 +19,0 @@ },

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

378676

decreased by-7.99%

Number of package files

17

decreased by-19.05%

Lines of code

854

decreased by-5.01%

Dependency changes

• + Added@babel/generator@7.26.8(transitive)

• + Added@babel/parser@7.26.8(transitive)

• + Added@babel/template@7.26.8(transitive)

• + Added@babel/traverse@7.26.8(transitive)

• + Added@babel/types@7.26.8(transitive)

• - Removed@babel/generator@7.26.5(transitive)

• - Removed@babel/parser@7.26.7(transitive)

• - Removed@babel/template@7.25.9(transitive)

• - Removed@babel/traverse@7.26.7(transitive)

• - Removed@babel/types@7.26.7(transitive)

• Updated@leafygreen-ui/icon@^6.3.1

• Updated@leafygreen-ui/lib@^5.1.0