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

package/dist/dsrc.es.js

@@ -37,7 +37,7 @@ import * as React from "react";
 import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
 import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
-import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Search, LockBlack, Refresh, Error as Error2 } from "@livechat/design-system-icons/react/material";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Check, Search, LockBlack, Refresh, Error as Error2 } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import { getContrast } from "polished";
 import ReactDayPicker from "react-day-picker";
@@ -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, {
@@ -1190,19 +1194,19 @@ const FieldDescription = (_o) => {
 };
 const checkbox = "lc-Checkbox-module__checkbox___G7nTf";
 const checkbox__label = "lc-Checkbox-module__checkbox__label___-o01x";
-const checkbox__square = "lc-Checkbox-module__checkbox__square___MHUyd";
-const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
-const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
 const checkbox__text = "lc-Checkbox-module__checkbox__text___P2SIq";
+const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
+const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
+const checkbox__square = "lc-Checkbox-module__checkbox__square___MHUyd";
 const checkbox__helper = "lc-Checkbox-module__checkbox__helper___YSJ-n";
 var styles$u = {
   checkbox,
   checkbox__label,
-  checkbox__square,
+  checkbox__text,
+  checkbox__input,
   checkbox__checkmark,
   "checkbox--selected": "lc-Checkbox-module__checkbox--selected___S2vqY",
-  checkbox__input,
-  checkbox__text,
+  checkbox__square,
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
@@ -1216,20 +1220,13 @@ const Checkbox = React.forwardRef((_q, ref) => {
     })
   }, /* @__PURE__ */ React.createElement("label", {
     className: styles$u[`${baseClass$D}__label`]
-  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
+  }, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
     ref,
     checked,
     disabled,
     className: styles$u[`${baseClass$D}__input`],
     type: "checkbox"
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: styles$u[`${baseClass$D}__square`]
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    source: Check,
-    kind: "inverted",
-    size: "xsmall",
-    className: styles$u[`${baseClass$D}__checkmark`]
-  }))), children && /* @__PURE__ */ React.createElement(Text, {
+  })), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
     className: styles$u[`${baseClass$D}__text`]
@@ -2035,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);
@@ -3605,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
   });
@@ -3670,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,
@@ -3679,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";
@@ -3750,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",
@@ -3899,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]);
@@ -3923,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") {
@@ -4308,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], {