@serhii.olishevskyi/docs 1.2.24 → 1.2.25

package/dist/index.d.mts

@@ -504,6 +504,9 @@ type CollapsedContainerComponentProps = {
 };
 declare const CollapsedContainerComponent: (props: PropsWithChildren<CollapsedContainerComponentProps>) => React$1.JSX.Element;
 
+declare const LanguageSelector: React__default.FC;
+declare const PublicLanguageSelector: React__default.FC;
+
 type AIProviderType = 'gemini' | 'openai';
 interface AIServiceConfig {
     apiKey?: string;
@@ -854,4 +857,4 @@ declare const Utils: {
     };
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, ButtonComponent, type ButtonComponentProps, CheckboxComponent, type CheckboxComponentProps, CollapsedContainerComponent, type CollapsedContainerComponentProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, CopyClipboardButtonComponent, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, EmailInputComponent, type EmailInputComponentProps, ErrorAlertComponent, type ErrorAlertComponentProps, ExpandableNoteComponent, type ExpandableNoteComponentProps, FilterContainerComponent, type FilterContainerComponentProps, type FilterSectionProps, type FilterWidth, type FullCompanyMemberItem, type HeaderActionItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, MyAvatarComponent, type MyAvatarComponentProps, NumberInputComponent, type NumberInputComponentProps, PageComponent, type PageComponentProps, type PageHeaderProps, type PageLink, PageLinkComponent, type PageLinkComponentProps, type PrimaryActionProps, Providers, type RefreshActionProps, RefreshButtonComponent, type RefreshButtonComponentProps, type SaveCompanyUserPayload, SearchComponent, type SearchComponentProps, SelectComponent, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, SwitchComponent, type SwitchComponentProps, TextFieldComponent, type TextFieldComponentProps, type TextTruncateMode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, TranslatableTooltipComponent, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UrlComponent, type UrlComponentProps, UserAvatarComponent, type UserAvatarComponentProps, type UserGroupedSessions, UserPopoverComponent, type UserPopoverComponentProps, type UserProfile, UserRoleChipComponent, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, UserStatusChipComponent, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, ButtonComponent, type ButtonComponentProps, CheckboxComponent, type CheckboxComponentProps, CollapsedContainerComponent, type CollapsedContainerComponentProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, CopyClipboardButtonComponent, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, EmailInputComponent, type EmailInputComponentProps, ErrorAlertComponent, type ErrorAlertComponentProps, ExpandableNoteComponent, type ExpandableNoteComponentProps, FilterContainerComponent, type FilterContainerComponentProps, type FilterSectionProps, type FilterWidth, type FullCompanyMemberItem, type HeaderActionItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, MyAvatarComponent, type MyAvatarComponentProps, NumberInputComponent, type NumberInputComponentProps, PageComponent, type PageComponentProps, type PageHeaderProps, type PageLink, PageLinkComponent, type PageLinkComponentProps, type PrimaryActionProps, LanguageSelector as ProtectedLanguageSelector, Providers, PublicLanguageSelector, type RefreshActionProps, RefreshButtonComponent, type RefreshButtonComponentProps, type SaveCompanyUserPayload, SearchComponent, type SearchComponentProps, SelectComponent, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, SwitchComponent, type SwitchComponentProps, TextFieldComponent, type TextFieldComponentProps, type TextTruncateMode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, TranslatableTooltipComponent, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UrlComponent, type UrlComponentProps, UserAvatarComponent, type UserAvatarComponentProps, type UserGroupedSessions, UserPopoverComponent, type UserPopoverComponentProps, type UserProfile, UserRoleChipComponent, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, UserStatusChipComponent, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.d.ts

@@ -504,6 +504,9 @@ type CollapsedContainerComponentProps = {
 };
 declare const CollapsedContainerComponent: (props: PropsWithChildren<CollapsedContainerComponentProps>) => React$1.JSX.Element;
 
+declare const LanguageSelector: React__default.FC;
+declare const PublicLanguageSelector: React__default.FC;
+
 type AIProviderType = 'gemini' | 'openai';
 interface AIServiceConfig {
     apiKey?: string;
@@ -854,4 +857,4 @@ declare const Utils: {
     };
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, ButtonComponent, type ButtonComponentProps, CheckboxComponent, type CheckboxComponentProps, CollapsedContainerComponent, type CollapsedContainerComponentProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, CopyClipboardButtonComponent, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, EmailInputComponent, type EmailInputComponentProps, ErrorAlertComponent, type ErrorAlertComponentProps, ExpandableNoteComponent, type ExpandableNoteComponentProps, FilterContainerComponent, type FilterContainerComponentProps, type FilterSectionProps, type FilterWidth, type FullCompanyMemberItem, type HeaderActionItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, MyAvatarComponent, type MyAvatarComponentProps, NumberInputComponent, type NumberInputComponentProps, PageComponent, type PageComponentProps, type PageHeaderProps, type PageLink, PageLinkComponent, type PageLinkComponentProps, type PrimaryActionProps, Providers, type RefreshActionProps, RefreshButtonComponent, type RefreshButtonComponentProps, type SaveCompanyUserPayload, SearchComponent, type SearchComponentProps, SelectComponent, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, SwitchComponent, type SwitchComponentProps, TextFieldComponent, type TextFieldComponentProps, type TextTruncateMode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, TranslatableTooltipComponent, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UrlComponent, type UrlComponentProps, UserAvatarComponent, type UserAvatarComponentProps, type UserGroupedSessions, UserPopoverComponent, type UserPopoverComponentProps, type UserProfile, UserRoleChipComponent, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, UserStatusChipComponent, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, ButtonComponent, type ButtonComponentProps, CheckboxComponent, type CheckboxComponentProps, CollapsedContainerComponent, type CollapsedContainerComponentProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, CopyClipboardButtonComponent, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, EmailInputComponent, type EmailInputComponentProps, ErrorAlertComponent, type ErrorAlertComponentProps, ExpandableNoteComponent, type ExpandableNoteComponentProps, FilterContainerComponent, type FilterContainerComponentProps, type FilterSectionProps, type FilterWidth, type FullCompanyMemberItem, type HeaderActionItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, MyAvatarComponent, type MyAvatarComponentProps, NumberInputComponent, type NumberInputComponentProps, PageComponent, type PageComponentProps, type PageHeaderProps, type PageLink, PageLinkComponent, type PageLinkComponentProps, type PrimaryActionProps, LanguageSelector as ProtectedLanguageSelector, Providers, PublicLanguageSelector, type RefreshActionProps, RefreshButtonComponent, type RefreshButtonComponentProps, type SaveCompanyUserPayload, SearchComponent, type SearchComponentProps, SelectComponent, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, SwitchComponent, type SwitchComponentProps, TextFieldComponent, type TextFieldComponentProps, type TextTruncateMode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, TranslatableTooltipComponent, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UrlComponent, type UrlComponentProps, UserAvatarComponent, type UserAvatarComponentProps, type UserGroupedSessions, UserPopoverComponent, type UserPopoverComponentProps, type UserProfile, UserRoleChipComponent, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, UserStatusChipComponent, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.js

@@ -2968,7 +2968,9 @@ __export(index_exports, {
   NumberInputComponent: () => NumberInputComponent,
   PageComponent: () => PageComponent,
   PageLinkComponent: () => PageLinkComponent,
+  ProtectedLanguageSelector: () => LanguageSelector,
   Providers: () => Providers,
+  PublicLanguageSelector: () => PublicLanguageSelector,
   RefreshButtonComponent: () => RefreshButtonComponent,
   SearchComponent: () => SearchComponent,
   SelectComponent: () => SelectComponent,
@@ -5212,6 +5214,286 @@ var CollapsedContainerComponent = (props) => {
   ] });
 };
 
+// src/i18n/LanguageSelector.tsx
+var import_react33 = require("react");
+var import_react_i18next6 = require("react-i18next");
+var import_material29 = require("@mui/material");
+init_LocalizationProvider();
+init_UserSettingsProvider();
+init_SupabaseProvider();
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next6.useTranslation)();
+  const [languages, setLanguages] = (0, import_react33.useState)([]);
+  const [loading, setLoading] = (0, import_react33.useState)(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react33.useEffect)(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.IconButton,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_material29.Box,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            import_material29.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.Box,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n: i18n2 } = (0, import_react_i18next6.useTranslation)();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = (0, import_react33.useState)([]);
+  const [loading, setLoading] = (0, import_react33.useState)(true);
+  const [anchorEl, setAnchorEl] = (0, import_react33.useState)(null);
+  const open = Boolean(anchorEl);
+  (0, import_react33.useEffect)(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n2.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Tooltip, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.IconButton,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_material29.Box,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_material29.Menu,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            import_material29.MenuItem,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_material29.Box,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material29.Typography, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
 // src/types/index.ts
 init_user_types();
 
@@ -5235,16 +5517,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 init_deviceId();
 init_context();
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = (0, import_react33.useState)("offline");
-  const [lastSeen, setLastSeen] = (0, import_react33.useState)(initialLastSeenAt ?? null);
-  const lastSeenRef = (0, import_react33.useRef)(initialLastSeenAt ?? null);
+  const [status, setStatus] = (0, import_react34.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react34.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react34.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -5260,7 +5542,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -5380,7 +5662,9 @@ var Utils = {
   NumberInputComponent,
   PageComponent,
   PageLinkComponent,
+  ProtectedLanguageSelector,
   Providers,
+  PublicLanguageSelector,
   RefreshButtonComponent,
   SearchComponent,
   SelectComponent,

package/dist/index.mjs

@@ -2277,6 +2277,291 @@ var CollapsedContainerComponent = (props) => {
   ] });
 };
 
