@pushwoosh/dumb-components 1.1.135 → 1.1.136

package/Calendar/CalendarMonth/CalendarMonth.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Columns } from '@pushwoosh/kit-helpers';
 import { CellBox, DayHeader } from './styles';
 import { addPeriod, differenceInDays, getLastDayOfMonth, getFirstDayOfWeek, isSamePeriod, compareStructs, pickDateStruct } from '../helpers';
@@ -36,74 +37,75 @@ export const CalendarMonth = ({
     };
   }, []);
   const dayLabels = firstDayOfWeek === 0 ? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] : ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-  return React.createElement(Columns, {
+  return _jsxs(Columns, {
     "$sizes": 7,
-    "$gap": 2
-  }, dayLabels.map(l => React.createElement(DayHeader, {
-    key: l
-  }, l)), Array.from({
-    length: days
-  }).map((_, i) => {
-    const curDay = addPeriod(firstDayDate, 'day', i);
-    let variant;
-    if (!isSamePeriod(month, curDay, 'month')) {
-      if (periodFrom && periodTo && compareStructs(periodFrom, periodTo) !== 0 && !isSamePeriod(periodFrom, periodTo, 'month')) {
-        const currentMonthStruct = {
-          year: month.year,
-          month: month.month,
-          day: 1
-        };
-        const outdatedMonthStruct = {
-          year: curDay.year,
-          month: curDay.month,
-          day: 1
-        };
-        const periodFromMonthStruct = {
-          year: periodFrom.year,
-          month: periodFrom.month,
-          day: 1
-        };
-        const periodToMonthStruct = {
-          year: periodTo.year,
-          month: periodTo.month,
-          day: 1
-        };
-        const isCurrentMonthInPeriod = compareStructs(currentMonthStruct, periodFromMonthStruct) >= 0 && compareStructs(currentMonthStruct, periodToMonthStruct) <= 0;
-        const isOutdatedMonthInPeriod = compareStructs(outdatedMonthStruct, periodFromMonthStruct) >= 0 && compareStructs(outdatedMonthStruct, periodToMonthStruct) <= 0;
-        if (isCurrentMonthInPeriod && isOutdatedMonthInPeriod) {
-          variant = 'periodOutdated';
+    "$gap": 2,
+    children: [dayLabels.map(l => _jsx(DayHeader, {
+      children: l
+    }, l)), Array.from({
+      length: days
+    }).map((_, i) => {
+      const curDay = addPeriod(firstDayDate, 'day', i);
+      let variant;
+      if (!isSamePeriod(month, curDay, 'month')) {
+        if (periodFrom && periodTo && compareStructs(periodFrom, periodTo) !== 0 && !isSamePeriod(periodFrom, periodTo, 'month')) {
+          const currentMonthStruct = {
+            year: month.year,
+            month: month.month,
+            day: 1
+          };
+          const outdatedMonthStruct = {
+            year: curDay.year,
+            month: curDay.month,
+            day: 1
+          };
+          const periodFromMonthStruct = {
+            year: periodFrom.year,
+            month: periodFrom.month,
+            day: 1
+          };
+          const periodToMonthStruct = {
+            year: periodTo.year,
+            month: periodTo.month,
+            day: 1
+          };
+          const isCurrentMonthInPeriod = compareStructs(currentMonthStruct, periodFromMonthStruct) >= 0 && compareStructs(currentMonthStruct, periodToMonthStruct) <= 0;
+          const isOutdatedMonthInPeriod = compareStructs(outdatedMonthStruct, periodFromMonthStruct) >= 0 && compareStructs(outdatedMonthStruct, periodToMonthStruct) <= 0;
+          if (isCurrentMonthInPeriod && isOutdatedMonthInPeriod) {
+            variant = 'periodOutdated';
+          } else {
+            variant = 'outdated';
+          }
         } else {
           variant = 'outdated';
         }
-      } else {
-        variant = 'outdated';
-      }
-    } else if (disableOnAndBefore && compareStructs(curDay, disableOnAndBefore) <= 0 || disableOnAndAfter && compareStructs(curDay, disableOnAndAfter) >= 0 || disablePeriod && compareStructs(curDay, disablePeriod[0]) >= 0 && compareStructs(curDay, disablePeriod[1]) <= 0) {
-      if (periodFrom && isSamePeriod(curDay, periodFrom, 'day')) {
-        variant = 'selectedDisabled';
-      } else {
-        variant = 'disabled';
+      } else if (disableOnAndBefore && compareStructs(curDay, disableOnAndBefore) <= 0 || disableOnAndAfter && compareStructs(curDay, disableOnAndAfter) >= 0 || disablePeriod && compareStructs(curDay, disablePeriod[0]) >= 0 && compareStructs(curDay, disablePeriod[1]) <= 0) {
+        if (periodFrom && isSamePeriod(curDay, periodFrom, 'day')) {
+          variant = 'selectedDisabled';
+        } else {
+          variant = 'disabled';
+        }
+      } else if (selectedDay && isSamePeriod(curDay, selectedDay, 'day')) {
+        variant = 'selected';
+      } else if (periodFrom && periodTo && isSamePeriod(periodFrom, periodTo, 'day') && isSamePeriod(curDay, periodFrom, 'day')) {
+        variant = 'selected';
+      } else if (periodFrom && isSamePeriod(curDay, periodFrom, 'day')) {
+        variant = 'periodFrom';
+      } else if (periodTo && isSamePeriod(curDay, periodTo, 'day')) {
+        variant = 'periodTo';
+      } else if (highlightDay && isSamePeriod(curDay, highlightDay, 'day')) {
+        variant = 'highlighted';
+      } else if (periodFrom && periodTo && compareStructs(curDay, periodFrom) > 0 && compareStructs(curDay, periodTo) < 0) {
+        variant = 'period';
       }
-    } else if (selectedDay && isSamePeriod(curDay, selectedDay, 'day')) {
-      variant = 'selected';
-    } else if (periodFrom && periodTo && isSamePeriod(periodFrom, periodTo, 'day') && isSamePeriod(curDay, periodFrom, 'day')) {
-      variant = 'selected';
-    } else if (periodFrom && isSamePeriod(curDay, periodFrom, 'day')) {
-      variant = 'periodFrom';
-    } else if (periodTo && isSamePeriod(curDay, periodTo, 'day')) {
-      variant = 'periodTo';
-    } else if (highlightDay && isSamePeriod(curDay, highlightDay, 'day')) {
-      variant = 'highlighted';
-    } else if (periodFrom && periodTo && compareStructs(curDay, periodFrom) > 0 && compareStructs(curDay, periodTo) < 0) {
-      variant = 'period';
-    }
-    return React.createElement(CellBox, {
-      key: `${curDay.year}-${curDay.month}-${curDay.day}`,
-      "$variant": variant,
-      "$isToday": isSamePeriod(curDay, today, 'day'),
-      onClick: () => onDaySelect(pickDateStruct(curDay)),
-      onMouseEnter: onDayMouseEnter ? () => onDayMouseEnter(curDay) : undefined,
-      onMouseLeave: onDayMouseLeave ? () => onDayMouseLeave(curDay) : undefined
-    }, curDay.day);
-  }));
+      return _jsx(CellBox, {
+        "$variant": variant,
+        "$isToday": isSamePeriod(curDay, today, 'day'),
+        onClick: () => onDaySelect(pickDateStruct(curDay)),
+        onMouseEnter: onDayMouseEnter ? () => onDayMouseEnter(curDay) : undefined,
+        onMouseLeave: onDayMouseLeave ? () => onDayMouseLeave(curDay) : undefined,
+        children: curDay.day
+      }, `${curDay.year}-${curDay.month}-${curDay.day}`);
+    })]
+  });
 };

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.d.ts

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import { type MonthCommonProps } from '../CalendarMonth/types';
 import { type DateStruct } from '../types';
 export interface CalendarMonthSliderProps extends MonthCommonProps {
@@ -6,6 +6,6 @@ export interface CalendarMonthSliderProps extends MonthCommonProps {
     monthWidth?: number;
     gap?: number;
     visibleCount?: number;
-    renderAfter?: () => React.ReactNode;
+    renderAfter?: () => ReactNode;
 }
 export declare const CalendarMonthSlider: FC<CalendarMonthSliderProps>;

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Horizontal, usePersistentFunction, Vertical } from '@pushwoosh/kit-helpers';
 import { ArrowIcon } from '@pushwoosh/kit-icons';
 import { Root, Viewport, Strip, Panel, NavButtonLeft, NavButtonRight, StyledSelect } from './styles';
@@ -79,63 +80,75 @@ export const CalendarMonthSlider = ({
     length: 11
   }, (_, i) => currentYear - 5 + i);
   const viewportWidth = `${visibleCount * monthWidth + gap * (visibleCount - 1)}px`;
-  return React.createElement(Root, {
+  return _jsxs(Root, {
     style: {
       ['--slider-width']: viewportWidth,
       ['--col-width']: `${monthWidth}px`,
       ['--gap']: `${gap}px`,
       ['--shift']: `${shiftPx}px`
-    }
-  }, React.createElement(Viewport, null, React.createElement(Strip, {
-    withTransition: inTransition,
-    onTransitionEnd: () => {
-      toBaseline(anchor);
-    }
-  }, panels.map((p, i) =>
-  // eslint-disable-next-line react/no-array-index-key
-  React.createElement(Panel, {
-    key: `${p.year}-${p.month}-${i}`
-  }, React.createElement(Vertical, {
-    "$gap": 4
-  }, React.createElement(Horizontal, {
-    "$justifyContent": "center",
-    "$gap": 6
-  }, React.createElement(StyledSelect, {
-    value: p.month,
-    onChange: e => handleMonthChange(e, i, p)
-  }, Array.from({
-    length: 12
-  }, (_, idx) => React.createElement("option", {
-    key: idx + 1,
-    value: idx + 1
-  }, monthName(idx + 1, 'long')))), React.createElement(StyledSelect, {
-    value: p.year,
-    onChange: e => handleYearChange(e, i, p)
-  }, yearOptions.map(year => React.createElement("option", {
-    key: year,
-    value: year
-  }, year)))), React.createElement(CalendarMonth, {
-    month: p,
-    ...monthProps
-  })))))), React.createElement(NavButtonLeft, null, React.createElement(Button, {
-    color: "secondary",
-    size: "compact",
-    view: "ghost",
-    icon: React.createElement(ArrowIcon, {
-      size: "small",
-      direction: "left"
-    }),
-    onClick: animateBackward,
-    isDisabled: inTransition
-  })), React.createElement(NavButtonRight, null, React.createElement(Button, {
-    color: "secondary",
-    size: "compact",
-    view: "ghost",
-    icon: React.createElement(ArrowIcon, {
-      size: "small",
-      direction: "right"
-    }),
-    onClick: animateForward,
-    isDisabled: inTransition
-  })), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter());
+    },
+    children: [_jsx(Viewport, {
+      children: _jsx(Strip, {
+        withTransition: inTransition,
+        onTransitionEnd: () => {
+          toBaseline(anchor);
+        },
+        children: panels.map((p, i) =>
+        // eslint-disable-next-line react/no-array-index-key
+        _jsx(Panel, {
+          children: _jsxs(Vertical, {
+            "$gap": 4,
+            children: [_jsxs(Horizontal, {
+              "$justifyContent": "center",
+              "$gap": 6,
+              children: [_jsx(StyledSelect, {
+                value: p.month,
+                onChange: e => handleMonthChange(e, i, p),
+                children: Array.from({
+                  length: 12
+                }, (_, idx) => _jsx("option", {
+                  value: idx + 1,
+                  children: monthName(idx + 1, 'long')
+                }, idx + 1))
+              }), _jsx(StyledSelect, {
+                value: p.year,
+                onChange: e => handleYearChange(e, i, p),
+                children: yearOptions.map(year => _jsx("option", {
+                  value: year,
+                  children: year
+                }, year))
+              })]
+            }), _jsx(CalendarMonth, {
+              month: p,
+              ...monthProps
+            })]
+          })
+        }, `${p.year}-${p.month}-${i}`))
+      })
+    }), _jsx(NavButtonLeft, {
+      children: _jsx(Button, {
+        color: "secondary",
+        size: "compact",
+        view: "ghost",
+        icon: _jsx(ArrowIcon, {
+          size: "small",
+          direction: "left"
+        }),
+        onClick: animateBackward,
+        isDisabled: inTransition
+      })
+    }), _jsx(NavButtonRight, {
+      children: _jsx(Button, {
+        color: "secondary",
+        size: "compact",
+        view: "ghost",
+        icon: _jsx(ArrowIcon, {
+          size: "small",
+          direction: "right"
+        }),
+        onClick: animateForward,
+        isDisabled: inTransition
+      })
+    }), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter()]
+  });
 };

