@react-ui-org/react-ui 0.60.0 → 0.62.0

package/jest.config-ts.js

@@ -0,0 +1,34 @@
+
+ module.exports = {
+  extensionsToTreatAsEsm: [
+    '.ts',
+    '.tsx',
+  ],
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'ts',
+    'tsx',
+  ],
+  moduleNameMapper: {
+    '\\.scss$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/tests/jest/mocks/svgrMock.jsx',
+  },
+  preset: 'ts-jest',
+  setupFiles: [
+    '<rootDir>/tests/jest/setupJest.js',
+  ],
+  setupFilesAfterEnv: [
+  ],
+  testEnvironment: '@happy-dom/jest-environment',
+  testMatch: [
+    '**/*.test.{ts,tsx}',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      { useESM: true },
+    ],
+  },
+  verbose: true,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "keywords": [
     "react",
     "ui",
@@ -29,12 +29,12 @@
     "url": "https://github.com/react-ui-org/react-ui"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "22.x",
+      "version": "22.x || 24.x",
       "onFail": "error"
     },
     "packageManager": {
@@ -47,17 +47,24 @@
     "copy": "npm run copy:css && npm run copy:js",
     "copy:css": "cp src/docs/_assets/generated/react-ui.css dist && cp src/docs/_assets/generated/react-ui.development.css dist",
     "copy:js": "cp src/docs/_assets/generated/react-ui.js dist && cp src/docs/_assets/generated/react-ui.development.js dist",
-    "eslint": "eslint --ext js,jsx src",
-    "jest": "jest src --coverage",
+    "eslint": "npm run eslint:ts && npm run eslint:js",
+    "eslint:js": "eslint --ext js,jsx src",
+    "eslint:ts": "eslint --ext ts,tsx -c .eslintrc-ts src tests",
     "lint": "npm run eslint && npm run markdownlint && npm run stylelint",
-    "markdownlint": "markdownlint-cli2 \"CONTRIBUTING.md\" \"README.md\" \"RELEASING.md\" \"src/**/*.md\"",
+    "markdownlint": "markdownlint-cli2 \"README.md\" \"src/**/*.md\"",
     "postbuild": "npm run copy",
-    "postinstall": "cp -n .env.dist .env || true",
+    "postinstall": "cp -n .env.dist .env && cp -n .env.playwright.dist .env.playwright || true",
     "precopy": "rm -rf dist && mkdir dist",
     "prepublishOnly": "npm run build",
     "start": "webpack --watch --mode=development",
     "stylelint": "stylelint \"src/**/*.{css,scss}\" \"!src/docs/_assets/generated/**\" --config stylelint.config.js",
-    "test": "npm run jest"
+    "test": "npm run test:jest",
+    "test:jest": "npm run test:jest:ts && npm run test:jest:js",
+    "test:jest:js": "jest --coverage",
+    "test:jest:ts": "jest -c jest.config-ts.js --coverage",
+    "test:playwright-ct:all": "playwright test -c playwright-ct.config.ts",
+    "test:playwright-ct:all-with-update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+    "test:playwright-ct:show-report": "playwright show-report --host=0.0.0.0 --port=9323"
   },
   "dependencies": {
     "normalize.css": "^8.0.1"
@@ -68,53 +75,62 @@
     "react-dom": "~18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/eslint-parser": "^7.28.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-spread": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/register": "^7.24.6",
-    "@happy-dom/jest-environment": "^16.6.0",
+    "@babel/plugin-transform-spread": "^7.27.1",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/register": "^7.28.3",
+    "@happy-dom/jest-environment": "^20.0.11",
+    "@playwright/experimental-ct-react": "^1.57.0",
     "@stylistic/stylelint-config": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.19.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
     "@visionappscz/stylelint-config": "^4.0.0",
-    "autoprefixer": "^10.4.19",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.3",
-    "core-js": "^3.37.1",
+    "autoprefixer": "^10.4.22",
+    "babel-jest": "^30.2.0",
+    "babel-loader": "^10.0.0",
+    "core-js": "^3.47.0",
     "css-loader": "^7.1.2",
+    "dotenv": "^17.2.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-typescript-sort-keys": "^3.3.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "markdownlint-cli2": "^0.13.0",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.39",
-    "postcss-loader": "^8.1.1",
+    "jest": "^30.2.0",
+    "markdownlint-cli2": "^0.19.1",
+    "mini-css-extract-plugin": "^2.9.4",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
     "prop-types": "^15.8.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "sass": "^1.77.6",
-    "sass-loader": "^14.2.1",
+    "sass": "^1.94.2",
+    "sass-loader": "^16.0.6",
     "stylelint": "^16.7.0",
     "stylelint-webpack-plugin": "^5.0.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-visualizer-plugin2": "^1.1.0"
-  },
-  "resolutions": {
-    "@babel/plugin-transform-spread": "7.24.7"
+    "terser-webpack-plugin": "^5.3.15",
+    "ts-jest": "^29.4.6",
+    "webpack": "^5.103.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-visualizer-plugin2": "^2.0.0"
   }
 }

