@lobehub/ui 5.23.4 → 5.24.0
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.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/Accordion/ArrowIcon.mjs.map +1 -1
- package/es/ActionIcon/ActionIcon.mjs.map +1 -1
- package/es/ActionIconGroup/ActionIconGroup.mjs.map +1 -1
- package/es/Alert/Alert.mjs.map +1 -1
- package/es/Avatar/Avatar.mjs.map +1 -1
- package/es/Avatar/AvatarGroup/index.mjs.map +1 -1
- package/es/Burger/Burger.mjs.map +1 -1
- package/es/Checkbox/Checkbox.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeDiff/DiffPanel.mjs.map +1 -1
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/Collapse/Collapse.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/ConfigProvider/index.mjs.map +1 -1
- package/es/ContextMenu/index.d.mts +2 -2
- package/es/ContextMenu/index.mjs +2 -2
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/Drawer/Drawer.mjs.map +1 -1
- package/es/Dropdown/Dropdown.mjs.map +1 -1
- package/es/EditableText/ControlInput.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EditorSlashMenu/EditorSlashMenu.mjs.map +1 -1
- package/es/EditorSlashMenu/MenuItemRenderer.mjs.map +1 -1
- package/es/EmojiPicker/AvatarUploader.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/Empty/Empty.mjs.map +1 -1
- package/es/FileTypeIcon/FileTypeIcon.mjs.map +1 -1
- package/es/FileTypeIcon/components/FileIcon.mjs.map +1 -1
- package/es/FileTypeIcon/components/FolderIcon.mjs.map +1 -1
- package/es/FluentEmoji/FluentEmoji.mjs.map +1 -1
- package/es/Footer/Footer.mjs.map +1 -1
- package/es/Form/Form.mjs.map +1 -1
- package/es/Form/components/FormGroup.mjs.map +1 -1
- package/es/Form/components/FormSubmitFooter.mjs.map +1 -1
- package/es/Form/components/FormTitle.mjs.map +1 -1
- package/es/FormModal/FormModal.mjs.map +1 -1
- package/es/Freeze/Freeze.mjs.map +1 -1
- package/es/GroupAvatar/GroupAvatar.mjs.map +1 -1
- package/es/GuideCard/GuideCard.mjs.map +1 -1
- package/es/Header/Header.mjs.map +1 -1
- package/es/Highlighter/FullFeatured.mjs.map +1 -1
- package/es/Highlighter/Highlighter.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/style.mjs +2 -2
- package/es/Highlighter/SyntaxHighlighter/style.mjs.map +1 -1
- package/es/Hotkey/Hotkey.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/HtmlPreview/HtmlPreview.mjs.map +1 -1
- package/es/HtmlPreview/Iframe.mjs.map +1 -1
- package/es/Icon/Icon.mjs.map +1 -1
- package/es/Image/Image.mjs.map +1 -1
- package/es/Image/components/Toolbar.mjs.map +1 -1
- package/es/Image/components/usePreview.mjs.map +1 -1
- package/es/Image/components/usePreviewGroup.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/Layout/Layout.mjs.map +1 -1
- package/es/List/List.mjs.map +1 -1
- package/es/List/ListItem/index.mjs.map +1 -1
- package/es/Markdown/Markdown.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/MarkdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/style.mjs.map +1 -1
- package/es/Markdown/components/CodeBlock.mjs.map +1 -1
- package/es/Markdown/components/Footnotes.mjs.map +1 -1
- package/es/Markdown/components/MarkdownTable/index.mjs.map +1 -1
- package/es/Markdown/components/SearchResultCards/SearchResultCard.mjs.map +1 -1
- package/es/Markdown/components/SearchResultCards/index.mjs.map +1 -1
- package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.mjs.map +1 -1
- package/es/Menu/Menu.mjs.map +1 -1
- package/es/Mermaid/FullFeatured.mjs.map +1 -1
- package/es/Mermaid/Mermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs +35 -0
- package/es/Mermaid/SyntaxMermaid/MermaidFallback.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs +52 -0
- package/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs +13 -42
- package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs +13 -43
- package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs +52 -0
- package/es/Mermaid/SyntaxMermaid/prepareInlineSvg.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs +20 -0
- package/es/Mermaid/SyntaxMermaid/prepareMermaidSvg.mjs.map +1 -0
- package/es/Mermaid/SyntaxMermaid/style.mjs +11 -0
- package/es/Mermaid/SyntaxMermaid/style.mjs.map +1 -1
- package/es/Mermaid/const.mjs +10 -31
- package/es/Mermaid/const.mjs.map +1 -1
- package/es/Mermaid/index.d.mts +2 -1
- package/es/Mermaid/index.mjs +2 -1
- package/es/Mermaid/type.d.mts +2 -2
- package/es/Modal/Modal.mjs.map +1 -1
- package/es/Modal/ModalStackItem.mjs.map +1 -1
- package/es/Modal/RawModalStackItem.mjs.map +1 -1
- package/es/Modal/imperative.mjs.map +1 -1
- package/es/Modal/style.mjs.map +1 -1
- package/es/NeuralNetworkLoading/NeuralNetworkLoading.mjs.map +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs.map +1 -1
- package/es/SideNav/SideNav.mjs.map +1 -1
- package/es/Skeleton/Skeleton.mjs.map +1 -1
- package/es/Skeleton/SkeletonParagraph.mjs.map +1 -1
- package/es/Skeleton/SkeletonTags.mjs.map +1 -1
- package/es/SliderWithInput/SliderWithInput.mjs.map +1 -1
- package/es/Snippet/Snippet.mjs.map +1 -1
- package/es/SortableList/SortableList.mjs.map +1 -1
- package/es/SortableList/components/SortableItem.mjs.map +1 -1
- package/es/Text/Text.mjs.map +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs.map +1 -1
- package/es/ThemeSwitch/ThemeSwitch.mjs.map +1 -1
- package/es/Toc/Toc.mjs.map +1 -1
- package/es/Toc/TocMobile.mjs.map +1 -1
- package/es/Video/index.mjs.map +1 -1
- package/es/awesome/AuroraBackground/AuroraBackground.mjs.map +1 -1
- package/es/awesome/Features/FeatureItem.mjs.map +1 -1
- package/es/awesome/Giscus/Giscus.mjs.map +1 -1
- package/es/awesome/GradientButton/GradientButton.mjs.map +1 -1
- package/es/awesome/GridBackground/GridBackground.mjs.map +1 -1
- package/es/awesome/GridBackground/GridShowcase.mjs.map +1 -1
- package/es/awesome/GridBackground/components/Grid.mjs.map +1 -1
- package/es/awesome/Hero/Hero.mjs.map +1 -1
- package/es/awesome/Spline/ParentSize.mjs.map +1 -1
- package/es/awesome/Spline/Spine.mjs.map +1 -1
- package/es/awesome/SpotlightCard/SpotlightCard.mjs.map +1 -1
- package/es/awesome/SpotlightCard/SpotlightCardItem.mjs.map +1 -1
- package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map +1 -1
- package/es/base-ui/AutoComplete/AutoComplete.mjs.map +1 -1
- package/es/base-ui/Button/Button.mjs.map +1 -1
- package/es/base-ui/Button/SplitButton.mjs.map +1 -1
- package/es/base-ui/Checkbox/Checkbox.mjs.map +1 -1
- package/es/base-ui/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/base-ui/ContextMenu/imperative.d.mts +2 -2
- package/es/base-ui/ContextMenu/index.d.mts +2 -2
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/ContextMenu/store.d.mts +13 -1
- package/es/base-ui/ContextMenu/store.mjs +29 -4
- package/es/base-ui/ContextMenu/store.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/sharedStyle.mjs +3 -0
- package/es/base-ui/DropdownMenu/sharedStyle.mjs.map +1 -1
- package/es/base-ui/FloatingPanel/FloatingPanel.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheet.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheetHeader.mjs.map +1 -1
- package/es/base-ui/Form/Form.mjs.map +1 -1
- package/es/base-ui/Form/components/FormField.mjs.map +1 -1
- package/es/base-ui/Form/components/FormGroup.mjs.map +1 -1
- package/es/base-ui/Form/components/FormSubmitFooter.mjs.map +1 -1
- package/es/base-ui/Form/components/FormTitle.mjs.map +1 -1
- package/es/base-ui/Input/Input.mjs.map +1 -1
- package/es/base-ui/Input/InputNumber.mjs.map +1 -1
- package/es/base-ui/Input/InputOTP.mjs.map +1 -1
- package/es/base-ui/Input/InputPassword.mjs.map +1 -1
- package/es/base-ui/Input/TextArea.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Modal/Modal.mjs.map +1 -1
- package/es/base-ui/Modal/atoms.mjs.map +1 -1
- package/es/base-ui/Modal/imperative.mjs.map +1 -1
- package/es/base-ui/Popover/ArrowIcon.mjs.map +1 -1
- package/es/base-ui/Popover/PopoverGroup.mjs.map +1 -1
- package/es/base-ui/Popover/PopoverStandalone.mjs.map +1 -1
- package/es/base-ui/Popover/atoms.mjs.map +1 -1
- package/es/base-ui/Radio/Radio.mjs.map +1 -1
- package/es/base-ui/Radio/RadioGroup.mjs.map +1 -1
- package/es/base-ui/ScrollArea/ScrollArea.mjs.map +1 -1
- package/es/base-ui/Segmented/Segmented.mjs.map +1 -1
- package/es/base-ui/Select/Select.mjs.map +1 -1
- package/es/base-ui/Select/parts.mjs.map +1 -1
- package/es/base-ui/Select/renderOptions.mjs.map +1 -1
- package/es/base-ui/Slider/Slider.mjs.map +1 -1
- package/es/base-ui/Slider/SliderWithInput.mjs.map +1 -1
- package/es/base-ui/SubmenuArrowIcon.mjs.map +1 -1
- package/es/base-ui/Switch/Switch.mjs.map +1 -1
- package/es/base-ui/Switch/atoms.d.mts +3 -3
- package/es/base-ui/Switch/atoms.mjs +99 -50
- package/es/base-ui/Switch/atoms.mjs.map +1 -1
- package/es/base-ui/Switch/style.mjs +44 -1
- package/es/base-ui/Switch/style.mjs.map +1 -1
- package/es/base-ui/Switch/type.d.mts +3 -7
- package/es/base-ui/Tabs/Tabs.mjs.map +1 -1
- package/es/base-ui/Tabs/atoms.mjs.map +1 -1
- package/es/base-ui/Toast/Toast.mjs.map +1 -1
- package/es/base-ui/Toast/imperative.mjs.map +1 -1
- package/es/base-ui/Tooltip/ArrowIcon.mjs.map +1 -1
- package/es/base-ui/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/base-ui/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/base-ui/index.d.mts +2 -2
- package/es/base-ui/index.mjs +2 -2
- package/es/brand/LobeChat/index.mjs.map +1 -1
- package/es/brand/LobeChatText/index.mjs.map +1 -1
- package/es/brand/LobeHub/index.mjs.map +1 -1
- package/es/brand/LobeHubText/index.mjs.map +1 -1
- package/es/brand/LogoThree/Loading.mjs.map +1 -1
- package/es/brand/LogoThree/LogoSpline.mjs.map +1 -1
- package/es/brand/LogoThree/index.mjs.map +1 -1
- package/es/brand/components/Divider.mjs.map +1 -1
- package/es/chat/BackBottom/BackBottom.mjs.map +1 -1
- package/es/chat/ChatHeader/ChatHeader.mjs.map +1 -1
- package/es/chat/ChatHeader/ChatHeaderTitle.mjs.map +1 -1
- package/es/chat/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/chat/ChatInputArea/components/ChatInputActionBar.mjs.map +1 -1
- package/es/chat/ChatInputArea/components/ChatSendButton.mjs.map +1 -1
- package/es/chat/ChatItem/ChatItem.mjs.map +1 -1
- package/es/chat/ChatItem/components/Actions.mjs.map +1 -1
- package/es/chat/ChatItem/components/Avatar.mjs.map +1 -1
- package/es/chat/ChatItem/components/ErrorContent.mjs.map +1 -1
- package/es/chat/ChatItem/components/Loading.mjs.map +1 -1
- package/es/chat/ChatItem/components/MessageContent.mjs.map +1 -1
- package/es/chat/ChatItem/components/Title.mjs.map +1 -1
- package/es/chat/ChatList/ChatList.mjs.map +1 -1
- package/es/chat/ChatList/components/HistoryDivider.mjs.map +1 -1
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
- package/es/chat/LoadingDots/LoadingDots.mjs.map +1 -1
- package/es/chat/MessageInput/MessageInput.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/color/ColorScales/ScaleRow.mjs.map +1 -1
- package/es/color/ColorScales/index.mjs.map +1 -1
- package/es/color/CssVar/ScaleRow.mjs.map +1 -1
- package/es/color/CssVar/VarRow.mjs.map +1 -1
- package/es/color/CssVar/index.mjs.map +1 -1
- package/es/hooks/useMarkdown/latex.mjs.map +1 -1
- package/es/hooks/useMarkdown/useMarkdownContent.mjs.map +1 -1
- package/es/hooks/useMermaid.mjs +80 -116
- package/es/hooks/useMermaid.mjs.map +1 -1
- package/es/hooks/useMermaidCdn.d.mts +10 -0
- package/es/hooks/useMermaidCdn.mjs +97 -0
- package/es/hooks/useMermaidCdn.mjs.map +1 -0
- package/es/hooks/useStreamMermaid.mjs +19 -70
- package/es/hooks/useStreamMermaid.mjs.map +1 -1
- package/es/icons/Auth0/components/Mono.mjs.map +1 -1
- package/es/icons/Authelia/components/Color.mjs.map +1 -1
- package/es/icons/Authelia/components/Mono.mjs.map +1 -1
- package/es/icons/Authentik/components/Color.mjs.map +1 -1
- package/es/icons/Authentik/components/Mono.mjs.map +1 -1
- package/es/icons/Casdoor/components/Color.mjs.map +1 -1
- package/es/icons/Casdoor/components/Mono.mjs.map +1 -1
- package/es/icons/Clerk/components/Color.mjs.map +1 -1
- package/es/icons/Clerk/components/Mono.mjs.map +1 -1
- package/es/icons/DingTalk/components/Color.mjs.map +1 -1
- package/es/icons/DingTalk/components/Mono.mjs.map +1 -1
- package/es/icons/Discord/components/Color.mjs.map +1 -1
- package/es/icons/Discord/components/Mono.mjs.map +1 -1
- package/es/icons/GoogleChat/components/Color.mjs.map +1 -1
- package/es/icons/GoogleChat/components/Mono.mjs.map +1 -1
- package/es/icons/IMessage/components/Color.mjs.map +1 -1
- package/es/icons/IMessage/components/Inner.mjs.map +1 -1
- package/es/icons/IMessage/components/Mono.mjs.map +1 -1
- package/es/icons/Lark/components/Color.mjs.map +1 -1
- package/es/icons/Lark/components/Mono.mjs.map +1 -1
- package/es/icons/Line/components/Color.mjs.map +1 -1
- package/es/icons/Line/components/Mono.mjs.map +1 -1
- package/es/icons/Logto/components/Color.mjs.map +1 -1
- package/es/icons/Logto/components/Mono.mjs.map +1 -1
- package/es/icons/MicrosoftEntra/components/Color.mjs.map +1 -1
- package/es/icons/MicrosoftEntra/components/Mono.mjs.map +1 -1
- package/es/icons/MicrosoftTeams/components/Color.mjs.map +1 -1
- package/es/icons/MicrosoftTeams/components/Mono.mjs.map +1 -1
- package/es/icons/NextAuth/components/Color.mjs.map +1 -1
- package/es/icons/NextAuth/components/Mono.mjs.map +1 -1
- package/es/icons/QQ/components/Color.mjs.map +1 -1
- package/es/icons/QQ/components/Mono.mjs.map +1 -1
- package/es/icons/Slack/components/Color.mjs.map +1 -1
- package/es/icons/Slack/components/Mono.mjs.map +1 -1
- package/es/icons/Telegram/components/Color.mjs.map +1 -1
- package/es/icons/Telegram/components/Inner.mjs.map +1 -1
- package/es/icons/Telegram/components/Mono.mjs.map +1 -1
- package/es/icons/WeChat/components/Color.mjs.map +1 -1
- package/es/icons/WeChat/components/Mono.mjs.map +1 -1
- package/es/icons/WhatsApp/components/Color.mjs.map +1 -1
- package/es/icons/WhatsApp/components/Mono.mjs.map +1 -1
- package/es/icons/Zitadel/components/Color.mjs.map +1 -1
- package/es/icons/Zitadel/components/Mono.mjs.map +1 -1
- package/es/index.d.mts +2 -2
- package/es/index.mjs +2 -2
- package/es/mdx/Callout/index.mjs.map +1 -1
- package/es/mdx/Cards/Card.mjs.map +1 -1
- package/es/mdx/FileTree/File.mjs.map +1 -1
- package/es/mdx/FileTree/Folder.mjs.map +1 -1
- package/es/mdx/Mdx/index.mjs.map +1 -1
- package/es/mdx/Tabs/Tab.mjs.map +1 -1
- package/es/mdx/Tabs/index.mjs.map +1 -1
- package/es/mdx/mdxComponents/Citation/PopoverPanel.mjs.map +1 -1
- package/es/mdx/mdxComponents/Citation/index.mjs.map +1 -1
- package/es/mdx/mdxComponents/CodeBlock.mjs.map +1 -1
- package/es/mdx/mdxComponents/Link.mjs.map +1 -1
- package/es/mobile/ChatHeader/ChatHeader.mjs.map +1 -1
- package/es/mobile/ChatHeader/ChatHeaderTitle.mjs.map +1 -1
- package/es/mobile/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/es/storybook/StoryBook/index.mjs.map +1 -1
- package/package.json +3 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n confirmLoading?: boolean;\n okButtonProps?: ModalComponentProps['okButtonProps'];\n okText?: React.ReactNode;\n onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n const { onClick: userOnClick, ...restOk } = okButtonProps ?? {};\n return (\n <Button\n loading={confirmLoading}\n type=\"primary\"\n {...restOk}\n onClick={(e) => {\n onOk(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {okText}\n </Button>\n );\n};\ninterface CancelBtnProps {\n cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n cancelText?: React.ReactNode;\n onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n const { onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n return (\n <Button\n {...restCancel}\n onClick={(e) => {\n onCancel(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {cancelText}\n </Button>\n );\n};\n\nconst Modal = memo<ModalComponentProps>(\n ({\n open,\n title,\n children,\n onOk,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n footer,\n width,\n height,\n maskClosable = true,\n closable = true,\n closeIcon,\n className,\n style,\n classNames,\n styles: semanticStyles,\n zIndex,\n afterClose,\n afterOpenChange,\n loading,\n getContainer,\n mask = true,\n keyboard,\n draggable = true,\n allowFullscreen = false,\n }) => {\n const dragControls = useDragControls();\n const constraintsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isDenying, setIsDenying] = useState(false);\n const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n const triggerDeny = useCallback(() => {\n clearTimeout(denyTimerRef.current);\n setIsDenying(true);\n denyTimerRef.current = setTimeout(() => setIsDenying(false), 300);\n }, []);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails: { reason: string }) => {\n if (!open) return;\n if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n triggerDeny();\n return;\n }\n if (!nextOpen) {\n onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n }\n },\n [onCancel, keyboard, maskClosable, open, triggerDeny],\n );\n\n const handleExitComplete = useCallback(() => {\n setIsFullscreen(false);\n afterClose?.();\n afterOpenChange?.(false);\n }, [afterClose, afterOpenChange]);\n\n const handleAnimationComplete = useCallback(() => {\n if (open) afterOpenChange?.(true);\n }, [open, afterOpenChange]);\n\n const handleDragStart = useCallback(\n (e: PointerEvent) => {\n if (draggable && !isFullscreen) {\n dragControls.start(e);\n setIsDragging(true);\n }\n },\n [draggable, dragControls, isFullscreen],\n );\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleOk = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onOk?.(e);\n },\n [onOk],\n );\n\n const handleCancel = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onCancel?.(e);\n },\n [onCancel],\n );\n\n const footerNode = useMemo(() => {\n if (footer === false || footer === null) return null;\n const cancelBtnNode = (\n <CancelBtn\n cancelButtonProps={cancelButtonProps}\n cancelText={cancelText}\n onCancel={handleCancel}\n />\n );\n const okBtnNode = (\n <OkBtn\n confirmLoading={confirmLoading}\n okButtonProps={okButtonProps}\n okText={okText}\n onOk={handleOk}\n />\n );\n const defaultFooter = (\n <>\n {cancelBtnNode}\n {okBtnNode}\n </>\n );\n\n if (typeof footer === 'function') {\n const BoundCancelBtn: React.FC = () => cancelBtnNode;\n const BoundOkBtn: React.FC = () => okBtnNode;\n return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n }\n\n return footer ?? defaultFooter;\n }, [\n footer,\n cancelButtonProps,\n cancelText,\n handleCancel,\n confirmLoading,\n okButtonProps,\n okText,\n handleOk,\n ]);\n\n const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n const shouldDrag = draggable && !isFullscreen;\n const dragProps = shouldDrag\n ? {\n drag: true as const,\n dragConstraints: constraintsRef,\n dragControls,\n dragElastic: 0,\n dragListener: false,\n dragMomentum: false,\n whileDrag: { cursor: 'grabbing' as const },\n }\n : {};\n\n const showTitle = title !== undefined && title !== false && title !== null;\n const showHeader = showTitle || closable || allowFullscreen;\n\n const hasHeight = height !== undefined;\n const panelStyle: React.CSSProperties = {\n ...(hasHeight && !isFullscreen ? { height } : {}),\n ...style,\n };\n\n return (\n <ModalRoot\n open={open ?? false}\n zIndex={zIndex}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal container={container}>\n {mask && <ModalBackdrop className={classNames?.mask} style={semanticStyles?.mask} />}\n <ModalPopup\n className={classNames?.wrapper}\n popupStyle={semanticStyles?.wrapper}\n ref={constraintsRef}\n style={panelStyle}\n width={isFullscreen ? undefined : width}\n motionProps={{\n ...dragProps,\n onAnimationComplete: handleAnimationComplete,\n }}\n panelClassName={cx(\n className,\n isFullscreen && styles.fullscreenPopupInner,\n isDenying && styles.denyAnimation,\n )}\n >\n {showHeader && (\n <ModalHeader\n className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n style={{\n ...(isDragging ? { cursor: 'grabbing' } : {}),\n ...semanticStyles?.header,\n }}\n onPointerCancel={handleDragEnd}\n onPointerDown={handleDragStart}\n onPointerUp={handleDragEnd}\n >\n {showTitle ? (\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n ) : (\n <span />\n )}\n <div className={styles.headerActions} onPointerDown={stopPropagation}>\n {allowFullscreen && (\n <button\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n className={styles.fullscreenToggle}\n type=\"button\"\n onClick={() => setIsFullscreen((prev) => !prev)}\n >\n {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n </button>\n )}\n {closable && (\n <button\n aria-label=\"Close\"\n className={styles.closeInline}\n type=\"button\"\n onClick={handleCancel}\n >\n {closeIcon ?? <X size={16} />}\n </button>\n )}\n </div>\n </ModalHeader>\n )}\n <ModalContent\n className={classNames?.body}\n style={{\n ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n ...semanticStyles?.body,\n }}\n >\n {loading ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n padding: '32px 0',\n }}\n >\n <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n </div>\n ) : (\n children\n )}\n </ModalContent>\n {footerNode !== null && (\n <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n {footerNode}\n </ModalFooter>\n )}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.mjs","names":[],"sources":["../../../src/base-ui/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Maximize2, Minimize2, X } from 'lucide-react';\nimport { useDragControls } from 'motion/react';\nimport type { MouseEvent, PointerEvent } from 'react';\nimport type React from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { stopPropagation } from '@/utils/dom';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { styles } from './style';\nimport type { ModalComponentProps } from './type';\n\ninterface OkBtnProps {\n confirmLoading?: boolean;\n okButtonProps?: ModalComponentProps['okButtonProps'];\n okText?: React.ReactNode;\n onOk: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst OkBtn: React.FC<OkBtnProps> = ({ confirmLoading, okButtonProps, okText, onOk }) => {\n const { onClick: userOnClick, ...restOk } = okButtonProps ?? {};\n return (\n <Button\n loading={confirmLoading}\n type=\"primary\"\n {...restOk}\n onClick={(e) => {\n onOk(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {okText}\n </Button>\n );\n};\ninterface CancelBtnProps {\n cancelButtonProps?: ModalComponentProps['cancelButtonProps'];\n cancelText?: React.ReactNode;\n onCancel: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst CancelBtn: React.FC<CancelBtnProps> = ({ cancelButtonProps, cancelText, onCancel }) => {\n const { onClick: userOnClick, ...restCancel } = cancelButtonProps ?? {};\n return (\n <Button\n {...restCancel}\n onClick={(e) => {\n onCancel(e as MouseEvent<HTMLButtonElement>);\n userOnClick?.(e as never);\n }}\n >\n {cancelText}\n </Button>\n );\n};\n\nconst Modal = memo<ModalComponentProps>(\n ({\n open,\n title,\n children,\n onOk,\n onCancel,\n okText = 'OK',\n cancelText = 'Cancel',\n okButtonProps,\n cancelButtonProps,\n confirmLoading,\n footer,\n width,\n height,\n maskClosable = true,\n closable = true,\n closeIcon,\n className,\n style,\n classNames,\n styles: semanticStyles,\n zIndex,\n afterClose,\n afterOpenChange,\n loading,\n getContainer,\n mask = true,\n keyboard,\n draggable = true,\n allowFullscreen = false,\n }) => {\n const dragControls = useDragControls();\n const constraintsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [isDenying, setIsDenying] = useState(false);\n const denyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n useEffect(() => () => clearTimeout(denyTimerRef.current), []);\n\n const triggerDeny = useCallback(() => {\n clearTimeout(denyTimerRef.current);\n setIsDenying(true);\n denyTimerRef.current = setTimeout(() => setIsDenying(false), 300);\n }, []);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails: { reason: string }) => {\n if (!open) return;\n if (!nextOpen && keyboard === false && eventDetails.reason === 'escape-key') return;\n if (!nextOpen && !maskClosable && eventDetails.reason === 'outside-press') {\n triggerDeny();\n return;\n }\n if (!nextOpen) {\n onCancel?.(new MouseEvent('click') as unknown as MouseEvent<HTMLButtonElement>);\n }\n },\n [onCancel, keyboard, maskClosable, open, triggerDeny],\n );\n\n const handleExitComplete = useCallback(() => {\n setIsFullscreen(false);\n afterClose?.();\n afterOpenChange?.(false);\n }, [afterClose, afterOpenChange]);\n\n const handleAnimationComplete = useCallback(() => {\n if (open) afterOpenChange?.(true);\n }, [open, afterOpenChange]);\n\n const handleDragStart = useCallback(\n (e: PointerEvent) => {\n if (draggable && !isFullscreen) {\n dragControls.start(e);\n setIsDragging(true);\n }\n },\n [draggable, dragControls, isFullscreen],\n );\n\n const handleDragEnd = useCallback(() => {\n setIsDragging(false);\n }, []);\n\n const handleOk = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onOk?.(e);\n },\n [onOk],\n );\n\n const handleCancel = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n onCancel?.(e);\n },\n [onCancel],\n );\n\n const footerNode = useMemo(() => {\n if (footer === false || footer === null) return null;\n const cancelBtnNode = (\n <CancelBtn\n cancelButtonProps={cancelButtonProps}\n cancelText={cancelText}\n onCancel={handleCancel}\n />\n );\n const okBtnNode = (\n <OkBtn\n confirmLoading={confirmLoading}\n okButtonProps={okButtonProps}\n okText={okText}\n onOk={handleOk}\n />\n );\n const defaultFooter = (\n <>\n {cancelBtnNode}\n {okBtnNode}\n </>\n );\n\n if (typeof footer === 'function') {\n const BoundCancelBtn: React.FC = () => cancelBtnNode;\n const BoundOkBtn: React.FC = () => okBtnNode;\n return footer(defaultFooter, { CancelBtn: BoundCancelBtn, OkBtn: BoundOkBtn });\n }\n\n return footer ?? defaultFooter;\n }, [\n footer,\n cancelButtonProps,\n cancelText,\n handleCancel,\n confirmLoading,\n okButtonProps,\n okText,\n handleOk,\n ]);\n\n const container = getContainer === false ? undefined : (getContainer ?? undefined);\n\n const shouldDrag = draggable && !isFullscreen;\n const dragProps = shouldDrag\n ? {\n drag: true as const,\n dragConstraints: constraintsRef,\n dragControls,\n dragElastic: 0,\n dragListener: false,\n dragMomentum: false,\n whileDrag: { cursor: 'grabbing' as const },\n }\n : {};\n\n const showTitle = title !== undefined && title !== false && title !== null;\n const showHeader = showTitle || closable || allowFullscreen;\n\n const hasHeight = height !== undefined;\n const panelStyle: React.CSSProperties = {\n ...(hasHeight && !isFullscreen ? { height } : {}),\n ...style,\n };\n\n return (\n <ModalRoot\n open={open ?? false}\n zIndex={zIndex}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal container={container}>\n {mask && <ModalBackdrop className={classNames?.mask} style={semanticStyles?.mask} />}\n <ModalPopup\n className={classNames?.wrapper}\n popupStyle={semanticStyles?.wrapper}\n ref={constraintsRef}\n style={panelStyle}\n width={isFullscreen ? undefined : width}\n motionProps={{\n ...dragProps,\n onAnimationComplete: handleAnimationComplete,\n }}\n panelClassName={cx(\n className,\n isFullscreen && styles.fullscreenPopupInner,\n isDenying && styles.denyAnimation,\n )}\n >\n {showHeader && (\n <ModalHeader\n className={cx(classNames?.header, shouldDrag && styles.headerDraggable)}\n style={{\n ...(isDragging ? { cursor: 'grabbing' } : {}),\n ...semanticStyles?.header,\n }}\n onPointerCancel={handleDragEnd}\n onPointerDown={handleDragStart}\n onPointerUp={handleDragEnd}\n >\n {showTitle ? (\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n ) : (\n <span />\n )}\n <div className={styles.headerActions} onPointerDown={stopPropagation}>\n {allowFullscreen && (\n <button\n aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n className={styles.fullscreenToggle}\n type=\"button\"\n onClick={() => setIsFullscreen((prev) => !prev)}\n >\n {isFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}\n </button>\n )}\n {closable && (\n <button\n aria-label=\"Close\"\n className={styles.closeInline}\n type=\"button\"\n onClick={handleCancel}\n >\n {closeIcon ?? <X size={16} />}\n </button>\n )}\n </div>\n </ModalHeader>\n )}\n <ModalContent\n className={classNames?.body}\n style={{\n ...(hasHeight || isFullscreen ? { flex: 1 } : {}),\n ...semanticStyles?.body,\n }}\n >\n {loading ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n padding: '32px 0',\n }}\n >\n <span className={styles.loadingSpinner} style={{ height: 24, width: 24 }} />\n </div>\n ) : (\n children\n )}\n </ModalContent>\n {footerNode !== null && (\n <ModalFooter className={classNames?.footer} style={semanticStyles?.footer}>\n {footerNode}\n </ModalFooter>\n )}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n );\n },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n cloneElement,\n createContext,\n isValidElement,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n onExitComplete?: () => void;\n zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n open,\n children,\n onExitComplete: onExitCompleteProp,\n zIndex: explicitZIndex,\n ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n const [isPresent, setIsPresent] = useState(!!open);\n\n useEffect(() => {\n if (open) setIsPresent(true);\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsPresent(false);\n onExitCompleteProp?.();\n }, [onExitCompleteProp]);\n\n const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n\n if (!isPresent) return null;\n\n return (\n <ModalOpenContext value={open}>\n <ModalActionsContext value={actions}>\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal open {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n </ModalActionsContext>\n </ModalOpenContext>\n );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n return (\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n if (open !== undefined) {\n return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n }\n return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n const appElement = useAppElement();\n return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n <Dialog.Viewport\n {...rest}\n className={mergeStateClassName(styles.viewport, className as any) as any}\n />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n const open = useModalOpen();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n if (open !== null) {\n return (\n <Dialog.Backdrop\n {...rest}\n className={cx(styles.backdrop, className as string)}\n style={{ ...layerStyle, ...style, transition: 'none' }}\n render={\n <Motion.div\n animate={{ opacity: open ? 1 : 0 }}\n initial={{ opacity: 0 }}\n transition={backdropTransition}\n />\n }\n />\n );\n }\n\n return (\n <Dialog.Backdrop\n {...rest}\n className={mergeStateClassName(styles.backdrop, className as any) as any}\n style={{ ...layerStyle, ...style }}\n />\n );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n motionProps?: Record<string, any>;\n panelClassName?: string;\n popupStyle?: React.CSSProperties;\n width?: number | string;\n};\nexport const ModalPopup = ({\n className,\n children,\n width,\n style,\n motionProps,\n panelClassName,\n popupStyle,\n ref: forwardedRef,\n ...rest\n}: ModalPopupProps) => {\n const open = useModalOpen();\n const actions = useModalActions();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n if (open !== null && actions) {\n return (\n <Dialog.Popup\n {...rest}\n className={cx(styles.popup, className as string)}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <AnimatePresence onExitComplete={actions.onExitComplete}>\n {open ? (\n <Motion.div\n {...modalMotionConfig}\n {...motionProps}\n className={cx(styles.popupInner, panelClassName)}\n key=\"modal-popup-panel\"\n style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n >\n {children}\n </Motion.div>\n ) : null}\n </AnimatePresence>\n </Dialog.Popup>\n );\n }\n\n return (\n <Dialog.Popup\n {...rest}\n className={mergeStateClassName(styles.popup, className as any) as any}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <div\n className={cx(styles.popupInner, panelClassName)}\n style={{ maxWidth: width ?? undefined, ...style }}\n >\n {children}\n </div>\n </Dialog.Popup>\n );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n {children ?? <X size={16} />}\n </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n 'children' | 'render'\n> & {\n children?: React.ReactNode;\n nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: ModalTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n render={renderer as any}\n />\n );\n }\n\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Dialog.Trigger>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n cloneElement,\n createContext,\n isValidElement,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n onExitComplete?: () => void;\n zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n open,\n children,\n onExitComplete: onExitCompleteProp,\n zIndex: explicitZIndex,\n ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n const [isPresent, setIsPresent] = useState(!!open);\n\n useEffect(() => {\n if (open) setIsPresent(true);\n }, [open]);\n\n const handleExitComplete = useCallback(() => {\n setIsPresent(false);\n onExitCompleteProp?.();\n }, [onExitCompleteProp]);\n\n const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n\n if (!isPresent) return null;\n\n return (\n <ModalOpenContext value={open}>\n <ModalActionsContext value={actions}>\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal open {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n </ModalActionsContext>\n </ModalOpenContext>\n );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n const layer = useMemo(\n () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n [zIndex, popupRef],\n );\n return (\n <ModalLayerProvider value={layer}>\n <Dialog.Root modal {...rest}>\n {children}\n </Dialog.Root>\n </ModalLayerProvider>\n );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n if (open !== undefined) {\n return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n }\n return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n const appElement = useAppElement();\n return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n <Dialog.Viewport\n {...rest}\n className={mergeStateClassName(styles.viewport, className as any) as any}\n />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n const open = useModalOpen();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n if (open !== null) {\n return (\n <Dialog.Backdrop\n {...rest}\n className={cx(styles.backdrop, className as string)}\n style={{ ...layerStyle, ...style, transition: 'none' }}\n render={\n <Motion.div\n animate={{ opacity: open ? 1 : 0 }}\n initial={{ opacity: 0 }}\n transition={backdropTransition}\n />\n }\n />\n );\n }\n\n return (\n <Dialog.Backdrop\n {...rest}\n className={mergeStateClassName(styles.backdrop, className as any) as any}\n style={{ ...layerStyle, ...style }}\n />\n );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n motionProps?: Record<string, any>;\n panelClassName?: string;\n popupStyle?: React.CSSProperties;\n width?: number | string;\n};\nexport const ModalPopup = ({\n className,\n children,\n width,\n style,\n motionProps,\n panelClassName,\n popupStyle,\n ref: forwardedRef,\n ...rest\n}: ModalPopupProps) => {\n const open = useModalOpen();\n const actions = useModalActions();\n const layer = useModalLayer();\n const Motion = useMotionComponent();\n const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n if (open !== null && actions) {\n return (\n <Dialog.Popup\n {...rest}\n className={cx(styles.popup, className as string)}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <AnimatePresence onExitComplete={actions.onExitComplete}>\n {open ? (\n <Motion.div\n {...modalMotionConfig}\n {...motionProps}\n className={cx(styles.popupInner, panelClassName)}\n key=\"modal-popup-panel\"\n style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n >\n {children}\n </Motion.div>\n ) : null}\n </AnimatePresence>\n </Dialog.Popup>\n );\n }\n\n return (\n <Dialog.Popup\n {...rest}\n className={mergeStateClassName(styles.popup, className as any) as any}\n ref={composedRef as any}\n style={{ ...popupZIndexStyle, ...popupStyle }}\n >\n <div\n className={cx(styles.popupInner, panelClassName)}\n style={{ maxWidth: width ?? undefined, ...style }}\n >\n {children}\n </div>\n </Dialog.Popup>\n );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n {children ?? <X size={16} />}\n </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n 'children' | 'render'\n> & {\n children?: React.ReactNode;\n nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: ModalTriggerProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const renderer = (props: any) => {\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n return cloneElement(children as any, {\n ...mergedProps,\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n };\n\n if (isValidElement(children)) {\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n render={renderer as any}\n />\n );\n }\n\n return (\n <Dialog.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </Dialog.Trigger>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n id: string;\n props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n children,\n root,\n}: {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | null;\n}) => {\n const appElement = useAppElement();\n const container = root ?? appElement ?? document.body;\n return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n const { close } = useModalContext();\n const [loading, setLoading] = useState(false);\n\n const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n const handleCancel = useCallback(() => {\n close();\n onCancel?.();\n }, [close, onCancel]);\n\n const handleOk = useCallback(async () => {\n if (onOk) {\n try {\n const result = onOk();\n if (result && typeof (result as any).then === 'function') {\n setLoading(true);\n await result;\n setLoading(false);\n }\n } catch {\n setLoading(false);\n return;\n }\n }\n close();\n }, [close, onOk]);\n\n return (\n <>\n {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n <ModalFooter>\n <Button onClick={handleCancel}>{cancelText}</Button>\n <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n {okText}\n </Button>\n </ModalFooter>\n </>\n );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n createModal: (props: ImperativeModalProps) => ModalInstance;\n ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n const systemId = systemSeed++;\n const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n // --- Stack state (isolated per system) ---\n let modalStack: ModalStackEntry[] = [];\n let modalSeed = 0;\n const listeners = new Set<() => void>();\n\n const notify = () => listeners.forEach((l) => l());\n const subscribe = (l: () => void) => {\n listeners.add(l);\n return () => listeners.delete(l);\n };\n const EMPTY: ModalStackEntry[] = [];\n const getSnapshot = () => modalStack;\n const getServerSnapshot = () => EMPTY;\n\n // --- Stack operations ---\n\n const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n changed = true;\n return { ...item, props: { ...item.props, ...next } };\n });\n if (changed) notify();\n };\n\n const closeModal = (id: string) => {\n updateModal(id, { open: false });\n };\n\n const destroyModal = (id: string) => {\n const next = modalStack.filter((item) => item.id !== id);\n if (next.length === modalStack.length) return;\n modalStack = next;\n notify();\n };\n\n // --- Stack Item (captures operations via closure) ---\n\n const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n const { id, props } = entry;\n const {\n children,\n classNames,\n content,\n footer,\n maskClosable,\n onOpenChange,\n onOpenChangeComplete,\n open,\n styles: semanticStyles,\n title,\n width,\n } = props;\n\n const isOpen = open ?? true;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { reason: string }) => {\n if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n if (!nextOpen) closeModal(id);\n onOpenChange?.(nextOpen);\n },\n [id, maskClosable, onOpenChange],\n );\n\n const handleExitComplete = useCallback(() => {\n onOpenChangeComplete?.(false);\n destroyModal(id);\n }, [id, onOpenChangeComplete]);\n\n const close = useCallback(() => closeModal(id), [id]);\n const setCanDismissByClickOutside = useCallback(\n (value: boolean) => updateModal(id, { maskClosable: value }),\n [id],\n );\n\n const showTitle = title !== undefined && title !== false && title !== null;\n\n return (\n <ModalContext value={{ close, setCanDismissByClickOutside }}>\n <ModalRoot\n open={isOpen}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal>\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n <ModalPopup\n className={classNames?.popup}\n popupStyle={semanticStyles?.popup}\n width={width}\n >\n {showTitle && (\n <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n </ModalHeader>\n )}\n <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n {content ?? children}\n </ModalContent>\n {footer}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n </ModalContext>\n );\n });\n StackItem.displayName = 'ModalStackItem';\n\n const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n });\n StackRenderer.displayName = 'ModalStackRenderer';\n\n // --- ModalHost ---\n\n const Host = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n const scope = root ?? document.body;\n return registerDevSingleton(singletonName, scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortalWrapper root={root}>\n <StackRenderer stack={stack} />\n </ModalPortalWrapper>\n );\n };\n\n // --- createModal ---\n\n const create = (props: ImperativeModalProps): ModalInstance => {\n const id = `base-modal-${Date.now()}-${modalSeed++}`;\n modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n };\n\n // --- confirmModal ---\n\n const confirm = (config: ModalConfirmConfig) => {\n const instance = create({\n content: <ConfirmBody config={config} />,\n styles: { content: { padding: 0 } },\n title: config.title,\n width: 420,\n });\n\n return {\n close: instance.close,\n destroy: instance.destroy,\n };\n };\n\n return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n ModalBackdrop,\n ModalClose,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalPopup,\n ModalPortal,\n ModalRoot,\n ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n id: string;\n props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n children,\n root,\n}: {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | null;\n}) => {\n const appElement = useAppElement();\n const container = root ?? appElement ?? document.body;\n return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n const { close } = useModalContext();\n const [loading, setLoading] = useState(false);\n\n const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n const handleCancel = useCallback(() => {\n close();\n onCancel?.();\n }, [close, onCancel]);\n\n const handleOk = useCallback(async () => {\n if (onOk) {\n try {\n const result = onOk();\n if (result && typeof (result as any).then === 'function') {\n setLoading(true);\n await result;\n setLoading(false);\n }\n } catch {\n setLoading(false);\n return;\n }\n }\n close();\n }, [close, onOk]);\n\n return (\n <>\n {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n <ModalFooter>\n <Button onClick={handleCancel}>{cancelText}</Button>\n <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n {okText}\n </Button>\n </ModalFooter>\n </>\n );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n createModal: (props: ImperativeModalProps) => ModalInstance;\n ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n const systemId = systemSeed++;\n const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n // --- Stack state (isolated per system) ---\n let modalStack: ModalStackEntry[] = [];\n let modalSeed = 0;\n const listeners = new Set<() => void>();\n\n const notify = () => listeners.forEach((l) => l());\n const subscribe = (l: () => void) => {\n listeners.add(l);\n return () => listeners.delete(l);\n };\n const EMPTY: ModalStackEntry[] = [];\n const getSnapshot = () => modalStack;\n const getServerSnapshot = () => EMPTY;\n\n // --- Stack operations ---\n\n const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n let changed = false;\n modalStack = modalStack.map((item) => {\n if (item.id !== id) return item;\n changed = true;\n return { ...item, props: { ...item.props, ...next } };\n });\n if (changed) notify();\n };\n\n const closeModal = (id: string) => {\n updateModal(id, { open: false });\n };\n\n const destroyModal = (id: string) => {\n const next = modalStack.filter((item) => item.id !== id);\n if (next.length === modalStack.length) return;\n modalStack = next;\n notify();\n };\n\n // --- Stack Item (captures operations via closure) ---\n\n const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n const { id, props } = entry;\n const {\n children,\n classNames,\n content,\n footer,\n maskClosable,\n onOpenChange,\n onOpenChangeComplete,\n open,\n styles: semanticStyles,\n title,\n width,\n } = props;\n\n const isOpen = open ?? true;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { reason: string }) => {\n if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n if (!nextOpen) closeModal(id);\n onOpenChange?.(nextOpen);\n },\n [id, maskClosable, onOpenChange],\n );\n\n const handleExitComplete = useCallback(() => {\n onOpenChangeComplete?.(false);\n destroyModal(id);\n }, [id, onOpenChangeComplete]);\n\n const close = useCallback(() => closeModal(id), [id]);\n const setCanDismissByClickOutside = useCallback(\n (value: boolean) => updateModal(id, { maskClosable: value }),\n [id],\n );\n\n const showTitle = title !== undefined && title !== false && title !== null;\n\n return (\n <ModalContext value={{ close, setCanDismissByClickOutside }}>\n <ModalRoot\n open={isOpen}\n onExitComplete={handleExitComplete}\n onOpenChange={handleOpenChange}\n >\n <ModalPortal>\n <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n <ModalPopup\n className={classNames?.popup}\n popupStyle={semanticStyles?.popup}\n width={width}\n >\n {showTitle && (\n <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n {title}\n </ModalTitle>\n <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n </ModalHeader>\n )}\n <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n {content ?? children}\n </ModalContent>\n {footer}\n </ModalPopup>\n </ModalPortal>\n </ModalRoot>\n </ModalContext>\n );\n });\n StackItem.displayName = 'ModalStackItem';\n\n const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n const isClient = useIsClient();\n if (!isClient) return null;\n return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n });\n StackRenderer.displayName = 'ModalStackRenderer';\n\n // --- ModalHost ---\n\n const Host = ({ root }: ModalHostProps) => {\n const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n const isClient = useIsClient();\n\n useEffect(() => {\n if (!isClient) return;\n const scope = root ?? document.body;\n return registerDevSingleton(singletonName, scope);\n }, [isClient, root]);\n\n if (!isClient) return null;\n if (stack.length === 0) return null;\n\n return (\n <ModalPortalWrapper root={root}>\n <StackRenderer stack={stack} />\n </ModalPortalWrapper>\n );\n };\n\n // --- createModal ---\n\n const create = (props: ImperativeModalProps): ModalInstance => {\n const id = `base-modal-${Date.now()}-${modalSeed++}`;\n modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n notify();\n\n return {\n close: () => closeModal(id),\n destroy: () => destroyModal(id),\n setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n update: (nextProps) => updateModal(id, nextProps),\n };\n };\n\n // --- confirmModal ---\n\n const confirm = (config: ModalConfirmConfig) => {\n const instance = create({\n content: <ConfirmBody config={config} />,\n styles: { content: { padding: 0 } },\n title: config.title,\n width: 420,\n });\n\n return {\n close: instance.close,\n destroy: instance.destroy,\n };\n };\n\n return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArrowIcon.mjs","names":[],"sources":["../../../src/base-ui/Popover/ArrowIcon.tsx"],"sourcesContent":["'use client';\n\nexport const PopoverArrowIcon = (\n <svg aria-hidden=\"true\" height=\"6\" viewBox=\"0 0 12 6\" width=\"12\">\n <path d=\"M0 6L6 0L12 6Z\" data-role=\"fill\" />\n <path d=\"M0 6L6 0L12 6\" data-role=\"stroke\" />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,mBACX,qBAAC,OAAD;CAAK,eAAY;CAAO,QAAO;CAAI,SAAQ;CAAW,OAAM;
|
|
1
|
+
{"version":3,"file":"ArrowIcon.mjs","names":[],"sources":["../../../src/base-ui/Popover/ArrowIcon.tsx"],"sourcesContent":["'use client';\n\nexport const PopoverArrowIcon = (\n <svg aria-hidden=\"true\" height=\"6\" viewBox=\"0 0 12 6\" width=\"12\">\n <path d=\"M0 6L6 0L12 6Z\" data-role=\"fill\" />\n <path d=\"M0 6L6 0L12 6\" data-role=\"stroke\" />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,mBACX,qBAAC,OAAD;CAAK,eAAY;CAAO,QAAO;CAAI,SAAQ;CAAW,OAAM;CAA5D,UAAA,CACE,oBAAC,QAAD;EAAM,GAAE;EAAiB,aAAU;CAAQ,CAAA,GAC3C,oBAAC,QAAD;EAAM,GAAE;EAAgB,aAAU;CAAU,CAAA,CACzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverGroup.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { type FC, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n useDestroyOnInvalidActiveTriggerElement,\n useHidePopupWhenPositionerAtOrigin,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n PopoverArrow,\n PopoverPopup,\n PopoverPortal,\n PopoverPositioner,\n PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport {\n PopoverGroupHandleContext,\n type PopoverGroupItem,\n PopoverGroupPropsContext,\n type PopoverGroupSharedProps,\n} from './groupContext';\nimport { shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\nimport { usePopoverPortalContainer } from './PopoverPortal';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n children,\n contentLayoutAnimation = false,\n disableDestroyOnInvalidTrigger = false,\n disableZeroOriginGuard = false,\n ...sharedProps\n}) => {\n const [{ handle, key }, setHandleState] = useState(() => ({\n handle: BasePopover.createHandle<PopoverGroupItem>(),\n key: 0,\n }));\n const activeItemRef = useRef<PopoverGroupItem | null>(null);\n const destroy = useCallback(() => {\n activeItemRef.current = null;\n setHandleState(({ key }) => ({\n handle: BasePopover.createHandle<PopoverGroupItem>(),\n key: key + 1,\n }));\n }, []);\n const close = useCallback(() => {\n handle.close();\n }, [handle]);\n const contextValue = useMemo(() => ({ close }), [close]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { cancel?: () => void; reason?: string }) => {\n const item = activeItemRef.current;\n const { openOnClick } = parseTrigger(item?.trigger ?? 'hover');\n\n if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n eventDetails?.cancel?.();\n return;\n }\n\n item?.onOpenChange?.(nextOpen);\n },\n [],\n );\n\n useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {\n enabled: !disableDestroyOnInvalidTrigger,\n });\n useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });\n\n const portalContainer = usePopoverPortalContainer();\n\n return (\n <PopoverGroupHandleContext value={handle}>\n <PopoverGroupPropsContext value={sharedProps}>\n {children}\n <BasePopover.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n {({ payload }) => {\n const item = (payload as PopoverGroupItem | null) ?? null;\n activeItemRef.current = item;\n\n if (!item?.content) return null;\n\n const arrow = item.arrow ?? false;\n const placement = item.placement ?? 'top';\n const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const resolvedSideOffset = arrow ? 10 : 6;\n\n const resolvedClassNames = {\n arrow: item.classNames?.arrow,\n popup: item.className,\n positioner: item.classNames?.root,\n viewport: item.classNames?.content,\n };\n\n const resolvedStyles = {\n arrow: item.styles?.arrow,\n positioner: {\n ...item.styles?.root,\n ...(item.zIndex !== undefined ? { zIndex: item.zIndex } : {}),\n },\n viewport: item.styles?.content,\n };\n\n const contentNode = (\n <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>\n );\n\n const popup = (\n <PopoverPositioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n data-layout-animation={contentLayoutAnimation || undefined}\n hoverTrigger={openOnHover}\n placement={placement}\n side={placementConfig.side}\n sideOffset={resolvedSideOffset}\n style={resolvedStyles.positioner}\n {...item.positionerProps}\n >\n <PopoverPopup\n className={resolvedClassNames.popup}\n data-layout-animation={contentLayoutAnimation || undefined}\n {...item.popupProps}\n >\n {arrow && (\n <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {PopoverArrowIcon}\n </PopoverArrow>\n )}\n <PopoverViewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n {contentNode}\n </PopoverViewport>\n </PopoverPopup>\n </PopoverPositioner>\n );\n\n return portalContainer ? (\n <PopoverPortal container={portalContainer}>{popup}</PopoverPortal>\n ) : null;\n }}\n </BasePopover.Root>\n </PopoverGroupPropsContext>\n </PopoverGroupHandleContext>\n );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":";;;;;;;;;;;;;;AAkCA,MAAM,gBAAuC,EAC3C,UACA,yBAAyB,OACzB,iCAAiC,OACjC,yBAAyB,OACzB,GAAG,kBACC;CACJ,MAAM,CAAC,EAAE,QAAQ,OAAO,kBAAkB,gBAAgB;EACxD,QAAQA,QAAY,aAA+B;EACnD,KAAK;CACP,EAAE;CACF,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,UAAU,kBAAkB;EAChC,cAAc,UAAU;EACxB,gBAAgB,EAAE,WAAW;GAC3B,QAAQA,QAAY,aAA+B;GACnD,KAAK,MAAM;EACb,EAAE;CACJ,GAAG,CAAC,CAAC;CACL,MAAM,QAAQ,kBAAkB;EAC9B,OAAO,MAAM;CACf,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,eAAe,eAAe,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;CAEvD,MAAM,mBAAmB,aACtB,UAAmB,iBAA4D;EAC9E,MAAM,OAAO,cAAc;EAC3B,MAAM,EAAE,gBAAgB,aAAa,MAAM,WAAW,OAAO;EAE7D,IAAI,+BAA+B,aAAa,UAAU,cAAc,MAAM,GAAG;GAC/E,cAAc,SAAS;GACvB;EACF;EAEA,MAAM,eAAe,QAAQ;CAC/B,GACA,CAAC,CACH;CAEA,wCAAwC,OAAO,OAAO,SAAS,EAC7D,SAAS,CAAC,+BACZ,CAAC;CACD,mCAAmC,OAAO,OAAO,EAAE,SAAS,CAAC,uBAAuB,CAAC;CAErF,MAAM,kBAAkB,0BAA0B;CAElD,OACE,oBAAC,2BAAD;EAA2B,OAAO;
|
|
1
|
+
{"version":3,"file":"PopoverGroup.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { type FC, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n useDestroyOnInvalidActiveTriggerElement,\n useHidePopupWhenPositionerAtOrigin,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n PopoverArrow,\n PopoverPopup,\n PopoverPortal,\n PopoverPositioner,\n PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport {\n PopoverGroupHandleContext,\n type PopoverGroupItem,\n PopoverGroupPropsContext,\n type PopoverGroupSharedProps,\n} from './groupContext';\nimport { shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\nimport { usePopoverPortalContainer } from './PopoverPortal';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n children,\n contentLayoutAnimation = false,\n disableDestroyOnInvalidTrigger = false,\n disableZeroOriginGuard = false,\n ...sharedProps\n}) => {\n const [{ handle, key }, setHandleState] = useState(() => ({\n handle: BasePopover.createHandle<PopoverGroupItem>(),\n key: 0,\n }));\n const activeItemRef = useRef<PopoverGroupItem | null>(null);\n const destroy = useCallback(() => {\n activeItemRef.current = null;\n setHandleState(({ key }) => ({\n handle: BasePopover.createHandle<PopoverGroupItem>(),\n key: key + 1,\n }));\n }, []);\n const close = useCallback(() => {\n handle.close();\n }, [handle]);\n const contextValue = useMemo(() => ({ close }), [close]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { cancel?: () => void; reason?: string }) => {\n const item = activeItemRef.current;\n const { openOnClick } = parseTrigger(item?.trigger ?? 'hover');\n\n if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n eventDetails?.cancel?.();\n return;\n }\n\n item?.onOpenChange?.(nextOpen);\n },\n [],\n );\n\n useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {\n enabled: !disableDestroyOnInvalidTrigger,\n });\n useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });\n\n const portalContainer = usePopoverPortalContainer();\n\n return (\n <PopoverGroupHandleContext value={handle}>\n <PopoverGroupPropsContext value={sharedProps}>\n {children}\n <BasePopover.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n {({ payload }) => {\n const item = (payload as PopoverGroupItem | null) ?? null;\n activeItemRef.current = item;\n\n if (!item?.content) return null;\n\n const arrow = item.arrow ?? false;\n const placement = item.placement ?? 'top';\n const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const resolvedSideOffset = arrow ? 10 : 6;\n\n const resolvedClassNames = {\n arrow: item.classNames?.arrow,\n popup: item.className,\n positioner: item.classNames?.root,\n viewport: item.classNames?.content,\n };\n\n const resolvedStyles = {\n arrow: item.styles?.arrow,\n positioner: {\n ...item.styles?.root,\n ...(item.zIndex !== undefined ? { zIndex: item.zIndex } : {}),\n },\n viewport: item.styles?.content,\n };\n\n const contentNode = (\n <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>\n );\n\n const popup = (\n <PopoverPositioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n data-layout-animation={contentLayoutAnimation || undefined}\n hoverTrigger={openOnHover}\n placement={placement}\n side={placementConfig.side}\n sideOffset={resolvedSideOffset}\n style={resolvedStyles.positioner}\n {...item.positionerProps}\n >\n <PopoverPopup\n className={resolvedClassNames.popup}\n data-layout-animation={contentLayoutAnimation || undefined}\n {...item.popupProps}\n >\n {arrow && (\n <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {PopoverArrowIcon}\n </PopoverArrow>\n )}\n <PopoverViewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n {contentNode}\n </PopoverViewport>\n </PopoverPopup>\n </PopoverPositioner>\n );\n\n return portalContainer ? (\n <PopoverPortal container={portalContainer}>{popup}</PopoverPortal>\n ) : null;\n }}\n </BasePopover.Root>\n </PopoverGroupPropsContext>\n </PopoverGroupHandleContext>\n );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n PopoverArrow,\n PopoverPopup,\n PopoverPortal,\n PopoverPositioner,\n PopoverRoot,\n PopoverTriggerElement,\n PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport { shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { type PopoverProps } from './type';\n\n/**\n * Popover component - displays floating content relative to a trigger element\n * Compatible with Ant Design Popover API\n */\nexport const PopoverStandalone = memo<PopoverProps>(\n ({\n children,\n content,\n arrow = false,\n trigger = 'hover',\n placement = 'top',\n styles: styleProps,\n classNames,\n className,\n open,\n onOpenChange,\n defaultOpen = false,\n mouseEnterDelay = 0.1,\n mouseLeaveDelay = 0.1,\n openDelay,\n closeDelay,\n getPopupContainer,\n disabled = false,\n zIndex,\n nativeButton,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n backdropProps,\n portalProps,\n }) => {\n const isClient = useIsClient();\n const popoverHandle = useMemo(() => BasePopover.createHandle(), []);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const close = useCallback(() => {\n popoverHandle.close();\n }, [popoverHandle]);\n const contextValue = useMemo(() => ({ close }), [close]);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n // Parse trigger mode\n const { openOnClick, openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { cancel?: () => void; reason?: string }) => {\n if (disabled && nextOpen) return;\n\n if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n eventDetails?.cancel?.();\n return;\n }\n\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open, disabled, openOnClick],\n );\n\n // Calculate delays (milliseconds take precedence over seconds)\n const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1000;\n const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1000;\n\n // Get placement configuration\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const resolvedSideOffset = arrow ? 10 : 6;\n\n // Determine portal container\n const portalContainer = usePopoverPortalContainer();\n\n const { resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const resolvedClassNames = useMemo(\n () => ({\n arrow: classNames?.arrow,\n popup: className,\n positioner: classNames?.root,\n trigger: classNames?.trigger,\n viewport: classNames?.content,\n }),\n [className, classNames?.arrow, classNames?.content, classNames?.root, classNames?.trigger],\n );\n\n // Render trigger element\n const triggerElement = useMemo(() => {\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n openOnHover: openOnHover && !disabled,\n ...triggerProps,\n };\n\n return (\n <PopoverTriggerElement\n handle={popoverHandle}\n {...baseTriggerProps}\n className={resolvedClassNames.trigger}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </PopoverTriggerElement>\n );\n }, [\n children,\n disabled,\n openOnHover,\n popoverHandle,\n refProp,\n resolvedClassNames.trigger,\n resolvedNativeButton,\n resolvedOpenDelay,\n resolvedCloseDelay,\n triggerProps,\n ]);\n\n // Custom container from getPopupContainer\n const customContainer = useMemo(() => {\n if (!getPopupContainer || !isClient) return undefined;\n // We need a reference element, but we don't have it until render\n // This will be handled by the portal container logic\n return undefined;\n }, [getPopupContainer, isClient]);\n\n const resolvedStyles = useMemo(\n () => ({\n arrow: styleProps?.arrow,\n positioner: {\n ...styleProps?.root,\n ...(zIndex !== undefined ? { zIndex } : {}),\n },\n viewport: styleProps?.content,\n }),\n [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n );\n\n const popup = useMemo(\n () => (\n <PopoverPositioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n hoverTrigger={openOnHover}\n placement={placement}\n side={placementConfig.side}\n sideOffset={resolvedSideOffset}\n style={resolvedStyles.positioner}\n {...positionerProps}\n >\n <PopoverPopup className={resolvedClassNames.popup} {...popupProps}>\n {arrow && (\n <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {PopoverArrowIcon}\n </PopoverArrow>\n )}\n <PopoverViewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n <PopoverProvider value={contextValue}>{content}</PopoverProvider>\n </PopoverViewport>\n </PopoverPopup>\n </PopoverPositioner>\n ),\n [\n arrow,\n content,\n contextValue,\n openOnHover,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n resolvedClassNames,\n resolvedSideOffset,\n resolvedStyles,\n ],\n );\n\n // Don't render popup if no content\n if (!content) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <PopoverRoot\n defaultOpen={defaultOpen}\n handle={popoverHandle}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {backdropProps && <BasePopover.Backdrop {...backdropProps} />}\n {resolvedPortalContainer ? (\n <PopoverPortal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </PopoverPortal>\n ) : null}\n </PopoverRoot>\n );\n },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAa,oBAAoB,MAC9B,EACC,UACA,SACA,QAAQ,OACR,UAAU,SACV,YAAY,OACZ,QAAQ,YACR,YACA,WACA,MACA,cACA,cAAc,OACd,kBAAkB,IAClB,kBAAkB,IAClB,WACA,YACA,mBACA,WAAW,OACX,QACA,cACA,KAAK,SACL,iBACA,cACA,YACA,eACA,kBACI;CACJ,MAAM,WAAW,YAAY;CAC7B,MAAM,gBAAgB,cAAcA,QAAY,aAAa,GAAG,CAAC,CAAC;CAClE,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,WAAW,CAAC;CAC7E,MAAM,QAAQ,kBAAkB;EAC9B,cAAc,MAAM;CACtB,GAAG,CAAC,aAAa,CAAC;CAClB,MAAM,eAAe,eAAe,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;CAGvD,MAAM,eAAe,WAAW,QADb,QAAQ;CAI3B,MAAM,EAAE,aAAa,gBAAgB,cAAc,aAAa,OAAO,GAAG,CAAC,OAAO,CAAC;CAEnF,MAAM,mBAAmB,aACtB,UAAmB,iBAA4D;EAC9E,IAAI,YAAY,UAAU;EAE1B,IAAI,+BAA+B,aAAa,UAAU,cAAc,MAAM,GAAG;GAC/E,cAAc,SAAS;GACvB;EACF;EAEA,eAAe,QAAQ;EACvB,IAAI,SAAS,KAAA,GACX,oBAAoB,QAAQ;CAEhC,GACA;EAAC;EAAc;EAAM;EAAU;CAAW,CAC5C;CAGA,MAAM,oBAAoB,aAAa,kBAAkB;CACzD,MAAM,qBAAqB,cAAc,kBAAkB;CAG3D,MAAM,kBAAkB,aAAa,cAAc,aAAa;CAChE,MAAM,qBAAqB,QAAQ,KAAK;CAGxC,MAAM,kBAAkB,0BAA0B;CAElD,MAAM,EAAE,yBAAyB,gBAAgB;EAC/C;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,eAClB;EACL,OAAO,YAAY;EACnB,OAAO;EACP,YAAY,YAAY;EACxB,SAAS,YAAY;EACrB,UAAU,YAAY;CACxB,IACA;EAAC;EAAW,YAAY;EAAO,YAAY;EAAS,YAAY;EAAM,YAAY;CAAO,CAC3F;CAGA,MAAM,iBAAiB,cAAc;EACnC,MAAM,mBAAmB;GACvB,YAAY;GACZ,OAAO;GACP;GACA,aAAa,eAAe,CAAC;GAC7B,GAAG;EACL;EAEA,OACE,oBAAC,uBAAD;GACE,QAAQ;GACR,GAAI;GACJ,WAAW,mBAAmB;GAC9B,cAAc;GACd,KAAK;GAEJ;EACoB,CAAA;CAE3B,GAAG;EACD;EACA;EACA;EACA;EACA;EACA,mBAAmB;EACnB;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,qBAAqB,CAAC,UAAU,OAAO,KAAA;CAI9C,GAAG,CAAC,mBAAmB,QAAQ,CAAC;CAEhC,MAAM,iBAAiB,eACd;EACL,OAAO,YAAY;EACnB,YAAY;GACV,GAAG,YAAY;GACf,GAAI,WAAW,KAAA,IAAY,EAAE,OAAO,IAAI,CAAC;EAC3C;EACA,UAAU,YAAY;CACxB,IACA;EAAC,YAAY;EAAO,YAAY;EAAS,YAAY;EAAM;CAAM,CACnE;CAEA,MAAM,QAAQ,cAEV,oBAAC,mBAAD;EACE,OAAO,gBAAgB;EACvB,WAAW,mBAAmB;EAC9B,cAAc;EACH;EACX,MAAM,gBAAgB;EACtB,YAAY;EACZ,OAAO,eAAe;EACtB,GAAI;
|
|
1
|
+
{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n PopoverArrow,\n PopoverPopup,\n PopoverPortal,\n PopoverPositioner,\n PopoverRoot,\n PopoverTriggerElement,\n PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport { shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { type PopoverProps } from './type';\n\n/**\n * Popover component - displays floating content relative to a trigger element\n * Compatible with Ant Design Popover API\n */\nexport const PopoverStandalone = memo<PopoverProps>(\n ({\n children,\n content,\n arrow = false,\n trigger = 'hover',\n placement = 'top',\n styles: styleProps,\n classNames,\n className,\n open,\n onOpenChange,\n defaultOpen = false,\n mouseEnterDelay = 0.1,\n mouseLeaveDelay = 0.1,\n openDelay,\n closeDelay,\n getPopupContainer,\n disabled = false,\n zIndex,\n nativeButton,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n backdropProps,\n portalProps,\n }) => {\n const isClient = useIsClient();\n const popoverHandle = useMemo(() => BasePopover.createHandle(), []);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const close = useCallback(() => {\n popoverHandle.close();\n }, [popoverHandle]);\n const contextValue = useMemo(() => ({ close }), [close]);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n // Parse trigger mode\n const { openOnClick, openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { cancel?: () => void; reason?: string }) => {\n if (disabled && nextOpen) return;\n\n if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n eventDetails?.cancel?.();\n return;\n }\n\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open, disabled, openOnClick],\n );\n\n // Calculate delays (milliseconds take precedence over seconds)\n const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1000;\n const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1000;\n\n // Get placement configuration\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const resolvedSideOffset = arrow ? 10 : 6;\n\n // Determine portal container\n const portalContainer = usePopoverPortalContainer();\n\n const { resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const resolvedClassNames = useMemo(\n () => ({\n arrow: classNames?.arrow,\n popup: className,\n positioner: classNames?.root,\n trigger: classNames?.trigger,\n viewport: classNames?.content,\n }),\n [className, classNames?.arrow, classNames?.content, classNames?.root, classNames?.trigger],\n );\n\n // Render trigger element\n const triggerElement = useMemo(() => {\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n openOnHover: openOnHover && !disabled,\n ...triggerProps,\n };\n\n return (\n <PopoverTriggerElement\n handle={popoverHandle}\n {...baseTriggerProps}\n className={resolvedClassNames.trigger}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </PopoverTriggerElement>\n );\n }, [\n children,\n disabled,\n openOnHover,\n popoverHandle,\n refProp,\n resolvedClassNames.trigger,\n resolvedNativeButton,\n resolvedOpenDelay,\n resolvedCloseDelay,\n triggerProps,\n ]);\n\n // Custom container from getPopupContainer\n const customContainer = useMemo(() => {\n if (!getPopupContainer || !isClient) return undefined;\n // We need a reference element, but we don't have it until render\n // This will be handled by the portal container logic\n return undefined;\n }, [getPopupContainer, isClient]);\n\n const resolvedStyles = useMemo(\n () => ({\n arrow: styleProps?.arrow,\n positioner: {\n ...styleProps?.root,\n ...(zIndex !== undefined ? { zIndex } : {}),\n },\n viewport: styleProps?.content,\n }),\n [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n );\n\n const popup = useMemo(\n () => (\n <PopoverPositioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n hoverTrigger={openOnHover}\n placement={placement}\n side={placementConfig.side}\n sideOffset={resolvedSideOffset}\n style={resolvedStyles.positioner}\n {...positionerProps}\n >\n <PopoverPopup className={resolvedClassNames.popup} {...popupProps}>\n {arrow && (\n <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {PopoverArrowIcon}\n </PopoverArrow>\n )}\n <PopoverViewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n <PopoverProvider value={contextValue}>{content}</PopoverProvider>\n </PopoverViewport>\n </PopoverPopup>\n </PopoverPositioner>\n ),\n [\n arrow,\n content,\n contextValue,\n openOnHover,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n resolvedClassNames,\n resolvedSideOffset,\n resolvedStyles,\n ],\n );\n\n // Don't render popup if no content\n if (!content) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <PopoverRoot\n defaultOpen={defaultOpen}\n handle={popoverHandle}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {backdropProps && <BasePopover.Backdrop {...backdropProps} />}\n {resolvedPortalContainer ? (\n <PopoverPortal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </PopoverPortal>\n ) : null}\n </PopoverRoot>\n );\n },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { cx } from 'antd-style';\nimport {\n cloneElement,\n type ComponentProps,\n type ComponentPropsWithRef,\n isValidElement,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n ComponentPropsWithRef<typeof BasePopover.Trigger>,\n 'children' | 'render'\n> & {\n children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: PopoverTriggerElementProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n if (isValidElement(children)) {\n return (\n <BasePopover.Trigger\n {...rest}\n nativeButton={resolvedNativeButton}\n render={(props, state) => {\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\n const { type, ref: triggerRef, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n const baseClassName =\n typeof (mergedProps as any).className === 'function'\n ? (mergedProps as any).className(state)\n : (mergedProps as any).className;\n const extraClassName =\n typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n return cloneElement(children as any, {\n ...mergedProps,\n className: cx(baseClassName, extraClassName),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n }}\n />\n );\n }\n\n return (\n <BasePopover.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp}\n >\n {children}\n </BasePopover.Trigger>\n );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n ComponentProps<typeof BasePopover.Portal>,\n 'container'\n> & {\n /**\n * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n */\n container?: HTMLElement | null;\n /**\n * Root element used by `usePopoverPortalContainer` to create the default container.\n */\n root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n const defaultContainer = usePopoverPortalContainer(root);\n const resolvedContainer = container ?? defaultContainer;\n\n if (!resolvedContainer) return null;\n\n return (\n <BasePopover.Portal container={resolvedContainer} {...rest}>\n {children}\n </BasePopover.Portal>\n );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n hoverTrigger?: boolean;\n placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n children,\n className,\n hoverTrigger,\n placement,\n align,\n side,\n sideOffset,\n style,\n ...rest\n}: PopoverPositionerAtomProps) => {\n const placementConfig = placement ? placementMap[placement] : undefined;\n const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <BasePopover.Positioner\n align={align ?? placementConfig?.align ?? 'center'}\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n ref={composedRef as any}\n side={side ?? placementConfig?.side ?? 'bottom'}\n sideOffset={sideOffset ?? 6}\n style={resolvedStyle}\n className={(state) =>\n cx(styles.positioner, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n >\n <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n </BasePopover.Positioner>\n );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = ({ className, ...rest }: PopoverPopupAtomProps) => {\n return (\n <BasePopover.Popup\n className={(state) =>\n cx(styles.popup, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n />\n );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n return (\n <BasePopover.Arrow\n className={(state) =>\n cx(styles.arrow, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n >\n {children ?? PopoverArrowIcon}\n </BasePopover.Arrow>\n );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n return (\n <BasePopover.Viewport\n className={(state) =>\n cx(styles.viewport, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n />\n );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAa,cAAcA,QAAY;AACvC,MAAa,kBAAkBA,QAAY;AAS3C,MAAa,yBAAyB,EACpC,UACA,WACA,cACA,KAAK,SACL,GAAG,WAC6B;CAChC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;CACF,CAAC;CAED,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACJ,cAAc;EACd,SAAS,OAAO,UAAU;GAGxB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,MAAM,gBACJ,OAAQ,YAAoB,cAAc,aACrC,YAAoB,UAAU,KAAK,IACnC,YAAoB;GAC3B,MAAM,iBACJ,OAAQ,cAAsB,aAAc,UAAkB,KAAK,IAAI;GAEzE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,GAAG,eAAe,cAAc;IAC3C,KAAK,UAAU;KAAE,SAAiB;KAAM,MAAc;KAAK;IAAO,CAAC;GACrE,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACO;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,sBAAsB,cAAc;AAgBpC,MAAa,iBAAiB,EAAE,WAAW,MAAM,UAAU,GAAG,WAAmC;CAC/F,MAAM,mBAAmB,0BAA0B,IAAI;CACvD,MAAM,oBAAoB,aAAa;CAEvC,IAAI,CAAC,mBAAmB,OAAO;CAE/B,OACE,oBAACA,QAAY,QAAb;EAAoB,WAAW;EAAmB,GAAI;EACnD;CACiB,CAAA;AAExB;AAEA,cAAc,cAAc;AAO5B,MAAa,qBAAqB,EAChC,UACA,WACA,cACA,WACA,OACA,MACA,YACA,OACA,GAAG,WAC6B;CAChC,MAAM,kBAAkB,YAAY,aAAa,aAAa,KAAA;CAC9D,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC,IAAI;CAKhF,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,YAH3D,OAAO,UAAU,cAAc,OAAO,UAAU,QAAQ,OAAO,MAAM,WAAW,WAC5E,MAAM,SACN,KAAA,CACiF;CACvF,MAAM,cAAc,aAAa,CAAC,mBAAmB,IAAI,CAAC;CAE1D,MAAM,gBACJ,OAAO,UAAU,cACZ,WAAgB;EAAE;EAAQ,GAAG,MAAM,KAAK;CAAE,KAC3C;EAAE;EAAQ,GAAG;CAAM;CAEzB,OACE,oBAACA,QAAY,YAAb;EACE,OAAO,SAAS,iBAAiB,SAAS;EAC1C,sBAAoB,gBAAgB,KAAA;EACpC,kBAAgB;EAChB,KAAK;EACL,MAAM,QAAQ,iBAAiB,QAAQ;EACvC,YAAY,cAAc;EAC1B,OAAO;EACP,YAAY,UACV,GAAG,OAAO,YAAY,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;EAEtF,GAAI;
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { cx } from 'antd-style';\nimport {\n cloneElement,\n type ComponentProps,\n type ComponentPropsWithRef,\n isValidElement,\n useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n ComponentPropsWithRef<typeof BasePopover.Trigger>,\n 'children' | 'render'\n> & {\n children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n children,\n className,\n nativeButton,\n ref: refProp,\n ...rest\n}: PopoverTriggerElementProps) => {\n const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n if (isValidElement(children)) {\n return (\n <BasePopover.Trigger\n {...rest}\n nativeButton={resolvedNativeButton}\n render={(props, state) => {\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\n const { type, ref: triggerRef, ...restProps } = props as any;\n return restProps;\n })();\n\n const mergedProps = mergeProps((children as any).props, resolvedProps);\n const baseClassName =\n typeof (mergedProps as any).className === 'function'\n ? (mergedProps as any).className(state)\n : (mergedProps as any).className;\n const extraClassName =\n typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n return cloneElement(children as any, {\n ...mergedProps,\n className: cx(baseClassName, extraClassName),\n ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n });\n }}\n />\n );\n }\n\n return (\n <BasePopover.Trigger\n {...rest}\n className={className}\n nativeButton={resolvedNativeButton}\n ref={refProp}\n >\n {children}\n </BasePopover.Trigger>\n );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n ComponentProps<typeof BasePopover.Portal>,\n 'container'\n> & {\n /**\n * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n */\n container?: HTMLElement | null;\n /**\n * Root element used by `usePopoverPortalContainer` to create the default container.\n */\n root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n const defaultContainer = usePopoverPortalContainer(root);\n const resolvedContainer = container ?? defaultContainer;\n\n if (!resolvedContainer) return null;\n\n return (\n <BasePopover.Portal container={resolvedContainer} {...rest}>\n {children}\n </BasePopover.Portal>\n );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n hoverTrigger?: boolean;\n placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n children,\n className,\n hoverTrigger,\n placement,\n align,\n side,\n sideOffset,\n style,\n ...rest\n}: PopoverPositionerAtomProps) => {\n const placementConfig = placement ? placementMap[placement] : undefined;\n const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <BasePopover.Positioner\n align={align ?? placementConfig?.align ?? 'center'}\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n ref={composedRef as any}\n side={side ?? placementConfig?.side ?? 'bottom'}\n sideOffset={sideOffset ?? 6}\n style={resolvedStyle}\n className={(state) =>\n cx(styles.positioner, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n >\n <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n </BasePopover.Positioner>\n );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = ({ className, ...rest }: PopoverPopupAtomProps) => {\n return (\n <BasePopover.Popup\n className={(state) =>\n cx(styles.popup, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n />\n );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n return (\n <BasePopover.Arrow\n className={(state) =>\n cx(styles.arrow, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n >\n {children ?? PopoverArrowIcon}\n </BasePopover.Arrow>\n );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n return (\n <BasePopover.Viewport\n className={(state) =>\n cx(styles.viewport, typeof className === 'function' ? className(state) : className)\n }\n {...rest}\n />\n );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.mjs","names":["Radio","BaseRadio"],"sources":["../../../src/base-ui/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { RadioProps } from './type';\n\nconst Radio = memo<RadioProps>(\n ({\n size = 16,\n backgroundColor,\n children,\n className,\n classNames,\n styles: customStyles,\n style,\n textProps,\n disabled,\n ...rest\n }) => {\n const dotStyle: CSSProperties = {\n height: size,\n width: size,\n ...(backgroundColor ? { '--lobe-radio-bg': backgroundColor } : {}),\n ...(children ? {} : style),\n ...customStyles?.radio,\n };\n\n const dot = (\n <BaseRadio.Root\n className={cx(styles.root, children ? classNames?.radio : className, classNames?.radio)}\n disabled={disabled}\n style={dotStyle}\n {...rest}\n >\n <BaseRadio.Indicator\n className={styles.indicator}\n style={{ height: Math.round(size * 0.375), width: Math.round(size * 0.375) }}\n />\n </BaseRadio.Root>\n );\n\n if (!children) return dot;\n\n return (\n <label\n className={cx(styles.label, className, classNames?.wrapper)}\n style={{ gap: Math.floor(size / 2), ...style, ...customStyles?.wrapper }}\n >\n {dot}\n <Text\n as={'span'}\n className={classNames?.text}\n style={customStyles?.text}\n {...textProps}\n type={disabled ? 'secondary' : textProps?.type}\n >\n {children}\n </Text>\n </label>\n );\n },\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;AAWA,MAAMA,UAAQ,MACX,EACC,OAAO,IACP,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EAAE,mBAAmB,gBAAgB,IAAI,CAAC;EAChE,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CAEA,MAAM,MACJ,oBAACC,MAAU,MAAX;EACE,WAAW,GAAG,OAAO,MAAM,WAAW,YAAY,QAAQ,WAAW,YAAY,KAAK;EAC5E;EACV,OAAO;EACP,GAAI;
|
|
1
|
+
{"version":3,"file":"Radio.mjs","names":["Radio","BaseRadio"],"sources":["../../../src/base-ui/Radio/Radio.tsx"],"sourcesContent":["'use client';\n\nimport { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { RadioProps } from './type';\n\nconst Radio = memo<RadioProps>(\n ({\n size = 16,\n backgroundColor,\n children,\n className,\n classNames,\n styles: customStyles,\n style,\n textProps,\n disabled,\n ...rest\n }) => {\n const dotStyle: CSSProperties = {\n height: size,\n width: size,\n ...(backgroundColor ? { '--lobe-radio-bg': backgroundColor } : {}),\n ...(children ? {} : style),\n ...customStyles?.radio,\n };\n\n const dot = (\n <BaseRadio.Root\n className={cx(styles.root, children ? classNames?.radio : className, classNames?.radio)}\n disabled={disabled}\n style={dotStyle}\n {...rest}\n >\n <BaseRadio.Indicator\n className={styles.indicator}\n style={{ height: Math.round(size * 0.375), width: Math.round(size * 0.375) }}\n />\n </BaseRadio.Root>\n );\n\n if (!children) return dot;\n\n return (\n <label\n className={cx(styles.label, className, classNames?.wrapper)}\n style={{ gap: Math.floor(size / 2), ...style, ...customStyles?.wrapper }}\n >\n {dot}\n <Text\n as={'span'}\n className={classNames?.text}\n style={customStyles?.text}\n {...textProps}\n type={disabled ? 'secondary' : textProps?.type}\n >\n {children}\n </Text>\n </label>\n );\n },\n);\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"mappings":";;;;;;;;AAWA,MAAMA,UAAQ,MACX,EACC,OAAO,IACP,iBACA,UACA,WACA,YACA,QAAQ,cACR,OACA,WACA,UACA,GAAG,WACC;CACJ,MAAM,WAA0B;EAC9B,QAAQ;EACR,OAAO;EACP,GAAI,kBAAkB,EAAE,mBAAmB,gBAAgB,IAAI,CAAC;EAChE,GAAI,WAAW,CAAC,IAAI;EACpB,GAAG,cAAc;CACnB;CAEA,MAAM,MACJ,oBAACC,MAAU,MAAX;EACE,WAAW,GAAG,OAAO,MAAM,WAAW,YAAY,QAAQ,WAAW,YAAY,KAAK;EAC5E;EACV,OAAO;EACP,GAAI;EAEJ,UAAA,oBAACA,MAAU,WAAX;GACE,WAAW,OAAO;GAClB,OAAO;IAAE,QAAQ,KAAK,MAAM,OAAO,IAAK;IAAG,OAAO,KAAK,MAAM,OAAO,IAAK;GAAE;EAC5E,CAAA;CACa,CAAA;CAGlB,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,SAAD;EACE,WAAW,GAAG,OAAO,OAAO,WAAW,YAAY,OAAO;EAC1D,OAAO;GAAE,KAAK,KAAK,MAAM,OAAO,CAAC;GAAG,GAAG;GAAO,GAAG,cAAc;EAAQ;EAFzE,UAAA,CAIG,KACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,YAAY;GACvB,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;EACG,CAAA,CACD;;AAEX,CACF;AAEA,QAAM,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.mjs","names":["RadioGroup","BaseRadioGroup"],"sources":["../../../src/base-ui/Radio/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { memo, useMemo } from 'react';\n\nimport Radio from './Radio';\nimport type { RadioGroupOption, RadioGroupProps } from './type';\n\nconst RadioGroup = memo<RadioGroupProps>(\n ({ options, onChange, gap = 12, horizontal = true, size, textProps, style, ...rest }) => {\n const items = useMemo<RadioGroupOption[]>(\n () =>\n options.map((option) =>\n typeof option === 'string' ? { label: option, value: option } : option,\n ),\n [options],\n );\n\n return (\n <BaseRadioGroup\n style={{\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n flexWrap: 'wrap',\n gap,\n ...style,\n }}\n onValueChange={onChange}\n {...rest}\n >\n {items.map((item) => (\n <Radio\n disabled={item.disabled}\n key={item.value}\n size={size}\n textProps={textProps}\n value={item.value}\n >\n {item.label}\n </Radio>\n ))}\n </BaseRadioGroup>\n );\n },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"mappings":";;;;;;AAQA,MAAMA,eAAa,MAChB,EAAE,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,MAAM,WAAW,OAAO,GAAG,WAAW;CACvF,MAAM,QAAQ,cAEV,QAAQ,KAAK,WACX,OAAO,WAAW,WAAW;EAAE,OAAO;EAAQ,OAAO;CAAO,IAAI,MAClE,GACF,CAAC,OAAO,CACV;CAEA,OACE,oBAACC,YAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe,aAAa,QAAQ;GACpC,UAAU;GACV;GACA,GAAG;EACL;EACA,eAAe;EACf,GAAI;
|
|
1
|
+
{"version":3,"file":"RadioGroup.mjs","names":["RadioGroup","BaseRadioGroup"],"sources":["../../../src/base-ui/Radio/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport { memo, useMemo } from 'react';\n\nimport Radio from './Radio';\nimport type { RadioGroupOption, RadioGroupProps } from './type';\n\nconst RadioGroup = memo<RadioGroupProps>(\n ({ options, onChange, gap = 12, horizontal = true, size, textProps, style, ...rest }) => {\n const items = useMemo<RadioGroupOption[]>(\n () =>\n options.map((option) =>\n typeof option === 'string' ? { label: option, value: option } : option,\n ),\n [options],\n );\n\n return (\n <BaseRadioGroup\n style={{\n display: 'flex',\n flexDirection: horizontal ? 'row' : 'column',\n flexWrap: 'wrap',\n gap,\n ...style,\n }}\n onValueChange={onChange}\n {...rest}\n >\n {items.map((item) => (\n <Radio\n disabled={item.disabled}\n key={item.value}\n size={size}\n textProps={textProps}\n value={item.value}\n >\n {item.label}\n </Radio>\n ))}\n </BaseRadioGroup>\n );\n },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"mappings":";;;;;;AAQA,MAAMA,eAAa,MAChB,EAAE,SAAS,UAAU,MAAM,IAAI,aAAa,MAAM,MAAM,WAAW,OAAO,GAAG,WAAW;CACvF,MAAM,QAAQ,cAEV,QAAQ,KAAK,WACX,OAAO,WAAW,WAAW;EAAE,OAAO;EAAQ,OAAO;CAAO,IAAI,MAClE,GACF,CAAC,OAAO,CACV;CAEA,OACE,oBAACC,YAAD;EACE,OAAO;GACL,SAAS;GACT,eAAe,aAAa,QAAQ;GACpC,UAAU;GACV;GACA,GAAG;EACL;EACA,eAAe;EACf,GAAI;EAEH,UAAA,MAAM,KAAK,SACV,oBAAC,OAAD;GACE,UAAU,KAAK;GAET;GACK;GACX,OAAO,KAAK;GAEX,UAAA,KAAK;EACD,GANA,KAAK,KAML,CACR;CACa,CAAA;AAEpB,CACF;AAEA,aAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n ScrollAreaContent,\n ScrollAreaCorner,\n ScrollAreaRoot,\n ScrollAreaScrollbar,\n ScrollAreaThumb,\n ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nexport const ScrollArea: FC<ScrollAreaProps> = ({\n children,\n contentProps,\n corner = false,\n cornerProps,\n disableContentFit = false,\n scrollFade = false,\n scrollbarProps,\n thumbProps,\n viewportProps,\n ...rest\n}) => {\n const mergedContentProps = disableContentFit\n ? { ...contentProps, style: { minWidth: 0, ...contentProps?.style } }\n : contentProps;\n\n return (\n <ScrollAreaRoot {...rest}>\n <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n <ScrollAreaContent {...mergedContentProps}>{children}</ScrollAreaContent>\n </ScrollAreaViewport>\n <ScrollAreaScrollbar {...scrollbarProps}>\n <ScrollAreaThumb {...thumbProps} />\n </ScrollAreaScrollbar>\n {corner && <ScrollAreaCorner {...cornerProps} />}\n </ScrollAreaRoot>\n );\n};\n"],"mappings":";;;;AAcA,MAAa,cAAmC,EAC9C,UACA,cACA,SAAS,OACT,aACA,oBAAoB,OACpB,aAAa,OACb,gBACA,YACA,eACA,GAAG,WACC;CACJ,MAAM,qBAAqB,oBACvB;EAAE,GAAG;EAAc,OAAO;GAAE,UAAU;GAAG,GAAG,cAAc;EAAM;CAAE,IAClE;CAEJ,OACE,qBAAC,gBAAD;EAAgB,GAAI;
|
|
1
|
+
{"version":3,"file":"ScrollArea.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport {\n ScrollAreaContent,\n ScrollAreaCorner,\n ScrollAreaRoot,\n ScrollAreaScrollbar,\n ScrollAreaThumb,\n ScrollAreaViewport,\n} from './atoms';\nimport type { ScrollAreaProps } from './type';\n\nexport const ScrollArea: FC<ScrollAreaProps> = ({\n children,\n contentProps,\n corner = false,\n cornerProps,\n disableContentFit = false,\n scrollFade = false,\n scrollbarProps,\n thumbProps,\n viewportProps,\n ...rest\n}) => {\n const mergedContentProps = disableContentFit\n ? { ...contentProps, style: { minWidth: 0, ...contentProps?.style } }\n : contentProps;\n\n return (\n <ScrollAreaRoot {...rest}>\n <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>\n <ScrollAreaContent {...mergedContentProps}>{children}</ScrollAreaContent>\n </ScrollAreaViewport>\n <ScrollAreaScrollbar {...scrollbarProps}>\n <ScrollAreaThumb {...thumbProps} />\n </ScrollAreaScrollbar>\n {corner && <ScrollAreaCorner {...cornerProps} />}\n </ScrollAreaRoot>\n );\n};\n"],"mappings":";;;;AAcA,MAAa,cAAmC,EAC9C,UACA,cACA,SAAS,OACT,aACA,oBAAoB,OACpB,aAAa,OACb,gBACA,YACA,eACA,GAAG,WACC;CACJ,MAAM,qBAAqB,oBACvB;EAAE,GAAG;EAAc,OAAO;GAAE,UAAU;GAAG,GAAG,cAAc;EAAM;CAAE,IAClE;CAEJ,OACE,qBAAC,gBAAD;EAAgB,GAAI;EAApB,UAAA;GACE,oBAAC,oBAAD;IAAgC;IAAY,GAAI;IAC9C,UAAA,oBAAC,mBAAD;KAAmB,GAAI;KAAqB;IAA4B,CAAA;GACtD,CAAA;GACpB,oBAAC,qBAAD;IAAqB,GAAI;IACvB,UAAA,oBAAC,iBAAD,EAAiB,GAAI,WAAa,CAAA;GACf,CAAA;GACpB,UAAU,oBAAC,kBAAD,EAAkB,GAAI,YAAc,CAAA;EACjC;;AAEpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segmented.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport {\n type CSSProperties,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport {\n SegmentedIndicator,\n SegmentedItem,\n SegmentedItemIcon,\n SegmentedItemLabel,\n SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n block = false,\n className,\n classNames,\n defaultValue,\n disabled = false,\n glass = false,\n id,\n name,\n onChange,\n options,\n ref,\n shadow = false,\n size = 'middle',\n style,\n styles: customStyles,\n value,\n variant = 'filled',\n vertical = false,\n}: SegmentedProps<Value>) => {\n const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n defaultValue,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value,\n });\n\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n listRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n\n const normalizedOptions = useMemo(\n () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n [options],\n );\n\n const updateIndicator = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n if (!active) {\n list.style.setProperty('--active-item-width', '0px');\n list.style.setProperty('--active-item-height', '0px');\n return;\n }\n list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n }, []);\n\n useLayoutEffect(() => {\n updateIndicator();\n }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n useEffect(() => {\n const list = listRef.current;\n if (!list || typeof ResizeObserver === 'undefined') return;\n const ro = new ResizeObserver(() => updateIndicator());\n ro.observe(list);\n return () => ro.disconnect();\n }, [updateIndicator]);\n\n const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n return (\n <SegmentedRoot<Value>\n block={block}\n className={cx(classNames?.root, className)}\n disabled={disabled}\n glass={glass}\n id={id}\n orientation={vertical ? 'vertical' : 'horizontal'}\n ref={mergedRef}\n shadow={shadow}\n style={rootStyle}\n value={groupValue}\n variant={variant}\n onValueChange={(next) => {\n const picked = next[0];\n if (picked != null) setInnerValue(picked);\n }}\n >\n <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n {normalizedOptions.map((opt) => (\n <SegmentedItem<Value>\n aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n block={block}\n className={cx(classNames?.item, opt.className)}\n data-segmented-item=\"\"\n disabled={disabled || opt.disabled}\n key={opt.value}\n name={name}\n size={size}\n style={customStyles?.item}\n title={opt.title}\n value={opt.value}\n >\n {opt.icon != null && (\n <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n {opt.icon}\n </SegmentedItemIcon>\n )}\n {opt.label != null && (\n <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n {opt.label}\n </SegmentedItemLabel>\n )}\n </SegmentedItem>\n ))}\n </SegmentedRoot>\n );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":";;;;;;;AAsBA,MAAM,mBACJ,WAEA,OAAO,WAAW,WAAW;CAAE,OAAO;CAAQ,OAAO;AAAO,IAAI;AAElE,MAAM,aAA4C,EAChD,QAAQ,OACR,WACA,YACA,cACA,WAAW,OACX,QAAQ,OACR,IACA,MACA,UACA,SACA,KACA,SAAS,OACT,OAAO,UACP,OACA,QAAQ,cACR,OACA,UAAU,UACV,WAAW,YACgB;CAC3B,MAAM,CAAC,YAAY,iBAAiBA,cAAsC,cAAc;EACtF;EACA,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA;CACF,CAAC;CAED,MAAM,UAAU,OAA8B,IAAI;CAElD,MAAM,YAAY,aACf,SAAgC;EAC/B,QAAQ,UAAU;EAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAgD,UAAU;CAC1E,GACA,CAAC,GAAG,CACN;CAEA,MAAM,oBAAoB,eACjB,WAAW,CAAC,EAAA,CAAG,KAAK,MAAM,gBAAuB,CAAC,CAAC,GAC1D,CAAC,OAAO,CACV;CAEA,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,MAAM,SAAS,KAAK,cAA2B,qCAAqC;EACpF,IAAI,CAAC,QAAQ;GACX,KAAK,MAAM,YAAY,uBAAuB,KAAK;GACnD,KAAK,MAAM,YAAY,wBAAwB,KAAK;GACpD;EACF;EACA,KAAK,MAAM,YAAY,sBAAsB,GAAG,OAAO,WAAW,GAAG;EACrE,KAAK,MAAM,YAAY,qBAAqB,GAAG,OAAO,UAAU,GAAG;EACnE,KAAK,MAAM,YAAY,uBAAuB,GAAG,OAAO,YAAY,GAAG;EACvE,KAAK,MAAM,YAAY,wBAAwB,GAAG,OAAO,aAAa,GAAG;CAC3E,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,gBAAgB;CAClB,GAAG;EAAC;EAAY;EAAmB;EAAU;EAAM;EAAO;CAAe,CAAC;CAE1E,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EACpD,MAAM,KAAK,IAAI,qBAAqB,gBAAgB,CAAC;EACrD,GAAG,QAAQ,IAAI;EACf,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,aAAa,cAAwB,cAAc,OAAO,CAAC,UAAU,IAAI,CAAC,GAAI,CAAC,UAAU,CAAC;CAEhG,MAAM,YAA2B;EAAE,GAAG;EAAO,GAAG,cAAc;CAAK;CAEnE,OACE,qBAAC,eAAD;EACS;EACP,WAAW,GAAG,YAAY,MAAM,SAAS;EAC/B;EACH;EACH;EACJ,aAAa,WAAW,aAAa;EACrC,KAAK;EACG;EACR,OAAO;EACP,OAAO;EACE;EACT,gBAAgB,SAAS;GACvB,MAAM,SAAS,KAAK;GACpB,IAAI,UAAU,MAAM,cAAc,MAAM;EAC1C;
|
|
1
|
+
{"version":3,"file":"Segmented.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport {\n type CSSProperties,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport {\n SegmentedIndicator,\n SegmentedItem,\n SegmentedItemIcon,\n SegmentedItemLabel,\n SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n block = false,\n className,\n classNames,\n defaultValue,\n disabled = false,\n glass = false,\n id,\n name,\n onChange,\n options,\n ref,\n shadow = false,\n size = 'middle',\n style,\n styles: customStyles,\n value,\n variant = 'filled',\n vertical = false,\n}: SegmentedProps<Value>) => {\n const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n defaultValue,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value,\n });\n\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n listRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n\n const normalizedOptions = useMemo(\n () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n [options],\n );\n\n const updateIndicator = useCallback(() => {\n const list = listRef.current;\n if (!list) return;\n const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n if (!active) {\n list.style.setProperty('--active-item-width', '0px');\n list.style.setProperty('--active-item-height', '0px');\n return;\n }\n list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n }, []);\n\n useLayoutEffect(() => {\n updateIndicator();\n }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n useEffect(() => {\n const list = listRef.current;\n if (!list || typeof ResizeObserver === 'undefined') return;\n const ro = new ResizeObserver(() => updateIndicator());\n ro.observe(list);\n return () => ro.disconnect();\n }, [updateIndicator]);\n\n const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n return (\n <SegmentedRoot<Value>\n block={block}\n className={cx(classNames?.root, className)}\n disabled={disabled}\n glass={glass}\n id={id}\n orientation={vertical ? 'vertical' : 'horizontal'}\n ref={mergedRef}\n shadow={shadow}\n style={rootStyle}\n value={groupValue}\n variant={variant}\n onValueChange={(next) => {\n const picked = next[0];\n if (picked != null) setInnerValue(picked);\n }}\n >\n <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n {normalizedOptions.map((opt) => (\n <SegmentedItem<Value>\n aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n block={block}\n className={cx(classNames?.item, opt.className)}\n data-segmented-item=\"\"\n disabled={disabled || opt.disabled}\n key={opt.value}\n name={name}\n size={size}\n style={customStyles?.item}\n title={opt.title}\n value={opt.value}\n >\n {opt.icon != null && (\n <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n {opt.icon}\n </SegmentedItemIcon>\n )}\n {opt.label != null && (\n <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n {opt.label}\n </SegmentedItemLabel>\n )}\n </SegmentedItem>\n ))}\n </SegmentedRoot>\n );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","names":["Select","menuStyles","styles","BaseSelect"],"sources":["../../../src/base-ui/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type MouseEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\n\nimport { SelectPositioner } from './atoms';\nimport { isValueEmpty } from './helpers';\nimport {\n usePortalContainer,\n useSelectOpen,\n useSelectSearch,\n useSelectValue,\n useSelectVirtual,\n} from './hooks';\nimport {\n createTriggerValueRenderer,\n EmptyContent,\n resolveIconNode,\n resolveSuffixIcon,\n SelectListSection,\n SelectSearchInput,\n SelectTriggerSuffix,\n} from './parts';\nimport { renderOptions } from './renderOptions';\nimport { styles, triggerVariants } from './style';\nimport { type SelectOption, type SelectProps } from './type';\n\nconst Select = memo<SelectProps<any>>(\n ({\n allowClear,\n autoFocus,\n className,\n classNames,\n defaultOpen,\n defaultValue,\n disabled,\n id,\n labelRender,\n listHeight = 512,\n listItemHeight,\n loading,\n mode,\n name,\n onChange,\n onOpenChange,\n onSelect,\n open,\n optionRender,\n options,\n placeholder,\n popupClassName,\n popupMatchSelectWidth,\n prefix,\n readOnly,\n required,\n behaviorVariant = 'default',\n selectedIndicatorVariant = 'check',\n shadow,\n showSearch,\n size = 'middle',\n style,\n suffixIcon,\n suffixIconProps,\n tokenSeparators,\n value,\n variant,\n virtual,\n }) => {\n const { isDarkMode } = useThemeMode();\n const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n const isTags = mode === 'tags';\n const isMultiple = mode === 'multiple' || mode === 'tags';\n const isItemAligned = behaviorVariant === 'item-aligned';\n\n const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\n\n useEffect(() => {\n if (mode !== 'tags' && extraOptions.length > 0) {\n setExtraOptions([]);\n }\n }, [mode, extraOptions.length]);\n\n const {\n appendTagValues,\n getOption,\n handleValueChange,\n normalizedValue,\n normalizeValue,\n removeLastTagValue,\n resolvedOptions,\n valueArray,\n } = useSelectValue({\n defaultValue,\n extraOptions,\n isMultiple,\n onChange,\n onSelect,\n options,\n setExtraOptions,\n value,\n });\n\n const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\n\n const handleRootValueChange = useCallback(\n (nextValue: any) => {\n if (!(isTags && !mergedOpen)) handleValueChange(nextValue);\n },\n [handleValueChange, isTags, mergedOpen],\n );\n\n const handleRemoveTag = useCallback(\n (index: number) =>\n handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)),\n [handleValueChange, valueArray],\n );\n\n const {\n filteredOptions,\n handleSearchChange,\n handleSearchKeyDown,\n searchValue,\n shouldShowSearch,\n stopSearchPropagation,\n } = useSelectSearch({\n appendTagValues,\n handleOpenChange,\n mergedOpen,\n mode,\n removeLastTagValue,\n resolvedOptions,\n showSearch,\n tokenSeparators,\n });\n\n const virtualState = useSelectVirtual({\n filteredOptions,\n listItemHeight,\n size,\n valueArray,\n virtual,\n });\n\n const portalContainer = usePortalContainer();\n\n const renderValue = useMemo(\n () =>\n createTriggerValueRenderer({\n getOption,\n isMultiple,\n isTags,\n labelRender,\n normalizeValue,\n onRemoveValue: handleRemoveTag,\n placeholder: isTags ? undefined : placeholder,\n }),\n [getOption, handleRemoveTag, isMultiple, isTags, labelRender, normalizeValue, placeholder],\n );\n\n const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\n const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\n\n const handleClear = useCallback(\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n handleValueChange(isMultiple ? [] : null);\n },\n [handleValueChange, isMultiple],\n );\n\n const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\n const suffixIconNode = useMemo(\n () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\n [loading, suffixIcon, suffixIconProps],\n );\n\n const popupStyle = useMemo(() => {\n const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\n const baseStyle: React.CSSProperties = {\n maxHeight,\n maxWidth: 'var(--available-width)',\n minWidth: 'var(--anchor-width)',\n ['--lobe-select-popup-max-height' as any]: maxHeight,\n };\n\n if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\n return baseStyle;\n }\n if (typeof popupMatchSelectWidth === 'number') {\n return {\n ...baseStyle,\n minWidth: popupMatchSelectWidth,\n width: popupMatchSelectWidth,\n };\n }\n return { ...baseStyle, minWidth: 'max-content' };\n }, [isItemAligned, listHeight, popupMatchSelectWidth]);\n\n const triggerClassName = cx(\n triggerVariants({ shadow, size, variant: resolvedVariant }),\n className,\n classNames?.root,\n classNames?.trigger,\n );\n\n const isBoldIndicator = selectedIndicatorVariant === 'bold';\n const itemTextClassName = cx(\n optionRender ? menuStyles.itemContent : menuStyles.label,\n styles.itemText,\n classNames?.itemText,\n );\n\n const isEmpty = filteredOptions.length === 0;\n const listContent = isEmpty ? (\n <EmptyContent classNames={classNames} />\n ) : (\n renderOptions({\n classNames,\n isBoldIndicator,\n items: filteredOptions,\n itemTextClassName,\n listItemHeight,\n optionRender,\n renderVirtualItem: virtualState.renderVirtualItem,\n virtual,\n })\n );\n\n return (\n <BaseSelect.Root\n disabled={disabled}\n id={id}\n modal={isItemAligned}\n multiple={isMultiple}\n name={name}\n open={mergedOpen}\n readOnly={readOnly}\n required={required}\n value={normalizedValue}\n onOpenChange={handleOpenChange}\n onValueChange={handleRootValueChange}\n >\n <BaseSelect.Trigger\n autoFocus={!isTags && autoFocus}\n className={triggerClassName}\n disabled={disabled}\n nativeButton={!isTags}\n render={isTags ? <div /> : undefined}\n style={style}\n >\n {prefixNode !== null && prefixNode !== undefined && (\n <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n )}\n <BaseSelect.Value\n className={cx(styles.value, isTags && styles.tagsValue, classNames?.value)}\n >\n {renderValue}\n </BaseSelect.Value>\n {isTags && (\n <SelectSearchInput\n inline\n autoFocus={autoFocus}\n classNames={classNames}\n disabled={disabled}\n placeholder={valueArray.length === 0 ? placeholder : undefined}\n readOnly={readOnly}\n stopPropagation={stopSearchPropagation}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleSearchKeyDown}\n />\n )}\n <SelectTriggerSuffix\n classNames={classNames}\n showClear={showClear}\n suffixIconNode={suffixIconNode}\n onClear={handleClear}\n />\n </BaseSelect.Trigger>\n\n <BaseSelect.Portal container={portalContainer}>\n <SelectPositioner\n align=\"start\"\n alignItemWithTrigger={isItemAligned}\n className={styles.positioner}\n side=\"bottom\"\n sideOffset={6}\n >\n <BaseSelect.Popup\n style={popupStyle}\n className={cx(\n menuStyles.popup,\n styles.popup,\n popupClassName,\n classNames?.popup,\n classNames?.dropdown,\n )}\n >\n {shouldShowSearch && !isTags && (\n <SelectSearchInput\n classNames={classNames}\n placeholder={placeholder}\n stopPropagation={stopSearchPropagation}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleSearchKeyDown}\n />\n )}\n <SelectListSection\n classNames={classNames}\n hasSearch={shouldShowSearch && !isTags}\n isEmpty={isEmpty}\n listContent={listContent}\n listItemHeight={listItemHeight}\n virtual={virtual}\n virtualState={virtualState}\n />\n </BaseSelect.Popup>\n </SelectPositioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n );\n },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.mjs","names":["Select","menuStyles","styles","BaseSelect"],"sources":["../../../src/base-ui/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type MouseEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\n\nimport { SelectPositioner } from './atoms';\nimport { isValueEmpty } from './helpers';\nimport {\n usePortalContainer,\n useSelectOpen,\n useSelectSearch,\n useSelectValue,\n useSelectVirtual,\n} from './hooks';\nimport {\n createTriggerValueRenderer,\n EmptyContent,\n resolveIconNode,\n resolveSuffixIcon,\n SelectListSection,\n SelectSearchInput,\n SelectTriggerSuffix,\n} from './parts';\nimport { renderOptions } from './renderOptions';\nimport { styles, triggerVariants } from './style';\nimport { type SelectOption, type SelectProps } from './type';\n\nconst Select = memo<SelectProps<any>>(\n ({\n allowClear,\n autoFocus,\n className,\n classNames,\n defaultOpen,\n defaultValue,\n disabled,\n id,\n labelRender,\n listHeight = 512,\n listItemHeight,\n loading,\n mode,\n name,\n onChange,\n onOpenChange,\n onSelect,\n open,\n optionRender,\n options,\n placeholder,\n popupClassName,\n popupMatchSelectWidth,\n prefix,\n readOnly,\n required,\n behaviorVariant = 'default',\n selectedIndicatorVariant = 'check',\n shadow,\n showSearch,\n size = 'middle',\n style,\n suffixIcon,\n suffixIconProps,\n tokenSeparators,\n value,\n variant,\n virtual,\n }) => {\n const { isDarkMode } = useThemeMode();\n const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n const isTags = mode === 'tags';\n const isMultiple = mode === 'multiple' || mode === 'tags';\n const isItemAligned = behaviorVariant === 'item-aligned';\n\n const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\n\n useEffect(() => {\n if (mode !== 'tags' && extraOptions.length > 0) {\n setExtraOptions([]);\n }\n }, [mode, extraOptions.length]);\n\n const {\n appendTagValues,\n getOption,\n handleValueChange,\n normalizedValue,\n normalizeValue,\n removeLastTagValue,\n resolvedOptions,\n valueArray,\n } = useSelectValue({\n defaultValue,\n extraOptions,\n isMultiple,\n onChange,\n onSelect,\n options,\n setExtraOptions,\n value,\n });\n\n const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\n\n const handleRootValueChange = useCallback(\n (nextValue: any) => {\n if (!(isTags && !mergedOpen)) handleValueChange(nextValue);\n },\n [handleValueChange, isTags, mergedOpen],\n );\n\n const handleRemoveTag = useCallback(\n (index: number) =>\n handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)),\n [handleValueChange, valueArray],\n );\n\n const {\n filteredOptions,\n handleSearchChange,\n handleSearchKeyDown,\n searchValue,\n shouldShowSearch,\n stopSearchPropagation,\n } = useSelectSearch({\n appendTagValues,\n handleOpenChange,\n mergedOpen,\n mode,\n removeLastTagValue,\n resolvedOptions,\n showSearch,\n tokenSeparators,\n });\n\n const virtualState = useSelectVirtual({\n filteredOptions,\n listItemHeight,\n size,\n valueArray,\n virtual,\n });\n\n const portalContainer = usePortalContainer();\n\n const renderValue = useMemo(\n () =>\n createTriggerValueRenderer({\n getOption,\n isMultiple,\n isTags,\n labelRender,\n normalizeValue,\n onRemoveValue: handleRemoveTag,\n placeholder: isTags ? undefined : placeholder,\n }),\n [getOption, handleRemoveTag, isMultiple, isTags, labelRender, normalizeValue, placeholder],\n );\n\n const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\n const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\n\n const handleClear = useCallback(\n (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n handleValueChange(isMultiple ? [] : null);\n },\n [handleValueChange, isMultiple],\n );\n\n const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\n const suffixIconNode = useMemo(\n () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\n [loading, suffixIcon, suffixIconProps],\n );\n\n const popupStyle = useMemo(() => {\n const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\n const baseStyle: React.CSSProperties = {\n maxHeight,\n maxWidth: 'var(--available-width)',\n minWidth: 'var(--anchor-width)',\n ['--lobe-select-popup-max-height' as any]: maxHeight,\n };\n\n if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\n return baseStyle;\n }\n if (typeof popupMatchSelectWidth === 'number') {\n return {\n ...baseStyle,\n minWidth: popupMatchSelectWidth,\n width: popupMatchSelectWidth,\n };\n }\n return { ...baseStyle, minWidth: 'max-content' };\n }, [isItemAligned, listHeight, popupMatchSelectWidth]);\n\n const triggerClassName = cx(\n triggerVariants({ shadow, size, variant: resolvedVariant }),\n className,\n classNames?.root,\n classNames?.trigger,\n );\n\n const isBoldIndicator = selectedIndicatorVariant === 'bold';\n const itemTextClassName = cx(\n optionRender ? menuStyles.itemContent : menuStyles.label,\n styles.itemText,\n classNames?.itemText,\n );\n\n const isEmpty = filteredOptions.length === 0;\n const listContent = isEmpty ? (\n <EmptyContent classNames={classNames} />\n ) : (\n renderOptions({\n classNames,\n isBoldIndicator,\n items: filteredOptions,\n itemTextClassName,\n listItemHeight,\n optionRender,\n renderVirtualItem: virtualState.renderVirtualItem,\n virtual,\n })\n );\n\n return (\n <BaseSelect.Root\n disabled={disabled}\n id={id}\n modal={isItemAligned}\n multiple={isMultiple}\n name={name}\n open={mergedOpen}\n readOnly={readOnly}\n required={required}\n value={normalizedValue}\n onOpenChange={handleOpenChange}\n onValueChange={handleRootValueChange}\n >\n <BaseSelect.Trigger\n autoFocus={!isTags && autoFocus}\n className={triggerClassName}\n disabled={disabled}\n nativeButton={!isTags}\n render={isTags ? <div /> : undefined}\n style={style}\n >\n {prefixNode !== null && prefixNode !== undefined && (\n <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n )}\n <BaseSelect.Value\n className={cx(styles.value, isTags && styles.tagsValue, classNames?.value)}\n >\n {renderValue}\n </BaseSelect.Value>\n {isTags && (\n <SelectSearchInput\n inline\n autoFocus={autoFocus}\n classNames={classNames}\n disabled={disabled}\n placeholder={valueArray.length === 0 ? placeholder : undefined}\n readOnly={readOnly}\n stopPropagation={stopSearchPropagation}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleSearchKeyDown}\n />\n )}\n <SelectTriggerSuffix\n classNames={classNames}\n showClear={showClear}\n suffixIconNode={suffixIconNode}\n onClear={handleClear}\n />\n </BaseSelect.Trigger>\n\n <BaseSelect.Portal container={portalContainer}>\n <SelectPositioner\n align=\"start\"\n alignItemWithTrigger={isItemAligned}\n className={styles.positioner}\n side=\"bottom\"\n sideOffset={6}\n >\n <BaseSelect.Popup\n style={popupStyle}\n className={cx(\n menuStyles.popup,\n styles.popup,\n popupClassName,\n classNames?.popup,\n classNames?.dropdown,\n )}\n >\n {shouldShowSearch && !isTags && (\n <SelectSearchInput\n classNames={classNames}\n placeholder={placeholder}\n stopPropagation={stopSearchPropagation}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleSearchKeyDown}\n />\n )}\n <SelectListSection\n classNames={classNames}\n hasSearch={shouldShowSearch && !isTags}\n isEmpty={isEmpty}\n listContent={listContent}\n listItemHeight={listItemHeight}\n virtual={virtual}\n virtualState={virtualState}\n />\n </BaseSelect.Popup>\n </SelectPositioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n );\n },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.mjs","names":["styles","BaseSelect","menuStyles"],"sources":["../../../src/base-ui/Select/parts.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n type ChangeEvent,\n isValidElement,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react';\nimport { Virtualizer } from 'virtua';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { isValueEmpty } from './helpers';\nimport { type useSelectVirtual } from './hooks';\nimport { styles } from './style';\nimport { type SelectClassNames, type SelectOption, type SelectProps } from './type';\n\nexport function resolveIconNode(node: ReactNode | IconProps['icon'] | undefined | null) {\n if (node === undefined || node === null) return null;\n if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n return node;\n }\n return <Icon icon={node as any} size={'small'} />;\n}\n\nexport function resolveSuffixIcon(\n suffixIcon: SelectProps['suffixIcon'],\n suffixIconProps: SelectProps['suffixIconProps'],\n loading: boolean | undefined,\n) {\n if (loading) return <Icon spin icon={Loader2} size={'small'} />;\n if (suffixIcon === null) return null;\n if (\n isValidElement(suffixIcon) ||\n typeof suffixIcon === 'string' ||\n typeof suffixIcon === 'number'\n ) {\n return suffixIcon;\n }\n return (\n <Icon\n icon={(suffixIcon as any) || ChevronDown}\n size={'small'}\n {...suffixIconProps}\n style={{\n pointerEvents: 'none',\n ...suffixIconProps?.style,\n }}\n />\n );\n}\n\ninterface TriggerValueRendererParams {\n getOption: (value: any) => SelectOption<any>;\n isMultiple: boolean;\n isTags: boolean;\n labelRender: SelectProps['labelRender'];\n normalizeValue: (value: any) => any;\n onRemoveValue: (index: number) => void;\n placeholder: ReactNode;\n}\n\nexport function createTriggerValueRenderer({\n getOption,\n isMultiple,\n isTags,\n labelRender,\n normalizeValue,\n onRemoveValue,\n placeholder,\n}: TriggerValueRendererParams) {\n return function renderValue(currentValue: any): ReactNode {\n const resolved = normalizeValue(currentValue);\n const placeholderNode =\n placeholder === undefined ? null : <span className={styles.valueText}>{placeholder}</span>;\n\n if (isMultiple) {\n const values = Array.isArray(resolved) ? resolved : [];\n if (values.length === 0) return placeholderNode;\n return (\n <span className={styles.tags}>\n {values.map((val, index) => {\n const option = getOption(val);\n const content = labelRender ? labelRender(option) : (option.label ?? String(val));\n return (\n <span\n className={styles.tag}\n data-role=\"lobe-select-tag\"\n key={`${String(val)}-${index}`}\n >\n {content}\n {isTags && (\n <span\n aria-label={`Remove ${String(val)}`}\n className={styles.tagClose}\n data-role=\"lobe-select-tag-remove\"\n role=\"button\"\n tabIndex={0}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n onRemoveValue(index);\n }}\n onPointerDown={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n <X size={12} />\n </span>\n )}\n </span>\n );\n })}\n </span>\n );\n }\n\n if (isValueEmpty(resolved)) return placeholderNode;\n const option = getOption(resolved);\n const content = labelRender ? labelRender(option) : (option.label ?? String(resolved));\n return <span className={styles.valueText}>{content}</span>;\n };\n}\n\ntype SelectVirtualReturn = ReturnType<typeof useSelectVirtual>;\n\ninterface SelectListSectionProps {\n classNames: SelectClassNames | undefined;\n hasSearch: boolean;\n isEmpty: boolean;\n listContent: ReactNode;\n listItemHeight: number | undefined;\n virtual: boolean | undefined;\n virtualState: SelectVirtualReturn;\n}\n\nexport function SelectListSection({\n classNames,\n hasSearch,\n isEmpty,\n listContent,\n listItemHeight,\n virtual,\n virtualState,\n}: SelectListSectionProps) {\n const listClassName = cx(styles.list, hasSearch && styles.listWithSearch, classNames?.list);\n\n if (!virtual || isEmpty) {\n return (\n <BaseSelect.List className={listClassName} data-virtual={virtual || undefined}>\n {listContent}\n </BaseSelect.List>\n );\n }\n\n const { handleListScroll, keepMountedIndices, listRef, markPointerScroll, virtualListStyle } =\n virtualState;\n\n return (\n <BaseSelect.List\n data-virtual\n className={listClassName}\n ref={listRef}\n style={virtualListStyle}\n tabIndex={-1}\n onPointerDown={markPointerScroll}\n onScroll={handleListScroll}\n onTouchMove={markPointerScroll}\n onWheel={markPointerScroll}\n >\n <Virtualizer itemSize={listItemHeight} keepMounted={keepMountedIndices}>\n {listContent}\n </Virtualizer>\n </BaseSelect.List>\n );\n}\n\ninterface EmptyContentProps {\n classNames: SelectClassNames | undefined;\n}\n\nexport function EmptyContent({ classNames }: EmptyContentProps) {\n return (\n <div className={cx(menuStyles.item, menuStyles.empty, styles.empty, classNames?.empty)}>\n No data\n </div>\n );\n}\n\ninterface SelectSearchInputProps {\n autoFocus?: boolean;\n classNames: SelectClassNames | undefined;\n disabled?: boolean;\n inline?: boolean;\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n placeholder: ReactNode;\n readOnly?: boolean;\n stopPropagation: (event: KeyboardEvent<HTMLInputElement>) => void;\n value: string;\n}\n\nexport function SelectSearchInput({\n autoFocus,\n classNames,\n disabled,\n inline,\n onChange,\n onKeyDown,\n placeholder,\n readOnly,\n stopPropagation,\n value,\n}: SelectSearchInputProps) {\n return (\n <div className={cx(inline ? styles.tagsSearch : styles.search, classNames?.search)}>\n <input\n autoFocus={autoFocus}\n className={styles.searchInput}\n disabled={disabled}\n placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n readOnly={readOnly}\n value={value}\n onChange={onChange}\n onKeyDownCapture={onKeyDown}\n onKeyUp={stopPropagation}\n onKeyUpCapture={stopPropagation}\n />\n </div>\n );\n}\n\ninterface SelectTriggerSuffixProps {\n classNames: SelectClassNames | undefined;\n onClear: (event: MouseEvent) => void;\n showClear: boolean;\n suffixIconNode: ReactNode;\n}\n\nexport function SelectTriggerSuffix({\n classNames,\n onClear,\n showClear,\n suffixIconNode,\n}: SelectTriggerSuffixProps) {\n return (\n <span className={cx(styles.suffix, classNames?.suffix)}>\n {showClear && (\n <span\n className={cx(styles.clear, classNames?.clear)}\n data-role=\"lobe-select-clear\"\n onClick={onClear}\n >\n <Icon icon={X} size={'small'} />\n </span>\n )}\n {suffixIconNode !== null && suffixIconNode !== undefined && (\n <BaseSelect.Icon className={cx(styles.icon, classNames?.icon)}>\n {suffixIconNode}\n </BaseSelect.Icon>\n )}\n </span>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"parts.mjs","names":["styles","BaseSelect","menuStyles"],"sources":["../../../src/base-ui/Select/parts.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { cx } from 'antd-style';\nimport { ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n type ChangeEvent,\n isValidElement,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n} from 'react';\nimport { Virtualizer } from 'virtua';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport Icon, { type IconProps } from '@/Icon';\n\nimport { isValueEmpty } from './helpers';\nimport { type useSelectVirtual } from './hooks';\nimport { styles } from './style';\nimport { type SelectClassNames, type SelectOption, type SelectProps } from './type';\n\nexport function resolveIconNode(node: ReactNode | IconProps['icon'] | undefined | null) {\n if (node === undefined || node === null) return null;\n if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n return node;\n }\n return <Icon icon={node as any} size={'small'} />;\n}\n\nexport function resolveSuffixIcon(\n suffixIcon: SelectProps['suffixIcon'],\n suffixIconProps: SelectProps['suffixIconProps'],\n loading: boolean | undefined,\n) {\n if (loading) return <Icon spin icon={Loader2} size={'small'} />;\n if (suffixIcon === null) return null;\n if (\n isValidElement(suffixIcon) ||\n typeof suffixIcon === 'string' ||\n typeof suffixIcon === 'number'\n ) {\n return suffixIcon;\n }\n return (\n <Icon\n icon={(suffixIcon as any) || ChevronDown}\n size={'small'}\n {...suffixIconProps}\n style={{\n pointerEvents: 'none',\n ...suffixIconProps?.style,\n }}\n />\n );\n}\n\ninterface TriggerValueRendererParams {\n getOption: (value: any) => SelectOption<any>;\n isMultiple: boolean;\n isTags: boolean;\n labelRender: SelectProps['labelRender'];\n normalizeValue: (value: any) => any;\n onRemoveValue: (index: number) => void;\n placeholder: ReactNode;\n}\n\nexport function createTriggerValueRenderer({\n getOption,\n isMultiple,\n isTags,\n labelRender,\n normalizeValue,\n onRemoveValue,\n placeholder,\n}: TriggerValueRendererParams) {\n return function renderValue(currentValue: any): ReactNode {\n const resolved = normalizeValue(currentValue);\n const placeholderNode =\n placeholder === undefined ? null : <span className={styles.valueText}>{placeholder}</span>;\n\n if (isMultiple) {\n const values = Array.isArray(resolved) ? resolved : [];\n if (values.length === 0) return placeholderNode;\n return (\n <span className={styles.tags}>\n {values.map((val, index) => {\n const option = getOption(val);\n const content = labelRender ? labelRender(option) : (option.label ?? String(val));\n return (\n <span\n className={styles.tag}\n data-role=\"lobe-select-tag\"\n key={`${String(val)}-${index}`}\n >\n {content}\n {isTags && (\n <span\n aria-label={`Remove ${String(val)}`}\n className={styles.tagClose}\n data-role=\"lobe-select-tag-remove\"\n role=\"button\"\n tabIndex={0}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n onRemoveValue(index);\n }}\n onPointerDown={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n <X size={12} />\n </span>\n )}\n </span>\n );\n })}\n </span>\n );\n }\n\n if (isValueEmpty(resolved)) return placeholderNode;\n const option = getOption(resolved);\n const content = labelRender ? labelRender(option) : (option.label ?? String(resolved));\n return <span className={styles.valueText}>{content}</span>;\n };\n}\n\ntype SelectVirtualReturn = ReturnType<typeof useSelectVirtual>;\n\ninterface SelectListSectionProps {\n classNames: SelectClassNames | undefined;\n hasSearch: boolean;\n isEmpty: boolean;\n listContent: ReactNode;\n listItemHeight: number | undefined;\n virtual: boolean | undefined;\n virtualState: SelectVirtualReturn;\n}\n\nexport function SelectListSection({\n classNames,\n hasSearch,\n isEmpty,\n listContent,\n listItemHeight,\n virtual,\n virtualState,\n}: SelectListSectionProps) {\n const listClassName = cx(styles.list, hasSearch && styles.listWithSearch, classNames?.list);\n\n if (!virtual || isEmpty) {\n return (\n <BaseSelect.List className={listClassName} data-virtual={virtual || undefined}>\n {listContent}\n </BaseSelect.List>\n );\n }\n\n const { handleListScroll, keepMountedIndices, listRef, markPointerScroll, virtualListStyle } =\n virtualState;\n\n return (\n <BaseSelect.List\n data-virtual\n className={listClassName}\n ref={listRef}\n style={virtualListStyle}\n tabIndex={-1}\n onPointerDown={markPointerScroll}\n onScroll={handleListScroll}\n onTouchMove={markPointerScroll}\n onWheel={markPointerScroll}\n >\n <Virtualizer itemSize={listItemHeight} keepMounted={keepMountedIndices}>\n {listContent}\n </Virtualizer>\n </BaseSelect.List>\n );\n}\n\ninterface EmptyContentProps {\n classNames: SelectClassNames | undefined;\n}\n\nexport function EmptyContent({ classNames }: EmptyContentProps) {\n return (\n <div className={cx(menuStyles.item, menuStyles.empty, styles.empty, classNames?.empty)}>\n No data\n </div>\n );\n}\n\ninterface SelectSearchInputProps {\n autoFocus?: boolean;\n classNames: SelectClassNames | undefined;\n disabled?: boolean;\n inline?: boolean;\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n placeholder: ReactNode;\n readOnly?: boolean;\n stopPropagation: (event: KeyboardEvent<HTMLInputElement>) => void;\n value: string;\n}\n\nexport function SelectSearchInput({\n autoFocus,\n classNames,\n disabled,\n inline,\n onChange,\n onKeyDown,\n placeholder,\n readOnly,\n stopPropagation,\n value,\n}: SelectSearchInputProps) {\n return (\n <div className={cx(inline ? styles.tagsSearch : styles.search, classNames?.search)}>\n <input\n autoFocus={autoFocus}\n className={styles.searchInput}\n disabled={disabled}\n placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n readOnly={readOnly}\n value={value}\n onChange={onChange}\n onKeyDownCapture={onKeyDown}\n onKeyUp={stopPropagation}\n onKeyUpCapture={stopPropagation}\n />\n </div>\n );\n}\n\ninterface SelectTriggerSuffixProps {\n classNames: SelectClassNames | undefined;\n onClear: (event: MouseEvent) => void;\n showClear: boolean;\n suffixIconNode: ReactNode;\n}\n\nexport function SelectTriggerSuffix({\n classNames,\n onClear,\n showClear,\n suffixIconNode,\n}: SelectTriggerSuffixProps) {\n return (\n <span className={cx(styles.suffix, classNames?.suffix)}>\n {showClear && (\n <span\n className={cx(styles.clear, classNames?.clear)}\n data-role=\"lobe-select-clear\"\n onClick={onClear}\n >\n <Icon icon={X} size={'small'} />\n </span>\n )}\n {suffixIconNode !== null && suffixIconNode !== undefined && (\n <BaseSelect.Icon className={cx(styles.icon, classNames?.icon)}>\n {suffixIconNode}\n </BaseSelect.Icon>\n )}\n </span>\n );\n}\n"],"mappings":"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"}
|