@pushwoosh/dumb-components 1.1.53 → 1.1.55

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -1,14 +1,13 @@
-import React, { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useEffect, useRef, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, useClickAway, Vertical } from '@pushwoosh/kit-helpers';
 import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { stringifyValue } from './helpers';
-import { DropdownRoot, PopoverContent } from './styles';
+import { PopoverContent } from './styles';
 import { Button } from '../../Button';
 import { Chip } from '../../Chip';
+import { Popover } from '../../Popover';
 import { CalendarSuperForm } from '../CalendarSuperForm';
-import { formatTimezoneShort } from '../helpers-tz';
 export const CalendarDropdown = props => {
   const {
     mode,
@@ -16,27 +15,27 @@ export const CalendarDropdown = props => {
   } = props;
   const isRangePicker = mode === 'range-date' || mode === 'range-datetime';
   const withTime = mode === 'single-datetime' || mode === 'range-datetime';
-  const rootRef = useRef(null);
+  const buttonRef = useRef(null);
   const popoverRef = useRef(null);
   const [isShaking, setIsShaking] = useState(false);
-  const [popoverPosition, setPopoverPosition] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState(props.value ?? (isRangePicker ? [] : undefined));
-  const initialTimezone = 'timezone' in calendarProps ? calendarProps.timezone : 'UTC';
+  const initialTimezone = calendarProps.timezone || 'UTC';
   const [timezone, setTimezone] = useState(initialTimezone);
+  useEffect(() => {
+    setValue(props.value ?? (isRangePicker ? [] : undefined));
+  }, [props.value, isRangePicker]);
+  useEffect(() => {
+    setTimezone(calendarProps.timezone || 'UTC');
+  }, [calendarProps.timezone]);
   const closePopover = () => {
-    setPopoverPosition(null);
+    setIsOpen(false);
     setValue(props.value ?? (isRangePicker ? [] : undefined));
     setTimezone(initialTimezone);
   };
-  useClickAway(!!popoverPosition, popoverRef, closePopover);
+  useClickAway(isOpen, popoverRef, closePopover);
   const openPopover = () => {
-    if (rootRef.current) {
-      const rect = rootRef.current.getBoundingClientRect();
-      setPopoverPosition({
-        top: rect.bottom + 4,
-        left: rect.left
-      });
-    }
+    setIsOpen(true);
   };
   const onChangeHandler = val => {
     var _props$onChange;
@@ -44,25 +43,35 @@ export const CalendarDropdown = props => {
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, val);
   };
   const presets = 'presets' in props ? props.presets : undefined;
-  const noValue = isRangePicker ? (value === null || value === void 0 ? void 0 : value.length) === 0 : !value;
+  const noValue = isRangePicker ? ((value === null || value === void 0 ? void 0 : value.length) ?? 0) === 0 : !value;
   let buttonText;
   if (noValue) {
     buttonText = isRangePicker ? 'Select period' : 'Select date';
   } else {
-    buttonText = stringifyValue(value, withTime);
-    if (withTime) {
-      const timezoneShort = formatTimezoneShort(timezone);
-      buttonText += ` ${timezoneShort}`;
-    }
+    buttonText = stringifyValue(value, withTime, timezone);
   }
-  const popoverContent = popoverPosition && React.createElement(PopoverContent, {
-    ref: popoverRef,
+  return React.createElement(Horizontal, {
+    "$justifyContent": "start"
+  }, React.createElement(Button, {
+    boxRef: buttonRef,
+    type: "button",
+    color: "secondary",
+    icon: React.createElement(CalendarIcon, {
+      size: "medium",
+      view: "lined"
+    }),
+    onClick: () => isOpen ? closePopover() : openPopover(),
+    isOpen: isOpen
+  }, buttonText), React.createElement(Popover, {
+    open: isOpen,
+    anchorEl: buttonRef,
+    internalWindowRef: popoverRef,
+    windowWidth: 500,
+    position: "bottom-start",
+    zIndex: 10010
+  }, React.createElement(PopoverContent, {
     "$isShaking": isShaking,
-    onAnimationEnd: () => setIsShaking(false),
-    style: {
-      top: `${popoverPosition.top}px`,
-      left: `${popoverPosition.left}px`
-    }
+    onAnimationEnd: () => setIsShaking(false)
   }, React.createElement(Vertical, null, presets && presets.length > 0 && React.createElement(Horizontal, {
     "$padding": {
       horizontal: 16,
@@ -142,17 +151,5 @@ export const CalendarDropdown = props => {
         closePopover();
       }
     }
-  }, "Apply"))));
-  return React.createElement(DropdownRoot, {
-    ref: rootRef
-  }, React.createElement(Button, {
-    type: "button",
-    color: "secondary",
-    icon: React.createElement(CalendarIcon, {
-      size: "medium",
-      view: "lined"
-    }),
-    onClick: () => popoverPosition ? closePopover() : openPopover(),
-    isOpen: !!popoverPosition
-  }, buttonText), popoverContent && createPortal(popoverContent, document.body));
+  }, "Apply"))))));
 };

