@pushwoosh/smart-components-kit 1.0.89 → 1.1.0

package/DynamicContentPickerForm/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type DynamicContentPickerFormMessages } from './types';
+export declare const messages: LangMessages<DynamicContentPickerFormMessages>;

package/DynamicContentPickerForm/polyglot/messages_ru.js

@@ -0,0 +1,16 @@
+export const messages = {
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.CUSTOM.PLACEHOLDER': 'Введите произвольный текст',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.EVENT.PLACEHOLDER': 'Выберите событие',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.TAG.PLACEHOLDER': 'Выберите тег',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.TAG': 'Тег',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.ATTRIBUTE': 'Атрибут',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.MODIFIER': 'Модификатор',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.FALLBACK_TEXT': 'Запасной текст',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.DEFAULT_TAG_VALUE': 'Значение тега по умолчанию',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.VARIABLE_TYPE': 'Тип переменной',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.TAG': 'Тег',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.EVENT': 'Событие',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.CUSTOM_TEXT': 'Произвольный текст',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.CANCEL': 'Отмена',
+  'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.APPLY': 'Применить'
+};

package/DynamicContentPickerForm/polyglot/types.d.ts

@@ -0,0 +1,17 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type DynamicContentPickerFormMessages = {
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.CUSTOM.PLACEHOLDER': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.EVENT.PLACEHOLDER': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.TAG.PLACEHOLDER': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.TAG': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.ATTRIBUTE': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.MODIFIER': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.FALLBACK_TEXT': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.DEFAULT_TAG_VALUE': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.FIELD.VARIABLE_TYPE': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.TAG': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.EVENT': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.KIND.CUSTOM_TEXT': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.CANCEL': NoParams;
+    'SMART.DYNAMIC_CONTENT_PICKER_FORM.BUTTON.APPLY': NoParams;
+};

package/DynamicContentPickerForm/polyglot/types.js

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

package/EmailTemplatePreview/EmailTemplatePreview.js

@@ -1,13 +1,15 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { EmailTemplatePreview as DumbPreview, RectangularSkeleton } from '@pushwoosh/dumb-components';
 import { useAsync } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
+import { useLang } from './polyglot';
 export const EmailTemplatePreview = ({
   code,
   width,
   height,
   scale
 }) => {
+  const lang = useLang();
   const {
     rpcGateway
   } = useSPAContext();
@@ -31,15 +33,19 @@ export const EmailTemplatePreview = ({
     };
   }, [code]);
   if (res.loading) {
-    return React.createElement(RectangularSkeleton, {
+    return _jsx(RectangularSkeleton, {
       width: width || '100%',
       height: height || '100%'
     });
   }
   if (res.error) {
-    return React.createElement("div", null, "No preview");
+    return _jsx("div", {
+      children: lang({
+        message: 'SMART.EMAIL_TEMPLATE_PREVIEW.NO_PREVIEW'
+      })
+    });
   }
-  return React.createElement(DumbPreview, {
+  return _jsx(DumbPreview, {
     template: res.value.template,
     localization: res.value.localization,
     values: res.value.values,

package/EmailTemplatePreview/polyglot/index.d.ts

@@ -0,0 +1,5 @@
+export declare const Lang: import("react").FC<{
+    message: "SMART.EMAIL_TEMPLATE_PREVIEW.NO_PREVIEW";
+} & import("@pushwoosh/dumb-components/polyglot").NoParams>, useLang: () => (props: {
+    message: "SMART.EMAIL_TEMPLATE_PREVIEW.NO_PREVIEW";
+} & import("@pushwoosh/dumb-components/polyglot").NoParams) => string;

package/EmailTemplatePreview/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/EmailTemplatePreview/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type EmailTemplatePreviewMessages } from './types';
+export declare const messages: LangMessages<EmailTemplatePreviewMessages>;

package/EmailTemplatePreview/polyglot/messages_en.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'SMART.EMAIL_TEMPLATE_PREVIEW.NO_PREVIEW': 'No preview'
+};

package/EmailTemplatePreview/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type EmailTemplatePreviewMessages } from './types';
+export declare const messages: LangMessages<EmailTemplatePreviewMessages>;

package/EmailTemplatePreview/polyglot/messages_ru.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'SMART.EMAIL_TEMPLATE_PREVIEW.NO_PREVIEW': 'Нет превью'
+};

package/EmailTemplatePreview/polyglot/types.d.ts

@@ -0,0 +1,4 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type EmailTemplatePreviewMessages = {
+    'SMART.EMAIL_TEMPLATE_PREVIEW.NO_PREVIEW': NoParams;
+};

package/EmailTemplatePreview/polyglot/types.js

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

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type TaskInfo_args, type GetLastTasksRequest, type Status } from '@pushwoosh/rpc-v2-http-api-data/pushwoosh_export_messages_v2';
 export type ExportTask = {
     id: number;
@@ -16,5 +15,5 @@ type ExportCsvBannerProps = {
     isKeepPageOpenWarning?: boolean;
     onClose?: () => void;
 };
-export declare const ExportCsvBanner: ({ exportTask, updateExportTask, showLastExportLocalStorageKey, lastTasksParams, isKeepPageOpenWarning, onClose, }: ExportCsvBannerProps) => React.JSX.Element | null;
+export declare const ExportCsvBanner: ({ exportTask, updateExportTask, showLastExportLocalStorageKey, lastTasksParams, isKeepPageOpenWarning, onClose, }: ExportCsvBannerProps) => import("react").JSX.Element | null;
 export {};

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -1,9 +1,11 @@
-import React, { useCallback, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
 import { ExportResult, ProgressBar, Button } from '@pushwoosh/dumb-components';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { DangerTriangleIcon, DownloadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
+import { useLang } from '../polyglot';
 import { useExportService } from '../useExportService';
 import { useExportVisibility } from './hooks/useExportVisibility';
 export const ExportCsvBanner = ({
@@ -14,6 +16,7 @@ export const ExportCsvBanner = ({
   isKeepPageOpenWarning,
   onClose
 }) => {
+  const lang = useLang();
   const {
     getLastTasks,
     getStatus,
@@ -72,13 +75,17 @@ export const ExportCsvBanner = ({
             status,
             filename: data.file,
             args,
-            progressTitle: 'Exporting list:',
-            resultSubTitle: 'Result:'
+            progressTitle: lang({
+              message: 'SMART.EXPORT_CSV.PROGRESS_TITLE'
+            }),
+            resultSubTitle: lang({
+              message: 'SMART.EXPORT_CSV.RESULT_SUBTITLE'
+            })
           });
         }
       });
     }
-  }, [getLastTasks, isHidden, lastTasksParams, updateExportTask]);
+  }, [getLastTasks, isHidden, lastTasksParams, updateExportTask, lang]);
   const handleClose = useCallback(() => {
     hide();
     onClose === null || onClose === void 0 || onClose();
@@ -91,47 +98,61 @@ export const ExportCsvBanner = ({
     resultSubTitle,
     progressTitle
   } = exportTask;
-  return React.createElement(Horizontal, {
+  return _jsxs(Horizontal, {
     "$padding": 8,
     "$alignItems": "center",
     "$border": `1px solid ${Color.DIVIDER}`,
     "$borderRadius": ShapeRadius.SECTION,
-    "$bgColor": Color.CLEAR
-  }, status === 'STATUS_SUCCESS' && React.createElement(ExportResult, {
-    type: "success",
-    title: "Exporting complete",
-    subtitle: `${resultSubTitle} ${filename}`,
-    handleClose: handleClose,
-    rightSlot: React.createElement("a", {
-      href: `/api/v2/statistics/exportMessagesStatistics/download/${filename}`,
-      download: filename
-    }, React.createElement(Button, {
-      color: "secondary",
-      size: "compact",
-      icon: React.createElement(DownloadIcon, {
-        size: "small",
-        view: "filled"
+    "$bgColor": Color.CLEAR,
+    children: [status === 'STATUS_SUCCESS' && _jsx(ExportResult, {
+      type: "success",
+      title: lang({
+        message: 'SMART.EXPORT_CSV.SUCCESS_TITLE'
+      }),
+      subtitle: `${resultSubTitle} ${filename}`,
+      handleClose: handleClose,
+      rightSlot: _jsx("a", {
+        href: `/api/v2/statistics/exportMessagesStatistics/download/${filename}`,
+        download: filename,
+        children: _jsx(Button, {
+          color: "secondary",
+          size: "compact",
+          icon: _jsx(DownloadIcon, {
+            size: "small",
+            view: "filled"
+          }),
+          children: lang({
+            message: 'SMART.EXPORT_CSV.DOWNLOAD'
+          })
+        })
+      })
+    }), status === 'STATUS_PENDING' && (isKeepPageOpenWarning ? _jsx(ProgressBar, {
+      title: progressTitle,
+      percentValue: progress,
+      rightSlot: _jsx(Text, {
+        "$color": Color.WARNING,
+        "$variant": "h5",
+        "$uppercase": true,
+        children: lang({
+          message: 'SMART.EXPORT_CSV.KEEP_PAGE_OPEN'
+        })
       })
-    }, "Download CSV"))
-  }), status === 'STATUS_PENDING' && (isKeepPageOpenWarning ? React.createElement(ProgressBar, {
-    title: progressTitle,
-    percentValue: progress,
-    rightSlot: React.createElement(Text, {
-      "$color": Color.WARNING,
-      "$variant": "h5",
-      "$uppercase": true
-    }, "Keep page open during export")
-  }) : React.createElement(ProgressBar, {
-    title: progressTitle,
-    percentValue: progress
-  })), status === 'STATUS_FAILED' && React.createElement(ExportResult, {
-    type: "error",
-    title: "Export failed",
-    subtitle: "Please try again",
-    leftSlotIcon: React.createElement(DangerTriangleIcon, {
-      size: "medium",
-      view: "filled"
-    }),
-    handleClose: handleClose
-  }));
+    }) : _jsx(ProgressBar, {
+      title: progressTitle,
+      percentValue: progress
+    })), status === 'STATUS_FAILED' && _jsx(ExportResult, {
+      type: "error",
+      title: lang({
+        message: 'SMART.EXPORT_CSV.FAILED_TITLE'
+      }),
+      subtitle: lang({
+        message: 'SMART.EXPORT_CSV.FAILED_SUBTITLE'
+      }),
+      leftSlotIcon: _jsx(DangerTriangleIcon, {
+        size: "medium",
+        view: "filled"
+      }),
+      handleClose: handleClose
+    })]
+  });
 };

package/ExportCSV/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type ExportCsvMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<ExportCsvMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<ExportCsvMessages>) => string;

package/ExportCSV/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/ExportCSV/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type ExportCsvMessages } from './types';
+export declare const messages: LangMessages<ExportCsvMessages>;

package/ExportCSV/polyglot/messages_en.js

@@ -0,0 +1,9 @@
+export const messages = {
+  'SMART.EXPORT_CSV.PROGRESS_TITLE': 'Exporting list:',
+  'SMART.EXPORT_CSV.RESULT_SUBTITLE': 'Result:',
+  'SMART.EXPORT_CSV.SUCCESS_TITLE': 'Exporting complete',
+  'SMART.EXPORT_CSV.DOWNLOAD': 'Download CSV',
+  'SMART.EXPORT_CSV.KEEP_PAGE_OPEN': 'Keep page open during export',
+  'SMART.EXPORT_CSV.FAILED_TITLE': 'Export failed',
+  'SMART.EXPORT_CSV.FAILED_SUBTITLE': 'Please try again'
+};

package/ExportCSV/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type ExportCsvMessages } from './types';
+export declare const messages: LangMessages<ExportCsvMessages>;

package/ExportCSV/polyglot/messages_ru.js

@@ -0,0 +1,9 @@
+export const messages = {
+  'SMART.EXPORT_CSV.PROGRESS_TITLE': 'Экспорт списка:',
+  'SMART.EXPORT_CSV.RESULT_SUBTITLE': 'Результат:',
+  'SMART.EXPORT_CSV.SUCCESS_TITLE': 'Экспорт завершён',
+  'SMART.EXPORT_CSV.DOWNLOAD': 'Скачать CSV',
+  'SMART.EXPORT_CSV.KEEP_PAGE_OPEN': 'Не закрывайте страницу во время экспорта',
+  'SMART.EXPORT_CSV.FAILED_TITLE': 'Ошибка экспорта',
+  'SMART.EXPORT_CSV.FAILED_SUBTITLE': 'Попробуйте ещё раз'
+};

package/ExportCSV/polyglot/types.d.ts

@@ -0,0 +1,10 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type ExportCsvMessages = {
+    'SMART.EXPORT_CSV.PROGRESS_TITLE': NoParams;
+    'SMART.EXPORT_CSV.RESULT_SUBTITLE': NoParams;
+    'SMART.EXPORT_CSV.SUCCESS_TITLE': NoParams;
+    'SMART.EXPORT_CSV.DOWNLOAD': NoParams;
+    'SMART.EXPORT_CSV.KEEP_PAGE_OPEN': NoParams;
+    'SMART.EXPORT_CSV.FAILED_TITLE': NoParams;
+    'SMART.EXPORT_CSV.FAILED_SUBTITLE': NoParams;
+};

package/ExportCSV/polyglot/types.js

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

package/ExportCSV/useExportService/useExportService.js

@@ -60,6 +60,7 @@ export const useExportService = () => {
           if (retriesRef.current < MAX_RETRIES) {
             retriesRef.current += 1;
             timeoutStatusRef.current = setTimeout(() => {
+              // eslint-disable-next-line react-hooks/immutability
               getStatus(params);
               clearStatusTimeout();
             }, API_CHECK_INTERVAL);

package/LanguagesSelector/LanguagesModal.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Button, ModalHeader, ModalBody, ModalFooter, ModalTitle } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { LanguagesSelectFormLoader } from './LanguagesSelectFormLoader';
@@ -12,27 +13,40 @@ export const LanguagesModal = ({
 }) => {
   const lang = useLang();
   const [selectedLanguages, setSelectedLanguages] = useState(initialLanguages);
-  return React.createElement(React.Fragment, null, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.MODAL.TITLE'
-  }))), React.createElement(ModalBody, null, React.createElement(LanguagesSelectFormLoader, {
-    application: applicationCode,
-    onChange: setSelectedLanguages,
-    value: selectedLanguages
-  })), React.createElement(ModalFooter, null, React.createElement(Horizontal, {
-    "$justifyContent": "end",
-    "$gap": 8
-  }, React.createElement(Button, {
-    color: "secondary",
-    onClick: onClose
-  }, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.BUTTON.CANCEL'
-  })), React.createElement(Button, {
-    color: "primary",
-    onClick: () => {
-      saveLastSelection(selectedLanguages);
-      onSubmit(selectedLanguages);
-    }
-  }, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.BUTTON.APPLY'
-  })))));
+  return _jsxs(_Fragment, {
+    children: [_jsx(ModalHeader, {
+      children: _jsx(ModalTitle, {
+        children: lang({
+          message: 'SMART.LANGUAGES_SELECTOR.MODAL.TITLE'
+        })
+      })
+    }), _jsx(ModalBody, {
+      children: _jsx(LanguagesSelectFormLoader, {
+        application: applicationCode,
+        onChange: setSelectedLanguages,
+        value: selectedLanguages
+      })
+    }), _jsx(ModalFooter, {
+      children: _jsxs(Horizontal, {
+        "$justifyContent": "end",
+        "$gap": 8,
+        children: [_jsx(Button, {
+          color: "secondary",
+          onClick: onClose,
+          children: lang({
+            message: 'SMART.LANGUAGES_SELECTOR.BUTTON.CANCEL'
+          })
+        }), _jsx(Button, {
+          color: "primary",
+          onClick: () => {
+            saveLastSelection(selectedLanguages);
+            onSubmit(selectedLanguages);
+          },
+          children: lang({
+            message: 'SMART.LANGUAGES_SELECTOR.BUTTON.APPLY'
+          })
+        })]
+      })
+    })]
+  });
 };

