@blocklet/discuss-kit-ux 1.6.153 → 1.6.156

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,16 @@
+interface ButtonItem {
+    id: string;
+    title: string;
+    icon: string;
+}
+interface Props {
+    data: ButtonItem[];
+    theme: string;
+    selected: string[];
+    urlName: string;
+    defaultButton: ButtonItem;
+    onSelectTab: (selectTab: string[]) => void;
+    type: string;
+}
+export default function ButtonGroup({ data, theme, selected, urlName, defaultButton, onSelectTab, type, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button-group/index.d.ts

@@ -0,0 +1 @@
+export { default as ButtonGroup } from './button-group';

package/dist/components/chat/context.d.ts

@@ -28,6 +28,7 @@ interface ChatContextValue extends ChatState {
     hasUnreadMessages: (chat: ChatType) => boolean;
     deleteMessage: (chatId: string, messageId: string) => Promise<void>;
     refresh: () => Promise<void>;
+    orderedChats: ChatType[];
 }
 export declare const useChatContext: () => ChatContextValue;
 export declare function ChatProvider({ client, activeChatId, children }: ChatProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/{editor-8KrQFW0-.mjs → editor-DQIO9RKL.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-0NOeD-2C.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-bzFgbBTK.mjs";
 import "@blocklet/labels";
 import "@mui/material/styles";
 import "@mui/material/Box";
@@ -58,6 +58,7 @@ import "dayjs/plugin/relativeTime";
 import "mitt";
 import "@mui/material/CircularProgress";
 import "react-helmet";
+import "react-flip-toolkit";
 import "@mui/material/Fab";
 import "lodash/debounce";
 import "@mui/material/TextField";
@@ -67,6 +68,7 @@ import "@mui/material/Pagination";
 import "unstated-next";
 import "js-cookie";
 import "@arcblock/ws";
+import "@emotion/css";
 const BlockletEditor = lazy(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-0NOeD-2C.mjs → index-bzFgbBTK.mjs}

@@ -21,7 +21,7 @@ import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
 import { useSize, useInViewport, useSetState, useGetState, useReactive } from "ahooks";
 import LoadingButton from "@mui/lab/LoadingButton";
-import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, AddReactionOutlined, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add } from "@mui/icons-material";
+import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, AddReactionOutlined, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
 import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Alert from "@mui/material/Alert";
 import isBoolean from "lodash/isBoolean";
@@ -61,6 +61,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import mitt from "mitt";
 import CircularProgress from "@mui/material/CircularProgress";
 import { Helmet } from "react-helmet";
+import { Flipper, Flipped } from "react-flip-toolkit";
 import Fab from "@mui/material/Fab";
 import debounce from "lodash/debounce";
 import TextField from "@mui/material/TextField";
@@ -70,6 +71,7 @@ import MuiPagination from "@mui/material/Pagination";
 import { createContainer } from "unstated-next";
 import Cookie from "js-cookie";
 import { WsClient } from "@arcblock/ws";
+import { css } from "@emotion/css";
 const themeOverrides = {
   components: {
     MuiButton: {
@@ -3368,6 +3370,9 @@ function ChatProvider({ client: client2, activeChatId, children }) {
   const navigate = useNavigate();
   const { session } = useSessionContext();
   const currentUser = session == null ? void 0 : session.user;
+  const orderedChats = useMemo(() => {
+    return orderBy(state.chats, (x) => x.lastMessageAt || "", "desc");
+  }, [state.chats]);
   const hasUnreadMessages = ({ lastMessageAt, lastAckTime }) => {
     if (lastMessageAt && (!lastAckTime || lastMessageAt > lastAckTime)) {
       return true;
@@ -3575,13 +3580,14 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       deleteChannel,
       deleteMessage,
       hasUnreadMessages,
-      refresh
+      refresh,
+      orderedChats
     };
   }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
 }
 function ChatList(props) {
-  const { chats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
+  const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
   const renderItem = (chat) => {
     if (chat.type === "notification") {
       return /* @__PURE__ */ jsx(SystemUser, { name: "Notification" });
@@ -3598,10 +3604,10 @@ function ChatList(props) {
     }
     return null;
   };
-  return /* @__PURE__ */ jsx(Box, { ...props, children: chats.map((chat) => {
+  return /* @__PURE__ */ jsx(Box, { ...props, children: /* @__PURE__ */ jsx(Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
     const isActiveChat = activeChatId === chat.id;
     const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxs(
       Box,
       {
         sx: {
@@ -3633,10 +3639,9 @@ function ChatList(props) {
             }
           )
         ]
-      },
-      chat.id
-    );
-  }) });
+      }
+    ) }, chat.id);
+  }) }) });
 }
 function Message({ message, showTime = true, ...rest }) {
   var _a2;
@@ -4558,7 +4563,7 @@ function Pagination({ page, size = 20, total, onChange, routerMode = true, ...re
     }
   );
 }
