From 176c1b9adc527d2ac440bef1e0a21a2d46c36b43 Mon Sep 17 00:00:00 2001 From: Alex Simonok Date: Thu, 18 Apr 2024 20:06:30 +0300 Subject: [PATCH] Fix unnecessary calling onChange for Number input (#37) * Fix unnecessary calling onChange for Number input * Prepare components release 1.8.2 --- package-lock.json | 396 ++++++++++++++++-- packages/components/.storybook/main.ts | 1 + packages/components/CHANGELOG.md | 6 + packages/components/package.json | 5 +- .../NumberInput/NumberInput.story.tsx | 9 +- .../NumberInput/NumberInput.test.tsx | 14 + .../components/NumberInput/NumberInput.tsx | 9 +- 7 files changed, 409 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 00d99ff..c6d6145 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,9 +22,9 @@ } }, "node_modules/@adobe/css-tools": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz", - "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==", + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz", + "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==", "dev": true }, "node_modules/@ampproject/remapping": { @@ -6811,9 +6811,9 @@ } }, "node_modules/@storybook/csf": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.1.tgz", - "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==", + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.4.tgz", + "integrity": "sha512-B9UI/lsQMjF+oEfZCI6YXNoeuBcGZoOP5x8yKbe2tIEmsMjSztFKkpPzi5nLCnBk/MBtl6QJeI3ksJnbsWPkOw==", "dev": true, "dependencies": { "type-fest": "^2.19.0" @@ -7288,15 +7288,130 @@ "url": "https://opencollective.com/storybook" } }, - "node_modules/@storybook/testing-library": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.2.2.tgz", - "integrity": "sha512-L8sXFJUHmrlyU2BsWWZGuAjv39Jl1uAqUHdxmN42JY15M4+XCMjGlArdCCjDe1wpTSW6USYISA9axjZojgtvnw==", + "node_modules/@storybook/test": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.0.8.tgz", + "integrity": "sha512-YXgwgg1e8ggDg2BlgeExwdN3MjeExnDvybQIUugADgun87tRIujJFCdjh0PAxg0Qvln6+lU3w+3Y2aryvX42RA==", "dev": true, "dependencies": { - "@testing-library/dom": "^9.0.0", - "@testing-library/user-event": "^14.4.0", - "ts-dedent": "^2.2.0" + "@storybook/client-logger": "8.0.8", + "@storybook/core-events": "8.0.8", + "@storybook/instrumenter": "8.0.8", + "@storybook/preview-api": "8.0.8", + "@testing-library/dom": "^9.3.4", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/user-event": "^14.5.2", + "@vitest/expect": "1.3.1", + "@vitest/spy": "^1.3.1", + "chai": "^4.4.1", + "util": "^0.12.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/channels": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-8.0.8.tgz", + "integrity": "sha512-L3EGVkabv3fweXnykD/GlNUDO5HtwlIfSovC7BF4MmP7662j2/eqlZrJxDojGtbv11XHjWp/UJHUIfKpcHXYjQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "8.0.8", + "@storybook/core-events": "8.0.8", + "@storybook/global": "^5.0.0", + "telejson": "^7.2.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/client-logger": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-8.0.8.tgz", + "integrity": "sha512-a4BKwl9NLFcuRgMyI7S4SsJeLFK0LCQxIy76V6YyrE1DigoXz4nA4eQxdjLf7JVvU0EZFmNSfbVL/bXzzWKNXA==", + "dev": true, + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/core-events": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.0.8.tgz", + "integrity": "sha512-PtuvR7vS4glDEdCfKB4f1k3Vs1C3rTWP2DNbF+IjjPhNLMBznCdzTAPcz+NUIBvpjjGnhKwWikJ0yj931YjSVg==", + "dev": true, + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/instrumenter": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.0.8.tgz", + "integrity": "sha512-bCu9Tu48WOQ8ZNUed+FCSMr3Uw81b4yW/knD2goqx15nD33B7xXBNSI2GTHH5YaEHVyIFFggQcKHLkELXWlsoA==", + "dev": true, + "dependencies": { + "@storybook/channels": "8.0.8", + "@storybook/client-logger": "8.0.8", + "@storybook/core-events": "8.0.8", + "@storybook/global": "^5.0.0", + "@storybook/preview-api": "8.0.8", + "@vitest/utils": "^1.3.1", + "util": "^0.12.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/preview-api": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.0.8.tgz", + "integrity": "sha512-khgw2mNiBrSZS3KNGQPzjneL3Csh3BOq0yLAtJpT7CRSrI/YjlE7jjcTkKzoxW+UCgvNTnLvsowcuzu82e69fA==", + "dev": true, + "dependencies": { + "@storybook/channels": "8.0.8", + "@storybook/client-logger": "8.0.8", + "@storybook/core-events": "8.0.8", + "@storybook/csf": "^0.1.2", + "@storybook/global": "^5.0.0", + "@storybook/types": "8.0.8", + "@types/qs": "^6.9.5", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "tiny-invariant": "^1.3.1", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/types": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-8.0.8.tgz", + "integrity": "sha512-NGsgCsXnWlaZmHenHDgHGs21zhweZACkqTNsEQ7hvsiF08QeiKAdgJLQg3YeGK73h9mFDRP9djprUtJYab6vnQ==", + "dev": true, + "dependencies": { + "@storybook/channels": "8.0.8", + "@types/express": "^4.7.0", + "file-system-cache": "2.3.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" } }, "node_modules/@storybook/theming": { @@ -7566,9 +7681,9 @@ "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==" }, "node_modules/@testing-library/dom": { - "version": "9.3.3", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", - "integrity": "sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==", + "version": "9.3.4", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", + "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -7584,17 +7699,17 @@ } }, "node_modules/@testing-library/jest-dom": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.1.4.tgz", - "integrity": "sha512-wpoYrCYwSZ5/AxcrjLxJmCU6I5QAJXslEeSiMQqaWmP2Kzpd1LvF/qxmAIW2qposULGWq2gw30GgVNFLSc2Jnw==", + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz", + "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==", "dev": true, "dependencies": { - "@adobe/css-tools": "^4.3.1", + "@adobe/css-tools": "^4.3.2", "@babel/runtime": "^7.9.2", "aria-query": "^5.0.0", "chalk": "^3.0.0", "css.escape": "^1.5.1", - "dom-accessibility-api": "^0.5.6", + "dom-accessibility-api": "^0.6.3", "lodash": "^4.17.15", "redent": "^3.0.0" }, @@ -7605,6 +7720,7 @@ }, "peerDependencies": { "@jest/globals": ">= 28", + "@types/bun": "latest", "@types/jest": ">= 28", "jest": ">= 28", "vitest": ">= 0.32" @@ -7613,6 +7729,9 @@ "@jest/globals": { "optional": true }, + "@types/bun": { + "optional": true + }, "@types/jest": { "optional": true }, @@ -7637,6 +7756,12 @@ "node": ">=8" } }, + "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", + "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", + "dev": true + }, "node_modules/@testing-library/react": { "version": "14.1.0", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.0.tgz", @@ -7655,9 +7780,9 @@ } }, "node_modules/@testing-library/user-event": { - "version": "14.5.1", - "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz", - "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==", + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", "dev": true, "engines": { "node": ">=12", @@ -8143,6 +8268,12 @@ "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==", "dev": true }, + "node_modules/@types/uuid": { + "version": "9.0.8", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz", + "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==", + "dev": true + }, "node_modules/@types/yargs": { "version": "17.0.31", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.31.tgz", @@ -8511,6 +8642,100 @@ "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, + "node_modules/@vitest/expect": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.3.1.tgz", + "integrity": "sha512-xofQFwIzfdmLLlHa6ag0dPV8YsnKOCP1KdAeVVh34vSjN2dcUiXYCD9htu/9eM7t8Xln4v03U9HLxLpPlsXdZw==", + "dev": true, + "dependencies": { + "@vitest/spy": "1.3.1", + "@vitest/utils": "1.3.1", + "chai": "^4.3.10" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/expect/node_modules/@vitest/spy": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.3.1.tgz", + "integrity": "sha512-xAcW+S099ylC9VLU7eZfdT9myV67Nor9w9zhf0mGCYJSO+zM2839tOeROTdikOi/8Qeusffvxb/MyBSOja1Uig==", + "dev": true, + "dependencies": { + "tinyspy": "^2.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/spy": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.5.0.tgz", + "integrity": "sha512-vu6vi6ew5N5MMHJjD5PoakMRKYdmIrNJmyfkhRpQt5d9Ewhw9nZ5Aqynbi3N61bvk9UvZ5UysMT6ayIrZ8GA9w==", + "dev": true, + "dependencies": { + "tinyspy": "^2.2.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.3.1.tgz", + "integrity": "sha512-d3Waie/299qqRyHTm2DjADeTaNdNSVsnwHPWrs20JMpjh6eiVq7ggggweO8rc4arhf6rRkWuHKwvxGvejUXZZQ==", + "dev": true, + "dependencies": { + "diff-sequences": "^29.6.3", + "estree-walker": "^3.0.3", + "loupe": "^2.3.7", + "pretty-format": "^29.7.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@vitest/utils/node_modules/estree-walker": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", + "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0" + } + }, + "node_modules/@vitest/utils/node_modules/pretty-format": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", + "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==", + "dev": true, + "dependencies": { + "@jest/schemas": "^29.6.3", + "ansi-styles": "^5.0.0", + "react-is": "^18.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@vitest/utils/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", + "dev": true + }, "node_modules/@volkovlabs/components": { "resolved": "packages/components", "link": true @@ -9081,6 +9306,15 @@ "util": "^0.12.5" } }, + "node_modules/assertion-error": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/ast-types": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz", @@ -10164,6 +10398,24 @@ "node": ">=4" } }, + "node_modules/chai": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz", + "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==", + "dev": true, + "dependencies": { + "assertion-error": "^1.1.0", + "check-error": "^1.0.3", + "deep-eql": "^4.1.3", + "get-func-name": "^2.0.2", + "loupe": "^2.3.6", + "pathval": "^1.1.1", + "type-detect": "^4.0.8" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -10188,6 +10440,18 @@ "node": ">=10" } }, + "node_modules/check-error": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz", + "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==", + "dev": true, + "dependencies": { + "get-func-name": "^2.0.2" + }, + "engines": { + "node": "*" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -11409,6 +11673,18 @@ } } }, + "node_modules/deep-eql": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz", + "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==", + "dev": true, + "dependencies": { + "type-detect": "^4.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/deep-equal": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz", @@ -13577,6 +13853,15 @@ "resolved": "https://registry.npmjs.org/get-document/-/get-document-1.0.0.tgz", "integrity": "sha512-8E7H2Xxibav+/rQTTtm6gFlSQwDoAQg667yheA+vWQr/amxEuswChzGo4MIbOJJoR0SMpDyhbUqWp3FpIfwD9A==" }, + "node_modules/get-func-name": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz", + "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/get-intrinsic": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", @@ -16517,6 +16802,15 @@ "loose-envify": "cli.js" } }, + "node_modules/loupe": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz", + "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==", + "dev": true, + "dependencies": { + "get-func-name": "^2.0.1" + } + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -17570,6 +17864,15 @@ "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==", "dev": true }, + "node_modules/pathval": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", + "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/pbf": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz", @@ -21349,6 +21652,15 @@ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==" }, + "node_modules/tinyspy": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz", + "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==", + "dev": true, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", @@ -22633,7 +22945,7 @@ }, "packages/components": { "name": "@volkovlabs/components", - "version": "1.8.0", + "version": "1.8.1", "license": "Apache-2.0", "dependencies": { "@emotion/css": "^11.11.2", @@ -22645,6 +22957,7 @@ }, "devDependencies": { "@rollup/plugin-terser": "^0.4.4", + "@storybook/addon-actions": "^8.0.8", "@storybook/addon-essentials": "^7.5.3", "@storybook/addon-interactions": "^7.5.3", "@storybook/addon-links": "^7.5.3", @@ -22654,7 +22967,7 @@ "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^7.5.3", "@storybook/react-webpack5": "^7.5.3", - "@storybook/testing-library": "^0.2.2", + "@storybook/test": "^8.0.8", "@swc/core": "^1.3.96", "@swc/jest": "^0.2.29", "@testing-library/jest-dom": "^6.1.4", @@ -23064,6 +23377,37 @@ "react-dom": ">=16.9.0" } }, + "packages/components/node_modules/@storybook/addon-actions": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.0.8.tgz", + "integrity": "sha512-F3qpN0n53d058EroW1A2IlzrsFNR5p2srLY4FmXB80nxAKV8oqoDI4jp15zYlf8ThcJoQl36plT8gx3r1BpANA==", + "dev": true, + "dependencies": { + "@storybook/core-events": "8.0.8", + "@storybook/global": "^5.0.0", + "@types/uuid": "^9.0.1", + "dequal": "^2.0.2", + "polished": "^4.2.2", + "uuid": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "packages/components/node_modules/@storybook/core-events": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.0.8.tgz", + "integrity": "sha512-PtuvR7vS4glDEdCfKB4f1k3Vs1C3rTWP2DNbF+IjjPhNLMBznCdzTAPcz+NUIBvpjjGnhKwWikJ0yj931YjSVg==", + "dev": true, + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "packages/components/node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts index 435244e..bbcb141 100644 --- a/packages/components/.storybook/main.ts +++ b/packages/components/.storybook/main.ts @@ -15,6 +15,7 @@ const config: StorybookConfig = { getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-essentials'), getAbsolutePath('@storybook/addon-onboarding'), + getAbsolutePath('@storybook/addon-actions'), getAbsolutePath('@storybook/addon-interactions'), getAbsolutePath('storybook-dark-mode'), { diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 131d3b2..67ddf62 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 1.8.2 (2024-04-18) + +### Bugfixes + +- Fix unnecessary calling onChange for Number input (#37) + ## 1.8.1 (2024-04-05) ### Features diff --git a/packages/components/package.json b/packages/components/package.json index f82221f..e925d7d 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -11,6 +11,7 @@ "description": "UI Components for Grafana", "devDependencies": { "@rollup/plugin-terser": "^0.4.4", + "@storybook/addon-actions": "^8.0.8", "@storybook/addon-essentials": "^7.5.3", "@storybook/addon-interactions": "^7.5.3", "@storybook/addon-links": "^7.5.3", @@ -20,7 +21,7 @@ "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^7.5.3", "@storybook/react-webpack5": "^7.5.3", - "@storybook/testing-library": "^0.2.2", + "@storybook/test": "^8.0.8", "@swc/core": "^1.3.96", "@swc/jest": "^0.2.29", "@testing-library/jest-dom": "^6.1.4", @@ -85,5 +86,5 @@ "typecheck": "tsc --emitDeclarationOnly false --noEmit" }, "types": "dist/index.d.ts", - "version": "1.8.1" + "version": "1.8.2" } diff --git a/packages/components/src/components/NumberInput/NumberInput.story.tsx b/packages/components/src/components/NumberInput/NumberInput.story.tsx index b9064e5..318d559 100644 --- a/packages/components/src/components/NumberInput/NumberInput.story.tsx +++ b/packages/components/src/components/NumberInput/NumberInput.story.tsx @@ -1,5 +1,6 @@ import { useArgs } from '@storybook/client-api'; import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; import React from 'react'; import { NumberInput } from './NumberInput'; @@ -13,6 +14,9 @@ const meta = { parameters: { layout: 'centered', }, + args: { + onChange: fn(), + }, argTypes: { value: { name: 'value', @@ -37,7 +41,10 @@ const meta = { }, render: (args) => { const [{}, updateArgs] = useArgs(); - const handleChange = (value: number) => updateArgs({ value }); + const handleChange = (value: number) => { + args.onChange?.(value); + updateArgs({ value }); + }; return ; }, diff --git a/packages/components/src/components/NumberInput/NumberInput.test.tsx b/packages/components/src/components/NumberInput/NumberInput.test.tsx index cdf4c8f..0d23de7 100644 --- a/packages/components/src/components/NumberInput/NumberInput.test.tsx +++ b/packages/components/src/components/NumberInput/NumberInput.test.tsx @@ -122,4 +122,18 @@ describe('Number Input', () => { fireEvent.blur(selectors.field()); expect(onChange).toHaveBeenCalledWith(5); }); + + it('Should not trigger onChange if value not updated', async () => { + const onChange = jest.fn(); + + render(getComponent({ onChange, value: 5 })); + + fireEvent.change(selectors.field(), { target: { value: '5' } }); + + /** + * Jest doesn't trigger onBlur by element.blur() so just fire blur event + */ + fireEvent.blur(selectors.field()); + expect(onChange).not.toHaveBeenCalled(); + }); }); diff --git a/packages/components/src/components/NumberInput/NumberInput.tsx b/packages/components/src/components/NumberInput/NumberInput.tsx index c384c4b..523cf1e 100644 --- a/packages/components/src/components/NumberInput/NumberInput.tsx +++ b/packages/components/src/components/NumberInput/NumberInput.tsx @@ -48,6 +48,7 @@ export const NumberInput: React.FC = ({ value, onChange, min, max, step, * Ref */ const ref = useRef(null); + const isChanged = useRef(false); /** * Local Value @@ -59,6 +60,7 @@ export const NumberInput: React.FC = ({ value, onChange, min, max, step, */ const onChangeValue = useCallback((event: ChangeEvent) => { setLocalValue(event.currentTarget.value); + isChanged.current = true; }, []); /** @@ -81,8 +83,11 @@ export const NumberInput: React.FC = ({ value, onChange, min, max, step, v = min; } - onChange?.(v); - setLocalValue(v.toString()); + if (isChanged.current) { + onChange?.(v); + setLocalValue(v.toString()); + isChanged.current = false; + } }, [localValue, max, min, onChange, step]); /**