@pushwoosh/smart-components-kit 1.0.76 → 1.0.88

package/DocsButton/DocsButton.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, DrawerDocs, useDocs } from '@pushwoosh/dumb-components';
 import { DocsIcon } from '@pushwoosh/kit-icons';
 import { useDocsButtonUrl } from './hooks';
+import { useLang } from './polyglot';
 export function DocsButton(props) {
   const {
     pathname,
@@ -11,6 +12,7 @@ export function DocsButton(props) {
     size,
     openInNewWindow = false
   } = props;
+  const lang = useLang();
   const {
     docsOpen,
     openDocsDrawer,
@@ -28,7 +30,9 @@ export function DocsButton(props) {
     openDocsDrawer();
   };
   return React.createElement(React.Fragment, null, React.createElement(Button, {
-    "aria-label": "Documentation",
+    "aria-label": lang({
+      message: 'SMART.DOCS_BUTTON.ARIA_LABEL'
+    }),
     color: color,
     view: view,
     size: size,

package/DocsButton/polyglot/index.d.ts

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

package/DocsButton/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/DocsButton/polyglot/messages_en.d.ts

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

package/DocsButton/polyglot/messages_en.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'SMART.DOCS_BUTTON.ARIA_LABEL': 'Documentation'
+};

package/DocsButton/polyglot/messages_ru.d.ts

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

package/DocsButton/polyglot/messages_ru.js

@@ -0,0 +1,3 @@
+export const messages = {
+  'SMART.DOCS_BUTTON.ARIA_LABEL': 'Документация'
+};

package/DocsButton/polyglot/types.d.ts

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

package/DocsButton/polyglot/types.js

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

package/DynamicContentPicker/styled.d.ts

@@ -1,114 +1,26 @@
 import { type ArrowDirection } from './types';
-export declare const FieldPlace: 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;
+export declare const FieldPlace: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | 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;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
 }, "$gridAutoFlow">;
 export declare const TextPlace: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Arrow: 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;
+export declare const Arrow: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | 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;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
 } & {

package/DynamicContentPickerForm/styled.d.ts

@@ -1,117 +1,29 @@
 import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-export declare const SimpleTagPickerDiv: 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;
+export declare const SimpleTagPickerDiv: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | 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;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
 } & {
     $gap: number;
     $padding: number;
     $borderRadius: ShapeRadius;
-}, "$gridAutoFlow" | "$borderRadius" | "$gap" | "$padding">;
-export declare const VariedTagPickerDiv: 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" | "$borderRadius" | "$padding" | "$gap">;
+export declare const VariedTagPickerDiv: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | 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;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
 } & {
@@ -122,4 +34,4 @@ export declare const VariedTagPickerDiv: import("styled-components").StyledCompo
     $border: string;
     $bgColor: Color;
     $boxShadow: Shadow;
-}, "$gridAutoFlow" | "$bgColor" | "$border" | "$borderRadius" | "$boxShadow" | "$gap" | "$padding">;
+}, "$gridAutoFlow" | "$bgColor" | "$border" | "$borderRadius" | "$boxShadow" | "$padding" | "$gap">;

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -83,7 +83,8 @@ export const ExportCsvBanner = ({
     hide();
     onClose === null || onClose === void 0 || onClose();
   }, [hide, onClose]);
-  if (!exportTask || isHidden) return null;
+  const hasRenderableContent = exportTask && ['STATUS_SUCCESS', 'STATUS_PENDING', 'STATUS_FAILED'].includes(exportTask.status);
+  if (!exportTask || isHidden || !hasRenderableContent) return null;
   const {
     filename,
     status,

package/LanguagesSelector/LanguagesModal.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button, ModalHeader, ModalBody, ModalFooter, ModalTitle } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { LanguagesSelectFormLoader } from './LanguagesSelectFormLoader';
+import { useLang } from './polyglot';
 import { saveLastSelection } from './utils';
 export const LanguagesModal = ({
   applicationCode,
@@ -9,8 +10,11 @@ export const LanguagesModal = ({
   onSubmit,
   onClose
 }) => {
+  const lang = useLang();
   const [selectedLanguages, setSelectedLanguages] = useState(initialLanguages);
-  return React.createElement(React.Fragment, null, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, "Select languages")), React.createElement(ModalBody, null, React.createElement(LanguagesSelectFormLoader, {
+  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
@@ -20,11 +24,15 @@ export const LanguagesModal = ({
   }, React.createElement(Button, {
     color: "secondary",
     onClick: onClose
-  }, "Cancel"), React.createElement(Button, {
+  }, lang({
+    message: 'SMART.LANGUAGES_SELECTOR.BUTTON.CANCEL'
+  })), React.createElement(Button, {
     color: "primary",
     onClick: () => {
       saveLastSelection(selectedLanguages);
       onSubmit(selectedLanguages);
     }
-  }, "Apply"))));
+  }, lang({
+    message: 'SMART.LANGUAGES_SELECTOR.BUTTON.APPLY'
+  })))));
 };

