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

package/dist/dsrc.es.js

@@ -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, {
@@ -1991,6 +1989,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 +2051,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 +2378,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 +2411,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 +2802,7 @@ const Picker = (_M) => {
     type = "single",
     searchDisabled = false,
     hideClearButton,
+    openedOnInit = false,
     onSelect
   } = _N, props = __objRest(_N, [
     "className",
@@ -2817,9 +2819,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 +2913,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 +3165,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 +3997,7 @@ const Tooltip = (props) => {
   function renderFloatingComponent() {
     if (withFadeAnimation) {
       const enter = css`
+        pointer-events: none;
         opacity: 0;
       `;
       const enterActive = css`
@@ -3998,6 +4006,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 +4026,7 @@ const Tooltip = (props) => {
         timeout,
         classNames: {
           enter,
+          enterDone,
           enterActive,
           exit,
           exitActive