package/playwright-ct.config.ts

@@ -0,0 +1,68 @@
+import {
+  defineConfig,
+  devices,
+} from '@playwright/experimental-ct-react';
+import { parseEnvironment } from './tests/playwright/env/parseEnvironment';
+
+const environment = parseEnvironment();
+
+const isCI = !!process.env.CI;
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  // Fail the build on CI if you accidentally left test.only in the source code
+  forbidOnly: isCI,
+  // Run tests in files in parallel
+  fullyParallel: true,
+  // Directory where the output generated by Playwright is stored
+  outputDir: './tests/playwright/.temp/playwright-ct-output/',
+  // Run tests for following projects
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  // Retry failed tests once to eliminate flakiness
+  retries: 1,
+  // Directory where the snapshots are located
+  // (must be same as testDir to save snapshots in place where tests are located)
+  snapshotDir: './src/',
+  // Directory where the tests are located
+  testDir: './src/',
+  // Pattern to search for test files
+  testMatch: '*/*.spec.{ts,tsx}',
+  // Timeout for each test
+  timeout: 10 * 1000,
+  // Do not update snapshots automatically
+  updateSnapshots: 'none',
+  // Configuration for Playwright component testing
+  use: {
+    // Directory where the cache is stored
+    ctCacheDir: './tests/playwright/.temp/playwright-ct-cache',
+    // Port to use for Playwright component endpoint
+    ctPort: environment.CT_PORT,
+    // Directory where the templates are stored
+    ctTemplateDir: './tests/playwright/templates',
+    // Launch options for Playwright
+    launchOptions: {
+      args: [
+        '--use-gl=egl',
+        // # Must be set to `new` to enable new version of Chromium Headless to obtain correct snapshots
+        '--headless=new',
+      ],
+      ignoreDefaultArgs: [
+        // # Must be ignored to enable new version of Chromium Headless to obtain correct snapshots
+        '--headless',
+      ],
+    },
+    // Collect trace on all retries
+    trace: 'on-all-retries',
+  },
+  // Number of workers to use
+  workers: environment.WORKERS,
+});

package/src/components/Alert/Alert.jsx

