@carto/meridian-ds 2.1.1-alpha-copiable-input-text.4 → 2.1.1-alpha-copiable-input-text.5

package/dist/components/index.cjs

@@ -2026,10 +2026,12 @@ const _CopiableComponent = ({
   ] });
 };
 const CopiableComponent = React.forwardRef(_CopiableComponent);
-const StyledTextField = material.styled(material.TextField)(() => ({
+const StyledTextField = material.styled(material.TextField, {
+  shouldForwardProp: (prop) => !["isInputFocused"].includes(prop)
+})(({ isInputFocused }) => ({
   "& input": {
-    textOverflow: "unset"
-    // This is needed to avoid scrolling issues in the input
+    pointerEvents: isInputFocused ? "auto" : "none"
+    // Disable pointer events when not focused https://issues.chromium.org/issues/41245282
   }
 }));
 const AdornmentWrapper = material.styled(material.Box, {
@@ -2058,15 +2060,26 @@ function _CopiableInputText({
   onCopied,
   password,
   size = "small",
+  onFocus,
+  onBlur,
   ...rest
 }, ref) {
   const intl = reactIntl.useIntl();
   const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const [showText, setShowText] = React.useState(false);
+  const [isInputFocused, setIsInputFocused] = React.useState(false);
   const inputType = !password ? "text" : showText ? "text" : "password";
   const showTextLabel = intlConfig.formatMessage({
     id: showText ? "c4r.button.hide" : "c4r.button.show"
   });
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
   const passwordAdornment = /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
     Link.IconButton,
     {
@@ -2082,11 +2095,14 @@ function _CopiableInputText({
     StyledTextField,
     {
       ...rest,
+      isInputFocused,
       size,
       value,
       variant,
       InputProps: {
         readOnly: true,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           password ? passwordAdornment : extraEndAdornment,
           /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/index.js

@@ -2026,10 +2026,12 @@ const _CopiableComponent = ({
   ] });
 };
 const CopiableComponent = forwardRef(_CopiableComponent);
-const StyledTextField = styled(TextField)(() => ({
+const StyledTextField = styled(TextField, {
+  shouldForwardProp: (prop) => !["isInputFocused"].includes(prop)
+})(({ isInputFocused }) => ({
   "& input": {
-    textOverflow: "unset"
-    // This is needed to avoid scrolling issues in the input
+    pointerEvents: isInputFocused ? "auto" : "none"
+    // Disable pointer events when not focused https://issues.chromium.org/issues/41245282
   }
 }));
 const AdornmentWrapper = styled(Box, {
@@ -2058,15 +2060,26 @@ function _CopiableInputText({
   onCopied,
   password,
   size = "small",
+  onFocus,
+  onBlur,
   ...rest
 }, ref) {
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   const [showText, setShowText] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
   const inputType = !password ? "text" : showText ? "text" : "password";
   const showTextLabel = intlConfig.formatMessage({
     id: showText ? "c4r.button.hide" : "c4r.button.show"
   });
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
   const passwordAdornment = /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
     IconButton$1,
     {
@@ -2082,11 +2095,14 @@ function _CopiableInputText({
     StyledTextField,
     {
       ...rest,
+      isInputFocused,
       size,
       value,
       variant,
       InputProps: {
         readOnly: true,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
           password ? passwordAdornment : extraEndAdornment,
           /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsx(

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":"AA+HA,QAAA,MAAM,iBAAiB;;8BAtGS,SAAS;;;;;8BAAT,SAAS;;;;;8BAAT,SAAS;;;2DAsGe,CAAA;AACxD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"CopiableInputText.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Copy/CopiableInputText.tsx"],"names":[],"mappings":"AAoJA,QAAA,MAAM,iBAAiB;;8BA9Hc,SAAS;;;;;8BAAT,SAAS;;;;;8BAAT,SAAS;;;2DA8HU,CAAA;AACxD,eAAe,iBAAiB,CAAA"}

package/package.json

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