@serhii.olishevskyi/docs 1.2.15 → 1.2.16

package/dist/index.d.mts

@@ -373,6 +373,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>;
@@ -403,6 +414,7 @@ declare const UI: {
         };
         Pages: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
+            CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
         };
     };
 };
@@ -749,4 +761,8 @@ 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;
+};
+
+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 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

@@ -373,6 +373,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>;
@@ -403,6 +414,7 @@ declare const UI: {
         };
         Pages: {
             PageLinkWidget: React$1.FC<PageLinkWidgetProps>;
+            CollapsedWidgetContainer: (props: React$1.PropsWithChildren<CollapsedWidgetContainerProps>) => React$1.JSX.Element;
         };
     };
 };
@@ -749,4 +761,8 @@ 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;
+};
+
+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 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

@@ -2966,6 +2966,7 @@ __export(index_exports, {
   TranslationEditProvider: () => TranslationEditProvider,
   UI: () => UI,
   UserSettingsProvider: () => UserSettingsProvider,
+  Utils: () => Utils,
   defaultUserSettings: () => defaultUserSettings,
   initI18n: () => initI18n,
   useAI: () => useAI,
@@ -4787,6 +4788,74 @@ 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)(import_material24.Typography, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__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/index.ts
 var UI = {
   Inputs: {
@@ -4820,7 +4889,8 @@ var UI = {
       PublicLanguageSelector
     },
     Pages: {
-      PageLinkWidget
+      PageLinkWidget,
+      CollapsedWidgetContainer
     }
   }
 };
@@ -4848,16 +4918,16 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-var import_react29 = require("react");
+var import_react30 = 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_react30.useState)("offline");
+  const [lastSeen, setLastSeen] = (0, import_react30.useState)(initialLastSeenAt ?? null);
+  const lastSeenRef = (0, import_react30.useRef)(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -4873,7 +4943,7 @@ var useUserStatus2 = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -4943,6 +5013,12 @@ var Hooks = {
   useDebounce,
   useUserStatus: useUserStatus2
 };
+
+// src/utils/index.ts
+init_deviceId();
+var Utils = {
+  getDeviceId
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIProvider,
@@ -4962,6 +5038,7 @@ var Hooks = {
   TranslationEditProvider,
   UI,
   UserSettingsProvider,
+  Utils,
   defaultUserSettings,
   initI18n,
   useAI,

package/dist/index.mjs

@@ -1873,6 +1873,73 @@ 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, Typography as Typography7 } 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(Typography7, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__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/index.ts
 var UI = {
   Inputs: {
@@ -1906,7 +1973,8 @@ var UI = {
       PublicLanguageSelector
     },
     Pages: {
-      PageLinkWidget
+      PageLinkWidget,
+      CollapsedWidgetContainer
     }
   }
 };
@@ -1926,13 +1994,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect6, useRef, useState as useState11 } from "react";
+import { useEffect as useEffect6, useRef, useState as useState12 } 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] = useState12("offline");
+  const [lastSeen, setLastSeen] = useState12(initialLastSeenAt ?? null);
   const lastSeenRef = useRef(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
@@ -2019,6 +2087,11 @@ var Hooks = {
   useDebounce,
   useUserStatus
 };
+
+// src/utils/index.ts
+var Utils = {
+  getDeviceId
+};
 export {
   AIProvider,
   AppSettingsProvider,
@@ -2037,6 +2110,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.16",
   "description": "DOCS.UA react packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",