@carto/meridian-ds 2.5.4 → 2.5.5

package/CHANGELOG.md

@@ -4,6 +4,13 @@
 
 ## 2.0
 
+### 2.5.5
+
+- Utils files: rename to kebab-case for better naming convention [#291](https://github.com/CartoDB/meridian-ds/pull/291)
+- Add unit tests for utils and hooks [#285](https://github.com/CartoDB/meridian-ds/pull/285)
+- Add unit tests for field components [#287](https://github.com/CartoDB/meridian-ds/pull/287)
+- Support `copyText={null}` in `CopiableComponent` [#296](https://github.com/CartoDB/meridian-ds/pull/296)
+
 ### 2.5.4
 
 - Custom Icons: BulletPointAlt,BulletPointCheckedAlt,ShowNodeResults [#288](https://github.com/CartoDB/meridian-ds/pull/288)

package/dist/components/index.cjs

@@ -245,32 +245,50 @@ const Icon = material.styled(material.Box)(({ theme }) => ({
     }
   }
 }));
-function LabelWithIndicator({
+function _LabelWithIndicator({
   label,
   type,
   icon,
-  inheritSize
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$5, { children: [
-    label,
-    type && /* @__PURE__ */ jsxRuntime.jsx(
-      Indicator,
-      {
-        component: "span",
-        variant: inheritSize ? "inherit" : "caption",
-        color: "textSecondary",
-        weight: "regular",
-        children: type === "required" ? "(required)" : "(optional)"
-      }
-    ),
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon })
-  ] });
+  inheritSize,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  typographyProps
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root$5,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-icon": !!icon,
+      "data-name": "label-with-indicator",
+      children: [
+        label,
+        type && /* @__PURE__ */ jsxRuntime.jsx(
+          Indicator,
+          {
+            component: "span",
+            variant: inheritSize ? "inherit" : "caption",
+            color: "textSecondary",
+            weight: "regular",
+            ...typographyProps,
+            children: type === "required" ? "(required)" : "(optional)"
+          }
+        ),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon })
+      ]
+    }
+  );
 }
-function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
+const LabelWithIndicator = React.forwardRef(_LabelWithIndicator);
+function _PasswordField({ InputProps, size = "small", disabled, ...otherProps }, ref) {
   const intl = reactIntl.useIntl();
   const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
+  const showPasswordLabel = intlConfig.formatMessage({
+    id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.TextField,
     {
@@ -278,18 +296,26 @@ function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
       ref,
       type: showPassword ? "text" : "password",
       size,
+      disabled,
       InputProps: {
         ...InputProps,
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsxRuntime.jsx(
-          material.Tooltip,
+        inputProps: {
+          ...InputProps == null ? void 0 : InputProps.inputProps,
+          role: "textbox"
+        },
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Alert$1.IconButton,
           {
-            title: intlConfig.formatMessage({
-              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
-            }),
-            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {})
+            size,
+            disabled,
+            onClick: handleClickShowPassword,
+            icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}),
+            tooltip: showPasswordLabel,
+            "aria-label": showPasswordLabel
           }
-        ) }) })
-      }
+        ) })
+      },
+      "data-name": "password-field"
     }
   );
 }
