@serhii.olishevskyi/docs 1.2.15 → 1.2.17

package/dist/index.d.mts

@@ -171,6 +171,21 @@ interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onCli
     onCopySuccess?: (text: string) => void;
 }
 
+interface RefreshButtonComponentProps {
+    overrideNamespace?: string;
+    size?: 'small' | 'medium' | 'large';
+    color?: "success" | "error" | "info" | "warning";
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    tooltip?: ReactNode;
+    mobileViewOnly?: boolean;
+    disableMobileView?: boolean;
+    hideTooltipOnMobile?: boolean;
+    hideTooltipOnDesktop?: boolean;
+}
+
 interface TranslatableTooltipComponentProps extends Omit<TooltipProps, 'children'> {
     overrideNamespace?: string;
     disableSpan?: boolean;
@@ -373,6 +388,17 @@ interface PageLinkWidgetProps {
     onActionButtonClick?: () => void;
 }
 
+type CollapsedWidgetContainerProps = {
+    overrideNamespace?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    expanded?: boolean;
+    uncollapsedContent?: ReactNode;
+    disableShadow?: boolean;
+    onExpanded?: (expanded: boolean) => void;
+};
+
 declare const UI: {
     Inputs: {
         TextField: React$1.FC<TextFieldComponentProps>;
@@ -386,6 +412,7 @@ declare const UI: {
     };
     Buttons: {
         CopyClipboardButton: React$1.FC<CopyClipboardButtonComponentProps>;
+        RefreshButton: React$1.FC<RefreshButtonComponentProps>;
     };
     DataDisplay: {
         TranslatableTooltip: React$1.FC<TranslatableTooltipComponentProps>;
@@ -403,6 +430,7 @@ declare const UI: {
         };
         Pages: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
+            CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
         };
     };
 };
@@ -749,4 +777,12 @@ declare const Hooks: {
     };
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type CheckboxComponentProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+declare const Utils: {
+    readonly getDeviceId: () => string;
+    readonly Sessions: {
+        readonly notifySessionChange: () => void;
+        readonly subscribeToSessionChanges: (callback: () => void) => () => void;
+    };
+};
+
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type CheckboxComponentProps, type CollapsedWidgetContainerProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type RefreshButtonComponentProps, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.d.ts

@@ -171,6 +171,21 @@ interface CopyClipboardButtonComponentProps extends Omit<IconButtonProps, 'onCli
     onCopySuccess?: (text: string) => void;
 }
 
+interface RefreshButtonComponentProps {
+    overrideNamespace?: string;
+    size?: 'small' | 'medium' | 'large';
+    color?: "success" | "error" | "info" | "warning";
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    tooltip?: ReactNode;
+    mobileViewOnly?: boolean;
+    disableMobileView?: boolean;
+    hideTooltipOnMobile?: boolean;
+    hideTooltipOnDesktop?: boolean;
+}
+
 interface TranslatableTooltipComponentProps extends Omit<TooltipProps, 'children'> {
     overrideNamespace?: string;
     disableSpan?: boolean;
@@ -373,6 +388,17 @@ interface PageLinkWidgetProps {
     onActionButtonClick?: () => void;
 }
 
+type CollapsedWidgetContainerProps = {
+    overrideNamespace?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    expanded?: boolean;
+    uncollapsedContent?: ReactNode;
+    disableShadow?: boolean;
+    onExpanded?: (expanded: boolean) => void;
+};
+
 declare const UI: {
     Inputs: {
         TextField: React$1.FC<TextFieldComponentProps>;
@@ -386,6 +412,7 @@ declare const UI: {
     };
     Buttons: {
         CopyClipboardButton: React$1.FC<CopyClipboardButtonComponentProps>;
+        RefreshButton: React$1.FC<RefreshButtonComponentProps>;
     };
     DataDisplay: {
         TranslatableTooltip: React$1.FC<TranslatableTooltipComponentProps>;
@@ -403,6 +430,7 @@ declare const UI: {
         };
         Pages: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
+            CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
         };
     };
 };
@@ -749,4 +777,12 @@ declare const Hooks: {
     };
 };
 
-export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type CheckboxComponentProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };
+declare const Utils: {
+    readonly getDeviceId: () => string;
+    readonly Sessions: {
+        readonly notifySessionChange: () => void;
+        readonly subscribeToSessionChanges: (callback: () => void) => () => void;
+    };
+};
+
+export { type AIConfig, type AIGenerateOptions, AIProvider, type AIProviderProps, type AIProviderType, AppSettingsProvider, AuthProvider, BreadcrumbProvider, type CheckboxComponentProps, type CollapsedWidgetContainerProps, type CompanyMember, type ConfirmOptions, type ConfirmResult, ConfirmationProvider, type ConfirmationProviderProps, type CopyClipboardButtonComponentProps, type DialogSeverity, type DisplayState, type EmailInputComponentProps, type ExpandableNoteComponentProps, type FullCompanyMemberItem, Hooks, type Language, LocalizationProvider, type Membership, type MembershipRole, type MyAvatarComponentProps, type NumberInputComponentProps, type PageLink, type PageLinkWidgetProps, Providers, type RefreshButtonComponentProps, type SaveCompanyUserPayload, type SearchComponentProps, type SelectComponentProps, type SelectOption, Services, type SupabaseConfig, SupabaseProvider, type SupabaseProviderProps, type SwitchComponentProps, type TextFieldComponentProps, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, ToastProvider, type ToastType, type TranslatableTooltipComponentProps, TranslateProvider, TranslateText, TranslationEditProvider, type TypographyConfig, UI, type UrlComponentProps as UrlProps, type UserAvatarComponentProps, type UserGroupedSessions, type UserPopoverComponentProps, type UserProfile, type UserRoleChipComponentProps, type UserSessionItem, type UserSettings, UserSettingsProvider, type UserStatusChipComponentProps, type UserStatusType, Utils, defaultUserSettings, initI18n, useAI, useAppSettings, useAppTheme, useAuth, useBreadcrumb, useConfirmation, useLocalization, useSupabase, useToast, useTranslationEdit, useTranslationNamespace, useUserSettings };

package/dist/index.js

@@ -2619,7 +2619,7 @@ var init_UserPopoverComponent = __esm({
           }
         };
         loadStatus();
-        const channel = supabase.channel(`user_status_popover_${userId}`).on(
+        const channel2 = supabase.channel(`user_status_popover_${userId}`).on(
           "postgres_changes",
           {
             event: "*",
@@ -2633,7 +2633,7 @@ var init_UserPopoverComponent = __esm({
         ).subscribe();
         return () => {
           isMounted = false;
-          supabase.removeChannel(channel);
+          supabase.removeChannel(channel2);
         };
       }, [userId, open]);
       const isOnline = Boolean(
@@ -2966,6 +2966,7 @@ __export(index_exports, {
   TranslationEditProvider: () => TranslationEditProvider,
   UI: () => UI,
   UserSettingsProvider: () => UserSettingsProvider,
+  Utils: () => Utils,
   defaultUserSettings: () => defaultUserSettings,
   initI18n: () => initI18n,
   useAI: () => useAI,
@@ -3095,7 +3096,7 @@ var TextFieldComponent = ({
             ...slotProps?.input || {},
             readOnly: isReadOnly,
             endAdornment: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material4.InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: clearTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3105,7 +3106,7 @@ var TextFieldComponent = ({
                   children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Clear.default, { fontSize: "small" })
                 }
               ) }),
-              hasValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              hasValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -3155,7 +3156,7 @@ var TextFieldComponent = ({
                   )
                 }
               ) }),
-              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              isLocked && showLock && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslatableTooltipComponent, { title: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: lockTooltip }), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 import_material4.IconButton,
                 {
                   size: "small",
@@ -4787,6 +4788,148 @@ var CheckboxComponent = ({
   ) });
 };
 
+// src/UI/widgets/page/CollapsedWidgetContainer.tsx
+var import_icons_material4 = require("@mui/icons-material");
+var import_material24 = require("@mui/material");
+var import_react29 = require("react");
+init_context();
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ExpandMore = (0, import_material24.styled)((props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.IconButton, { size: "small", ...other, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_material4.ExpandMore, {}) });
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: expand ? theme.palette.primary.main : "transparent",
+  color: expand ? theme.palette.common.white : theme.palette.text.secondary,
+  border: `1px solid ${expand ? theme.palette.primary.main : theme.palette.divider}`,
+  "&:hover": {
+    backgroundColor: expand ? theme.palette.primary.dark : theme.palette.action.hover
+  }
+}));
+var CollapsedWidgetContainer = (props) => {
+  const { displayState } = useAppTheme();
+  const [expanded, setExpanded] = (0, import_react29.useState)(props.expanded === void 0 ? false : props.expanded);
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+    props.onExpanded && props.onExpanded(!expanded);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_material24.Card, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      import_material24.Box,
+      {
+        onClick: () => handleExpandClick(),
+        sx: {
+          cursor: "pointer",
+          "&:hover": { bgcolor: "rgba(0,0,0,0.02)" },
+          display: "flex",
+          alignItems: "center",
+          pr: 2
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            import_material24.CardHeader,
+            {
+              sx: { flexGrow: 1 },
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Avatar, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              label: typeof props.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Tooltip, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Box, { sx: { ml: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            ExpandMore,
+            {
+              expand: expanded,
+              onClick: handleExpandClick,
+              "aria-expanded": expanded
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_material24.Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.Divider, { variant: "middle" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_material24.CardContent, { children: props.children })
+    ] })
+  ] });
+};
+
+// src/UI/components/buttons/RefreshButtonComponent.tsx
+var import_react30 = require("react");
+var import_material25 = require("@mui/material");
+var import_Refresh = __toESM(require("@mui/icons-material/Refresh"));
+init_context();
+init_TranslatableTooltipComponent();
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var AnimatedRefreshIcon = (0, import_material25.styled)(import_Refresh.default, {
+  shouldForwardProp: (prop) => prop !== "isSpinning"
+})(({ isSpinning }) => ({
+  animation: isSpinning ? "spin 1s linear infinite" : "none",
+  "@keyframes spin": {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+}));
+var RefreshButtonComponent = ({
+  overrideNamespace,
+  size = "small",
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  loading: externalLoading,
+  tooltip,
+  mobileViewOnly,
+  disableMobileView,
+  hideTooltipOnMobile,
+  hideTooltipOnDesktop
+}) => {
+  const { displayState } = useAppTheme();
+  const [internalLoading, setInternalLoading] = (0, import_react30.useState)(false);
+  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
+  const handleClick = async (event) => {
+    if (!onClick || isLoading || disabled) return;
+    try {
+      setInternalLoading(true);
+      await onClick(event);
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+  const renderIcon = () => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_material25.Fab,
+      {
+        size,
+        color: "inherit",
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        "aria-label": "refresh",
+        children: renderIcon()
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, {}) : tooltip || /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_material25.Button,
+    {
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+    }
+  ) });
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -4800,7 +4943,8 @@ var UI = {
     Url: UrlComponent
   },
   Buttons: {
-    CopyClipboardButton: CopyClipboardButtonComponent
+    CopyClipboardButton: CopyClipboardButtonComponent,
+    RefreshButton: RefreshButtonComponent
   },
   DataDisplay: {
     TranslatableTooltip: TranslatableTooltipComponent,
@@ -4820,7 +4964,8 @@ var UI = {
       PublicLanguageSelector
     },
     Pages: {
-      PageLinkWidget
+      PageLinkWidget,
+      CollapsedWidgetContainer
     }
   }
 };
@@ -4848,16 +4993,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react29 = require("react");
+var import_react31 = 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_react29.useState)("offline");
-  const [lastSeen, setLastSeen] = (0, import_react29.useState)(initialLastSeenAt ?? null);
-  const lastSeenRef = (0, import_react29.useRef)(initialLastSeenAt ?? null);
+  const [status, setStatus] = (0, import_react31.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react31.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react31.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -4873,7 +5018,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -4896,9 +5041,9 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
       }
     };
     fetchLastSeen();
-    const channel = supabase.channel(`presence_user_${userId}`);
-    channel.on("presence", { event: "sync" }, () => {
-      const state = channel.presenceState();
+    const channel2 = supabase.channel(`presence_user_${userId}`);
+    channel2.on("presence", { event: "sync" }, () => {
+      const state = channel2.presenceState();
       const isOnline = Object.keys(state).length > 0;
       if (isMounted) {
         setStatus(isOnline ? "online" : calculateStatus(false, lastSeenRef.current));
@@ -4928,7 +5073,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     ).subscribe();
     return () => {
       isMounted = false;
-      supabase.removeChannel(channel);
+      supabase.removeChannel(channel2);
     };
   }, [userId, initialLastSeenAt, currentAuthUserId]);
   return {
@@ -4943,6 +5088,35 @@ var Hooks = {
   useDebounce,
   useUserStatus: useUserStatus2
 };
+
+// src/utils/index.ts
+init_deviceId();
+
+// src/utils/session.events.ts
+var channel = typeof window !== "undefined" ? new BroadcastChannel("session_activity") : null;
+var notifySessionChange = () => {
+  channel?.postMessage("SESSION_UPDATED");
+};
+var subscribeToSessionChanges = (callback) => {
+  if (!channel) return () => {
+  };
+  const handleMessage = (event) => {
+    if (event.data === "SESSION_UPDATED") {
+      callback();
+    }
+  };
+  channel.addEventListener("message", handleMessage);
+  return () => channel.removeEventListener("message", handleMessage);
+};
+
+// src/utils/index.ts
+var Utils = {
+  getDeviceId,
+  Sessions: {
+    notifySessionChange,
+    subscribeToSessionChanges
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIProvider,
@@ -4962,6 +5136,7 @@ var Hooks = {
   TranslationEditProvider,
   UI,
   UserSettingsProvider,
+  Utils,
   defaultUserSettings,
   initI18n,
   useAI,

package/dist/index.mjs

@@ -156,7 +156,7 @@ var TextFieldComponent = ({
             ...slotProps?.input || {},
             readOnly: isReadOnly,
             endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", sx: { gap: 0.5 }, children: [
-              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace, children: clearTooltip }), children: /* @__PURE__ */ jsx(
+              hasValue && !isLocked && !disableClearButton && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: clearTooltip }), children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "small",
@@ -166,7 +166,7 @@ var TextFieldComponent = ({
                   children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
                 }
               ) }),
-              hasValue && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace, children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ jsx(
+              hasValue && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: copied ? copiedTooltip : copyTooltip }), children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "small",
@@ -216,7 +216,7 @@ var TextFieldComponent = ({
                   )
                 }
               ) }),
-              isLocked && showLock && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace, children: lockTooltip }), children: /* @__PURE__ */ jsx(
+              isLocked && showLock && /* @__PURE__ */ jsx(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: lockTooltip }), children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "small",
@@ -1873,6 +1873,149 @@ var CheckboxComponent = ({
   ) });
 };
 
+// src/UI/widgets/page/CollapsedWidgetContainer.tsx
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import { Avatar as Avatar3, Box as Box8, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider2, IconButton as IconButton7, styled, Tooltip as Tooltip7 } from "@mui/material";
+import { useState as useState11 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ jsx14(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx14(ExpandMoreIcon, {}) });
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: expand ? theme.palette.primary.main : "transparent",
+  color: expand ? theme.palette.common.white : theme.palette.text.secondary,
+  border: `1px solid ${expand ? theme.palette.primary.main : theme.palette.divider}`,
+  "&:hover": {
+    backgroundColor: expand ? theme.palette.primary.dark : theme.palette.action.hover
+  }
+}));
+var CollapsedWidgetContainer = (props) => {
+  const { displayState } = useAppTheme();
+  const [expanded, setExpanded] = useState11(props.expanded === void 0 ? false : props.expanded);
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+    props.onExpanded && props.onExpanded(!expanded);
+  };
+  return /* @__PURE__ */ jsxs11(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
+    /* @__PURE__ */ jsxs11(
+      Box8,
+      {
+        onClick: () => handleExpandClick(),
+        sx: {
+          cursor: "pointer",
+          "&:hover": { bgcolor: "rgba(0,0,0,0.02)" },
+          display: "flex",
+          alignItems: "center",
+          pr: 2
+        },
+        children: [
+          /* @__PURE__ */ jsx14(
+            CardHeader2,
+            {
+              sx: { flexGrow: 1 },
+              avatar: /* @__PURE__ */ jsx14(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              label: typeof props.title === "string" ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+            }
+          ),
+          /* @__PURE__ */ jsx14(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx14(Box8, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx14(
+            ExpandMore,
+            {
+              expand: expanded,
+              onClick: handleExpandClick,
+              "aria-expanded": expanded
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs11(Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ jsx14(Divider2, { variant: "middle" }),
+      /* @__PURE__ */ jsx14(CardContent2, { children: props.children })
+    ] })
+  ] });
+};
+
+// src/UI/components/buttons/RefreshButtonComponent.tsx
+import { useState as useState12 } from "react";
+import {
+  Button as Button3,
+  Fab,
+  styled as styled2
+} from "@mui/material";
+import RefreshIconMui from "@mui/icons-material/Refresh";
+import { Fragment as Fragment9, jsx as jsx15 } from "react/jsx-runtime";
+var AnimatedRefreshIcon = styled2(RefreshIconMui, {
+  shouldForwardProp: (prop) => prop !== "isSpinning"
+})(({ isSpinning }) => ({
+  animation: isSpinning ? "spin 1s linear infinite" : "none",
+  "@keyframes spin": {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+}));
+var RefreshButtonComponent = ({
+  overrideNamespace,
+  size = "small",
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  loading: externalLoading,
+  tooltip,
+  mobileViewOnly,
+  disableMobileView,
+  hideTooltipOnMobile,
+  hideTooltipOnDesktop
+}) => {
+  const { displayState } = useAppTheme();
+  const [internalLoading, setInternalLoading] = useState12(false);
+  const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
+  const handleClick = async (event) => {
+    if (!onClick || isLoading || disabled) return;
+    try {
+      setInternalLoading(true);
+      await onClick(event);
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+  const renderIcon = () => /* @__PURE__ */ jsx15(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
+    return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15("span", { children: /* @__PURE__ */ jsx15(
+      Fab,
+      {
+        size,
+        color: "inherit",
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        "aria-label": "refresh",
+        children: renderIcon()
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx15(Fragment9, {}) : tooltip || /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
+    Button3,
+    {
+      variant: "contained",
+      color: "inherit",
+      size,
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      fullWidth,
+      startIcon: renderIcon(),
+      children: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+    }
+  ) });
+};
+
 // src/UI/index.ts
 var UI = {
   Inputs: {
@@ -1886,7 +2029,8 @@ var UI = {
     Url: UrlComponent
   },
   Buttons: {
-    CopyClipboardButton: CopyClipboardButtonComponent
+    CopyClipboardButton: CopyClipboardButtonComponent,
+    RefreshButton: RefreshButtonComponent
   },
   DataDisplay: {
     TranslatableTooltip: TranslatableTooltipComponent,
@@ -1906,7 +2050,8 @@ var UI = {
       PublicLanguageSelector
     },
     Pages: {
-      PageLinkWidget
+      PageLinkWidget,
+      CollapsedWidgetContainer
     }
   }
 };
@@ -1926,13 +2071,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect6, useRef, useState as useState11 } from "react";
+import { useEffect as useEffect6, useRef, useState as useState13 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState11("offline");
-  const [lastSeen, setLastSeen] = useState11(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState13("offline");
+  const [lastSeen, setLastSeen] = useState13(initialLastSeenAt ?? null);
   const lastSeenRef = useRef(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
@@ -1972,9 +2117,9 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
       }
     };
     fetchLastSeen();
-    const channel = supabase.channel(`presence_user_${userId}`);
-    channel.on("presence", { event: "sync" }, () => {
-      const state = channel.presenceState();
+    const channel2 = supabase.channel(`presence_user_${userId}`);
+    channel2.on("presence", { event: "sync" }, () => {
+      const state = channel2.presenceState();
       const isOnline = Object.keys(state).length > 0;
       if (isMounted) {
         setStatus(isOnline ? "online" : calculateStatus(false, lastSeenRef.current));
@@ -2004,7 +2149,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     ).subscribe();
     return () => {
       isMounted = false;
-      supabase.removeChannel(channel);
+      supabase.removeChannel(channel2);
     };
   }, [userId, initialLastSeenAt, currentAuthUserId]);
   return {
@@ -2019,6 +2164,32 @@ var Hooks = {
   useDebounce,
   useUserStatus
 };
+
+// src/utils/session.events.ts
+var channel = typeof window !== "undefined" ? new BroadcastChannel("session_activity") : null;
+var notifySessionChange = () => {
+  channel?.postMessage("SESSION_UPDATED");
+};
+var subscribeToSessionChanges = (callback) => {
+  if (!channel) return () => {
+  };
+  const handleMessage = (event) => {
+    if (event.data === "SESSION_UPDATED") {
+      callback();
+    }
+  };
+  channel.addEventListener("message", handleMessage);
+  return () => channel.removeEventListener("message", handleMessage);
+};
+
+// src/utils/index.ts
+var Utils = {
+  getDeviceId,
+  Sessions: {
+    notifySessionChange,
+    subscribeToSessionChanges
+  }
+};
 export {
   AIProvider,
   AppSettingsProvider,
@@ -2037,6 +2208,7 @@ export {
   TranslationEditProvider,
   UI,
   UserSettingsProvider,
+  Utils,
   defaultUserSettings,
   initI18n,
   useAI,

package/package.json

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