@carto/meridian-ds 2.1.0-alpha-copiable-input-text.1 → 2.1.0-alpha-copiable-input-text.3

package/dist/components/index.cjs

@@ -1953,11 +1953,11 @@ const _CopiableComponent = ({
   const [open, setOpen] = React.useState(false);
   const intl = reactIntl.useIntl();
   const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  const defaultCopyText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
-  const defaultCopiedText = copiedText || intlConfig.formatMessage({
+  const copyTooltipText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
+  const copySuccessMessage = copiedText || intlConfig.formatMessage({
     id: "c4r.notifications.copiedToClipboard"
   });
-  const { copy } = useCopyValue(defaultCopyText, defaultCopiedText);
+  const { copy } = useCopyValue(copyTooltipText, copySuccessMessage);
   const handleClick = (e) => {
     e.preventDefault();
     copy(value).then(() => {
@@ -1969,7 +1969,7 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Tooltip,
       {
-        title: defaultCopyText,
+        title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1989,7 +1989,7 @@ const _CopiableComponent = ({
                   disabled,
                   icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}),
                   "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || defaultCopyText,
+                  "aria-label": ariaLabel || buttonLabel || copyTooltipText,
                   sx: {
                     display: "flex"
                   }
@@ -2008,12 +2008,18 @@ const _CopiableComponent = ({
         closeable: false,
         autoHideDuration: 4e3,
         onClose: () => setOpen(false),
-        children: defaultCopiedText
+        children: copySuccessMessage
       }
     )
   ] });
 };
 const CopiableComponent = React.forwardRef(_CopiableComponent);
+const StyledTextField = material.styled(material.TextField)(() => ({
+  "& input": {
+    textOverflow: "unset"
+    // This is needed to avoid scrolling issues in the input
+  }
+}));
 const AdornmentWrapper = material.styled(material.Box, {
   shouldForwardProp: (prop) => !["size", "variant"].includes(prop)
 })(({ variant, size, theme }) => ({
@@ -2049,21 +2055,19 @@ function _CopiableInputText({
   const showTextLabel = intlConfig.formatMessage({
     id: showText ? "c4r.button.hide" : "c4r.button.show"
   });
-  const passwordAdornment = React.useMemo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Link.IconButton,
-      {
-        edge: variant !== "standard" ? "end" : void 0,
-        onClick: () => setShowText(!showText),
-        size,
-        icon: showText ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}),
-        tooltip: showTextLabel,
-        "aria-label": showTextLabel
-      }
-    ) });
-  }, [showTextLabel, showText, size, variant]);
+  const passwordAdornment = /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Link.IconButton,
+    {
+      edge: variant !== "standard" ? "end" : void 0,
+      onClick: () => setShowText(!showText),
+      size,
+      icon: showText ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}),
+      tooltip: showTextLabel,
+      "aria-label": showTextLabel
+    }
+  ) });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    material.TextField,
+    StyledTextField,
     {
       ...rest,
       size,

package/dist/components/index.js

@@ -1953,11 +1953,11 @@ const _CopiableComponent = ({
   const [open, setOpen] = useState(false);
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
-  const defaultCopyText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
-  const defaultCopiedText = copiedText || intlConfig.formatMessage({
+  const copyTooltipText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
+  const copySuccessMessage = copiedText || intlConfig.formatMessage({
     id: "c4r.notifications.copiedToClipboard"
   });
-  const { copy } = useCopyValue(defaultCopyText, defaultCopiedText);
+  const { copy } = useCopyValue(copyTooltipText, copySuccessMessage);
   const handleClick = (e) => {
     e.preventDefault();
     copy(value).then(() => {
@@ -1969,7 +1969,7 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsx(
       Tooltip,
       {
-        title: defaultCopyText,
+        title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
         children: /* @__PURE__ */ jsxs(
@@ -1989,7 +1989,7 @@ const _CopiableComponent = ({
                   disabled,
                   icon: /* @__PURE__ */ jsx(ContentCopyOutlined, {}),
                   "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || defaultCopyText,
+                  "aria-label": ariaLabel || buttonLabel || copyTooltipText,
                   sx: {
                     display: "flex"
                   }
@@ -2008,12 +2008,18 @@ const _CopiableComponent = ({
         closeable: false,
         autoHideDuration: 4e3,
         onClose: () => setOpen(false),
-        children: defaultCopiedText
+        children: copySuccessMessage
       }
     )
   ] });
 };
 const CopiableComponent = forwardRef(_CopiableComponent);
+const StyledTextField = styled(TextField)(() => ({
+  "& input": {
+    textOverflow: "unset"
+    // This is needed to avoid scrolling issues in the input
+  }
+}));
 const AdornmentWrapper = styled(Box, {
   shouldForwardProp: (prop) => !["size", "variant"].includes(prop)
 })(({ variant, size, theme }) => ({
@@ -2049,21 +2055,19 @@ function _CopiableInputText({
   const showTextLabel = intlConfig.formatMessage({
     id: showText ? "c4r.button.hide" : "c4r.button.show"
   });
-  const passwordAdornment = useMemo(() => {
-    return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-      IconButton$1,
-      {
-        edge: variant !== "standard" ? "end" : void 0,
-        onClick: () => setShowText(!showText),
-        size,
-        icon: showText ? /* @__PURE__ */ jsx(VisibilityOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOffOutlined, {}),
-        tooltip: showTextLabel,
-        "aria-label": showTextLabel
-      }
-    ) });
-  }, [showTextLabel, showText, size, variant]);
+  const passwordAdornment = /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      edge: variant !== "standard" ? "end" : void 0,
+      onClick: () => setShowText(!showText),
+      size,
+      icon: showText ? /* @__PURE__ */ jsx(VisibilityOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOffOutlined, {}),
+      tooltip: showTextLabel,
+      "aria-label": showTextLabel
+    }
+  ) });
   return /* @__PURE__ */ jsx(
-    TextField,
+    StyledTextField,
     {
       ...rest,
       size,

package/dist/types/components/atoms/Copy/CopiableInputText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopiableInputText.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Copy/CopiableInputText.tsx"],"names":[],"mappings":"AA2HA,QAAA,MAAM,iBAAiB;;8BApGU,SAC5B;;;;;8BAD4B,SAC5B;;;;;8BAD4B,SAC5B;;;2DAmGmD,CAAA;AACxD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"CopiableInputText.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Copy/CopiableInputText.tsx"],"names":[],"mappings":"AA+HA,QAAA,MAAM,iBAAiB;;8BAtGS,SAAS;;;;;8BAAT,SAAS;;;;;8BAAT,SAAS;;;2DAsGe,CAAA;AACxD,eAAe,iBAAiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.1.0-alpha-copiable-input-text.1",
+  "version": "2.1.0-alpha-copiable-input-text.3",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {