@lobehub/ui 4.11.2 → 4.11.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Accordion/Accordion.d.mts +2 -2
- package/es/Accordion/AccordionItem.d.mts +2 -2
- package/es/ActionIcon/ActionIcon.d.mts +2 -2
- package/es/Alert/Alert.d.mts +2 -2
- package/es/AutoComplete/Select.d.mts +2 -2
- package/es/Avatar/AvatarGroup/index.d.mts +2 -2
- package/es/Burger/Burger.d.mts +2 -2
- package/es/CodeEditor/CodeEditor.d.mts +2 -2
- package/es/Collapse/Collapse.d.mts +2 -2
- package/es/ConfigProvider/index.d.mts +2 -2
- package/es/ContextMenu/ContextMenuHost.mjs +7 -12
- package/es/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/CopyButton/CopyButton.d.mts +2 -2
- package/es/DatePicker/DatePicker.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelBody.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelContainer.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelFooter.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.d.mts +2 -2
- package/es/DraggableSideNav/DraggableSideNav.d.mts +2 -2
- package/es/Drawer/Drawer.d.mts +2 -2
- package/es/Dropdown/Dropdown.d.mts +2 -2
- package/es/DropdownMenu/DropdownMenu.d.mts +2 -2
- package/es/DropdownMenu/DropdownMenu.mjs +3 -12
- package/es/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/EditableText/EditableText.d.mts +2 -2
- package/es/EmojiPicker/EmojiPicker.d.mts +2 -2
- package/es/EmojiPicker/EmojiPicker.mjs +67 -66
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/EmojiPicker/style.mjs +1 -5
- package/es/EmojiPicker/style.mjs.map +1 -1
- package/es/EmojiPicker/type.d.mts +7 -4
- package/es/Flex/FlexBasic.d.mts +2 -2
- package/es/FontLoader/index.d.mts +2 -2
- package/es/Footer/Footer.d.mts +2 -2
- package/es/Form/components/FormGroup.d.mts +2 -2
- package/es/Form/components/FormItem.d.mts +2 -2
- package/es/Form/components/FormSubmitFooter.d.mts +2 -2
- package/es/FormModal/FormModal.d.mts +2 -2
- package/es/GuideCard/GuideCard.d.mts +2 -2
- package/es/Header/Header.d.mts +2 -2
- package/es/Highlighter/Highlighter.d.mts +2 -2
- package/es/Highlighter/SyntaxHighlighter/index.d.mts +2 -2
- package/es/Hotkey/Hotkey.d.mts +2 -2
- package/es/HotkeyInput/HotkeyInput.d.mts +2 -2
- package/es/Icon/Icon.d.mts +2 -2
- package/es/Icon/components/IconProvider.d.mts +3 -3
- package/es/Image/PreviewGroup.d.mts +2 -2
- package/es/Input/Input.d.mts +2 -2
- package/es/Input/InputNumber.d.mts +2 -2
- package/es/Input/InputPassword.d.mts +2 -2
- package/es/Input/TextArea.d.mts +2 -2
- package/es/Layout/components/LayoutFooter.d.mts +2 -2
- package/es/Layout/components/LayoutHeader.d.mts +2 -2
- package/es/Layout/components/LayoutMain.d.mts +2 -2
- package/es/Layout/components/LayoutSidebar.d.mts +2 -2
- package/es/Layout/components/LayoutSidebarInner.d.mts +2 -2
- package/es/Layout/components/LayoutToc.d.mts +2 -2
- package/es/List/ListItem/index.d.mts +2 -2
- package/es/Markdown/Markdown.d.mts +2 -2
- package/es/Markdown/Typography.d.mts +2 -2
- package/es/Markdown/components/SearchResultCards/index.d.mts +2 -2
- package/es/MaskShadow/MaskShadow.d.mts +2 -2
- package/es/Menu/Menu.d.mts +2 -2
- package/es/Mermaid/Mermaid.d.mts +2 -2
- package/es/Mermaid/SyntaxMermaid/index.d.mts +2 -2
- package/es/Modal/Modal.d.mts +2 -2
- package/es/Modal/ModalProvider.d.mts +2 -2
- package/es/MotionProvider/index.d.mts +2 -2
- package/es/Popover/PopoverStandalone.mjs +1 -1
- package/es/Popover/context.d.mts +2 -2
- package/es/SearchBar/SearchBar.d.mts +2 -2
- package/es/Segmented/Segmented.d.mts +2 -2
- package/es/Select/Select.d.mts +2 -2
- package/es/SideNav/SideNav.d.mts +2 -2
- package/es/SliderWithInput/SliderWithInput.d.mts +2 -2
- package/es/SortableList/components/DragHandle.d.mts +2 -2
- package/es/SortableList/components/SortableItem.d.mts +2 -2
- package/es/ThemeProvider/ThemeProvider.d.mts +2 -2
- package/es/Toc/Toc.d.mts +2 -2
- package/es/Tooltip/TooltipPortal.mjs +1 -1
- package/es/Tooltip/TooltipPortal.mjs.map +1 -1
- package/es/Video/index.d.mts +2 -2
- package/es/awesome/AuroraBackground/AuroraBackground.d.mts +2 -2
- package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts +2 -2
- package/es/awesome/Features/Features.d.mts +2 -2
- package/es/awesome/Giscus/Giscus.d.mts +2 -2
- package/es/awesome/GradientButton/GradientButton.d.mts +2 -2
- package/es/awesome/GridBackground/GridBackground.d.mts +2 -2
- package/es/awesome/GridBackground/GridShowcase.d.mts +2 -2
- package/es/awesome/Hero/Hero.d.mts +2 -2
- package/es/awesome/Spline/Spine.d.mts +2 -2
- package/es/awesome/Spotlight/Spotlight.d.mts +2 -2
- package/es/awesome/SpotlightCard/SpotlightCard.d.mts +2 -2
- package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts +2 -2
- package/es/brand/LobeChat/index.d.mts +2 -2
- package/es/brand/LobeHub/index.d.mts +2 -2
- package/es/brand/LogoThree/LogoSpline.d.mts +2 -2
- package/es/brand/LogoThree/index.d.mts +2 -2
- package/es/chat/BackBottom/BackBottom.d.mts +2 -2
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.d.mts +2 -2
- package/es/chat/ChatItem/ChatItem.d.mts +2 -2
- package/es/chat/ChatList/ChatList.d.mts +2 -2
- package/es/chat/EditableMessage/EditableMessage.d.mts +2 -2
- package/es/chat/EditableMessageList/EditableMessageList.d.mts +2 -2
- package/es/chat/MessageInput/MessageInput.d.mts +2 -2
- package/es/chat/MessageModal/MessageModal.d.mts +2 -2
- package/es/color/ColorScales/index.d.mts +2 -2
- package/es/color/CssVar/index.d.mts +2 -2
- package/es/hooks/usePortalContainer.mjs +24 -0
- package/es/hooks/usePortalContainer.mjs.map +1 -0
- package/es/i18n/context.d.mts +2 -2
- package/es/icons/lucideExtra/BotPromptIcon.d.mts +2 -2
- package/es/icons/lucideExtra/CreateBotIcon.d.mts +2 -2
- package/es/icons/lucideExtra/DiscordIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GlobeOffIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GroupBotIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GroupBotSquareIcon.d.mts +2 -2
- package/es/icons/lucideExtra/LeftClickIcon.d.mts +2 -2
- package/es/icons/lucideExtra/LeftDoubleClickIcon.d.mts +2 -2
- package/es/icons/lucideExtra/McpIcon.d.mts +2 -2
- package/es/icons/lucideExtra/ProviderIcon.d.mts +2 -2
- package/es/icons/lucideExtra/RightClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/RightDoubleClickIcon.d.mts +2 -2
- package/es/icons/lucideExtra/ShapesUploadIcon.d.mts +3 -3
- package/es/icons/lucideExtra/TreeDownRightIcon.d.mts +3 -3
- package/es/icons/lucideExtra/TreeUpDownRightIcon.d.mts +2 -2
- package/es/index.d.mts +5 -5
- package/es/index.mjs +3 -3
- package/es/mdx/Mdx/index.d.mts +2 -2
- package/es/mobile/ChatHeader/ChatHeaderTitle.d.mts +2 -2
- package/es/mobile/ChatInputArea/components/ChatSendButton.d.mts +2 -2
- package/es/mobile/TabBar/TabBar.d.mts +2 -2
- package/es/storybook/StoryBook/index.d.mts +2 -2
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AccordionProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react75 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Accordion/Accordion.d.ts
|
|
5
|
-
declare const Accordion:
|
|
5
|
+
declare const Accordion: react75.NamedExoticComponent<AccordionProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Accordion };
|
|
8
8
|
//# sourceMappingURL=Accordion.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AccordionItemProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react74 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Accordion/AccordionItem.d.ts
|
|
5
|
-
declare const AccordionItem:
|
|
5
|
+
declare const AccordionItem: react74.NamedExoticComponent<AccordionItemProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AccordionItem };
|
|
8
8
|
//# sourceMappingURL=AccordionItem.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ActionIconProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react73 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/ActionIcon/ActionIcon.d.ts
|
|
5
|
-
declare const ActionIcon:
|
|
5
|
+
declare const ActionIcon: react73.NamedExoticComponent<ActionIconProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ActionIcon };
|
|
8
8
|
//# sourceMappingURL=ActionIcon.d.mts.map
|
package/es/Alert/Alert.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AlertProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react71 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Alert/Alert.d.ts
|
|
5
|
-
declare const Alert:
|
|
5
|
+
declare const Alert: react71.NamedExoticComponent<AlertProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Alert };
|
|
8
8
|
//# sourceMappingURL=Alert.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AutoCompleteProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react72 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/AutoComplete/Select.d.ts
|
|
5
|
-
declare const AutoComplete:
|
|
5
|
+
declare const AutoComplete: react72.NamedExoticComponent<AutoCompleteProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AutoComplete };
|
|
8
8
|
//# sourceMappingURL=Select.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AvatarGroupProps } from "../type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react0 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Avatar/AvatarGroup/index.d.ts
|
|
5
|
-
declare const AvatarGroup:
|
|
5
|
+
declare const AvatarGroup: react0.NamedExoticComponent<AvatarGroupProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AvatarGroup };
|
|
8
8
|
//# sourceMappingURL=index.d.mts.map
|
package/es/Burger/Burger.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { BurgerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react2 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Burger/Burger.d.ts
|
|
5
|
-
declare const Burger:
|
|
5
|
+
declare const Burger: react2.NamedExoticComponent<BurgerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Burger };
|
|
8
8
|
//# sourceMappingURL=Burger.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CodeEditorProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react1 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/CodeEditor/CodeEditor.d.ts
|
|
5
|
-
declare const CodeEditor:
|
|
5
|
+
declare const CodeEditor: react1.NamedExoticComponent<CodeEditorProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { CodeEditor };
|
|
8
8
|
//# sourceMappingURL=CodeEditor.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CollapseProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react0 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Collapse/Collapse.d.ts
|
|
5
|
-
declare const Collapse:
|
|
5
|
+
declare const Collapse: react0.NamedExoticComponent<CollapseProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Collapse };
|
|
8
8
|
//# sourceMappingURL=Collapse.d.mts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MotionComponentType } from "../MotionProvider/index.mjs";
|
|
2
2
|
import { TranslationResourcesInput } from "../i18n/types.mjs";
|
|
3
3
|
import { CDN, CdnApi } from "../utils/genCdnUrl.mjs";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react6 from "react";
|
|
5
5
|
import { ElementType, ReactNode } from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/ConfigProvider/index.d.ts
|
|
@@ -19,7 +19,7 @@ interface ConfigProviderProps {
|
|
|
19
19
|
motion: MotionComponentType;
|
|
20
20
|
resources?: TranslationResourcesInput;
|
|
21
21
|
}
|
|
22
|
-
declare const ConfigProvider:
|
|
22
|
+
declare const ConfigProvider: react6.NamedExoticComponent<ConfigProviderProps>;
|
|
23
23
|
type CdnFn = ({
|
|
24
24
|
pkg,
|
|
25
25
|
version,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { LOBE_THEME_APP_ID } from "../ThemeProvider/constants.mjs";
|
|
4
|
-
import { TOOLTIP_CONTAINER_ATTR } from "../Tooltip/TooltipPortal.mjs";
|
|
5
4
|
import { preventDefaultAndStopPropagation } from "../utils/dom.mjs";
|
|
6
5
|
import { styles } from "../Menu/sharedStyle.mjs";
|
|
7
6
|
import { useIsClient } from "../hooks/useIsClient.mjs";
|
|
7
|
+
import { usePortalContainer } from "../hooks/usePortalContainer.mjs";
|
|
8
8
|
import { registerDevSingleton } from "../utils/devSingleton.mjs";
|
|
9
9
|
import { renderContextMenuItems } from "./renderItems.mjs";
|
|
10
10
|
import { closeContextMenu, getServerSnapshot, getSnapshot, setContextMenuState, subscribe, updateLastPointer } from "./store.mjs";
|
|
@@ -13,14 +13,16 @@ import { jsx } from "react/jsx-runtime";
|
|
|
13
13
|
import { ContextMenu } from "@base-ui/react/context-menu";
|
|
14
14
|
|
|
15
15
|
//#region src/ContextMenu/ContextMenuHost.tsx
|
|
16
|
+
const CONTEXT_MENU_CONTAINER_ATTR = "data-lobe-ui-context-menu-container";
|
|
16
17
|
const ContextMenuHost = memo(() => {
|
|
17
18
|
const isClient = useIsClient();
|
|
18
19
|
const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
19
20
|
useEffect(() => {
|
|
20
|
-
|
|
21
|
+
const DEV = process.env.NODE_ENV === "development";
|
|
22
|
+
if (!isClient || !DEV) return;
|
|
21
23
|
const themeApp = document.querySelector(`#${LOBE_THEME_APP_ID}`);
|
|
22
|
-
const
|
|
23
|
-
return registerDevSingleton("ContextMenuHost", themeApp ??
|
|
24
|
+
const contextMenuContainer = document.querySelector(`[${CONTEXT_MENU_CONTAINER_ATTR}="true"]`);
|
|
25
|
+
return registerDevSingleton("ContextMenuHost", themeApp ?? contextMenuContainer ?? document.body);
|
|
24
26
|
}, [isClient]);
|
|
25
27
|
useEffect(() => {
|
|
26
28
|
const handler = (event) => updateLastPointer(event);
|
|
@@ -32,14 +34,7 @@ const ContextMenuHost = memo(() => {
|
|
|
32
34
|
};
|
|
33
35
|
}, []);
|
|
34
36
|
const menuItems = useMemo(() => renderContextMenuItems(state.items), [state.items]);
|
|
35
|
-
const portalContainer =
|
|
36
|
-
if (!isClient) return null;
|
|
37
|
-
const themeApp = document.querySelector(`#${LOBE_THEME_APP_ID}`);
|
|
38
|
-
if (themeApp) return themeApp;
|
|
39
|
-
const tooltipContainer = document.querySelector(`[${TOOLTIP_CONTAINER_ATTR}="true"]`);
|
|
40
|
-
if (tooltipContainer) return tooltipContainer;
|
|
41
|
-
return document.body;
|
|
42
|
-
}, [isClient]);
|
|
37
|
+
const portalContainer = usePortalContainer(CONTEXT_MENU_CONTAINER_ATTR);
|
|
43
38
|
if (!isClient) return null;
|
|
44
39
|
if (!state.open && state.items.length === 0) return null;
|
|
45
40
|
if (!portalContainer) return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../src/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { LOBE_THEME_APP_ID } from '@/ThemeProvider';\nimport {
|
|
1
|
+
{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../src/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { LOBE_THEME_APP_ID } from '@/ThemeProvider';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { usePortalContainer } from '@/hooks/usePortalContainer';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { renderContextMenuItems } from './renderItems';\nimport {\n closeContextMenu,\n getServerSnapshot,\n getSnapshot,\n setContextMenuState,\n subscribe,\n updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst CONTEXT_MENU_CONTAINER_ATTR = 'data-lobe-ui-context-menu-container';\n\nexport const ContextMenuHost = memo(() => {\n const isClient = useIsClient();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n useEffect(() => {\n const DEV = process.env.NODE_ENV === 'development';\n if (!isClient || !DEV) return;\n // Enforce singleton per portal container (dev-only).\n const themeApp = document.querySelector<HTMLElement>(`#${LOBE_THEME_APP_ID}`);\n const contextMenuContainer = document.querySelector<HTMLElement>(\n `[${CONTEXT_MENU_CONTAINER_ATTR}=\"true\"]`,\n );\n const scope = themeApp ?? contextMenuContainer ?? document.body;\n return registerDevSingleton('ContextMenuHost', scope);\n }, [isClient]);\n\n useEffect(() => {\n const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n window.addEventListener('pointerdown', handler, true);\n window.addEventListener('contextmenu', handler, true);\n return () => {\n window.removeEventListener('pointerdown', handler, true);\n window.removeEventListener('contextmenu', handler, true);\n };\n }, []);\n\n const menuItems = useMemo(() => renderContextMenuItems(state.items), [state.items]);\n const portalContainer = usePortalContainer(CONTEXT_MENU_CONTAINER_ATTR);\n\n if (!isClient) return null;\n if (!state.open && state.items.length === 0) return null;\n if (!portalContainer) return null;\n\n return (\n <ContextMenu.Root\n onOpenChange={(open) => {\n if (open) {\n setContextMenuState({ open });\n return;\n }\n closeContextMenu();\n }}\n open={state.open}\n >\n <ContextMenu.Portal container={portalContainer}>\n <ContextMenu.Positioner\n anchor={state.anchor ?? undefined}\n className={styles.positioner}\n sideOffset={6}\n >\n <ContextMenu.Popup\n className={styles.popup}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n {menuItems}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.Root>\n );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,8BAA8B;AAEpC,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,QAAQ,qBAAqB,WAAW,aAAa,kBAAkB;AAE7E,iBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;AACrC,MAAI,CAAC,YAAY,CAAC,IAAK;EAEvB,MAAM,WAAW,SAAS,cAA2B,IAAI,oBAAoB;EAC7E,MAAM,uBAAuB,SAAS,cACpC,IAAI,4BAA4B,UACjC;AAED,SAAO,qBAAqB,mBADd,YAAY,wBAAwB,SAAS,KACN;IACpD,CAAC,SAAS,CAAC;AAEd,iBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,MAAM;AAC9E,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,SAAO,iBAAiB,eAAe,SAAS,KAAK;AACrD,eAAa;AACX,UAAO,oBAAoB,eAAe,SAAS,KAAK;AACxD,UAAO,oBAAoB,eAAe,SAAS,KAAK;;IAEzD,EAAE,CAAC;CAEN,MAAM,YAAY,cAAc,uBAAuB,MAAM,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;CACnF,MAAM,kBAAkB,mBAAmB,4BAA4B;AAEvE,KAAI,CAAC,SAAU,QAAO;AACtB,KAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,EAAG,QAAO;AACpD,KAAI,CAAC,gBAAiB,QAAO;AAE7B,QACE,oBAAC,YAAY;EACX,eAAe,SAAS;AACtB,OAAI,MAAM;AACR,wBAAoB,EAAE,MAAM,CAAC;AAC7B;;AAEF,qBAAkB;;EAEpB,MAAM,MAAM;YAEZ,oBAAC,YAAY;GAAO,WAAW;aAC7B,oBAAC,YAAY;IACX,QAAQ,MAAM,UAAU;IACxB,WAAW,OAAO;IAClB,YAAY;cAEZ,oBAAC,YAAY;KACX,WAAW,OAAO;KAClB,eAAe;eAEd;MACiB;KACG;IACN;GACJ;EAErB;AAEF,gBAAgB,cAAc"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CopyButtonProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react12 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/CopyButton/CopyButton.d.ts
|
|
5
|
-
declare const CopyButton:
|
|
5
|
+
declare const CopyButton: react12.NamedExoticComponent<CopyButtonProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { CopyButton };
|
|
8
8
|
//# sourceMappingURL=CopyButton.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DatePickerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react69 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DatePicker/DatePicker.d.ts
|
|
5
|
-
declare const DatePicker:
|
|
5
|
+
declare const DatePicker: react69.NamedExoticComponent<DatePickerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DatePicker };
|
|
8
8
|
//# sourceMappingURL=DatePicker.d.mts.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react65 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelBody.d.ts
|
|
5
5
|
type DraggablePanelBodyProps = DivProps;
|
|
6
|
-
declare const DraggablePanelBody:
|
|
6
|
+
declare const DraggablePanelBody: react65.NamedExoticComponent<DivProps>;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { DraggablePanelBody, DraggablePanelBodyProps };
|
|
9
9
|
//# sourceMappingURL=DraggablePanelBody.d.mts.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react66 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
|
|
5
5
|
type DraggablePanelContainerProps = DivProps;
|
|
6
|
-
declare const DraggablePanelContainer:
|
|
6
|
+
declare const DraggablePanelContainer: react66.NamedExoticComponent<DivProps>;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { DraggablePanelContainer, DraggablePanelContainerProps };
|
|
9
9
|
//# sourceMappingURL=DraggablePanelContainer.d.mts.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react68 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelFooter.d.ts
|
|
5
5
|
type DraggablePanelFooterProps = DivProps;
|
|
6
|
-
declare const DraggablePanelFooter:
|
|
6
|
+
declare const DraggablePanelFooter: react68.NamedExoticComponent<DivProps>;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { DraggablePanelFooter, DraggablePanelFooterProps };
|
|
9
9
|
//# sourceMappingURL=DraggablePanelFooter.d.mts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react67 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelHeader.d.ts
|
|
5
5
|
interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
|
|
@@ -9,7 +9,7 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
|
|
|
9
9
|
setPin?: (pin: boolean) => void;
|
|
10
10
|
title?: string;
|
|
11
11
|
}
|
|
12
|
-
declare const DraggablePanelHeader:
|
|
12
|
+
declare const DraggablePanelHeader: react67.NamedExoticComponent<DraggablePanelHeaderProps>;
|
|
13
13
|
//#endregion
|
|
14
14
|
export { DraggablePanelHeader, DraggablePanelHeaderProps };
|
|
15
15
|
//# sourceMappingURL=DraggablePanelHeader.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DraggableSideNavProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react64 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggableSideNav/DraggableSideNav.d.ts
|
|
5
|
-
declare const DraggableSideNav:
|
|
5
|
+
declare const DraggableSideNav: react64.NamedExoticComponent<DraggableSideNavProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DraggableSideNav };
|
|
8
8
|
//# sourceMappingURL=DraggableSideNav.d.mts.map
|
package/es/Drawer/Drawer.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DrawerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react63 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Drawer/Drawer.d.ts
|
|
5
|
-
declare const Drawer:
|
|
5
|
+
declare const Drawer: react63.NamedExoticComponent<DrawerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Drawer };
|
|
8
8
|
//# sourceMappingURL=Drawer.d.mts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DropdownProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react62 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Dropdown/Dropdown.d.ts
|
|
5
5
|
|
|
@@ -9,7 +9,7 @@ import * as react75 from "react";
|
|
|
9
9
|
* @see https://ui.lobehub.com/components/context-menu
|
|
10
10
|
* @see https://ui.lobehub.com/components/dropdown-menu
|
|
11
11
|
*/
|
|
12
|
-
declare const Dropdown:
|
|
12
|
+
declare const Dropdown: react62.NamedExoticComponent<DropdownProps>;
|
|
13
13
|
//#endregion
|
|
14
14
|
export { Dropdown };
|
|
15
15
|
//# sourceMappingURL=Dropdown.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DropdownMenuProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react60 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DropdownMenu/DropdownMenu.d.ts
|
|
5
|
-
declare const DropdownMenu:
|
|
5
|
+
declare const DropdownMenu: react60.NamedExoticComponent<DropdownMenuProps<unknown>>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DropdownMenu };
|
|
8
8
|
//# sourceMappingURL=DropdownMenu.d.mts.map
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { LOBE_THEME_APP_ID } from "../ThemeProvider/constants.mjs";
|
|
4
3
|
import { CLASSNAMES } from "../styles/classNames.mjs";
|
|
5
|
-
import { TOOLTIP_CONTAINER_ATTR } from "../Tooltip/TooltipPortal.mjs";
|
|
6
4
|
import { placementMap } from "../utils/placement.mjs";
|
|
7
5
|
import { styles } from "../Menu/sharedStyle.mjs";
|
|
8
|
-
import { useIsClient } from "../hooks/useIsClient.mjs";
|
|
9
6
|
import { useNativeButton } from "../hooks/useNativeButton.mjs";
|
|
7
|
+
import { usePortalContainer } from "../hooks/usePortalContainer.mjs";
|
|
10
8
|
import { renderDropdownMenuItems } from "./renderItems.mjs";
|
|
11
9
|
import { cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
12
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -16,8 +14,8 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
16
14
|
import clsx from "clsx";
|
|
17
15
|
|
|
18
16
|
//#region src/DropdownMenu/DropdownMenu.tsx
|
|
17
|
+
const DROPDOWN_MENU_CONTAINER_ATTR = "data-lobe-ui-dropdown-menu-container";
|
|
19
18
|
const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, triggerProps, ...rest }) => {
|
|
20
|
-
const isClient = useIsClient();
|
|
21
19
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
|
|
22
20
|
useEffect(() => {
|
|
23
21
|
if (open === void 0) return;
|
|
@@ -41,14 +39,7 @@ const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenC
|
|
|
41
39
|
onOpenChangeComplete?.(nextOpen);
|
|
42
40
|
if (!nextOpen) menuItemsRef.current = null;
|
|
43
41
|
}, [onOpenChangeComplete]);
|
|
44
|
-
const portalContainer =
|
|
45
|
-
if (!isClient) return null;
|
|
46
|
-
const themeApp = document.querySelector(`#${LOBE_THEME_APP_ID}`);
|
|
47
|
-
if (themeApp) return themeApp;
|
|
48
|
-
const tooltipContainer = document.querySelector(`[${TOOLTIP_CONTAINER_ATTR}="true"]`);
|
|
49
|
-
if (tooltipContainer) return tooltipContainer;
|
|
50
|
-
return document.body;
|
|
51
|
-
}, [isClient]);
|
|
42
|
+
const portalContainer = usePortalContainer(DROPDOWN_MENU_CONTAINER_ATTR);
|
|
52
43
|
const placementConfig = placementMap[placement];
|
|
53
44
|
const hoverTrigger = Boolean(triggerProps?.openOnHover);
|
|
54
45
|
const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.mjs","names":["renderer: ComponentRenderFn<HTMLProps<any>, MenuTriggerState>"],"sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu, type MenuTriggerState } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport type { ComponentRenderFn, HTMLProps } from '@base-ui/react/utils/types';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { styles } from '@/Menu/sharedStyle';\nimport {
|
|
1
|
+
{"version":3,"file":"DropdownMenu.mjs","names":["renderer: ComponentRenderFn<HTMLProps<any>, MenuTriggerState>"],"sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu, type MenuTriggerState } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport type { ComponentRenderFn, HTMLProps } from '@base-ui/react/utils/types';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { styles } from '@/Menu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { usePortalContainer } from '@/hooks/usePortalContainer';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { placementMap } from '@/utils/placement';\n\nimport { renderDropdownMenuItems } from './renderItems';\nimport type { DropdownMenuProps } from './type';\n\nconst DROPDOWN_MENU_CONTAINER_ATTR = 'data-lobe-ui-dropdown-menu-container';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n ({\n children,\n defaultOpen,\n\n items,\n nativeButton,\n onOpenChange,\n onOpenChangeComplete,\n open,\n placement = 'bottomLeft',\n popupProps,\n portalProps,\n positionerProps,\n triggerProps,\n ...rest\n }) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n useEffect(() => {\n if (open === undefined) return;\n setUncontrolledOpen(open);\n }, [open]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n onOpenChange?.(nextOpen, details);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n const isOpen = open ?? uncontrolledOpen;\n const menuItems = useMemo(() => {\n if (isOpen) {\n const resolvedItems = typeof items === 'function' ? items() : items;\n const renderedItems = renderDropdownMenuItems(resolvedItems);\n menuItemsRef.current = renderedItems;\n return renderedItems;\n }\n return menuItemsRef.current;\n }, [isOpen, items]);\n const handleOpenChangeComplete = useCallback(\n (nextOpen: boolean) => {\n onOpenChangeComplete?.(nextOpen);\n if (!nextOpen) {\n menuItemsRef.current = null;\n }\n },\n [onOpenChangeComplete],\n );\n const portalContainer = usePortalContainer(DROPDOWN_MENU_CONTAINER_ATTR);\n const placementConfig = placementMap[placement];\n const hoverTrigger = Boolean((triggerProps as any)?.openOnHover);\n\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n triggerNativeButton: triggerProps?.nativeButton,\n });\n\n const renderer: ComponentRenderFn<HTMLProps<any>, MenuTriggerState> = useCallback(\n (props) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n return cloneElement(children as any, mergeProps((children as any).props, resolvedProps));\n },\n [children, isNativeButtonTriggerElement],\n );\n\n const trigger = isValidElement(children) ? (\n <Menu.Trigger\n {...triggerProps}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, triggerProps?.className)}\n nativeButton={resolvedNativeButton}\n render={renderer}\n />\n ) : (\n <Menu.Trigger\n {...triggerProps}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, triggerProps?.className)}\n >\n {children}\n </Menu.Trigger>\n );\n\n const resolvedPositionerProps = {\n ...positionerProps,\n align: positionerProps?.align ?? placementConfig?.align ?? 'center',\n side: positionerProps?.side ?? placementConfig?.side ?? 'bottom',\n sideOffset: positionerProps?.sideOffset ?? 6,\n };\n return (\n <Menu.Root\n {...rest}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n onOpenChangeComplete={handleOpenChangeComplete}\n open={open}\n >\n {trigger}\n <Menu.Portal container={portalProps?.container ?? portalContainer} {...portalProps}>\n <Menu.Positioner\n {...resolvedPositionerProps}\n className={(state) =>\n cx(\n styles.positioner,\n typeof positionerProps?.className === 'function'\n ? positionerProps.className(state)\n : positionerProps?.className,\n )\n }\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n >\n <Menu.Popup\n {...popupProps}\n className={(state) =>\n cx(\n styles.popup,\n typeof popupProps?.className === 'function'\n ? popupProps.className(state)\n : popupProps?.className,\n )\n }\n >\n {menuItems}\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n );\n },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA2BA,MAAM,+BAA+B;AAErC,MAAM,eAAe,MAClB,EACC,UACA,aAEA,OACA,cACA,cACA,sBACA,MACA,YAAY,cACZ,YACA,aACA,iBACA,cACA,GAAG,WACC;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,YAAY,CAAC;AAE9E,iBAAgB;AACd,MAAI,SAAS,OAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAEV,MAAM,mBAAmB,aACtB,UAAmB,YAA6D;AAC/E,iBAAe,UAAU,QAAQ;AACjC,MAAI,SAAS,OACX,qBAAoB,SAAS;IAGjC,CAAC,cAAc,KAAK,CACrB;CAED,MAAM,eAAe,OAA0D,KAAK;CACpF,MAAM,SAAS,QAAQ;CACvB,MAAM,YAAY,cAAc;AAC9B,MAAI,QAAQ;GAEV,MAAM,gBAAgB,wBADA,OAAO,UAAU,aAAa,OAAO,GAAG,MACF;AAC5D,gBAAa,UAAU;AACvB,UAAO;;AAET,SAAO,aAAa;IACnB,CAAC,QAAQ,MAAM,CAAC;CACnB,MAAM,2BAA2B,aAC9B,aAAsB;AACrB,yBAAuB,SAAS;AAChC,MAAI,CAAC,SACH,cAAa,UAAU;IAG3B,CAAC,qBAAqB,CACvB;CACD,MAAM,kBAAkB,mBAAmB,6BAA6B;CACxE,MAAM,kBAAkB,aAAa;CACrC,MAAM,eAAe,QAAS,cAAsB,YAAY;CAEhE,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;EACA,qBAAqB,cAAc;EACpC,CAAC;CAEF,MAAMA,WAAgE,aACnE,UAAU;EAGT,MAAM,uBAAuB;AAC3B,OAAI,6BAA8B,QAAO;GAEzC,MAAM,EAAE,MAAM,GAAG,cAAc;AAC/B,UAAO;MACL;AAEJ,SAAO,aAAa,UAAiB,WAAY,SAAiB,OAAO,cAAc,CAAC;IAE1F,CAAC,UAAU,6BAA6B,CACzC;CAED,MAAM,UAAU,eAAe,SAAS,GACtC,oBAAC,KAAK;EACJ,GAAI;EACJ,WAAW,KAAK,WAAW,qBAAqB,cAAc,UAAU;EACxE,cAAc;EACd,QAAQ;GACR,GAEF,oBAAC,KAAK;EACJ,GAAI;EACJ,WAAW,KAAK,WAAW,qBAAqB,cAAc,UAAU;EAEvE;GACY;CAGjB,MAAM,0BAA0B;EAC9B,GAAG;EACH,OAAO,iBAAiB,SAAS,iBAAiB,SAAS;EAC3D,MAAM,iBAAiB,QAAQ,iBAAiB,QAAQ;EACxD,YAAY,iBAAiB,cAAc;EAC5C;AACD,QACE,qBAAC,KAAK;EACJ,GAAI;EACS;EACb,cAAc;EACd,sBAAsB;EAChB;aAEL,SACD,oBAAC,KAAK;GAAO,WAAW,aAAa,aAAa;GAAiB,GAAI;aACrE,oBAAC,KAAK;IACJ,GAAI;IACJ,YAAY,UACV,GACE,OAAO,YACP,OAAO,iBAAiB,cAAc,aAClC,gBAAgB,UAAU,MAAM,GAChC,iBAAiB,UACtB;IAEH,sBAAoB,gBAAgB;IACpC,kBAAgB;cAEhB,oBAAC,KAAK;KACJ,GAAI;KACJ,YAAY,UACV,GACE,OAAO,OACP,OAAO,YAAY,cAAc,aAC7B,WAAW,UAAU,MAAM,GAC3B,YAAY,UACjB;eAGF;MACU;KACG;IACN;GACJ;EAGjB;AAED,aAAa,cAAc;AAE3B,2BAAe"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { EditableTextProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react58 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/EditableText/EditableText.d.ts
|
|
5
|
-
declare const EditableText:
|
|
5
|
+
declare const EditableText: react58.NamedExoticComponent<EditableTextProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { EditableText };
|
|
8
8
|
//# sourceMappingURL=EditableText.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { EmojiPickerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react59 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/EmojiPicker/EmojiPicker.d.ts
|
|
5
|
-
declare const EmojiPicker:
|
|
5
|
+
declare const EmojiPicker: react59.NamedExoticComponent<EmojiPickerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { EmojiPicker };
|
|
8
8
|
//# sourceMappingURL=EmojiPicker.d.mts.map
|
|
@@ -6,13 +6,13 @@ import Tooltip_default from "../Tooltip/Tooltip.mjs";
|
|
|
6
6
|
import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
|
|
7
7
|
import Avatar_default from "../Avatar/index.mjs";
|
|
8
8
|
import { useTranslation } from "../i18n/useTranslation.mjs";
|
|
9
|
+
import Popover_default from "../Popover/Popover.mjs";
|
|
9
10
|
import Tabs_default from "../Tabs/Tabs.mjs";
|
|
10
11
|
import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
|
|
11
12
|
import AvatarUploader_default from "./AvatarUploader.mjs";
|
|
12
13
|
import { styles } from "./style.mjs";
|
|
13
14
|
import { memo, useMemo, useRef, useState } from "react";
|
|
14
15
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
import { Popover } from "antd";
|
|
16
16
|
import { cx, useTheme } from "antd-style";
|
|
17
17
|
import useMergeState from "use-merge-value";
|
|
18
18
|
import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
|
|
@@ -23,7 +23,7 @@ import useSWR from "swr";
|
|
|
23
23
|
|
|
24
24
|
//#region src/EmojiPicker/EmojiPicker.tsx
|
|
25
25
|
const DEFAULT_AVATAR = "🤖";
|
|
26
|
-
const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, ...rest }) => {
|
|
26
|
+
const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
|
|
27
27
|
const ref = useRef(null);
|
|
28
28
|
const { t } = useTranslation(emojiPicker_default);
|
|
29
29
|
const [visible, setVisible] = useMergeState(defaultOpen, {
|
|
@@ -86,68 +86,70 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
|
|
|
86
86
|
}))
|
|
87
87
|
].filter(Boolean);
|
|
88
88
|
const showTabs = allowDelete || items && items.length > 1;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
89
|
+
const content = /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
90
|
+
className: cx(styles.picker, popupClassName),
|
|
91
|
+
ref,
|
|
92
|
+
style: {
|
|
93
|
+
minWidth: 310,
|
|
94
|
+
paddingTop: showTabs ? 4 : 0,
|
|
95
|
+
...pickerCssVariables,
|
|
96
|
+
...popupStyle
|
|
97
|
+
},
|
|
98
|
+
...contentProps,
|
|
99
|
+
children: [
|
|
100
|
+
showTabs && /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
101
|
+
align: "center",
|
|
102
|
+
className: styles.tabs,
|
|
103
|
+
horizontal: true,
|
|
104
|
+
justify: "space-between",
|
|
105
|
+
paddingInline: 10,
|
|
106
|
+
children: [/* @__PURE__ */ jsx(Tabs_default, {
|
|
107
|
+
activeKey: tab,
|
|
108
|
+
compact: true,
|
|
109
|
+
items,
|
|
110
|
+
onChange: (key) => setTab(key),
|
|
111
|
+
size: "small"
|
|
112
|
+
}), allowDelete && /* @__PURE__ */ jsx(ActionIcon_default, {
|
|
113
|
+
icon: TrashIcon,
|
|
114
|
+
onClick: () => {
|
|
115
|
+
handleAvatarChange(defaultAvatar);
|
|
116
|
+
onDelete?.();
|
|
117
|
+
},
|
|
118
|
+
size: {
|
|
119
|
+
blockSize: 32,
|
|
120
|
+
size: 18
|
|
121
|
+
},
|
|
122
|
+
title: deleteText
|
|
123
|
+
})]
|
|
124
|
+
}),
|
|
125
|
+
tab === "emoji" && /* @__PURE__ */ jsx(Picker, {
|
|
126
|
+
custom: customEmojis,
|
|
127
|
+
data,
|
|
128
|
+
i18n,
|
|
129
|
+
icons: "outline",
|
|
130
|
+
locale: locale.split("-")[0],
|
|
131
|
+
navPosition: showTabs ? "bottom" : "top",
|
|
132
|
+
onEmojiSelect: (e) => handleAvatarChange(e.src || e.native),
|
|
133
|
+
previewPosition: "none",
|
|
134
|
+
skinTonePosition: "none",
|
|
135
|
+
theme: theme.isDarkMode ? "dark" : "light"
|
|
136
|
+
}),
|
|
137
|
+
tab === "upload" && /* @__PURE__ */ jsx(AvatarUploader_default, {
|
|
138
|
+
compressSize,
|
|
139
|
+
onChange: handleAvatarChange,
|
|
140
|
+
onUpload,
|
|
141
|
+
shape,
|
|
142
|
+
texts
|
|
143
|
+
}),
|
|
144
|
+
customTabs.map((item) => tab === item.value && /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
145
|
+
padding: 10,
|
|
146
|
+
children: item.render(handleAvatarChange)
|
|
147
|
+
}, item.value))
|
|
148
|
+
]
|
|
149
|
+
});
|
|
150
|
+
return /* @__PURE__ */ jsx(Popover_default, {
|
|
151
|
+
classNames: { content: styles.popover },
|
|
152
|
+
content,
|
|
151
153
|
defaultOpen,
|
|
152
154
|
onOpenChange: (v) => {
|
|
153
155
|
if (loading) return;
|
|
@@ -155,8 +157,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
|
|
|
155
157
|
},
|
|
156
158
|
open: visible,
|
|
157
159
|
placement: "bottom",
|
|
158
|
-
|
|
159
|
-
trigger: ["click"],
|
|
160
|
+
trigger: "click",
|
|
160
161
|
...popupProps,
|
|
161
162
|
children: customRender ? customRender(ava) : /* @__PURE__ */ jsx(Avatar_default, {
|
|
162
163
|
avatar: ava,
|