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

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";
@@ -350,18 +350,16 @@ const Popover = ({
     }
   }
   const handleHideOnEscape = (event) => {
-    if (event.key === "Escape") {
+    if (closeOnEsc && event.key === "Escape") {
       setVisibility(false);
     }
   };
   React.useEffect(() => {
     document.addEventListener("mousedown", handleDocumentClick);
-    if (closeOnEsc) {
-      document.addEventListener("keydown", handleHideOnEscape);
-    }
+    document.addEventListener("keydown", handleHideOnEscape);
     return () => {
-      document.removeEventListener("keydown", handleHideOnEscape);
       document.removeEventListener("mousedown", handleDocumentClick);
+      document.removeEventListener("keydown", handleHideOnEscape);
     };
   }, []);
   const mergedClassNames = cx(cssStyles["popover"], className, {
@@ -1192,19 +1190,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
 };
@@ -1218,20 +1216,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`]
@@ -1991,6 +1982,7 @@ var styles$n = {
   "input--focused": "lc-Input-module__input--focused___wQH5-",
   "input--disabled": "lc-Input-module__input--disabled___HidXX",
   "input--error": "lc-Input-module__input--error___DlDbC",
+  "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
   "input--compact": "lc-Input-module__input--compact___iKSQZ",
   "input--medium": "lc-Input-module__input--medium___3BjqQ",
   "input--large": "lc-Input-module__input--large___jX5RW",
@@ -2052,7 +2044,7 @@ const Input = React.forwardRef((_A, ref) => {
     type: type && !isPasswordVisible ? type : "text"
   })), shouldRenderRightIcon && renderIcon(icon2, disabled), type === "password" && /* @__PURE__ */ React.createElement(Button, {
     disabled,
-    kind: "plain",
+    kind: "subtle",
     icon: /* @__PURE__ */ React.createElement(Icon, {
       customColor: iconCustomColor,
       source: iconSource
@@ -2379,7 +2371,8 @@ const Trigger = ({
   size = "medium",
   hideClearButton,
   onTrigger,
-  onClear
+  onClear,
+  testId
 }) => {
   const triggerRef = React.useRef(null);
   const mergedClassNames = cx(styles$j[baseClass$p], styles$j[`${baseClass$p}--${size}`], isMultiSelect && styles$j[`${baseClass$p}--multi-select`], isMultiSelect && isItemSelected && styles$j[`${baseClass$p}--multi-select--with-items`], isDisabled && styles$j[`${baseClass$p}--disabled`], isOpen && styles$j[`${baseClass$p}--focused`], isError && styles$j[`${baseClass$p}--error`]);
@@ -2411,7 +2404,8 @@ const Trigger = ({
     ref: triggerRef,
     className: mergedClassNames,
     onClick: handleTriggerClick,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": testId
   }, /* @__PURE__ */ React.createElement("div", {
     className: styles$j[`${baseClass$p}__content`]
   }, children), /* @__PURE__ */ React.createElement("div", {
@@ -2801,6 +2795,7 @@ const Picker = (_M) => {
     type = "single",
     searchDisabled = false,
     hideClearButton,
+    openedOnInit = false,
     onSelect
   } = _N, props = __objRest(_N, [
     "className",
@@ -2817,9 +2812,10 @@ const Picker = (_M) => {
     "type",
     "searchDisabled",
     "hideClearButton",
+    "openedOnInit",
     "onSelect"
   ]);
-  const [isListOpen, setIsListOpen] = React.useState(false);
+  const [isListOpen, setIsListOpen] = React.useState(openedOnInit);
   const [searchPhrase, setSearchPhrase] = React.useState(null);
   const triggerRef = React.useRef(null);
   const mergedClassNames = cx(styles$h[baseClass$l], className);
@@ -2910,12 +2906,14 @@ const Picker = (_M) => {
     }
     return selected.map((item) => item.key);
   }, [selected]);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React.createElement("div", {
     ref: triggerRef,
-    className: mergedClassNames
-  }, props), /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames,
+    id: props.id
+  }, /* @__PURE__ */ React.createElement("div", {
     className: styles$h[`${baseClass$l}__container`]
   }, /* @__PURE__ */ React.createElement(Trigger, {
+    testId: props["data-testid"],
     isSearchDisabled: searchDisabled,
     isError: error,
     isOpen: isListOpen,
@@ -3160,7 +3158,9 @@ const PromoBanner = ({
     className: styles$c[`${baseClass$i}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
     className: styles$c[`${baseClass$i}__header`]
-  }, header), /* @__PURE__ */ React.createElement("div", null, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
+  }, header), /* @__PURE__ */ React.createElement(Text, {
+    as: "div"
+  }, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
     className: styles$c[`${baseClass$i}__close-icon`],
     onClick: onClose
@@ -3990,6 +3990,7 @@ const Tooltip = (props) => {
   function renderFloatingComponent() {
     if (withFadeAnimation) {
       const enter = css`
+        pointer-events: none;
         opacity: 0;
       `;
       const enterActive = css`
@@ -3998,6 +3999,9 @@ const Tooltip = (props) => {
         transition-duration: ${transitionDuration}ms;
         transition-delay: ${transitionDelay}ms;
       `;
+      const enterDone = css`
+        pointer-events: initial;
+      `;
       const exit = css`
         opacity: 1;
       `;
@@ -4015,6 +4019,7 @@ const Tooltip = (props) => {
         timeout,
         classNames: {
           enter,
+          enterDone,
           enterActive,
           exit,
           exitActive