package/LanguagesSelector/LanguagesSelectForm.js

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Checkbox, SearchInput } from '@pushwoosh/dumb-components';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { useLang } from './polyglot';
 import { ActionButton } from './styled';
 import { fetchLastSelection, useGetLangName } from './utils';
 export const LanguagesSelectForm = ({
@@ -9,17 +10,18 @@ export const LanguagesSelectForm = ({
   onChange,
   systemLanguage = 'en'
 }) => {
+  const lang = useLang();
   const getLangName = useGetLangName(systemLanguage);
   const [lastSelection] = useState(fetchLastSelection);
   const [search, setSearch] = useState('');
   const [showAllLanguages, setShowAllLanguages] = useState(false);
   const filteredLanguages = useMemo(() => {
-    const languageItems = showAllLanguages ? allLanguageItems : allLanguageItems.filter(lang => lang.subscribers > 0 || langs.includes(lang.code));
+    const languageItems = showAllLanguages ? allLanguageItems : allLanguageItems.filter(item => item.subscribers > 0 || langs.includes(item.code));
     if (!search) {
       return languageItems;
     }
-    return languageItems.filter(lang => {
-      return lang.name.toLowerCase().includes(search.toLowerCase());
+    return languageItems.filter(item => {
+      return item.name.toLowerCase().includes(search.toLowerCase());
     });
   }, [allLanguageItems, search, showAllLanguages, langs]);
   return React.createElement(Vertical, {
@@ -28,7 +30,9 @@ export const LanguagesSelectForm = ({
     value: search,
     onChange: e => setSearch(e.target.value),
     "$onClear": () => setSearch(''),
-    placeholder: "Search languages..."
+    placeholder: lang({
+      message: 'SMART.LANGUAGES_SELECTOR.SEARCH_PLACEHOLDER'
+    })
   }), React.createElement(Horizontal, {
     "$justifyContent": "space-between"
   }, React.createElement(Horizontal, {
@@ -36,35 +40,49 @@ export const LanguagesSelectForm = ({
     "$justifyContent": "start"
   }, React.createElement(ActionButton, {
     onClick: () => {
-      onChange(filteredLanguages.map(lang => lang.code));
+      onChange(filteredLanguages.map(item => item.code));
     }
-  }, "select all"), React.createElement(ActionButton, {
+  }, lang({
+    message: 'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL'
+  })), React.createElement(ActionButton, {
     onClick: () => {
       onChange([]);
     }
-  }, "deselect all")), lastSelection.length > 0 && React.createElement(ActionButton, {
+  }, lang({
+    message: 'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL'
+  }))), lastSelection.length > 0 && React.createElement(ActionButton, {
     onClick: () => {
       onChange(lastSelection);
     }
-  }, "reuse last selection")), React.createElement(Vertical, {
+  }, lang({
+    message: 'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST'
+  }))), React.createElement(Vertical, {
     "$gap": 24
   }, React.createElement(Columns, {
     "$sizes": 3,
     "$gap": 8
-  }, filteredLanguages.map(lang => React.createElement(Checkbox, {
+  }, filteredLanguages.map(item => React.createElement(Checkbox, {
     name: "languages",
-    value: lang.code,
-    isChecked: langs.includes(lang.code),
+    value: item.code,
+    isChecked: langs.includes(item.code),
     onChange: isChecked => {
       if (isChecked) {
-        onChange([...langs, lang.code]);
+        onChange([...langs, item.code]);
       } else {
-        onChange(langs.filter(code => code !== lang.code));
+        onChange(langs.filter(code => code !== item.code));
       }
     },
-    label: `${getLangName(lang.code)} (${lang.subscribers})`,
-    key: lang.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 ? 'Show only languages with subscribers' : 'Show all languages'))));
+  }, showAllLanguages ? lang({
+    message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS'
+  }) : lang({
+    message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL'
+  })))));
 };

package/LanguagesSelector/LanguagesSelector.js

@@ -3,6 +3,7 @@ import { Button, Modal, DropdownMenu, DropdownMenuItem, DropdownMenuSection } fr
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { ArrowIcon, ChevronIcon, LanguageIcon, PlusIcon } from '@pushwoosh/kit-icons';
 import { LanguagesModal } from './LanguagesModal';
+import { useLang } from './polyglot';
 import { ButtonGroup } from './styled';
 import { useGetLangName } from './utils';
 export const LanguagesSelector = ({
@@ -14,9 +15,10 @@ export const LanguagesSelector = ({
   onChangeLanguages
 }) => {
   const [showLanguagesModal, setShowLanguagesModal] = useState(false);
+  const lang = useLang();
   const getLangName = useGetLangName('en');
   const sortedLanguages = useMemo(() => {
-    const sorted = languages.filter(lang => lang !== 'default').sort((a, b) => getLangName(a).localeCompare(getLangName(b), 'en', {
+    const sorted = languages.filter(code => code !== 'default').sort((a, b) => getLangName(a).localeCompare(getLangName(b), 'en', {
       sensitivity: 'base'
     }));
     return ['default', ...sorted];
@@ -45,11 +47,13 @@ export const LanguagesSelector = ({
     }, getLangName(value))
   }, () => React.createElement(React.Fragment, null, React.createElement(DropdownMenuSection, null, React.createElement(DropdownMenuItem, {
     onClick: () => setShowLanguagesModal(true)
-  }, "Choose languages\u2026")), React.createElement(DropdownMenuSection, null, sortedLanguages.map(lang => React.createElement(DropdownMenuItem, {
-    key: lang,
-    isActive: lang === value,
-    onClick: () => onChange(lang)
-  }, getLangName(lang)))))), sortedLanguages.length > 1 && React.createElement(ButtonGroup, null, React.createElement(Button, {
+  }, lang({
+    message: 'SMART.LANGUAGES_SELECTOR.CHOOSE_LANGUAGES'
+  }))), React.createElement(DropdownMenuSection, null, sortedLanguages.map(code => React.createElement(DropdownMenuItem, {
+    key: code,
+    isActive: code === value,
+    onClick: () => onChange(code)
+  }, getLangName(code)))))), sortedLanguages.length > 1 && React.createElement(ButtonGroup, null, React.createElement(Button, {
     color: "secondary",
     isDisabled: isDisabled,
     icon: React.createElement(ArrowIcon, {

package/LanguagesSelector/polyglot/index.d.ts

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

package/LanguagesSelector/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/LanguagesSelector/polyglot/messages_en.d.ts

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

package/LanguagesSelector/polyglot/messages_en.js

@@ -0,0 +1,13 @@
+export const messages = {
+  'SMART.LANGUAGES_SELECTOR.MODAL.TITLE': 'Select languages',
+  'SMART.LANGUAGES_SELECTOR.BUTTON.CANCEL': 'Cancel',
+  'SMART.LANGUAGES_SELECTOR.BUTTON.APPLY': 'Apply',
+  'SMART.LANGUAGES_SELECTOR.SEARCH_PLACEHOLDER': 'Search languages...',
+  'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'select all',
+  'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'deselect all',
+  'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'reuse last selection',
+  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Show all languages',
+  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Show only languages with subscribers',
+  'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL': '{{name}} ({{subscribers}})',
+  'SMART.LANGUAGES_SELECTOR.CHOOSE_LANGUAGES': 'Choose languages…'
+};

package/LanguagesSelector/polyglot/messages_ru.d.ts

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

package/LanguagesSelector/polyglot/messages_ru.js

@@ -0,0 +1,13 @@
+export const messages = {
+  'SMART.LANGUAGES_SELECTOR.MODAL.TITLE': 'Выберите языки',
+  'SMART.LANGUAGES_SELECTOR.BUTTON.CANCEL': 'Отмена',
+  'SMART.LANGUAGES_SELECTOR.BUTTON.APPLY': 'Применить',
+  'SMART.LANGUAGES_SELECTOR.SEARCH_PLACEHOLDER': 'Поиск языков...',
+  'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'выбрать все',
+  'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'снять все',
+  'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'повторить прошлый выбор',
+  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Показать все языки',
+  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Только языки с подписчиками',
+  'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL': '{{name}} ({{subscribers}})',
+  'SMART.LANGUAGES_SELECTOR.CHOOSE_LANGUAGES': 'Выбрать языки…'
+};

package/LanguagesSelector/polyglot/types.d.ts

@@ -0,0 +1,17 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type LanguagesSelectorMessages = {
+    'SMART.LANGUAGES_SELECTOR.MODAL.TITLE': NoParams;
+    'SMART.LANGUAGES_SELECTOR.BUTTON.CANCEL': NoParams;
+    'SMART.LANGUAGES_SELECTOR.BUTTON.APPLY': NoParams;
+    'SMART.LANGUAGES_SELECTOR.SEARCH_PLACEHOLDER': NoParams;
+    'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': NoParams;
+    'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': NoParams;
+    'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': NoParams;
+    'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': NoParams;
+    'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': NoParams;
+    'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL': {
+        name: string;
+        subscribers: number;
+    };
+    'SMART.LANGUAGES_SELECTOR.CHOOSE_LANGUAGES': NoParams;
+};

package/LanguagesSelector/polyglot/types.js

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