From 536f203e5b5f3cf83ec934dfd21656eea05aa25f Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sun, 28 Jun 2026 11:05:25 +0530 Subject: [PATCH 1/9] feat: implement FormHelperText base component wrapper for MUI Signed-off-by: Abhinav Deval --- package-lock.json | 37 ++++++++++++++++++++-- src/base/FormHelperText/FormHelperText.tsx | 21 ++++++++++++ src/base/FormHelperText/index.ts | 2 ++ src/base/index.tsx | 1 + 4 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 src/base/FormHelperText/FormHelperText.tsx create mode 100644 src/base/FormHelperText/index.ts diff --git a/package-lock.json b/package-lock.json index 3633af67a..c237c4fb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -147,6 +147,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1132,6 +1133,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" }, @@ -1155,6 +1157,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" } @@ -1251,6 +1254,7 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -1294,6 +1298,7 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -3303,6 +3308,7 @@ "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.1.tgz", "integrity": "sha512-5PRpQjVLTNLyV/2J9J53Yz4R0tVbodG0BQDN2zQI1QBG1OPYM25ar+4N20eyFOfJT6zKglLzsnU70+zdVLaTkw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.29.2" }, @@ -3329,6 +3335,7 @@ "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.1.tgz", "integrity": "sha512-voyCpeUxcSWLN7KPZuq0pGCIt726T9K6kiVM3XUcywZDAlZSarLHaUxJVQpospbjjOzN53hwyjo8s6KoWl6utw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.29.2", "@mui/core-downloads-tracker": "^9.0.1", @@ -3592,6 +3599,7 @@ "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", @@ -3619,6 +3627,7 @@ "integrity": "sha512-z67ekKil3JB2b/kBIVzeo+WJTcx4q2yyUq4viam+/053sdOZ5QNIlaCPTxS1x06lLSj4eWg7WP2G2wqahrclJA==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "lodash": "^4.18.1", "lodash-es": "^4.18.1", @@ -3658,6 +3667,7 @@ "integrity": "sha512-Hwve0OB1pOed1RkbO8qggcmyPQ5nsE+nimESympq/cb2dtBou0nIVlJ+Paa4oO9vARmN5IrVXXZODinIV+ErMw==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@x0k/json-schema-merge": "^1.0.3", "fast-equals": "^6.0.0", @@ -4160,6 +4170,7 @@ "dev": true, "hasInstallScript": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.26" @@ -4448,6 +4459,7 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -4618,6 +4630,7 @@ "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "hoist-non-react-statics": "^3.3.0" }, @@ -4959,6 +4972,7 @@ "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.19.0" } @@ -4980,6 +4994,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz", "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -4990,6 +5005,7 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -5116,6 +5132,7 @@ "integrity": "sha512-PJ5vePq5/ognBbrIcoC5+SHO5dfpeLPzP9FpLkzWrguoYQEeeSjlJpVwOpo1JRSTEi7dRcwNy4h4dzV70PqHcg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.61.1", "@typescript-eslint/types": "8.61.1", @@ -5665,6 +5682,7 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -6179,6 +6197,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -6786,6 +6805,7 @@ "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", @@ -6858,7 +6878,8 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/cz-conventional-changelog": { "version": "3.3.0", @@ -7043,6 +7064,7 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", + "peer": true, "engines": { "node": ">=12" } @@ -7426,6 +7448,7 @@ "dev": true, "hasInstallScript": true, "license": "MIT", + "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7489,6 +7512,7 @@ "integrity": "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", @@ -11469,6 +11493,7 @@ "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "cssstyle": "^4.2.1", "data-urls": "^5.0.0", @@ -13963,6 +13988,7 @@ "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -14095,6 +14121,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz", "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -14143,6 +14170,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz", "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -14230,6 +14258,7 @@ "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -14320,7 +14349,8 @@ "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -15415,6 +15445,7 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -15633,7 +15664,6 @@ "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz", "integrity": "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==", "license": "MIT", - "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -16032,6 +16062,7 @@ "integrity": "sha512-zsk73aWGmxn9z34P0kbiod5JwTvdYRW3+IDxITq8sd9+VWwMyW7BUzpplnYy9mIEXa6V8IMDv7Hy4m0mhT5+2Q==", "devOptional": true, "license": "MIT", + "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/xstate" diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx new file mode 100644 index 000000000..22ebf195f --- /dev/null +++ b/src/base/FormHelperText/FormHelperText.tsx @@ -0,0 +1,21 @@ +import MuiFormHelperText, { + FormHelperTextProps as MuiFormHelperTextProps +} from '@mui/material/FormHelperText'; +import React from 'react'; + +export interface SistentFormHelperTextProps extends MuiFormHelperTextProps { + // Custom props for future extension of the Sistent wrapper +} + +export const FormHelperText = React.forwardRef( + ({ children, ...props }, ref) => { + return ( + + {children} + + ); + } +); +FormHelperText.displayName = 'FormHelperText'; + +export default FormHelperText; diff --git a/src/base/FormHelperText/index.ts b/src/base/FormHelperText/index.ts new file mode 100644 index 000000000..6ffed7848 --- /dev/null +++ b/src/base/FormHelperText/index.ts @@ -0,0 +1,2 @@ +export * from './FormHelperText'; +export { default } from './FormHelperText'; diff --git a/src/base/index.tsx b/src/base/index.tsx index da4f57642..05065f706 100644 --- a/src/base/index.tsx +++ b/src/base/index.tsx @@ -95,3 +95,4 @@ export * from './Toolbar'; export * from './Tooltip'; export * from './Typography'; export * from './Zoom'; +export * from './FormHelperText'; From e344196fc72f126d96860507917da0aa50c05e95 Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Mon, 6 Jul 2026 12:27:13 +0530 Subject: [PATCH 2/9] refactor: rename file to FormHelperTextIcon and revert package-lock Signed-off-by: Abhinav Deval --- package-lock.json | 37 ++----------------- ...mHelperText.tsx => FormHelperTextIcon.tsx} | 0 src/base/FormHelperText/index.ts | 2 - 3 files changed, 3 insertions(+), 36 deletions(-) rename src/base/FormHelperText/{FormHelperText.tsx => FormHelperTextIcon.tsx} (100%) diff --git a/package-lock.json b/package-lock.json index c237c4fb3..3633af67a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -147,7 +147,6 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1133,7 +1132,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -1157,7 +1155,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -1254,7 +1251,6 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -1298,7 +1294,6 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -3308,7 +3303,6 @@ "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.1.tgz", "integrity": "sha512-5PRpQjVLTNLyV/2J9J53Yz4R0tVbodG0BQDN2zQI1QBG1OPYM25ar+4N20eyFOfJT6zKglLzsnU70+zdVLaTkw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.29.2" }, @@ -3335,7 +3329,6 @@ "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.1.tgz", "integrity": "sha512-voyCpeUxcSWLN7KPZuq0pGCIt726T9K6kiVM3XUcywZDAlZSarLHaUxJVQpospbjjOzN53hwyjo8s6KoWl6utw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.29.2", "@mui/core-downloads-tracker": "^9.0.1", @@ -3599,7 +3592,6 @@ "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", @@ -3627,7 +3619,6 @@ "integrity": "sha512-z67ekKil3JB2b/kBIVzeo+WJTcx4q2yyUq4viam+/053sdOZ5QNIlaCPTxS1x06lLSj4eWg7WP2G2wqahrclJA==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "lodash": "^4.18.1", "lodash-es": "^4.18.1", @@ -3667,7 +3658,6 @@ "integrity": "sha512-Hwve0OB1pOed1RkbO8qggcmyPQ5nsE+nimESympq/cb2dtBou0nIVlJ+Paa4oO9vARmN5IrVXXZODinIV+ErMw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@x0k/json-schema-merge": "^1.0.3", "fast-equals": "^6.0.0", @@ -4170,7 +4160,6 @@ "dev": true, "hasInstallScript": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.26" @@ -4459,7 +4448,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -4630,7 +4618,6 @@ "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "hoist-non-react-statics": "^3.3.0" }, @@ -4972,7 +4959,6 @@ "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.19.0" } @@ -4994,7 +4980,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz", "integrity": "sha512-eRwcGNHve+E8qtEQSSRl6urh+rFop4v8gm6O8rGv25CodbvFdLjA1vVQ1KkiFE0w0UPOnb8tDiFKL5lp0rtY5Q==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -5005,7 +4990,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -5132,7 +5116,6 @@ "integrity": "sha512-PJ5vePq5/ognBbrIcoC5+SHO5dfpeLPzP9FpLkzWrguoYQEeeSjlJpVwOpo1JRSTEi7dRcwNy4h4dzV70PqHcg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.61.1", "@typescript-eslint/types": "8.61.1", @@ -5682,7 +5665,6 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -6197,7 +6179,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -6805,7 +6786,6 @@ "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", @@ -6878,8 +6858,7 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/cz-conventional-changelog": { "version": "3.3.0", @@ -7064,7 +7043,6 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", - "peer": true, "engines": { "node": ">=12" } @@ -7448,7 +7426,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7512,7 +7489,6 @@ "integrity": "sha512-loXy6bWOoP3EP6JA7jo6p5jMpBJmHmsNZM5SFRHLdh1MGOPurMnNBj4ZlAbaqUAaQWbCr7jHV4P7gzAyryZWkQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", @@ -11493,7 +11469,6 @@ "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssstyle": "^4.2.1", "data-urls": "^5.0.0", @@ -13988,7 +13963,6 @@ "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -14121,7 +14095,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz", "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -14170,7 +14143,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz", "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -14258,7 +14230,6 @@ "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -14349,8 +14320,7 @@ "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -15445,7 +15415,6 @@ "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -15664,6 +15633,7 @@ "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz", "integrity": "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==", "license": "MIT", + "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -16062,7 +16032,6 @@ "integrity": "sha512-zsk73aWGmxn9z34P0kbiod5JwTvdYRW3+IDxITq8sd9+VWwMyW7BUzpplnYy9mIEXa6V8IMDv7Hy4m0mhT5+2Q==", "devOptional": true, "license": "MIT", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/xstate" diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperTextIcon.tsx similarity index 100% rename from src/base/FormHelperText/FormHelperText.tsx rename to src/base/FormHelperText/FormHelperTextIcon.tsx diff --git a/src/base/FormHelperText/index.ts b/src/base/FormHelperText/index.ts index 6ffed7848..e69de29bb 100644 --- a/src/base/FormHelperText/index.ts +++ b/src/base/FormHelperText/index.ts @@ -1,2 +0,0 @@ -export * from './FormHelperText'; -export { default } from './FormHelperText'; From 483690c5b41d2a9f5f2bbbc70e9e5849ad383b42 Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Mon, 6 Jul 2026 18:37:12 +0530 Subject: [PATCH 3/9] refactor: revert filename to FormHelperText.tsx as per maintainer review Signed-off-by: Abhinav Deval --- .../{FormHelperTextIcon.tsx => FormHelperText.tsx} | 0 src/base/FormHelperText/index.ts | 1 + 2 files changed, 1 insertion(+) rename src/base/FormHelperText/{FormHelperTextIcon.tsx => FormHelperText.tsx} (100%) diff --git a/src/base/FormHelperText/FormHelperTextIcon.tsx b/src/base/FormHelperText/FormHelperText.tsx similarity index 100% rename from src/base/FormHelperText/FormHelperTextIcon.tsx rename to src/base/FormHelperText/FormHelperText.tsx diff --git a/src/base/FormHelperText/index.ts b/src/base/FormHelperText/index.ts index e69de29bb..91104b497 100644 --- a/src/base/FormHelperText/index.ts +++ b/src/base/FormHelperText/index.ts @@ -0,0 +1 @@ +export * from './FormHelperText'; From 1d33bf0a3e0fa7f998fb899b0513ae32e730a4f1 Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sat, 29 Aug 2026 19:35:37 +0530 Subject: [PATCH 4/9] refactor: replace empty interface with type alias Signed-off-by: Abhinav Deval --- src/base/FormHelperText/FormHelperText.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx index 22ebf195f..a04cd14da 100644 --- a/src/base/FormHelperText/FormHelperText.tsx +++ b/src/base/FormHelperText/FormHelperText.tsx @@ -3,9 +3,7 @@ import MuiFormHelperText, { } from '@mui/material/FormHelperText'; import React from 'react'; -export interface SistentFormHelperTextProps extends MuiFormHelperTextProps { - // Custom props for future extension of the Sistent wrapper -} +export type SistentFormHelperTextProps = MuiFormHelperTextProps; export const FormHelperText = React.forwardRef( ({ children, ...props }, ref) => { From 0df750f3f5589e30a52074fd0746ffcd75e8ac37 Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sun, 30 Aug 2026 18:25:50 +0530 Subject: [PATCH 5/9] test: add unit tests for FormHelperText covering render and ref forwarding Signed-off-by: Abhinav Deval --- .../FormHelperText/FormHelperText.test.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/base/FormHelperText/FormHelperText.test.tsx diff --git a/src/base/FormHelperText/FormHelperText.test.tsx b/src/base/FormHelperText/FormHelperText.test.tsx new file mode 100644 index 000000000..476f55ec6 --- /dev/null +++ b/src/base/FormHelperText/FormHelperText.test.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import FormHelperText from './FormHelperText'; + +describe('FormHelperText Component', () => { + it('renders children correctly', () => { + render(Sample Helper Text); + expect(screen.getByText('Sample Helper Text')).toBeInTheDocument(); + }); + + it('forwards ref correctly to the underlying HTML element', () => { + const ref = React.createRef(); + render(Ref Attached Text); + expect(ref.current).toBeInstanceOf(HTMLParagraphElement); + expect(ref.current?.textContent).toBe('Ref Attached Text'); + }); + + it('applies custom className and props', () => { + render( + + Error state text + + ); + const element = screen.getByTestId('custom-helper'); + expect(element).toHaveClass('custom-class'); + expect(element).toHaveClass('Mui-error'); + }); +}); From 27807a7b341c2a42c814fc0db125f21a82d3200f Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sat, 26 Sep 2026 13:12:04 +0530 Subject: [PATCH 6/9] refactor(FormHelperText): preserve polymorphic component typing and add component prop test Signed-off-by: Abhinav Deval --- src/__testing__/BottomSheet.test.tsx | 126 ++++++++++++++++++ .../FormHelperText/FormHelperText.test.tsx | 11 +- src/base/FormHelperText/FormHelperText.tsx | 18 ++- src/custom/BottomSheet/BottomSheet.tsx | 34 ++++- .../DashboardLayout/DashboardLayout.tsx | 14 +- .../WorkspaceEnvironmentSelection.tsx | 1 - src/hooks/index.ts | 1 + src/{custom => hooks}/useAccessibleOrgs.ts | 2 +- src/index.tsx | 2 +- 9 files changed, 189 insertions(+), 20 deletions(-) create mode 100644 src/__testing__/BottomSheet.test.tsx rename src/{custom => hooks}/useAccessibleOrgs.ts (99%) diff --git a/src/__testing__/BottomSheet.test.tsx b/src/__testing__/BottomSheet.test.tsx new file mode 100644 index 000000000..f25480bd4 --- /dev/null +++ b/src/__testing__/BottomSheet.test.tsx @@ -0,0 +1,126 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import BottomSheet from '../custom/BottomSheet/BottomSheet'; +import { + createCustomTheme, + readableTextColor, + SistentThemeProvider, + ThemeProvider +} from '../theme'; + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +const noop = () => {}; + +const rgb = (hex: string | undefined) => { + let h = String(hex).replace('#', ''); + if (h.length === 3) + h = h + .split('') + .map((c) => c + c) + .join(''); + const int = parseInt(h, 16); + return `rgb(${(int >> 16) & 255}, ${(int >> 8) & 255}, ${int & 255})`; +}; + +/** The flex container that carries the resolved header `background`/`color`. */ +const getHeader = () => screen.getByText('Test Title').parentElement as HTMLElement; + +function renderSheet( + props: Partial> = {}, + { mode = 'light' }: { mode?: 'light' | 'dark' } = {} +) { + return render( + + +

content

+ + + ); +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- + +describe('BottomSheet header color resolution', () => { + it('falls back to surface.tint for the background and light ink for the text', () => { + const theme = createCustomTheme('light'); + renderSheet(); + + const header = getHeader(); + expect(getComputedStyle(header).background).toContain('gradient'); + expect(getComputedStyle(header).color).toBe(rgb(theme.palette.common.white)); + }); + + it('keeps the surface.tint header readable in dark mode (light ink, not text.inverse)', () => { + const theme = createCustomTheme('dark'); + // In the dark palette text.inverse is near-black, which would be invisible + // on the dark surface.tint gradient — the tint header must stay light. + expect(rgb(theme.palette.text.inverse)).not.toBe(rgb(theme.palette.common.white)); + + renderSheet({}, { mode: 'dark' }); + + const header = getHeader(); + expect(getComputedStyle(header).background).toContain('gradient'); + expect(getComputedStyle(header).color).toBe(rgb(theme.palette.common.white)); + }); + + it('falls back to background.default when the palette has no surface.tint', () => { + const theme = createCustomTheme('light'); + delete (theme.palette.surface as { tint?: string }).tint; + + render( + + +

content

+ + + ); + + const header = getHeader(); + expect(getComputedStyle(header).background).toBe(rgb(theme.palette.background.default)); + expect(getComputedStyle(header).color).toBe(rgb(theme.palette.text.default)); + }); + + it('picks the light (inverse) ink for a dark custom background', () => { + const theme = createCustomTheme('light'); + renderSheet({ headerBackgroundColor: '#121212' }); + + const expected = readableTextColor( + '#121212', + theme.palette.text.inverse, + theme.palette.text.default + ); + expect(expected).toBe(theme.palette.text.inverse); + expect(getComputedStyle(getHeader()).color).toBe(rgb(expected)); + }); + + it('picks the dark (default) ink for a light custom background', () => { + const theme = createCustomTheme('light'); + renderSheet({ headerBackgroundColor: '#f5f5f5' }); + + const expected = readableTextColor( + '#f5f5f5', + theme.palette.text.inverse, + theme.palette.text.default + ); + expect(expected).toBe(theme.palette.text.default); + expect(getComputedStyle(getHeader()).color).toBe(rgb(expected)); + }); + + it('lets an explicit headerTextColor win over the computed ink', () => { + renderSheet({ headerBackgroundColor: '#121212', headerTextColor: '#ff0000' }); + + expect(getComputedStyle(getHeader()).color).toBe('rgb(255, 0, 0)'); + }); + + it('applies the same resolved ink to the close-button icon', () => { + renderSheet({ headerBackgroundColor: '#121212', headerTextColor: '#ff0000' }); + + const icon = screen.getByLabelText('Close').querySelector('svg') as SVGElement; + expect(getComputedStyle(icon).fill).toBe('#ff0000'); + }); +}); diff --git a/src/base/FormHelperText/FormHelperText.test.tsx b/src/base/FormHelperText/FormHelperText.test.tsx index 476f55ec6..9279980f2 100644 --- a/src/base/FormHelperText/FormHelperText.test.tsx +++ b/src/base/FormHelperText/FormHelperText.test.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; import FormHelperText from './FormHelperText'; describe('FormHelperText Component', () => { @@ -16,6 +16,13 @@ describe('FormHelperText Component', () => { expect(ref.current?.textContent).toBe('Ref Attached Text'); }); + it('renders with custom component prop', () => { + render(Span Helper Text); + const element = screen.getByText('Span Helper Text'); + expect(element.tagName).toBe('SPAN'); + expect(element).toBeInTheDocument(); + }); + it('applies custom className and props', () => { render( diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx index a04cd14da..9f7626c75 100644 --- a/src/base/FormHelperText/FormHelperText.tsx +++ b/src/base/FormHelperText/FormHelperText.tsx @@ -1,19 +1,25 @@ import MuiFormHelperText, { - FormHelperTextProps as MuiFormHelperTextProps + FormHelperTextProps as MuiFormHelperTextProps, + FormHelperTextTypeMap } from '@mui/material/FormHelperText'; +import { OverridableComponent } from '@mui/material/OverridableComponent'; import React from 'react'; -export type SistentFormHelperTextProps = MuiFormHelperTextProps; +export type SistentFormHelperTextProps< + D extends React.ElementType = FormHelperTextTypeMap['defaultComponent'], + P = {} +> = MuiFormHelperTextProps; -export const FormHelperText = React.forwardRef( - ({ children, ...props }, ref) => { +export const FormHelperText: OverridableComponent = React.forwardRef( + ({ children, ...props }: SistentFormHelperTextProps, ref: React.Ref) => { return ( - + {children} ); } -); +) as OverridableComponent; + FormHelperText.displayName = 'FormHelperText'; export default FormHelperText; diff --git a/src/custom/BottomSheet/BottomSheet.tsx b/src/custom/BottomSheet/BottomSheet.tsx index 12d730718..f2b79ff95 100644 --- a/src/custom/BottomSheet/BottomSheet.tsx +++ b/src/custom/BottomSheet/BottomSheet.tsx @@ -1,4 +1,5 @@ import Slide, { SlideProps } from '@mui/material/Slide'; +import { readableTextColor, useTheme } from '../../theme'; import React, { useId } from 'react'; import { Box } from '../../base/Box'; import { Dialog } from '../../base/Dialog'; @@ -38,6 +39,25 @@ const BottomSheet = ({ headerTextColor }: BottomSheetProps) => { const titleId = useId(); + const theme = useTheme(); + + const tint = theme.palette.surface?.tint; + const finalHeaderBackgroundColor = + headerBackgroundColor || tint || theme.palette.background.default; + + const defaultForeground = headerBackgroundColor + ? readableTextColor( + headerBackgroundColor, + theme.palette.text.inverse, + theme.palette.text.default + ) + : tint + ? // surface.tint is a dark gradient in both palettes, so always light ink + // (matches Modal / UniversalFilter tinted headers). + theme.palette.common.white + : theme.palette.text.default; + + const finalHeaderTextColor = headerTextColor ?? defaultForeground; return ( ({ + sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '1rem', textAlign: 'center', - background: headerBackgroundColor || theme.palette.surface.tint, - color: headerTextColor || theme.palette.text.primary - })} + background: finalHeaderBackgroundColor, + color: finalHeaderTextColor + }} > ({ + sx={{ '& svg': { - fill: headerTextColor || theme.palette.text.primary + fill: finalHeaderTextColor }, transform: 'rotate(-90deg)', '&:hover': { @@ -101,7 +121,7 @@ const BottomSheet = ({ transition: 'all 0.3s ease-in', cursor: 'pointer' } - })} + }} > diff --git a/src/custom/DashboardLayout/DashboardLayout.tsx b/src/custom/DashboardLayout/DashboardLayout.tsx index acf80415f..ba19afb68 100644 --- a/src/custom/DashboardLayout/DashboardLayout.tsx +++ b/src/custom/DashboardLayout/DashboardLayout.tsx @@ -25,8 +25,14 @@ export interface DashboardLayoutProps { /** Optional sticky top offset for the sidebar (useful if page has a top navbar) */ sidebarTopOffset?: string | number; - /** Optional fixed height for the sticky sidebar. Defaults to 100vh */ + /** Optional fixed height for the sticky sidebar. Defaults to 100dvh */ sidebarHeight?: string | number; + + /** Background color for the mobile bottom sheet header */ + headerBackgroundColor?: string; + + /** Text color for the mobile bottom sheet header */ + headerTextColor?: string; } export const DashboardLayout: React.FC = ({ @@ -36,7 +42,9 @@ export const DashboardLayout: React.FC = ({ sidebarTitle = 'Widget Picker', sidebarWidth = { xs: '100%', md: '350px' }, sidebarTopOffset = '0', - sidebarHeight = '100vh' + sidebarHeight = '100dvh', + headerBackgroundColor, + headerTextColor }) => { const theme = useTheme(); // We use the 'md' breakpoint (900px default) to switch between mobile and desktop layout @@ -76,6 +84,8 @@ export const DashboardLayout: React.FC = ({ onClose={() => setIsSheetVisible(false)} title={sidebarTitle} maxHeight="50vh" + headerBackgroundColor={headerBackgroundColor} + headerTextColor={headerTextColor} > {sidebarContent} diff --git a/src/custom/Workspaces/WorkspaceEnvironmentSelection.tsx b/src/custom/Workspaces/WorkspaceEnvironmentSelection.tsx index 5403cf7c5..0c36c3cba 100644 --- a/src/custom/Workspaces/WorkspaceEnvironmentSelection.tsx +++ b/src/custom/Workspaces/WorkspaceEnvironmentSelection.tsx @@ -164,7 +164,6 @@ const WorkspaceEnvironmentSelection: FunctionComponent } - popupIcon={null} disabled={!isAssignedEnvironmentAllowed} /> diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 855448bb6..e885e9abd 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1 +1,2 @@ export * from './useRoomActivity'; +export * from './useAccessibleOrgs'; diff --git a/src/custom/useAccessibleOrgs.ts b/src/hooks/useAccessibleOrgs.ts similarity index 99% rename from src/custom/useAccessibleOrgs.ts rename to src/hooks/useAccessibleOrgs.ts index 60bcbf701..944f7a27a 100644 --- a/src/custom/useAccessibleOrgs.ts +++ b/src/hooks/useAccessibleOrgs.ts @@ -1,6 +1,6 @@ import { Key } from '@meshery/schemas/permissions'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { getPermissionKeys, isPermissionKeySet, PermissionKeySpec } from './PermissionProvider'; +import { getPermissionKeys, isPermissionKeySet, PermissionKeySpec } from '../custom/PermissionProvider'; /** * For a given set of user keys (as returned by `getUserKeys`), check whether diff --git a/src/index.tsx b/src/index.tsx index 33a25a51f..24a87e1a1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -101,7 +101,7 @@ export { useAccessibleOrgs, type UseAccessibleOrgsOptions, type TriggerGetKeys -} from './custom/useAccessibleOrgs'; +} from './hooks/useAccessibleOrgs'; export { WidgetPicker, From a7cadc8d5052065a32e8eceaff0b1e1dbb86e627 Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sat, 26 Sep 2026 13:39:46 +0530 Subject: [PATCH 7/9] refactor(FormHelperText): resolve ESLint and TypeScript warnings for polymorphic component Signed-off-by: Abhinav Deval --- src/base/FormHelperText/FormHelperText.tsx | 25 +++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx index 9f7626c75..827c948d6 100644 --- a/src/base/FormHelperText/FormHelperText.tsx +++ b/src/base/FormHelperText/FormHelperText.tsx @@ -7,18 +7,23 @@ import React from 'react'; export type SistentFormHelperTextProps< D extends React.ElementType = FormHelperTextTypeMap['defaultComponent'], - P = {} + P extends object = object > = MuiFormHelperTextProps; -export const FormHelperText: OverridableComponent = React.forwardRef( - ({ children, ...props }: SistentFormHelperTextProps, ref: React.Ref) => { - return ( - - {children} - - ); - } -) as OverridableComponent; +type FormHelperTextComponent = OverridableComponent & { + displayName?: string; +}; + +export const FormHelperText: FormHelperTextComponent = React.forwardRef< + HTMLParagraphElement, + SistentFormHelperTextProps +>(({ children, ...props }, ref) => { + return ( + + {children} + + ); +}) as FormHelperTextComponent; FormHelperText.displayName = 'FormHelperText'; From 66b92bd2d48a9800f2ed68b082f7d4c9a93f860a Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sun, 27 Sep 2026 15:54:19 +0530 Subject: [PATCH 8/9] refactor(FormHelperText): align polymorphic ref typing and add custom component ref test Signed-off-by: Abhinav Deval --- .../FormHelperText/FormHelperText.test.tsx | 11 +++++++++++ src/base/FormHelperText/FormHelperText.tsx | 19 +++++++++---------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/base/FormHelperText/FormHelperText.test.tsx b/src/base/FormHelperText/FormHelperText.test.tsx index 9279980f2..f1d6de857 100644 --- a/src/base/FormHelperText/FormHelperText.test.tsx +++ b/src/base/FormHelperText/FormHelperText.test.tsx @@ -23,6 +23,17 @@ describe('FormHelperText Component', () => { expect(element).toBeInTheDocument(); }); + it('forwards ref correctly when rendered with a custom component', () => { + const ref = React.createRef(); + render( + + Span Helper Text + + ); + expect(ref.current).toBeInstanceOf(HTMLSpanElement); + expect(ref.current?.tagName).toBe('SPAN'); + }); + it('applies custom className and props', () => { render( diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx index 827c948d6..f614270c0 100644 --- a/src/base/FormHelperText/FormHelperText.tsx +++ b/src/base/FormHelperText/FormHelperText.tsx @@ -14,16 +14,15 @@ type FormHelperTextComponent = OverridableComponent & { displayName?: string; }; -export const FormHelperText: FormHelperTextComponent = React.forwardRef< - HTMLParagraphElement, - SistentFormHelperTextProps ->(({ children, ...props }, ref) => { - return ( - - {children} - - ); -}) as FormHelperTextComponent; +export const FormHelperText: FormHelperTextComponent = React.forwardRef( + ({ children, ...props }: SistentFormHelperTextProps, ref: React.Ref) => { + return ( + + {children} + + ); + } +) as FormHelperTextComponent; FormHelperText.displayName = 'FormHelperText'; From 9bbb4e043f358d851e8e21183f3271e942981cad Mon Sep 17 00:00:00 2001 From: Abhinav Deval Date: Sun, 27 Sep 2026 16:06:23 +0530 Subject: [PATCH 9/9] refactor(FormHelperText): use HTMLElement ref type to satisfy linter and preserve polymorphism Signed-off-by: Abhinav Deval --- src/base/FormHelperText/FormHelperText.test.tsx | 9 ++++----- src/base/FormHelperText/FormHelperText.tsx | 4 ++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/base/FormHelperText/FormHelperText.test.tsx b/src/base/FormHelperText/FormHelperText.test.tsx index f1d6de857..e7b6c4d12 100644 --- a/src/base/FormHelperText/FormHelperText.test.tsx +++ b/src/base/FormHelperText/FormHelperText.test.tsx @@ -1,4 +1,3 @@ -import '@testing-library/jest-dom'; import { render, screen } from '@testing-library/react'; import React from 'react'; import FormHelperText from './FormHelperText'; @@ -6,7 +5,7 @@ import FormHelperText from './FormHelperText'; describe('FormHelperText Component', () => { it('renders children correctly', () => { render(Sample Helper Text); - expect(screen.getByText('Sample Helper Text')).toBeInTheDocument(); + expect(screen.getByText('Sample Helper Text')).toBeTruthy(); }); it('forwards ref correctly to the underlying HTML element', () => { @@ -20,7 +19,7 @@ describe('FormHelperText Component', () => { render(Span Helper Text); const element = screen.getByText('Span Helper Text'); expect(element.tagName).toBe('SPAN'); - expect(element).toBeInTheDocument(); + expect(element).toBeTruthy(); }); it('forwards ref correctly when rendered with a custom component', () => { @@ -41,7 +40,7 @@ describe('FormHelperText Component', () => { ); const element = screen.getByTestId('custom-helper'); - expect(element).toHaveClass('custom-class'); - expect(element).toHaveClass('Mui-error'); + expect(element.className).toContain('custom-class'); + expect(element.className).toContain('Mui-error'); }); }); diff --git a/src/base/FormHelperText/FormHelperText.tsx b/src/base/FormHelperText/FormHelperText.tsx index f614270c0..c9dded441 100644 --- a/src/base/FormHelperText/FormHelperText.tsx +++ b/src/base/FormHelperText/FormHelperText.tsx @@ -15,9 +15,9 @@ type FormHelperTextComponent = OverridableComponent & { }; export const FormHelperText: FormHelperTextComponent = React.forwardRef( - ({ children, ...props }: SistentFormHelperTextProps, ref: React.Ref) => { + ({ children, ...props }: SistentFormHelperTextProps, ref: React.Ref) => { return ( - + } {...props}> {children} );