From 2df73bd5ecca07ca91709cf71dd854f8cfc09dcb Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Thu, 6 Aug 2026 12:18:51 +0900 Subject: [PATCH 1/3] refactor(*): migrate 'radix-ui' primitives to 'base-ui' --- package.json | 4 +- pnpm-lock.yaml | 381 +++++------------- src/components/AuthenticatedUserMenu.tsx | 90 +++-- src/components/AvatarCropModal.tsx | 8 +- src/components/BlogAuthorFilter.tsx | 76 ++-- src/components/BrandContextMenu.tsx | 27 +- src/components/Breadcrumbs.tsx | 59 +-- src/components/CopyPageDropdown.tsx | 26 +- src/components/Dropdown.tsx | 96 +++-- src/components/LibrariesBrowser.tsx | 44 +- src/components/LibrariesOverlay.tsx | 28 +- src/components/LoginModal.tsx | 8 +- src/components/Navbar.tsx | 73 ++-- src/components/SearchModal.tsx | 283 ++++++------- src/components/Select.tsx | 54 +-- src/components/application-builder/parts.tsx | 15 +- src/components/charts/ChartControls.tsx | 41 +- src/components/ds/BrandAssets.tsx | 104 ++--- src/components/ds/ui/index.tsx | 123 +++--- src/components/npm-stats/BaselineSection.tsx | 32 +- src/components/npm-stats/ChartControls.tsx | 94 +++-- src/components/npm-stats/DropdownMenu.tsx | 90 +++++ .../npm-stats/LatestBucketNavigator.tsx | 22 +- src/components/npm-stats/NPMStatsChart.tsx | 44 +- src/components/npm-stats/PackagePills.tsx | 16 +- src/components/shop/CartDrawer.tsx | 21 +- src/routes/ds.buttons.tsx | 32 +- src/routes/ds.cards.tsx | 2 +- src/routes/ds.dropdown.tsx | 22 +- src/routes/ds.iconography.lazy.tsx | 32 +- src/routes/stats/npm/index.tsx | 8 +- src/styles/app.css | 16 +- src/ui/Tooltip.tsx | 32 +- 33 files changed, 966 insertions(+), 1037 deletions(-) create mode 100644 src/components/npm-stats/DropdownMenu.tsx diff --git a/package.json b/package.json index e46d036f7..a73c632ce 100644 --- a/package.json +++ b/package.json @@ -42,15 +42,13 @@ "prepare": "husky" }, "dependencies": { + "@base-ui/react": "^1.7.0", "@fingerprintjs/fingerprintjs-pro-react": "^2.7.1", "@floating-ui/react": "^0.27.19", "@kapaai/react-sdk": "^0.9.10", "@modelcontextprotocol/sdk": "^1.29.0", "@octokit/graphql": "^9.0.3", "@phosphor-icons/react": "^2.1.10", - "@radix-ui/react-dialog": "^1.1.15", - "@radix-ui/react-dropdown-menu": "^2.1.16", - "@radix-ui/react-tooltip": "^1.2.8", "@react-three/drei": "^10.7.7", "@react-three/fiber": "^9.5.0", "@sentry/browser": "^10.47.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ace138d46..2f6baf7f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,6 +21,9 @@ importers: .: dependencies: + '@base-ui/react': + specifier: ^1.7.0 + version: 1.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@fingerprintjs/fingerprintjs-pro-react': specifier: ^2.7.1 version: 2.7.1 @@ -39,15 +42,6 @@ importers: '@phosphor-icons/react': specifier: ^2.1.10 version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-dialog': - specifier: ^1.1.15 - version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-dropdown-menu': - specifier: ^2.1.16 - version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-tooltip': - specifier: ^1.2.8 - version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@react-three/drei': specifier: ^10.7.7 version: 10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2))(@types/react@19.2.14)(@types/three@0.183.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2) @@ -528,6 +522,33 @@ packages: resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==} engines: {node: '>=6.9.0'} + '@base-ui/react@1.7.0': + resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@date-fns/tz': ^1.2.0 + '@types/react': ^17 || ^18 || ^19 + date-fns: ^4.0.0 + react: ^17 || ^18 || ^19 + react-dom: ^17 || ^18 || ^19 + peerDependenciesMeta: + '@date-fns/tz': + optional: true + '@types/react': + optional: true + date-fns: + optional: true + + '@base-ui/utils@0.3.2': + resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==} + peerDependencies: + '@types/react': ^17 || ^18 || ^19 + react: ^17 || ^18 || ^19 + react-dom: ^17 || ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + '@braintree/sanitize-url@7.1.2': resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==} @@ -1261,15 +1282,27 @@ packages: '@floating-ui/core@1.7.5': resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==} + '@floating-ui/core@1.8.0': + resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==} + '@floating-ui/dom@1.7.6': resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==} + '@floating-ui/dom@1.8.0': + resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==} + '@floating-ui/react-dom@2.1.8': resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' + '@floating-ui/react-dom@2.1.9': + resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@floating-ui/react@0.27.19': resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==} peerDependencies: @@ -1279,6 +1312,9 @@ packages: '@floating-ui/utils@0.2.11': resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} + '@floating-ui/utils@0.2.12': + resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==} + '@google/model-viewer@4.2.0': resolution: {integrity: sha512-RjpAI5cLs9CdvPcMRsOs8Bea/lNmGTTyaPyl16o9Fv6Qn8VSpgBMmXFr/11yb0hTrsojp2dOACEcY77R8hVUVA==} engines: {node: '>=6.0.0'} @@ -2346,32 +2382,6 @@ packages: '@radix-ui/primitive@1.1.3': resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==} - '@radix-ui/react-arrow@1.1.7': - resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-collection@1.1.7': - resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-compose-refs@1.1.2': resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==} peerDependencies: @@ -2403,15 +2413,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-direction@1.1.1': - resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@radix-ui/react-dismissable-layer@1.1.11': resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==} peerDependencies: @@ -2425,19 +2426,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-dropdown-menu@2.1.16': - resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-focus-guards@1.1.3': resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==} peerDependencies: @@ -2469,32 +2457,6 @@ packages: '@types/react': optional: true - '@radix-ui/react-menu@2.1.16': - resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/react-popper@1.2.8': - resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-portal@1.1.9': resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==} peerDependencies: @@ -2547,19 +2509,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-roving-focus@1.1.11': - resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-slot@1.2.3': resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==} peerDependencies: @@ -2578,19 +2527,6 @@ packages: '@types/react': optional: true - '@radix-ui/react-tooltip@1.2.8': - resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-use-callback-ref@1.1.1': resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==} peerDependencies: @@ -2636,40 +2572,6 @@ packages: '@types/react': optional: true - '@radix-ui/react-use-rect@1.1.1': - resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-use-size@1.1.1': - resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==} - peerDependencies: - '@types/react': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - - '@radix-ui/react-visually-hidden@1.2.3': - resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - - '@radix-ui/rect@1.1.1': - resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==} - '@react-three/drei@10.7.7': resolution: {integrity: sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==} peerDependencies: @@ -5984,6 +5886,9 @@ packages: resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==} engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'} + reselect@5.2.0: + resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==} + resend@6.10.0: resolution: {integrity: sha512-i7CwZpYj4Oho1RxsTpLcCUkO08+HiL4NXrm6jLJ2WzJ89UGI8eROSieLONJA3hnUrf1OYnCyfq5F6POnHUMv1Q==} engines: {node: '>=20'} @@ -7050,6 +6955,29 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.28.5 + '@base-ui/react@1.7.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + '@babel/runtime': 7.29.2 + '@base-ui/utils': 0.3.2(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@floating-ui/react-dom': 2.1.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + '@floating-ui/utils': 0.2.12 + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + use-sync-external-store: 1.6.0(react@19.2.3) + optionalDependencies: + '@types/react': 19.2.14 + + '@base-ui/utils@0.3.2(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + '@babel/runtime': 7.29.2 + '@floating-ui/utils': 0.2.12 + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + reselect: 5.2.0 + use-sync-external-store: 1.6.0(react@19.2.3) + optionalDependencies: + '@types/react': 19.2.14 + '@braintree/sanitize-url@7.1.2': {} '@chevrotain/cst-dts-gen@11.1.2': @@ -7498,17 +7426,32 @@ snapshots: dependencies: '@floating-ui/utils': 0.2.11 + '@floating-ui/core@1.8.0': + dependencies: + '@floating-ui/utils': 0.2.12 + '@floating-ui/dom@1.7.6': dependencies: '@floating-ui/core': 1.7.5 '@floating-ui/utils': 0.2.11 + '@floating-ui/dom@1.8.0': + dependencies: + '@floating-ui/core': 1.8.0 + '@floating-ui/utils': 0.2.12 + '@floating-ui/react-dom@2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': dependencies: '@floating-ui/dom': 1.7.6 react: 19.2.3 react-dom: 19.2.3(react@19.2.3) + '@floating-ui/react-dom@2.1.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + '@floating-ui/dom': 1.8.0 + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + '@floating-ui/react@0.27.19(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': dependencies: '@floating-ui/react-dom': 2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -7519,6 +7462,8 @@ snapshots: '@floating-ui/utils@0.2.11': {} + '@floating-ui/utils@0.2.12': {} + '@google/model-viewer@4.2.0(three@0.183.2)': dependencies: '@monogrid/gainmap-js': 3.4.0(three@0.183.2) @@ -8411,27 +8356,6 @@ snapshots: '@radix-ui/primitive@1.1.3': {} - '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - - '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.3)': dependencies: react: 19.2.3 @@ -8466,12 +8390,6 @@ snapshots: '@types/react': 19.2.14 '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.3)': - dependencies: - react: 19.2.3 - optionalDependencies: - '@types/react': 19.2.14 - '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': dependencies: '@radix-ui/primitive': 1.1.3 @@ -8485,21 +8403,6 @@ snapshots: '@types/react': 19.2.14 '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/primitive': 1.1.3 - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.3)': dependencies: react: 19.2.3 @@ -8524,50 +8427,6 @@ snapshots: optionalDependencies: '@types/react': 19.2.14 - '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/primitive': 1.1.3 - '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3) - aria-hidden: 1.2.6 - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - - '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@floating-ui/react-dom': 2.1.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/rect': 1.1.1 - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': dependencies: '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -8606,23 +8465,6 @@ snapshots: '@types/react': 19.2.14 '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/primitive': 1.1.3 - '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.3)': dependencies: '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) @@ -8637,26 +8479,6 @@ snapshots: optionalDependencies: '@types/react': 19.2.14 - '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/primitive': 1.1.3 - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.3) - '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.3)': dependencies: react: 19.2.3 @@ -8691,31 +8513,6 @@ snapshots: optionalDependencies: '@types/react': 19.2.14 - '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.3)': - dependencies: - '@radix-ui/rect': 1.1.1 - react: 19.2.3 - optionalDependencies: - '@types/react': 19.2.14 - - '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.3)': - dependencies: - '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.3) - react: 19.2.3 - optionalDependencies: - '@types/react': 19.2.14 - - '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': - dependencies: - '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) - react: 19.2.3 - react-dom: 19.2.3(react@19.2.3) - optionalDependencies: - '@types/react': 19.2.14 - '@types/react-dom': 19.2.3(@types/react@19.2.14) - - '@radix-ui/rect@1.1.1': {} - '@react-three/drei@10.7.7(@react-three/fiber@9.5.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2))(@types/react@19.2.14)(@types/three@0.183.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(three@0.183.2)': dependencies: '@babel/runtime': 7.29.2 @@ -12243,6 +12040,8 @@ snapshots: transitivePeerDependencies: - supports-color + reselect@5.2.0: {} + resend@6.10.0: dependencies: postal-mime: 2.7.4 diff --git a/src/components/AuthenticatedUserMenu.tsx b/src/components/AuthenticatedUserMenu.tsx index d5a2d2aa4..6a0310a1e 100644 --- a/src/components/AuthenticatedUserMenu.tsx +++ b/src/components/AuthenticatedUserMenu.tsx @@ -37,54 +37,64 @@ export function AuthenticatedUserMenu({ }: AuthenticatedUserMenuProps) { return ( - -
- - -
- + + + + + } + />
{user?.email}
- - - - Account - - - - - - My Showcases - - - {canApiKeys && ( - - - - Integrations + + + Account - + } + /> + + + My Showcases + + } + /> + {canApiKeys && ( + + + Integrations + + } + /> )} {canAdmin && ( - - - - Admin - - + + + Admin + + } + /> )} diff --git a/src/components/AvatarCropModal.tsx b/src/components/AvatarCropModal.tsx index 47772969c..703999432 100644 --- a/src/components/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import * as DialogPrimitive from '@radix-ui/react-dialog' +import { Dialog as DialogPrimitive } from '@base-ui/react/dialog' import Cropper from 'react-easy-crop' import type { Area, Point } from 'react-easy-crop' import { XIcon } from '@phosphor-icons/react' @@ -109,8 +109,8 @@ export function AvatarCropModal({ return ( - - + +
Crop Profile Picture @@ -169,7 +169,7 @@ export function AvatarCropModal({ {isProcessing ? 'Processing...' : 'Save'}
- + ) diff --git a/src/components/BlogAuthorFilter.tsx b/src/components/BlogAuthorFilter.tsx index 4400ee29a..9c22978cd 100644 --- a/src/components/BlogAuthorFilter.tsx +++ b/src/components/BlogAuthorFilter.tsx @@ -34,46 +34,48 @@ export function BlogAuthorFilter({ return (
- - - + + + + + {activeAuthor ?? 'All authors'} + + + + + } + /> {children} - - - + + } + /> - - - + + On this page + + + } + /> {headings.map((heading) => ( - - - - - + + + + } + /> ))} diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx index c30907653..6e2f5e718 100644 --- a/src/components/CopyPageDropdown.tsx +++ b/src/components/CopyPageDropdown.tsx @@ -315,18 +315,20 @@ export function CopyPageDropdown({ )} - - - + + + + } + /> {menuItems.map((item) => ( — e.g. the virtual anchor + // BrandContextMenu positions at the cursor. + nativeButton?: boolean } type DropdownContentProps = { @@ -27,10 +29,10 @@ type DropdownContentProps = { } type DropdownItemProps = { - children: React.ReactNode + children?: React.ReactNode className?: string onSelect?: () => void - asChild?: boolean + render?: React.ReactElement } type DropdownSeparatorProps = { @@ -44,21 +46,23 @@ export function Dropdown({ modal = false, }: DropdownProps) { return ( - + {children} - + ) } export function DropdownTrigger({ - children, + render, className, - asChild = true, + nativeButton, }: DropdownTriggerProps) { return ( - - {children} - + ) } @@ -73,58 +77,62 @@ export function DropdownContent({ onPointerLeave, }: DropdownContentProps) { const content = ( - - {children} - + + + {children} + + ) if (!portal) { return content } - return {content} + return {content} } export function DropdownItem({ children, className, onSelect, - asChild, + render, }: DropdownItemProps) { + const itemClassName = twMerge( + 'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 outline-none', + 'text-sm text-gray-700 dark:text-gray-300', + 'hover:bg-gray-100 dark:hover:bg-gray-700/50', + 'data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-700/50', + 'transition-colors duration-150', + className, + ) + + if (render) { + return ( + + ) + } + return ( - + {children} - + ) } export function DropdownSeparator({ className }: DropdownSeparatorProps) { return ( - ) diff --git a/src/components/LibrariesBrowser.tsx b/src/components/LibrariesBrowser.tsx index 2ce5b985b..7c4ba67b5 100644 --- a/src/components/LibrariesBrowser.tsx +++ b/src/components/LibrariesBrowser.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import * as DialogPrimitive from '@radix-ui/react-dialog' +import { Dialog as DialogPrimitive } from '@base-ui/react/dialog' import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react' import { type Framework } from '~/libraries' import { frameworkOptions } from '~/libraries/frameworks' @@ -141,26 +141,28 @@ export function LibrariesBrowser({
- - - + + {activeFrameworkOption ? ( + + ) : null} + + {activeFrameworkOption + ? activeFrameworkOption.label + : 'All frameworks'} + + + + } + /> { - if (!next) onClose() + onOpenChange={(next, eventDetails) => { + if (next) return + + if (eventDetails.reason === 'outside-press') { + const target = eventDetails.event.target + if (target instanceof Element && target.closest('[role="menu"]')) { + eventDetails.cancel() + return + } + } + + onClose() }} > - - + { - const target = event.detail.originalEvent.target - if (target instanceof Element && target.closest('[role="menu"]')) { - event.preventDefault() - } - }} onClick={(event) => { if (event.target === event.currentTarget) onClose() }} @@ -49,7 +53,7 @@ export function LibrariesOverlay({ - + ) diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx index f04bf8917..039e1c00a 100644 --- a/src/components/LoginModal.tsx +++ b/src/components/LoginModal.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import * as DialogPrimitive from '@radix-ui/react-dialog' +import { Dialog as DialogPrimitive } from '@base-ui/react/dialog' import { XIcon } from '@phosphor-icons/react' import { GithubIcon } from '~/components/icons/GithubIcon' import { GoogleIcon } from '~/components/icons/GoogleIcon' @@ -44,8 +44,8 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) { return ( - - + +
Sign in to continue @@ -73,7 +73,7 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) { Continue with Google
- + ) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 13be13810..4ef059535 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1693,42 +1693,47 @@ function SocialStack() { return ( - - - + + + {stackTop.map(({ label, Icon }, i) => ( + 0 && '-ml-3', + )} + style={{ zIndex: stackTop.length - i }} + > + + + ))} + + + } + /> {SOCIAL_LINKS.map(({ label, href, Icon }) => ( - - - - {label} - - + + + {label} + + } + /> ))} diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx index ecb9a3861..c5ebe153a 100644 --- a/src/components/SearchModal.tsx +++ b/src/components/SearchModal.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { createPortal } from 'react-dom' -import * as DialogPrimitive from '@radix-ui/react-dialog' +import { Dialog as DialogPrimitive } from '@base-ui/react/dialog' import { Command } from 'cmdk' import { twMerge } from 'tailwind-merge' import { @@ -1308,27 +1308,29 @@ function KapaHistoryButton({ } }} > - - - + + + {compact ? ( + Chat history + ) : ( + History + )} + + } + /> - - - + ) : ( + All Libraries + )} + + + } + /> setSelectedLibrary('')} @@ -3231,33 +3235,35 @@ function FrameworkRefinement({ compact = false }: SearchScopePickerProps) { return ( - - - + + {currentFramework && ( + + )} + + {currentFramework + ? capitalize(currentFramework.label) + : 'All Frameworks'} + + + + } + /> handleSelect('')} className="font-bold"> All Frameworks @@ -3363,13 +3369,9 @@ function isSearchModalPortalTarget(target: EventTarget | null) { return target instanceof Element && !!target.closest('.dropdown-content') } -const searchModalTransitionMs = 140 - export function SearchModal() { const { isOpen, closeSearch } = useSearchContext() const contentRef = React.useRef(null) - const bodyPointerEventsRef = React.useRef('') - const [shouldRenderSearch, setShouldRenderSearch] = React.useState(isOpen) const [isFullHeight, setIsFullHeight] = React.useState(() => { if (typeof window === 'undefined') return false return localStorage.getItem('search-full-height') === 'true' @@ -3383,22 +3385,6 @@ export function SearchModal() { }) }, []) - React.useEffect(() => { - if (isOpen) { - setShouldRenderSearch(true) - return - } - - const timeout = window.setTimeout(() => { - setShouldRenderSearch(false) - requestAnimationFrame(() => { - document.body.style.pointerEvents = bodyPointerEventsRef.current - }) - }, searchModalTransitionMs) - - return () => window.clearTimeout(timeout) - }, [isOpen]) - React.useEffect(() => { if (!isOpen) { return @@ -3413,92 +3399,53 @@ export function SearchModal() { return () => cancelAnimationFrame(frame) }, [isOpen]) - React.useEffect(() => { - if (typeof document === 'undefined') { - return - } - - if (isOpen) { - document.body.style.pointerEvents = 'none' - return - } - - const frame = requestAnimationFrame(() => { - document.body.style.pointerEvents = bodyPointerEventsRef.current - }) - - return () => cancelAnimationFrame(frame) - }, [isOpen]) - - React.useEffect(() => { - if (typeof document === 'undefined') { - return - } - - bodyPointerEventsRef.current = - document.body.style.pointerEvents === 'none' - ? '' - : document.body.style.pointerEvents - - return () => { - document.body.style.pointerEvents = bodyPointerEventsRef.current - } - }, []) - - const shouldMountSearch = isOpen || shouldRenderSearch - return ( { - if (!open) { - closeSearch() + onOpenChange={(open, eventDetails) => { + if (open) return + + if ( + eventDetails.reason === 'outside-press' && + isSearchModalPortalTarget(eventDetails.event.target) + ) { + eventDetails.cancel() + return } + + closeSearch() }} > - - {shouldMountSearch ? ( - <> - - { - if (isSearchModalPortalTarget(event.target)) { - event.preventDefault() - } - }} + + + + + Search TanStack + + + Search TanStack and open TanStack AI from the current query. + +
+ - - Search TanStack - - - Search TanStack and open TanStack AI from the current query. - -
- - - - - - -
- - - ) : null} + + + + + +
+ ) diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 84c415beb..e38462738 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -42,34 +42,38 @@ export function Select({ return (
- - - + + } + /> {available.map((option) => ( + {children} ) @@ -616,16 +616,17 @@ function StarterHoverTooltip({ }) { return ( - {children} + - - {content} - + + {content} + + ) diff --git a/src/components/charts/ChartControls.tsx b/src/components/charts/ChartControls.tsx index 3cc5eb1ef..40f1b2756 100644 --- a/src/components/charts/ChartControls.tsx +++ b/src/components/charts/ChartControls.tsx @@ -5,7 +5,7 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from '@radix-ui/react-dropdown-menu' +} from '~/components/npm-stats/DropdownMenu' import { twMerge } from 'tailwind-merge' import { type TimeRange, @@ -44,12 +44,14 @@ export function ChartControls({ return (
- - - + + {timeRangeOptions.find((r) => r.value === timeRange)?.label} + + + } + /> {timeRangeOptions.map(({ value, label }) => ( - - - + + {binningOptions.find((b) => b.value === binType)?.label} + + + } + /> {binningOptions.map(({ value, label }) => (
- - - + + {logo.label} + + + } + /> {BRAND_LOGOS.map((option) => ( - - - + +