-const Editor = lazy(() => import("./editor-8KrQFW0-.mjs"));
+const Editor = lazy(() => import("./editor-DQIO9RKL.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -10417,6 +10422,161 @@ function PointUpProvider({ children }) {
     children
   ] });
 }
+function ButtonGroup({
+  data,
+  theme = "dark",
+  selected,
+  urlName,
+  defaultButton,
+  onSelectTab,
+  type,
+  ...rest
+}) {
+  const downSm = useMediaQuery$1((mainTheme) => mainTheme.breakpoints.down("sm"));
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedString = searchParams.get(urlName);
+  const dataWithDefault = defaultButton ? [defaultButton, ...data] : data;
+  const selectedArray = selectedString !== null && selectedString !== "" ? selectedString.split(",") : dataWithDefault.map((item) => item.id);
+  const [selectTab, setSelectTab] = useState(selectedArray);
+  const [selectAll, setSelectAll] = useState(false);
+  const updateUrl = (url, newSelectTab) => {
+    setSearchParams({
+      ...searchParams,
+      [url]: newSelectTab.join(",")
+    });
+  };
+  const handleClick = (item) => {
+    setSelectTab([item.id]);
+    updateUrl(urlName, [item.id]);
+  };
+  const handleSelectAll = () => {
+    setSelectAll((prevSelectAll) => {
+      const newSelectAll = !prevSelectAll;
+      const newSelectTab = newSelectAll ? dataWithDefault == null ? void 0 : dataWithDefault.map((item) => item.id) : [];
+      setSelectTab(newSelectTab);
+      updateUrl(urlName, newSelectTab);
+      return newSelectAll;
+    });
+  };
+  useEffect(() => {
+    if (JSON.stringify(selectedArray) !== JSON.stringify(selectTab)) {
+      setSelectTab((selectedArray == null ? void 0 : selectedArray.length) > 0 ? selectedArray : []);
+    }
+  }, [data]);
+  useEffect(() => {
+    if (selectedString === null || selectedString === "") {
+      setSelectAll(true);
+    } else if ((selectTab == null ? void 0 : selectTab.length) === (dataWithDefault == null ? void 0 : dataWithDefault.length)) {
+      setSelectAll(true);
+    } else {
+      setSelectAll(false);
+    }
+    if (onSelectTab)
+      onSelectTab(selectTab);
+  }, [selectTab, selectedArray]);
+  return /* @__PURE__ */ jsxs(Box$1, { className: Group, children: [
+    /* @__PURE__ */ jsxs(
+      Box$1,
+      {
+        sx: {
+          bgcolor: theme === "dark" ? "#F9FAFB" : "",
+          width: "fit-content",
+          maxWidth: "calc(100% - 16px)",
+          borderRadius: "99999px",
+          borderTopRightRadius: downSm ? 0 : "99999px",
+          borderBottomRightRadius: downSm ? 0 : "99999px",
+          overflow: "scroll",
+          whiteSpace: "nowrap"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              onClick: handleSelectAll,
+              sx: {
+                backgroundColor: selectAll ? "#ffffff" : "",
+                color: selectAll ? "#030712" : "#4b5563",
+                border: selectAll ? "1px solid #e5e7eb!important" : "1px solid transparent"
+              },
+              ...rest,
+              children: "All"
+            }
+          ),
+          dataWithDefault == null ? void 0 : dataWithDefault.map((item, index) => {
+            const isActive = !selectAll && (selectTab == null ? void 0 : selectTab.includes(item.id));
+            return /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                onClick: () => handleClick(item),
+                sx: {
+                  ...isActive && {
+                    backgroundColor: "#ffffff",
+                    color: "#030712",
+                    border: "1px solid #e5e7eb!important"
+                  }
+                },
+                ...rest,
+                children: /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center" }, children: [
+                  item == null ? void 0 : item.icon,
+                  " ",
+                  item == null ? void 0 : item.title
+                ] })
+              },
+              index
+            );
+          })
+        ]
+      }
+    ),
+    urlName !== "type" && /* @__PURE__ */ jsx(AccessControl, { roles: ["admin", "owner"], children: /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        component: Link,
+        color: "inherit",
+        size: "small",
+        to: `/discussions/boards?type=${type}`,
+        sx: { color: "grey.500" },
+        children: /* @__PURE__ */ jsx(BorderColorOutlined, { sx: { fontSize: 16 } })
+      }
+    ) })
+  ] });
+}
+const Group = css`
+  display: flex;
+  flex-direction: row;
+  .MuiButtonBase-root {
+    border-radius: 9999px;
+    color: #4b5563;
+    margin: 5px 8px 5px 5px;
+    padding: 5px 12px;
+    line-height: 22px;
+    font-size: 13px;
+    border: 1px solid transparent;
+  }
+
+  .MuiButtonBase-root:last-of-type {
+    margin-right: 0;
+  }
+
+  .MuiButtonBase-root:first-of-type {
+    margin-left: 0;
+  }
+
+  .MuiButtonBase-root:hover {
+    background-color: #ffffff;
+    color: #030712;
+    border: 1px solid #e5e7eb;
+  }
+
+  * {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+
+  *::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+`;
 export {
   UnreadNotificationProvider as $,
   Avatar as A,
@@ -10467,9 +10627,10 @@ export {
   composeImageUrl as ah,
   usePointUpContext as ai,
   PointUpProvider as aj,
-  create as ak,
-  getWsClient as al,
-  useSubscription as am,
+  ButtonGroup as ak,
+  create as al,
+  getWsClient as am,
+  useSubscription as an,
   InternalThemeProvider as b,
   Input as c,
   translations as d,

package/dist/index.d.ts

@@ -24,5 +24,6 @@ export * as routes from './components/routes';
 export { default as preferences } from './preferences';
 export * from './components/uploader';
 export * from './components/point-up';
+export * from './components/button-group';
 export * from './ws';
 export { default as RelativeTime } from './components/shared/relative-time';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { N, j, Q, A, h, a8, B, y, F, z, H, U, T, W, Y, o, C, q, v, x, a0, a1, ac, a3, K, L, D, ab, aa, E, G, c, b, a9, M, P, aj, n, m, a7, R, S, a4, k, Z, $, ad, ag, af, ah, ak, J, al, l, p, r, t, d, a5, O, e, X, w, a2, a6, u, ai, am, _, ae, f } from "./index-0NOeD-2C.mjs";
+import { N, j, Q, A, h, a8, B, y, F, z, H, ak, U, T, W, Y, o, C, q, v, x, a0, a1, ac, a3, K, L, D, ab, aa, E, G, c, b, a9, M, P, aj, n, m, a7, R, S, a4, k, Z, $, ad, ag, af, ah, al, J, am, l, p, r, t, d, a5, O, e, X, w, a2, a6, u, ai, an, _, ae, f } from "./index-bzFgbBTK.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";
@@ -55,6 +55,7 @@ import "dayjs/plugin/relativeTime";
 import "mitt";
 import "@mui/material/CircularProgress";
 import "react-helmet";
+import "react-flip-toolkit";
 import "@mui/material/Fab";
 import "lodash/debounce";
 import "@mui/material/TextField";
@@ -64,6 +65,7 @@ import "@mui/material/Pagination";
 import "unstated-next";
 import "js-cookie";
 import "@arcblock/ws";
+import "@emotion/css";
 export {
   N as AccessControl,
   j as AuthorInfo,
@@ -76,6 +78,7 @@ export {
   F as BlogCard,
   z as BlogList,
   H as BlogPermaLink,
+  ak as ButtonGroup,
   U as Chat,
   T as ChatClient,
   W as ChatHeaderAddon,
@@ -115,9 +118,9 @@ export {
   ag as UploaderProvider,
   af as UploaderTrigger,
   ah as composeImageUrl,
-  ak as create,
+  al as create,
   J as getBlogLink,
-  al as getWsClient,
+  am as getWsClient,
   l as lexicalUtils,
   p as preferences,
   r as routes,
@@ -132,7 +135,7 @@ export {
   a6 as useDefaultApiErrorHandler,
   u as useNow,
   ai as usePointUpContext,
-  am as useSubscription,
+  an as useSubscription,
   _ as useUnreadNotification,
   ae as useUploader,
   f as utils

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("react"), require("@mui/material/Box"), require("@arcblock/ux/lib/Theme"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@mui/material/colors"), require("@arcblock/did-connect/lib/Session"), require("@mui/material"), require("@arcblock/did-connect/lib/Address"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("url-join"), require("react-dom"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("@mui/material/Fab"), require("lodash/debounce"), require("@mui/material/TextField"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "react", "@mui/material/Box", "@arcblock/ux/lib/Theme", "lodash/isNil", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@mui/material/colors", "@arcblock/did-connect/lib/Session", "@mui/material", "@arcblock/did-connect/lib/Address", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "url-join", "react-dom", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "@mui/material/Fab", "lodash/debounce", "@mui/material/TextField", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.react, global.Box, global.Theme, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$1, global.colors, global.Session, global.material, global.DIDAddress, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.joinUrl, global.reactDom, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.Fab, global.debounce, global.TextField, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.OnContentChangePlugin, global.ShortcutPlugin, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
-})(this, function(exports2, labels, jsxRuntime, styles, react, Box, Theme, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$1, colors, Session, material, DIDAddress, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, reactDom, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, Fab, debounce, TextField, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, OnContentChangePlugin, ShortcutPlugin, SafeAreaPlugin, text, ImageNode, VideoNode) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("react"), require("@mui/material/Box"), require("@arcblock/ux/lib/Theme"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@mui/material/colors"), require("@arcblock/did-connect/lib/Session"), require("@mui/material"), require("@arcblock/did-connect/lib/Address"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("url-join"), require("react-dom"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/Fab"), require("lodash/debounce"), require("@mui/material/TextField"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "react", "@mui/material/Box", "@arcblock/ux/lib/Theme", "lodash/isNil", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@mui/material/colors", "@arcblock/did-connect/lib/Session", "@mui/material", "@arcblock/did-connect/lib/Address", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "url-join", "react-dom", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/Fab", "lodash/debounce", "@mui/material/TextField", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.react, global.Box, global.Theme, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$1, global.colors, global.Session, global.material, global.DIDAddress, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.joinUrl, global.reactDom, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.Fab, global.debounce, global.TextField, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
+})(this, function(exports2, labels, jsxRuntime, styles, react, Box, Theme, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$1, colors, Session, material, DIDAddress, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, reactDom, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, Fab, debounce, TextField, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin, SafeAreaPlugin, text, ImageNode, VideoNode) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -3307,6 +3307,9 @@ var __publicField = (obj, key, value) => {
     const navigate = reactRouterDom.useNavigate();
     const { session } = useSessionContext();
     const currentUser = session == null ? void 0 : session.user;
+    const orderedChats = react.useMemo(() => {
+      return orderBy(state.chats, (x) => x.lastMessageAt || "", "desc");
+    }, [state.chats]);
     const hasUnreadMessages = ({ lastMessageAt, lastAckTime }) => {
       if (lastMessageAt && (!lastAckTime || lastMessageAt > lastAckTime)) {
         return true;
@@ -3514,13 +3517,14 @@ var __publicField = (obj, key, value) => {
         deleteChannel,
         deleteMessage,
         hasUnreadMessages,
-        refresh
+        refresh,
+        orderedChats
       };
     }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value, children });
   }
   function ChatList(props) {
-    const { chats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
+    const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
     const renderItem = (chat) => {
       if (chat.type === "notification") {
         return /* @__PURE__ */ jsxRuntime.jsx(SystemUser, { name: "Notification" });
@@ -3537,10 +3541,10 @@ var __publicField = (obj, key, value) => {
       }
       return null;
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props, children: chats.map((chat) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
       const isActiveChat = activeChatId === chat.id;
       const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
         {
           sx: {
@@ -3572,10 +3576,9 @@ var __publicField = (obj, key, value) => {
               }
             )
           ]
-        },
-        chat.id
-      );
-    }) });
+        }
+      ) }, chat.id);
+    }) }) });
   }
   function Message({ message, showTime = true, ...rest }) {
     var _a2;
@@ -10356,6 +10359,161 @@ var __publicField = (obj, key, value) => {
       children
     ] });
   }
