@pushwoosh/dumb-components 1.1.144 → 1.1.145

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Color } from '@pushwoosh/kit-constants';
-import { Horizontal, useClickAway, Vertical } from '@pushwoosh/kit-helpers';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { stringifyValue } from './helpers';
 import { PopoverContent, PresetsContainer } from './styles';
 import { Button } from '../../Button';
 import { Chip } from '../../Chip';
-import { Popover } from '../../Popover';
+import { useLayer, useOnClickOutside } from '../../hooks';
 import { CalendarSuperForm } from '../CalendarSuperForm';
 import { Lang, useLang } from '../polyglot';
 export const CalendarDropdown = props => {
@@ -22,8 +24,6 @@ export const CalendarDropdown = props => {
   } = props;
   const isRangePicker = mode === 'range-date' || mode === 'range-datetime';
   const withTime = mode === 'single-datetime' || mode === 'range-datetime';
-  const buttonRef = useRef(null);
-  const popoverRef = useRef(null);
   const [isShaking, setIsShaking] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const lang = useLang();
@@ -41,10 +41,31 @@ export const CalendarDropdown = props => {
     setValue(props.value ?? (isRangePicker ? [] : undefined));
     setTimezone(initialTimezone);
   };
-  useClickAway(isOpen, popoverRef, closePopover);
   const openPopover = () => {
     setIsOpen(true);
   };
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    open: isOpen,
+    strategy: 'fixed',
+    placement: 'bottom-start',
+    transform: false,
+    middleware: [offset(4), flip(), shift({
+      padding: 8
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const {
+    zIndex
+  } = useLayer({
+    isOpen,
+    onClose: closePopover
+  });
+  useOnClickOutside([refs.reference, refs.floating], () => {
+    if (isOpen) closePopover();
+  });
   const onChangeHandler = val => {
     var _props$onChange;
     setValue(val);
@@ -65,7 +86,7 @@ export const CalendarDropdown = props => {
   return _jsxs(Horizontal, {
     "$justifyContent": "start",
     children: [_jsx(Button, {
-      boxRef: buttonRef,
+      boxRef: refs.setReference,
       type: "button",
       view: buttonView,
       size: buttonSize,
@@ -77,108 +98,106 @@ export const CalendarDropdown = props => {
       onClick: () => isOpen ? closePopover() : openPopover(),
       isOpen: isOpen,
       children: buttonTextCustom ?? buttonText
-    }), _jsx(Popover, {
-      open: isOpen,
-      anchorEl: buttonRef,
-      internalWindowRef: popoverRef,
-      windowWidth: isRangePicker ? 500 : 260,
-      position: "bottom-start",
-      zIndex: 10010,
-      children: _jsx(PopoverContent, {
-        "$isShaking": isShaking,
-        onAnimationEnd: () => setIsShaking(false),
-        children: _jsxs(Vertical, {
-          children: [presets && presets.length > 0 && _jsx(PresetsContainer, {
-            children: presets.map((preset, i) => _jsx(Chip, {
-              onClick: () => onChangeHandler(preset.value),
-              children: preset.label
-            }, i))
-          }), _jsxs(Horizontal, {
-            "$padding": 16,
-            "$border": {
-              bottom: `1px solid ${Color.DIVIDER}`
+    }), isOpen && createPortal(_jsx(PopoverContent, {
+      ref: refs.setFloating,
+      style: {
+        ...floatingStyles,
+        zIndex
+      },
+      "$isShaking": isShaking,
+      "$width": isRangePicker ? 500 : 260,
+      onAnimationEnd: () => setIsShaking(false),
+      children: _jsxs(Vertical, {
+        children: [presets && presets.length > 0 && _jsx(PresetsContainer, {
+          children: presets.map((preset, i) => _jsx(Chip, {
+            onClick: () => onChangeHandler(preset.value),
+            children: preset.label
+          }, i))
+        }), _jsxs(Horizontal, {
+          "$padding": 16,
+          "$border": {
+            bottom: `1px solid ${Color.DIVIDER}`
+          },
+          children: [mode === 'single-date' && _jsx(CalendarSuperForm, {
+            mode: "single-date",
+            ...calendarProps,
+            value: value,
+            onChange: onChangeHandler
+          }), mode === 'single-datetime' && _jsx(CalendarSuperForm, {
+            mode: "single-datetime",
+            ...calendarProps,
+            value: value,
+            onChange: onChangeHandler,
+            timezone: timezone,
+            onChangeTimezone: val => {
+              setTimezone(val);
+              if ('onChangeTimezone' in calendarProps) {
+                calendarProps.onChangeTimezone(val);
+              }
+            }
+          }), mode === 'range-date' && _jsx(CalendarSuperForm, {
+            mode: "range-date",
+            ...calendarProps,
+            value: value,
+            onChange: onChangeHandler
+          }), mode === 'range-datetime' && _jsx(CalendarSuperForm, {
+            mode: "range-datetime",
+            ...calendarProps,
+            value: value,
+            onChange: onChangeHandler,
+            timezone: timezone,
+            onChangeTimezone: val => {
+              setTimezone(val);
+              if ('onChangeTimezone' in calendarProps) {
+                calendarProps.onChangeTimezone(val);
+              }
+            }
+          })]
+        }), _jsxs(Horizontal, {
+          "$padding": 16,
+          "$justifyContent": "end",
+          "$gap": 8,
+          children: [_jsx(Button, {
+            color: "secondary",
+            size: "compact",
+            onClick: () => {
+              if (noValue) {
+                closePopover();
+              } else {
+                setValue(isRangePicker ? [] : undefined);
+                setTimezone(initialTimezone);
+              }
             },
-            children: [mode === 'single-date' && _jsx(CalendarSuperForm, {
-              mode: "single-date",
-              ...calendarProps,
-              value: value,
-              onChange: onChangeHandler
-            }), mode === 'single-datetime' && _jsx(CalendarSuperForm, {
-              mode: "single-datetime",
-              ...calendarProps,
-              value: value,
-              onChange: onChangeHandler,
-              timezone: timezone,
-              onChangeTimezone: val => {
-                setTimezone(val);
-                if ('onChangeTimezone' in calendarProps) {
-                  calendarProps.onChangeTimezone(val);
-                }
+            children: noValue ? _jsx(Lang, {
+              message: "DUMB.CALENDAR.CANCEL"
+            }) : _jsx(Lang, {
+              message: "DUMB.CALENDAR.RESET"
+            })
+          }), _jsx(Button, {
+            color: "primary",
+            size: "compact",
+            onClick: () => {
+              let isInvalid;
+              if (isRangePicker) {
+                const range = value;
+                const length = (range === null || range === void 0 ? void 0 : range.length) ?? 0;
+                isInvalid = allowEmpty ? length === 1 : length !== 2;
+              } else {
+                isInvalid = allowEmpty ? false : !value;
               }
-            }), mode === 'range-date' && _jsx(CalendarSuperForm, {
-              mode: "range-date",
-              ...calendarProps,
-              value: value,
-              onChange: onChangeHandler
-            }), mode === 'range-datetime' && _jsx(CalendarSuperForm, {
-              mode: "range-datetime",
-              ...calendarProps,
-              value: value,
-              onChange: onChangeHandler,
-              timezone: timezone,
-              onChangeTimezone: val => {
-                setTimezone(val);
-                if ('onChangeTimezone' in calendarProps) {
-                  calendarProps.onChangeTimezone(val);
-                }
+              if (isInvalid) {
+                setIsShaking(true);
+              } else {
+                props.onSubmit(value, timezone);
+                closePopover();
               }
-            })]
-          }), _jsxs(Horizontal, {
-            "$padding": 16,
-            "$justifyContent": "end",
-            "$gap": 8,
-            children: [_jsx(Button, {
-              color: "secondary",
-              size: "compact",
-              onClick: () => {
-                if (noValue) {
-                  closePopover();
-                } else {
-                  setValue(isRangePicker ? [] : undefined);
-                  setTimezone(initialTimezone);
-                }
-              },
-              children: noValue ? _jsx(Lang, {
-                message: "DUMB.CALENDAR.CANCEL"
-              }) : _jsx(Lang, {
-                message: "DUMB.CALENDAR.RESET"
-              })
-            }), _jsx(Button, {
-              color: "primary",
-              size: "compact",
-              onClick: () => {
-                let isInvalid;
-                if (isRangePicker) {
-                  const range = value;
-                  const length = (range === null || range === void 0 ? void 0 : range.length) ?? 0;
-                  isInvalid = allowEmpty ? length === 1 : length !== 2;
-                } else {
-                  isInvalid = allowEmpty ? false : !value;
-                }
-                if (isInvalid) {
-                  setIsShaking(true);
-                } else {
-                  props.onSubmit(value, timezone);
-                  closePopover();
-                }
-              },
-              children: _jsx(Lang, {
-                message: "DUMB.CALENDAR.APPLY"
-              })
-            })]
+            },
+            children: _jsx(Lang, {
+              message: "DUMB.CALENDAR.APPLY"
+            })
           })]
-        })
+        })]
       })
-    })]
+    }), document.body)]
   });
 };

package/Calendar/CalendarDropdown/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {
     $isShaking?: boolean;
+    $width: number;
 }, never>;
 export declare const PresetsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Calendar/CalendarDropdown/styles.js

@@ -1,10 +1,12 @@
 import styled, { keyframes, css } from 'styled-components';
-import { Shadow, Color } from '@pushwoosh/kit-constants';
+import { Shadow, Color, ShapeRadius } from '@pushwoosh/kit-constants';
 const shakeAnimation = keyframes(["0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-4px);}20%,40%,60%,80%{transform:translateX(4px);}"]);
 export const PopoverContent = styled.div.withConfig({
   displayName: "PopoverContent",
   componentId: "sc-h6jz87-0"
-})(["overflow:hidden;box-shadow:", ";background:", ";", ""], Shadow.REGULAR, Color.CLEAR, ({
+})(["width:", "px;overflow:hidden;border:1px solid ", ";border-radius:", ";box-shadow:", ";background:", ";", ""], ({
+  $width
+}) => $width, Color.FORM, ShapeRadius.DIALOG, Shadow.REGULAR, Color.CLEAR, ({
   $isShaking
 }) => $isShaking && css(["animation:", " 0.4s ease-in-out;"], shakeAnimation));
 export const PresetsContainer = styled.div.withConfig({

package/Calendar/CalendarSuperForm/components/CalendarTimezoneSelect.js

@@ -1,31 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Select } from '../../../Select';
+import { Combobox } from '../../../Combobox';
 import { getSortedTimezones } from '../../helpers-tz';
 export const CalendarTimezoneSelect = ({
   timezone,
   onChange,
   isDisabled
 }) => {
-  const timezonesOptions = useMemo(() => {
-    return getSortedTimezones();
-  }, []);
-  return _jsx(Select, {
-    value: timezonesOptions.find(op => op.value === timezone),
-    onChange: value => onChange(value.value),
-    options: timezonesOptions,
-    isDisabled: isDisabled,
-    menuPortalTarget: document.body,
-    menuPosition: "fixed",
-    styles: {
-      menuPortal: base => ({
-        ...base,
-        zIndex: 10020
-      }),
-      menu: provided => ({
-        ...provided,
-        width: '300px'
-      })
-    }
+  const timezonesOptions = useMemo(() => getSortedTimezones(), []);
+  const value = useMemo(() => timezonesOptions.find(op => op.value === timezone) ?? null, [timezonesOptions, timezone]);
+  return _jsx(Combobox, {
+    select: true,
+    items: timezonesOptions,
+    value: value,
+    onChange: option => {
+      if (option) onChange(option.value);
+    },
+    getLabel: option => option.label,
+    getKey: option => option.value,
+    filter: (option, query) => option.label.toLowerCase().includes(query.toLowerCase()),
+    disabled: isDisabled
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.144",
+  "version": "1.1.145",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/SuggestionsDropdown.js

@@ -47,6 +47,8 @@ export function SuggestionsDropdown({
     id: listboxId,
     role: "listbox",
     onScroll: onScroll,
+    onMouseDown: event => event.stopPropagation(),
+    onTouchStart: event => event.stopPropagation(),
     children: [loading && _jsx(DropdownEmpty, {
       children: loadingText
     }), !loading && createLabel && _jsx(DropdownItem, {