@lobehub/ui 5.9.3 → 5.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/A/index.mjs.map +1 -1
- package/es/Accordion/Accordion.mjs +2 -2
- package/es/Accordion/Accordion.mjs.map +1 -1
- package/es/Accordion/AccordionItem.mjs +2 -2
- package/es/Accordion/AccordionItem.mjs.map +1 -1
- package/es/Alert/Alert.mjs.map +1 -1
- package/es/Checkbox/Checkbox.mjs +2 -2
- package/es/Checkbox/Checkbox.mjs.map +1 -1
- package/es/Checkbox/CheckboxGroup.mjs +2 -2
- package/es/Checkbox/CheckboxGroup.mjs.map +1 -1
- package/es/CodeEditor/CodeEditor.mjs +2 -2
- package/es/CodeEditor/CodeEditor.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +2 -2
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/ConfigProvider/index.mjs.map +1 -1
- package/es/DraggablePanel/DraggablePanel.mjs +21 -5
- package/es/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.mjs +2 -2
- package/es/DraggableSideNav/DraggableSideNav.mjs.map +1 -1
- package/es/EditableText/EditableText.mjs +2 -2
- package/es/EditableText/EditableText.mjs.map +1 -1
- package/es/EditorSlashMenu/useNormalizedItems.mjs.map +1 -1
- package/es/EmojiPicker/AvatarUploader.mjs.map +1 -1
- package/es/EmojiPicker/EmojiPicker.mjs +3 -3
- package/es/EmojiPicker/EmojiPicker.mjs.map +1 -1
- package/es/Form/components/FormFlatGroup.mjs.map +1 -1
- package/es/Grid/Grid.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map +1 -1
- package/es/Highlighter/const.mjs.map +1 -1
- package/es/Hotkey/Hotkey.mjs.map +1 -1
- package/es/HotkeyInput/HotkeyInput.mjs +2 -2
- package/es/HotkeyInput/HotkeyInput.mjs.map +1 -1
- package/es/Icon/style.mjs.map +1 -1
- package/es/Image/components/Toolbar.mjs.map +1 -1
- package/es/ImageSelect/ImageSelect.mjs +2 -2
- package/es/ImageSelect/ImageSelect.mjs.map +1 -1
- package/es/Img/index.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs.map +1 -1
- package/es/Markdown/SyntaxMarkdown/useSmoothStreamContent.mjs.map +1 -1
- package/es/Markdown/components/CodeBlock.mjs.map +1 -1
- package/es/Markdown/markdown.style.mjs.map +1 -1
- package/es/Markdown/plugins/remarkBr.mjs.map +1 -1
- package/es/Markdown/plugins/remarkColor.mjs.map +1 -1
- package/es/Markdown/plugins/remarkGfmPlus.mjs.map +1 -1
- package/es/MaterialFileTypeIcon/MaterialFileTypeIcon.mjs.map +1 -1
- package/es/MaterialFileTypeIcon/utils.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/StaticMermaid.mjs.map +1 -1
- package/es/Mermaid/SyntaxMermaid/StreamMermaid.mjs.map +1 -1
- package/es/Modal/imperative.mjs.map +1 -1
- package/es/ScrollShadow/ScrollShadow.mjs.map +1 -1
- package/es/SearchBar/SearchBar.mjs +2 -2
- package/es/SearchBar/SearchBar.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.map +1 -1
- package/es/Toc/TocMobile.mjs +2 -2
- package/es/Toc/TocMobile.mjs.map +1 -1
- package/es/Toc/style.mjs.map +1 -1
- package/es/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipInGroup.mjs.map +1 -1
- package/es/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/Tooltip/useMergedTooltipProps.mjs.map +1 -1
- package/es/awesome/Spline/ParentSize.mjs.map +1 -1
- package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/ContextMenu/store.mjs.map +1 -1
- package/es/base-ui/DropdownMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/FloatingSheet.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/useSheetDrag.mjs.map +1 -1
- package/es/base-ui/FloatingSheet/useSnapPoints.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/Modal/zIndexManager.mjs.map +1 -1
- package/es/base-ui/Popover/useMergedPopoverProps.mjs.map +1 -1
- package/es/base-ui/Select/Select.mjs.map +1 -1
- package/es/base-ui/Switch/atoms.mjs +2 -2
- package/es/base-ui/Switch/atoms.mjs.map +1 -1
- package/es/base-ui/Toast/imperative.mjs.map +1 -1
- package/es/brand/BrandLoading/index.mjs.map +1 -1
- package/es/brand/Logo3d/index.mjs.map +1 -1
- package/es/chat/ChatItem/components/Actions.mjs.map +1 -1
- package/es/chat/EditableMessage/EditableMessage.mjs +3 -3
- package/es/chat/EditableMessage/EditableMessage.mjs.map +1 -1
- package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
- package/es/chat/MessageModal/MessageModal.mjs +3 -3
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/hooks/useHighlight.mjs.map +1 -1
- package/es/hooks/useMarkdown/latex.mjs.map +1 -1
- package/es/hooks/useMarkdown/useMarkdownComponents.mjs.map +1 -1
- package/es/hooks/useMarkdown/useMarkdownContent.mjs.map +1 -1
- package/es/hooks/useMermaid.mjs.map +1 -1
- package/es/hooks/useNativeButton.mjs.map +1 -1
- package/es/hooks/useStreamHighlight.mjs.map +1 -1
- package/es/hooks/useStreamMermaid.mjs.map +1 -1
- package/es/i18n/useTranslation.mjs.map +1 -1
- package/es/mdx/mdxComponents/CodeBlock.mjs.map +1 -1
- package/es/mobile/TabBar/TabBar.mjs +2 -2
- package/es/mobile/TabBar/TabBar.mjs.map +1 -1
- package/es/styles/customTheme.mjs.map +1 -1
- package/es/styles/theme/customStylishStatic.mjs +15 -0
- package/es/styles/theme/customStylishStatic.mjs.map +1 -1
- package/es/styles/theme/token/base.mjs.map +1 -1
- package/es/utils/blobToPng.mjs.map +1 -1
- package/es/utils/placement.mjs.map +1 -1
- package/es/utils/smoothCorners.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","names":["Select","styles","menuStyles","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 { Check, ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n type ChangeEvent,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type MutableRefObject,\n type Ref,\n} from 'react';\nimport { isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Virtualizer } from 'virtua';\n\nimport Icon from '@/Icon';\nimport { styles as menuStyles } from '@/Menu/sharedStyle';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles, triggerVariants } from './style';\nimport {\n type SelectOption,\n type SelectOptionGroup,\n type SelectOptions,\n type SelectProps,\n} from './type';\n\nconst isGroupOption = <Value,>(\n option: SelectOption<Value> | SelectOptionGroup<Value>,\n): option is SelectOptionGroup<Value> => Boolean((option as SelectOptionGroup<Value>).options);\n\nconst getOptionSearchText = <Value,>(option: SelectOption<Value>) => {\n if (typeof option.label === 'string' || typeof option.label === 'number') {\n return String(option.label);\n }\n if (typeof option.value === 'string' || typeof option.value === 'number') {\n return String(option.value);\n }\n if (option.title) return option.title;\n return '';\n};\n\nconst escapeRegExp = (value: string) => value.replaceAll(/[$()*+.?[\\\\\\]^{|}]/g, '\\\\$&');\n\nconst splitBySeparators = (value: string, separators?: string[]) => {\n if (!separators || separators.length === 0) return [value];\n const pattern = separators.map(escapeRegExp).join('|');\n return value.split(new RegExp(pattern, 'g'));\n};\n\nconst countVirtualItems = (items: SelectOptions) =>\n items.reduce((count, item) => {\n if (isGroupOption(item)) {\n return count + item.options.length + 1;\n }\n return count + 1;\n }, 0);\n\nconst isValueEmpty = (value: unknown) => value === null || value === undefined || value === '';\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 isMultiple = mode === 'multiple' || mode === 'tags';\n const isItemAligned = behaviorVariant === 'item-aligned';\n\n const [uncontrolledValue, setUncontrolledValue] = useState<any>(() => {\n if (defaultValue !== undefined) return defaultValue;\n return isMultiple ? [] : null;\n });\n\n const normalizeValue = useCallback(\n (nextValue: any) => {\n if (isMultiple) {\n if (Array.isArray(nextValue)) return nextValue;\n if (nextValue === null || nextValue === undefined) return [];\n return [nextValue];\n }\n if (Array.isArray(nextValue)) return nextValue[0] ?? null;\n return nextValue === undefined ? null : nextValue;\n },\n [isMultiple],\n );\n\n const mergedValue = value !== undefined ? value : uncontrolledValue;\n const normalizedValue = useMemo(\n () => normalizeValue(mergedValue),\n [mergedValue, normalizeValue],\n );\n const valueArray = useMemo(\n () =>\n isMultiple\n ? (normalizedValue as any[])\n : isValueEmpty(normalizedValue)\n ? []\n : [normalizedValue],\n [isMultiple, normalizedValue],\n );\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 { resolvedOptions, optionMap } = useMemo(() => {\n const baseOptions = options ?? [];\n const optionValueMap = new Map<any, SelectOption<any>>();\n\n const addOption = (item: SelectOption<any>) => {\n if (!optionValueMap.has(item.value)) {\n optionValueMap.set(item.value, item);\n }\n };\n\n const walkOptions = (items: SelectOptions) => {\n items.forEach((item) => {\n if (isGroupOption(item)) {\n item.options.forEach(addOption);\n } else {\n addOption(item);\n }\n });\n };\n\n walkOptions(baseOptions);\n\n const filteredExtraOptions = extraOptions.filter((item) => !optionValueMap.has(item.value));\n filteredExtraOptions.forEach(addOption);\n\n const mergedOptions: SelectOptions = [...baseOptions, ...filteredExtraOptions];\n\n const missingValueOptions: SelectOption<any>[] = valueArray\n .filter((val) => !optionValueMap.has(val))\n .map((val) => ({\n label: String(val),\n value: val,\n }));\n missingValueOptions.forEach(addOption);\n\n return {\n optionMap: optionValueMap,\n resolvedOptions: missingValueOptions.length\n ? [...mergedOptions, ...missingValueOptions]\n : mergedOptions,\n };\n }, [extraOptions, options, valueArray]);\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n useEffect(() => {\n if (open !== undefined) {\n setUncontrolledOpen(open);\n }\n }, [open]);\n\n const mergedOpen = open ?? uncontrolledOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const [searchValue, setSearchValue] = useState('');\n const shouldShowSearch = Boolean(showSearch || mode === 'tags');\n\n useEffect(() => {\n if (!mergedOpen) setSearchValue('');\n }, [mergedOpen]);\n\n const getOption = useCallback(\n (optionValue: any): SelectOption<any> => {\n const matched = optionMap.get(optionValue);\n if (matched) return matched;\n if (optionValue && typeof optionValue === 'object' && 'label' in optionValue) {\n return {\n label: (optionValue as any).label,\n value: optionValue,\n };\n }\n return {\n label: String(optionValue),\n value: optionValue,\n };\n },\n [optionMap],\n );\n\n const previousValueRef = useRef<any>(normalizedValue);\n\n useEffect(() => {\n previousValueRef.current = normalizedValue;\n }, [normalizedValue]);\n\n const handleValueChange = useCallback(\n (nextValue: any) => {\n const normalizedNextValue = normalizeValue(nextValue);\n const previousValue = previousValueRef.current;\n\n if (isMultiple) {\n const prevValues = Array.isArray(previousValue) ? previousValue : [];\n const nextValues = Array.isArray(normalizedNextValue) ? normalizedNextValue : [];\n const addedValues = nextValues.filter(\n (val) => !prevValues.some((prev) => Object.is(prev, val)),\n );\n\n addedValues.forEach((val) => {\n onSelect?.(val, getOption(val));\n });\n\n if (value === undefined) {\n setUncontrolledValue(nextValues);\n }\n onChange?.(\n nextValues,\n nextValues.map((val) => getOption(val)),\n );\n } else {\n if (\n !isValueEmpty(normalizedNextValue) &&\n !Object.is(previousValue, normalizedNextValue)\n ) {\n onSelect?.(normalizedNextValue, getOption(normalizedNextValue));\n }\n if (value === undefined) {\n setUncontrolledValue(normalizedNextValue);\n }\n onChange?.(\n normalizedNextValue,\n isValueEmpty(normalizedNextValue) ? undefined : getOption(normalizedNextValue),\n );\n }\n\n previousValueRef.current = normalizedNextValue;\n },\n [getOption, isMultiple, normalizeValue, onChange, onSelect, value],\n );\n\n const appendTagValues = useCallback(\n (rawValues: string[]) => {\n const valuesToAdd = rawValues.map((val) => val.trim()).filter(Boolean);\n if (!valuesToAdd.length) return;\n\n const nextValues = [...valueArray];\n const newOptionValues = valuesToAdd.filter((val) => !optionMap.has(val));\n\n if (newOptionValues.length > 0) {\n setExtraOptions((prev) => {\n const existingValues = new Set(prev.map((item) => item.value));\n const merged = [...prev];\n newOptionValues.forEach((val) => {\n if (!existingValues.has(val)) {\n merged.push({ label: val, value: val });\n }\n });\n return merged;\n });\n }\n\n valuesToAdd.forEach((val) => {\n if (!nextValues.some((item) => Object.is(item, val))) {\n nextValues.push(val);\n }\n });\n\n if (nextValues.length !== valueArray.length) {\n handleValueChange(nextValues);\n }\n },\n [handleValueChange, optionMap, valueArray],\n );\n\n const handleSearchChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextValue = event.target.value;\n if (mode === 'tags') {\n const parts = splitBySeparators(nextValue, tokenSeparators);\n if (parts.length > 1) {\n const pending = parts.pop() ?? '';\n appendTagValues(parts.filter(Boolean));\n setSearchValue(pending);\n return;\n }\n }\n setSearchValue(nextValue);\n },\n [appendTagValues, mode, tokenSeparators],\n );\n\n const handleSearchKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n event.stopPropagation();\n\n if (event.key === 'Escape') {\n handleOpenChange(false);\n return;\n }\n\n if (mode !== 'tags') return;\n\n if (event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n appendTagValues([searchValue]);\n setSearchValue('');\n return;\n }\n\n if (tokenSeparators?.includes(event.key)) {\n event.preventDefault();\n event.stopPropagation();\n appendTagValues([searchValue]);\n setSearchValue('');\n }\n },\n [appendTagValues, handleOpenChange, mode, searchValue, tokenSeparators],\n );\n\n const filteredOptions = useMemo(() => {\n if (!shouldShowSearch || !searchValue.trim()) return resolvedOptions;\n const query = searchValue.trim().toLowerCase();\n\n const filterItems = (items: SelectOptions): SelectOptions => {\n const filtered = items\n .map((item) => {\n if (isGroupOption(item)) {\n const groupItems = item.options.filter((option) =>\n getOptionSearchText(option).toLowerCase().includes(query),\n );\n if (!groupItems.length) return null;\n return { ...item, options: groupItems };\n }\n return getOptionSearchText(item).toLowerCase().includes(query) ? item : null;\n })\n .filter(Boolean) as SelectOptions;\n\n return filtered;\n };\n\n return filterItems(resolvedOptions);\n }, [resolvedOptions, searchValue, shouldShowSearch]);\n\n const renderValue = useCallback(\n (currentValue: any) => {\n const resolved = normalizeValue(currentValue);\n const placeholderNode =\n placeholder === undefined ? null : (\n <span className={styles.valueText}>{placeholder}</span>\n );\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 className={styles.tag} key={`${String(val)}-${index}`}>\n {content}\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 [getOption, isMultiple, 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(() => {\n if (prefix === undefined || prefix === null) return null;\n if (isValidElement(prefix) || typeof prefix === 'string' || typeof prefix === 'number') {\n return prefix;\n }\n return <Icon icon={prefix as any} size={'small'} />;\n }, [prefix]);\n\n const suffixIconNode = useMemo(() => {\n if (loading) {\n return <Icon spin icon={Loader2} size={'small'} />;\n }\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 }, [loading, suffixIcon, suffixIconProps]);\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 {\n ...baseStyle,\n minWidth: 'max-content',\n };\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 listRef = useRef<HTMLDivElement | null>(null);\n const pointerScrollRef = useRef(false);\n const pointerScrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const renderVirtualItem = useCallback((props: HTMLAttributes<HTMLDivElement>) => {\n const { ref, ...rest } = props as HTMLAttributes<HTMLDivElement> & {\n ref?: Ref<HTMLDivElement>;\n };\n\n return (\n <div\n {...rest}\n ref={(node) => {\n if (node) {\n node.scrollIntoView = (...args) => {\n if (!pointerScrollRef.current) {\n HTMLElement.prototype.scrollIntoView.call(node, ...args);\n }\n };\n }\n\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref && 'current' in ref) {\n (ref as MutableRefObject<HTMLDivElement | null>).current = node;\n }\n }}\n />\n );\n }, []);\n\n const markPointerScroll = useCallback(() => {\n pointerScrollRef.current = true;\n if (pointerScrollTimeoutRef.current) {\n clearTimeout(pointerScrollTimeoutRef.current);\n }\n pointerScrollTimeoutRef.current = setTimeout(() => {\n pointerScrollRef.current = false;\n }, 120);\n }, []);\n\n const handleListScroll = useCallback(() => {\n if (!virtual || !pointerScrollRef.current) return;\n const listElement = listRef.current;\n const activeElement = document.activeElement;\n if (listElement && activeElement && listElement.contains(activeElement)) {\n listElement.focus({ preventScroll: true });\n }\n }, [virtual]);\n\n useEffect(() => {\n return () => {\n if (pointerScrollTimeoutRef.current) {\n clearTimeout(pointerScrollTimeoutRef.current);\n }\n };\n }, []);\n const virtualListStyle = useMemo(() => {\n if (!virtual) return undefined;\n const rowCount = countVirtualItems(filteredOptions);\n const maxVisibleRows = 6;\n const estimatedRowHeight =\n listItemHeight ?? (size === 'large' ? 40 : size === 'small' ? 28 : 32);\n const visibleRows = Math.min(Math.max(rowCount, 1), maxVisibleRows);\n const estimatedHeight = visibleRows * estimatedRowHeight + 8;\n\n return {\n height: `min(${estimatedHeight}px, var(--lobe-select-available-height, var(--available-height)))`,\n };\n }, [filteredOptions, listItemHeight, size, virtual]);\n\n const keepMountedIndices = useMemo(() => {\n if (!virtual || valueArray.length === 0) return undefined;\n const selectedSet = new Set(valueArray);\n const indices: number[] = [];\n let index = 0;\n\n filteredOptions.forEach((item) => {\n if (isGroupOption(item)) {\n if (item.options.some((option) => selectedSet.has(option.value))) {\n indices.push(index);\n }\n index += 1;\n return;\n }\n\n if (selectedSet.has(item.value)) {\n indices.push(index);\n }\n index += 1;\n });\n\n return indices.length ? indices : undefined;\n }, [filteredOptions, valueArray, virtual]);\n\n const itemTextClassName = cx(\n optionRender ? menuStyles.itemContent : menuStyles.label,\n styles.itemText,\n classNames?.itemText,\n );\n\n const isBoldIndicator = selectedIndicatorVariant === 'bold';\n let optionIndex = 0;\n const renderOptions = (items: SelectOptions) =>\n items.map((item, index) => {\n if (isGroupOption(item)) {\n return (\n <BaseSelect.Group\n className={cx(styles.group, classNames?.group)}\n key={`group-${index}`}\n >\n <BaseSelect.GroupLabel\n className={cx(menuStyles.groupLabel, styles.groupLabel, classNames?.groupLabel)}\n >\n {item.label}\n </BaseSelect.GroupLabel>\n {item.options.map((option) => {\n const currentIndex = optionIndex++;\n return (\n <BaseSelect.Item\n disabled={option.disabled}\n key={`${String(option.value)}-${currentIndex}`}\n label={getOptionSearchText(option)}\n render={virtual ? renderVirtualItem : undefined}\n value={option.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n option.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...option.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(option, { index: currentIndex }) : option.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator\n className={cx(styles.itemIndicator, classNames?.itemIndicator)}\n >\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n })}\n </BaseSelect.Group>\n );\n }\n\n const currentIndex = optionIndex++;\n return (\n <BaseSelect.Item\n disabled={item.disabled}\n key={`${String(item.value)}-${currentIndex}`}\n label={getOptionSearchText(item)}\n render={virtual ? renderVirtualItem : undefined}\n value={item.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n item.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...item.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(item, { index: currentIndex }) : item.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator\n className={cx(styles.itemIndicator, classNames?.itemIndicator)}\n >\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n });\n\n const appElement = useAppElement();\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={handleValueChange}\n >\n <BaseSelect.Trigger\n autoFocus={autoFocus}\n className={triggerClassName}\n disabled={disabled}\n style={style}\n >\n {prefixNode !== null && prefixNode !== undefined && (\n <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n )}\n <BaseSelect.Value className={cx(styles.value, classNames?.value)}>\n {renderValue}\n </BaseSelect.Value>\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={handleClear}\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 </BaseSelect.Trigger>\n\n <BaseSelect.Portal container={appElement}>\n <BaseSelect.Positioner\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 && (\n <div className={cx(styles.search, classNames?.search)}>\n <input\n className={styles.searchInput}\n placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleSearchKeyDown}\n />\n </div>\n )}\n {(() => {\n const content =\n filteredOptions.length > 0 ? (\n renderOptions(filteredOptions)\n ) : (\n <div\n className={cx(\n menuStyles.item,\n menuStyles.empty,\n styles.empty,\n classNames?.empty,\n )}\n >\n No data\n </div>\n );\n\n if (!virtual || filteredOptions.length === 0) {\n return (\n <BaseSelect.List\n className={cx(styles.list, classNames?.list)}\n data-virtual={virtual || undefined}\n >\n {content}\n </BaseSelect.List>\n );\n }\n\n return (\n <BaseSelect.List\n className={cx(styles.list, classNames?.list)}\n data-virtual={virtual || undefined}\n ref={listRef}\n style={virtualListStyle}\n tabIndex={virtual ? -1 : undefined}\n onPointerDown={virtual ? markPointerScroll : undefined}\n onScroll={virtual ? handleListScroll : undefined}\n onTouchMove={virtual ? markPointerScroll : undefined}\n onWheel={virtual ? markPointerScroll : undefined}\n >\n <Virtualizer itemSize={listItemHeight} keepMounted={keepMountedIndices}>\n {content}\n </Virtualizer>\n </BaseSelect.List>\n );\n })()}\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\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","styles","menuStyles","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 { Check, ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n type ChangeEvent,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type MutableRefObject,\n type Ref,\n} from 'react';\nimport { isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Virtualizer } from 'virtua';\n\nimport Icon from '@/Icon';\nimport { styles as menuStyles } from '@/Menu/sharedStyle';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles, triggerVariants } from './style';\nimport {\n type SelectOption,\n type SelectOptionGroup,\n type SelectOptions,\n type SelectProps,\n} from './type';\n\nconst isGroupOption = <Value,>(\n option: SelectOption<Value> | SelectOptionGroup<Value>,\n): option is SelectOptionGroup<Value> => Boolean((option as SelectOptionGroup<Value>).options);\n\nconst getOptionSearchText = <Value,>(option: SelectOption<Value>) => {\n if (typeof option.label === 'string' || typeof option.label === 'number') {\n return String(option.label);\n }\n if (typeof option.value === 'string' || typeof option.value === 'number') {\n return String(option.value);\n }\n if (option.title) return option.title;\n return '';\n};\n\nconst escapeRegExp = (value: string) => value.replaceAll(/[$()*+.?[\\\\\\]^{|}]/g, '\\\\$&');\n\nconst splitBySeparators = (value: string, separators?: string[]) => {\n if (!separators || separators.length === 0) return [value];\n const pattern = separators.map(escapeRegExp).join('|');\n return value.split(new RegExp(pattern, 'g'));\n};\n\nconst countVirtualItems = (items: SelectOptions) =>\n items.reduce((count, item) => {\n if (isGroupOption(item)) {\n return count + item.options.length + 1;\n }\n return count + 1;\n }, 0);\n\nconst isValueEmpty = (value: unknown) => value === null || value === undefined || value === '';\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 isMultiple = mode === 'multiple' || mode === 'tags';\n const isItemAligned = behaviorVariant === 'item-aligned';\n\n const [uncontrolledValue, setUncontrolledValue] = useState<any>(() => {\n if (defaultValue !== undefined) return defaultValue;\n return isMultiple ? [] : null;\n });\n\n const normalizeValue = useCallback(\n (nextValue: any) => {\n if (isMultiple) {\n if (Array.isArray(nextValue)) return nextValue;\n if (nextValue === null || nextValue === undefined) return [];\n return [nextValue];\n }\n if (Array.isArray(nextValue)) return nextValue[0] ?? null;\n return nextValue === undefined ? null : nextValue;\n },\n [isMultiple],\n );\n\n const mergedValue = value !== undefined ? value : uncontrolledValue;\n const normalizedValue = useMemo(\n () => normalizeValue(mergedValue),\n [mergedValue, normalizeValue],\n );\n const valueArray = useMemo(\n () =>\n isMultiple\n ? (normalizedValue as any[])\n : isValueEmpty(normalizedValue)\n ? []\n : [normalizedValue],\n [isMultiple, normalizedValue],\n );\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 { resolvedOptions, optionMap } = useMemo(() => {\n const baseOptions = options ?? [];\n const optionValueMap = new Map<any, SelectOption<any>>();\n\n const addOption = (item: SelectOption<any>) => {\n if (!optionValueMap.has(item.value)) {\n optionValueMap.set(item.value, item);\n }\n };\n\n const walkOptions = (items: SelectOptions) => {\n items.forEach((item) => {\n if (isGroupOption(item)) {\n item.options.forEach(addOption);\n } else {\n addOption(item);\n }\n });\n };\n\n walkOptions(baseOptions);\n\n const filteredExtraOptions = extraOptions.filter((item) => !optionValueMap.has(item.value));\n filteredExtraOptions.forEach(addOption);\n\n const mergedOptions: SelectOptions = [...baseOptions, ...filteredExtraOptions];\n\n const missingValueOptions: SelectOption<any>[] = valueArray\n .filter((val) => !optionValueMap.has(val))\n .map((val) => ({\n label: String(val),\n value: val,\n }));\n missingValueOptions.forEach(addOption);\n\n return {\n optionMap: optionValueMap,\n resolvedOptions: missingValueOptions.length\n ? [...mergedOptions, ...missingValueOptions]\n : mergedOptions,\n };\n }, [extraOptions, options, valueArray]);\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n useEffect(() => {\n if (open !== undefined) {\n setUncontrolledOpen(open);\n }\n }, [open]);\n\n const mergedOpen = open ?? uncontrolledOpen;\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean) => {\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const [searchValue, setSearchValue] = useState('');\n const shouldShowSearch = Boolean(showSearch || mode === 'tags');\n\n useEffect(() => {\n if (!mergedOpen) setSearchValue('');\n }, [mergedOpen]);\n\n const getOption = useCallback(\n (optionValue: any): SelectOption<any> => {\n const matched = optionMap.get(optionValue);\n if (matched) return matched;\n if (optionValue && typeof optionValue === 'object' && 'label' in optionValue) {\n return {\n label: (optionValue as any).label,\n value: optionValue,\n };\n }\n return {\n label: String(optionValue),\n value: optionValue,\n };\n },\n [optionMap],\n );\n\n const previousValueRef = useRef<any>(normalizedValue);\n\n useEffect(() => {\n previousValueRef.current = normalizedValue;\n }, [normalizedValue]);\n\n const handleValueChange = useCallback(\n (nextValue: any) => {\n const normalizedNextValue = normalizeValue(nextValue);\n const previousValue = previousValueRef.current;\n\n if (isMultiple) {\n const prevValues = Array.isArray(previousValue) ? previousValue : [];\n const nextValues = Array.isArray(normalizedNextValue) ? normalizedNextValue : [];\n const addedValues = nextValues.filter(\n (val) => !prevValues.some((prev) => Object.is(prev, val)),\n );\n\n addedValues.forEach((val) => {\n onSelect?.(val, getOption(val));\n });\n\n if (value === undefined) {\n setUncontrolledValue(nextValues);\n }\n onChange?.(\n nextValues,\n nextValues.map((val) => getOption(val)),\n );\n } else {\n if (\n !isValueEmpty(normalizedNextValue) &&\n !Object.is(previousValue, normalizedNextValue)\n ) {\n onSelect?.(normalizedNextValue, getOption(normalizedNextValue));\n }\n if (value === undefined) {\n setUncontrolledValue(normalizedNextValue);\n }\n onChange?.(\n normalizedNextValue,\n isValueEmpty(normalizedNextValue) ? undefined : getOption(normalizedNextValue),\n );\n }\n\n previousValueRef.current = normalizedNextValue;\n },\n [getOption, isMultiple, normalizeValue, onChange, onSelect, value],\n );\n\n const appendTagValues = useCallback(\n (rawValues: string[]) => {\n const valuesToAdd = rawValues.map((val) => val.trim()).filter(Boolean);\n if (!valuesToAdd.length) return;\n\n const nextValues = [...valueArray];\n const newOptionValues = valuesToAdd.filter((val) => !optionMap.has(val));\n\n if (newOptionValues.length > 0) {\n setExtraOptions((prev) => {\n const existingValues = new Set(prev.map((item) => item.value));\n const merged = [...prev];\n newOptionValues.forEach((val) => {\n if (!existingValues.has(val)) {\n merged.push({ label: val, value: val });\n }\n });\n return merged;\n });\n }\n\n valuesToAdd.forEach((val) => {\n if (!nextValues.some((item) => Object.is(item, val))) {\n nextValues.push(val);\n }\n });\n\n if (nextValues.length !== valueArray.length) {\n handleValueChange(nextValues);\n }\n },\n [handleValueChange, optionMap, valueArray],\n );\n\n const handleSearchChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextValue = event.target.value;\n if (mode === 'tags') {\n const parts = splitBySeparators(nextValue, tokenSeparators);\n if (parts.length > 1) {\n const pending = parts.pop() ?? '';\n appendTagValues(parts.filter(Boolean));\n setSearchValue(pending);\n return;\n }\n }\n setSearchValue(nextValue);\n },\n [appendTagValues, mode, tokenSeparators],\n );\n\n const handleSearchKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n event.stopPropagation();\n\n if (event.key === 'Escape') {\n handleOpenChange(false);\n return;\n }\n\n if (mode !== 'tags') return;\n\n if (event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n appendTagValues([searchValue]);\n setSearchValue('');\n return;\n }\n\n if (tokenSeparators?.includes(event.key)) {\n event.preventDefault();\n event.stopPropagation();\n appendTagValues([searchValue]);\n setSearchValue('');\n }\n },\n [appendTagValues, handleOpenChange, mode, searchValue, tokenSeparators],\n );\n\n const filteredOptions = useMemo(() => {\n if (!shouldShowSearch || !searchValue.trim()) return resolvedOptions;\n const query = searchValue.trim().toLowerCase();\n\n const filterItems = (items: SelectOptions): SelectOptions => {\n const filtered = items\n .map((item) => {\n if (isGroupOption(item)) {\n const groupItems = item.options.filter((option) =>\n getOptionSearchText(option).toLowerCase().includes(query),\n );\n if (!groupItems.length) return null;\n return { ...item, options: groupItems };\n }\n return getOptionSearchText(item).toLowerCase().includes(query) ? item : null;\n })\n .filter(Boolean) as SelectOptions;\n\n return filtered;\n };\n\n return filterItems(resolvedOptions);\n }, [resolvedOptions, searchValue, shouldShowSearch]);\n\n const renderValue = useCallback(\n (currentValue: any) => {\n const resolved = normalizeValue(currentValue);\n const placeholderNode =\n placeholder === undefined ? null : (\n <span className={styles.valueText}>{placeholder}</span>\n );\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 className={styles.tag} key={`${String(val)}-${index}`}>\n {content}\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 [getOption, isMultiple, 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(() => {\n if (prefix === undefined || prefix === null) return null;\n if (isValidElement(prefix) || typeof prefix === 'string' || typeof prefix === 'number') {\n return prefix;\n }\n return <Icon icon={prefix as any} size={'small'} />;\n }, [prefix]);\n\n const suffixIconNode = useMemo(() => {\n if (loading) {\n return <Icon spin icon={Loader2} size={'small'} />;\n }\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 }, [loading, suffixIcon, suffixIconProps]);\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 {\n ...baseStyle,\n minWidth: 'max-content',\n };\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 listRef = useRef<HTMLDivElement | null>(null);\n const pointerScrollRef = useRef(false);\n const pointerScrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const renderVirtualItem = useCallback((props: HTMLAttributes<HTMLDivElement>) => {\n const { ref, ...rest } = props as HTMLAttributes<HTMLDivElement> & {\n ref?: Ref<HTMLDivElement>;\n };\n\n return (\n <div\n {...rest}\n ref={(node) => {\n if (node) {\n node.scrollIntoView = (...args) => {\n if (!pointerScrollRef.current) {\n HTMLElement.prototype.scrollIntoView.call(node, ...args);\n }\n };\n }\n\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref && 'current' in ref) {\n (ref as MutableRefObject<HTMLDivElement | null>).current = node;\n }\n }}\n />\n );\n }, []);\n\n const markPointerScroll = useCallback(() => {\n pointerScrollRef.current = true;\n if (pointerScrollTimeoutRef.current) {\n clearTimeout(pointerScrollTimeoutRef.current);\n }\n pointerScrollTimeoutRef.current = setTimeout(() => {\n pointerScrollRef.current = false;\n }, 120);\n }, []);\n\n const handleListScroll = useCallback(() => {\n if (!virtual || !pointerScrollRef.current) return;\n const listElement = listRef.current;\n const activeElement = document.activeElement;\n if (listElement && activeElement && listElement.contains(activeElement)) {\n listElement.focus({ preventScroll: true });\n }\n }, [virtual]);\n\n useEffect(() => {\n return () => {\n if (pointerScrollTimeoutRef.current) {\n clearTimeout(pointerScrollTimeoutRef.current);\n }\n };\n }, []);\n const virtualListStyle = useMemo(() => {\n if (!virtual) return undefined;\n const rowCount = countVirtualItems(filteredOptions);\n const maxVisibleRows = 6;\n const estimatedRowHeight =\n listItemHeight ?? (size === 'large' ? 40 : size === 'small' ? 28 : 32);\n const visibleRows = Math.min(Math.max(rowCount, 1), maxVisibleRows);\n const estimatedHeight = visibleRows * estimatedRowHeight + 8;\n\n return {\n height: `min(${estimatedHeight}px, var(--lobe-select-available-height, var(--available-height)))`,\n };\n }, [filteredOptions, listItemHeight, size, virtual]);\n\n const keepMountedIndices = useMemo(() => {\n if (!virtual || valueArray.length === 0) return undefined;\n const selectedSet = new Set(valueArray);\n const indices: number[] = [];\n let index = 0;\n\n filteredOptions.forEach((item) => {\n if (isGroupOption(item)) {\n if (item.options.some((option) => selectedSet.has(option.value))) {\n indices.push(index);\n }\n index += 1;\n return;\n }\n\n if (selectedSet.has(item.value)) {\n indices.push(index);\n }\n index += 1;\n });\n\n return indices.length ? indices : undefined;\n }, [filteredOptions, valueArray, virtual]);\n\n const itemTextClassName = cx(\n optionRender ? menuStyles.itemContent : menuStyles.label,\n styles.itemText,\n classNames?.itemText,\n );\n\n const isBoldIndicator = selectedIndicatorVariant === 'bold';\n let optionIndex = 0;\n const renderOptions = (items: SelectOptions) =>\n items.map((item, index) => {\n if (isGroupOption(item)) {\n return (\n <BaseSelect.Group\n className={cx(styles.group, classNames?.group)}\n key={`group-${index}`}\n >\n <BaseSelect.GroupLabel\n className={cx(menuStyles.groupLabel, styles.groupLabel, classNames?.groupLabel)}\n >\n {item.label}\n </BaseSelect.GroupLabel>\n {item.options.map((option) => {\n const currentIndex = optionIndex++;\n return (\n <BaseSelect.Item\n disabled={option.disabled}\n key={`${String(option.value)}-${currentIndex}`}\n label={getOptionSearchText(option)}\n render={virtual ? renderVirtualItem : undefined}\n value={option.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n option.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...option.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(option, { index: currentIndex }) : option.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator\n className={cx(styles.itemIndicator, classNames?.itemIndicator)}\n >\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n })}\n </BaseSelect.Group>\n );\n }\n\n const currentIndex = optionIndex++;\n return (\n <BaseSelect.Item\n disabled={item.disabled}\n key={`${String(item.value)}-${currentIndex}`}\n label={getOptionSearchText(item)}\n render={virtual ? renderVirtualItem : undefined}\n value={item.value}\n className={cx(\n menuStyles.item,\n styles.item,\n isBoldIndicator && styles.itemBoldSelected,\n classNames?.item,\n classNames?.option,\n item.className,\n )}\n style={{\n minHeight: listItemHeight,\n ...item.style,\n }}\n >\n <BaseSelect.ItemText className={itemTextClassName}>\n {optionRender ? optionRender(item, { index: currentIndex }) : item.label}\n </BaseSelect.ItemText>\n {!isBoldIndicator && (\n <BaseSelect.ItemIndicator\n className={cx(styles.itemIndicator, classNames?.itemIndicator)}\n >\n <Icon icon={Check} size={'small'} />\n </BaseSelect.ItemIndicator>\n )}\n </BaseSelect.Item>\n );\n });\n\n const appElement = useAppElement();\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={handleValueChange}\n >\n <BaseSelect.Trigger\n autoFocus={autoFocus}\n className={triggerClassName}\n disabled={disabled}\n style={style}\n >\n {prefixNode !== null && prefixNode !== undefined && (\n <span className={cx(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n )}\n <BaseSelect.Value className={cx(styles.value, classNames?.value)}>\n {renderValue}\n </BaseSelect.Value>\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={handleClear}\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 </BaseSelect.Trigger>\n\n <BaseSelect.Portal container={appElement}>\n <BaseSelect.Positioner\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 && (\n <div className={cx(styles.search, classNames?.search)}>\n <input\n className={styles.searchInput}\n placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n value={searchValue}\n onChange={handleSearchChange}\n onKeyDown={handleSearchKeyDown}\n />\n </div>\n )}\n {(() => {\n const content =\n filteredOptions.length > 0 ? (\n renderOptions(filteredOptions)\n ) : (\n <div\n className={cx(\n menuStyles.item,\n menuStyles.empty,\n styles.empty,\n classNames?.empty,\n )}\n >\n No data\n </div>\n );\n\n if (!virtual || filteredOptions.length === 0) {\n return (\n <BaseSelect.List\n className={cx(styles.list, classNames?.list)}\n data-virtual={virtual || undefined}\n >\n {content}\n </BaseSelect.List>\n );\n }\n\n return (\n <BaseSelect.List\n className={cx(styles.list, classNames?.list)}\n data-virtual={virtual || undefined}\n ref={listRef}\n style={virtualListStyle}\n tabIndex={virtual ? -1 : undefined}\n onPointerDown={virtual ? markPointerScroll : undefined}\n onScroll={virtual ? handleListScroll : undefined}\n onTouchMove={virtual ? markPointerScroll : undefined}\n onWheel={virtual ? markPointerScroll : undefined}\n >\n <Virtualizer itemSize={listItemHeight} keepMounted={keepMountedIndices}>\n {content}\n </Virtualizer>\n </BaseSelect.List>\n );\n })()}\n </BaseSelect.Popup>\n </BaseSelect.Positioner>\n </BaseSelect.Portal>\n </BaseSelect.Root>\n );\n },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { rootVariants, styles, thumbVariants } from "./style.mjs";
|
|
|
4
4
|
import { createContext, use, useMemo, useRef, useState } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { cx } from "antd-style";
|
|
7
|
-
import
|
|
7
|
+
import useMergeState from "use-merge-value";
|
|
8
8
|
import { Switch } from "@base-ui/react/switch";
|
|
9
9
|
//#region src/base-ui/Switch/atoms.tsx
|
|
10
10
|
const SwitchContext = createContext(null);
|
|
@@ -17,7 +17,7 @@ const SwitchRoot = ({ checked, className, defaultChecked, onCheckedChange, onCli
|
|
|
17
17
|
const Motion = useMotionComponent();
|
|
18
18
|
const [isPressed, setIsPressed] = useState(false);
|
|
19
19
|
const lastEventRef = useRef(null);
|
|
20
|
-
const [isChecked, setIsChecked] =
|
|
20
|
+
const [isChecked, setIsChecked] = useMergeState(defaultChecked ?? false, {
|
|
21
21
|
defaultValue: defaultChecked,
|
|
22
22
|
onChange: (value) => {
|
|
23
23
|
if (lastEventRef.current) onCheckedChange?.(value, lastEventRef.current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n ...rest\n}: SwitchRootInternalProps) => {\n const Motion = useMotionComponent();\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const baseClassName = rootVariants({ size });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n (rest as any).onKeyDown?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <Motion.button\n {...rest}\n className={cx(baseClassName, className)}\n initial={false}\n whileTap=\"tap\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onTap={() => setIsPressed(false)}\n onTapCancel={() => setIsPressed(false)}\n onTapStart={() => setIsPressed(true)}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n pressedAnimation,\n size = 'default',\n transition = { damping: 25, stiffness: 300, type: 'spring' },\n children,\n ...rest\n}: SwitchThumbProps) => {\n const Motion = useMotionComponent();\n const { isPressed } = useSwitchContext();\n const baseClassName = thumbVariants({ size });\n\n const defaultPressedAnimation = {\n width: size === 'small' ? 16 : 22,\n };\n\n return (\n <Switch.Thumb\n render={\n <Motion.span\n layout\n animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n className={cx(baseClassName, className)}\n transition={transition}\n {...rest}\n >\n {children}\n </Motion.span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n if (position === 'thumb') return styles.iconThumb;\n if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n transition = { bounce: 0, type: 'spring' },\n ...rest\n}: SwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n const Motion = useMotionComponent();\n const { isChecked } = useSwitchContext();\n const size = (rest as any).size || 'default';\n\n const isAnimated = useMemo(() => {\n if (position === 'right') return !isChecked;\n if (position === 'left') return isChecked;\n if (position === 'thumb') return true;\n return false;\n }, [position, isChecked]);\n\n const positionClass = getIconPositionClass(position, size);\n\n return (\n <Motion.span\n animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n className={cx(styles.icon, positionClass, className)}\n transition={transition}\n {...rest}\n >\n {children}\n </Motion.span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":";;;;;;;;;AAoBA,MAAM,gBAAgB,cAAwC,KAAK;AAEnE,MAAa,yBAAyB;CACpC,MAAM,UAAU,IAAI,cAAc;AAClC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAEtE,QAAO;;AAQT,MAAa,cAAc,EACzB,SACA,WACA,gBACA,iBACA,SACA,OAAO,WACP,UACA,UACA,UACA,UACA,UACA,IACA,MACA,GAAG,WAC0B;CAC7B,MAAM,SAAS,oBAAoB;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,eAAe,OACnB,KACD;CAED,MAAM,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Switch/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Switch } from '@base-ui/react/switch';\nimport { cx } from 'antd-style';\nimport type { KeyboardEvent, MouseEvent } from 'react';\nimport { createContext, use, useMemo, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { rootVariants, styles, thumbVariants } from './style';\nimport type {\n SwitchChangeEventHandler,\n SwitchContextType,\n SwitchIconPosition,\n SwitchIconProps,\n SwitchRootProps,\n SwitchThumbProps,\n} from './type';\n\nconst SwitchContext = createContext<SwitchContextType | null>(null);\n\nexport const useSwitchContext = () => {\n const context = use(SwitchContext);\n if (!context) {\n throw new Error('useSwitchContext must be used within a SwitchRoot');\n }\n return context;\n};\n\ntype SwitchRootInternalProps = Omit<SwitchRootProps, 'onCheckedChange' | 'onClick'> & {\n onCheckedChange?: SwitchChangeEventHandler;\n onClick?: SwitchChangeEventHandler;\n};\n\nexport const SwitchRoot = ({\n checked,\n className,\n defaultChecked,\n onCheckedChange,\n onClick,\n size = 'default',\n children,\n disabled,\n readOnly,\n required,\n inputRef,\n id,\n name,\n ...rest\n}: SwitchRootInternalProps) => {\n const Motion = useMotionComponent();\n const [isPressed, setIsPressed] = useState(false);\n const lastEventRef = useRef<MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>>(\n null,\n );\n\n const [isChecked, setIsChecked] = useControlledState(defaultChecked ?? false, {\n defaultValue: defaultChecked,\n onChange: (value: boolean) => {\n if (lastEventRef.current) {\n onCheckedChange?.(value, lastEventRef.current);\n }\n },\n value: checked,\n });\n\n const baseClassName = rootVariants({ size });\n\n const contextValue = useMemo(\n () => ({\n isChecked: Boolean(isChecked),\n isPressed,\n setIsChecked: (value: boolean) => setIsChecked(value),\n setIsPressed,\n }),\n [isChecked, isPressed, setIsChecked],\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n lastEventRef.current = event;\n onClick?.(!isChecked, event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n lastEventRef.current = event;\n }\n (rest as any).onKeyDown?.(event);\n };\n\n return (\n <SwitchContext value={contextValue}>\n <Switch.Root\n checked={isChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={id}\n inputRef={inputRef}\n name={name}\n readOnly={readOnly}\n required={required}\n render={\n <Motion.button\n {...rest}\n className={cx(baseClassName, className)}\n initial={false}\n whileTap=\"tap\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onTap={() => setIsPressed(false)}\n onTapCancel={() => setIsPressed(false)}\n onTapStart={() => setIsPressed(true)}\n />\n }\n onCheckedChange={setIsChecked}\n >\n {children}\n </Switch.Root>\n </SwitchContext>\n );\n};\n\nSwitchRoot.displayName = 'SwitchRoot';\n\nexport const SwitchThumb = ({\n className,\n pressedAnimation,\n size = 'default',\n transition = { damping: 25, stiffness: 300, type: 'spring' },\n children,\n ...rest\n}: SwitchThumbProps) => {\n const Motion = useMotionComponent();\n const { isPressed } = useSwitchContext();\n const baseClassName = thumbVariants({ size });\n\n const defaultPressedAnimation = {\n width: size === 'small' ? 16 : 22,\n };\n\n return (\n <Switch.Thumb\n render={\n <Motion.span\n layout\n animate={isPressed ? pressedAnimation || defaultPressedAnimation : undefined}\n className={cx(baseClassName, className)}\n transition={transition}\n {...rest}\n >\n {children}\n </Motion.span>\n }\n />\n );\n};\n\nSwitchThumb.displayName = 'SwitchThumb';\n\nconst getIconPositionClass = (position: SwitchIconPosition, size: 'default' | 'small') => {\n if (position === 'thumb') return styles.iconThumb;\n if (position === 'left') return size === 'small' ? styles.iconLeftSmall : styles.iconLeft;\n return size === 'small' ? styles.iconRightSmall : styles.iconRight;\n};\n\nexport const SwitchIcon = ({\n children,\n className,\n position,\n transition = { bounce: 0, type: 'spring' },\n ...rest\n}: SwitchIconProps & { children?: React.ReactNode; size?: 'default' | 'small' }) => {\n const Motion = useMotionComponent();\n const { isChecked } = useSwitchContext();\n const size = (rest as any).size || 'default';\n\n const isAnimated = useMemo(() => {\n if (position === 'right') return !isChecked;\n if (position === 'left') return isChecked;\n if (position === 'thumb') return true;\n return false;\n }, [position, isChecked]);\n\n const positionClass = getIconPositionClass(position, size);\n\n return (\n <Motion.span\n animate={isAnimated ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0 }}\n className={cx(styles.icon, positionClass, className)}\n transition={transition}\n {...rest}\n >\n {children}\n </Motion.span>\n );\n};\n\nSwitchIcon.displayName = 'SwitchIcon';\n\nexport { styles as switchStyles } from './style';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"imperative.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cx } from 'antd-style';\nimport { memo, useEffect } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { ToastContext } from './context';\nimport { viewportVariants } from './style';\nimport ToastItem from './Toast';\nimport {\n type ToastAPI,\n type ToastInstance,\n type ToastOptions,\n type ToastPosition,\n type ToastPromiseOptions,\n type ToastType,\n} from './type';\n\n// All possible positions\nconst ALL_POSITIONS: ToastPosition[] = [\n 'top',\n 'top-left',\n 'top-right',\n 'bottom',\n 'bottom-left',\n 'bottom-right',\n];\n\n// Global state management\ninterface ToastState {\n duration: number;\n limit: number;\n position: ToastPosition;\n swipeDirection: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nlet globalState: ToastState = {\n duration: 5000,\n limit: 5,\n position: 'bottom-right',\n swipeDirection: ['down', 'right'],\n};\n\n// Toast managers for each position\nconst toastManagers: Record<ToastPosition, ReturnType<typeof BaseToast.createToastManager>> = {\n 'bottom': BaseToast.createToastManager(),\n 'bottom-left': BaseToast.createToastManager(),\n 'bottom-right': BaseToast.createToastManager(),\n 'top': BaseToast.createToastManager(),\n 'top-left': BaseToast.createToastManager(),\n 'top-right': BaseToast.createToastManager(),\n};\n\nconst activeToastIds: Record<ToastPosition, Set<string>> = {\n 'bottom': new Set(),\n 'bottom-left': new Set(),\n 'bottom-right': new Set(),\n 'top': new Set(),\n 'top-left': new Set(),\n 'top-right': new Set(),\n};\n\nconst getManager = (position: ToastPosition) => toastManagers[position];\n\nconst normalizeOptions = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n type: ToastType,\n): ToastOptions => {\n if (typeof optionsOrMessage === 'string') {\n return {\n description: optionsOrMessage,\n type,\n };\n }\n return {\n ...optionsOrMessage,\n type,\n };\n};\n\nconst createToastInstance = (id: string, position: ToastPosition): ToastInstance => ({\n close: () => getManager(position).close(id),\n id,\n update: (options) => {\n getManager(position).update(id, {\n data: options,\n description: options.description,\n title: options.title,\n });\n },\n});\n\nconst addToast = (options: ToastOptions): ToastInstance => {\n const position = options.placement ?? globalState.position;\n const manager = getManager(position);\n const onRemove = options.onRemove;\n const id = manager.add({\n data: options,\n description: options.description,\n onClose: options.onClose,\n onRemove: () => {\n activeToastIds[position].delete(id);\n onRemove?.();\n },\n timeout: options.duration ?? globalState.duration,\n title: options.title,\n });\n activeToastIds[position].add(id);\n return createToastInstance(id, position);\n};\n\nconst dismissToast = (id?: string) => {\n if (id) {\n // Try to close from all managers since we don't know which position the toast is in\n for (const [position, manager] of Object.entries(toastManagers)) {\n activeToastIds[position as ToastPosition].delete(id);\n manager.close(id);\n }\n } else {\n // Clear all toasts\n for (const [position, manager] of Object.entries(toastManagers)) {\n const ids = Array.from(activeToastIds[position as ToastPosition]);\n for (const toastId of ids) {\n manager.close(toastId);\n }\n activeToastIds[position as ToastPosition].clear();\n }\n }\n};\n\nconst createSuccessToast = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'success'));\n};\n\nconst createErrorToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'error'));\n};\n\nconst createInfoToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'info'));\n};\n\nconst createWarningToast = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'warning'));\n};\n\nconst createLoadingToast = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n const options = normalizeOptions(optionsOrMessage, 'loading');\n // Loading toasts don't auto-dismiss by default\n return addToast({ duration: 0, ...options });\n};\n\nasync function promiseToast<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T> {\n const loadingOptions =\n typeof options.loading === 'string'\n ? { description: options.loading }\n : (options.loading as ToastOptions);\n\n const loadingToast = addToast({\n closable: false,\n duration: 0,\n type: 'loading',\n ...loadingOptions,\n });\n\n try {\n const result = await promise;\n\n loadingToast.close();\n\n const successOptions = (() => {\n if (typeof options.success === 'string') {\n return { description: options.success };\n }\n if (typeof options.success === 'function') {\n return { description: options.success(result) };\n }\n return options.success as ToastOptions;\n })();\n\n addToast({ type: 'success', ...successOptions });\n\n return result;\n } catch (error) {\n loadingToast.close();\n\n const errorOptions = (() => {\n if (typeof options.error === 'string') {\n return { description: options.error };\n }\n if (typeof options.error === 'function') {\n return { description: options.error(error as Error) };\n }\n return options.error as ToastOptions;\n })();\n\n addToast({ type: 'error', ...errorOptions });\n\n throw error;\n }\n}\n\n// Base toast function\nconst baseToast = (options: ToastOptions): ToastInstance => {\n return addToast({ type: 'default', ...options });\n};\n\n// Toast API\nexport const toast: ToastAPI = Object.assign(baseToast, {\n dismiss: dismissToast,\n error: createErrorToast,\n info: createInfoToast,\n loading: createLoadingToast,\n promise: promiseToast,\n success: createSuccessToast,\n warning: createWarningToast,\n});\n\n// Toast List Component\nconst ToastList = memo(() => {\n const { toasts } = BaseToast.useToastManager();\n return toasts.map((t) => <ToastItem key={t.id} toast={t} />);\n});\n\nToastList.displayName = 'ToastList';\n\nexport interface ToastHostProps {\n className?: string;\n /**\n * Default duration for toasts\n * @default 5000\n */\n duration?: number;\n /**\n * Maximum number of toasts\n * @default 5\n */\n limit?: number;\n /**\n * Toast position\n * @default 'bottom-right'\n */\n position?: ToastPosition;\n /**\n * Root element for portal\n */\n root?: HTMLElement | ShadowRoot | null;\n /**\n * Swipe direction to dismiss\n * @default ['down', 'right']\n */\n swipeDirection?: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nexport const ToastHost = memo(\n ({\n root,\n className,\n duration = 5000,\n limit = 5,\n position = 'bottom-right',\n swipeDirection = ['down', 'right'],\n }: ToastHostProps) => {\n const isClient = useIsClient();\n const appElement = useAppElement();\n\n useEffect(() => {\n globalState = {\n duration,\n limit,\n position,\n swipeDirection,\n };\n }, [duration, limit, position, swipeDirection]);\n\n if (!isClient) return null;\n\n const container = root ?? appElement ?? document.body;\n\n return ALL_POSITIONS.map((pos) => (\n <ToastContext key={pos} value={{ position: pos, swipeDirection }}>\n <BaseToast.Provider limit={limit} timeout={duration} toastManager={getManager(pos)}>\n <BaseToast.Portal container={container}>\n <BaseToast.Viewport className={cx(viewportVariants({ position: pos }), className)}>\n <ToastList />\n </BaseToast.Viewport>\n </BaseToast.Portal>\n </BaseToast.Provider>\n </ToastContext>\n ));\n },\n);\n\nToastHost.displayName = 'ToastHost';\n\n// Hook to use toast manager\nexport const useToast = () => toast;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"imperative.mjs","names":["BaseToast"],"sources":["../../../src/base-ui/Toast/imperative.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cx } from 'antd-style';\nimport { memo, useEffect } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { ToastContext } from './context';\nimport { viewportVariants } from './style';\nimport ToastItem from './Toast';\nimport {\n type ToastAPI,\n type ToastInstance,\n type ToastOptions,\n type ToastPosition,\n type ToastPromiseOptions,\n type ToastType,\n} from './type';\n\n// All possible positions\nconst ALL_POSITIONS: ToastPosition[] = [\n 'top',\n 'top-left',\n 'top-right',\n 'bottom',\n 'bottom-left',\n 'bottom-right',\n];\n\n// Global state management\ninterface ToastState {\n duration: number;\n limit: number;\n position: ToastPosition;\n swipeDirection: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nlet globalState: ToastState = {\n duration: 5000,\n limit: 5,\n position: 'bottom-right',\n swipeDirection: ['down', 'right'],\n};\n\n// Toast managers for each position\nconst toastManagers: Record<ToastPosition, ReturnType<typeof BaseToast.createToastManager>> = {\n 'bottom': BaseToast.createToastManager(),\n 'bottom-left': BaseToast.createToastManager(),\n 'bottom-right': BaseToast.createToastManager(),\n 'top': BaseToast.createToastManager(),\n 'top-left': BaseToast.createToastManager(),\n 'top-right': BaseToast.createToastManager(),\n};\n\nconst activeToastIds: Record<ToastPosition, Set<string>> = {\n 'bottom': new Set(),\n 'bottom-left': new Set(),\n 'bottom-right': new Set(),\n 'top': new Set(),\n 'top-left': new Set(),\n 'top-right': new Set(),\n};\n\nconst getManager = (position: ToastPosition) => toastManagers[position];\n\nconst normalizeOptions = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n type: ToastType,\n): ToastOptions => {\n if (typeof optionsOrMessage === 'string') {\n return {\n description: optionsOrMessage,\n type,\n };\n }\n return {\n ...optionsOrMessage,\n type,\n };\n};\n\nconst createToastInstance = (id: string, position: ToastPosition): ToastInstance => ({\n close: () => getManager(position).close(id),\n id,\n update: (options) => {\n getManager(position).update(id, {\n data: options,\n description: options.description,\n title: options.title,\n });\n },\n});\n\nconst addToast = (options: ToastOptions): ToastInstance => {\n const position = options.placement ?? globalState.position;\n const manager = getManager(position);\n const onRemove = options.onRemove;\n const id = manager.add({\n data: options,\n description: options.description,\n onClose: options.onClose,\n onRemove: () => {\n activeToastIds[position].delete(id);\n onRemove?.();\n },\n timeout: options.duration ?? globalState.duration,\n title: options.title,\n });\n activeToastIds[position].add(id);\n return createToastInstance(id, position);\n};\n\nconst dismissToast = (id?: string) => {\n if (id) {\n // Try to close from all managers since we don't know which position the toast is in\n for (const [position, manager] of Object.entries(toastManagers)) {\n activeToastIds[position as ToastPosition].delete(id);\n manager.close(id);\n }\n } else {\n // Clear all toasts\n for (const [position, manager] of Object.entries(toastManagers)) {\n const ids = Array.from(activeToastIds[position as ToastPosition]);\n for (const toastId of ids) {\n manager.close(toastId);\n }\n activeToastIds[position as ToastPosition].clear();\n }\n }\n};\n\nconst createSuccessToast = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'success'));\n};\n\nconst createErrorToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'error'));\n};\n\nconst createInfoToast = (optionsOrMessage: Omit<ToastOptions, 'type'> | string): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'info'));\n};\n\nconst createWarningToast = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n return addToast(normalizeOptions(optionsOrMessage, 'warning'));\n};\n\nconst createLoadingToast = (\n optionsOrMessage: Omit<ToastOptions, 'type'> | string,\n): ToastInstance => {\n const options = normalizeOptions(optionsOrMessage, 'loading');\n // Loading toasts don't auto-dismiss by default\n return addToast({ duration: 0, ...options });\n};\n\nasync function promiseToast<T>(promise: Promise<T>, options: ToastPromiseOptions<T>): Promise<T> {\n const loadingOptions =\n typeof options.loading === 'string'\n ? { description: options.loading }\n : (options.loading as ToastOptions);\n\n const loadingToast = addToast({\n closable: false,\n duration: 0,\n type: 'loading',\n ...loadingOptions,\n });\n\n try {\n const result = await promise;\n\n loadingToast.close();\n\n const successOptions = (() => {\n if (typeof options.success === 'string') {\n return { description: options.success };\n }\n if (typeof options.success === 'function') {\n return { description: options.success(result) };\n }\n return options.success as ToastOptions;\n })();\n\n addToast({ type: 'success', ...successOptions });\n\n return result;\n } catch (error) {\n loadingToast.close();\n\n const errorOptions = (() => {\n if (typeof options.error === 'string') {\n return { description: options.error };\n }\n if (typeof options.error === 'function') {\n return { description: options.error(error as Error) };\n }\n return options.error as ToastOptions;\n })();\n\n addToast({ type: 'error', ...errorOptions });\n\n throw error;\n }\n}\n\n// Base toast function\nconst baseToast = (options: ToastOptions): ToastInstance => {\n return addToast({ type: 'default', ...options });\n};\n\n// Toast API\nexport const toast: ToastAPI = Object.assign(baseToast, {\n dismiss: dismissToast,\n error: createErrorToast,\n info: createInfoToast,\n loading: createLoadingToast,\n promise: promiseToast,\n success: createSuccessToast,\n warning: createWarningToast,\n});\n\n// Toast List Component\nconst ToastList = memo(() => {\n const { toasts } = BaseToast.useToastManager();\n return toasts.map((t) => <ToastItem key={t.id} toast={t} />);\n});\n\nToastList.displayName = 'ToastList';\n\nexport interface ToastHostProps {\n className?: string;\n /**\n * Default duration for toasts\n * @default 5000\n */\n duration?: number;\n /**\n * Maximum number of toasts\n * @default 5\n */\n limit?: number;\n /**\n * Toast position\n * @default 'bottom-right'\n */\n position?: ToastPosition;\n /**\n * Root element for portal\n */\n root?: HTMLElement | ShadowRoot | null;\n /**\n * Swipe direction to dismiss\n * @default ['down', 'right']\n */\n swipeDirection?: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];\n}\n\nexport const ToastHost = memo(\n ({\n root,\n className,\n duration = 5000,\n limit = 5,\n position = 'bottom-right',\n swipeDirection = ['down', 'right'],\n }: ToastHostProps) => {\n const isClient = useIsClient();\n const appElement = useAppElement();\n\n useEffect(() => {\n globalState = {\n duration,\n limit,\n position,\n swipeDirection,\n };\n }, [duration, limit, position, swipeDirection]);\n\n if (!isClient) return null;\n\n const container = root ?? appElement ?? document.body;\n\n return ALL_POSITIONS.map((pos) => (\n <ToastContext key={pos} value={{ position: pos, swipeDirection }}>\n <BaseToast.Provider limit={limit} timeout={duration} toastManager={getManager(pos)}>\n <BaseToast.Portal container={container}>\n <BaseToast.Viewport className={cx(viewportVariants({ position: pos }), className)}>\n <ToastList />\n </BaseToast.Viewport>\n </BaseToast.Portal>\n </BaseToast.Provider>\n </ToastContext>\n ));\n },\n);\n\nToastHost.displayName = 'ToastHost';\n\n// Hook to use toast manager\nexport const useToast = () => toast;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/brand/BrandLoading/index.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport type { DivProps, SvgProps } from '@/types';\n\nexport interface BrandLoadingProps {\n size?: number;\n text: FC<SvgProps & DivProps & { size?: number }>;\n}\n\nconst BrandLoading: FC<BrandLoadingProps & SvgProps & DivProps> = ({ size, text, ...rest }) => {\n const RenderText = text;\n\n return <RenderText className={'lobe-brand-loading'} size={size} {...rest} />;\n};\n\nBrandLoading.displayName = 'BrandLoading';\n\nexport default BrandLoading;\n"],"mappings":";;AASA,MAAM,gBAA6D,EAAE,MAAM,MAAM,GAAG,WAAW;AAG7F,QAAO,
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["RenderText"],"sources":["../../../src/brand/BrandLoading/index.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport type { DivProps, SvgProps } from '@/types';\n\nexport interface BrandLoadingProps {\n size?: number;\n text: FC<SvgProps & DivProps & { size?: number }>;\n}\n\nconst BrandLoading: FC<BrandLoadingProps & SvgProps & DivProps> = ({ size, text, ...rest }) => {\n const RenderText = text;\n\n return <RenderText className={'lobe-brand-loading'} size={size} {...rest} />;\n};\n\nBrandLoading.displayName = 'BrandLoading';\n\nexport default BrandLoading;\n"],"mappings":";;AASA,MAAM,gBAA6D,EAAE,MAAM,MAAM,GAAG,WAAW;AAG7F,QAAO,oBAACA,MAAD;EAAY,WAAW;EAA4B;EAAM,GAAI;EAAQ,CAAA;;AAG9E,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/brand/Logo3d/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ImageProps } from 'antd';\nimport { type FC } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport Img from '@/Img';\nimport type { ImgProps } from '@/types';\n\nimport { LOGO_3D } from '../LobeHub/style';\n\ntype Logo3dProps = Omit<ImgProps & ImageProps, 'width' | 'height' | 'src'> & {\n size?: number | string;\n};\n\nconst Logo3d: FC<Logo3dProps> = ({ size = '1em', style, alt = 'LobeHub', ...rest }) => {\n const genCdnUrl = useCdnFn();\n return (\n <Img alt={alt} height={size} src={genCdnUrl(LOGO_3D)} style={style} width={size} {...rest} />\n );\n};\n\nLogo3d.displayName = 'LobeHubLogo3d';\n\nexport default Logo3d;\n"],"mappings":";;;;;;AAeA,MAAM,UAA2B,EAAE,OAAO,OAAO,OAAO,MAAM,WAAW,GAAG,WAAW;AAErF,QACE,oBAAC,KAAD;EAAU;EAAK,QAAQ;EAAM,KAFb,
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/brand/Logo3d/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ImageProps } from 'antd';\nimport { type FC } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport Img from '@/Img';\nimport type { ImgProps } from '@/types';\n\nimport { LOGO_3D } from '../LobeHub/style';\n\ntype Logo3dProps = Omit<ImgProps & ImageProps, 'width' | 'height' | 'src'> & {\n size?: number | string;\n};\n\nconst Logo3d: FC<Logo3dProps> = ({ size = '1em', style, alt = 'LobeHub', ...rest }) => {\n const genCdnUrl = useCdnFn();\n return (\n <Img alt={alt} height={size} src={genCdnUrl(LOGO_3D)} style={style} width={size} {...rest} />\n );\n};\n\nLogo3d.displayName = 'LobeHubLogo3d';\n\nexport default Logo3d;\n"],"mappings":";;;;;;AAeA,MAAM,UAA2B,EAAE,OAAO,OAAO,OAAO,MAAM,WAAW,GAAG,WAAW;AAErF,QACE,oBAAC,KAAD;EAAU;EAAK,QAAQ;EAAM,KAFb,UAE2B,CAAC,QAAQ;EAAS;EAAO,OAAO;EAAM,GAAI;EAAQ,CAAA;;AAIjG,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Actions.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { type FC, type Ref, useMemo } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from '../style';\n\nexport interface ActionsProps {\n actions: ChatItemProps['actions'];\n editing?: boolean;\n placement?: ChatItemProps['placement'];\n ref?: Ref<HTMLDivElement>;\n variant?: ChatItemProps['variant'];\n}\n\nconst Actions: FC<ActionsProps> = ({\n actions,\n placement = 'left',\n variant = 'bubble',\n editing,\n ref,\n}) => {\n const actionsClassName = useMemo(() => {\n if (variant === 'bubble') {\n return placement === 'left' ? styles.actionsBubbleLeft : styles.actionsBubbleRight;\n }\n return placement === 'left' ? styles.actionsDocsLeft : styles.actionsDocsRight;\n }, [placement, variant]);\n\n return (\n <Flexbox\n align={'flex-start'}\n className={cx(actionsClassName, editing && styles.actionsEditing)}\n ref={ref}\n role=\"menubar\"\n >\n {actions}\n </Flexbox>\n );\n};\n\nexport default Actions;\n"],"mappings":";;;;;;AAgBA,MAAM,WAA6B,EACjC,SACA,YAAY,QACZ,UAAU,UACV,SACA,UACI;AAQJ,QACE,oBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAVU,cAAc;AACrC,OAAI,YAAY,SACd,QAAO,cAAc,SAAS,OAAO,oBAAoB,OAAO;AAElE,UAAO,cAAc,SAAS,OAAO,kBAAkB,OAAO;KAC7D,CAAC,WAAW,QAAQ,
|
|
1
|
+
{"version":3,"file":"Actions.mjs","names":["Flexbox"],"sources":["../../../../src/chat/ChatItem/components/Actions.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { type FC, type Ref, useMemo } from 'react';\n\nimport { type ChatItemProps } from '@/chat/ChatItem';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from '../style';\n\nexport interface ActionsProps {\n actions: ChatItemProps['actions'];\n editing?: boolean;\n placement?: ChatItemProps['placement'];\n ref?: Ref<HTMLDivElement>;\n variant?: ChatItemProps['variant'];\n}\n\nconst Actions: FC<ActionsProps> = ({\n actions,\n placement = 'left',\n variant = 'bubble',\n editing,\n ref,\n}) => {\n const actionsClassName = useMemo(() => {\n if (variant === 'bubble') {\n return placement === 'left' ? styles.actionsBubbleLeft : styles.actionsBubbleRight;\n }\n return placement === 'left' ? styles.actionsDocsLeft : styles.actionsDocsRight;\n }, [placement, variant]);\n\n return (\n <Flexbox\n align={'flex-start'}\n className={cx(actionsClassName, editing && styles.actionsEditing)}\n ref={ref}\n role=\"menubar\"\n >\n {actions}\n </Flexbox>\n );\n};\n\nexport default Actions;\n"],"mappings":";;;;;;AAgBA,MAAM,WAA6B,EACjC,SACA,YAAY,QACZ,UAAU,UACV,SACA,UACI;AAQJ,QACE,oBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAVU,cAAc;AACrC,OAAI,YAAY,SACd,QAAO,cAAc,SAAS,OAAO,oBAAoB,OAAO;AAElE,UAAO,cAAc,SAAS,OAAO,kBAAkB,OAAO;KAC7D,CAAC,WAAW,QAAQ,CAKW,EAAE,WAAW,OAAO,eAAe;EAC5D;EACL,MAAK;YAEJ;EACO,CAAA"}
|
|
@@ -5,14 +5,14 @@ import MessageModal from "../MessageModal/MessageModal.mjs";
|
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
|
-
import
|
|
8
|
+
import useMergeState from "use-merge-value";
|
|
9
9
|
//#region src/chat/EditableMessage/EditableMessage.tsx
|
|
10
10
|
const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {
|
|
11
|
-
const [isEdit, setTyping] =
|
|
11
|
+
const [isEdit, setTyping] = useMergeState(false, {
|
|
12
12
|
onChange: onEditingChange,
|
|
13
13
|
value: editing
|
|
14
14
|
});
|
|
15
|
-
const [expand, setExpand] =
|
|
15
|
+
const [expand, setExpand] = useMergeState(false, {
|
|
16
16
|
onChange: onOpenChange,
|
|
17
17
|
value: openModal
|
|
18
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableMessage.mjs","names":[],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n ({\n value,\n onChange,\n classNames = {},\n onEditingChange,\n editing,\n openModal,\n onOpenChange,\n placeholder,\n showEditWhenEmpty = false,\n styles: customStyles,\n className,\n style,\n height,\n variant,\n editButtonSize,\n text,\n fullFeaturedCodeBlock,\n model,\n fontSize,\n language = 'markdown',\n markdownProps,\n }) => {\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [expand, setExpand] = useControlledState<boolean>(false, {\n onChange: onOpenChange,\n value: openModal,\n });\n\n const isAutoSize = height === 'auto';\n\n const input = (\n <MessageInput\n shortcut\n className={cx(className, classNames?.input)}\n classNames={classNames}\n defaultValue={value}\n editButtonSize={editButtonSize}\n height={height}\n language={language}\n placeholder={placeholder}\n styles={customStyles}\n text={text}\n variant={variant}\n style={{\n ...style,\n ...customStyles?.input,\n }}\n onCancel={() => setTyping(false)}\n onConfirm={(text) => {\n onChange?.(text);\n setTyping(false);\n }}\n />\n );\n\n if (!value && showEditWhenEmpty) return input;\n\n return (\n <>\n {!expand && isEdit ? (\n input\n ) : (\n <Markdown\n className={cx(className, classNames?.markdown)}\n fontSize={fontSize}\n fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n variant={'chat'}\n style={{\n height: isAutoSize ? 'unset' : height,\n ...style,\n ...customStyles?.markdown,\n }}\n {...markdownProps}\n >\n {value || placeholder || ''}\n </Markdown>\n )}\n {expand && (\n <MessageModal\n editing={isEdit}\n extra={model?.extra}\n footer={model?.footer}\n height={height}\n language={language}\n open={expand}\n placeholder={placeholder}\n text={text}\n value={value}\n onChange={onChange}\n onEditingChange={setTyping}\n onOpenChange={(e) => {\n setExpand(e);\n setTyping(false);\n }}\n />\n )}\n </>\n );\n },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,EAAE,EACf,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"EditableMessage.mjs","names":["useControlledState"],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n ({\n value,\n onChange,\n classNames = {},\n onEditingChange,\n editing,\n openModal,\n onOpenChange,\n placeholder,\n showEditWhenEmpty = false,\n styles: customStyles,\n className,\n style,\n height,\n variant,\n editButtonSize,\n text,\n fullFeaturedCodeBlock,\n model,\n fontSize,\n language = 'markdown',\n markdownProps,\n }) => {\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [expand, setExpand] = useControlledState<boolean>(false, {\n onChange: onOpenChange,\n value: openModal,\n });\n\n const isAutoSize = height === 'auto';\n\n const input = (\n <MessageInput\n shortcut\n className={cx(className, classNames?.input)}\n classNames={classNames}\n defaultValue={value}\n editButtonSize={editButtonSize}\n height={height}\n language={language}\n placeholder={placeholder}\n styles={customStyles}\n text={text}\n variant={variant}\n style={{\n ...style,\n ...customStyles?.input,\n }}\n onCancel={() => setTyping(false)}\n onConfirm={(text) => {\n onChange?.(text);\n setTyping(false);\n }}\n />\n );\n\n if (!value && showEditWhenEmpty) return input;\n\n return (\n <>\n {!expand && isEdit ? (\n input\n ) : (\n <Markdown\n className={cx(className, classNames?.markdown)}\n fontSize={fontSize}\n fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n variant={'chat'}\n style={{\n height: isAutoSize ? 'unset' : height,\n ...style,\n ...customStyles?.markdown,\n }}\n {...markdownProps}\n >\n {value || placeholder || ''}\n </Markdown>\n )}\n {expand && (\n <MessageModal\n editing={isEdit}\n extra={model?.extra}\n footer={model?.footer}\n height={height}\n language={language}\n open={expand}\n placeholder={placeholder}\n text={text}\n value={value}\n onChange={onChange}\n onEditingChange={setTyping}\n onOpenChange={(e) => {\n setExpand(e);\n setTyping(false);\n }}\n />\n )}\n </>\n );\n },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,EAAE,EACf,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAaA,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAaA,cAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAW,GAAG,WAAW,YAAY,MAAM;EAC/B;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACD,gBAAgB,UAAU,MAAM;EAChC,YAAY,SAAS;AACnB,cAAW,KAAK;AAChB,aAAU,MAAM;;EAElB,CAAA;AAGJ,KAAI,CAAC,SAAS,kBAAmB,QAAO;AAExC,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAW,GAAG,WAAW,YAAY,SAAS;EACpC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;GAClB;EACD,GAAI;YAEH,SAAS,eAAe;EAChB,CAAA,EAEZ,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;AACnB,aAAU,EAAE;AACZ,aAAU,MAAM;;EAElB,CAAA,CAEH,EAAA,CAAA;EAGR;AAED,gBAAgB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableMessageList.mjs","names":["editableMessageMessages","Flexbox"],"sources":["../../../src/chat/EditableMessageList/EditableMessageList.tsx"],"sourcesContent":["'use client';\n\nimport isEqual from 'fast-deep-equal';\nimport { Plus, Trash } from 'lucide-react';\nimport { memo, useEffect, useReducer } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Button from '@/Button';\nimport ControlInput from '@/EditableText/ControlInput';\nimport { Flexbox } from '@/Flex';\nimport editableMessageMessages from '@/i18n/resources/en/editableMessage';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Select from '@/Select';\n\nimport { messagesReducer } from './messageReducer';\nimport { type EditableMessageListProps } from './type';\n\nconst EditableMessageList = memo<EditableMessageListProps>(\n ({ disabled, dataSources, onChange, texts }) => {\n const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);\n const { t } = useTranslation(editableMessageMessages);\n\n const addPropsText = texts?.addProps ?? t('editableMessage.addProps');\n const deleteText = texts?.delete ?? t('editableMessage.delete');\n const inputPlaceholderText = texts?.inputPlaceholder ?? t('editableMessage.inputPlaceholder');\n const outputPlaceholderText =\n texts?.outputPlaceholder ?? t('editableMessage.outputPlaceholder');\n const systemText = texts?.system ?? t('editableMessage.system');\n const inputText = texts?.input ?? t('editableMessage.input');\n const outputText = texts?.output ?? t('editableMessage.output');\n\n useEffect(() => {\n if (!isEqual(dataSources, chatMessages)) {\n onChange?.(chatMessages);\n }\n }, [chatMessages]);\n\n return dataSources ? (\n <Flexbox gap={12}>\n {chatMessages.map((item, index) => (\n <Flexbox\n horizontal\n align={'center'}\n gap={8}\n key={`${index}-${item.content}`}\n width={'100%'}\n >\n <Select\n disabled={disabled}\n style={{ width: 120 }}\n styles={{ popup: { root: { zIndex: 100 } } }}\n value={item.role}\n options={[\n { label: systemText, value: 'system' },\n { label: inputText, value: 'user' },\n { label: outputText, value: 'assistant' },\n ]}\n onChange={(value) => {\n dispatch({ index, role: value, type: 'updateMessageRole' });\n }}\n />\n <ControlInput\n disabled={disabled}\n placeholder={item.role === 'user' ? inputPlaceholderText : outputPlaceholderText}\n value={item.content}\n onChange={(e) => {\n dispatch({ index, message: e, type: 'updateMessage' });\n }}\n />\n <ActionIcon\n icon={Trash}\n title={deleteText}\n variant={'filled'}\n onClick={() => {\n dispatch({ index, type: 'deleteMessage' });\n }}\n />\n </Flexbox>\n ))}\n\n <Button\n block\n disabled={disabled}\n icon={Plus}\n onClick={() => {\n const lastMeg = chatMessages.at(-1);\n\n dispatch({\n message: { content: '', role: lastMeg?.role === 'user' ? 'assistant' : 'user' },\n type: 'addMessage',\n });\n }}\n >\n {addPropsText}\n </Button>\n </Flexbox>\n ) : undefined;\n },\n isEqual,\n);\n\nEditableMessageList.displayName = 'EditableMessageList';\n\nexport default EditableMessageList;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,sBAAsB,MACzB,EAAE,UAAU,aAAa,UAAU,YAAY;CAC9C,MAAM,CAAC,cAAc,YAAY,WAAW,iBAAiB,YAAY;CACzE,MAAM,EAAE,MAAM,eAAeA,wBAAwB;CAErD,MAAM,eAAe,OAAO,YAAY,EAAE,2BAA2B;CACrE,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;CAC/D,MAAM,uBAAuB,OAAO,oBAAoB,EAAE,mCAAmC;CAC7F,MAAM,wBACJ,OAAO,qBAAqB,EAAE,oCAAoC;CACpE,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;CAC/D,MAAM,YAAY,OAAO,SAAS,EAAE,wBAAwB;CAC5D,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;AAE/D,iBAAgB;AACd,MAAI,CAAC,QAAQ,aAAa,aAAa,CACrC,YAAW,aAAa;IAEzB,CAAC,aAAa,CAAC;AAElB,QAAO,cACL,qBAACC,mBAAD;EAAS,KAAK;YAAd,CACG,aAAa,KAAK,MAAM,UACvB,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,KAAK;GAEL,OAAO;aALT;IAOE,oBAAC,QAAD;KACY;KACV,OAAO,EAAE,OAAO,KAAK;KACrB,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,KAAK,EAAE,EAAE;KAC5C,OAAO,KAAK;KACZ,SAAS;MACP;OAAE,OAAO;OAAY,OAAO;OAAU;MACtC;OAAE,OAAO;OAAW,OAAO;OAAQ;MACnC;OAAE,OAAO;OAAY,OAAO;OAAa;MAC1C;KACD,WAAW,UAAU;AACnB,eAAS;OAAE;OAAO,MAAM;OAAO,MAAM;OAAqB,CAAC;;KAE7D,CAAA;IACF,oBAAC,cAAD;KACY;KACV,aAAa,KAAK,SAAS,SAAS,uBAAuB;KAC3D,OAAO,KAAK;KACZ,WAAW,MAAM;AACf,eAAS;OAAE;OAAO,SAAS;OAAG,MAAM;OAAiB,CAAC;;KAExD,CAAA;IACF,oBAAC,YAAD;KACE,MAAM;KACN,OAAO;KACP,SAAS;KACT,eAAe;AACb,eAAS;OAAE;OAAO,MAAM;OAAiB,CAAC;;KAE5C,CAAA;IACM;KAjCH,GAAG,MAAM,GAAG,KAAK,UAiCd,CACV,EAEF,oBAAC,QAAD;GACE,OAAA;GACU;GACV,MAAM;GACN,eAAe;AAGb,aAAS;KACP,SAAS;MAAE,SAAS;MAAI,MAHV,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"EditableMessageList.mjs","names":["editableMessageMessages","Flexbox"],"sources":["../../../src/chat/EditableMessageList/EditableMessageList.tsx"],"sourcesContent":["'use client';\n\nimport isEqual from 'fast-deep-equal';\nimport { Plus, Trash } from 'lucide-react';\nimport { memo, useEffect, useReducer } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Button from '@/Button';\nimport ControlInput from '@/EditableText/ControlInput';\nimport { Flexbox } from '@/Flex';\nimport editableMessageMessages from '@/i18n/resources/en/editableMessage';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Select from '@/Select';\n\nimport { messagesReducer } from './messageReducer';\nimport { type EditableMessageListProps } from './type';\n\nconst EditableMessageList = memo<EditableMessageListProps>(\n ({ disabled, dataSources, onChange, texts }) => {\n const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);\n const { t } = useTranslation(editableMessageMessages);\n\n const addPropsText = texts?.addProps ?? t('editableMessage.addProps');\n const deleteText = texts?.delete ?? t('editableMessage.delete');\n const inputPlaceholderText = texts?.inputPlaceholder ?? t('editableMessage.inputPlaceholder');\n const outputPlaceholderText =\n texts?.outputPlaceholder ?? t('editableMessage.outputPlaceholder');\n const systemText = texts?.system ?? t('editableMessage.system');\n const inputText = texts?.input ?? t('editableMessage.input');\n const outputText = texts?.output ?? t('editableMessage.output');\n\n useEffect(() => {\n if (!isEqual(dataSources, chatMessages)) {\n onChange?.(chatMessages);\n }\n }, [chatMessages]);\n\n return dataSources ? (\n <Flexbox gap={12}>\n {chatMessages.map((item, index) => (\n <Flexbox\n horizontal\n align={'center'}\n gap={8}\n key={`${index}-${item.content}`}\n width={'100%'}\n >\n <Select\n disabled={disabled}\n style={{ width: 120 }}\n styles={{ popup: { root: { zIndex: 100 } } }}\n value={item.role}\n options={[\n { label: systemText, value: 'system' },\n { label: inputText, value: 'user' },\n { label: outputText, value: 'assistant' },\n ]}\n onChange={(value) => {\n dispatch({ index, role: value, type: 'updateMessageRole' });\n }}\n />\n <ControlInput\n disabled={disabled}\n placeholder={item.role === 'user' ? inputPlaceholderText : outputPlaceholderText}\n value={item.content}\n onChange={(e) => {\n dispatch({ index, message: e, type: 'updateMessage' });\n }}\n />\n <ActionIcon\n icon={Trash}\n title={deleteText}\n variant={'filled'}\n onClick={() => {\n dispatch({ index, type: 'deleteMessage' });\n }}\n />\n </Flexbox>\n ))}\n\n <Button\n block\n disabled={disabled}\n icon={Plus}\n onClick={() => {\n const lastMeg = chatMessages.at(-1);\n\n dispatch({\n message: { content: '', role: lastMeg?.role === 'user' ? 'assistant' : 'user' },\n type: 'addMessage',\n });\n }}\n >\n {addPropsText}\n </Button>\n </Flexbox>\n ) : undefined;\n },\n isEqual,\n);\n\nEditableMessageList.displayName = 'EditableMessageList';\n\nexport default EditableMessageList;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,sBAAsB,MACzB,EAAE,UAAU,aAAa,UAAU,YAAY;CAC9C,MAAM,CAAC,cAAc,YAAY,WAAW,iBAAiB,YAAY;CACzE,MAAM,EAAE,MAAM,eAAeA,wBAAwB;CAErD,MAAM,eAAe,OAAO,YAAY,EAAE,2BAA2B;CACrE,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;CAC/D,MAAM,uBAAuB,OAAO,oBAAoB,EAAE,mCAAmC;CAC7F,MAAM,wBACJ,OAAO,qBAAqB,EAAE,oCAAoC;CACpE,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;CAC/D,MAAM,YAAY,OAAO,SAAS,EAAE,wBAAwB;CAC5D,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;AAE/D,iBAAgB;AACd,MAAI,CAAC,QAAQ,aAAa,aAAa,CACrC,YAAW,aAAa;IAEzB,CAAC,aAAa,CAAC;AAElB,QAAO,cACL,qBAACC,mBAAD;EAAS,KAAK;YAAd,CACG,aAAa,KAAK,MAAM,UACvB,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,KAAK;GAEL,OAAO;aALT;IAOE,oBAAC,QAAD;KACY;KACV,OAAO,EAAE,OAAO,KAAK;KACrB,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,KAAK,EAAE,EAAE;KAC5C,OAAO,KAAK;KACZ,SAAS;MACP;OAAE,OAAO;OAAY,OAAO;OAAU;MACtC;OAAE,OAAO;OAAW,OAAO;OAAQ;MACnC;OAAE,OAAO;OAAY,OAAO;OAAa;MAC1C;KACD,WAAW,UAAU;AACnB,eAAS;OAAE;OAAO,MAAM;OAAO,MAAM;OAAqB,CAAC;;KAE7D,CAAA;IACF,oBAAC,cAAD;KACY;KACV,aAAa,KAAK,SAAS,SAAS,uBAAuB;KAC3D,OAAO,KAAK;KACZ,WAAW,MAAM;AACf,eAAS;OAAE;OAAO,SAAS;OAAG,MAAM;OAAiB,CAAC;;KAExD,CAAA;IACF,oBAAC,YAAD;KACE,MAAM;KACN,OAAO;KACP,SAAS;KACT,eAAe;AACb,eAAS;OAAE;OAAO,MAAM;OAAiB,CAAC;;KAE5C,CAAA;IACM;KAjCH,GAAG,MAAM,GAAG,KAAK,UAiCd,CACV,EAEF,oBAAC,QAAD;GACE,OAAA;GACU;GACV,MAAM;GACN,eAAe;AAGb,aAAS;KACP,SAAS;MAAE,SAAS;MAAI,MAHV,aAAa,GAAG,GAGO,EAAE,SAAS,SAAS,cAAc;MAAQ;KAC/E,MAAM;KACP,CAAC;;aAGH;GACM,CAAA,CACD;MACR,KAAA;GAEN,QACD;AAED,oBAAoB,cAAc"}
|
|
@@ -11,16 +11,16 @@ import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
|
|
|
11
11
|
import { memo, useState } from "react";
|
|
12
12
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useResponsive } from "antd-style";
|
|
14
|
-
import
|
|
14
|
+
import useMergeState from "use-merge-value";
|
|
15
15
|
//#region src/chat/MessageModal/MessageModal.tsx
|
|
16
16
|
const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenChange, onEditingChange, placeholder, value, language = "markdown", onChange, text, footer, extra }) => {
|
|
17
17
|
const { mobile } = useResponsive();
|
|
18
18
|
const { t } = useTranslation(messageModal_default);
|
|
19
|
-
const [isEdit, setTyping] =
|
|
19
|
+
const [isEdit, setTyping] = useMergeState(false, {
|
|
20
20
|
onChange: onEditingChange,
|
|
21
21
|
value: editing
|
|
22
22
|
});
|
|
23
|
-
const [showModal, setShowModal] =
|
|
23
|
+
const [showModal, setShowModal] = useMergeState(false, {
|
|
24
24
|
onChange: onOpenChange,
|
|
25
25
|
value: open
|
|
26
26
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","Flexbox","textStyles"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport { styles as textStyles } from '@/chat/MessageInput/style';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\n\nimport { type MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n ({\n panelRef,\n editing,\n open,\n height = '75vh',\n onOpenChange,\n onEditingChange,\n placeholder,\n value,\n language = 'markdown',\n onChange,\n text,\n footer,\n extra,\n }) => {\n const { mobile } = useResponsive();\n const { t } = useTranslation(messageModalMessages);\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [showModal, setShowModal] = useControlledState(false, {\n onChange: onOpenChange,\n value: open,\n });\n\n const [temporaryValue, setMessage] = useState(value);\n\n const confirmText = text?.confirm ?? t('messageModal.confirm');\n const cancelText = text?.cancel ?? t('messageModal.cancel');\n const editText = text?.edit ?? t('messageModal.edit');\n\n const modalFooter = isEdit ? (\n <Flexbox direction={'horizontal-reverse'} gap={8}>\n <Button\n type=\"primary\"\n onClick={() => {\n setTyping(false);\n onChange?.(temporaryValue);\n setMessage(value);\n }}\n >\n {confirmText}\n </Button>\n <Button\n onClick={() => {\n setTyping(false);\n setMessage(value);\n }}\n >\n {cancelText}\n </Button>\n </Flexbox>\n ) : (\n footer\n );\n\n return (\n <Modal\n allowFullscreen\n destroyOnHidden\n cancelText={cancelText}\n footer={modalFooter}\n height={height}\n okText={editText}\n open={showModal}\n panelRef={panelRef}\n title={text?.title}\n onOk={() => setTyping(true)}\n onCancel={() => {\n setShowModal(false);\n setTyping(false);\n setMessage(value);\n }}\n >\n {isEdit ? (\n mobile ? (\n <TextArea\n autoSize\n className={textStyles}\n defaultValue={temporaryValue}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onChange={(value) => setMessage(value.target.value)}\n />\n ) : (\n <CodeEditor\n className={textStyles}\n defaultValue={temporaryValue}\n language={language}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onValueChange={(value) => setMessage(value)}\n />\n )\n ) : (\n <>\n {extra}\n <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n </>\n )}\n </Modal>\n );\n },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,qBAAqB;CAClD,MAAM,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"MessageModal.mjs","names":["messageModalMessages","useControlledState","Flexbox","textStyles"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport { styles as textStyles } from '@/chat/MessageInput/style';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\n\nimport { type MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n ({\n panelRef,\n editing,\n open,\n height = '75vh',\n onOpenChange,\n onEditingChange,\n placeholder,\n value,\n language = 'markdown',\n onChange,\n text,\n footer,\n extra,\n }) => {\n const { mobile } = useResponsive();\n const { t } = useTranslation(messageModalMessages);\n const [isEdit, setTyping] = useControlledState(false, {\n onChange: onEditingChange,\n value: editing,\n });\n\n const [showModal, setShowModal] = useControlledState(false, {\n onChange: onOpenChange,\n value: open,\n });\n\n const [temporaryValue, setMessage] = useState(value);\n\n const confirmText = text?.confirm ?? t('messageModal.confirm');\n const cancelText = text?.cancel ?? t('messageModal.cancel');\n const editText = text?.edit ?? t('messageModal.edit');\n\n const modalFooter = isEdit ? (\n <Flexbox direction={'horizontal-reverse'} gap={8}>\n <Button\n type=\"primary\"\n onClick={() => {\n setTyping(false);\n onChange?.(temporaryValue);\n setMessage(value);\n }}\n >\n {confirmText}\n </Button>\n <Button\n onClick={() => {\n setTyping(false);\n setMessage(value);\n }}\n >\n {cancelText}\n </Button>\n </Flexbox>\n ) : (\n footer\n );\n\n return (\n <Modal\n allowFullscreen\n destroyOnHidden\n cancelText={cancelText}\n footer={modalFooter}\n height={height}\n okText={editText}\n open={showModal}\n panelRef={panelRef}\n title={text?.title}\n onOk={() => setTyping(true)}\n onCancel={() => {\n setShowModal(false);\n setTyping(false);\n setMessage(value);\n }}\n >\n {isEdit ? (\n mobile ? (\n <TextArea\n autoSize\n className={textStyles}\n defaultValue={temporaryValue}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onChange={(value) => setMessage(value.target.value)}\n />\n ) : (\n <CodeEditor\n className={textStyles}\n defaultValue={temporaryValue}\n language={language}\n placeholder={placeholder}\n value={temporaryValue}\n variant={'borderless'}\n onBlur={(e) => setMessage(e.target.value)}\n onValueChange={(value) => setMessage(value)}\n />\n )\n ) : (\n <>\n {extra}\n <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n </>\n )}\n </Modal>\n );\n },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAaC,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgBA,cAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAAC,OAAD;EACE,iBAAA;EACA,iBAAA;EACY;EACZ,QA9BgB,SAClB,qBAACC,mBAAD;GAAS,WAAW;GAAsB,KAAK;aAA/C,CACE,oBAAC,QAAD;IACE,MAAK;IACL,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;cAGlB;IACM,CAAA,EACT,oBAAC,QAAD;IACE,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;IACM,CAAA,CACD;OAEV;EASU;EACR,QAAQ;EACR,MAAM;EACI;EACV,OAAO,MAAM;EACb,YAAY,UAAU,KAAK;EAC3B,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;YAGlB,SACC,SACE,oBAAC,UAAD;GACE,UAAA;GACA,WAAWC;GACX,cAAc;GACD;GACb,OAAO;GACP,SAAS;GACT,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,UAAU,WAAW,MAAM,OAAO,MAAM;GACnD,CAAA,GAEF,oBAAC,YAAD;GACE,WAAWA;GACX,cAAc;GACJ;GACG;GACb,OAAO;GACP,SAAS;GACT,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,UAAU,WAAW,MAAM;GAC3C,CAAA,GAGJ,qBAAA,YAAA,EAAA,UAAA,CACG,OACD,oBAAC,UAAD;GAAU,SAAS;aAAS,OAAO,SAAS,YAAY;GAAY,CAAA,CACnE,EAAA,CAAA;EAEC,CAAA;EAGb;AAED,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHighlight.mjs","names":["lobeTheme"],"sources":["../../src/hooks/useHighlight.ts"],"sourcesContent":["'use client';\n\nimport {\n transformerNotationDiff,\n transformerNotationErrorLevel,\n transformerNotationFocus,\n transformerNotationHighlight,\n transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type CSSProperties, useEffect, useMemo, useState } from 'react';\nimport type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';\nimport { Md5 } from 'ts-md5';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\n// Application-level cache to avoid repeated calculations\nexport const MD5_LENGTH_THRESHOLD = 10_000; // Use async MD5 for text exceeding this length\n\nexport type StreamingHighlightResult = {\n lines: ThemedToken[][];\n preStyle?: CSSProperties;\n};\n\n// Application-level cache for highlighted HTML\n// Key: cacheKey string, Value: Promise<string>\nconst highlightCache = new Map<string, Promise<string>>();\n\n// Maximum cache size to prevent memory leaks\nconst MAX_CACHE_SIZE = 1000;\n\n// Clean up old cache entries when limit is reached\nconst cleanupCache = () => {\n if (highlightCache.size > MAX_CACHE_SIZE) {\n // Remove oldest 20% of entries\n const entriesToRemove = Math.floor(MAX_CACHE_SIZE * 0.2);\n const keysToRemove = Array.from(highlightCache.keys()).slice(0, entriesToRemove);\n for (const key of keysToRemove) {\n highlightCache.delete(key);\n }\n }\n};\n\nexport type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;\nexport type ShikiModule = typeof import('shiki');\n\n// Use codeToHtml shorthand for better performance\n// It automatically manages highlighter instances and loads themes/languages on-demand\nlet codeToHtmlPromise: Promise<ICodeToHtml | null> | null = null;\n\nconst loadCodeToHtml = (): Promise<ICodeToHtml | null> => {\n if (typeof window === 'undefined') return Promise.resolve(null);\n\n if (!codeToHtmlPromise) {\n codeToHtmlPromise = import('shiki').then((mod) => mod.codeToHtml ?? null);\n }\n\n return codeToHtmlPromise;\n};\n\n// Export shikiModulePromise for useStreamHighlight compatibility\nconst loadShikiModule = (): Promise<ShikiModule | null> => {\n if (typeof window === 'undefined') return Promise.resolve(null);\n return import('shiki');\n};\nexport const shikiModulePromise = loadShikiModule();\n\n// Helper function: Safe HTML escaping\nexport const escapeHtml = (str: string): string => {\n return str\n .replaceAll('&', '&')\n .replaceAll('<', '<')\n .replaceAll('>', '>')\n .replaceAll('\"', '"')\n .replaceAll(\"'\", ''');\n};\n\n// Main highlight component - optimized version without SWR\nconst customThemes = {\n 'lobe-theme': lobeTheme,\n};\n\nexport const useHighlight = (\n text: string,\n {\n language,\n enableTransformer,\n theme: builtinTheme,\n streaming,\n }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n): string => {\n // Safely handle language and text with boundary checks\n const safeText = text ?? '';\n const lang = (language ?? 'plaintext').toLowerCase();\n\n // Match supported languages\n const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n // Optimize transformer creation\n const transformers = useMemo(() => {\n if (!enableTransformer) return;\n return [\n transformerNotationDiff(),\n transformerNotationHighlight(),\n transformerNotationWordHighlight(),\n transformerNotationFocus(),\n transformerNotationErrorLevel(),\n ];\n }, [enableTransformer]);\n\n // Build cache key\n const cacheKey = useMemo((): string | null => {\n if (streaming) return null;\n // Use hash for long text\n const hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);\n return [matchedLanguage, builtinTheme, hash].filter(Boolean).join('-');\n }, [safeText, matchedLanguage, builtinTheme, streaming]);\n\n const [data, setData] = useState<string | undefined>();\n\n useEffect(() => {\n if (!cacheKey) {\n setData(undefined);\n return;\n }\n\n // Check cache first\n const cachedPromise = highlightCache.get(cacheKey);\n if (cachedPromise) {\n cachedPromise\n .then((html) => {\n setData(html);\n })\n .catch(() => {\n // Silently handle errors, fallback will be handled in the promise\n });\n return;\n }\n\n // Create new promise for highlighting\n // Using codeToHtml shorthand: automatically loads themes/languages on-demand\n const highlightPromise = (async (): Promise<string> => {\n try {\n // Try full rendering with transformers\n const shikiModule = await shikiModulePromise;\n if (!shikiModule) return safeText;\n\n const effectiveTheme = builtinTheme || 'lobe-theme';\n\n // Load custom theme if using slack-dark or slack-ochin\n if (!builtinTheme && effectiveTheme === 'lobe-theme') {\n const customTheme = customThemes[effectiveTheme];\n if (customTheme) {\n // Use getSingletonHighlighter to load custom theme\n const highlighter = await shikiModule.getSingletonHighlighter({\n langs: [matchedLanguage],\n themes: [customTheme as any],\n });\n\n const html = await highlighter.codeToHtml(safeText, {\n lang: matchedLanguage,\n theme: effectiveTheme,\n transformers,\n });\n\n return html;\n }\n }\n\n // Fallback to codeToHtml for builtin themes\n const codeToHtml = await loadCodeToHtml();\n if (!codeToHtml) return safeText;\n\n const html = await codeToHtml(safeText, {\n lang: matchedLanguage,\n theme: effectiveTheme,\n transformers,\n });\n\n return html;\n } catch (error_) {\n console.error('Advanced rendering failed:', error_);\n\n try {\n // Try simple rendering (without transformers)\n const codeToHtml = await loadCodeToHtml();\n if (!codeToHtml) return safeText;\n const html = await codeToHtml(safeText, {\n lang: matchedLanguage,\n theme: 'lobe-theme',\n });\n return html;\n } catch {\n // Fallback to plain text\n const fallbackHtml = `<pre class=\"fallback\"><code>${escapeHtml(safeText)}</code></pre>`;\n return fallbackHtml;\n }\n }\n })();\n\n // Cache the promise\n highlightCache.set(cacheKey, highlightPromise);\n cleanupCache();\n\n // Handle promise result\n highlightPromise\n .then((html) => {\n // Only update if this is still the current cache key\n if (highlightCache.get(cacheKey) === highlightPromise) {\n setData(html);\n }\n })\n .catch(() => {\n // Remove failed promise from cache\n if (highlightCache.get(cacheKey) === highlightPromise) {\n highlightCache.delete(cacheKey);\n }\n });\n }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers, customThemes]);\n\n return data || '';\n};\n"],"mappings":";;;;;;AA0BA,MAAM,iCAAiB,IAAI,KAA8B;AAGzD,MAAM,iBAAiB;AAGvB,MAAM,qBAAqB;AACzB,KAAI,eAAe,OAAO,gBAAgB;EAExC,MAAM,kBAAkB,KAAK,MAAM,iBAAiB,GAAI;EACxD,MAAM,eAAe,MAAM,KAAK,eAAe,MAAM,CAAC,CAAC,MAAM,GAAG,gBAAgB;AAChF,OAAK,MAAM,OAAO,aAChB,gBAAe,OAAO,IAAI;;;AAUhC,IAAI,oBAAwD;AAE5D,MAAM,uBAAoD;AACxD,KAAI,OAAO,WAAW,YAAa,QAAO,QAAQ,QAAQ,KAAK;AAE/D,KAAI,CAAC,kBACH,qBAAoB,OAAO,SAAS,MAAM,QAAQ,IAAI,cAAc,KAAK;AAG3E,QAAO;;AAIT,MAAM,wBAAqD;AACzD,KAAI,OAAO,WAAW,YAAa,QAAO,QAAQ,QAAQ,KAAK;AAC/D,QAAO,OAAO;;AAEhB,MAAa,qBAAqB,iBAAiB;AAGnD,MAAa,cAAc,QAAwB;AACjD,QAAO,IACJ,WAAW,KAAK,QAAQ,CACxB,WAAW,KAAK,OAAO,CACvB,WAAW,KAAK,OAAO,CACvB,WAAW,MAAK,SAAS,CACzB,WAAW,KAAK,SAAS;;AAI9B,MAAM,eAAe,EACnB,cAAcA,oBACf;AAED,MAAa,gBACX,MACA,EACE,UACA,mBACA,OAAO,cACP,gBAES;CAEX,MAAM,WAAW,QAAQ;CACzB,MAAM,QAAQ,YAAY,aAAa,aAAa;CAGpD,MAAM,kBAAkB,cAAc,uBAAuB,KAAK,EAAE,CAAC,KAAK,CAAC;CAG3E,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,kBAAmB;AACxB,SAAO;GACL,yBAAyB;GACzB,8BAA8B;GAC9B,kCAAkC;GAClC,0BAA0B;GAC1B,+BAA+B;GAChC;IACA,CAAC,kBAAkB,CAAC;CAGvB,MAAM,WAAW,cAA6B;AAC5C,MAAI,UAAW,QAAO;AAGtB,SAAO;GAAC;GAAiB;GADZ,SAAS,SAAA,MAAgC,WAAW,IAAI,QAAQ,SAAS;GAC1C,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;IACrE;EAAC;EAAU;EAAiB;EAAc;EAAU,CAAC;CAExD,MAAM,CAAC,MAAM,WAAW,UAA8B;AAEtD,iBAAgB;AACd,MAAI,CAAC,UAAU;AACb,WAAQ,KAAA,EAAU;AAClB;;EAIF,MAAM,gBAAgB,eAAe,IAAI,SAAS;AAClD,MAAI,eAAe;AACjB,iBACG,MAAM,SAAS;AACd,YAAQ,KAAK;KACb,CACD,YAAY,GAEX;AACJ;;EAKF,MAAM,oBAAoB,YAA6B;AACrD,OAAI;IAEF,MAAM,cAAc,MAAM;AAC1B,QAAI,CAAC,YAAa,QAAO;IAEzB,MAAM,iBAAiB,gBAAgB;AAGvC,QAAI,CAAC,gBAAgB,mBAAmB,cAAc;KACpD,MAAM,cAAc,aAAa;AACjC,SAAI,YAaF,
|
|
1
|
+
{"version":3,"file":"useHighlight.mjs","names":["lobeTheme"],"sources":["../../src/hooks/useHighlight.ts"],"sourcesContent":["'use client';\n\nimport {\n transformerNotationDiff,\n transformerNotationErrorLevel,\n transformerNotationFocus,\n transformerNotationHighlight,\n transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type CSSProperties, useEffect, useMemo, useState } from 'react';\nimport type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';\nimport { Md5 } from 'ts-md5';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\n// Application-level cache to avoid repeated calculations\nexport const MD5_LENGTH_THRESHOLD = 10_000; // Use async MD5 for text exceeding this length\n\nexport type StreamingHighlightResult = {\n lines: ThemedToken[][];\n preStyle?: CSSProperties;\n};\n\n// Application-level cache for highlighted HTML\n// Key: cacheKey string, Value: Promise<string>\nconst highlightCache = new Map<string, Promise<string>>();\n\n// Maximum cache size to prevent memory leaks\nconst MAX_CACHE_SIZE = 1000;\n\n// Clean up old cache entries when limit is reached\nconst cleanupCache = () => {\n if (highlightCache.size > MAX_CACHE_SIZE) {\n // Remove oldest 20% of entries\n const entriesToRemove = Math.floor(MAX_CACHE_SIZE * 0.2);\n const keysToRemove = Array.from(highlightCache.keys()).slice(0, entriesToRemove);\n for (const key of keysToRemove) {\n highlightCache.delete(key);\n }\n }\n};\n\nexport type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;\nexport type ShikiModule = typeof import('shiki');\n\n// Use codeToHtml shorthand for better performance\n// It automatically manages highlighter instances and loads themes/languages on-demand\nlet codeToHtmlPromise: Promise<ICodeToHtml | null> | null = null;\n\nconst loadCodeToHtml = (): Promise<ICodeToHtml | null> => {\n if (typeof window === 'undefined') return Promise.resolve(null);\n\n if (!codeToHtmlPromise) {\n codeToHtmlPromise = import('shiki').then((mod) => mod.codeToHtml ?? null);\n }\n\n return codeToHtmlPromise;\n};\n\n// Export shikiModulePromise for useStreamHighlight compatibility\nconst loadShikiModule = (): Promise<ShikiModule | null> => {\n if (typeof window === 'undefined') return Promise.resolve(null);\n return import('shiki');\n};\nexport const shikiModulePromise = loadShikiModule();\n\n// Helper function: Safe HTML escaping\nexport const escapeHtml = (str: string): string => {\n return str\n .replaceAll('&', '&')\n .replaceAll('<', '<')\n .replaceAll('>', '>')\n .replaceAll('\"', '"')\n .replaceAll(\"'\", ''');\n};\n\n// Main highlight component - optimized version without SWR\nconst customThemes = {\n 'lobe-theme': lobeTheme,\n};\n\nexport const useHighlight = (\n text: string,\n {\n language,\n enableTransformer,\n theme: builtinTheme,\n streaming,\n }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n): string => {\n // Safely handle language and text with boundary checks\n const safeText = text ?? '';\n const lang = (language ?? 'plaintext').toLowerCase();\n\n // Match supported languages\n const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n // Optimize transformer creation\n const transformers = useMemo(() => {\n if (!enableTransformer) return;\n return [\n transformerNotationDiff(),\n transformerNotationHighlight(),\n transformerNotationWordHighlight(),\n transformerNotationFocus(),\n transformerNotationErrorLevel(),\n ];\n }, [enableTransformer]);\n\n // Build cache key\n const cacheKey = useMemo((): string | null => {\n if (streaming) return null;\n // Use hash for long text\n const hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);\n return [matchedLanguage, builtinTheme, hash].filter(Boolean).join('-');\n }, [safeText, matchedLanguage, builtinTheme, streaming]);\n\n const [data, setData] = useState<string | undefined>();\n\n useEffect(() => {\n if (!cacheKey) {\n setData(undefined);\n return;\n }\n\n // Check cache first\n const cachedPromise = highlightCache.get(cacheKey);\n if (cachedPromise) {\n cachedPromise\n .then((html) => {\n setData(html);\n })\n .catch(() => {\n // Silently handle errors, fallback will be handled in the promise\n });\n return;\n }\n\n // Create new promise for highlighting\n // Using codeToHtml shorthand: automatically loads themes/languages on-demand\n const highlightPromise = (async (): Promise<string> => {\n try {\n // Try full rendering with transformers\n const shikiModule = await shikiModulePromise;\n if (!shikiModule) return safeText;\n\n const effectiveTheme = builtinTheme || 'lobe-theme';\n\n // Load custom theme if using slack-dark or slack-ochin\n if (!builtinTheme && effectiveTheme === 'lobe-theme') {\n const customTheme = customThemes[effectiveTheme];\n if (customTheme) {\n // Use getSingletonHighlighter to load custom theme\n const highlighter = await shikiModule.getSingletonHighlighter({\n langs: [matchedLanguage],\n themes: [customTheme as any],\n });\n\n const html = await highlighter.codeToHtml(safeText, {\n lang: matchedLanguage,\n theme: effectiveTheme,\n transformers,\n });\n\n return html;\n }\n }\n\n // Fallback to codeToHtml for builtin themes\n const codeToHtml = await loadCodeToHtml();\n if (!codeToHtml) return safeText;\n\n const html = await codeToHtml(safeText, {\n lang: matchedLanguage,\n theme: effectiveTheme,\n transformers,\n });\n\n return html;\n } catch (error_) {\n console.error('Advanced rendering failed:', error_);\n\n try {\n // Try simple rendering (without transformers)\n const codeToHtml = await loadCodeToHtml();\n if (!codeToHtml) return safeText;\n const html = await codeToHtml(safeText, {\n lang: matchedLanguage,\n theme: 'lobe-theme',\n });\n return html;\n } catch {\n // Fallback to plain text\n const fallbackHtml = `<pre class=\"fallback\"><code>${escapeHtml(safeText)}</code></pre>`;\n return fallbackHtml;\n }\n }\n })();\n\n // Cache the promise\n highlightCache.set(cacheKey, highlightPromise);\n cleanupCache();\n\n // Handle promise result\n highlightPromise\n .then((html) => {\n // Only update if this is still the current cache key\n if (highlightCache.get(cacheKey) === highlightPromise) {\n setData(html);\n }\n })\n .catch(() => {\n // Remove failed promise from cache\n if (highlightCache.get(cacheKey) === highlightPromise) {\n highlightCache.delete(cacheKey);\n }\n });\n }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers, customThemes]);\n\n return data || '';\n};\n"],"mappings":"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"}
|