diff --git a/.changeset/brown-humans-crash.md b/.changeset/brown-humans-crash.md new file mode 100644 index 00000000..fcfcfdea --- /dev/null +++ b/.changeset/brown-humans-crash.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fix RadioGroup style typings. diff --git a/.changeset/fast-lizards-raise.md b/.changeset/fast-lizards-raise.md new file mode 100644 index 00000000..530bed33 --- /dev/null +++ b/.changeset/fast-lizards-raise.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Remove CJS support. diff --git a/.changeset/giant-monkeys-sing.md b/.changeset/giant-monkeys-sing.md new file mode 100644 index 00000000..c1730b7f --- /dev/null +++ b/.changeset/giant-monkeys-sing.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +When a dialog is opened focus on the first input with autofocus or primary button. diff --git a/.changeset/nice-ducks-kiss.md b/.changeset/nice-ducks-kiss.md new file mode 100644 index 00000000..d532d56e --- /dev/null +++ b/.changeset/nice-ducks-kiss.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fixes the bug when ComboBox is cleared when bluring the input without making any change. diff --git a/.changeset/proud-colts-cheer.md b/.changeset/proud-colts-cheer.md new file mode 100644 index 00000000..1f2d0fd4 --- /dev/null +++ b/.changeset/proud-colts-cheer.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Fixes various issues with ComboBox input typing and selection. diff --git a/.changeset/sweet-books-hope.md b/.changeset/sweet-books-hope.md new file mode 100644 index 00000000..36a041db --- /dev/null +++ b/.changeset/sweet-books-hope.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': minor +--- + +Remove inputValue abstraction from form fields. diff --git a/.storybook/main.js b/.storybook/main.js index 352eedfc..4ca90700 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,5 @@ // @ts-check +import remarkGfm from 'remark-gfm'; /** @type {import('@storybook/core-common').StorybookConfig} */ const config = { @@ -18,7 +19,7 @@ const config = { modernInlineRender: true, }, - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ['../src/**/*.docs.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', @@ -32,6 +33,16 @@ const config = { }, }, }, + { + name: '@storybook/addon-docs', + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [remarkGfm], + }, + }, + }, + }, ], docs: { diff --git a/package.json b/package.json index 511b7f17..6129234c 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,12 @@ "version": "0.57.0", "description": "UIKit for Cube Projects", "module": "dist/es/index.js", - "main": "dist/cjs/index.js", "types": "dist/types/index.d.ts", "sideEffects": false, "packageManager": "pnpm@9.12.2", "exports": { ".": { "import": "./dist/es/index.js", - "require": "./dist/cjs/index.js", "types": "./dist/types/index.d.ts" } }, @@ -23,7 +21,6 @@ "start": "pnpm storybook", "build": "npm-run-all clear:dist -p build:* && node ./scripts/copy-files.js && node scripts/add-banner.js && node scripts/replace-version.js", "build:esm": "tsc -p tsconfig.es.json", - "build:cjs": "tsc -p tsconfig.cjs.json", "watch": "pnpm build:esm --watch", "test": "jest", "test-cover": "jest --coverage", @@ -82,6 +79,7 @@ "react-stately": "^3.35.0", "react-transition-group": "^4.4.5", "react-types": "^0.1.0", + "remark-gfm": "^4.0.1", "tiny-invariant": "^1.3.3", "usehooks-ts": "^3.1.0", "valid-url": "^1.0.9" @@ -117,7 +115,7 @@ "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "14.2.0", "@types/jest": "^29.5.12", - "@types/node": "^18.19.26", + "@types/node": "^18.19.86", "@types/react": "^18.2.70", "@types/react-dom": "^18.2.22", "@types/react-is": "^18.2.4", @@ -172,7 +170,7 @@ ], "license": "MIT", "engines": { - "node": ">=18.0.0", + "node": ">=18.19.1", "pnpm": "^9.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c6561797..effcdcc4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,7 +48,7 @@ importers: version: 3.27.0(react@18.2.0) '@vitejs/plugin-react': specifier: ^4.3.2 - version: 4.3.2(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1)) + version: 4.3.2(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1)) clipboard-copy: specifier: ^4.0.1 version: 4.0.1 @@ -85,6 +85,9 @@ importers: react-types: specifier: ^0.1.0 version: 0.1.0 + remark-gfm: + specifier: ^4.0.1 + version: 4.0.1 tiny-invariant: specifier: ^1.3.3 version: 1.3.3 @@ -142,7 +145,7 @@ importers: version: 8.0.4(@types/react@18.2.70)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/addon-interactions': specifier: ^8.0.4 - version: 8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))) + version: 8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))) '@storybook/addon-links': specifier: ^8.0.4 version: 8.0.4(react@18.2.0) @@ -157,10 +160,10 @@ importers: version: 8.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.6.3) '@storybook/react-vite': specifier: ^8.0.4 - version: 8.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@4.24.4)(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1)) + version: 8.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@4.24.4)(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1)) '@storybook/test': specifier: ^8.0.4 - version: 8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))) + version: 8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))) '@swc/core': specifier: ^1.3.36 version: 1.3.36 @@ -172,7 +175,7 @@ importers: version: 9.3.4 '@testing-library/jest-dom': specifier: ^6.4.2 - version: 6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))) + version: 6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))) '@testing-library/react': specifier: ^14.2.2 version: 14.2.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -186,8 +189,8 @@ importers: specifier: ^29.5.12 version: 29.5.12 '@types/node': - specifier: ^18.19.26 - version: 18.19.26 + specifier: ^18.19.86 + version: 18.19.86 '@types/react': specifier: ^18.2.70 version: 18.2.70 @@ -232,7 +235,7 @@ importers: version: 9.1.0(eslint@8.57.0) eslint-config-react-app: specifier: ^7.0.1 - version: 7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.25.8))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.25.8))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))(typescript@5.6.3) + version: 7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.25.8))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.25.8))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))(typescript@5.6.3) eslint-plugin-import: specifier: ^2.29.1 version: 2.29.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0) @@ -253,7 +256,7 @@ importers: version: 6.0.0 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + version: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 @@ -310,7 +313,7 @@ importers: version: 5.6.3 vite: specifier: ^5.4.10 - version: 5.4.10(@types/node@18.19.26)(terser@5.31.1) + version: 5.4.10(@types/node@18.19.86)(terser@5.31.1) publishDirectory: dist packages: @@ -3296,8 +3299,8 @@ packages: '@types/node@12.20.55': resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==} - '@types/node@18.19.26': - resolution: {integrity: sha512-+wiMJsIwLOYCvUqSdKTrfkS8mpTp+MPINe6+Np4TAGFWWRWiBQ5kSq9nZGCSPkzx9mvT+uEukzpX4MOSCydcvw==} + '@types/node@18.19.86': + resolution: {integrity: sha512-fifKayi175wLyKyc5qUfyENhQ1dCNI1UNjp653d8kuYcPQN5JhX3dGuP/XmvPTg/xRBn1VTLpbmi+H/Mr7tLfQ==} '@types/normalize-package-data@2.4.1': resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -6887,8 +6890,8 @@ packages: rehype-slug@6.0.0: resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==} - remark-gfm@4.0.0: - resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==} + remark-gfm@4.0.1: + resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} @@ -9274,15 +9277,15 @@ snapshots: '@commitlint/execute-rule': 17.4.0 '@commitlint/resolve-extends': 17.4.4 '@commitlint/types': 17.4.4 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 cosmiconfig: 8.1.3 - cosmiconfig-typescript-loader: 4.3.0(@types/node@18.19.26)(cosmiconfig@8.1.3)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))(typescript@5.6.3) + cosmiconfig-typescript-loader: 4.3.0(@types/node@18.19.86)(cosmiconfig@8.1.3)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))(typescript@5.6.3) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 resolve-from: 5.0.0 - ts-node: 10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3) + ts-node: 10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3) typescript: 5.6.3 transitivePeerDependencies: - '@swc/core' @@ -9661,27 +9664,27 @@ snapshots: '@jest/console@29.7.0': dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 jest-message-util: 29.7.0 jest-util: 29.7.0 slash: 3.0.0 - '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))': + '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.8.0 exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + jest-config: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -9710,7 +9713,7 @@ snapshots: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 jest-mock: 29.7.0 '@jest/expect-utils@29.7.0': @@ -9728,7 +9731,7 @@ snapshots: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.2.0 - '@types/node': 18.19.26 + '@types/node': 18.19.86 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -9750,7 +9753,7 @@ snapshots: '@jest/transform': 29.7.0 '@jest/types': 29.6.3 '@jridgewell/trace-mapping': 0.3.25 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 collect-v8-coverage: 1.0.1 exit: 0.1.2 @@ -9820,17 +9823,17 @@ snapshots: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.4 '@types/istanbul-reports': 3.0.1 - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/yargs': 17.0.24 chalk: 4.1.2 - '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1))': + '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1))': dependencies: glob: 7.2.3 glob-promise: 4.2.2(glob@7.2.3) magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.6.3) - vite: 5.4.10(@types/node@18.19.26)(terser@5.31.1) + vite: 5.4.10(@types/node@18.19.86)(terser@5.31.1) optionalDependencies: typescript: 5.6.3 @@ -11302,11 +11305,11 @@ snapshots: dependencies: '@storybook/global': 5.0.0 - '@storybook/addon-interactions@8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))': + '@storybook/addon-interactions@8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))': dependencies: '@storybook/global': 5.0.0 '@storybook/instrumenter': 8.0.4 - '@storybook/test': 8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))) + '@storybook/test': 8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))) '@storybook/types': 8.0.4 polished: 4.2.2 ts-dedent: 2.2.0 @@ -11328,7 +11331,7 @@ snapshots: '@storybook/addon-mdx-gfm@8.0.4': dependencies: '@storybook/node-logger': 8.0.4 - remark-gfm: 4.0.0 + remark-gfm: 4.0.1 ts-dedent: 2.2.0 transitivePeerDependencies: - supports-color @@ -11403,7 +11406,7 @@ snapshots: - encoding - supports-color - '@storybook/builder-vite@8.0.4(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1))': + '@storybook/builder-vite@8.0.4(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1))': dependencies: '@storybook/channels': 8.0.4 '@storybook/client-logger': 8.0.4 @@ -11422,7 +11425,7 @@ snapshots: fs-extra: 11.1.1 magic-string: 0.30.8 ts-dedent: 2.2.0 - vite: 5.4.10(@types/node@18.19.26)(terser@5.31.1) + vite: 5.4.10(@types/node@18.19.86)(terser@5.31.1) optionalDependencies: typescript: 5.6.3 transitivePeerDependencies: @@ -11582,7 +11585,7 @@ snapshots: '@storybook/telemetry': 8.0.4 '@storybook/types': 8.0.4 '@types/detect-port': 1.3.2 - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/pretty-hrtime': 1.0.1 '@types/semver': 7.5.0 better-opn: 3.0.2 @@ -11725,11 +11728,11 @@ snapshots: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - '@storybook/react-vite@8.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@4.24.4)(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1))': + '@storybook/react-vite@8.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@4.24.4)(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1))': dependencies: - '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1)) + '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1)) '@rollup/pluginutils': 5.1.0(rollup@4.24.4) - '@storybook/builder-vite': 8.0.4(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1)) + '@storybook/builder-vite': 8.0.4(typescript@5.6.3)(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1)) '@storybook/node-logger': 8.0.4 '@storybook/react': 8.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.6.3) find-up: 5.0.0 @@ -11739,7 +11742,7 @@ snapshots: react-dom: 18.2.0(react@18.2.0) resolve: 1.22.8 tsconfig-paths: 4.2.0 - vite: 5.4.10(@types/node@18.19.26)(terser@5.31.1) + vite: 5.4.10(@types/node@18.19.86)(terser@5.31.1) transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -11758,7 +11761,7 @@ snapshots: '@storybook/types': 8.0.4 '@types/escodegen': 0.0.6 '@types/estree': 0.0.51 - '@types/node': 18.19.26 + '@types/node': 18.19.86 acorn: 7.4.1 acorn-jsx: 5.3.2(acorn@7.4.1) acorn-walk: 7.2.0 @@ -11799,14 +11802,14 @@ snapshots: - encoding - supports-color - '@storybook/test@8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))': + '@storybook/test@8.0.4(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))': dependencies: '@storybook/client-logger': 8.0.4 '@storybook/core-events': 8.0.4 '@storybook/instrumenter': 8.0.4 '@storybook/preview-api': 8.0.4 '@testing-library/dom': 9.3.4 - '@testing-library/jest-dom': 6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))) + '@testing-library/jest-dom': 6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))) '@testing-library/user-event': 14.2.0(@testing-library/dom@9.3.4) '@vitest/expect': 1.3.1 '@vitest/spy': 1.4.0 @@ -11902,7 +11905,7 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/jest-dom@6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))': + '@testing-library/jest-dom@6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))': dependencies: '@adobe/css-tools': 4.3.3 '@babel/runtime': 7.24.1 @@ -11915,7 +11918,7 @@ snapshots: optionalDependencies: '@jest/globals': 29.7.0 '@types/jest': 29.5.12 - jest: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + jest: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) '@testing-library/react-hooks@8.0.1(@types/react@18.2.70)(react-dom@18.2.0(react@18.2.0))(react-test-renderer@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: @@ -11977,15 +11980,15 @@ snapshots: '@types/body-parser@1.19.2': dependencies: '@types/connect': 3.4.35 - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/connect@3.4.35': dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/cross-spawn@6.0.6': dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/debug@4.1.8': dependencies: @@ -12021,7 +12024,7 @@ snapshots: '@types/express-serve-static-core@4.17.35': dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/qs': 6.9.7 '@types/range-parser': 1.2.4 '@types/send': 0.17.1 @@ -12038,11 +12041,11 @@ snapshots: '@types/glob@7.2.0': dependencies: '@types/minimatch': 5.1.2 - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/graceful-fs@4.1.6': dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/hast@3.0.4': dependencies: @@ -12069,7 +12072,7 @@ snapshots: '@types/jsdom@20.0.1': dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/tough-cookie': 4.0.2 parse5: 7.1.2 @@ -12097,7 +12100,7 @@ snapshots: '@types/node@12.20.55': {} - '@types/node@18.19.26': + '@types/node@18.19.86': dependencies: undici-types: 5.26.5 @@ -12148,12 +12151,12 @@ snapshots: '@types/send@0.17.1': dependencies: '@types/mime': 1.3.2 - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/serve-static@1.15.1': dependencies: '@types/mime': 3.0.1 - '@types/node': 18.19.26 + '@types/node': 18.19.86 '@types/stack-utils@2.0.1': {} @@ -12339,14 +12342,14 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-react@4.3.2(vite@5.4.10(@types/node@18.19.26)(terser@5.31.1))': + '@vitejs/plugin-react@4.3.2(vite@5.4.10(@types/node@18.19.86)(terser@5.31.1))': dependencies: '@babel/core': 7.25.8 '@babel/plugin-transform-react-jsx-self': 7.25.7(@babel/core@7.25.8) '@babel/plugin-transform-react-jsx-source': 7.25.7(@babel/core@7.25.8) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.4.10(@types/node@18.19.26)(terser@5.31.1) + vite: 5.4.10(@types/node@18.19.86)(terser@5.31.1) transitivePeerDependencies: - supports-color @@ -13183,11 +13186,11 @@ snapshots: core-util-is@1.0.3: {} - cosmiconfig-typescript-loader@4.3.0(@types/node@18.19.26)(cosmiconfig@8.1.3)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3))(typescript@5.6.3): + cosmiconfig-typescript-loader@4.3.0(@types/node@18.19.86)(cosmiconfig@8.1.3)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3))(typescript@5.6.3): dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 cosmiconfig: 8.1.3 - ts-node: 10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3) + ts-node: 10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3) typescript: 5.6.3 cosmiconfig@6.0.0: @@ -13213,13 +13216,13 @@ snapshots: parse-json: 5.2.0 path-type: 4.0.0 - create-jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)): + create-jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + jest-config: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -13777,7 +13780,7 @@ snapshots: dependencies: eslint: 8.57.0 - eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.25.8))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.25.8))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))(typescript@5.6.3): + eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.25.8))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.25.8))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))(typescript@5.6.3): dependencies: '@babel/core': 7.24.3 '@babel/eslint-parser': 7.22.15(@babel/core@7.24.3)(eslint@8.57.0) @@ -13789,7 +13792,7 @@ snapshots: eslint: 8.57.0 eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.25.8))(@babel/plugin-transform-react-jsx@7.24.7(@babel/core@7.25.8))(eslint@8.57.0) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0) - eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))(typescript@5.6.3) + eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))(typescript@5.6.3) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.34.1(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) @@ -13857,13 +13860,13 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)))(typescript@5.6.3): + eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)))(typescript@5.6.3): dependencies: '@typescript-eslint/experimental-utils': 5.8.1(eslint@8.57.0)(typescript@5.6.3) eslint: 8.57.0 optionalDependencies: '@typescript-eslint/eslint-plugin': 7.3.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) - jest: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + jest: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) transitivePeerDependencies: - supports-color - typescript @@ -14819,7 +14822,7 @@ snapshots: '@jest/expect': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 co: 4.6.0 dedent: 1.5.1(babel-plugin-macros@3.1.0) @@ -14839,16 +14842,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)): + jest-cli@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)): dependencies: - '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + create-jest: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + jest-config: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -14858,7 +14861,7 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)): + jest-config@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)): dependencies: '@babel/core': 7.24.3 '@jest/test-sequencer': 29.7.0 @@ -14883,8 +14886,8 @@ snapshots: slash: 3.0.0 strip-json-comments: 3.1.1 optionalDependencies: - '@types/node': 18.19.26 - ts-node: 10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3) + '@types/node': 18.19.86 + ts-node: 10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -14914,7 +14917,7 @@ snapshots: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 '@types/jsdom': 20.0.1 - '@types/node': 18.19.26 + '@types/node': 18.19.86 jest-mock: 29.7.0 jest-util: 29.7.0 jsdom: 20.0.3 @@ -14928,7 +14931,7 @@ snapshots: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -14938,7 +14941,7 @@ snapshots: dependencies: '@jest/types': 29.6.3 '@types/graceful-fs': 4.1.6 - '@types/node': 18.19.26 + '@types/node': 18.19.86 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -14977,7 +14980,7 @@ snapshots: jest-mock@29.7.0: dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 jest-util: 29.7.0 jest-pnp-resolver@1.2.3(jest-resolve@29.7.0): @@ -15012,7 +15015,7 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.11 @@ -15040,7 +15043,7 @@ snapshots: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 cjs-module-lexer: 1.2.2 collect-v8-coverage: 1.0.1 @@ -15091,7 +15094,7 @@ snapshots: jest-util@29.7.0: dependencies: '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 chalk: 4.1.2 ci-info: 3.8.0 graceful-fs: 4.2.11 @@ -15110,7 +15113,7 @@ snapshots: dependencies: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.26 + '@types/node': 18.19.86 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -15119,23 +15122,23 @@ snapshots: jest-worker@27.5.1: dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 merge-stream: 2.0.0 supports-color: 8.1.1 jest-worker@29.7.0: dependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)): + jest@29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)): dependencies: - '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@18.19.26)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3)) + jest-cli: 29.7.0(@types/node@18.19.86)(babel-plugin-macros@3.1.0)(ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -15805,7 +15808,7 @@ snapshots: micromark@4.0.0: dependencies: '@types/debug': 4.1.8 - debug: 4.3.4 + debug: 4.3.5 decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.0 @@ -16612,7 +16615,7 @@ snapshots: hast-util-to-string: 3.0.0 unist-util-visit: 5.0.0 - remark-gfm@4.0.0: + remark-gfm@4.0.1: dependencies: '@types/mdast': 4.0.3 mdast-util-gfm: 3.0.0 @@ -17258,14 +17261,14 @@ snapshots: ts-dedent@2.2.0: {} - ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.26)(typescript@5.6.3): + ts-node@10.9.1(@swc/core@1.3.36)(@types/node@18.19.86)(typescript@5.6.3): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.9 '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 18.19.26 + '@types/node': 18.19.86 acorn: 8.11.3 acorn-walk: 8.2.0 arg: 4.1.3 @@ -17536,13 +17539,13 @@ snapshots: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - vite@5.4.10(@types/node@18.19.26)(terser@5.31.1): + vite@5.4.10(@types/node@18.19.86)(terser@5.31.1): dependencies: esbuild: 0.21.5 postcss: 8.4.47 rollup: 4.24.4 optionalDependencies: - '@types/node': 18.19.26 + '@types/node': 18.19.86 fsevents: 2.3.3 terser: 5.31.1 diff --git a/src/components/Root.tsx b/src/components/Root.tsx index e5c56178..33c12e1b 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -87,7 +87,7 @@ export function Root(allProps: CubeRootProps) { let [height, setHeight] = useState( IS_DVH_SUPPORTED ? undefined : viewport.height, ); - let timeoutRef = useRef(); + let timeoutRef = useRef>(); useEffect(() => { if (IS_DVH_SUPPORTED && typeof window !== 'undefined') { diff --git a/src/components/content/ActiveZone/ActiveZone.tsx b/src/components/content/ActiveZone/ActiveZone.tsx index 8c94e421..688522d6 100644 --- a/src/components/content/ActiveZone/ActiveZone.tsx +++ b/src/components/content/ActiveZone/ActiveZone.tsx @@ -73,4 +73,7 @@ function ActiveZone( } const _ActiveZone = forwardRef(ActiveZone); + +_ActiveZone.displayName = 'ActiveZone'; + export { _ActiveZone as ActiveZone }; diff --git a/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx b/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx index dd3e3c91..baa96d6d 100644 --- a/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx +++ b/src/components/content/CopyPasteBlock/CopyPasteBlock.tsx @@ -233,4 +233,6 @@ function CopyPasteBlock( const _CopyPasteBlock = forwardRef(CopyPasteBlock); +_CopyPasteBlock.displayName = 'CopyPasteBlock'; + export { _CopyPasteBlock as CopyPasteBlock }; diff --git a/src/components/content/CopySnippet/CopySnippet.tsx b/src/components/content/CopySnippet/CopySnippet.tsx index 9d0c468e..915994e6 100644 --- a/src/components/content/CopySnippet/CopySnippet.tsx +++ b/src/components/content/CopySnippet/CopySnippet.tsx @@ -265,4 +265,6 @@ const _CopySnippet = Object.assign( }, ); +(_CopySnippet as any).displayName = 'CopySnippet'; + export { _CopySnippet as CopySnippet }; diff --git a/src/components/content/Header.tsx b/src/components/content/Header.tsx index fc5610f2..bb3bdc64 100644 --- a/src/components/content/Header.tsx +++ b/src/components/content/Header.tsx @@ -21,6 +21,7 @@ const HeaderElement = tasty({ display: 'block', gridArea: 'header', flow: 'column', + boxSizing: 'border-box', }, }); diff --git a/src/components/content/PrismCode/PrismCode.tsx b/src/components/content/PrismCode/PrismCode.tsx index fbe9cd31..0ba8b336 100644 --- a/src/components/content/PrismCode/PrismCode.tsx +++ b/src/components/content/PrismCode/PrismCode.tsx @@ -102,4 +102,7 @@ function PrismCode(props: CubePrismCodeProps, ref) { * Code block with syntax highlighting */ const _PrismCode = forwardRef(PrismCode); + +_PrismCode.displayName = 'PrismCode'; + export { _PrismCode as PrismCode }; diff --git a/src/components/content/Result/Result.tsx b/src/components/content/Result/Result.tsx index 9d4b56e9..3b66cfd5 100644 --- a/src/components/content/Result/Result.tsx +++ b/src/components/content/Result/Result.tsx @@ -223,4 +223,6 @@ function Result(props: CubeResultProps, ref) { const _Result = forwardRef(Result); +_Result.displayName = 'Result'; + export { _Result as Result }; diff --git a/src/components/content/Tag/Tag.tsx b/src/components/content/Tag/Tag.tsx index 7476070a..dfffbdab 100644 --- a/src/components/content/Tag/Tag.tsx +++ b/src/components/content/Tag/Tag.tsx @@ -131,4 +131,7 @@ function Tag(allProps: CubeTagProps, ref) { } const _Tag = forwardRef(Tag); + +_Tag.displayName = 'Tag'; + export { _Tag as Tag }; diff --git a/src/components/content/Text.tsx b/src/components/content/Text.tsx index 2f80acf8..6c7e8155 100644 --- a/src/components/content/Text.tsx +++ b/src/components/content/Text.tsx @@ -121,4 +121,6 @@ const _Text = Object.assign(Text, { }), }); +_Text.displayName = 'Text'; + export { _Text as Text }; diff --git a/src/components/content/Title.tsx b/src/components/content/Title.tsx index aa63fc2c..f1181013 100644 --- a/src/components/content/Title.tsx +++ b/src/components/content/Title.tsx @@ -29,7 +29,7 @@ const TitleElement = tasty({ qa: 'Title', as: 'h1', // it should be dynamic styles: { - gridArea: 'heading', + gridArea: 'title', display: 'block', color: '#dark', preset: { @@ -74,7 +74,7 @@ const Title = forwardRef(function CubeTitle( }: CubeTitleProps, ref, ) { - const propsWithSlots = useSlotProps(props, 'heading'); + const propsWithSlots = useSlotProps(props, 'title'); const tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = `h${level || 1}`; const styles = extractStyles(propsWithSlots, STYLE_LIST, {}, TEXT_PROP_MAP); @@ -106,4 +106,6 @@ const _Title = Object.assign(Title, { }), }); +_Title.displayName = 'Title'; + export { _Title as Title }; diff --git a/src/components/fields/Checkbox/Checkbox.tsx b/src/components/fields/Checkbox/Checkbox.tsx index 26ac5e75..f6c04dae 100644 --- a/src/components/fields/Checkbox/Checkbox.tsx +++ b/src/components/fields/Checkbox/Checkbox.tsx @@ -301,6 +301,8 @@ let __Checkbox = Object.assign( { Group: CheckboxGroup }, ); +__Checkbox.displayName = 'Checkbox'; + export { __Checkbox as Checkbox }; export type { AriaCheckboxProps }; export { useCheckbox }; diff --git a/src/components/fields/Checkbox/CheckboxGroup.tsx b/src/components/fields/Checkbox/CheckboxGroup.tsx index 4ac7654b..8faa414a 100644 --- a/src/components/fields/Checkbox/CheckboxGroup.tsx +++ b/src/components/fields/Checkbox/CheckboxGroup.tsx @@ -127,5 +127,6 @@ function CheckboxGroup(props: WithNullableValue, ref) { const _CheckboxGroup = forwardRef(CheckboxGroup); (_CheckboxGroup as any).cubeInputType = 'CheckboxGroup'; +_CheckboxGroup.displayName = 'CheckboxGroup'; export { _CheckboxGroup as CheckboxGroup }; diff --git a/src/components/fields/ComboBox/ComboBox.stories.tsx b/src/components/fields/ComboBox/ComboBox.stories.tsx index faa2069e..a969cf16 100644 --- a/src/components/fields/ComboBox/ComboBox.stories.tsx +++ b/src/components/fields/ComboBox/ComboBox.stories.tsx @@ -4,6 +4,10 @@ import { userEvent, within } from '@storybook/test'; import { SELECTED_KEY_ARG } from '../../../stories/FormFieldArgs'; import { baseProps } from '../../../stories/lists/baseProps'; +import { wait } from '../../../test/utils/wait'; +import { Button } from '../../actions/index'; +import { Field, Form } from '../../form/index'; +import { Flow } from '../../layout/Flow'; import { ComboBox, CubeComboBoxProps } from './ComboBox'; @@ -32,6 +36,111 @@ const Template: StoryFn> = ( ); +const TemplateForm: StoryFn> = ( + args: CubeComboBoxProps, +) => { + const [form] = Form.useForm(); + + return ( + +
console.log('! submit', data)} + > + + + {args.allowsCustomValue ? 'red' : 'Red'} + + + {args.allowsCustomValue ? 'orange' : 'Orange'} + + + {args.allowsCustomValue ? 'yellow' : 'Yellow'} + + + {args.allowsCustomValue ? 'green' : 'Green'} + + + {args.allowsCustomValue ? 'blue' : 'Blue'} + + + {args.allowsCustomValue ? 'purple' : 'Purple'} + + + {args.allowsCustomValue ? 'violet' : 'Violet'} + + +
+ + + ); +}; + +const TemplateLegacyForm: StoryFn> = ( + args: CubeComboBoxProps, +) => { + const [form] = Form.useForm(); + + return ( + +
console.log('! Submit', data)} + > + + + + {args.allowsCustomValue ? 'red' : 'Red'} + + + {args.allowsCustomValue ? 'orange' : 'Orange'} + + + {args.allowsCustomValue ? 'yellow' : 'Yellow'} + + + {args.allowsCustomValue ? 'green' : 'Green'} + + + {args.allowsCustomValue ? 'blue' : 'Blue'} + + + {args.allowsCustomValue ? 'purple' : 'Purple'} + + + {args.allowsCustomValue ? 'violet' : 'Violet'} + + + +
+ + + ); +}; + export const Default = Template.bind({}); Default.args = {}; @@ -101,3 +210,57 @@ With1LongOptionFiltered.play = async ({ canvasElement }) => { await userEvent.type(combobox, 'Red'); }; + +export const WithinForm = TemplateForm.bind({}); +WithinForm.play = async ({ canvasElement }) => { + const { getByRole, getByTestId } = within(canvasElement); + + const combobox = getByRole('combobox'); + const trigger = getByTestId('ComboBoxTrigger'); + const button = getByTestId('Button'); + const input = getByTestId('Input'); + + await userEvent.click(combobox); + await userEvent.click(trigger); + await wait(250); + await userEvent.click(button); + await userEvent.type( + input, + '{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}blue', + ); +}; + +export const WithinFormSelected = TemplateForm.bind({}); +WithinFormSelected.play = async ({ canvasElement }) => { + const { getByRole, getByTestId } = within(canvasElement); + + const combobox = getByRole('combobox'); + const trigger = getByTestId('ComboBoxTrigger'); + const button = getByTestId('Button'); + const input = getByTestId('Input'); + + await userEvent.click(combobox); + await userEvent.click(trigger); + await wait(250); + await userEvent.click(button); + await userEvent.type( + input, + '{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}blue{enter}', + ); +}; + +export const WithinFormWithCustomValue = TemplateForm.bind({}); +WithinFormWithCustomValue.play = WithinForm.play; +WithinFormWithCustomValue.args = { + ...TemplateForm.args, + allowsCustomValue: true, +}; + +export const WithinFormWithLegacyFieldAndCustomValue = TemplateLegacyForm.bind( + {}, +); +WithinFormWithLegacyFieldAndCustomValue.play = WithinForm.play; +WithinFormWithLegacyFieldAndCustomValue.args = { + ...TemplateForm.args, + allowsCustomValue: true, +}; diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx index 72e00801..92550a19 100644 --- a/src/components/fields/ComboBox/ComboBox.tsx +++ b/src/components/fields/ComboBox/ComboBox.tsx @@ -4,8 +4,8 @@ import { forwardRef, ReactElement, RefObject, + useEffect, useMemo, - useState, } from 'react'; import { useButton, @@ -18,6 +18,7 @@ import { } from 'react-aria'; import { Item, useComboBoxState } from 'react-stately'; +import { useEvent } from '../../../_internal/index'; import { useFieldProps, useFormProps, wrapWithField } from '../../form'; import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index'; import { useProviderProps } from '../../../provider'; @@ -107,9 +108,9 @@ export interface CubeComboBoxProps >, AriaComboBoxProps, AriaTextFieldProps { - defaultSelectedKey?: string; - selectedKey?: string; - onSelectionChange?: (selectedKey: string) => void; + defaultSelectedKey?: string | null; + selectedKey?: string | null; + onSelectionChange?: (selectedKey: string | null) => void; onInputChange?: (inputValue: string) => void; inputValue?: string; placeholder?: string; @@ -140,19 +141,29 @@ export const ComboBox = forwardRef(function ComboBox( props: CubeComboBoxProps, ref: ForwardedRef, ) { - const [, rerender] = useState({}); - props = useProviderProps(props); props = useFormProps(props); props = useFieldProps(props, { - valuePropsMapper: ({ value, onChange }) => ({ - inputValue: value != null ? value : '', - onInputChange: (val) => { - onChange(val, !props.allowsCustomValue); - rerender({}); - }, - onSelectionChange: onChange, - }), + valuePropsMapper: ({ value, onChange }) => { + return { + selectedKey: !props.allowsCustomValue ? value ?? null : undefined, + inputValue: props.allowsCustomValue ? value ?? '' : undefined, + onInputChange(val) { + if (!props.allowsCustomValue) { + return; + } + + onChange(val); + }, + onSelectionChange(val: string) { + if (val == null && props.allowsCustomValue) { + return; + } + + onChange(val); + }, + }; + }, }); let { @@ -195,6 +206,8 @@ export const ComboBox = forwardRef(function ComboBox( filter, styles, labelSuffix, + selectedKey, + defaultSelectedKey, ...otherProps } = props; @@ -268,7 +281,7 @@ export const ComboBox = forwardRef(function ComboBox( if (state.isOpen) { updatePosition(); } - }, [updatePosition, state.isOpen, state.collection.size]); + }, [state.isOpen, state.collection.size]); let isInvalid = validationState === 'invalid'; @@ -314,6 +327,46 @@ export const ComboBox = forwardRef(function ComboBox( ], ); + // If input is not full and the user presses Enter, pick the first option. + let onKeyPress = useEvent((e: KeyboardEvent) => { + if (e.key === 'Enter') { + if (!props.allowsCustomValue && state.isOpen) { + const option = [...state.collection][0]?.key; + + if (option && selectedKey !== option) { + props.onSelectionChange?.(option); + + e.stopPropagation(); + e.preventDefault(); + } + // If a custom value is allowed, we need to check if the input value is in the collection. + } else if (props.allowsCustomValue) { + const inputValue = inputRef?.current?.value; + + const item = [...state.collection].find( + (item) => item.textValue.toLowerCase() === inputValue?.toLowerCase(), + ); + + props.onSelectionChange?.( + item ? item.key : inputRef?.current?.value ?? '', + ); + } + } + }); + + useEffect(() => { + inputRef.current?.addEventListener('keydown', onKeyPress, true); + + return () => { + inputRef.current?.removeEventListener('keydown', onKeyPress, true); + }; + }, []); + + let allInputProps = useMemo( + () => mergeProps(inputProps, hoverProps, focusProps), + [inputProps, hoverProps, focusProps], + ); + let comboBoxField = ( ( data-size={size} > ( * DateInputs allow users to enter and edit date and time values using a keyboard. * Each part of a date value is displayed in an individually editable segment. */ -const _DateInput = forwardRef(DateInput) as ( - props: CubeDateInputProps & { ref?: FocusableRef }, -) => ReactElement; +const _DateInput = forwardRef(DateInput) as typeof DateInput; + +(_DateInput as any).displayName = 'DateInput'; + export { _DateInput as DateInput }; diff --git a/src/components/fields/DatePicker/DateInputBase.tsx b/src/components/fields/DatePicker/DateInputBase.tsx index 283effd4..fe752cf5 100644 --- a/src/components/fields/DatePicker/DateInputBase.tsx +++ b/src/components/fields/DatePicker/DateInputBase.tsx @@ -107,4 +107,7 @@ function DateInputBase(props: CubeDateAtomInputProps, ref) { } const _DateInputBase = React.forwardRef(DateInputBase); + +_DateInputBase.displayName = 'DateInputBase'; + export { _DateInputBase as DateInputBase }; diff --git a/src/components/fields/DatePicker/DatePicker.tsx b/src/components/fields/DatePicker/DatePicker.tsx index 87942787..21d557f2 100644 --- a/src/components/fields/DatePicker/DatePicker.tsx +++ b/src/components/fields/DatePicker/DatePicker.tsx @@ -1,4 +1,4 @@ -import { forwardRef, ReactElement, useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { FocusableRef } from '@react-types/shared'; import { useDatePicker, @@ -178,7 +178,8 @@ function DatePicker( }); } -const _DatePicker = forwardRef(DatePicker) as ( - props: CubeDatePickerProps & { ref?: FocusableRef }, -) => ReactElement; +const _DatePicker = forwardRef(DatePicker); + +_DatePicker.displayName = 'DatePicker'; + export { _DatePicker as DatePicker }; diff --git a/src/components/fields/DatePicker/DateRangePicker.tsx b/src/components/fields/DatePicker/DateRangePicker.tsx index 7ba89492..623bec2d 100644 --- a/src/components/fields/DatePicker/DateRangePicker.tsx +++ b/src/components/fields/DatePicker/DateRangePicker.tsx @@ -1,4 +1,4 @@ -import { forwardRef, ReactElement, useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { FocusableRef } from '@react-types/shared'; import { useDateRangePicker, @@ -205,7 +205,8 @@ function DateRangePicker( }); } -const _DateRangePicker = forwardRef(DateRangePicker) as ( - props: CubeDateRangePickerProps & { ref?: FocusableRef }, -) => ReactElement; +const _DateRangePicker = forwardRef(DateRangePicker) as typeof DateRangePicker; + +(_DateRangePicker as any).displayName = 'DateRangePicker'; + export { _DateRangePicker as DateRangePicker }; diff --git a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx index 31bd8e0b..8f0e5e41 100644 --- a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx +++ b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx @@ -315,4 +315,7 @@ const _DateRangeSeparatedPicker = forwardRef(DateRangeSeparatedPicker) as < ref?: FocusableRef; }, ) => ReactElement; + +(_DateRangeSeparatedPicker as any).displayName = 'DateRangeSeparatedPicker'; + export { _DateRangeSeparatedPicker as DateRangeSeparatedPicker }; diff --git a/src/components/fields/DatePicker/TimeInput.tsx b/src/components/fields/DatePicker/TimeInput.tsx index 36cfa7d0..f9ddbd79 100644 --- a/src/components/fields/DatePicker/TimeInput.tsx +++ b/src/components/fields/DatePicker/TimeInput.tsx @@ -1,4 +1,4 @@ -import { forwardRef, ReactElement, useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { FocusableRef } from '@react-types/shared'; import { AriaTimeFieldProps, @@ -125,7 +125,8 @@ function TimeInput( * TimeFields allow users to enter and edit time values using a keyboard. * Each part of the time is displayed in an individually editable segment. */ -const _TimeInput = forwardRef(TimeInput) as ( - props: CubeTimeInputProps & { ref?: FocusableRef }, -) => ReactElement; +const _TimeInput = forwardRef(TimeInput); + +_TimeInput.displayName = 'TimeInput'; + export { _TimeInput as TimeInput }; diff --git a/src/components/fields/FileInput/FileInput.tsx b/src/components/fields/FileInput/FileInput.tsx index 7228fcad..e08e38b6 100644 --- a/src/components/fields/FileInput/FileInput.tsx +++ b/src/components/fields/FileInput/FileInput.tsx @@ -278,4 +278,6 @@ function FileInput(props: CubeFileInputProps, ref) { */ const _FileInput = forwardRef(FileInput); +_FileInput.displayName = 'FileInput'; + export { _FileInput as FileInput }; diff --git a/src/components/fields/NumberInput/NumberInput.tsx b/src/components/fields/NumberInput/NumberInput.tsx index 10829864..9d6bd89b 100644 --- a/src/components/fields/NumberInput/NumberInput.tsx +++ b/src/components/fields/NumberInput/NumberInput.tsx @@ -119,5 +119,7 @@ const _NumberInput = forwardRef(NumberInput); (_NumberInput as any).cubeInputType = 'Number'; +_NumberInput.displayName = 'NumberInput'; + export { _NumberInput as NumberInput }; export type { AriaNumberFieldProps }; diff --git a/src/components/fields/PasswordInput/PasswordInput.tsx b/src/components/fields/PasswordInput/PasswordInput.tsx index f4fac119..d994f64d 100644 --- a/src/components/fields/PasswordInput/PasswordInput.tsx +++ b/src/components/fields/PasswordInput/PasswordInput.tsx @@ -83,5 +83,6 @@ function PasswordInput(props: CubePasswordInputProps, ref) { const _PasswordInput = forwardRef(PasswordInput); (_PasswordInput as any).cubeInputType = 'Text'; +_PasswordInput.displayName = 'PasswordInput'; export { _PasswordInput as PasswordInput }; diff --git a/src/components/fields/RadioGroup/Radio.tsx b/src/components/fields/RadioGroup/Radio.tsx index c086c669..811233ef 100644 --- a/src/components/fields/RadioGroup/Radio.tsx +++ b/src/components/fields/RadioGroup/Radio.tsx @@ -322,5 +322,10 @@ const __Radio = Object.assign( }, ); +__Radio.displayName = 'Radio'; + export { __Radio as Radio }; + +_RadioButton.displayName = 'RadioButton'; + export { _RadioButton as RadioButton }; diff --git a/src/components/fields/RadioGroup/RadioGroup.tsx b/src/components/fields/RadioGroup/RadioGroup.tsx index ea0bbc9f..9e3af813 100644 --- a/src/components/fields/RadioGroup/RadioGroup.tsx +++ b/src/components/fields/RadioGroup/RadioGroup.tsx @@ -13,8 +13,10 @@ import { import { BaseProps, BLOCK_STYLES, + BlockStyleProps, extractStyles, OUTER_STYLES, + OuterStyleProps, Styles, tasty, } from '../../../tasty'; @@ -30,6 +32,8 @@ import { RadioContext } from './context'; export interface CubeRadioGroupProps extends BaseProps, AriaRadioGroupProps, + BlockStyleProps, + OuterStyleProps, FieldBaseProps { groupStyles?: Styles; isSolid?: boolean; @@ -135,5 +139,6 @@ function RadioGroup(props: WithNullableValue, ref) { const _RadioGroup = forwardRef(RadioGroup); (_RadioGroup as any).cubeInputType = 'RadioGroup'; +_RadioGroup.displayName = 'RadioGroup'; export { _RadioGroup as RadioGroup }; diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx index 8885e4f8..a3c1a0ee 100644 --- a/src/components/fields/Select/Select.tsx +++ b/src/components/fields/Select/Select.tsx @@ -610,6 +610,9 @@ const __Select = Object.assign( { Item }, ); +__Select.displayName = 'Select'; + export { __Select as Select }; + export type { AriaSelectProps }; export { useSelectState }; diff --git a/src/components/fields/Slider/RangeSlider.tsx b/src/components/fields/Slider/RangeSlider.tsx index bfb8d9e3..bda5cc47 100644 --- a/src/components/fields/Slider/RangeSlider.tsx +++ b/src/components/fields/Slider/RangeSlider.tsx @@ -56,6 +56,7 @@ const _RangeSlider = forwardRef(RangeSlider); const __RangeSlider = Object.assign(_RangeSlider as typeof _RangeSlider, { cubeInputType: 'Number', + displayName: 'RangeSlider', }); export { __RangeSlider as RangeSlider }; diff --git a/src/components/fields/Slider/Slider.tsx b/src/components/fields/Slider/Slider.tsx index 428c971a..eb791d46 100644 --- a/src/components/fields/Slider/Slider.tsx +++ b/src/components/fields/Slider/Slider.tsx @@ -83,6 +83,7 @@ const _Slider = forwardRef(Slider); const __Slider = Object.assign(_Slider as typeof _Slider, { cubeInputType: 'Number', + displayName: 'Slider', }); export { __Slider as Slider }; diff --git a/src/components/fields/Slider/SliderBase.tsx b/src/components/fields/Slider/SliderBase.tsx index 077c203c..27bee8d7 100644 --- a/src/components/fields/Slider/SliderBase.tsx +++ b/src/components/fields/Slider/SliderBase.tsx @@ -218,5 +218,7 @@ function SliderBase( const _SliderBase = forwardRef(SliderBase); +_SliderBase.displayName = 'SliderBase'; + export { _SliderBase as SliderBase }; export { useSlider }; diff --git a/src/components/fields/Switch/Switch.tsx b/src/components/fields/Switch/Switch.tsx index 0c4e0731..cd7485e2 100644 --- a/src/components/fields/Switch/Switch.tsx +++ b/src/components/fields/Switch/Switch.tsx @@ -214,6 +214,7 @@ function Switch(props: WithNullableSelected, ref) { let _Switch = forwardRef(Switch); (_Switch as any).cubeInputType = 'Checkbox'; +_Switch.displayName = 'Switch'; export { _Switch as Switch }; export type { AriaSwitchProps }; diff --git a/src/components/fields/TextArea/TextArea.tsx b/src/components/fields/TextArea/TextArea.tsx index dfe8ab27..e5fcac9d 100644 --- a/src/components/fields/TextArea/TextArea.tsx +++ b/src/components/fields/TextArea/TextArea.tsx @@ -105,5 +105,6 @@ function TextArea(props: WithNullableValue, ref) { const _TextArea = forwardRef(TextArea); (_TextArea as any).cubeInputType = 'Text'; +_TextArea.displayName = 'TextArea'; export { _TextArea as TextArea }; diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx index c8a9703c..148903bc 100644 --- a/src/components/fields/TextInput/TextInputBase.tsx +++ b/src/components/fields/TextInput/TextInputBase.tsx @@ -1,4 +1,3 @@ -import { LoadingOutlined } from '@ant-design/icons'; import { createFocusableRef } from '@react-spectrum/utils'; import { cloneElement, @@ -12,6 +11,7 @@ import { } from 'react'; import { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria'; +import { LoadingIcon } from '../../../icons'; import { useFieldProps, useFormProps, wrapWithField } from '../../form'; import { useProviderProps } from '../../../provider'; import { @@ -247,6 +247,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) { minLength, ...otherProps } = props; + let styles = extractStyles(otherProps, STYLE_LIST); let type = otherProps.type; @@ -353,6 +354,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) { rows={multiLine ? rows : undefined} mods={modifiers} style={textSecurityStyles} + data-autofocus={autoFocus ? '' : undefined} autoFocus={autoFocus} data-size={size} autocomplete={autocomplete} @@ -368,7 +370,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) { {(validationState && !isLoading) || isLoading ? (
{validationState && !isLoading ? validation : null} - {isLoading && } + {isLoading && }
) : null} {suffixPosition === 'after' ? suffix : null} diff --git a/src/components/fields/TextInputMapper/TextInputMapper.tsx b/src/components/fields/TextInputMapper/TextInputMapper.tsx index 5aa8d861..998458ba 100644 --- a/src/components/fields/TextInputMapper/TextInputMapper.tsx +++ b/src/components/fields/TextInputMapper/TextInputMapper.tsx @@ -184,7 +184,7 @@ function TextInputMapper( ValueComponent = ValueComponent ?? TextInputMapperInput; const onKeyChange = useEvent((id: number, value: string) => { - mappings.find((mapping) => { + mappings.forEach((mapping) => { if (mapping.id === id) { mapping.key = value; } @@ -194,7 +194,7 @@ function TextInputMapper( }); const onValueChange = useEvent((id: number, value: string) => { - mappings.find((mapping) => { + mappings.forEach((mapping) => { if (mapping.id === id) { mapping.value = value; } @@ -347,7 +347,7 @@ function TextInputMapperInput(props: CubeTextInputMapperInputProps) { aria-label={placeholder} placeholder={placeholder} onInputChange={onChange} - onSelectionChange={onSelectionChange} + onSelectionChange={(val) => onSelectionChange(val ?? '')} > {(options ?? []).map((option) => ( {option} @@ -376,4 +376,6 @@ function TextInputMapperInput(props: CubeTextInputMapperInputProps) { const _TextInputMapper = forwardRef(TextInputMapper); +_TextInputMapper.displayName = 'TextInputMapper'; + export { _TextInputMapper as TextInputMapper }; diff --git a/src/components/form/Form/Field.tsx b/src/components/form/Form/Field.tsx index 2b268f16..eb8c34f7 100644 --- a/src/components/form/Form/Field.tsx +++ b/src/components/form/Form/Field.tsx @@ -65,13 +65,26 @@ function getValueProps( }; } else if (type === 'ComboBox') { return { - inputValue: value != null ? value : '', - onInputChange: (val) => onChange(val, !allowsCustomValue), - onSelectionChange: onChange, + selectedKey: !allowsCustomValue ? value ?? null : undefined, + inputValue: allowsCustomValue ? value ?? '' : undefined, + onInputChange(val) { + if (!allowsCustomValue) { + return; + } + + onChange(val); + }, + onSelectionChange(val: string) { + if (val == null && allowsCustomValue) { + return; + } + + onChange(val); + }, }; } else if (type === 'Select') { return { - selectedKey: value != null ? value : null, + selectedKey: value ?? null, onSelectionChange: onChange, }; } @@ -101,7 +114,6 @@ interface CubeReplaceFieldProps onChange?: (any) => void; onSelectionChange?: (any) => void; onBlur: () => void; - onInputChange?: (any) => void; labelPosition?: LabelPosition; } @@ -255,7 +267,7 @@ export function Field(props: CubeFieldProps) { newProps, getValueProps( inputType, - __props.field?.inputValue, + __props.field?.value, __props.onChange, child.props.allowsCustomValue, ), diff --git a/src/components/form/Form/Form.tsx b/src/components/form/Form/Form.tsx index 5f1a9758..58c2a3cb 100644 --- a/src/components/form/Form/Form.tsx +++ b/src/components/form/Form/Form.tsx @@ -256,8 +256,8 @@ function Form( /** * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields. */ -const _Form = forwardRef(Form) as ( - props: CubeFormProps & { ref?: DOMRef }, -) => JSX.Element; +const _Form = forwardRef(Form) as typeof Form; + +(_Form as any).displayName = 'Form'; export { _Form as Form }; diff --git a/src/components/form/Form/ResetButton/ResetButton.tsx b/src/components/form/Form/ResetButton/ResetButton.tsx index 963adf4e..f9ec91c8 100644 --- a/src/components/form/Form/ResetButton/ResetButton.tsx +++ b/src/components/form/Form/ResetButton/ResetButton.tsx @@ -54,4 +54,7 @@ function ResetButton( } const _ResetButton = forwardRef(ResetButton); + +_ResetButton.displayName = 'ResetButton'; + export { _ResetButton as ResetButton }; diff --git a/src/components/form/Form/SubmitButton/SubmitButton.tsx b/src/components/form/Form/SubmitButton/SubmitButton.tsx index 2b307ae4..db327f2c 100644 --- a/src/components/form/Form/SubmitButton/SubmitButton.tsx +++ b/src/components/form/Form/SubmitButton/SubmitButton.tsx @@ -40,4 +40,7 @@ function SubmitButton( } const _SubmitButton = forwardRef(SubmitButton); + +_SubmitButton.displayName = 'SubmitButton'; + export { _SubmitButton as SubmitButton }; diff --git a/src/components/form/Form/SubmitError.tsx b/src/components/form/Form/SubmitError.tsx index eb41a21b..7a99ac0c 100644 --- a/src/components/form/Form/SubmitError.tsx +++ b/src/components/form/Form/SubmitError.tsx @@ -39,4 +39,7 @@ function SubmitError(props: CubeAlertProps, ref: ForwardedRef) { * An alert that shows a form error message received from the onSubmit callback. */ const _SubmitError = forwardRef(SubmitError); + +_SubmitError.displayName = 'SubmitError'; + export { _SubmitError as SubmitError }; diff --git a/src/components/form/Form/types.ts b/src/components/form/Form/types.ts index 1c2189c3..d88189c6 100644 --- a/src/components/form/Form/types.ts +++ b/src/components/form/Form/types.ts @@ -8,7 +8,6 @@ export type CubeFieldData = { readonly name: Name; errors: ReactNode[]; value?: Value; - inputValue?: Value | string | undefined | null; touched?: boolean; rules?: any[]; validating?: boolean; diff --git a/src/components/form/Form/use-field/types.ts b/src/components/form/Form/use-field/types.ts index bb9a1822..dfdfc17c 100644 --- a/src/components/form/Form/use-field/types.ts +++ b/src/components/form/Form/use-field/types.ts @@ -49,7 +49,7 @@ export type FieldReturnValue = { dontTouch: boolean, validateTrigger: ValidateTrigger, ) => void; - message?: React.ReactNode; + message?: ReactNode; isRequired?: boolean; onBlur: () => void; nonInput: boolean; diff --git a/src/components/form/Form/use-field/use-field-props.tsx b/src/components/form/Form/use-field/use-field-props.tsx index 16a5e8a5..fd328b5a 100644 --- a/src/components/form/Form/use-field/use-field-props.tsx +++ b/src/components/form/Form/use-field/use-field-props.tsx @@ -33,10 +33,12 @@ export function useFieldProps< const isDisabledRef = useRef(params.unsafe__isDisabled ?? false); const { - valuePropsMapper = ({ value, onChange }) => ({ - value: value ?? null, - onChange, - }), + valuePropsMapper = ({ value, onChange }) => { + return { + value: value ?? null, + onChange, + }; + }, defaultValidationTrigger = 'onBlur', } = params; @@ -81,16 +83,19 @@ export function useFieldProps< ); // eslint-disable-next-line react-hooks/rules-of-hooks - const onChangeEvent = useEvent((value, dontTouch: boolean) => + const onChangeEvent = useEvent((value, dontTouch: boolean) => { field?.onChange?.( value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger, - ), - ); + ); + }); const valueProps = !isOutsideOfForm - ? valuePropsMapper({ value: field.value, onChange: onChangeEvent }) + ? valuePropsMapper({ + value: field.value, + onChange: onChangeEvent, + }) : {}; if (isInsideLegacyField && !isOutsideOfForm) { diff --git a/src/components/form/Form/use-field/use-field.ts b/src/components/form/Form/use-field/use-field.ts index e6619148..04ff2366 100644 --- a/src/components/form/Form/use-field/use-field.ts +++ b/src/components/form/Form/use-field/use-field.ts @@ -107,7 +107,7 @@ export function useField>( if (field) { form.forceReRender(); } else { - form.createField(fieldName); + field = form.createField(fieldName); } }, [field]); @@ -152,7 +152,7 @@ export function useField>( } } - form.setFieldValue(fieldName, val, !dontTouch, false, dontTouch); + form.setFieldValue(fieldName, val, !dontTouch); if ( !dontTouch && @@ -172,13 +172,13 @@ export function useField>( } }); - let inputValue = field?.inputValue; + let value = field?.value; return useMemo( () => ({ id: fieldId, name: fieldName, - value: inputValue, + value, validateTrigger, form, field, @@ -202,9 +202,9 @@ export function useField>( [ form, field, + field?.value, field?.errors?.length, field?.status, - field?.inputValue, fieldId, fieldName, isRequired, diff --git a/src/components/form/Form/use-form.tsx b/src/components/form/Form/use-form.tsx index 9e0dfe50..6fe7f677 100644 --- a/src/components/form/Form/use-form.tsx +++ b/src/components/form/Form/use-form.tsx @@ -70,7 +70,6 @@ export class CubeFormInstance< newData: PartialString, touched?: boolean, skipRender?: boolean, - inputOnly = false, ) => { let flag = false; @@ -94,11 +93,8 @@ export class CubeFormInstance< flag = true; - if (!inputOnly) { - field.value = newData[name]; - } + field.value = newData[name]; - field.inputValue = newData[name]; field.errors = []; field.status = undefined; @@ -110,7 +106,7 @@ export class CubeFormInstance< }); if (flag && !skipRender) { - if (touched && !inputOnly) { + if (touched) { this.onValuesChange && this.onValuesChange(this.getFormData()); this.submitError = null; } @@ -159,38 +155,33 @@ export class CubeFormInstance< value: T[Name], isTouched = false, skipRender = false, - inputOnly = false, ) { const field = this.fields[name]; - if (!field || isEqual(value, inputOnly ? field.inputValue : field.value)) { + if (!field || isEqual(value, field.value)) { return; } - if (!inputOnly) { - field.value = value; - field.status = undefined; // reset validation status + field.value = value; - if (typeof value === 'object' && !Array.isArray(value)) { - Object.keys(this.fields) - .filter((key) => key.startsWith(`${name}.`)) - .forEach((key) => { - const objKey = key.replace(`${name}.`, ''); + if (typeof value === 'object' && !Array.isArray(value)) { + Object.keys(this.fields) + .filter((key) => key.startsWith(`${name}.`)) + .forEach((key) => { + const objKey = key.replace(`${name}.`, ''); - this.setFieldValue(key, value[objKey] ?? null, isTouched, false); - }); - } + this.setFieldValue(key, value[objKey] ?? null, isTouched, false); + }); } - field.inputValue = value; field.errors = []; - field.status = undefined; + field.status = undefined; // reset validation status if (isTouched) { field.touched = isTouched; } - if (isTouched && !inputOnly) { + if (isTouched) { this.onValuesChange && this.onValuesChange(this.getFormData()); this.submitError = null; } @@ -230,7 +221,6 @@ export class CubeFormInstance< field.value = defaultValue; field.touched = false; - field.inputValue = defaultValue; field.errors = []; field.status = undefined; field.validationId = (field.validationId ?? 0) + 1; @@ -489,11 +479,6 @@ export class CubeFormInstance< status: data?.errors?.length ? 'invalid' : undefined, } as unknown as Data; - if (obj) { - // condition is here to avoid typing issues - obj.inputValue = obj.value; - } - return obj; } } diff --git a/src/components/form/Form/validation.ts b/src/components/form/Form/validation.ts index 39ffa47d..85bc43c4 100644 --- a/src/components/form/Form/validation.ts +++ b/src/components/form/Form/validation.ts @@ -158,7 +158,7 @@ export async function applyRules(field, form, validationId = 0) { } export const delayValidationRule = (timeout = 500) => { - let timeoutId: NodeJS.Timeout; + let timeoutId: ReturnType; let storedResolve: () => void; return { diff --git a/src/components/form/Label.tsx b/src/components/form/Label.tsx index ab273d45..e2729a91 100644 --- a/src/components/form/Label.tsx +++ b/src/components/form/Label.tsx @@ -168,4 +168,7 @@ function Label(props: CubeLabelProps, ref) { } let _Label = forwardRef(Label); + +_Label.displayName = 'Label'; + export { _Label as Label }; diff --git a/src/components/other/Calendar/Calendar.tsx b/src/components/other/Calendar/Calendar.tsx index c484d22d..1f0fdfc3 100644 --- a/src/components/other/Calendar/Calendar.tsx +++ b/src/components/other/Calendar/Calendar.tsx @@ -77,4 +77,7 @@ function Calendar(props: CubeCalendarProps, ref: FocusableRef) { } const _Calendar = forwardRef(Calendar); + +_Calendar.displayName = 'Calendar'; + export { _Calendar as Calendar }; diff --git a/src/components/other/Calendar/RangeCalendar.tsx b/src/components/other/Calendar/RangeCalendar.tsx index c9dceaf4..1109de4b 100644 --- a/src/components/other/Calendar/RangeCalendar.tsx +++ b/src/components/other/Calendar/RangeCalendar.tsx @@ -75,6 +75,9 @@ function RangeCalendar( } const _RangeCalendar = forwardRef(RangeCalendar); + +_RangeCalendar.displayName = 'RangeCalendar'; + export { _RangeCalendar as RangeCalendar }; export type { AriaRangeCalendarProps as CubeRangeCalendarProps }; diff --git a/src/components/other/CloudLogo/CloudLogo.tsx b/src/components/other/CloudLogo/CloudLogo.tsx index 28eb5419..2a9fc4a7 100644 --- a/src/components/other/CloudLogo/CloudLogo.tsx +++ b/src/components/other/CloudLogo/CloudLogo.tsx @@ -103,4 +103,7 @@ function CloudLogo( } const _CloudLogo = forwardRef(CloudLogo); + +_CloudLogo.displayName = 'CloudLogo'; + export { _CloudLogo as CloudLogo }; diff --git a/src/components/overlays/AlertDialog/AlertDialog.tsx b/src/components/overlays/AlertDialog/AlertDialog.tsx index 04324aca..fcead42b 100644 --- a/src/components/overlays/AlertDialog/AlertDialog.tsx +++ b/src/components/overlays/AlertDialog/AlertDialog.tsx @@ -126,4 +126,7 @@ function AlertDialog(props: CubeAlertDialogProps, ref) { * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge. */ const _AlertDialog = forwardRef(AlertDialog); + +_AlertDialog.displayName = 'AlertDialog'; + export { _AlertDialog as AlertDialog }; diff --git a/src/components/overlays/Dialog/Dialog.tsx b/src/components/overlays/Dialog/Dialog.tsx index 2b05a0b2..d125f7e3 100644 --- a/src/components/overlays/Dialog/Dialog.tsx +++ b/src/components/overlays/Dialog/Dialog.tsx @@ -1,6 +1,6 @@ import { useDOMRef } from '@react-spectrum/utils'; -import { DismissButton, FocusScope, useFocusManager } from 'react-aria'; -import { forwardRef, ReactElement, useEffect, useMemo, useState } from 'react'; +import { DismissButton } from 'react-aria'; +import { forwardRef, ReactElement, useEffect, useMemo } from 'react'; import { useDialog, useMessageFormatter, AriaDialogProps } from 'react-aria'; import { DOMRef } from '@react-types/shared'; import FocusLock from 'react-focus-lock'; @@ -67,7 +67,7 @@ const DialogElement = tasty({ '[data-type="panel"]': 'auto', }, placeSelf: 'stretch', - '@dialog-heading-padding-v': { + '@dialog-title-padding-v': { '': '2x', '[data-type="popover"]': '1x', }, @@ -95,6 +95,16 @@ const CLOSE_BUTTON_STYLES: Styles = { width: '5x', height: '5x', placeContent: 'center', + fill: { + '': '#dark.0', + hovered: '#dark.04', + pressed: '#dark.05', + }, + color: { + '': '#dark-02', + hovered: '#dark-02', + pressed: '#purple', + }, }; const sizeMap = { @@ -153,10 +163,12 @@ export const Dialog = forwardRef(function Dialog( return ( // This component is actually traps the focus inside the dialog. - - {/* FocusScope has a bug that prevents selection and blurring in the dialog. */} - {/* But we need it to make the autofocus work. */} - {content} + + {content} ); }); @@ -178,8 +190,6 @@ const DialogContent = forwardRef(function DialogContent( ...otherProps } = props; - const [isCloseDisabled, setIsCloseDisabled] = useState(true); - size = sizeMap[size.toUpperCase()] || size; const styles: Styles = extractStyles(otherProps, STYLES_LIST); @@ -199,17 +209,21 @@ const DialogContent = forwardRef(function DialogContent( dismissButton = ; } - const focusManager = useFocusManager(); - // Focus the first focusable element in the dialog when it opens useEffect(() => { if (contextProps.isOpen) { setTimeout(() => { - focusManager?.focusFirst(); - setIsCloseDisabled(false); + if ( + domRef.current && + !domRef.current.contains(document.activeElement) + ) { + ( + domRef.current.querySelector( + 'input[data-autofocus], [data-qa="ButtonGroup"] button[data-type="primary"]', + ) as HTMLButtonElement + )?.focus(); + } }); - } else { - setIsCloseDisabled(true); } }, [contextProps.isOpen]); @@ -217,7 +231,7 @@ const DialogContent = forwardRef(function DialogContent( // let hasFooter = useHasChild('[data-id="Footer"]', domRef); let slots = { - heading: { + title: { level: 2, preset: 'h4', ...titleProps, @@ -241,9 +255,9 @@ const DialogContent = forwardRef(function DialogContent( gap: '1x', placeItems: 'baseline stretch', placeContent: 'space-between', - padding: `@dialog-heading-padding-v ${ + padding: `@dialog-title-padding-v ${ isDismissable ? '(@dialog-padding-h + 4x)' : '@dialog-padding-h' - } @dialog-heading-padding-v @dialog-padding-h`, + } @dialog-title-padding-v @dialog-padding-h`, border: 'bottom', }, }, @@ -278,7 +292,6 @@ const DialogContent = forwardRef(function DialogContent( {isDismissable && ( + {(close) => ( + +
+ Modal title + Header +
+ + + +
+ + + + + + Footer +
+ + )} + + ); +}; + const WithTriggerStateTemplate: StoryFn< CubeDialogTriggerProps & { size: CubeDialogProps['size'] } > = ({ size, styles, ...props }) => { @@ -95,6 +127,9 @@ Default.play = async ({ canvasElement, viewMode }) => { await expect(await findByRole('dialog')).toBeInTheDocument(); }; +export const WithInput = TemplateWithInput.bind({}); +WithInput.play = Default.play; + export const Modal: typeof Template = Template.bind({}); Modal.args = { type: 'modal', diff --git a/src/components/overlays/Modal/Modal.tsx b/src/components/overlays/Modal/Modal.tsx index 3e3a97b2..7b612aea 100644 --- a/src/components/overlays/Modal/Modal.tsx +++ b/src/components/overlays/Modal/Modal.tsx @@ -161,4 +161,7 @@ let ModalWrapper = forwardRef(function ModalWrapper( }); let _Modal = forwardRef(Modal); + +_Modal.displayName = 'Modal'; + export { _Modal as Modal }; diff --git a/src/components/overlays/Modal/Overlay.tsx b/src/components/overlays/Modal/Overlay.tsx index ad3800e7..124c41ea 100644 --- a/src/components/overlays/Modal/Overlay.tsx +++ b/src/components/overlays/Modal/Overlay.tsx @@ -72,4 +72,7 @@ function Overlay(props: CubeOverlayProps, ref) { } let _Overlay = forwardRef(Overlay); + +_Overlay.displayName = 'Overlay'; + export { _Overlay as Overlay }; diff --git a/src/components/overlays/Modal/Popover.tsx b/src/components/overlays/Modal/Popover.tsx index bbd85b92..a7d42c11 100644 --- a/src/components/overlays/Modal/Popover.tsx +++ b/src/components/overlays/Modal/Popover.tsx @@ -152,5 +152,8 @@ const PopoverWrapper = forwardRef(function PopoverWrapper( ); }); -let _Popover = forwardRef(Popover); +const _Popover = forwardRef(Popover); + +_Popover.displayName = 'Popover'; + export { _Popover as Popover }; diff --git a/src/components/overlays/Modal/Tray.tsx b/src/components/overlays/Modal/Tray.tsx index 740f10e9..9d8e13d7 100644 --- a/src/components/overlays/Modal/Tray.tsx +++ b/src/components/overlays/Modal/Tray.tsx @@ -149,4 +149,7 @@ let TrayWrapper = forwardRef(function TrayWrapper( }); let _Tray = forwardRef(Tray); + +_Tray.displayName = 'Tray'; + export { _Tray as Tray }; diff --git a/src/components/overlays/Modal/Underlay.tsx b/src/components/overlays/Modal/Underlay.tsx index 405e1bf1..1d48f21a 100644 --- a/src/components/overlays/Modal/Underlay.tsx +++ b/src/components/overlays/Modal/Underlay.tsx @@ -48,4 +48,7 @@ function Underlay({ isOpen, transitionState, ...otherProps }, ref) { } let _Underlay = forwardRef(Underlay); + +_Underlay.displayName = 'Underlay'; + export { _Underlay as Underlay }; diff --git a/src/components/overlays/Tooltip/Tooltip.tsx b/src/components/overlays/Tooltip/Tooltip.tsx index 1cc335d8..1b6ce7f2 100644 --- a/src/components/overlays/Tooltip/Tooltip.tsx +++ b/src/components/overlays/Tooltip/Tooltip.tsx @@ -177,4 +177,7 @@ function Tooltip( * Display container for Tooltip content. Has a directional arrow dependent on its placement. */ let _Tooltip = forwardRef(Tooltip); + +_Tooltip.displayName = 'Tooltip'; + export { _Tooltip as Tooltip }; diff --git a/src/components/overlays/Tooltip/TooltipProvider.tsx b/src/components/overlays/Tooltip/TooltipProvider.tsx index 663eb3e0..d76fa2d4 100644 --- a/src/components/overlays/Tooltip/TooltipProvider.tsx +++ b/src/components/overlays/Tooltip/TooltipProvider.tsx @@ -13,7 +13,7 @@ export interface CubeTooltipProviderProps width?: CubeTooltipProps['width']; } -function TooltipProvider(props: CubeTooltipProviderProps) { +export function TooltipProvider(props: CubeTooltipProviderProps) { const [rendered, setRendered] = useState(false); const { title, children, tooltipStyles, width, ...otherProps } = props; @@ -32,6 +32,3 @@ function TooltipProvider(props: CubeTooltipProviderProps) { <>{children} ); } - -let _TooltipProvider = TooltipProvider; -export { _TooltipProvider as TooltipProvider }; diff --git a/src/components/overlays/Tooltip/TooltipTrigger.tsx b/src/components/overlays/Tooltip/TooltipTrigger.tsx index df48d937..ce263f7f 100644 --- a/src/components/overlays/Tooltip/TooltipTrigger.tsx +++ b/src/components/overlays/Tooltip/TooltipTrigger.tsx @@ -49,7 +49,12 @@ export interface CubeTooltipTriggerProps extends TooltipTriggerProps { trigger?: 'focus'; } -function TooltipTrigger(props: CubeTooltipTriggerProps) { +/** + * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing + * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip + * relative to the trigger. + */ +export function TooltipTrigger(props: CubeTooltipTriggerProps) { let { children, activeWrap, @@ -135,11 +140,3 @@ function TooltipTrigger(props: CubeTooltipTriggerProps) { ); } - -/** - * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing - * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip - * relative to the trigger. - */ -let _TooltipTrigger = TooltipTrigger; -export { _TooltipTrigger as TooltipTrigger }; diff --git a/src/stories/Form.mdx b/src/stories/Form.docs.mdx similarity index 68% rename from src/stories/Form.mdx rename to src/stories/Form.docs.mdx index 73392398..d1b73978 100644 --- a/src/stories/Form.mdx +++ b/src/stories/Form.docs.mdx @@ -3,7 +3,7 @@ import { Meta, Story, Canvas, Controls } from '@storybook/blocks'; import { Form, Field, SubmitButton, Input, DialogForm } from '../index'; import { DialogFormApp } from './components/DialogFormApp'; import { DISABLE_BASE_ARGS } from './FormFieldArgs'; -import * as FormStories from './Form.stories'; +import * as FormStories from './Form.stories.jsx'; @@ -34,30 +34,32 @@ const Demo = () => { #### CubeFormInstance interface -| Prop | Description | Type | Default | -| --------------- | ------------------------------------------ | -------------------------------------------------------- | ------- | -| getFieldValue | Get field value by name path | (name: NamePath) => any | -| getFieldsValue | Get list of field values by name path list | (nameList?: (NamePath\[]) => any) | true | -| getFieldError | Get field errors by name path | (name: NamePath) => string\[] | -| getFieldsError | Get list of field errors by name path list | (nameList?: NamePath\[]) => FieldError\[] | -| isFieldsTouched | Check if list of fields are touched | (nameList?: NamePath\[], allTouched?: boolean) => boolean | -| isFieldTouched | Check if a field is touched | (name: NamePath) => boolean | -| isFieldValid | Check if a field is valid | (name: NamePath) => boolean | -| resetFields | Reset fields status | (fields?: NamePath\[]) => void | -| setFields | Set fields status | (fields: CubeFieldData\[]) => void | -| setFieldsValue | Set fields value | (values) => void | -| submit | Trigger form to validate and submit | () => void | -| validateFields | Trigger fields to validate | (nameList?: NamePath\[]) => Promise | +| Prop | Description | Type | +|-----------------|---------------------------------------------|----------------------------------------------------------| +| getFieldValue | Get field value by name path | (name: NamePath) => any | +| getFieldsValue | Get list of field values by name path list | (nameList?: NamePath[]) => any | +| getFieldError | Get field errors by name path | (name: NamePath) => string[] | +| getFieldsError | Get list of field errors by name path list | (nameList?: NamePath[]) => FieldError[] | +| isFieldsTouched | Check if list of fields are touched | (nameList?: NamePath[], allTouched?: boolean) => boolean | +| isFieldTouched | Check if a field is touched | (name: NamePath) => boolean | +| isFieldValid | Check if a field is valid | (name: NamePath) => boolean | +| resetFields | Reset fields status | (fields?: NamePath[]) => void | +| setFields | Set fields status | (fields: CubeFieldData[]) => void | +| setFieldsValue | Set fields value | (values) => void | +| submit | Trigger form to validate and submit | () => void | +| validateFields | Trigger fields to validate | (nameList?: NamePath[]) => Promise | +| isDirty | Check if form is dirty | boolean | +| isTouched | Check if form has been changed at least once| boolean | #### CubeFieldData interface -| Prop | Type | -| ------- | ---------------------------------------------------- | -| touched | boolean | -| errors | string\[] | -| name | string | number | (string | number)\[] | -| value | any | -| rules | CubeValidationRule\[] | +| Prop | Type | +|---------|---------------------------------------| +| touched | boolean | +| errors | string[] | +| name | `string` \| `number` \| (`string` \| `number`)[] | +| value | any | +| rules | CubeValidationRule[] | ## Known differences with AntD Forms @@ -112,6 +114,8 @@ export function LoginForm() { + + Submit ); diff --git a/src/stories/Form.stories.jsx b/src/stories/Form.stories.jsx index c73646b6..6296101a 100644 --- a/src/stories/Form.stories.jsx +++ b/src/stories/Form.stories.jsx @@ -6,6 +6,7 @@ import { ResetButton, Space, TextInput, + SubmitError, } from '../index'; import { DialogFormApp } from './components/DialogFormApp'; @@ -64,6 +65,7 @@ export const LoginForm = { > + Submit Reset diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.docs.mdx similarity index 100% rename from src/stories/Introduction.mdx rename to src/stories/Introduction.docs.mdx diff --git a/src/stories/Layout.mdx b/src/stories/Layout.docs.mdx similarity index 94% rename from src/stories/Layout.mdx rename to src/stories/Layout.docs.mdx index ed780f81..ac1cb5f3 100644 --- a/src/stories/Layout.mdx +++ b/src/stories/Layout.docs.mdx @@ -11,7 +11,7 @@ import { Flex, Grid, } from '../index'; -import * as LayoutStories from './Layout.stories'; +import * as LayoutStories from './Layout.stories.jsx'; diff --git a/src/stories/Result.mdx b/src/stories/Result.docs.mdx similarity index 96% rename from src/stories/Result.mdx rename to src/stories/Result.docs.mdx index c8e7df72..b9c228b7 100644 --- a/src/stories/Result.mdx +++ b/src/stories/Result.docs.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/blocks'; import { Story, Canvas, Controls } from '@storybook/blocks'; import { BulbFilled, LockFilled } from '@ant-design/icons'; -import * as ResultStories from './Result.stories'; +import * as ResultStories from './Result.stories.tsx'; import { baseProps } from './lists/baseProps'; import { Element, Button, Result, Space, Text, Title } from '../index'; diff --git a/src/stories/Styles.mdx b/src/stories/Styles.docs.mdx similarity index 100% rename from src/stories/Styles.mdx rename to src/stories/Styles.docs.mdx diff --git a/src/stories/Tasty.mdx b/src/stories/Tasty.docs.mdx similarity index 98% rename from src/stories/Tasty.mdx rename to src/stories/Tasty.docs.mdx index 8a046d3f..3f2f0647 100644 --- a/src/stories/Tasty.mdx +++ b/src/stories/Tasty.docs.mdx @@ -11,7 +11,7 @@ import { Flex, } from '../index'; import { StyledButton, GlobalStyledHeading } from './components/StyledButton'; -import * as TastyStories from './Tasty.stories'; +import * as TastyStories from './Tasty.stories.jsx'; diff --git a/src/stories/Typography.mdx b/src/stories/Typography.docs.mdx similarity index 95% rename from src/stories/Typography.mdx rename to src/stories/Typography.docs.mdx index 6b439b59..85da21d7 100644 --- a/src/stories/Typography.mdx +++ b/src/stories/Typography.docs.mdx @@ -10,7 +10,7 @@ import { Block, Card, } from '../index'; -import * as TypographyStories from './Typography.stories'; +import * as TypographyStories from './Typography.stories.tsx'; diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json deleted file mode 100644 index 06f11df9..00000000 --- a/tsconfig.cjs.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "module": "CommonJS", - "outDir": "./dist/cjs", - "noEmit": false, - "declaration": false - }, - "exclude": [ - "src/**/__mocks__/**/*", - "src/**/*.stories.tsx", - "src/**/*.stories.ts", - "src/test/**/*", - "src/**/*.test.tsx", - "src/**/*.test.ts", - "src/antd.js", - "src/storybook.tsx", - "src/App.tsx", - "src/script.js" - ] -} diff --git a/tsconfig.json b/tsconfig.json index e53f4a69..9507b899 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,8 @@ { "compilerOptions": { "baseUrl": ".", - "module": "esnext", - "lib": ["dom", "esnext"], + "module": "es2022", + "lib": ["dom", "es2023"], "declaration": true, "noEmitOnError": false, "allowJs": true, @@ -20,9 +20,9 @@ "isolatedModules": true, "preserveSymlinks": true, "noImplicitAny": false, - "target": "es2021", + "target": "es2022", "noEmit": true, - "types": ["node", "jest", "react", "react-dom"], + "types": ["jest", "react", "react-dom"], }, "include": ["src/**/*"] }