+  function ButtonGroup({
+    data,
+    theme = "dark",
+    selected,
+    urlName,
+    defaultButton,
+    onSelectTab,
+    type,
+    ...rest
+  }) {
+    const downSm = useMediaQuery((mainTheme) => mainTheme.breakpoints.down("sm"));
+    const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+    const selectedString = searchParams.get(urlName);
+    const dataWithDefault = defaultButton ? [defaultButton, ...data] : data;
+    const selectedArray = selectedString !== null && selectedString !== "" ? selectedString.split(",") : dataWithDefault.map((item) => item.id);
+    const [selectTab, setSelectTab] = react.useState(selectedArray);
+    const [selectAll, setSelectAll] = react.useState(false);
+    const updateUrl = (url, newSelectTab) => {
+      setSearchParams({
+        ...searchParams,
+        [url]: newSelectTab.join(",")
+      });
+    };
+    const handleClick = (item) => {
+      setSelectTab([item.id]);
+      updateUrl(urlName, [item.id]);
+    };
+    const handleSelectAll = () => {
+      setSelectAll((prevSelectAll) => {
+        const newSelectAll = !prevSelectAll;
+        const newSelectTab = newSelectAll ? dataWithDefault == null ? void 0 : dataWithDefault.map((item) => item.id) : [];
+        setSelectTab(newSelectTab);
+        updateUrl(urlName, newSelectTab);
+        return newSelectAll;
+      });
+    };
+    react.useEffect(() => {
+      if (JSON.stringify(selectedArray) !== JSON.stringify(selectTab)) {
+        setSelectTab((selectedArray == null ? void 0 : selectedArray.length) > 0 ? selectedArray : []);
+      }
+    }, [data]);
+    react.useEffect(() => {
+      if (selectedString === null || selectedString === "") {
+        setSelectAll(true);
+      } else if ((selectTab == null ? void 0 : selectTab.length) === (dataWithDefault == null ? void 0 : dataWithDefault.length)) {
+        setSelectAll(true);
+      } else {
+        setSelectAll(false);
+      }
+      if (onSelectTab)
+        onSelectTab(selectTab);
+    }, [selectTab, selectedArray]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: Group, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          sx: {
+            bgcolor: theme === "dark" ? "#F9FAFB" : "",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            borderRadius: "99999px",
+            borderTopRightRadius: downSm ? 0 : "99999px",
+            borderBottomRightRadius: downSm ? 0 : "99999px",
+            overflow: "scroll",
+            whiteSpace: "nowrap"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Button,
+              {
+                onClick: handleSelectAll,
+                sx: {
+                  backgroundColor: selectAll ? "#ffffff" : "",
+                  color: selectAll ? "#030712" : "#4b5563",
+                  border: selectAll ? "1px solid #e5e7eb!important" : "1px solid transparent"
+                },
+                ...rest,
+                children: "All"
+              }
+            ),
+            dataWithDefault == null ? void 0 : dataWithDefault.map((item, index) => {
+              const isActive = !selectAll && (selectTab == null ? void 0 : selectTab.includes(item.id));
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                material.Button,
+                {
+                  onClick: () => handleClick(item),
+                  sx: {
+                    ...isActive && {
+                      backgroundColor: "#ffffff",
+                      color: "#030712",
+                      border: "1px solid #e5e7eb!important"
+                    }
+                  },
+                  ...rest,
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    item == null ? void 0 : item.icon,
+                    " ",
+                    item == null ? void 0 : item.title
+                  ] })
+                },
+                index
+              );
+            })
+          ]
+        }
+      ),
+      urlName !== "type" && /* @__PURE__ */ jsxRuntime.jsx(AccessControl, { roles: ["admin", "owner"], children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton$1,
+        {
+          component: reactRouterDom.Link,
+          color: "inherit",
+          size: "small",
+          to: `/discussions/boards?type=${type}`,
+          sx: { color: "grey.500" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.BorderColorOutlined, { sx: { fontSize: 16 } })
+        }
+      ) })
+    ] });
+  }
+  const Group = css.css`
+  display: flex;
+  flex-direction: row;
+  .MuiButtonBase-root {
+    border-radius: 9999px;
+    color: #4b5563;
+    margin: 5px 8px 5px 5px;
+    padding: 5px 12px;
+    line-height: 22px;
+    font-size: 13px;
+    border: 1px solid transparent;
+  }
+
+  .MuiButtonBase-root:last-of-type {
+    margin-right: 0;
+  }
+
+  .MuiButtonBase-root:first-of-type {
+    margin-left: 0;
+  }
+
+  .MuiButtonBase-root:hover {
+    background-color: #ffffff;
+    color: #030712;
+    border: 1px solid #e5e7eb;
+  }
+
+  * {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+
+  *::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+`;
   const BlockletEditor = react.lazy(() => import("@blocklet/editor"));
   const Root = material.styled(material.Box)`
   .be-editable,
@@ -10398,6 +10556,7 @@ var __publicField = (obj, key, value) => {
   exports2.BlogCard = BlogCard;
   exports2.BlogList = BlogListWrapper;
   exports2.BlogPermaLink = BlogPermaLink;
+  exports2.ButtonGroup = ButtonGroup;
   exports2.Chat = Chat;
   exports2.ChatClient = ChatClient;
   exports2.ChatHeaderAddon = ChatHeaderAddon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.6.153",
+  "version": "1.6.156",
   "files": [
     "dist"
   ],
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@arcblock/ws": "^1.18.110",
-    "@blocklet/editor": "1.6.153",
-    "@blocklet/labels": "1.6.153",
+    "@blocklet/editor": "1.6.156",
+    "@blocklet/labels": "1.6.156",
     "@blocklet/uploader": "^0.0.73",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -83,6 +83,7 @@
     "babel-loader": "^8.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-flip-toolkit": "^7.1.0",
     "rollup-plugin-node-externals": "^5.1.3",
     "typescript": "^4.6.4",
     "unplugin-icons": "^0.14.14",
@@ -93,5 +94,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "1a99cad8310dc12901e2382e66bda73b444988e7"
+  "gitHead": "ed66f9bd22b4c0ea39be70562b2dd1b94fa63676"
 }