package/Calendar/CalendarDropdown/helpers.d.ts

@@ -1,3 +1,3 @@
 import { type DateStruct, type DateTimeStruct, type RangeValue, type SingleValue } from '../types';
 export declare function formatDate(val: DateStruct | DateTimeStruct, withTime?: boolean): string;
-export declare const stringifyValue: (value: SingleValue<DateStruct | DateTimeStruct> | RangeValue<DateStruct | DateTimeStruct>, withTime?: boolean) => string;
+export declare const stringifyValue: (value: SingleValue<DateStruct | DateTimeStruct> | RangeValue<DateStruct | DateTimeStruct>, withTime: boolean, timezone?: string) => string;

package/Calendar/CalendarDropdown/helpers.js

@@ -1,3 +1,4 @@
+import { formatTimezoneShort } from '../helpers-tz';
 export function formatDate(val, withTime = true) {
   const date = new Date(val.year, val.month - 1, val.day, 'hour' in val ? val.hour : 0, 'minute' in val ? val.minute : 0);
   if (withTime) {
@@ -16,14 +17,18 @@ export function formatDate(val, withTime = true) {
     year: 'numeric'
   });
 }
-export const stringifyValue = (value, withTime) => {
+export const stringifyValue = (value, withTime, timezone) => {
+  let result = '';
   if (Array.isArray(value)) {
     if (value.length === 0) return '';
-    if (value.length === 1) return formatDate(value[0], withTime);
-    if (value.length === 2) return `${formatDate(value[0], withTime)} – ${formatDate(value[1], withTime)}`;
+    if (value.length === 1) result = `${formatDate(value[0], withTime)} - ?`;
+    if (value.length === 2) result = `${formatDate(value[0], withTime)} – ${formatDate(value[1], withTime)}`;
+  } else if (value) {
+    result = formatDate(value, withTime);
   }
-  if (value) {
-    return formatDate(value, withTime);
+  if (withTime) {
+    const timezoneShort = formatTimezoneShort(timezone);
+    result += ` ${timezoneShort}`;
   }
-  return '';
+  return result;
 };

package/Calendar/CalendarDropdown/styles.d.ts

@@ -1,61 +1,3 @@
-export declare const DropdownRoot: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-} & {
-    $justifyContent: string;
-}, "$gridAutoFlow" | "$justifyContent">;
 export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {
     $isShaking?: boolean;
 }, never>;

package/Calendar/CalendarDropdown/styles.js

@@ -1,16 +1,9 @@
 import styled, { keyframes, css } from 'styled-components';
-import { Shadow, ShapeRadius, Color } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Shadow, Color } 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 DropdownRoot = styled(Horizontal).attrs({
-  $justifyContent: 'start'
-}).withConfig({
-  displayName: "DropdownRoot",
-  componentId: "sc-h6jz87-0"
-})(["position:relative;"]);
 export const PopoverContent = styled.div.withConfig({
   displayName: "PopoverContent",
-  componentId: "sc-h6jz87-1"
-})(["position:fixed;border-radius:", ";border:1px solid ", ";overflow:hidden;box-shadow:", ";background:", ";z-index:10010;", ""], ShapeRadius.CONTROL, Color.FORM, Shadow.REGULAR, Color.CLEAR, ({
+  componentId: "sc-h6jz87-0"
+})(["overflow:hidden;box-shadow:", ";background:", ";", ""], Shadow.REGULAR, Color.CLEAR, ({
   $isShaking
 }) => $isShaking && css(["animation:", " 0.4s ease-in-out;"], shakeAnimation));

package/Popover/styles.js

@@ -8,11 +8,11 @@ export const PopoverContainer = styled.div.withConfig({
 export const PopoverContainerWindow = styled.div.withConfig({
   displayName: "PopoverContainerWindow",
   componentId: "sc-qsqk3z-1"
-})(["min-width:", ";border:1px solid ", ";border-radius:", ";background:", ";transition:visibility 50ms linear;> *{opacity:", ";}"], ({
+})(["min-width:", ";border:1px solid ", ";border-radius:", ";background:", ";transition:visibility 50ms linear;> *{opacity:", ";}> *:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> *:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}"], ({
   $minWidth
 }) => $minWidth ? `${$minWidth}px` : 'auto', Color.FORM, ShapeRadius.DIALOG, Color.CLEAR, ({
   $isLoading
-}) => $isLoading ? '0.5' : '1');
+}) => $isLoading ? '0.5' : '1', ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
 export const PopoverContainerPortal = styled(Tippy).withConfig({
   displayName: "PopoverContainerPortal",
   componentId: "sc-qsqk3z-2"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.53",
+  "version": "1.1.55",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -17,7 +17,7 @@
   },
   "pre-commit": "check",
   "engines": {
-    "node": ">= 18",
+    "node": ">= 20",
     "npm": ">= 7"
   },
   "devDependencies": {