@@ -841,7 +867,7 @@ const _CopiableComponent = ({
   const [open, setOpen] = React.useState(false);
   const intl = reactIntl.useIntl();
   const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  const copyTooltipText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
+  const copyTooltipText = copyText === null ? null : copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
   const copySuccessMessage = copiedText || intlConfig.formatMessage({
     id: "c4r.notifications.copiedToClipboard"
   });
@@ -877,7 +903,7 @@ const _CopiableComponent = ({
                   disabled,
                   icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}),
                   "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || copyTooltipText,
+                  "aria-label": ariaLabel || buttonLabel || copyTooltipText || intlConfig.formatMessage({ id: "c4r.button.copy" }),
                   sx: {
                     display: "flex"
                   }
@@ -5263,6 +5289,7 @@ function FilesAction({
       variant: "text",
       color: error ? "default" : "primary",
       disabled,
+      "data-error": error,
       children: buttonText
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -5276,7 +5303,7 @@ function FilesAction({
     }
   ) });
 }
-function UploadFieldBase({
+function _UploadFieldBase({
   name,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   multiple,
@@ -5293,17 +5320,20 @@ function UploadFieldBase({
   size = "small",
   hasFiles,
   cursor = "pointer",
+  "data-testid": dataTestId,
   ...props
-}) {
+}, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledUploadField,
     {
       ...props,
+      ref,
       size,
       error,
       placeholder,
       focused: focused ?? dragOver,
       cursor,
+      "data-testid": dataTestId,
       InputProps: {
         ...InputProps,
         name,
@@ -5323,10 +5353,14 @@ function UploadFieldBase({
             inProgress
           }
         )
-      }
+      },
+      "data-cursor": cursor,
+      "data-drag-over": dragOver,
+      "data-name": "upload-field-base"
     }
   );
 }
+const UploadFieldBase = React.forwardRef(_UploadFieldBase);
 function useFileUpload({
   onChange,
   files,
@@ -5388,6 +5422,7 @@ function useFileUpload({
   const handleReset = (event) => {
     event.stopPropagation();
     setFilesText("");
+    onChange == null ? void 0 : onChange([]);
   };
   const getPlaceholder = React.useMemo(() => {
     const defaultPlaceholder = intlConfig.formatMessage(
@@ -5422,7 +5457,7 @@ function useFileUpload({
   };
 }
 const DEFAULT_ACCEPT = ["application/JSON"];
-function UploadField({
+function _UploadField({
   name,
   buttonText,
   accept: _accept,
@@ -5434,8 +5469,9 @@ function UploadField({
   error,
   focused,
   nativeInputProps,
+  "data-testid": dataTestId,
   ...props
-}) {
+}, ref) {
   const accept = _accept ?? DEFAULT_ACCEPT;
   const uploadInputRef = React.useRef(null);
   const {
@@ -5457,6 +5493,7 @@ function UploadField({
       UploadFieldBase,
       {
         ...props,
+        ref,
         placeholder: getPlaceholder,
         value: filesText,
         error,
@@ -5466,7 +5503,8 @@ function UploadField({
         inProgress,
         hasFiles: Boolean(filesText),
         InputProps: inputEvents,
-        buttonText
+        buttonText,
+        "data-testid": dataTestId
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5485,6 +5523,7 @@ function UploadField({
     )
   ] });
 }
+const UploadField = React.forwardRef(_UploadField);
 exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Alert$1.Alert;

package/dist/components/index.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
 import { useIntl } from "react-intl";
-import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, IconButton, Tooltip, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, ListItemText, ToggleButtonGroup as ToggleButtonGroup$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
 import { u as useImperativeIntl, T as Typography, c as ICON_SIZE_SMALL, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, N as NOTIFICATION_DURATION_IN_MS } from "../TablePaginationActions-C6TVGJM-.js";
 import { a } from "../TablePaginationActions-C6TVGJM-.js";
-import { S as ScreenReaderOnly, I as IconButton$1, A as Alert$1 } from "../Alert-lLA0z7fX.js";
+import { S as ScreenReaderOnly, I as IconButton, A as Alert$1 } from "../Alert-lLA0z7fX.js";
 import { L } from "../Alert-lLA0z7fX.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
@@ -245,32 +245,50 @@ const Icon = styled(Box)(({ theme }) => ({
     }
   }
 }));
-function LabelWithIndicator({
+function _LabelWithIndicator({
   label,
   type,
   icon,
-  inheritSize
-}) {
-  return /* @__PURE__ */ jsxs(Root$5, { children: [
-    label,
-    type && /* @__PURE__ */ jsx(
-      Indicator,
-      {
-        component: "span",
-        variant: inheritSize ? "inherit" : "caption",
-        color: "textSecondary",
-        weight: "regular",
-        children: type === "required" ? "(required)" : "(optional)"
-      }
-    ),
-    icon && /* @__PURE__ */ jsx(Icon, { children: icon })
-  ] });
+  inheritSize,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  typographyProps
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    Root$5,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-icon": !!icon,
+      "data-name": "label-with-indicator",
+      children: [
+        label,
+        type && /* @__PURE__ */ jsx(
+          Indicator,
+          {
+            component: "span",
+            variant: inheritSize ? "inherit" : "caption",
+            color: "textSecondary",
+            weight: "regular",
+            ...typographyProps,
+            children: type === "required" ? "(required)" : "(optional)"
+          }
+        ),
+        icon && /* @__PURE__ */ jsx(Icon, { children: icon })
+      ]
+    }
+  );
 }
-function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
+const LabelWithIndicator = forwardRef(_LabelWithIndicator);
+function _PasswordField({ InputProps, size = "small", disabled, ...otherProps }, ref) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
+  const showPasswordLabel = intlConfig.formatMessage({
+    id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
+  });
   return /* @__PURE__ */ jsx(
     TextField,
     {
@@ -278,18 +296,26 @@ function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
       ref,
       type: showPassword ? "text" : "password",
       size,
+      disabled,
       InputProps: {
         ...InputProps,
-        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsx(
-          Tooltip,
+        inputProps: {
+          ...InputProps == null ? void 0 : InputProps.inputProps,
+          role: "textbox"
+        },
+        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
           {
-            title: intlConfig.formatMessage({
-              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
-            }),
-            children: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {})
+            size,
+            disabled,
+            onClick: handleClickShowPassword,
+            icon: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {}),
+            tooltip: showPasswordLabel,
+            "aria-label": showPasswordLabel
           }
-        ) }) })
-      }
+        ) })
+      },
+      "data-name": "password-field"
     }
   );
 }
@@ -654,7 +680,7 @@ function _MultipleSelectField({
       onChange: handleChange,
       size,
       variant,
-      endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsx(IconButton, { onClick: unselectAll, size, children: /* @__PURE__ */ jsx(Cancel, {}) }) }),
+      endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsx(IconButton$1, { onClick: unselectAll, size, children: /* @__PURE__ */ jsx(Cancel, {}) }) }),
       menuProps: {
         PaperProps: {
           sx: {
@@ -841,7 +867,7 @@ const _CopiableComponent = ({
   const [open, setOpen] = useState(false);
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
-  const copyTooltipText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
+  const copyTooltipText = copyText === null ? null : copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
   const copySuccessMessage = copiedText || intlConfig.formatMessage({
     id: "c4r.notifications.copiedToClipboard"
   });
@@ -871,13 +897,13 @@ const _CopiableComponent = ({
             children: [
               children,
               button && /* @__PURE__ */ jsx(
-                IconButton$1,
+                IconButton,
                 {
                   ...buttonProps,
                   disabled,
                   icon: /* @__PURE__ */ jsx(ContentCopyOutlined, {}),
                   "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || copyTooltipText,
+                  "aria-label": ariaLabel || buttonLabel || copyTooltipText || intlConfig.formatMessage({ id: "c4r.button.copy" }),
                   sx: {
                     display: "flex"
                   }
@@ -957,7 +983,7 @@ function _CopiableInputText({
     onBlur == null ? void 0 : onBlur(event);
   };
   const passwordAdornment = /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-    IconButton$1,
+    IconButton,
     {
       edge: variant !== "standard" ? "end" : void 0,
       onClick: () => setShowText(!showText),
@@ -1729,7 +1755,7 @@ const Menu$1 = styled("div")(({ theme }) => ({
   height: APPBAR_SIZE,
   marginRight: theme.spacing(1.5)
 }));
-const MenuButton = styled(IconButton)(({ theme }) => ({
+const MenuButton = styled(IconButton$1)(({ theme }) => ({
   marginRight: theme.spacing(1),
   "&.MuiButtonBase-root svg path": {
     fill: theme.palette.brand.appBarContrastText
@@ -1974,7 +2000,7 @@ function CodeAreaHeader({
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsx(
-          IconButton$1,
+          IconButton,
           {
             color: "default",
             size,
@@ -2038,7 +2064,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsx(
-      IconButton$1,
+      IconButton,
       {
         color: "default",
         size,
@@ -3122,7 +3148,7 @@ function DialogHeader({
             {
               title: intlConfig.formatMessage({ id: "c4r.button.close" }),
               placement: "left",
-              children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+              children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
             }
           )
         ] })
@@ -3754,7 +3780,7 @@ function ClearButton({
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   return /* @__PURE__ */ jsx(Container, { size, variant, children: /* @__PURE__ */ jsx(
-    IconButton,
+    IconButton$1,
     {
       ...props,
       size,
@@ -3871,7 +3897,7 @@ function DatePicker({
             slots: {
               clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
               openPickerButton: (props2) => /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton$1,
                 {
                   ...props2,
                   size,
@@ -4371,7 +4397,7 @@ function TimePicker({
           slots: {
             clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
             openPickerButton: (props2) => /* @__PURE__ */ jsx(
-              IconButton,
+              IconButton$1,
               {
                 ...props2,
                 size,
@@ -4457,7 +4483,7 @@ function DateTimePicker({
           slots: {
             clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
             openPickerButton: (props2) => /* @__PURE__ */ jsx(
-              IconButton,
+              IconButton$1,
               {
                 ...props2,
                 size,
@@ -4812,7 +4838,7 @@ function _FilterDropdown({
     "data-color": buttonColor
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(IconButton$1, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsx(
       Button,
       {
         ...commonButtonProps,
@@ -5012,7 +5038,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsx(
-              IconButton$1,
+              IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -5255,7 +5281,7 @@ function FilesAction({
   handleOpen,
   inProgress
 }) {
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton$1, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
     Button$1,
     {
       onClick: handleOpen,
@@ -5263,10 +5289,11 @@ function FilesAction({
       variant: "text",
       color: error ? "default" : "primary",
       disabled,
+      "data-error": error,
       children: buttonText
     }
   ) : /* @__PURE__ */ jsx(
-    IconButton,
+    IconButton$1,
     {
       onClick: handleReset,
       size,
@@ -5276,7 +5303,7 @@ function FilesAction({
     }
   ) });
 }
-function UploadFieldBase({
+function _UploadFieldBase({
   name,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   multiple,
@@ -5293,17 +5320,20 @@ function UploadFieldBase({
   size = "small",
   hasFiles,
   cursor = "pointer",
+  "data-testid": dataTestId,
   ...props
-}) {
+}, ref) {
   return /* @__PURE__ */ jsx(
     StyledUploadField,
     {
       ...props,
+      ref,
       size,
       error,
       placeholder,
       focused: focused ?? dragOver,
       cursor,
+      "data-testid": dataTestId,
       InputProps: {
         ...InputProps,
         name,
@@ -5323,10 +5353,14 @@ function UploadFieldBase({
             inProgress
           }
         )
-      }
+      },
+      "data-cursor": cursor,
+      "data-drag-over": dragOver,
+      "data-name": "upload-field-base"
     }
   );
 }
+const UploadFieldBase = forwardRef(_UploadFieldBase);
 function useFileUpload({
   onChange,
   files,
@@ -5388,6 +5422,7 @@ function useFileUpload({
   const handleReset = (event) => {
     event.stopPropagation();
     setFilesText("");
+    onChange == null ? void 0 : onChange([]);
   };
   const getPlaceholder = useMemo(() => {
     const defaultPlaceholder = intlConfig.formatMessage(
@@ -5422,7 +5457,7 @@ function useFileUpload({
   };
 }
 const DEFAULT_ACCEPT = ["application/JSON"];
-function UploadField({
+function _UploadField({
   name,
   buttonText,
   accept: _accept,
@@ -5434,8 +5469,9 @@ function UploadField({
   error,
   focused,
   nativeInputProps,
+  "data-testid": dataTestId,
   ...props
-}) {
+}, ref) {
   const accept = _accept ?? DEFAULT_ACCEPT;
   const uploadInputRef = useRef(null);
   const {
@@ -5457,6 +5493,7 @@ function UploadField({
       UploadFieldBase,
       {
         ...props,
+        ref,
         placeholder: getPlaceholder,
         value: filesText,
         error,
@@ -5466,7 +5503,8 @@ function UploadField({
         inProgress,
         hasFiles: Boolean(filesText),
         InputProps: inputEvents,
-        buttonText
+        buttonText,
+        "data-testid": dataTestId
       }
     ),
     /* @__PURE__ */ jsx(
@@ -5485,6 +5523,7 @@ function UploadField({
     )
   ] });
 }
+const UploadField = forwardRef(_UploadField);
 export {
   AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
@@ -5521,7 +5560,7 @@ export {
   DialogStepper,
   FilterDropdown,
   FilterDropdownMenuItem,
-  IconButton$1 as IconButton,
+  IconButton,
   LabelWithIndicator,
   L as Link,
   Menu,

package/dist/theme/index.cjs

@@ -2,7 +2,7 @@
 var _a, _b, _c, _d, _e, _f, _g, _h;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const material = require("@mui/material");
-const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
+const paletteUtils = require("../palette-utils-B9ybmwiI.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const TablePaginationActions = require("../TablePaginationActions-DAMGtIub.cjs");
 const iconsMaterial = require("@mui/icons-material");

package/dist/theme/index.js

@@ -1,7 +1,7 @@
 var _a, _b, _c, _d, _e, _f, _g, _h;
 import { alpha, Tooltip, responsiveFontSizes, createTheme } from "@mui/material";
-import { c as commonPalette } from "../paletteUtils-BHqJlHm9.js";
-import { g } from "../paletteUtils-BHqJlHm9.js";
+import { c as commonPalette } from "../palette-utils-BHqJlHm9.js";
+import { g } from "../palette-utils-BHqJlHm9.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, e as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../TablePaginationActions-C6TVGJM-.js";
 import { f, N } from "../TablePaginationActions-C6TVGJM-.js";

package/dist/types/components/Autocomplete/Autocomplete/useAutocomplete.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useAutocomplete.test.d.ts.map

package/dist/types/components/Autocomplete/Autocomplete/useAutocomplete.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocomplete.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/Autocomplete/useAutocomplete.test.tsx"],"names":[],"mappings":""}

package/dist/types/components/CodeArea/utils/useCodeAreaAutocompletion.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useCodeAreaAutocompletion.test.d.ts.map

package/dist/types/components/CodeArea/utils/useCodeAreaAutocompletion.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodeAreaAutocompletion.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/CodeArea/utils/useCodeAreaAutocompletion.test.ts"],"names":[],"mappings":""}

package/dist/types/components/CopiableComponent/CopiableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopiableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/CopiableComponent/CopiableComponent.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAwFhD,QAAA,MAAM,iBAAiB,mHAAiC,CAAA;AACxD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"CopiableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/CopiableComponent/CopiableComponent.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAiGhD,QAAA,MAAM,iBAAiB,mHAAiC,CAAA;AACxD,eAAe,iBAAiB,CAAA"}

package/dist/types/components/CopiableComponent/CopiableComponent.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Playground: Story;
 export declare const TypeButton: Story;
 export declare const TypeText: Story;
 export declare const CustomTooltipTexts: Story;
+export declare const WithoutTooltipText: Story;
 //# sourceMappingURL=CopiableComponent.stories.d.ts.map