@lobehub/ui 5.29.0 → 5.29.2
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.
|
@@ -400,7 +400,7 @@ const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = tr
|
|
|
400
400
|
display: "flex",
|
|
401
401
|
flexDirection: "column",
|
|
402
402
|
minHeight: 0,
|
|
403
|
-
...mode === "fixed" ? { height: "100%" } : {}
|
|
403
|
+
...mode === "fixed" ? isVertical ? { width: "100%" } : { height: "100%" } : {}
|
|
404
404
|
} : {};
|
|
405
405
|
const stableResizableStyle = {
|
|
406
406
|
display: "flex",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n type CSSProperties,\n memo,\n startTransition,\n use,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { isBelowCollapseThreshold, reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n bottom: ChevronUp,\n left: ChevronRight,\n right: ChevronLeft,\n top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n bottom: { marginTop: 4 },\n left: { marginRight: 4 },\n right: { marginLeft: 4 },\n top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n};\n\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n if (typeof value === 'string' && value.length > 0) return value;\n return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n headerHeight = 0,\n fullscreen,\n maxHeight,\n pin = true,\n mode = 'fixed',\n children,\n placement = 'right',\n resize,\n style,\n showBorder = true,\n showHandleHighlight = false,\n showHandleWideArea = true,\n backgroundColor,\n collapseThreshold,\n size,\n stableLayout = true,\n defaultSize: customizeDefaultSize,\n minWidth,\n minHeight,\n maxWidth,\n onSizeChange,\n onSizeDragging,\n expandable = true,\n expand,\n defaultExpand = true,\n onExpandChange,\n className,\n showHandleWhenCollapsed,\n destroyOnClose,\n styles: customStyles,\n classNames,\n dir,\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const isHovering = useHover(ref);\n const isVertical = placement === 'top' || placement === 'bottom';\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resizableRef = useRef<Resizable>(null);\n const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n const resizeStartSizeRef = useRef<Size | undefined>(undefined);\n const outerRef = useRef<HTMLDivElement>(null);\n\n const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n const direction = dir ?? antdDirection;\n\n const internalPlacement = useMemo(() => {\n if (direction !== 'rtl') return placement;\n if (placement === 'left') return 'right';\n if (placement === 'right') return 'left';\n return placement;\n }, [direction, placement]);\n\n const cssVariables = {\n '--draggable-panel-bg': backgroundColor || '',\n '--draggable-panel-header-height': `${headerHeight}px`,\n } as Record<string, string>;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n\n const [shouldTransition, setShouldTransition] = useState(true);\n const [showExpand, setShowExpand] = useState(true);\n const usesStableLayout = stableLayout || collapseThreshold !== undefined;\n\n useEffect(() => {\n if (pin) return;\n\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n\n if (isHovering && !isExpand) {\n startTransition(() => setIsExpand(true));\n } else if (!isHovering && isExpand) {\n hoverTimeoutRef.current = setTimeout(() => {\n startTransition(() => setIsExpand(false));\n }, 150);\n }\n }, [pin, isHovering, isExpand, setIsExpand]);\n\n useEffect(() => {\n return () => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n initialExpandedSizeRef.current = undefined;\n }, [internalPlacement]);\n\n const reversed = reversePlacement(internalPlacement);\n const canResizing = resize !== false && isExpand;\n\n const resizing = useMemo(\n () => ({\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n [reversed]: true,\n ...(resize as Enable),\n }),\n [reversed, resize],\n );\n\n const defaultSize: Size = useMemo(() => {\n if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n return { height: '100%', width: 280, ...customizeDefaultSize };\n }, [isVertical, customizeDefaultSize]);\n const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n const sizeProps = useMemo(() => {\n if (!usesStableLayout && !isExpand) {\n return isVertical\n ? { minHeight: 0, size: { height: 0 } }\n : { minWidth: 0, size: { width: 0 } };\n }\n\n return {\n defaultSize,\n maxHeight: normalizedMaxHeight,\n maxWidth: normalizedMaxWidth,\n minHeight: normalizedMinHeight,\n minWidth: normalizedMinWidth,\n size: size as Size,\n };\n }, [\n usesStableLayout,\n isExpand,\n isVertical,\n defaultSize,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n size,\n ]);\n\n const fallbackExpandedSize = isVertical ? '180px' : '280px';\n const controlledExpandedSize = useMemo(() => {\n const controlledSize = isVertical ? size?.height : size?.width;\n if (controlledSize === undefined) return undefined;\n return toCssSize(controlledSize, fallbackExpandedSize);\n }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n const defaultExpandedSize = useMemo(() => {\n const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n return toCssSize(initialSize, fallbackExpandedSize);\n }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n horizontal?: string;\n vertical?: string;\n }>({});\n const expandedOuterSize =\n controlledExpandedSize ??\n (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n defaultExpandedSize;\n\n const setExpandedMainSize = useCallback(\n (nextSize: Size) => {\n if (!usesStableLayout) return;\n\n const currentSize = isVertical ? nextSize.height : nextSize.width;\n if (!currentSize) return;\n\n const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n setResizedExpandedSize((state) =>\n isVertical\n ? { ...state, vertical: normalizedSize }\n : { ...state, horizontal: normalizedSize },\n );\n },\n [fallbackExpandedSize, isVertical, usesStableLayout],\n );\n\n const readCurrentSize = useCallback((): Size | undefined => {\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n if (!rect) return undefined;\n\n return isVertical\n ? { height: rect.height, width: '100%' }\n : { height: '100%', width: rect.width };\n }, [isVertical]);\n\n const captureInitialExpandedSize = useCallback(() => {\n if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n const nextInitialSize = readCurrentSize();\n if (!nextInitialSize) return undefined;\n\n initialExpandedSizeRef.current = nextInitialSize;\n return nextInitialSize;\n }, [readCurrentSize]);\n\n useEffect(() => {\n if (!isExpand) return;\n captureInitialExpandedSize();\n }, [captureInitialExpandedSize, isExpand]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const clampResizeSize = useCallback(\n (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const currentMainSize = isVertical ? rect.height : rect.width;\n const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n let clampedMainSize = currentMainSize;\n if (typeof minMainSize === 'number')\n clampedMainSize = Math.max(clampedMainSize, minMainSize);\n if (typeof maxMainSize === 'number')\n clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n if (\n !Number.isFinite(clampedMainSize) ||\n Math.abs(clampedMainSize - currentMainSize) < 0.5\n ) {\n return { height: el.style.height, width: el.style.width };\n }\n\n const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n resizableRef.current?.updateSize({ height, width });\n\n return { height, width };\n },\n [\n isVertical,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n ],\n );\n\n const handleResize = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n const nextCollapsePreview = isBelowCollapseThreshold({\n axis: isVertical ? 'height' : 'width',\n collapseThreshold,\n size: nextSize,\n });\n\n if (usesStableLayout && outerRef.current) {\n // Sync outer DOM width immediately so it doesn't lag behind the\n // re-resizable inline style (which would otherwise trigger a 0.2s\n // width transition on the outer/aside each frame during drag).\n const dimension = isVertical ? nextSize.height : nextSize.width;\n if (dimension) {\n const previewDimension = nextCollapsePreview ? '0px' : dimension;\n if (isVertical) outerRef.current.style.height = previewDimension;\n else outerRef.current.style.width = previewDimension;\n }\n }\n // With drag-to-collapse enabled, defer the persisted expanded size until\n // pointer release. This keeps the pre-drag width as the single source of\n // truth while the outer stable-layout layer previews collapse/restore.\n if (collapseThreshold === undefined) setExpandedMainSize(nextSize);\n onSizeDragging?.(delta, nextSize);\n },\n [\n clampResizeSize,\n collapseThreshold,\n isVertical,\n onSizeDragging,\n setExpandedMainSize,\n usesStableLayout,\n ],\n );\n\n const triggerResetWithoutTransition = useCallback(() => {\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n\n setShouldTransition(false);\n resetTransitionTimeoutRef.current = setTimeout(() => {\n setShouldTransition(true);\n }, 0);\n }, []);\n\n const handleResetSize = useCallback(() => {\n if (!canResizing) return;\n\n const resetSize = captureInitialExpandedSize();\n if (!resetSize) return;\n\n triggerResetWithoutTransition();\n\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n resizableRef.current?.updateSize(resetSize);\n setExpandedMainSize(resetSize);\n\n onSizeChange?.(\n isVertical\n ? { height: nextMainSize - prevMainSize, width: 0 }\n : { height: 0, width: nextMainSize - prevMainSize },\n resetSize,\n );\n }, [\n canResizing,\n captureInitialExpandedSize,\n isVertical,\n onSizeChange,\n setExpandedMainSize,\n triggerResetWithoutTransition,\n ]);\n\n const handleResizeStart = useCallback(\n (event: { detail?: number }) => {\n if (event.detail === 2) {\n handleResetSize();\n return false;\n }\n\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n resetTransitionTimeoutRef.current = undefined;\n }\n\n resizeStartSizeRef.current = readCurrentSize();\n\n // Synchronously disable the outer transition so the first drag frame\n // does not animate. `setShouldTransition(false)` below is asynchronous\n // and would only take effect after the next React commit.\n if (usesStableLayout && outerRef.current) {\n outerRef.current.style.transition = 'none';\n }\n setShouldTransition(false);\n setShowExpand(false);\n },\n [handleResetSize, readCurrentSize, usesStableLayout],\n );\n\n const handleResizeStop = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n const shouldCollapse = isBelowCollapseThreshold({\n axis: isVertical ? 'height' : 'width',\n collapseThreshold,\n size: nextSize,\n });\n const committedSize = shouldCollapse ? (resizeStartSizeRef.current ?? nextSize) : nextSize;\n\n resizableRef.current?.updateSize(committedSize);\n if (!shouldCollapse) setExpandedMainSize(committedSize);\n setShouldTransition(true);\n setShowExpand(true);\n // Keep the collapsed main-axis size at zero until the controlled\n // `expand=false` value arrives. Clearing it here would reveal the panel\n // for one render between preview teardown and controlled-state commit.\n if (usesStableLayout && outerRef.current) {\n outerRef.current.style.removeProperty('transition');\n if (shouldCollapse) {\n if (isVertical) outerRef.current.style.height = '0px';\n else outerRef.current.style.width = '0px';\n } else {\n outerRef.current.style.removeProperty('width');\n outerRef.current.style.removeProperty('height');\n }\n }\n if (shouldCollapse) setIsExpand(false);\n\n resizeStartSizeRef.current = undefined;\n onSizeChange?.(delta, committedSize);\n },\n [\n clampResizeSize,\n collapseThreshold,\n isVertical,\n onSizeChange,\n setExpandedMainSize,\n setIsExpand,\n usesStableLayout,\n ],\n );\n\n const resizeHandleClassName = useMemo(\n () =>\n cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n [reversed, showHandleHighlight],\n );\n\n if (fullscreen) {\n return (\n <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n {children}\n </div>\n );\n }\n\n const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n const stableOuterFlex = usesStableLayout\n ? ({\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n } as const)\n : {};\n\n const sidebarOuterStyle = isVertical\n ? {\n height: isExpand ? expandedOuterSize : 0,\n overflow: 'hidden',\n transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: '100%',\n ...stableOuterFlex,\n }\n : {\n overflow: 'hidden',\n transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: isExpand ? expandedOuterSize : 0,\n ...(usesStableLayout\n ? {\n ...stableOuterFlex,\n flex: 1,\n minWidth: 0,\n height: '100%',\n }\n : {}),\n };\n\n const stableInnerStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n const sidebarInnerStyle: CSSProperties = usesStableLayout\n ? stableInnerStyle\n : isVertical\n ? { height: '100%', width: '100%' }\n : { width: '100%' };\n\n const stableAsideStyle: CSSProperties = usesStableLayout\n ? {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n ...(mode === 'fixed' ? { height: '100%' } : {}),\n }\n : {};\n\n const stableResizableStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n\n const panelNode = (!destroyOnClose || isExpand) && (\n <Resizable\n ref={resizableRef}\n {...sizeProps}\n className={cx(styles.panel, classNames?.content)}\n enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n handleClasses={\n canResizing\n ? {\n [reversed]: resizeHandleClassName,\n }\n : {}\n }\n style={{\n ...cssVariables,\n transition: shouldTransition ? undefined : 'none',\n ...(usesStableLayout ? stableResizableStyle : {}),\n ...style,\n }}\n onResize={handleResize}\n onResizeStart={handleResizeStart}\n onResizeStop={handleResizeStop}\n >\n {usesStableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n </Resizable>\n );\n\n return (\n <aside\n dir={dir}\n ref={ref}\n style={{ ...cssVariables, ...stableAsideStyle }}\n className={cx(\n panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n className,\n )}\n >\n {expandable && showExpand && (\n <Center\n className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n style={{\n opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n }}\n >\n <Center\n className={classNames?.handle}\n style={customStyles?.handle}\n onClick={toggleExpand}\n >\n <Icon\n className={styles.handlerIcon}\n icon={Arrow}\n size={16}\n style={{\n ...MARGIN_MAP[internalPlacement],\n transform: `rotate(${isExpand ? 180 : 0}deg)`,\n transition: 'transform 0.3s ease',\n }}\n />\n </Center>\n </Center>\n )}\n {usesStableLayout ? (\n <div ref={outerRef} style={sidebarOuterStyle}>\n {panelNode}\n </div>\n ) : (\n panelNode\n )}\n </aside>\n );\n },\n isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,YAAY;CAChB,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,aAAa;CACjB,QAAQ,EAAE,WAAW,EAAE;CACvB,MAAM,EAAE,aAAa,EAAE;CACvB,OAAO,EAAE,YAAY,EAAE;CACvB,KAAK,EAAE,cAAc,EAAE;AACzB;AAEA,MAAM,oBAA4B;CAChC,QAAQ;CACR,YAAY;CACZ,aAAa;CACb,MAAM;CACN,OAAO;CACP,KAAK;CACL,SAAS;CACT,UAAU;AACZ;AAEA,MAAM,aAAa,OAAoC,aAAqB;CAC1E,IAAI,OAAO,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI,OAAO,CAAC,EAAE;CAC5D,IAAI,OAAO,UAAU,YAAY,MAAM,SAAS,GAAG,OAAO;CAC1D,OAAO;AACT;AAEA,MAAM,iBAAiB,MACpB,EACC,eAAe,GACf,YACA,WACA,MAAM,MACN,OAAO,SACP,UACA,YAAY,SACZ,QACA,OACA,aAAa,MACb,sBAAsB,OACtB,qBAAqB,MACrB,iBACA,mBACA,MACA,eAAe,MACf,aAAa,sBACb,UACA,WACA,UACA,cACA,gBACA,aAAa,MACb,QACA,gBAAgB,MAChB,gBACA,WACA,yBACA,gBACA,QAAQ,cACR,YACA,UACI;CACJ,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,aAAa,SAAS,GAAG;CAC/B,MAAM,aAAa,cAAc,SAAS,cAAc;CACxD,MAAM,kBAAkB,OAAsC,KAAA,CAAS;CACvE,MAAM,4BAA4B,OAAsC,KAAA,CAAS;CACjF,MAAM,eAAe,OAAkB,IAAI;CAC3C,MAAM,yBAAyB,OAAyB,KAAA,CAAS;CACjE,MAAM,qBAAqB,OAAyB,KAAA,CAAS;CAC7D,MAAM,WAAW,OAAuB,IAAI;CAE5C,MAAM,EAAE,WAAW,kBAAkB,IAAI,eAAe,aAAa;CACrE,MAAM,YAAY,OAAO;CAEzB,MAAM,oBAAoB,cAAc;EACtC,IAAI,cAAc,OAAO,OAAO;EAChC,IAAI,cAAc,QAAQ,OAAO;EACjC,IAAI,cAAc,SAAS,OAAO;EAClC,OAAO;CACT,GAAG,CAAC,WAAW,SAAS,CAAC;CAEzB,MAAM,eAAe;EACnB,wBAAwB,mBAAmB;EAC3C,mCAAmC,GAAG,aAAa;CACrD;CAEA,MAAM,CAAC,UAAU,eAAeA,cAAmB,eAAe;EAChE,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,IAAI;CAC7D,MAAM,CAAC,YAAY,iBAAiB,SAAS,IAAI;CACjD,MAAM,mBAAmB,gBAAgB,sBAAsB,KAAA;CAE/D,gBAAgB;EACd,IAAI,KAAK;EAET,IAAI,gBAAgB,SAClB,aAAa,gBAAgB,OAAO;EAGtC,IAAI,cAAc,CAAC,UACjB,sBAAsB,YAAY,IAAI,CAAC;OAClC,IAAI,CAAC,cAAc,UACxB,gBAAgB,UAAU,iBAAiB;GACzC,sBAAsB,YAAY,KAAK,CAAC;EAC1C,GAAG,GAAG;CAEV,GAAG;EAAC;EAAK;EAAY;EAAU;CAAW,CAAC;CAE3C,gBAAgB;EACd,aAAa;GACX,IAAI,gBAAgB,SAClB,aAAa,gBAAgB,OAAO;GAEtC,IAAI,0BAA0B,SAC5B,aAAa,0BAA0B,OAAO;EAElD;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,uBAAuB,UAAU,KAAA;CACnC,GAAG,CAAC,iBAAiB,CAAC;CAEtB,MAAM,WAAW,iBAAiB,iBAAiB;CACnD,MAAM,cAAc,WAAW,SAAS;CAExC,MAAM,WAAW,eACR;EACL,QAAQ;EACR,YAAY;EACZ,aAAa;EACb,MAAM;EACN,OAAO;EACP,KAAK;EACL,SAAS;EACT,UAAU;GACT,WAAW;EACZ,GAAI;CACN,IACA,CAAC,UAAU,MAAM,CACnB;CAEA,MAAM,cAAoB,cAAc;EACtC,IAAI,YAAY,OAAO;GAAE,QAAQ;GAAK,OAAO;GAAQ,GAAG;EAAqB;EAC7E,OAAO;GAAE,QAAQ;GAAQ,OAAO;GAAK,GAAG;EAAqB;CAC/D,GAAG,CAAC,YAAY,oBAAoB,CAAC;CACrC,MAAM,sBAAsB,OAAO,cAAc,WAAW,KAAK,IAAI,WAAW,CAAC,IAAI,KAAA;CACrF,MAAM,qBAAqB,OAAO,aAAa,WAAW,KAAK,IAAI,UAAU,CAAC,IAAI,KAAA;CAClF,MAAM,sBAAsB,OAAO,cAAc,WAAW,KAAK,IAAI,WAAW,CAAC,IAAI,KAAA;CACrF,MAAM,qBAAqB,OAAO,aAAa,WAAW,KAAK,IAAI,UAAU,CAAC,IAAI,KAAA;CAElF,MAAM,YAAY,cAAc;EAC9B,IAAI,CAAC,oBAAoB,CAAC,UACxB,OAAO,aACH;GAAE,WAAW;GAAG,MAAM,EAAE,QAAQ,EAAE;EAAE,IACpC;GAAE,UAAU;GAAG,MAAM,EAAE,OAAO,EAAE;EAAE;EAGxC,OAAO;GACL;GACA,WAAW;GACX,UAAU;GACV,WAAW;GACX,UAAU;GACJ;EACR;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,uBAAuB,aAAa,UAAU;CACpD,MAAM,yBAAyB,cAAc;EAC3C,MAAM,iBAAiB,aAAa,MAAM,SAAS,MAAM;EACzD,IAAI,mBAAmB,KAAA,GAAW,OAAO,KAAA;EACzC,OAAO,UAAU,gBAAgB,oBAAoB;CACvD,GAAG;EAAC;EAAY,MAAM;EAAQ,MAAM;EAAO;CAAoB,CAAC;CAChE,MAAM,sBAAsB,cAAc;EACxC,MAAM,cAAc,aAAa,YAAY,SAAS,YAAY;EAClE,OAAO,UAAU,aAAa,oBAAoB;CACpD,GAAG;EAAC;EAAY,YAAY;EAAQ,YAAY;EAAO;CAAoB,CAAC;CAC5E,MAAM,CAAC,qBAAqB,0BAA0B,SAGnD,CAAC,CAAC;CACL,MAAM,oBACJ,2BACC,aAAa,oBAAoB,WAAW,oBAAoB,eACjE;CAEF,MAAM,sBAAsB,aACzB,aAAmB;EAClB,IAAI,CAAC,kBAAkB;EAEvB,MAAM,cAAc,aAAa,SAAS,SAAS,SAAS;EAC5D,IAAI,CAAC,aAAa;EAElB,MAAM,iBAAiB,UAAU,aAAa,oBAAoB;EAClE,wBAAwB,UACtB,aACI;GAAE,GAAG;GAAO,UAAU;EAAe,IACrC;GAAE,GAAG;GAAO,YAAY;EAAe,CAC7C;CACF,GACA;EAAC;EAAsB;EAAY;CAAgB,CACrD;CAEA,MAAM,kBAAkB,kBAAoC;EAC1D,MAAM,OAAO,aAAa,SAAS,WAAW,sBAAsB;EACpE,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,OAAO,aACH;GAAE,QAAQ,KAAK;GAAQ,OAAO;EAAO,IACrC;GAAE,QAAQ;GAAQ,OAAO,KAAK;EAAM;CAC1C,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,6BAA6B,kBAAkB;EACnD,IAAI,uBAAuB,SAAS,OAAO,uBAAuB;EAElE,MAAM,kBAAkB,gBAAgB;EACxC,IAAI,CAAC,iBAAiB,OAAO,KAAA;EAE7B,uBAAuB,UAAU;EACjC,OAAO;CACT,GAAG,CAAC,eAAe,CAAC;CAEpB,gBAAgB;EACd,IAAI,CAAC,UAAU;EACf,2BAA2B;CAC7B,GAAG,CAAC,4BAA4B,QAAQ,CAAC;CAEzC,MAAM,eAAe,kBAAkB;EACrC,IAAI,YAAY,YAAY,CAAC,QAAQ;CACvC,GAAG;EAAC;EAAY;EAAU;CAAW,CAAC;CAEtC,MAAM,kBAAkB,aACrB,OAAoB;EACnB,MAAM,OAAO,GAAG,sBAAsB;EACtC,MAAM,kBAAkB,aAAa,KAAK,SAAS,KAAK;EACxD,MAAM,cAAc,aAAa,sBAAsB;EACvD,MAAM,cAAc,aAAa,sBAAsB;EAEvD,IAAI,kBAAkB;EACtB,IAAI,OAAO,gBAAgB,UACzB,kBAAkB,KAAK,IAAI,iBAAiB,WAAW;EACzD,IAAI,OAAO,gBAAgB,UACzB,kBAAkB,KAAK,IAAI,iBAAiB,WAAW;EAEzD,IACE,CAAC,OAAO,SAAS,eAAe,KAChC,KAAK,IAAI,kBAAkB,eAAe,IAAI,IAE9C,OAAO;GAAE,QAAQ,GAAG,MAAM;GAAQ,OAAO,GAAG,MAAM;EAAM;EAG1D,MAAM,QAAQ,aAAa,GAAG,MAAM,SAAS,SAAS,GAAG,gBAAgB;EACzE,MAAM,SAAS,aAAa,GAAG,gBAAgB,MAAM,GAAG,MAAM,UAAU;EACxE,aAAa,SAAS,WAAW;GAAE;GAAQ;EAAM,CAAC;EAElD,OAAO;GAAE;GAAQ;EAAM;CACzB,GACA;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,eAAe,aAClB,QAAiB,YAAqB,IAAiB,UAAsB;EAC5E,MAAM,WAAW,gBAAgB,EAAE;EACnC,MAAM,sBAAsB,yBAAyB;GACnD,MAAM,aAAa,WAAW;GAC9B;GACA,MAAM;EACR,CAAC;EAED,IAAI,oBAAoB,SAAS,SAAS;GAIxC,MAAM,YAAY,aAAa,SAAS,SAAS,SAAS;GAC1D,IAAI,WAAW;IACb,MAAM,mBAAmB,sBAAsB,QAAQ;IACvD,IAAI,YAAY,SAAS,QAAQ,MAAM,SAAS;SAC3C,SAAS,QAAQ,MAAM,QAAQ;GACtC;EACF;EAIA,IAAI,sBAAsB,KAAA,GAAW,oBAAoB,QAAQ;EACjE,iBAAiB,OAAO,QAAQ;CAClC,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,gCAAgC,kBAAkB;EACtD,IAAI,0BAA0B,SAC5B,aAAa,0BAA0B,OAAO;EAGhD,oBAAoB,KAAK;EACzB,0BAA0B,UAAU,iBAAiB;GACnD,oBAAoB,IAAI;EAC1B,GAAG,CAAC;CACN,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,kBAAkB;EACxC,IAAI,CAAC,aAAa;EAElB,MAAM,YAAY,2BAA2B;EAC7C,IAAI,CAAC,WAAW;EAEhB,8BAA8B;EAE9B,MAAM,OAAO,aAAa,SAAS,WAAW,sBAAsB;EACpE,MAAM,eAAe,OAAQ,aAAa,KAAK,SAAS,KAAK,QAAS;EACtE,MAAM,gBAAgB,aAAa,UAAU,SAAS,UAAU;EAChE,MAAM,eAAe,OAAO,kBAAkB,WAAW,gBAAgB;EAEzE,aAAa,SAAS,WAAW,SAAS;EAC1C,oBAAoB,SAAS;EAE7B,eACE,aACI;GAAE,QAAQ,eAAe;GAAc,OAAO;EAAE,IAChD;GAAE,QAAQ;GAAG,OAAO,eAAe;EAAa,GACpD,SACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,aACvB,UAA+B;EAC9B,IAAI,MAAM,WAAW,GAAG;GACtB,gBAAgB;GAChB,OAAO;EACT;EAEA,IAAI,0BAA0B,SAAS;GACrC,aAAa,0BAA0B,OAAO;GAC9C,0BAA0B,UAAU,KAAA;EACtC;EAEA,mBAAmB,UAAU,gBAAgB;EAK7C,IAAI,oBAAoB,SAAS,SAC/B,SAAS,QAAQ,MAAM,aAAa;EAEtC,oBAAoB,KAAK;EACzB,cAAc,KAAK;CACrB,GACA;EAAC;EAAiB;EAAiB;CAAgB,CACrD;CAEA,MAAM,mBAAmB,aACtB,QAAiB,YAAqB,IAAiB,UAAsB;EAC5E,MAAM,WAAW,gBAAgB,EAAE;EACnC,MAAM,iBAAiB,yBAAyB;GAC9C,MAAM,aAAa,WAAW;GAC9B;GACA,MAAM;EACR,CAAC;EACD,MAAM,gBAAgB,iBAAkB,mBAAmB,WAAW,WAAY;EAElF,aAAa,SAAS,WAAW,aAAa;EAC9C,IAAI,CAAC,gBAAgB,oBAAoB,aAAa;EACtD,oBAAoB,IAAI;EACxB,cAAc,IAAI;EAIlB,IAAI,oBAAoB,SAAS,SAAS;GACxC,SAAS,QAAQ,MAAM,eAAe,YAAY;GAClD,IAAI,gBAAgB;IAClB,IAAI,YAAY,SAAS,QAAQ,MAAM,SAAS;SAC3C,SAAS,QAAQ,MAAM,QAAQ;GACtC,OAAO;IACL,SAAS,QAAQ,MAAM,eAAe,OAAO;IAC7C,SAAS,QAAQ,MAAM,eAAe,QAAQ;GAChD;EACF;EACA,IAAI,gBAAgB,YAAY,KAAK;EAErC,mBAAmB,UAAU,KAAA;EAC7B,eAAe,OAAO,aAAa;CACrC,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,wBAAwB,cAE1B,GAAG,eAAe,EAAE,WAAW,SAAS,CAAC,GAAG,uBAAuB,OAAO,eAAe,GAC3F,CAAC,UAAU,mBAAmB,CAChC;CAEA,IAAI,YACF,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,YAAY,SAAS;EAAG,OAAO;EACtD;CACE,CAAA;CAIT,MAAM,QAAQ,UAAU,sBAAsB;CAC9C,MAAM,kBAAkB,mBACnB;EACC,SAAS;EACT,eAAe;EACf,WAAW;CACb,IACA,CAAC;CAEL,MAAM,oBAAoB,aACtB;EACE,QAAQ,WAAW,oBAAoB;EACvC,UAAU;EACV,YAAY,mBAAmB,iDAAiD;EAChF,OAAO;EACP,GAAG;CACL,IACA;EACE,UAAU;EACV,YAAY,mBAAmB,gDAAgD;EAC/E,OAAO,WAAW,oBAAoB;EACtC,GAAI,mBACA;GACE,GAAG;GACH,MAAM;GACN,UAAU;GACV,QAAQ;EACV,IACA,CAAC;CACP;CAWJ,MAAM,oBAAmC,mBACrC;EATF,SAAS;EACT,MAAM;EACN,eAAe;EACf,QAAQ;EACR,WAAW;EACX,UAAU;EACV,OAAO;CAGU,IACf,aACE;EAAE,QAAQ;EAAQ,OAAO;CAAO,IAChC,EAAE,OAAO,OAAO;CAEtB,MAAM,mBAAkC,mBACpC;EACE,SAAS;EACT,eAAe;EACf,WAAW;EACX,GAAI,SAAS,UAAU,EAAE,QAAQ,OAAO,IAAI,CAAC;CAC/C,IACA,CAAC;CAEL,MAAM,uBAAsC;EAC1C,SAAS;EACT,MAAM;EACN,eAAe;EACf,QAAQ;EACR,WAAW;EACX,UAAU;EACV,OAAO;CACT;CAEA,MAAM,aAAa,CAAC,kBAAkB,aACpC,oBAAC,WAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,GAAG,OAAO,OAAO,YAAY,OAAO;EAC/C,QAAQ,cAAe,WAAsB;EAC7C,eACE,cACI,GACG,WAAW,sBACd,IACA,CAAC;EAEP,OAAO;GACL,GAAG;GACH,YAAY,mBAAmB,KAAA,IAAY;GAC3C,GAAI,mBAAmB,uBAAuB,CAAC;GAC/C,GAAG;EACL;EACA,UAAU;EACV,eAAe;EACf,cAAc;EAEb,UAAA,mBAAmB,oBAAC,OAAD;GAAK,OAAO;GAAoB;EAAc,CAAA,IAAI;CAC7D,CAAA;CAGb,OACE,qBAAC,SAAD;EACO;EACA;EACL,OAAO;GAAE,GAAG;GAAc,GAAG;EAAiB;EAC9C,WAAW,GACT,cAAc;GAAE;GAAU;GAAM,WAAW;GAAmB;EAAW,CAAC,GAC1E,SACF;EAPF,UAAA,CASG,cAAc,cACb,oBAAC,QAAD;GACE,WAAW,eAAe;IAAE,WAAW;IAAmB;GAAmB,CAAC;GAC9E,OAAO,EACL,SAAS,WAAY,MAAM,KAAA,IAAY,IAAK,0BAA0B,IAAI,EAC5E;GAEA,UAAA,oBAAC,QAAD;IACE,WAAW,YAAY;IACvB,OAAO,cAAc;IACrB,SAAS;IAET,UAAA,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM;KACN,MAAM;KACN,OAAO;MACL,GAAG,WAAW;MACd,WAAW,UAAU,WAAW,MAAM,EAAE;MACxC,YAAY;KACd;IACD,CAAA;GACK,CAAA;EACF,CAAA,GAET,mBACC,oBAAC,OAAD;GAAK,KAAK;GAAU,OAAO;GACxB,UAAA;EACE,CAAA,IAEL,SAEG;;AAEX,GACA,OACF;AAEA,eAAe,cAAc"}
|
|
1
|
+
{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n type CSSProperties,\n memo,\n startTransition,\n use,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { isBelowCollapseThreshold, reversePlacement } from './utils';\n\nconst ARROW_MAP = {\n bottom: ChevronUp,\n left: ChevronRight,\n right: ChevronLeft,\n top: ChevronDown,\n} as const;\n\nconst MARGIN_MAP = {\n bottom: { marginTop: 4 },\n left: { marginRight: 4 },\n right: { marginLeft: 4 },\n top: { marginBottom: 4 },\n} as const;\n\nconst DISABLED_RESIZING: Enable = {\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n};\n\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\n if (typeof value === 'number') return `${Math.max(value, 0)}px`;\n if (typeof value === 'string' && value.length > 0) return value;\n return fallback;\n};\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n headerHeight = 0,\n fullscreen,\n maxHeight,\n pin = true,\n mode = 'fixed',\n children,\n placement = 'right',\n resize,\n style,\n showBorder = true,\n showHandleHighlight = false,\n showHandleWideArea = true,\n backgroundColor,\n collapseThreshold,\n size,\n stableLayout = true,\n defaultSize: customizeDefaultSize,\n minWidth,\n minHeight,\n maxWidth,\n onSizeChange,\n onSizeDragging,\n expandable = true,\n expand,\n defaultExpand = true,\n onExpandChange,\n className,\n showHandleWhenCollapsed,\n destroyOnClose,\n styles: customStyles,\n classNames,\n dir,\n }) => {\n const ref = useRef<HTMLDivElement>(null);\n const isHovering = useHover(ref);\n const isVertical = placement === 'top' || placement === 'bottom';\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const resizableRef = useRef<Resizable>(null);\n const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\n const resizeStartSizeRef = useRef<Size | undefined>(undefined);\n const outerRef = useRef<HTMLDivElement>(null);\n\n const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n const direction = dir ?? antdDirection;\n\n const internalPlacement = useMemo(() => {\n if (direction !== 'rtl') return placement;\n if (placement === 'left') return 'right';\n if (placement === 'right') return 'left';\n return placement;\n }, [direction, placement]);\n\n const cssVariables = {\n '--draggable-panel-bg': backgroundColor || '',\n '--draggable-panel-header-height': `${headerHeight}px`,\n } as Record<string, string>;\n\n const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n onChange: onExpandChange,\n value: expand,\n });\n\n const [shouldTransition, setShouldTransition] = useState(true);\n const [showExpand, setShowExpand] = useState(true);\n const usesStableLayout = stableLayout || collapseThreshold !== undefined;\n\n useEffect(() => {\n if (pin) return;\n\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n\n if (isHovering && !isExpand) {\n startTransition(() => setIsExpand(true));\n } else if (!isHovering && isExpand) {\n hoverTimeoutRef.current = setTimeout(() => {\n startTransition(() => setIsExpand(false));\n }, 150);\n }\n }, [pin, isHovering, isExpand, setIsExpand]);\n\n useEffect(() => {\n return () => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n }\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n initialExpandedSizeRef.current = undefined;\n }, [internalPlacement]);\n\n const reversed = reversePlacement(internalPlacement);\n const canResizing = resize !== false && isExpand;\n\n const resizing = useMemo(\n () => ({\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: false,\n right: false,\n top: false,\n topLeft: false,\n topRight: false,\n [reversed]: true,\n ...(resize as Enable),\n }),\n [reversed, resize],\n );\n\n const defaultSize: Size = useMemo(() => {\n if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\n return { height: '100%', width: 280, ...customizeDefaultSize };\n }, [isVertical, customizeDefaultSize]);\n const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\n const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\n const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\n const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\n\n const sizeProps = useMemo(() => {\n if (!usesStableLayout && !isExpand) {\n return isVertical\n ? { minHeight: 0, size: { height: 0 } }\n : { minWidth: 0, size: { width: 0 } };\n }\n\n return {\n defaultSize,\n maxHeight: normalizedMaxHeight,\n maxWidth: normalizedMaxWidth,\n minHeight: normalizedMinHeight,\n minWidth: normalizedMinWidth,\n size: size as Size,\n };\n }, [\n usesStableLayout,\n isExpand,\n isVertical,\n defaultSize,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n size,\n ]);\n\n const fallbackExpandedSize = isVertical ? '180px' : '280px';\n const controlledExpandedSize = useMemo(() => {\n const controlledSize = isVertical ? size?.height : size?.width;\n if (controlledSize === undefined) return undefined;\n return toCssSize(controlledSize, fallbackExpandedSize);\n }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\n const defaultExpandedSize = useMemo(() => {\n const initialSize = isVertical ? defaultSize.height : defaultSize.width;\n return toCssSize(initialSize, fallbackExpandedSize);\n }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\n const [resizedExpandedSize, setResizedExpandedSize] = useState<{\n horizontal?: string;\n vertical?: string;\n }>({});\n const expandedOuterSize =\n controlledExpandedSize ??\n (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\n defaultExpandedSize;\n\n const setExpandedMainSize = useCallback(\n (nextSize: Size) => {\n if (!usesStableLayout) return;\n\n const currentSize = isVertical ? nextSize.height : nextSize.width;\n if (!currentSize) return;\n\n const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\n setResizedExpandedSize((state) =>\n isVertical\n ? { ...state, vertical: normalizedSize }\n : { ...state, horizontal: normalizedSize },\n );\n },\n [fallbackExpandedSize, isVertical, usesStableLayout],\n );\n\n const readCurrentSize = useCallback((): Size | undefined => {\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n if (!rect) return undefined;\n\n return isVertical\n ? { height: rect.height, width: '100%' }\n : { height: '100%', width: rect.width };\n }, [isVertical]);\n\n const captureInitialExpandedSize = useCallback(() => {\n if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\n\n const nextInitialSize = readCurrentSize();\n if (!nextInitialSize) return undefined;\n\n initialExpandedSizeRef.current = nextInitialSize;\n return nextInitialSize;\n }, [readCurrentSize]);\n\n useEffect(() => {\n if (!isExpand) return;\n captureInitialExpandedSize();\n }, [captureInitialExpandedSize, isExpand]);\n\n const toggleExpand = useCallback(() => {\n if (expandable) setIsExpand(!isExpand);\n }, [expandable, isExpand, setIsExpand]);\n\n const clampResizeSize = useCallback(\n (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const currentMainSize = isVertical ? rect.height : rect.width;\n const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\n const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\n\n let clampedMainSize = currentMainSize;\n if (typeof minMainSize === 'number')\n clampedMainSize = Math.max(clampedMainSize, minMainSize);\n if (typeof maxMainSize === 'number')\n clampedMainSize = Math.min(clampedMainSize, maxMainSize);\n\n if (\n !Number.isFinite(clampedMainSize) ||\n Math.abs(clampedMainSize - currentMainSize) < 0.5\n ) {\n return { height: el.style.height, width: el.style.width };\n }\n\n const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\n const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\n resizableRef.current?.updateSize({ height, width });\n\n return { height, width };\n },\n [\n isVertical,\n normalizedMaxHeight,\n normalizedMaxWidth,\n normalizedMinHeight,\n normalizedMinWidth,\n ],\n );\n\n const handleResize = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n const nextCollapsePreview = isBelowCollapseThreshold({\n axis: isVertical ? 'height' : 'width',\n collapseThreshold,\n size: nextSize,\n });\n\n if (usesStableLayout && outerRef.current) {\n // Sync outer DOM width immediately so it doesn't lag behind the\n // re-resizable inline style (which would otherwise trigger a 0.2s\n // width transition on the outer/aside each frame during drag).\n const dimension = isVertical ? nextSize.height : nextSize.width;\n if (dimension) {\n const previewDimension = nextCollapsePreview ? '0px' : dimension;\n if (isVertical) outerRef.current.style.height = previewDimension;\n else outerRef.current.style.width = previewDimension;\n }\n }\n // With drag-to-collapse enabled, defer the persisted expanded size until\n // pointer release. This keeps the pre-drag width as the single source of\n // truth while the outer stable-layout layer previews collapse/restore.\n if (collapseThreshold === undefined) setExpandedMainSize(nextSize);\n onSizeDragging?.(delta, nextSize);\n },\n [\n clampResizeSize,\n collapseThreshold,\n isVertical,\n onSizeDragging,\n setExpandedMainSize,\n usesStableLayout,\n ],\n );\n\n const triggerResetWithoutTransition = useCallback(() => {\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n }\n\n setShouldTransition(false);\n resetTransitionTimeoutRef.current = setTimeout(() => {\n setShouldTransition(true);\n }, 0);\n }, []);\n\n const handleResetSize = useCallback(() => {\n if (!canResizing) return;\n\n const resetSize = captureInitialExpandedSize();\n if (!resetSize) return;\n\n triggerResetWithoutTransition();\n\n const rect = resizableRef.current?.resizable?.getBoundingClientRect();\n const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\n const resetMainSize = isVertical ? resetSize.height : resetSize.width;\n const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\n\n resizableRef.current?.updateSize(resetSize);\n setExpandedMainSize(resetSize);\n\n onSizeChange?.(\n isVertical\n ? { height: nextMainSize - prevMainSize, width: 0 }\n : { height: 0, width: nextMainSize - prevMainSize },\n resetSize,\n );\n }, [\n canResizing,\n captureInitialExpandedSize,\n isVertical,\n onSizeChange,\n setExpandedMainSize,\n triggerResetWithoutTransition,\n ]);\n\n const handleResizeStart = useCallback(\n (event: { detail?: number }) => {\n if (event.detail === 2) {\n handleResetSize();\n return false;\n }\n\n if (resetTransitionTimeoutRef.current) {\n clearTimeout(resetTransitionTimeoutRef.current);\n resetTransitionTimeoutRef.current = undefined;\n }\n\n resizeStartSizeRef.current = readCurrentSize();\n\n // Synchronously disable the outer transition so the first drag frame\n // does not animate. `setShouldTransition(false)` below is asynchronous\n // and would only take effect after the next React commit.\n if (usesStableLayout && outerRef.current) {\n outerRef.current.style.transition = 'none';\n }\n setShouldTransition(false);\n setShowExpand(false);\n },\n [handleResetSize, readCurrentSize, usesStableLayout],\n );\n\n const handleResizeStop = useCallback(\n (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\n const nextSize = clampResizeSize(el);\n const shouldCollapse = isBelowCollapseThreshold({\n axis: isVertical ? 'height' : 'width',\n collapseThreshold,\n size: nextSize,\n });\n const committedSize = shouldCollapse ? (resizeStartSizeRef.current ?? nextSize) : nextSize;\n\n resizableRef.current?.updateSize(committedSize);\n if (!shouldCollapse) setExpandedMainSize(committedSize);\n setShouldTransition(true);\n setShowExpand(true);\n // Keep the collapsed main-axis size at zero until the controlled\n // `expand=false` value arrives. Clearing it here would reveal the panel\n // for one render between preview teardown and controlled-state commit.\n if (usesStableLayout && outerRef.current) {\n outerRef.current.style.removeProperty('transition');\n if (shouldCollapse) {\n if (isVertical) outerRef.current.style.height = '0px';\n else outerRef.current.style.width = '0px';\n } else {\n outerRef.current.style.removeProperty('width');\n outerRef.current.style.removeProperty('height');\n }\n }\n if (shouldCollapse) setIsExpand(false);\n\n resizeStartSizeRef.current = undefined;\n onSizeChange?.(delta, committedSize);\n },\n [\n clampResizeSize,\n collapseThreshold,\n isVertical,\n onSizeChange,\n setExpandedMainSize,\n setIsExpand,\n usesStableLayout,\n ],\n );\n\n const resizeHandleClassName = useMemo(\n () =>\n cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\n [reversed, showHandleHighlight],\n );\n\n if (fullscreen) {\n return (\n <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n {children}\n </div>\n );\n }\n\n const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\n const stableOuterFlex = usesStableLayout\n ? ({\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n } as const)\n : {};\n\n const sidebarOuterStyle = isVertical\n ? {\n height: isExpand ? expandedOuterSize : 0,\n overflow: 'hidden',\n transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: '100%',\n ...stableOuterFlex,\n }\n : {\n overflow: 'hidden',\n transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\n width: isExpand ? expandedOuterSize : 0,\n ...(usesStableLayout\n ? {\n ...stableOuterFlex,\n flex: 1,\n minWidth: 0,\n height: '100%',\n }\n : {}),\n };\n\n const stableInnerStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n const sidebarInnerStyle: CSSProperties = usesStableLayout\n ? stableInnerStyle\n : isVertical\n ? { height: '100%', width: '100%' }\n : { width: '100%' };\n\n const stableAsideFixedSize: CSSProperties = isVertical ? { width: '100%' } : { height: '100%' };\n const stableAsideStyle: CSSProperties = usesStableLayout\n ? {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n ...(mode === 'fixed' ? stableAsideFixedSize : {}),\n }\n : {};\n\n const stableResizableStyle: CSSProperties = {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n height: '100%',\n minHeight: 0,\n minWidth: 0,\n width: '100%',\n };\n\n const panelNode = (!destroyOnClose || isExpand) && (\n <Resizable\n ref={resizableRef}\n {...sizeProps}\n className={cx(styles.panel, classNames?.content)}\n enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\n handleClasses={\n canResizing\n ? {\n [reversed]: resizeHandleClassName,\n }\n : {}\n }\n style={{\n ...cssVariables,\n transition: shouldTransition ? undefined : 'none',\n ...(usesStableLayout ? stableResizableStyle : {}),\n ...style,\n }}\n onResize={handleResize}\n onResizeStart={handleResizeStart}\n onResizeStop={handleResizeStop}\n >\n {usesStableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\n </Resizable>\n );\n\n return (\n <aside\n dir={dir}\n ref={ref}\n style={{ ...cssVariables, ...stableAsideStyle }}\n className={cx(\n panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\n className,\n )}\n >\n {expandable && showExpand && (\n <Center\n className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\n style={{\n opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\n }}\n >\n <Center\n className={classNames?.handle}\n style={customStyles?.handle}\n onClick={toggleExpand}\n >\n <Icon\n className={styles.handlerIcon}\n icon={Arrow}\n size={16}\n style={{\n ...MARGIN_MAP[internalPlacement],\n transform: `rotate(${isExpand ? 180 : 0}deg)`,\n transition: 'transform 0.3s ease',\n }}\n />\n </Center>\n </Center>\n )}\n {usesStableLayout ? (\n <div ref={outerRef} style={sidebarOuterStyle}>\n {panelNode}\n </div>\n ) : (\n panelNode\n )}\n </aside>\n );\n },\n isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
|
|
@@ -46,7 +46,7 @@ const styles = createStaticStyles(({ cssVar, css }) => {
|
|
|
46
46
|
display: inline;
|
|
47
47
|
|
|
48
48
|
margin-inline: 0.25em;
|
|
49
|
-
padding-block: 0.
|
|
49
|
+
padding-block: 0.1em;
|
|
50
50
|
padding-inline: 0.4em;
|
|
51
51
|
border: 1px solid var(--lobe-markdown-border-color);
|
|
52
52
|
border-radius: 0.25em;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdown.style.mjs","names":[],"sources":["../../src/Markdown/markdown.style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst IGNORE_CLASSNAME = '.ignore-markdown-style';\n\nexport const styles = createStaticStyles(({ cssVar, css }) => {\n const __root = css`\n --lobe-markdown-font-size: 16px;\n --lobe-markdown-header-multiple: 1;\n --lobe-markdown-margin-multiple: 2;\n --lobe-markdown-line-height: 1.8;\n --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};\n --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};\n\n position: relative;\n\n width: 100%;\n max-width: 100%;\n padding-inline: 1px;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n overflow-wrap: break-word;\n `;\n const a = css`\n a {\n color: ${cssVar.colorInfoText};\n\n &:hover {\n color: ${cssVar.colorInfoHover};\n }\n }\n `;\n\n const blockquote = css`\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n border-inline-start: solid 4px ${cssVar.colorBorder};\n\n color: ${cssVar.colorTextSecondary};\n }\n `;\n\n const code = css`\n code {\n &:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: 0.875em;\n line-height: 1;\n overflow-wrap: break-word;\n white-space: break-spaces;\n\n background: ${cssVar.colorFillSecondary};\n }\n }\n `;\n\n const del = css`\n del {\n color: ${cssVar.colorTextDescription};\n text-decoration: line-through;\n }\n `;\n\n const details = css`\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n padding-block: 0.75em;\n padding-inline: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n background: ${cssVar.colorFillTertiary};\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n summary {\n cursor: pointer;\n display: flex;\n align-items: center;\n list-style: none;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-inline-end: 1.25em;\n transform: rotateZ(-45deg);\n\n display: block;\n\n width: 0.4em;\n height: 0.4em;\n border-block-end: 1.5px solid ${cssVar.colorTextSecondary};\n border-inline-end: 1.5px solid ${cssVar.colorTextSecondary};\n\n font-family: ${cssVar.fontFamily};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n }\n }\n\n &[open] {\n summary {\n padding-block-end: 0.75em;\n border-block-end: 1px dashed ${cssVar.colorBorder};\n\n &::before {\n transform: rotateZ(45deg);\n }\n }\n }\n }\n `;\n const header = css`\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block: max(\n calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n var(--lobe-markdown-font-size)\n );\n font-weight: bold;\n line-height: 1.25;\n }\n\n h1 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5,\n h6 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n `;\n const hr = css`\n hr {\n width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n border-color: ${cssVar.colorBorder};\n border-style: dashed;\n border-width: 1px;\n border-block-start: none;\n border-inline-start: none;\n border-inline-end: none;\n }\n `;\n const img = css`\n img {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n `;\n\n const list = css`\n li {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p:first-child {\n display: inline;\n }\n }\n\n ul,\n ol {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline-start: 1em;\n padding-inline-start: 0;\n list-style-position: outside;\n\n > ul,\n > ol {\n margin-block: 0;\n }\n\n > li {\n margin-inline-start: 1em;\n }\n }\n\n ol {\n list-style: auto;\n }\n\n ul {\n list-style-type: none;\n\n > li {\n &::before {\n content: '-';\n\n position: absolute;\n\n display: inline-block;\n\n margin-inline: -1em 0.5em;\n\n opacity: 0.5;\n }\n }\n }\n\n .task-list-item {\n &::before {\n display: none !important;\n }\n\n input[type='checkbox'] {\n margin-block: 0 0.25em;\n margin-inline: -1.6em 0.2em;\n vertical-align: middle;\n }\n\n input[type='checkbox']:dir(rtl) {\n margin: 0 -1.6em 0.25em 0.2em;\n }\n }\n `;\n const p = css`\n p {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n\n &:not(:first-child) {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n }\n `;\n const pre = css`\n pre {\n font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n }\n `;\n const strong = css`\n strong {\n font-weight: 600;\n }\n `;\n const svg = css`\n svg {\n line-height: 1;\n }\n `;\n const table = css`\n table {\n unicode-bidi: isolate;\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: max-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n text-align: start;\n text-indent: initial;\n text-wrap: pretty;\n word-break: auto-phrase;\n overflow-wrap: break-word;\n\n box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n code {\n overflow-wrap: break-word;\n }\n\n thead {\n background: ${cssVar.colorFillQuaternary};\n }\n\n tr {\n box-shadow: 0 1px 0 ${cssVar.colorBorderSecondary};\n }\n\n th,\n td {\n min-width: 120px;\n padding-block: 0.75em;\n padding-inline: 1em;\n text-align: start;\n }\n }\n `;\n const video = css`\n > video,\n > p > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n\n video {\n max-width: 100%;\n }\n `;\n\n const footnote = css`\n .footnotes {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n font-size: smaller;\n color: #8b949e;\n\n #footnote-label {\n display: none;\n }\n\n > ol {\n margin: 0 !important;\n }\n }\n `;\n\n const sup = css`\n sup {\n position: relative;\n inset-block-start: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n const sub = css`\n sub {\n position: relative;\n inset-block-end: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n return {\n root: css`\n :not(:has(${IGNORE_CLASSNAME})),\n .markdown {\n ${[\n __root,\n a,\n blockquote,\n code,\n del,\n details,\n header,\n hr,\n img,\n list,\n p,\n pre,\n strong,\n svg,\n table,\n video,\n footnote,\n sub,\n sup,\n ]}\n }\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,QAAQ,UAAU;CAC5D,MAAM,SAAS,GAAG;;;;;qCAKiB,OAAO,eAAe;oCACvB,OAAO,oBAAoB;;;;;;;;;;;;CAY7D,MAAM,IAAI,GAAG;;eAEA,OAAO,cAAc;;;iBAGnB,OAAO,eAAe;;;;CAKrC,MAAM,aAAa,GAAG;;;;;;uCAMe,OAAO,YAAY;;eAE3C,OAAO,mBAAmB;;;CAIvC,MAAM,OAAO,GAAG;;;;;;;;;;;uBAWK,OAAO,eAAe;;;;;;sBAMvB,OAAO,mBAAmB;;;;CAK9C,MAAM,MAAM,GAAG;;eAEF,OAAO,qBAAqB;;;;CAKzC,MAAM,UAAU,GAAG;;;;;;;oBAOD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;0CAoBH,OAAO,mBAAmB;2CACzB,OAAO,mBAAmB;;yBAE5C,OAAO,WAAW;;wCAEH,OAAO,cAAc;;;;;;;yCAOpB,OAAO,YAAY;;;;;;;;;CAS1D,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,MAAM,KAAK,GAAG;;;;sBAIM,OAAO,YAAY;;;;;;;;CAQvC,MAAM,MAAM,GAAG;;;;;;;;;;;;CAaf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEhB,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;CAeb,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,SAAS,GAAG;;;;;CAKlB,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;8BAoBW,OAAO,qBAAqB;;;;;;;sBAOpC,OAAO,oBAAoB;;;;8BAInB,OAAO,qBAAqB;;;;;;;;;;;;CAYxD,MAAM,QAAQ,GAAG;;;;;;;;;;;;CAajB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAgBpB,MAAM,MAAM,GAAG;;;;;;;;;;CAWf,MAAM,MAAM,GAAG;;;;;;;;;;CAWf,OAAO,EACL,MAAM,GAAG;kBACK,iBAAiB;;UAEzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EAAE;;MAGR;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"markdown.style.mjs","names":[],"sources":["../../src/Markdown/markdown.style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst IGNORE_CLASSNAME = '.ignore-markdown-style';\n\nexport const styles = createStaticStyles(({ cssVar, css }) => {\n const __root = css`\n --lobe-markdown-font-size: 16px;\n --lobe-markdown-header-multiple: 1;\n --lobe-markdown-margin-multiple: 2;\n --lobe-markdown-line-height: 1.8;\n --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};\n --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};\n\n position: relative;\n\n width: 100%;\n max-width: 100%;\n padding-inline: 1px;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n overflow-wrap: break-word;\n `;\n const a = css`\n a {\n color: ${cssVar.colorInfoText};\n\n &:hover {\n color: ${cssVar.colorInfoHover};\n }\n }\n `;\n\n const blockquote = css`\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n border-inline-start: solid 4px ${cssVar.colorBorder};\n\n color: ${cssVar.colorTextSecondary};\n }\n `;\n\n const code = css`\n code {\n &:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.1em;\n padding-inline: 0.4em;\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: 0.875em;\n line-height: 1;\n overflow-wrap: break-word;\n white-space: break-spaces;\n\n background: ${cssVar.colorFillSecondary};\n }\n }\n `;\n\n const del = css`\n del {\n color: ${cssVar.colorTextDescription};\n text-decoration: line-through;\n }\n `;\n\n const details = css`\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n padding-block: 0.75em;\n padding-inline: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n background: ${cssVar.colorFillTertiary};\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n summary {\n cursor: pointer;\n display: flex;\n align-items: center;\n list-style: none;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-inline-end: 1.25em;\n transform: rotateZ(-45deg);\n\n display: block;\n\n width: 0.4em;\n height: 0.4em;\n border-block-end: 1.5px solid ${cssVar.colorTextSecondary};\n border-inline-end: 1.5px solid ${cssVar.colorTextSecondary};\n\n font-family: ${cssVar.fontFamily};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n }\n }\n\n &[open] {\n summary {\n padding-block-end: 0.75em;\n border-block-end: 1px dashed ${cssVar.colorBorder};\n\n &::before {\n transform: rotateZ(45deg);\n }\n }\n }\n }\n `;\n const header = css`\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block: max(\n calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n var(--lobe-markdown-font-size)\n );\n font-weight: bold;\n line-height: 1.25;\n }\n\n h1 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5,\n h6 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n `;\n const hr = css`\n hr {\n width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n border-color: ${cssVar.colorBorder};\n border-style: dashed;\n border-width: 1px;\n border-block-start: none;\n border-inline-start: none;\n border-inline-end: none;\n }\n `;\n const img = css`\n img {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n `;\n\n const list = css`\n li {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n\n p:first-child {\n display: inline;\n }\n }\n\n ul,\n ol {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n margin-inline-start: 1em;\n padding-inline-start: 0;\n list-style-position: outside;\n\n > ul,\n > ol {\n margin-block: 0;\n }\n\n > li {\n margin-inline-start: 1em;\n }\n }\n\n ol {\n list-style: auto;\n }\n\n ul {\n list-style-type: none;\n\n > li {\n &::before {\n content: '-';\n\n position: absolute;\n\n display: inline-block;\n\n margin-inline: -1em 0.5em;\n\n opacity: 0.5;\n }\n }\n }\n\n .task-list-item {\n &::before {\n display: none !important;\n }\n\n input[type='checkbox'] {\n margin-block: 0 0.25em;\n margin-inline: -1.6em 0.2em;\n vertical-align: middle;\n }\n\n input[type='checkbox']:dir(rtl) {\n margin: 0 -1.6em 0.25em 0.2em;\n }\n }\n `;\n const p = css`\n p {\n margin-block: 4px;\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n\n &:not(:first-child) {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n\n &:not(:last-child) {\n margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n }\n }\n `;\n const pre = css`\n pre {\n font-size: calc(var(--lobe-markdown-font-size) * 0.85);\n }\n `;\n const strong = css`\n strong {\n font-weight: 600;\n }\n `;\n const svg = css`\n svg {\n line-height: 1;\n }\n `;\n const table = css`\n table {\n unicode-bidi: isolate;\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: max-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n\n text-align: start;\n text-indent: initial;\n text-wrap: pretty;\n word-break: auto-phrase;\n overflow-wrap: break-word;\n\n box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n code {\n overflow-wrap: break-word;\n }\n\n thead {\n background: ${cssVar.colorFillQuaternary};\n }\n\n tr {\n box-shadow: 0 1px 0 ${cssVar.colorBorderSecondary};\n }\n\n th,\n td {\n min-width: 120px;\n padding-block: 0.75em;\n padding-inline: 1em;\n text-align: start;\n }\n }\n `;\n const video = css`\n > video,\n > p > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n\n video {\n max-width: 100%;\n }\n `;\n\n const footnote = css`\n .footnotes {\n margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);\n font-size: smaller;\n color: #8b949e;\n\n #footnote-label {\n display: none;\n }\n\n > ol {\n margin: 0 !important;\n }\n }\n `;\n\n const sup = css`\n sup {\n position: relative;\n inset-block-start: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n const sub = css`\n sub {\n position: relative;\n inset-block-end: -0.25em;\n\n font-size: 0.75em;\n line-height: var(--lobe-markdown-line-height);\n vertical-align: baseline;\n }\n `;\n\n return {\n root: css`\n :not(:has(${IGNORE_CLASSNAME})),\n .markdown {\n ${[\n __root,\n a,\n blockquote,\n code,\n del,\n details,\n header,\n hr,\n img,\n list,\n p,\n pre,\n strong,\n svg,\n table,\n video,\n footnote,\n sub,\n sup,\n ]}\n }\n `,\n };\n});\n"],"mappings":";;AAEA,MAAM,mBAAmB;AAEzB,MAAa,SAAS,oBAAoB,EAAE,QAAQ,UAAU;CAC5D,MAAM,SAAS,GAAG;;;;;qCAKiB,OAAO,eAAe;oCACvB,OAAO,oBAAoB;;;;;;;;;;;;CAY7D,MAAM,IAAI,GAAG;;eAEA,OAAO,cAAc;;;iBAGnB,OAAO,eAAe;;;;CAKrC,MAAM,aAAa,GAAG;;;;;;uCAMe,OAAO,YAAY;;eAE3C,OAAO,mBAAmB;;;CAIvC,MAAM,OAAO,GAAG;;;;;;;;;;;uBAWK,OAAO,eAAe;;;;;;sBAMvB,OAAO,mBAAmB;;;;CAK9C,MAAM,MAAM,GAAG;;eAEF,OAAO,qBAAqB;;;;CAKzC,MAAM,UAAU,GAAG;;;;;;;oBAOD,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;0CAoBH,OAAO,mBAAmB;2CACzB,OAAO,mBAAmB;;yBAE5C,OAAO,WAAW;;wCAEH,OAAO,cAAc;;;;;;;yCAOpB,OAAO,YAAY;;;;;;;;;CAS1D,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ClB,MAAM,KAAK,GAAG;;;;sBAIM,OAAO,YAAY;;;;;;;;CAQvC,MAAM,MAAM,GAAG;;;;;;;;;;;;CAaf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEhB,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;CAeb,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,SAAS,GAAG;;;;;CAKlB,MAAM,MAAM,GAAG;;;;;CAKf,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;8BAoBW,OAAO,qBAAqB;;;;;;;sBAOpC,OAAO,oBAAoB;;;;8BAInB,OAAO,qBAAqB;;;;;;;;;;;;CAYxD,MAAM,QAAQ,GAAG;;;;;;;;;;;;CAajB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;CAgBpB,MAAM,MAAM,GAAG;;;;;;;;;;CAWf,MAAM,MAAM,GAAG;;;;;;;;;;CAWf,OAAO,EACL,MAAM,GAAG;kBACK,iBAAiB;;UAEzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EAAE;;MAGR;AACF,CAAC"}
|
|
@@ -24,7 +24,7 @@ declare const styles: {
|
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
26
|
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
-
variant?: "filled" | "
|
|
27
|
+
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|