From 2a2d7e5dcf3c5cc312e1445311f1a8afcde237cb Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Wed, 19 Feb 2025 17:11:04 +0800 Subject: [PATCH] Add "use client" to all potentially interactive components to enable support for Server Components (#222) * Testing combobox with Radix UI * combobox testing * Set portal width based on trigger * Radix UI combobox testing * Test ariakit for combobox * Working Comboxbox using Ariakit * Update combobox based on feedback remove "old" radix-ui combobox testing * Tabindex on selectboxes in list * autofocus * FIx focus shift Fixed issue where focus shifted to input field after selecting item with keyboard. Possibly also fixed weird focus border on zoomed out screens? * use outline in place of border fix disabled text colors * Add font size to combobox input to follow design system * Add animation to combobox open/close * Update nvmrc to v20 * Added deprecation warning in console * Add max height and scroll behaviour * Add deprecation warning to mullti autocomplete * Adjustments after testing z-index, defaultOptions, dropdownHeight, prefixIcon, some colors and replace matchSorter with regular array.filter (to see if it improves performance) * Add "use client" to all potentially interactive components to enable support for Server Components * Add note on server components i README * Flag for hidePrefixIcon Adjust input padding to accommodate for no icon * Add "use client" to MdCombobox * Update README.md * Remove combobox stuff * Remove combobox stuff * Remove combobox stuff * Update package-lock --------- Co-authored-by: Ola Helland-Pedersen --- README.md | 4 + package-lock.json | 374 +----------------- .../react/src/accordion/MdAccordionItem.tsx | 2 + packages/react/src/button/MdButton.tsx | 2 + packages/react/src/chips/MdFilterChip.tsx | 3 +- packages/react/src/chips/MdInputChip.tsx | 3 +- packages/react/src/fileList/MdFileList.tsx | 3 +- .../react/src/formElements/MdAutocomplete.tsx | 2 + .../react/src/formElements/MdCheckbox.tsx | 2 + .../src/formElements/MdCheckboxGroup.tsx | 3 +- .../react/src/formElements/MdFileUpload.tsx | 8 +- packages/react/src/formElements/MdInput.tsx | 2 + .../src/formElements/MdMultiAutocomplete.tsx | 2 + .../react/src/formElements/MdMultiSelect.tsx | 2 + .../react/src/formElements/MdRadioButton.tsx | 2 + .../react/src/formElements/MdRadioGroup.tsx | 2 + packages/react/src/formElements/MdSelect.tsx | 2 + .../react/src/formElements/MdTextArea.tsx | 3 +- packages/react/src/help/MdHelpButton.tsx | 2 + .../react/src/iconButton/MdIconButton.tsx | 2 + packages/react/src/infoTag/MdInfoTag.tsx | 2 + packages/react/src/link/MdLink.tsx | 2 + .../react/src/messages/MdAlertMessage.tsx | 2 + packages/react/src/modal/MdModal.tsx | 2 + packages/react/src/stepper/MdStepper.tsx | 2 + packages/react/src/tabs/MdTabTitle.tsx | 2 + packages/react/src/tabs/MdTabs.tsx | 2 + packages/react/src/tiles/MdTile.tsx | 2 + packages/react/src/tiles/MdTileVertical.tsx | 2 + packages/react/src/toggle/MdToggle.tsx | 2 + packages/react/src/tooltip/MdTooltip.tsx | 2 + .../react/src/utils/MdClickOutsideWrapper.tsx | 2 + 32 files changed, 70 insertions(+), 379 deletions(-) diff --git a/README.md b/README.md index 56bd4899..37efe59c 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,10 @@ Disse kan legges i `package.json` til eget prosjekt slik: Alle pull requests krever nå at de legges på en label (`major`, `minor` eller `patch`). Disse vil brukes for å automatisk bumpe pakke versjonene før de publiseres til npm. Labels er fortsatt påkrevd selv om pakkene ikke berøres (f.eks. bare storybook endringer), men dette vil heller ikke kjøre workflowene som bumper pakker og dytter til npm. +### Støtte for rammeverk som bruker React Server Components + +For å støtte rammeverk som bruker Server Components, som f.eks. Next.js, legges en `use client` på toppen av alle komponentfiler som kan inneholde interaktiv JavaScript som kun kan kjøre på klienten. Typisk er dette event handlers som `onClick`, React Hooks som `useState` og `useEffect`, samt browser-APIer som `window`. Les mer på [React sin dokumentasjon](https://react.dev/reference/rsc/use-client). + ### Releases Når prosjektet har fått relevante endringer, eks. en major med breaking changes, eller nye komponenter, eller viktige endringer i eksisterende komponenter, kan det gjøres en release. diff --git a/package-lock.json b/package-lock.json index a16ba8c8..19046b15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2058,9 +2058,9 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz", - "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==", + "version": "7.26.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz", + "integrity": "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==", "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" @@ -2176,70 +2176,6 @@ "node": ">=10.0.0" } }, - "node_modules/@esbuild/aix-ppc64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz", - "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/android-arm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz", - "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz", - "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz", - "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, "node_modules/@esbuild/darwin-arm64": { "version": "0.24.0", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz", @@ -2256,310 +2192,6 @@ "node": ">=18" } }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz", - "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz", - "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz", - "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz", - "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz", - "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz", - "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz", - "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz", - "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz", - "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz", - "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz", - "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz", - "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz", - "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/openbsd-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz", - "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz", - "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz", - "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz", - "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz", - "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz", - "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", diff --git a/packages/react/src/accordion/MdAccordionItem.tsx b/packages/react/src/accordion/MdAccordionItem.tsx index 60e2827e..354b9ba6 100644 --- a/packages/react/src/accordion/MdAccordionItem.tsx +++ b/packages/react/src/accordion/MdAccordionItem.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useState } from 'react'; import MdMinusIcon from '../icons/MdMinusIcon'; diff --git a/packages/react/src/button/MdButton.tsx b/packages/react/src/button/MdButton.tsx index 9a4834d2..3aeeb0c5 100644 --- a/packages/react/src/button/MdButton.tsx +++ b/packages/react/src/button/MdButton.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; diff --git a/packages/react/src/chips/MdFilterChip.tsx b/packages/react/src/chips/MdFilterChip.tsx index 44549057..8190f744 100644 --- a/packages/react/src/chips/MdFilterChip.tsx +++ b/packages/react/src/chips/MdFilterChip.tsx @@ -1,6 +1,7 @@ +'use client'; + import classnames from 'classnames'; import React, { useId } from 'react'; - import MdCheckIcon from '../icons/MdCheckIcon'; export interface MdFilterChipProps extends React.ButtonHTMLAttributes { diff --git a/packages/react/src/chips/MdInputChip.tsx b/packages/react/src/chips/MdInputChip.tsx index 06b27f56..48ecc313 100644 --- a/packages/react/src/chips/MdInputChip.tsx +++ b/packages/react/src/chips/MdInputChip.tsx @@ -1,6 +1,7 @@ +'use client'; + import classnames from 'classnames'; import React, { useId } from 'react'; - import MdXIcon from '../icons/MdXIcon'; export interface MdInputChipProps extends React.ButtonHTMLAttributes { diff --git a/packages/react/src/fileList/MdFileList.tsx b/packages/react/src/fileList/MdFileList.tsx index ac39b67f..39223188 100644 --- a/packages/react/src/fileList/MdFileList.tsx +++ b/packages/react/src/fileList/MdFileList.tsx @@ -1,6 +1,7 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; - import MdIconButton from '../iconButton/MdIconButton'; import MdDeleteIcon from '../icons/MdDeleteIcon'; import MdDocIcon from '../icons/MdDocIcon'; diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx index 385c8b2b..321acf28 100644 --- a/packages/react/src/formElements/MdAutocomplete.tsx +++ b/packages/react/src/formElements/MdAutocomplete.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useRef, useState } from 'react'; import MdHelpButton from '../help/MdHelpButton'; diff --git a/packages/react/src/formElements/MdCheckbox.tsx b/packages/react/src/formElements/MdCheckbox.tsx index b524b0db..4c7601b9 100644 --- a/packages/react/src/formElements/MdCheckbox.tsx +++ b/packages/react/src/formElements/MdCheckbox.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId } from 'react'; diff --git a/packages/react/src/formElements/MdCheckboxGroup.tsx b/packages/react/src/formElements/MdCheckboxGroup.tsx index e17153fe..ec967bc3 100644 --- a/packages/react/src/formElements/MdCheckboxGroup.tsx +++ b/packages/react/src/formElements/MdCheckboxGroup.tsx @@ -1,5 +1,6 @@ -import classnames from 'classnames'; +'use client'; +import classnames from 'classnames'; import React, { useId, useState } from 'react'; import MdHelpButton from '../help/MdHelpButton'; import MdHelpText from '../help/MdHelpText'; diff --git a/packages/react/src/formElements/MdFileUpload.tsx b/packages/react/src/formElements/MdFileUpload.tsx index 8a8d6026..210a7b92 100644 --- a/packages/react/src/formElements/MdFileUpload.tsx +++ b/packages/react/src/formElements/MdFileUpload.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useEffect, useRef } from 'react'; import MdButton from '../button/MdButton'; @@ -117,7 +119,7 @@ const MdFileUpload: React.FunctionComponent = ({ return inputRef.current?.click(); }} > - {uploadTexts && uploadTexts[1] ? uploadTexts[1] : 'velg fra denne maskinen'} + {uploadTexts && uploadTexts[1] ? uploadTexts[1] : 'velg fra denne maskinen'}
Antall {imagesOnly ? 'bilder' : 'filer'}: {files.length} {!multiple ? '/ 1' : ''} @@ -159,11 +161,11 @@ const MdFileUpload: React.FunctionComponent = ({ {cancelButtonText} - + {uploadButtonText}
- )} + )} ); }; diff --git a/packages/react/src/formElements/MdInput.tsx b/packages/react/src/formElements/MdInput.tsx index 9c1e92e5..31660609 100644 --- a/packages/react/src/formElements/MdInput.tsx +++ b/packages/react/src/formElements/MdInput.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useState } from 'react'; import MdHelpButton from '../help/MdHelpButton'; diff --git a/packages/react/src/formElements/MdMultiAutocomplete.tsx b/packages/react/src/formElements/MdMultiAutocomplete.tsx index 0ab70246..63c96f8e 100644 --- a/packages/react/src/formElements/MdMultiAutocomplete.tsx +++ b/packages/react/src/formElements/MdMultiAutocomplete.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useRef, useState } from 'react'; import MdInputChip from '../chips/MdInputChip'; diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx index 2f182c60..ee85b353 100644 --- a/packages/react/src/formElements/MdMultiSelect.tsx +++ b/packages/react/src/formElements/MdMultiSelect.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useRef, useState } from 'react'; import MdInputChip from '../chips/MdInputChip'; diff --git a/packages/react/src/formElements/MdRadioButton.tsx b/packages/react/src/formElements/MdRadioButton.tsx index f535314a..02b59ad9 100644 --- a/packages/react/src/formElements/MdRadioButton.tsx +++ b/packages/react/src/formElements/MdRadioButton.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId } from 'react'; diff --git a/packages/react/src/formElements/MdRadioGroup.tsx b/packages/react/src/formElements/MdRadioGroup.tsx index 4221ede1..3ac3c209 100644 --- a/packages/react/src/formElements/MdRadioGroup.tsx +++ b/packages/react/src/formElements/MdRadioGroup.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useState } from 'react'; import MdHelpButton from '../help/MdHelpButton'; diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx index ca448efe..83e8a964 100644 --- a/packages/react/src/formElements/MdSelect.tsx +++ b/packages/react/src/formElements/MdSelect.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useEffect, useId, useRef, useState } from 'react'; import MdHelpButton from '../help/MdHelpButton'; diff --git a/packages/react/src/formElements/MdTextArea.tsx b/packages/react/src/formElements/MdTextArea.tsx index 677cbcc2..e54ac098 100644 --- a/packages/react/src/formElements/MdTextArea.tsx +++ b/packages/react/src/formElements/MdTextArea.tsx @@ -1,6 +1,7 @@ +'use client'; + import classnames from 'classnames'; import React, { useId, useState } from 'react'; - import MdHelpButton from '../help/MdHelpButton'; import MdHelpText from '../help/MdHelpText'; diff --git a/packages/react/src/help/MdHelpButton.tsx b/packages/react/src/help/MdHelpButton.tsx index 843fe714..975565e3 100644 --- a/packages/react/src/help/MdHelpButton.tsx +++ b/packages/react/src/help/MdHelpButton.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; import MdHelpIcon from '../icons/MdHelpIcon64'; diff --git a/packages/react/src/iconButton/MdIconButton.tsx b/packages/react/src/iconButton/MdIconButton.tsx index 43bd0e30..bfb84e25 100644 --- a/packages/react/src/iconButton/MdIconButton.tsx +++ b/packages/react/src/iconButton/MdIconButton.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; import MdTooltip from '../tooltip/MdTooltip'; diff --git a/packages/react/src/infoTag/MdInfoTag.tsx b/packages/react/src/infoTag/MdInfoTag.tsx index 0f7e66cb..edfbe54c 100644 --- a/packages/react/src/infoTag/MdInfoTag.tsx +++ b/packages/react/src/infoTag/MdInfoTag.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; import MdCancelIcon from '../icons/MdCancelIcon'; diff --git a/packages/react/src/link/MdLink.tsx b/packages/react/src/link/MdLink.tsx index 87827248..7e03e590 100644 --- a/packages/react/src/link/MdLink.tsx +++ b/packages/react/src/link/MdLink.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { forwardRef } from 'react'; diff --git a/packages/react/src/messages/MdAlertMessage.tsx b/packages/react/src/messages/MdAlertMessage.tsx index 0c3a70a4..8fedb3ff 100644 --- a/packages/react/src/messages/MdAlertMessage.tsx +++ b/packages/react/src/messages/MdAlertMessage.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; import MdIconButton from '../iconButton/MdIconButton'; diff --git a/packages/react/src/modal/MdModal.tsx b/packages/react/src/modal/MdModal.tsx index 3a58842a..f74d18a1 100644 --- a/packages/react/src/modal/MdModal.tsx +++ b/packages/react/src/modal/MdModal.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useEffect, useRef } from 'react'; import MdIconButton from '../iconButton/MdIconButton'; diff --git a/packages/react/src/stepper/MdStepper.tsx b/packages/react/src/stepper/MdStepper.tsx index f196dc29..c1baf5a9 100644 --- a/packages/react/src/stepper/MdStepper.tsx +++ b/packages/react/src/stepper/MdStepper.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import MdCheckIcon from '../icons/MdCheckIcon'; diff --git a/packages/react/src/tabs/MdTabTitle.tsx b/packages/react/src/tabs/MdTabTitle.tsx index ab9bc5f4..85471ee7 100644 --- a/packages/react/src/tabs/MdTabTitle.tsx +++ b/packages/react/src/tabs/MdTabTitle.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; import MdInputChip from '../chips/MdInputChip'; diff --git a/packages/react/src/tabs/MdTabs.tsx b/packages/react/src/tabs/MdTabs.tsx index d78f5707..18cda7b3 100644 --- a/packages/react/src/tabs/MdTabs.tsx +++ b/packages/react/src/tabs/MdTabs.tsx @@ -1,3 +1,5 @@ +'use client'; + import React, { useState } from 'react'; import MdTabTitle from './MdTabTitle'; import type { ReactElement, ReactNode } from 'react'; diff --git a/packages/react/src/tiles/MdTile.tsx b/packages/react/src/tiles/MdTile.tsx index 84d0593b..3b1fc4f3 100644 --- a/packages/react/src/tiles/MdTile.tsx +++ b/packages/react/src/tiles/MdTile.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; import MdChevronIcon from '../icons/MdChevronIcon'; diff --git a/packages/react/src/tiles/MdTileVertical.tsx b/packages/react/src/tiles/MdTileVertical.tsx index b8e18f79..97ce036f 100644 --- a/packages/react/src/tiles/MdTileVertical.tsx +++ b/packages/react/src/tiles/MdTileVertical.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React from 'react'; diff --git a/packages/react/src/toggle/MdToggle.tsx b/packages/react/src/toggle/MdToggle.tsx index 999ca3ad..4c4c02d7 100644 --- a/packages/react/src/toggle/MdToggle.tsx +++ b/packages/react/src/toggle/MdToggle.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useId } from 'react'; export interface MdToggleProps extends React.InputHTMLAttributes { diff --git a/packages/react/src/tooltip/MdTooltip.tsx b/packages/react/src/tooltip/MdTooltip.tsx index 15736df9..cee66572 100644 --- a/packages/react/src/tooltip/MdTooltip.tsx +++ b/packages/react/src/tooltip/MdTooltip.tsx @@ -1,3 +1,5 @@ +'use client'; + import classnames from 'classnames'; import React, { useState } from 'react'; diff --git a/packages/react/src/utils/MdClickOutsideWrapper.tsx b/packages/react/src/utils/MdClickOutsideWrapper.tsx index 18cb345e..baecd0d7 100644 --- a/packages/react/src/utils/MdClickOutsideWrapper.tsx +++ b/packages/react/src/utils/MdClickOutsideWrapper.tsx @@ -1,3 +1,5 @@ +'use client'; + import React, { useEffect, useRef } from 'react'; export interface MdClickOutsideWrapperProps {