package/LanguagesSelector/LanguagesSelectForm.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { Checkbox, SearchInput } from '@pushwoosh/dumb-components';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useLang } from './polyglot';
@@ -24,65 +25,75 @@ export const LanguagesSelectForm = ({
       return item.name.toLowerCase().includes(search.toLowerCase());
     });
   }, [allLanguageItems, search, showAllLanguages, langs]);
-  return React.createElement(Vertical, {
-    "$gap": 8
-  }, React.createElement(SearchInput, {
-    value: search,
-    onChange: e => setSearch(e.target.value),
-    "$onClear": () => setSearch(''),
-    placeholder: lang({
-      message: 'SMART.LANGUAGES_SELECTOR.SEARCH_PLACEHOLDER'
-    })
-  }), React.createElement(Horizontal, {
-    "$justifyContent": "space-between"
-  }, React.createElement(Horizontal, {
-    "$gap": 16,
-    "$justifyContent": "start"
-  }, React.createElement(ActionButton, {
-    onClick: () => {
-      onChange(filteredLanguages.map(item => item.code));
-    }
-  }, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL'
-  })), React.createElement(ActionButton, {
-    onClick: () => {
-      onChange([]);
-    }
-  }, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL'
-  }))), lastSelection.length > 0 && React.createElement(ActionButton, {
-    onClick: () => {
-      onChange(lastSelection);
-    }
-  }, lang({
-    message: 'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST'
-  }))), React.createElement(Vertical, {
-    "$gap": 24
-  }, React.createElement(Columns, {
-    "$sizes": 3,
-    "$gap": 8
-  }, filteredLanguages.map(item => React.createElement(Checkbox, {
-    name: "languages",
-    value: item.code,
-    isChecked: langs.includes(item.code),
-    onChange: isChecked => {
-      if (isChecked) {
-        onChange([...langs, item.code]);
-      } else {
-        onChange(langs.filter(code => code !== item.code));
-      }
-    },
-    label: lang({
-      message: 'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL',
-      name: getLangName(item.code),
-      subscribers: item.subscribers
-    }),
-    key: item.code
-  }))), React.createElement("div", null, React.createElement(ActionButton, {
-    onClick: () => setShowAllLanguages(x => !x)
-  }, showAllLanguages ? lang({
-    message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS'
-  }) : lang({
-    message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL'
-  })))));
+  return _jsxs(Vertical, {
+    "$gap": 8,
+    children: [_jsx(SearchInput, {
+      value: search,
+      onChange: e => setSearch(e.target.value),
+      "$onClear": () => setSearch(''),
+      placeholder: lang({
+        message: 'SMART.LANGUAGES_SELECTOR.SEARCH_PLACEHOLDER'
+      })
+    }), _jsxs(Horizontal, {
+      "$justifyContent": "space-between",
+      children: [_jsxs(Horizontal, {
+        "$gap": 16,
+        "$justifyContent": "start",
+        children: [_jsx(ActionButton, {
+          onClick: () => {
+            onChange(filteredLanguages.map(item => item.code));
+          },
+          children: lang({
+            message: 'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL'
+          })
+        }), _jsx(ActionButton, {
+          onClick: () => {
+            onChange([]);
+          },
+          children: lang({
+            message: 'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL'
+          })
+        })]
+      }), lastSelection.length > 0 && _jsx(ActionButton, {
+        onClick: () => {
+          onChange(lastSelection);
+        },
+        children: lang({
+          message: 'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST'
+        })
+      })]
+    }), _jsxs(Vertical, {
+      "$gap": 24,
+      children: [_jsx(Columns, {
+        "$sizes": 3,
+        "$gap": 8,
+        children: filteredLanguages.map(item => _jsx(Checkbox, {
+          name: "languages",
+          value: item.code,
+          isChecked: langs.includes(item.code),
+          onChange: isChecked => {
+            if (isChecked) {
+              onChange([...langs, item.code]);
+            } else {
+              onChange(langs.filter(code => code !== item.code));
+            }
+          },
+          label: lang({
+            message: 'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL',
+            name: getLangName(item.code),
+            subscribers: item.subscribers
+          })
+        }, item.code))
+      }), _jsx("div", {
+        children: _jsx(ActionButton, {
+          onClick: () => setShowAllLanguages(x => !x),
+          children: showAllLanguages ? lang({
+            message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS'
+          }) : lang({
+            message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL'
+          })
+        })
+      })]
+    })]
+  });
 };

package/LanguagesSelector/LanguagesSelectFormLoader.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Spinner } from '@pushwoosh/dumb-components';
 import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
 import { useSPAContext } from '@pushwoosh/spa-context';
@@ -38,14 +38,15 @@ export const LanguagesSelectFormLoader = ({
     });
   }, [application, getLangName, systemLanguage]);
   if (langAsync.loading) {
-    return React.createElement(Horizontal, {
+    return _jsx(Horizontal, {
       "$placeItems": "center",
-      "$padding": 36
-    }, React.createElement(Spinner, {
-      size: "medium"
-    }));
+      "$padding": 36,
+      children: _jsx(Spinner, {
+        size: "medium"
+      })
+    });
   }
-  return React.createElement(LanguagesSelectForm, {
+  return _jsx(LanguagesSelectForm, {
     allLanguageItems: langAsync.value,
     langs: value,
     onChange: onChange,