@pushwoosh/dumb-components 1.0.60 → 1.0.62

package/CardMetric/CardMetric.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { CardMetricProps } from './types';
-export declare function CardMetric(props: CardMetricProps): ReactElement;
+export declare function CardMetric({ view, focus, title, tooltip, description, loading, collapse, metric, extraMetric, extraMetricColor, headerExtra, children, ...otherProps }: CardMetricProps): ReactElement;

package/CardMetric/CardMetric.js

@@ -5,22 +5,21 @@ import { Spinner } from '../Spinner';
 import { Tooltip } from '../Tooltip';
 import { CardChildren } from './CardChildren';
 import { CardContainer, CardHeader, CardTitle, CardInfo, CardMetricValue, CardExtraMetric, CardDescription, CardHeaderLeft } from './styles';
-export function CardMetric(props) {
-  const {
-    view = 'rounded',
-    focus = false,
-    title = '',
-    tooltip = '',
-    description = '',
-    loading = false,
-    collapse = undefined,
-    metric = undefined,
-    extraMetric = undefined,
-    extraMetricColor = Color.MAIN,
-    headerExtra = undefined,
-    children,
-    ...otherProps
-  } = props;
+export function CardMetric({
+  view = 'rounded',
+  focus = false,
+  title = '',
+  tooltip = '',
+  description = '',
+  loading = false,
+  collapse = undefined,
+  metric = undefined,
+  extraMetric = undefined,
+  extraMetricColor = Color.MAIN,
+  headerExtra = undefined,
+  children,
+  ...otherProps
+}) {
   const [visibleInfo, setVisibleInfo] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(!!(collapse !== null && collapse !== void 0 && collapse.isCollapsed));
   const onMouseOver = () => setVisibleInfo(true);

package/CodeEditor/types.d.ts

@@ -1,6 +1,5 @@
 import { type CreateThemeOptions } from '@uiw/codemirror-themes';
 import { type ViewUpdate, type Extension } from '@uiw/react-codemirror';
-export type Language = 'json' | 'html' | 'liquid';
 export type CodeEditorProps = {
     value: string;
     readOnly?: boolean;

package/DateTimePicker/components/DatePickerField/DatePickerField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DatePickerFieldProps } from './types';
-export declare function DatePickerField(props: DatePickerFieldProps): ReactElement;
+export declare function DatePickerField({ value, error, allowedPlacements, zIndex, onChange, }: DatePickerFieldProps): ReactElement;

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -4,14 +4,13 @@ import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { format, monthName, get } from '../../helpers';
 import { InputFrame } from '../../styles';
 import { DatePicker } from '../DatePicker';
-export function DatePickerField(props) {
-  const {
-    value,
-    error,
-    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-    zIndex = 1000,
-    onChange
-  } = props;
+export function DatePickerField({
+  value,
+  error,
+  allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+  zIndex = 1000,
+  onChange
+}) {
   const [showPicker, setShowPicker] = useState(false);
   const {
     refs,

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DateTimePickerFieldProps } from './types';
-export declare function DateTimePickerField(props: DateTimePickerFieldProps): ReactElement;
+export declare function DateTimePickerField({ value, error, allowedPlacements, zIndex, onChange, }: DateTimePickerFieldProps): ReactElement;

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -5,14 +5,13 @@ import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { useUTCDate } from './helpers';
 import { InputFrame } from '../../styles';
 import { DateTimePicker } from '../DateTimePicker';
-export function DateTimePickerField(props) {
-  const {
-    value,
-    error,
-    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-    zIndex = 1000,
-    onChange
-  } = props;
+export function DateTimePickerField({
+  value,
+  error,
+  allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+  zIndex = 1000,
+  onChange
+}) {
   const [showPicker, setShowPicker] = useState(false);
   const {
     refs,

package/DateTimePicker/components/NumberPicker/NumberPicker.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { NumberPickerProps } from './types';
-export declare function NumberPicker(props: NumberPickerProps): ReactElement;
+export declare function NumberPicker({ value, hint, step, placeholder, focusOnMount, minValue, maxValue, autoSize, isDisabled, onChange, onSubmit, }: NumberPickerProps): ReactElement;

package/DateTimePicker/components/NumberPicker/NumberPicker.js

@@ -6,20 +6,19 @@ import { SingleInputFrame } from '../../styles';
 import { AutosizeInput } from '../AutosizeInput';
 import { Input } from '../Input';
 import { Hint } from './styles';
-export function NumberPicker(props) {
-  const {
-    value,
-    hint,
-    step = 1,
-    placeholder,
-    focusOnMount,
-    minValue,
-    maxValue,
-    autoSize,
-    isDisabled,
-    onChange,
-    onSubmit
-  } = props;
+export function NumberPicker({
+  value,
+  hint,
+  step = 1,
+  placeholder,
+  focusOnMount,
+  minValue,
+  maxValue,
+  autoSize,
+  isDisabled,
+  onChange,
+  onSubmit
+}) {
   const ref = useRef(null);
   const [autoDiff, setAutoDiff] = useState(0);
   const [localValue, setLocalValue] = useState(value.toString() || '');

package/Drawer/components/Drawer/Drawer.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DrawerProps } from './types';
-export declare function Drawer(props: DrawerProps): ReactElement;
+export declare function Drawer({ size, isOpen, zIndex, onClose, children, withoutLockScreen, closeOnClickOutside, }: DrawerProps): ReactElement;

package/Drawer/components/Drawer/Drawer.js

@@ -5,16 +5,15 @@ import { DrawerBoxTrans, DrawerBox, LockBody, DrawerInner, DrawerContainer } fro
 function createDivElement() {
   return document.createElement('div');
 }
-export function Drawer(props) {
-  const {
-    size,
-    isOpen,
-    zIndex = 10000,
-    onClose,
-    children,
-    withoutLockScreen = false,
-    closeOnClickOutside = true
-  } = props;
+export function Drawer({
+  size,
+  isOpen,
+  zIndex = 10000,
+  onClose,
+  children,
+  withoutLockScreen = false,
+  closeOnClickOutside = true
+}) {
   const ref = useRef();
   const [element] = useState(createDivElement);
   useEffect(() => {

package/EditableField/EditableField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { EditableFieldProps } from './types';
-export declare function EditableField(props: EditableFieldProps): ReactElement;
+export declare function EditableField({ value, title, open, loading, width, position, zIndex, onToggleOpen, onSubmit, onCancel, children, }: EditableFieldProps): ReactElement;

package/EditableField/EditableField.js

@@ -5,20 +5,19 @@ import { Button } from '../Button';
 import { useOnClickOutside } from '../hooks';
 import { Popover, PopoverContainer } from '../Popover';
 import { FieldBox, TitleBox, ButtonsGroup } from './styles';
-export function EditableField(props) {
-  const {
-    value,
-    title = '',
-    open = false,
-    loading = false,
-    width = 332,
-    position = 'right-start',
-    zIndex = 1000,
-    onToggleOpen,
-    onSubmit,
-    onCancel,
-    children
-  } = props;
+export function EditableField({
+  value,
+  title = '',
+  open = false,
+  loading = false,
+  width = 332,
+  position = 'right-start',
+  zIndex = 1000,
+  onToggleOpen,
+  onSubmit,
+  onCancel,
+  children
+}) {
   const rootRef = useRef(null);
   const buttonRef = useRef(null);
   useOnClickOutside(rootRef, onCancel);

package/InputFile/InputFile.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { InputFileProps } from './types';
-export declare function InputFile(props: InputFileProps): ReactElement;
+export declare function InputFile({ fileId, textId, buttonId, label, buttonText, accept, placeholder, disabled, fileName, errorText, name, maxSize, onError, onChange, isIgnoreFileSize, }: InputFileProps): ReactElement;

package/InputFile/InputFile.js

@@ -4,24 +4,23 @@ import { AttachmentIcon } from '@pushwoosh/kit-icons';
 import { Button } from '../Button';
 import { FieldBox } from '../FieldBox';
 import { InputFileFieldsStyled, InputFileButtonStyled, InputFileInputStyled, InputFileInputHiddenStyled, InputFileErrorStyled } from './styles';
-export function InputFile(props) {
-  const {
-    fileId,
-    textId,
-    buttonId,
-    label,
-    buttonText,
-    accept,
-    placeholder,
-    disabled,
-    fileName,
-    errorText,
-    name,
-    maxSize,
-    onError = () => {},
-    onChange,
-    isIgnoreFileSize = false
-  } = props;
+export function InputFile({
+  fileId,
+  textId,
+  buttonId,
+  label,
+  buttonText,
+  accept,
+  placeholder,
+  disabled,
+  fileName,
+  errorText,
+  name,
+  maxSize,
+  onError = () => {},
+  onChange,
+  isIgnoreFileSize = false
+}) {
   const fieldRef = useRef(null);
   const uploadFile = event => {
     var _event$target$files;

package/Link/index.d.ts

@@ -1 +1,2 @@
 export { Link } from './Link';
+export type { LinkPropsWithoutAs, LinkPropsWithAsTag, LinkPropsWithAsComponent } from './types';

package/NumberPicker/NumberPicker.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { NumberPickerProps } from './types';
-export declare function NumberPicker(props: NumberPickerProps): ReactElement;
+export declare function NumberPicker({ value, hint, step, placeholder, focusOnMount, minValue, maxValue, autoSize, isDisabled, onChange, onSubmit, }: NumberPickerProps): ReactElement;

package/NumberPicker/NumberPicker.js

@@ -4,20 +4,19 @@ import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { AutosizeInput } from './components/AutosizeInput';
 import { intVal, isStringInteger } from './helpers';
 import { Hint, SingleInputFrame, InputStyled } from './styles';
-export function NumberPicker(props) {
-  const {
-    value,
-    hint,
-    step = 1,
-    placeholder,
-    focusOnMount,
-    minValue,
-    maxValue,
-    autoSize,
-    isDisabled,
-    onChange,
-    onSubmit
-  } = props;
+export function NumberPicker({
+  value,
+  hint,
+  step = 1,
+  placeholder,
+  focusOnMount,
+  minValue,
+  maxValue,
+  autoSize,
+  isDisabled,
+  onChange,
+  onSubmit
+}) {
   const ref = useRef(null);
   const [autoDiff, setAutoDiff] = useState(0);
   const [localValue, setLocalValue] = useState('');

package/Pagination/Pagination.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { PaginationProps } from './types';
-export declare function Pagination(props: PaginationProps): ReactElement | null;
+export declare function Pagination({ boxRef, activePage, totalPages, adjacentPagesCount, isLoading, onChangePage, ...rest }: PaginationProps): ReactElement | null;

package/Pagination/Pagination.js

@@ -2,16 +2,15 @@ import React, { useCallback } from 'react';
 import { ArrowIcon } from '@pushwoosh/kit-icons';
 import { getSafelyNumber } from './helpers';
 import { PaginationBox, PaginationArrow, PaginationDivider, PaginationButton } from './styles';
-export function Pagination(props) {
-  const {
-    boxRef,
-    activePage,
-    totalPages,
-    adjacentPagesCount = 2,
-    isLoading = false,
-    onChangePage,
-    ...rest
-  } = props;
+export function Pagination({
+  boxRef,
+  activePage,
+  totalPages,
+  adjacentPagesCount = 2,
+  isLoading = false,
+  onChangePage,
+  ...rest
+}) {
   const safelyActivePageNumber = getSafelyNumber(activePage);
   const safelyTotalPagesNumber = getSafelyNumber(totalPages);
   const handleChangePage = useCallback(event => {

package/Popover/Popover.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { PopoverProps } from './types';
-export declare function Popover(props: PopoverProps): ReactElement;
+export declare function Popover({ open, anchorEl, internalWindowRef, loading, position, zIndex, windowWidth, children, }: PopoverProps): ReactElement;

package/Popover/Popover.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import { PopoverContainerPortal, PopoverContainerWindow } from './styles';
-export function Popover(props) {
-  const {
-    open,
-    anchorEl,
-    internalWindowRef = null,
-    loading = false,
-    position = 'right-start',
-    zIndex = 1000,
-    windowWidth,
-    children
-  } = props;
+export function Popover({
+  open,
+  anchorEl,
+  internalWindowRef = null,
+  loading = false,
+  position = 'right-start',
+  zIndex = 1000,
+  windowWidth,
+  children
+}) {
   return React.createElement(PopoverContainerPortal, {
     animation: false,
     delay: 0,

package/Popover/index.d.ts

@@ -1,4 +1,4 @@
 export type { Placement } from 'tippy.js';
 export { Popover } from './Popover';
-export { PopoverContainer, PopoverContainerPortal, PopoverContainerWindow } from './styles';
+export { PopoverContainer } from './styles';
 export type { PopoverProps } from './types';

package/Popover/index.js

@@ -1,2 +1,2 @@
 export { Popover } from './Popover';
-export { PopoverContainer, PopoverContainerPortal, PopoverContainerWindow } from './styles';
+export { PopoverContainer } from './styles';

package/Popover/types.d.ts

@@ -2,7 +2,7 @@ import type { RefObject, ReactNode } from 'react';
 import type { Placement } from 'tippy.js';
 export interface PopoverProps {
     readonly anchorEl: RefObject<HTMLElement>;
-    readonly internalWindowRef?: RefObject<HTMLDivElement>;
+    readonly internalWindowRef?: RefObject<HTMLDivElement> | null;
     readonly position?: Placement;
     readonly open: boolean;
     readonly loading?: boolean;

package/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
-import { type ProgressBoxProps } from './types';
-export declare function ProgressBar(props: ProgressBoxProps): ReactElement;
+import { type ProgressBarProps } from './types';
+export declare function ProgressBar({ percentValue, title, rightSlot, color, backgroundColor, }: ProgressBarProps): ReactElement;

package/ProgressBar/ProgressBar.js

@@ -2,20 +2,19 @@ import React from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { Container, LoadingHeader, LoadingText, ProgressLine, ProgressBarActive, ProgressBoxContainer, RightSlotContainer, SpinnerContainer, ProgressLineContainer } from './styles';
-export function ProgressBar(props) {
-  const {
-    percentValue,
-    title,
-    rightSlot,
-    color = Color.BRIGHT,
-    backgroundColor = Color.BRIGHT_LIGHT
-  } = props;
+export function ProgressBar({
+  percentValue,
+  title,
+  rightSlot,
+  color = Color.BRIGHT,
+  backgroundColor = Color.BRIGHT_LIGHT
+}) {
   return React.createElement(Container, null, React.createElement(SpinnerContainer, {
     "$backgroundColor": backgroundColor
   }, React.createElement(Spinner, {
     color: color,
     size: "medium"
-  })), React.createElement(ProgressBoxContainer, null, React.createElement(LoadingHeader, null, React.createElement(LoadingText, null, title, ' ', `${percentValue}%`), rightSlot && React.createElement(RightSlotContainer, null, rightSlot)), React.createElement(ProgressLineContainer, null, React.createElement(ProgressLine, null, React.createElement(ProgressBarActive, {
+  })), React.createElement(ProgressBoxContainer, null, React.createElement(LoadingHeader, null, React.createElement(LoadingText, null, `${title} ${percentValue}%`), rightSlot && React.createElement(RightSlotContainer, null, rightSlot)), React.createElement(ProgressLineContainer, null, React.createElement(ProgressLine, null, React.createElement(ProgressBarActive, {
     "$width": percentValue,
     "$color": color
   })))));

package/ProgressBar/types.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export type ProgressBoxProps = {
+export type ProgressBarProps = {
     percentValue: number;
     title: string;
     rightSlot?: ReactNode;

package/PushPreview/PushPreview.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { PushBasicData, PushPreviewProps } from './types';
-export declare function PushPreview<T extends PushBasicData>(props: PushPreviewProps<T>): ReactElement;
+export declare function PushPreview<T extends PushBasicData>({ pushPreset, language, view, appTitle, appIcon, isLoading, width, }: PushPreviewProps<T>): ReactElement;

package/PushPreview/PushPreview.js

@@ -6,16 +6,15 @@ import { PREVIEW_ICON_URL } from './constants';
 import { getLocalizedContent } from './helpers';
 import { PushBox, PushIcon, PushTitle, PushDescription } from './styles';
 import { RichMessageViewer } from '../RichMessageEditor';
-export function PushPreview(props) {
-  const {
-    pushPreset,
-    language,
-    view = 'compact',
-    appTitle = '',
-    appIcon = PREVIEW_ICON_URL,
-    isLoading = false,
-    width
-  } = props;
+export function PushPreview({
+  pushPreset,
+  language,
+  view = 'compact',
+  appTitle = '',
+  appIcon = PREVIEW_ICON_URL,
+  isLoading = false,
+  width
+}) {
   const title = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.title) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedTitle), language) || appTitle;
   const content = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.content) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedContent), language);
   const icon = (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon || PREVIEW_ICON_URL;

package/RichMessageEditor/EmojiPicker.js

@@ -1,5 +1,6 @@
 import Picker from '@emoji-mart/react';
 import React from 'react';
+import { EmojiPickerStyled } from './EmojiPicker.styled';
 async function data() {
   const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
   return response.json();
@@ -7,11 +8,11 @@ async function data() {
 export const EmojiPicker = ({
   onEmojiSelect
 }) => {
-  return React.createElement(Picker, {
+  return React.createElement(EmojiPickerStyled, null, React.createElement(Picker, {
     data: data,
     onEmojiSelect: emoji => {
       onEmojiSelect(emoji.native);
     },
     theme: "light"
-  });
+  }));
 };

package/RichMessageEditor/EmojiPicker.styled.d.ts

@@ -0,0 +1 @@
+export declare const EmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/RichMessageEditor/EmojiPicker.styled.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const EmojiPickerStyled = styled.div.withConfig({
+  displayName: "EmojiPickerStyled",
+  componentId: "sc-1bxjwgk-0"
+})(["min-width:352px;"]);

package/RichMessageEditor/RichMessageEditor.js

@@ -1,11 +1,11 @@
+import { autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
 import { isEqual } from 'es-toolkit';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Transforms } from 'slate';
 import { Collapse, elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { FieldBox } from '../FieldBox';
 import EmojiIcon from './assets/EmojiIcon.svg';
 import PersonalizationIcon from './assets/PersonalizationIcon.svg';
-import { DropContent } from './DropContent';
 import { EmojiPicker } from './EmojiPicker';
 import { ImSpan } from './RichMessageEditor.styled';
 import { getDcByPath } from './slate/helpers';
@@ -21,24 +21,23 @@ export const RichMessageEditor = ({
   onBlur,
   renderDynamicContent
 }) => {
-  const rootRef = useRef(null);
   const [showDrop, setShowDrop] = useState();
   const [isFocused, setIsFocused] = useState(false);
-  const showDropArea = val => {
-    const rect = rootRef.current.getBoundingClientRect();
-    setShowDrop({
-      ...val,
-      xValue: rect.right + 8,
-      yValue: rect.top
-    });
-  };
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    middleware: [offset(8), autoPlacement({
+      allowedPlacements: ['left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']
+    })]
+  });
   const onSelectionChange = selection => {
     if (isEqual(selection.anchor, selection.focus)) {
       const {
         path
       } = selection.anchor;
       if (path.length > 2) {
-        showDropArea({
+        setShowDrop({
           type: 'personalization',
           path: path.slice(0, -1)
         });
@@ -69,11 +68,11 @@ export const RichMessageEditor = ({
       return;
     }
     return elementAddListener(document, ['mousedown', 'touchstart', 'focusin'], event => {
-      if (rootRef.current && !rootRef.current.contains(event.target)) {
+      if (refs.reference.current instanceof HTMLElement && !refs.reference.current.contains(event.target)) {
         clickAwayHandler();
       }
     });
-  }, [clickAwayHandler, isFocused]);
+  }, [clickAwayHandler, isFocused, refs.reference]);
   return React.createElement(SlateEditor, {
     initialValue: initialValue,
     onChange: onChange,
@@ -84,18 +83,18 @@ export const RichMessageEditor = ({
     var _getDcByPath;
     return React.createElement(FieldBox, {
       title: title,
-      boxRef: rootRef,
+      boxRef: refs.setReference,
       error: error,
       actions: React.createElement(Collapse, {
         expanded: isFocused
       }, React.createElement(Horizontal, {
         "$gap": 8
       }, canUsePersonalization && React.createElement(ImSpan, {
-        onClick: () => showDropArea({
+        onClick: () => setShowDrop({
           type: 'personalization'
         })
       }, React.createElement(PersonalizationIcon, null), "Personalization"), canUseEmoji && React.createElement(ImSpan, {
-        onClick: () => showDropArea({
+        onClick: () => setShowDrop({
           type: 'emoji'
         })
       }, React.createElement(EmojiIcon, null), "Emoji")))
@@ -110,9 +109,10 @@ export const RichMessageEditor = ({
           onSelectionChange(selection);
         }
       }
-    }), showDrop && React.createElement(DropContent, {
-      top: showDrop.yValue,
-      left: showDrop.xValue
+    }), showDrop && React.createElement("div", {
+      style: floatingStyles,
+      ref: refs.setFloating,
+      key: showDrop.type
     }, showDrop.type === 'personalization' && (renderDynamicContent === null || renderDynamicContent === void 0 ? void 0 : renderDynamicContent({
       dc: showDrop.path ? (_getDcByPath = getDcByPath(editor.children, showDrop.path)) === null || _getDcByPath === void 0 ? void 0 : _getDcByPath.dc : undefined,
       onChange: newDC => {

package/RichMessageEditor/RichMessageEditor.styled.d.ts

@@ -1,2 +1 @@
 export declare const ImSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DropContentStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/RichMessageEditor/RichMessageEditor.styled.js

@@ -3,8 +3,4 @@ import { Color } from '@pushwoosh/kit-constants';
 export const ImSpan = styled.span.withConfig({
   displayName: "ImSpan",
   componentId: "sc-kdvgj9-0"
-})(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);
-export const DropContentStyled = styled.div.withConfig({
-  displayName: "DropContentStyled",
-  componentId: "sc-kdvgj9-1"
-})(["position:fixed;z-index:10;"]);
+})(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -1,9 +1,5 @@
 import type { ReactNode } from 'react';
 import type { DynamicContent } from './slate/types';
-type DropValueCommon = {
-    xValue: number;
-    yValue: number;
-};
 export type DropValuePersonalization = {
     type: 'personalization';
     path?: number[];
@@ -11,7 +7,7 @@ export type DropValuePersonalization = {
 export type DropValueEmoji = {
     type: 'emoji';
 };
-export type DropValue = DropValueCommon & DropValueEmoji | DropValueCommon & DropValuePersonalization;
+export type DropValue = DropValueEmoji | DropValuePersonalization;
 export type RichMessageEditorProps = {
     title: ReactNode;
     initialValue: string;
@@ -26,4 +22,3 @@ export type RichMessageEditorProps = {
         onChange: (newDC: DynamicContent) => void;
     }) => ReactNode;
 };
-export {};

package/RichMessageEditor/RichMessageViewer.d.ts

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
 import { type RichMessageEditorContent } from './types';
-export declare const RichMessageViewer: FC<{
+export type RichMessageViewerProps = {
     value: RichMessageEditorContent | string;
     flat?: boolean;
-}>;
+};
+export declare const RichMessageViewer: FC<RichMessageViewerProps>;

package/RichMessageEditor/slate/DynamicContentElement.js

@@ -23,6 +23,9 @@ const DynamicContentElementComponent = ({
       event.preventDefault();
       event.stopPropagation();
       const [paragraphIndex, elementIndex] = findPath(editor.children, element);
+      Transforms.delete(editor, {
+        at: [paragraphIndex, elementIndex]
+      });
       if (selected) {
         var _editor$children$para;
         const prevOffset = ((_editor$children$para = editor.children[paragraphIndex].children[elementIndex - 1]) === null || _editor$children$para === void 0 ? void 0 : _editor$children$para.text.length) || 0;
@@ -35,9 +38,6 @@ const DynamicContentElementComponent = ({
           focus: point
         });
       }
-      Transforms.delete(editor, {
-        at: [paragraphIndex, elementIndex]
-      });
     }
   }, React.createElement("span", null, tagName || 'Not set'), children);
 };

package/Skeleton/styles.js

@@ -26,8 +26,10 @@ export const CircularSkeleton = styled.div.withConfig({
 export const TextSkeletonTag = styled.div.withConfig({
   displayName: "TextSkeletonTag",
   componentId: "sc-mdyfd6-2"
-})(["", " color:", ";border-radius:4px;", ""], ({
+})(["", " color:", ";border-radius:", ";", ""], ({
   width
 }) => width ? `width: ${toCssValue(width)};` : '', ({
   color
-}) => color || '#ddd', skeletonCommonCss);
+}) => color || '#ddd', ({
+  borderRadius
+}) => borderRadius || '4px', skeletonCommonCss);

package/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
-import type { TProps } from './types';
-export declare function Switch(props: TProps): ReactElement;
+import type { SwitchProps } from './types';
+export declare function Switch({ labelPosition, enabled, isDisabled, children, onChange, }: SwitchProps): ReactElement;

package/Switch/Switch.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Container, Box, Circle, Label } from './styles';
-export function Switch(props) {
-  const {
-    labelPosition = 'right',
-    enabled = false,
-    isDisabled = false,
-    children,
-    onChange
-  } = props;
+export function Switch({
+  labelPosition = 'right',
+  enabled = false,
+  isDisabled = false,
+  children,
+  onChange
+}) {
   return React.createElement(Container, {
     labelPosition: labelPosition
   }, React.createElement(Box, {

package/Switch/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-export interface TProps {
+export interface SwitchProps {
     labelPosition?: 'left' | 'right';
     enabled?: boolean;
     isDisabled?: boolean;

package/Table/components/TablePagination/TablePagination.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { TablePaginationProps } from './types';
-export declare function TablePagination(props: TablePaginationProps): ReactElement;
+export declare function TablePagination({ activePage, totalPages, limit, allLimits, padding, onChangePage, onChangeLimit, children, }: TablePaginationProps): ReactElement;

package/Table/components/TablePagination/TablePagination.js

@@ -2,17 +2,16 @@ import React from 'react';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { NativeSelect } from '../../../native';
 import { Pagination } from '../../../Pagination';
-export function TablePagination(props) {
-  const {
-    activePage,
-    totalPages,
-    limit,
-    allLimits,
-    padding = 24,
-    onChangePage,
-    onChangeLimit,
-    children
-  } = props;
+export function TablePagination({
+  activePage,
+  totalPages,
+  limit,
+  allLimits,
+  padding = 24,
+  onChangePage,
+  onChangeLimit,
+  children
+}) {
   return React.createElement(Horizontal, {
     "$alignItems": "center",
     "$justifyContent": "space-between",

package/Table/index.d.ts

@@ -1,11 +1,9 @@
 export { DataTable } from './components/DataTable';
-export { DataTableList } from './components/DataTableList';
 export { DataTableGetContext } from './components/DataTableGetContext';
 export { DataTablePagination } from './components/DataTablePagination';
 export { DataTableSearchInput } from './components/DataTableSearchInput';
 export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
-export { TableList } from './components/TableList';
 export { TablePagination } from './components/TablePagination';
 export { useDataTableContext, useDataTableGetParams } from './hooks';
 export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';

package/Table/index.js

@@ -1,11 +1,9 @@
 export { DataTable } from './components/DataTable';
-export { DataTableList } from './components/DataTableList';
 export { DataTableGetContext } from './components/DataTableGetContext';
 export { DataTablePagination } from './components/DataTablePagination';
 export { DataTableSearchInput } from './components/DataTableSearchInput';
 export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
-export { TableList } from './components/TableList';
 export { TablePagination } from './components/TablePagination';
 export { useDataTableContext, useDataTableGetParams } from './hooks';
 export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';

package/Table/styles.d.ts

@@ -1,4 +1,8 @@
 import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export type TableProps = {
+    columns: string;
+    width?: string | number;
+};
 export declare const Table: 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;
@@ -54,10 +58,7 @@ export declare const Table: import("styled-components").StyledComponent<"div", a
     $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
 } & {
     $gridAutoFlow: string;
-} & {
-    columns: string;
-    width?: string | number;
-}, "$gridAutoFlow">;
+} & TableProps, "$gridAutoFlow">;
 export declare const Td: 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;

package/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { TooltipProps } from './types';
-export declare function Tooltip(props: TooltipProps): ReactElement;
+export declare function Tooltip({ position, arrowOffset, offset, maxWidth, zIndex, isDisabled, isVisible, ...rest }: TooltipProps): ReactElement;

package/Tooltip/Tooltip.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { TooltipPositionToArrowOffsetMap, TooltipPositionToTippyOffsetMap, TooltipPositionToTippyPlacementMap } from './maps';
 import { TooltipBox } from './styles';
-export function Tooltip(props) {
-  const {
-    position = 'top-start',
-    arrowOffset = TooltipPositionToArrowOffsetMap[position],
-    offset = TooltipPositionToTippyOffsetMap[position],
-    maxWidth = 240,
-    zIndex = 999999,
-    isDisabled,
-    isVisible,
-    ...rest
-  } = props;
+export function Tooltip({
+  position = 'top-start',
+  arrowOffset = TooltipPositionToArrowOffsetMap[position],
+  offset = TooltipPositionToTippyOffsetMap[position],
+  maxWidth = 240,
+  zIndex = 999999,
+  isDisabled,
+  isVisible,
+  ...rest
+}) {
   return React.createElement(TooltipBox, {
     animation: false,
     delay: 0,

package/Tooltip/maps.d.ts

@@ -13,20 +13,7 @@ export declare const TooltipPositionToTippyPlacementMap: {
     'left-middle': "left";
     'left-end': "left-end";
 };
-export declare const TooltipPositionToTippyOffsetMap: {
-    'top-start': number[];
-    'top-middle': number[];
-    'top-end': number[];
-    'right-start': number[];
-    'right-middle': number[];
-    'right-end': number[];
-    'bottom-start': number[];
-    'bottom-middle': number[];
-    'bottom-end': number[];
-    'left-start': number[];
-    'left-middle': number[];
-    'left-end': number[];
-};
+export declare const TooltipPositionToTippyOffsetMap: Record<TooltipPosition, [number, number]>;
 export declare const TooltipPositionToArrowOffsetMap: {
     'top-start': string;
     'top-middle': string;

package/index.d.ts

@@ -26,7 +26,7 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
-export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
+export { DataTable, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';

package/index.js

@@ -26,7 +26,7 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
-export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
+export { DataTable, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';

package/package.json

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

package/RichMessageEditor/DropContent.d.ts

@@ -1,5 +0,0 @@
-import { type FC, type PropsWithChildren } from 'react';
-export declare const DropContent: FC<PropsWithChildren<{
-    top: number;
-    left: number;
-}>>;

package/RichMessageEditor/DropContent.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { DropContentStyled } from './RichMessageEditor.styled';
-export const DropContent = ({
-  top,
-  left,
-  children
-}) => {
-  return React.createElement(DropContentStyled, {
-    style: {
-      top,
-      left
-    }
-  }, children);
-};

package/Table/components/TableList/TableList.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { TableListProps } from './types';
-export declare function TableList<I>(props: TableListProps<I>): React.JSX.Element;

package/Table/components/TableList/TableList.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Table } from '../../styles';
-export function TableList(props) {
-  const {
-    columns,
-    items,
-    renderHead,
-    renderItem,
-    renderTableTop,
-    renderTableBottom
-  } = props;
-  return React.createElement(Table, {
-    columns: columns
-  }, renderTableTop === null || renderTableTop === void 0 ? void 0 : renderTableTop(), renderHead(), items.map(renderItem), renderTableBottom === null || renderTableBottom === void 0 ? void 0 : renderTableBottom());
-}

package/Table/components/TableList/index.d.ts

@@ -1 +0,0 @@
-export { TableList } from './TableList';

package/Table/components/TableList/index.js

@@ -1 +0,0 @@
-export { TableList } from './TableList';

package/Table/components/TableList/types.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-export type TableListProps<I> = {
-    columns: string;
-    items: I[];
-    renderTableTop?: () => ReactNode;
-    renderHead: () => ReactNode;
-    renderItem: (item: I) => ReactNode;
-    renderTableBottom?: () => ReactNode;
-};

package/Table/components/TableList/types.js

@@ -1 +0,0 @@
-export {};