+// src/i18n/LanguageSelector.tsx
+import { useEffect as useEffect5, useState as useState13 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import {
+  Box as Box10,
+  Typography as Typography9,
+  CircularProgress,
+  IconButton as IconButton8,
+  Menu as Menu2,
+  MenuItem as MenuItem3,
+  Tooltip as Tooltip8
+} from "@mui/material";
+import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation3();
+  const [languages, setLanguages] = useState13([]);
+  const [loading, setLoading] = useState13(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = useState13(null);
+  const open = Boolean(anchorEl);
+  useEffect5(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx19(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
+    /* @__PURE__ */ jsx19(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx19(
+      IconButton8,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx19(
+          Box10,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(
+      Menu2,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs13(
+            MenuItem3,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx19(
+                  Box10,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation3();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = useState13([]);
+  const [loading, setLoading] = useState13(true);
+  const [anchorEl, setAnchorEl] = useState13(null);
+  const open = Boolean(anchorEl);
+  useEffect5(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx19(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+  }
+  const rawCurrentLang = i18n.language || "uk";
+  const currentLangCode = rawCurrentLang.split("-")[0];
+  const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
+  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
+    /* @__PURE__ */ jsx19(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx19(
+      IconButton8,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx19(
+          Box10,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx19(
+      Menu2,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs13(
+            MenuItem3,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx19(
+                  Box10,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
 // src/services/index.ts
 var Services = {
   SessionService: {
@@ -2292,13 +2577,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect5, useRef, useState as useState13 } from "react";
+import { useEffect as useEffect6, useRef, useState as useState14 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState13("offline");
-  const [lastSeen, setLastSeen] = useState13(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState14("offline");
+  const [lastSeen, setLastSeen] = useState14(initialLastSeenAt ?? null);
   const lastSeenRef = useRef(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
@@ -2315,7 +2600,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -2431,7 +2716,9 @@ export {
   NumberInputComponent,
   PageComponent,
   PageLinkComponent,
+  LanguageSelector as ProtectedLanguageSelector,
   Providers,
+  PublicLanguageSelector,
   RefreshButtonComponent,
   SearchComponent,
   SelectComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhii.olishevskyi/docs",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",