package/Calendar/CalendarSuperForm/CalendarSuperForm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
@@ -23,80 +23,85 @@ export const CalendarSuperForm = props => {
   } = props;
   const isRangePicker = mode === 'range-date' || mode === 'range-datetime';
   const withTime = mode === 'single-datetime' || mode === 'range-datetime';
-  return React.createElement(Vertical, {
-    "$gap": 8
-  }, React.createElement(CalendarRangePicker, {
-    disableOnAndBefore: disableOnAndBefore,
-    disableOnAndAfter: disableOnAndAfter,
-    minDays: minDays,
-    maxDays: maxDays,
-    value: isRangePicker ? value : value ? [value] : [],
-    onChange: val => {
-      if (isRangePicker) {
-        if (withTime) {
-          if (val.length === 2) {
-            onChange([{
-              ...val[0],
-              hour: 0,
-              minute: 0,
-              second: 0,
-              millisecond: 0
-            }, {
-              ...val[1],
-              hour: 23,
-              minute: 59,
-              second: 59,
-              millisecond: 999
-            }]);
-          } else if (val.length === 1) {
-            onChange([{
+  return _jsx(Vertical, {
+    "$gap": 8,
+    children: _jsx(CalendarRangePicker, {
+      disableOnAndBefore: disableOnAndBefore,
+      disableOnAndAfter: disableOnAndAfter,
+      minDays: minDays,
+      maxDays: maxDays,
+      value: isRangePicker ? value : value ? [value] : [],
+      onChange: val => {
+        if (isRangePicker) {
+          if (withTime) {
+            if (val.length === 2) {
+              onChange([{
+                ...val[0],
+                hour: 0,
+                minute: 0,
+                second: 0,
+                millisecond: 0
+              }, {
+                ...val[1],
+                hour: 23,
+                minute: 59,
+                second: 59,
+                millisecond: 999
+              }]);
+            } else if (val.length === 1) {
+              onChange([{
+                hour: 0,
+                minute: 0,
+                second: 0,
+                millisecond: 0,
+                ...val[0]
+              }]);
+            }
+          } else {
+            onChange(val);
+          }
+        } else if (val[0]) {
+          if (withTime) {
+            onChange({
               hour: 0,
               minute: 0,
               second: 0,
               millisecond: 0,
+              ...value,
               ...val[0]
-            }]);
+            });
+          } else {
+            onChange(val[0]);
           }
-        } else {
-          onChange(val);
-        }
-      } else if (val[0]) {
-        if (withTime) {
-          onChange({
-            hour: 0,
-            minute: 0,
-            second: 0,
-            millisecond: 0,
-            ...value,
-            ...val[0]
-          });
-        } else {
-          onChange(val[0]);
-        }
-      }
-    },
-    singleMode: !isRangePicker,
-    visibleCount: visibleCount !== undefined ? visibleCount : isRangePicker ? 2 : 1,
-    monthWidth: monthWidth,
-    gap: gap,
-    renderAfter: withTime || maxDays && maxDays > 0 || footerContent ? () => {
-      return React.createElement(Vertical, {
-        "$gap": 8,
-        "$margin": {
-          top: 16
         }
-      }, React.createElement(Vertical, null, maxDays && maxDays > 0 && React.createElement(Text, {
-        "$variant": "footnote",
-        "$color": Color.LOCKED
-      }, `Max length: ${maxDays} days`), footerContent), withTime && timezone && onChangeTimezone && React.createElement(CalendarTimeAndTimezoneSection, {
-        isRangePicker: isRangePicker,
-        value: value,
-        onChange: onChange,
-        timezone: timezone,
-        onChangeTimezone: onChangeTimezone,
-        visibleCount: visibleCount
-      }));
-    } : undefined,
-    firstDayOfWeek: firstDayOfWeek
-  }));
+      },
+      singleMode: !isRangePicker,
+      visibleCount: visibleCount !== undefined ? visibleCount : isRangePicker ? 2 : 1,
+      monthWidth: monthWidth,
+      gap: gap,
+      renderAfter: withTime || maxDays && maxDays > 0 || footerContent ? () => {
+        return _jsxs(Vertical, {
+          "$gap": 8,
+          "$margin": {
+            top: 16
+          },
+          children: [_jsxs(Vertical, {
+            children: [maxDays && maxDays > 0 && _jsx(Text, {
+              "$variant": "footnote",
+              "$color": Color.LOCKED,
+              children: `Max length: ${maxDays} days`
+            }), footerContent]
+          }), withTime && timezone && onChangeTimezone && _jsx(CalendarTimeAndTimezoneSection, {
+            isRangePicker: isRangePicker,
+            value: value,
+            onChange: onChange,
+            timezone: timezone,
+            onChangeTimezone: onChangeTimezone,
+            visibleCount: visibleCount
+          })]
+        });
+      } : undefined,
+      firstDayOfWeek: firstDayOfWeek
+    })
+  });
 };

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.d.ts

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import { type DateStruct } from '../../../types';
 export type RangePickerValue = [DateStruct, DateStruct] | [DateStruct] | [];
 type CalendarRangePickerProps = {
@@ -12,7 +12,7 @@ type CalendarRangePickerProps = {
     minDays?: number;
     maxDays?: number;
     onChange: (range: RangePickerValue) => void;
-    renderAfter?: () => React.ReactNode;
+    renderAfter?: () => ReactNode;
     firstDayOfWeek?: 0 | 1;
 };
 export declare const CalendarRangePicker: FC<CalendarRangePickerProps>;

package/Calendar/CalendarSuperForm/components/CalendarRangePicker/CalendarRangePicker.js

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { getDisabledRanges } from './getDisabledRanges';
 import { CalendarMonthSlider } from '../../../CalendarMonthSlider/CalendarMonthSlider';
 import { compareStructs } from '../../../helpers';
@@ -25,7 +26,7 @@ export const CalendarRangePicker = ({
       day: d.getDate()
     };
   }
-  return React.createElement(CalendarMonthSlider, {
+  return _jsx(CalendarMonthSlider, {
     startMonth: startMonthRef.current,
     visibleCount: visibleCount,
     monthWidth: monthWidth,