@livechat/design-system-react-components 1.0.0-alpha.56 → 1.0.0-alpha.57

package/dist/dsrc.es.js

@@ -334,6 +334,17 @@ const Popover = ({
     }
     prevVisibleState.current = visible;
   }, [visible]);
+  React.useEffect(() => {
+    const handleHideOnEscape = (event) => {
+      if (closeOnEsc && event.key === "Escape") {
+        setVisibility(false);
+      }
+    };
+    document.addEventListener("keydown", handleHideOnEscape);
+    return () => {
+      document.removeEventListener("keydown", handleHideOnEscape);
+    };
+  }, [closeOnEsc]);
   React.useEffect(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return;
@@ -349,17 +360,10 @@ const Popover = ({
       setVisibility(false);
     }
   }
-  const handleHideOnEscape = (event) => {
-    if (closeOnEsc && event.key === "Escape") {
-      setVisibility(false);
-    }
-  };
   React.useEffect(() => {
     document.addEventListener("mousedown", handleDocumentClick);
-    document.addEventListener("keydown", handleHideOnEscape);
     return () => {
       document.removeEventListener("mousedown", handleDocumentClick);
-      document.removeEventListener("keydown", handleHideOnEscape);
     };
   }, []);
   const mergedClassNames = cx(cssStyles["popover"], className, {
@@ -2028,9 +2032,7 @@ const Input = React.forwardRef((_A, ref) => {
     className: mergedClassNames,
     "aria-disabled": disabled,
     "tab-index": "0"
-  }, shouldRenderLeftIcon && renderIcon(icon2, disabled), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
-    "data-testid": "input"
-  }, inputProps), {
+  }, shouldRenderLeftIcon && renderIcon(icon2, disabled), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
     ref,
     onFocus: (e) => {
       setIsFocused(true);
@@ -3598,15 +3600,24 @@ const tagSeparatorKeys = [
   KeyCodes.comma
 ];
 const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
-const TagInput = ({
-  id,
-  tags,
-  onChange,
-  validator,
-  error,
-  placeholder,
-  size = "medium"
-}) => {
+const TagInput = (_Y) => {
+  var _Z = _Y, {
+    id,
+    tags,
+    onChange,
+    validator,
+    error,
+    placeholder,
+    size = "medium"
+  } = _Z, props = __objRest(_Z, [
+    "id",
+    "tags",
+    "onChange",
+    "validator",
+    "error",
+    "placeholder",
+    "size"
+  ]);
   const mergedClassNames = cx(styles$6[baseClass$b], {
     [styles$6[`${baseClass$b}--error`]]: error
   });
@@ -3663,7 +3674,7 @@ const TagInput = ({
     inputRef,
     validator,
     size
-  }, tag2)), /* @__PURE__ */ React.createElement("input", {
+  }, tag2)), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
     id,
     ref: inputRef,
     className: inputClassNames,
@@ -3672,7 +3683,7 @@ const TagInput = ({
     onChange: onInputChange,
     onKeyDown: onInputKeyDown,
     onPaste
-  })), error && /* @__PURE__ */ React.createElement(FieldError, null, error));
+  }))), error && /* @__PURE__ */ React.createElement(FieldError, null, error));
 };
 const emailRegex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/i;
 const defaultPlaceholder = "name@company.com";
@@ -3743,15 +3754,15 @@ const iconConfig = {
   }
 };
 const baseClass$a = "toast";
-const Toast = (_Y) => {
-  var _Z = _Y, {
+const Toast = (__) => {
+  var _$ = __, {
     action,
     className,
     children,
     removable,
     kind = "info",
     onClose
-  } = _Z, divProps = __objRest(_Z, [
+  } = _$, divProps = __objRest(_$, [
     "action",
     "className",
     "children",
@@ -3892,6 +3903,14 @@ const Tooltip = (props) => {
     ],
     placement
   });
+  const handleVisibilityChange = (newVisibility) => {
+    if (newVisibility) {
+      onOpen == null ? void 0 : onOpen();
+    } else {
+      onClose == null ? void 0 : onClose();
+    }
+    setVisibility(newVisibility);
+  };
   React.useEffect(() => {
     referenceElement && reference(referenceElement);
   }, [reference, referenceElement]);
@@ -3916,29 +3935,25 @@ const Tooltip = (props) => {
     isHovered.current = false;
     void sleep(hoverOutDelayTimeout).then(() => {
       if (!isHovered.current) {
-        setVisibility(false);
+        handleVisibilityChange(false);
       }
     });
   };
   const handleOpen = () => {
-    if (onOpen)
-      onOpen();
     if (!isManaged) {
-      setVisibility(true);
+      handleVisibilityChange(true);
     }
   };
   const handleClose = () => {
-    if (onClose)
-      onClose();
     if (!isManaged) {
-      setVisibility(false);
+      handleVisibilityChange(false);
     }
   };
   const handleMouseEnter = () => {
     if (triggerOnClick || isManaged)
       return;
     isHovered.current = true;
-    setVisibility(true);
+    handleVisibilityChange(true);
   };
   const handleCloseAction = (event) => {
     if (event instanceof KeyboardEvent && event.key === "Escape") {
@@ -4301,8 +4316,8 @@ var styles$3 = {
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
 };
 const baseClass$3 = "textarea";
-const Textarea = React.forwardRef((__, ref) => {
-  var _$ = __, { className, error } = _$, textareaProps = __objRest(_$, ["className", "error"]);
+const Textarea = React.forwardRef((_aa, ref) => {
+  var _ba = _aa, { className, error } = _ba, textareaProps = __objRest(_ba, ["className", "error"]);
   const { disabled, onBlur, onFocus } = textareaProps;
   const [isFocused, setIsFocused] = React.useState(false);
   const mergedClassNames = cx(className, styles$3[baseClass$3], {