@@ -57,9 +57,9 @@ export const Alert = ({
 
 Alert.defaultProps = {
   color: 'note',
-  icon: null,
+  icon: undefined,
   id: undefined,
-  onClose: null,
+  onClose: undefined,
 };
 
 Alert.propTypes = {

package/src/components/Button/Button.jsx

@@ -101,18 +101,18 @@ export const Button = React.forwardRef((props, ref) => {
 });
 
 Button.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
+  afterLabel: undefined,
+  beforeLabel: undefined,
   block: false,
   color: 'primary',
   disabled: false,
-  endCorner: null,
-  feedbackIcon: null,
+  endCorner: undefined,
+  feedbackIcon: undefined,
   id: undefined,
   labelVisibility: 'xs',
   priority: 'filled',
   size: 'medium',
-  startCorner: null,
+  startCorner: undefined,
   type: 'button',
 };
 

package/src/components/Button/README.md

@@ -28,7 +28,7 @@ See [API](#api) for all available options.
 - **Don't overwhelm your UI** with too many high-emphasis actions. There should
     always be one but chances are that having more of them is not necessary.
 
-- Ensure the **button action is well recognazible** across your target audience.
+- Ensure the **button action is well recognizable** across your target audience.
     This is especially important when using the button [with an icon only](#icon-buttons).
 
 ## Priorities

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -48,7 +48,7 @@ export const ButtonGroup = ({
 
 ButtonGroup.defaultProps = {
   block: false,
-  children: null,
+  children: undefined,
   disabled: false,
   priority: 'filled',
   size: 'medium',

package/src/components/Card/CardFooter.jsx

@@ -24,7 +24,7 @@ export const CardFooter = ({
 };
 
 CardFooter.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 CardFooter.propTypes = {

package/src/components/CheckboxField/CheckboxField.jsx

@@ -79,14 +79,14 @@ export const CheckboxField = React.forwardRef((props, ref) => {
 
 CheckboxField.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 CheckboxField.propTypes = {

package/src/components/FileInputField/FileInputField.jsx

@@ -78,6 +78,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
   const handleFileChange = (files, event) => {
     if (files.length === 0) {
       setSelectedFileNames([]);
+      onFilesChanged([], event);
       return;
     }
 
@@ -85,6 +86,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
     // does not accept multiple files, no files are processed.
     if (files.length > 1 && !multiple) {
       setSelectedFileNames([]);
+      onFilesChanged([], event);
       return;
     }
 
@@ -221,7 +223,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
             </Text>
           </button>
         </div>
-        {helpText && (
+        {(helpText && !inputGroupContext) && (
           <div
             className={styles.helpText}
             id={`${id}__helpText`}
@@ -229,7 +231,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={`${id}__validationText`}
@@ -245,14 +247,14 @@ export const FileInputField = React.forwardRef((props, ref) => {
 FileInputField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   multiple: false,
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 FileInputField.propTypes = {
@@ -266,6 +268,9 @@ FileInputField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
    */
   helpText: PropTypes.node,
   /**
@@ -319,6 +324,9 @@ FileInputField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`.
+   * If a validation text is needed, it must be defined on the `InputGroup` component instead.
    */
   validationText: PropTypes.node,
 };

package/src/components/FormLayout/FormLayout.jsx

@@ -68,7 +68,7 @@ export const FormLayout = ({
 
 FormLayout.defaultProps = {
   autoWidth: false,
-  children: null,
+  children: undefined,
   fieldLayout: 'vertical',
   labelWidth: 'default',
 };

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -80,15 +80,15 @@ export const FormLayoutCustomField = ({
 };
 
 FormLayoutCustomField.defaultProps = {
-  children: null,
+  children: undefined,
   disabled: false,
   fullWidth: false,
   id: undefined,
-  innerFieldSize: null,
-  label: null,
+  innerFieldSize: undefined,
+  label: undefined,
   labelForId: undefined,
   required: false,
-  validationState: null,
+  validationState: undefined,
 };
 
 FormLayoutCustomField.propTypes = {

package/src/components/FormLayout/README.md

@@ -441,22 +441,22 @@ A place for custom content inside FormLayout.
 
 ## Theming
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-FormLayout__row-gap`                          | Gap between individual rows                                  |
-| `--rui-FormLayout--horizontal__label__width`         | Default label width                                          |
-| `--rui-FormLayout--horizontal__label__width--auto`   | Label width in automatic layout                              |
-| `--rui-FormLayout--horizontal__label__width--limited` | Label width in limited-width layout                         |
+| Custom Property                                        | Description                         |
+|--------------------------------------------------------|-------------------------------------|
+| `--rui-FormLayout__row-gap`                            | Gap between individual rows         |
+| `--rui-FormLayout--horizontal__label__width`           | Default label width                 |
+| `--rui-FormLayout--horizontal__label__width--auto`     | Label width in automatic layout     |
+| `--rui-FormLayout--horizontal__label__width--limited`  | Label width in limited-width layout |
 
 ### FormLayoutCustomField Theming
 
 FormLayoutCustomField can be styled using a small subset of
 [other form fields theming options](/docs/customize/theming/forms).
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-FormField--custom--default__surrounding-text-color` | Custom field label color in default state              |
-| `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state       |
+| Custom Property                                             | Description                                      |
+|-------------------------------------------------------------|--------------------------------------------------|
+| `--rui-FormField--custom--default__surrounding-text-color`  | Custom field label color in default state        |
+| `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state  |
 
 [div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [fragments]: https://reactjs.org/docs/fragments.html

package/src/components/Grid/Grid.jsx

@@ -54,7 +54,7 @@ Grid.defaultProps = {
   alignContent: undefined,
   alignItems: undefined,
   autoFlow: undefined,
-  children: null,
+  children: undefined,
   columnGap: 4,
   columns: '1fr',
   justifyContent: undefined,

package/src/components/Grid/GridSpan.jsx

@@ -35,7 +35,7 @@ export const GridSpan = ({
 /* eslint-disable sort-keys */
 
 GridSpan.defaultProps = {
-  children: null,
+  children: undefined,
   columns: 1,
   rows: 1,
   tag: 'div',

package/src/components/InputGroup/InputGroup.jsx

@@ -18,6 +18,7 @@ import styles from './InputGroup.module.scss';
 export const InputGroup = ({
   children,
   disabled,
+  helpTexts,
   id,
   isLabelVisible,
   label,
@@ -89,7 +90,21 @@ export const InputGroup = ({
             {children}
           </InputGroupContext.Provider>
         </div>
-        {validationTexts && (
+        {helpTexts && helpTexts.length > 0 && (
+          <ul
+            className={styles.helpText}
+            id={id && `${id}__helpTexts`}
+          >
+            {helpTexts.map((helpText) => (
+              <li key={helpText}>
+                <Text blockLevel>
+                  {helpText}
+                </Text>
+              </li>
+            ))}
+          </ul>
+        )}
+        {validationTexts && validationTexts.length > 0 && (
           <ul
             className={styles.validationText}
             id={id && `${id}__validationTexts`}
@@ -109,14 +124,15 @@ export const InputGroup = ({
 };
 
 InputGroup.defaultProps = {
-  children: null,
+  children: undefined,
   disabled: false,
+  helpTexts: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
-  validationTexts: null,
+  validationTexts: undefined,
 };
 
 InputGroup.propTypes = {
@@ -133,6 +149,10 @@ InputGroup.propTypes = {
    * If `true`, the whole input group with all nested inputs and buttons will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * An array of help texts to be displayed.
+   */
+  helpTexts: PropTypes.arrayOf(PropTypes.node),
   /**
    * ID of the root HTML element.
    *
@@ -171,7 +191,7 @@ InputGroup.propTypes = {
   /**
    * An array of validation messages to be displayed.
    */
-  validationTexts: PropTypes.node,
+  validationTexts: PropTypes.arrayOf(PropTypes.node),
 };
 
 export const InputGroupWithGlobalProps = withGlobalProps(InputGroup, 'InputGroup');

package/src/components/InputGroup/InputGroup.module.scss

@@ -1,4 +1,4 @@
-// 1. The class name is intentionally singular because it's targeted by other mixins too.
+// 1. The class names are intentionally singular because they are also targeted by other mixins.
 // 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
 // 3. Let wide input groups honor the minimum input width and overflow horizontally without wrapping and distorting
 //    the inputs.
@@ -39,6 +39,7 @@
     }
 
     // 1.
+    .helpText,
     .validationText {
         @include reset.list();
         @include foundation.help-text();