@lobehub/ui 5.40.2 → 5.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/base-ui/AutoComplete/AutoComplete.mjs +2 -0
- package/es/base-ui/AutoComplete/AutoComplete.mjs.map +1 -1
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs +2 -0
- package/es/base-ui/ContextMenu/ContextMenuHost.mjs.map +1 -1
- package/es/base-ui/ContextMenu/renderItems.mjs +3 -1
- package/es/base-ui/ContextMenu/renderItems.mjs.map +1 -1
- package/es/base-ui/DraggablePanel/DraggablePanel.d.mts +6 -0
- package/es/base-ui/DraggablePanel/DraggablePanel.mjs +68 -0
- package/es/base-ui/DraggablePanel/DraggablePanel.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/atoms.d.mts +47 -0
- package/es/base-ui/DraggablePanel/atoms.mjs +333 -0
- package/es/base-ui/DraggablePanel/atoms.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/context.d.mts +17 -0
- package/es/base-ui/DraggablePanel/context.mjs +13 -0
- package/es/base-ui/DraggablePanel/context.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/axes.d.mts +16 -0
- package/es/base-ui/DraggablePanel/core/axes.mjs +51 -0
- package/es/base-ui/DraggablePanel/core/axes.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/controller.d.mts +56 -0
- package/es/base-ui/DraggablePanel/core/controller.mjs +206 -0
- package/es/base-ui/DraggablePanel/core/controller.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/dom.mjs +34 -0
- package/es/base-ui/DraggablePanel/core/dom.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/env.mjs +28 -0
- package/es/base-ui/DraggablePanel/core/env.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/internal.mjs +9 -0
- package/es/base-ui/DraggablePanel/core/internal.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/transition.mjs +17 -0
- package/es/base-ui/DraggablePanel/core/transition.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/core/utils.mjs +20 -0
- package/es/base-ui/DraggablePanel/core/utils.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/index.d.mts +5 -0
- package/es/base-ui/DraggablePanel/style.mjs +356 -0
- package/es/base-ui/DraggablePanel/style.mjs.map +1 -0
- package/es/base-ui/DraggablePanel/type.d.mts +53 -0
- package/es/base-ui/DropdownMenu/atoms.d.mts +1 -1
- package/es/base-ui/DropdownMenu/atoms.mjs +3 -1
- package/es/base-ui/DropdownMenu/atoms.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +2 -2
- package/es/base-ui/Popover/atoms.d.mts +1 -1
- package/es/base-ui/Popover/atoms.mjs +3 -1
- package/es/base-ui/Popover/atoms.mjs.map +1 -1
- package/es/base-ui/Select/Select.mjs +0 -1
- package/es/base-ui/Select/Select.mjs.map +1 -1
- package/es/base-ui/Select/atoms.d.mts +1 -1
- package/es/base-ui/Select/atoms.mjs +3 -1
- package/es/base-ui/Select/atoms.mjs.map +1 -1
- package/es/base-ui/Select/style.mjs +2 -1
- package/es/base-ui/Select/style.mjs.map +1 -1
- package/es/base-ui/Tooltip/TooltipGroup.mjs +2 -0
- package/es/base-ui/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/base-ui/Tooltip/TooltipStandalone.mjs +2 -0
- package/es/base-ui/Tooltip/TooltipStandalone.mjs.map +1 -1
- package/es/base-ui/floating/collisionPadding.d.mts +7 -0
- package/es/base-ui/floating/collisionPadding.mjs +17 -0
- package/es/base-ui/floating/collisionPadding.mjs.map +1 -0
- package/es/base-ui/index.d.mts +7 -1
- package/es/base-ui/index.mjs +5 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { getFloatingCollisionPadding } from "../floating/collisionPadding.mjs";
|
|
2
3
|
import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
|
|
3
4
|
import Icon from "../../Icon/Icon.mjs";
|
|
4
5
|
import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
|
|
@@ -64,6 +65,7 @@ const AutoComplete = memo(({ className, classNames, styles: customStyles, style,
|
|
|
64
65
|
children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
|
|
65
66
|
anchor: anchorRef,
|
|
66
67
|
className: styles$1.positioner,
|
|
68
|
+
collisionPadding: getFloatingCollisionPadding(),
|
|
67
69
|
ref: positionerRef,
|
|
68
70
|
sideOffset: 4,
|
|
69
71
|
style: zIndex === void 0 ? void 0 : { zIndex },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx, useThemeMode } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport Icon from '@/Icon';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n ({\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n options = [],\n onChange,\n onSearch,\n allowClear,\n disabled,\n placeholder,\n prefix,\n suffix,\n emptyText,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const appElement = useAppElement();\n const anchorRef = useRef<HTMLDivElement>(null);\n const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n const items = useMemo<AutoCompleteOption[]>(\n () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n [options],\n );\n\n return (\n <Autocomplete.Root\n openOnInputClick\n disabled={disabled}\n itemToStringValue={(item) => (item as AutoCompleteOption).value}\n items={items}\n onValueChange={(value) => {\n onChange?.(value);\n onSearch?.(value);\n }}\n {...rest}\n >\n <div\n className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n data-disabled={disabled ? '' : undefined}\n ref={anchorRef}\n style={style}\n >\n {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n <Autocomplete.Input\n className={cx(inputStyles.input, classNames?.input)}\n placeholder={placeholder}\n style={customStyles?.input}\n />\n {allowClear && (\n <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n <Icon icon={XIcon} size={14} />\n </Autocomplete.Clear>\n )}\n {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n </div>\n <Autocomplete.Portal container={appElement ?? undefined}>\n <Autocomplete.Positioner\n anchor={anchorRef}\n className={styles.positioner}\n ref={positionerRef}\n sideOffset={4}\n style={zIndex === undefined ? undefined : { zIndex }}\n >\n <Autocomplete.Popup\n className={cx(styles.popup, classNames?.popup)}\n style={customStyles?.popup}\n >\n {emptyText && (\n <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n )}\n <Autocomplete.List className={styles.list}>\n {(item: AutoCompleteOption) => (\n <Autocomplete.Item\n className={cx(styles.item, classNames?.item)}\n disabled={item.disabled}\n key={item.value}\n style={customStyles?.item}\n value={item}\n >\n {item.label ?? item.value}\n </Autocomplete.Item>\n )}\n </Autocomplete.List>\n </Autocomplete.Popup>\n </Autocomplete.Positioner>\n </Autocomplete.Portal>\n </Autocomplete.Root>\n );\n },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx, useThemeMode } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport Icon from '@/Icon';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n ({\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n options = [],\n onChange,\n onSearch,\n allowClear,\n disabled,\n placeholder,\n prefix,\n suffix,\n emptyText,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const appElement = useAppElement();\n const anchorRef = useRef<HTMLDivElement>(null);\n const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n const items = useMemo<AutoCompleteOption[]>(\n () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n [options],\n );\n\n return (\n <Autocomplete.Root\n openOnInputClick\n disabled={disabled}\n itemToStringValue={(item) => (item as AutoCompleteOption).value}\n items={items}\n onValueChange={(value) => {\n onChange?.(value);\n onSearch?.(value);\n }}\n {...rest}\n >\n <div\n className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n data-disabled={disabled ? '' : undefined}\n ref={anchorRef}\n style={style}\n >\n {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n <Autocomplete.Input\n className={cx(inputStyles.input, classNames?.input)}\n placeholder={placeholder}\n style={customStyles?.input}\n />\n {allowClear && (\n <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n <Icon icon={XIcon} size={14} />\n </Autocomplete.Clear>\n )}\n {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n </div>\n <Autocomplete.Portal container={appElement ?? undefined}>\n <Autocomplete.Positioner\n anchor={anchorRef}\n className={styles.positioner}\n collisionPadding={getFloatingCollisionPadding()}\n ref={positionerRef}\n sideOffset={4}\n style={zIndex === undefined ? undefined : { zIndex }}\n >\n <Autocomplete.Popup\n className={cx(styles.popup, classNames?.popup)}\n style={customStyles?.popup}\n >\n {emptyText && (\n <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n )}\n <Autocomplete.List className={styles.list}>\n {(item: AutoCompleteOption) => (\n <Autocomplete.Item\n className={cx(styles.item, classNames?.item)}\n disabled={item.disabled}\n key={item.value}\n style={customStyles?.item}\n value={item}\n >\n {item.label ?? item.value}\n </Autocomplete.Item>\n )}\n </Autocomplete.List>\n </Autocomplete.Popup>\n </Autocomplete.Positioner>\n </Autocomplete.Portal>\n </Autocomplete.Root>\n );\n },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,CAAC,GACX,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,KAAK,eAAe,WAAW,eAA+B,UAAU;CAChF,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI,MAAO,GACvF,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;GACxB,WAAW,KAAK;GAChB,WAAW,KAAK;EAClB;EACA,GAAI;EATN,UAAA,CAWE,qBAAC,OAAD;GACE,WAAW,GAAGA,aAAc;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GAAG,SAAS;GAChF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;GAJT,UAAA;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,OAAY;KAAO,UAAA;IAAa,CAAA;IAC5D,oBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,OAAY,OAAO,YAAY,KAAK;KACrC;KACb,OAAO,cAAc;IACtB,CAAA;IACA,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAWC,SAAO;KACzD,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;KAAK,CAAA;IACZ,CAAA;IAErB,UAAU,oBAAC,QAAD;KAAM,WAAWD,OAAY;KAAO,UAAA;IAAa,CAAA;GACzD;EACL,CAAA,GAAA,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;GAC5C,UAAA,oBAAC,aAAa,YAAd;IACE,QAAQ;IACR,WAAWC,SAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO;IAEnD,UAAA,qBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,SAAO,OAAO,YAAY,KAAK;KAC7C,OAAO,cAAc;KAFvB,UAAA,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAWA,SAAO;MAAQ,UAAA;KAA8B,CAAA,GAE9E,oBAAC,aAAa,MAAd;MAAmB,WAAWA,SAAO;MACjC,WAAA,SACA,oBAAC,aAAa,MAAd;OACE,WAAW,GAAGA,SAAO,MAAM,YAAY,IAAI;OAC3C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;OAEN,UAAA,KAAK,SAAS,KAAK;MACH,GALZ,KAAK,KAKO;KAEJ,CAAA,CACD;;GACG,CAAA;EACN,CAAA,CACJ;;AAEvB,CACF;AAEA,aAAa,cAAc"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { getFloatingCollisionPadding } from "../floating/collisionPadding.mjs";
|
|
2
3
|
import { useIsClient } from "../../hooks/useIsClient.mjs";
|
|
3
4
|
import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
|
|
4
5
|
import { preventDefaultAndStopPropagation } from "../../utils/dom.mjs";
|
|
@@ -57,6 +58,7 @@ const ContextMenuHost = memo(() => {
|
|
|
57
58
|
children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
|
|
58
59
|
anchor: state.anchor ?? void 0,
|
|
59
60
|
className: styles.positioner,
|
|
61
|
+
collisionPadding: getFloatingCollisionPadding(),
|
|
60
62
|
ref: zRef,
|
|
61
63
|
sideOffset: 6,
|
|
62
64
|
style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n closeContextMenu,\n getServerSnapshot,\n getSnapshot,\n setContextMenuState,\n subscribe,\n updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n const isClient = useIsClient();\n const appElement = useAppElement();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n useEffect(() => {\n const DEV = process.env.NODE_ENV === 'development';\n if (!isClient || !DEV) return;\n return registerDevSingleton('ContextMenuHost', document.body);\n }, [isClient]);\n\n useEffect(() => {\n const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n window.addEventListener('pointerdown', handler, true);\n window.addEventListener('contextmenu', handler, true);\n return () => {\n window.removeEventListener('pointerdown', handler, true);\n window.removeEventListener('contextmenu', handler, true);\n };\n }, []);\n\n const menuItems = useMemo(\n () =>\n renderContextMenuItems(state.items, [], {\n iconAlign: state.iconAlign,\n iconSpaceMode: state.iconSpaceMode,\n }),\n [state.items, state.iconAlign, state.iconSpaceMode],\n );\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n const hasSlots = state.header != null || state.footer != null;\n if (!isClient) return null;\n if (!state.open && state.items.length === 0) return null;\n\n return (\n <ContextMenu.Root\n open={state.open}\n onOpenChange={(open) => {\n if (open) {\n setContextMenuState({ open });\n return;\n }\n closeContextMenu();\n }}\n >\n <ContextMenu.Portal container={appElement}>\n <ContextMenu.Positioner\n anchor={state.anchor ?? undefined}\n className={styles.positioner}\n ref={zRef as any}\n sideOffset={6}\n style={{ ...noAnimationStyles, zIndex }}\n >\n <ContextMenu.Popup\n className={cx(styles.popup, hasSlots && styles.popupWithSlots)}\n data-has-footer={state.footer == null ? undefined : ''}\n data-has-header={state.header == null ? undefined : ''}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n {hasSlots ? <div className={styles.slotViewport}>{menuItems}</div> : menuItems}\n {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.Root>\n );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContextMenuHost.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/ContextMenuHost.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useSyncExternalStore } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { renderContextMenuItems } from './renderItems';\nimport {\n closeContextMenu,\n getServerSnapshot,\n getSnapshot,\n setContextMenuState,\n subscribe,\n updateLastPointer,\n} from './store';\nimport { styles } from './style';\n\nconst noAnimationStyles = { '--lobe-dropdown-animation-duration': '0ms' } as React.CSSProperties;\n\nexport const ContextMenuHost = memo(() => {\n const isClient = useIsClient();\n const appElement = useAppElement();\n const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n\n useEffect(() => {\n const DEV = process.env.NODE_ENV === 'development';\n if (!isClient || !DEV) return;\n return registerDevSingleton('ContextMenuHost', document.body);\n }, [isClient]);\n\n useEffect(() => {\n const handler = (event: MouseEvent | PointerEvent) => updateLastPointer(event);\n window.addEventListener('pointerdown', handler, true);\n window.addEventListener('contextmenu', handler, true);\n return () => {\n window.removeEventListener('pointerdown', handler, true);\n window.removeEventListener('contextmenu', handler, true);\n };\n }, []);\n\n const menuItems = useMemo(\n () =>\n renderContextMenuItems(state.items, [], {\n iconAlign: state.iconAlign,\n iconSpaceMode: state.iconSpaceMode,\n }),\n [state.items, state.iconAlign, state.iconSpaceMode],\n );\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating');\n const hasSlots = state.header != null || state.footer != null;\n if (!isClient) return null;\n if (!state.open && state.items.length === 0) return null;\n\n return (\n <ContextMenu.Root\n open={state.open}\n onOpenChange={(open) => {\n if (open) {\n setContextMenuState({ open });\n return;\n }\n closeContextMenu();\n }}\n >\n <ContextMenu.Portal container={appElement}>\n <ContextMenu.Positioner\n anchor={state.anchor ?? undefined}\n className={styles.positioner}\n collisionPadding={getFloatingCollisionPadding()}\n ref={zRef as any}\n sideOffset={6}\n style={{ ...noAnimationStyles, zIndex }}\n >\n <ContextMenu.Popup\n className={cx(styles.popup, hasSlots && styles.popupWithSlots)}\n data-has-footer={state.footer == null ? undefined : ''}\n data-has-header={state.header == null ? undefined : ''}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n {state.header == null ? null : <div className={styles.header}>{state.header}</div>}\n {hasSlots ? <div className={styles.slotViewport}>{menuItems}</div> : menuItems}\n {state.footer == null ? null : <div className={styles.footer}>{state.footer}</div>}\n </ContextMenu.Popup>\n </ContextMenu.Positioner>\n </ContextMenu.Portal>\n </ContextMenu.Root>\n );\n});\n\nContextMenuHost.displayName = 'ContextMenuHost';\n"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,oBAAoB,EAAE,sCAAsC,MAAM;AAExE,MAAa,kBAAkB,WAAW;CACxC,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,cAAc;CACjC,MAAM,QAAQ,qBAAqB,WAAW,aAAa,iBAAiB;CAE5E,gBAAgB;EACd,MAAM,MAAM,QAAQ,IAAI,aAAa;EACrC,IAAI,CAAC,YAAY,CAAC,KAAK;EACvB,OAAO,qBAAqB,mBAAmB,SAAS,IAAI;CAC9D,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,MAAM,WAAW,UAAqC,kBAAkB,KAAK;EAC7E,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,OAAO,iBAAiB,eAAe,SAAS,IAAI;EACpD,aAAa;GACX,OAAO,oBAAoB,eAAe,SAAS,IAAI;GACvD,OAAO,oBAAoB,eAAe,SAAS,IAAI;EACzD;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,cAEd,uBAAuB,MAAM,OAAO,CAAC,GAAG;EACtC,WAAW,MAAM;EACjB,eAAe,MAAM;CACvB,CAAC,GACH;EAAC,MAAM;EAAO,MAAM;EAAW,MAAM;CAAa,CACpD;CACA,MAAM,EAAE,QAAQ,KAAK,SAAS,eAA+B,UAAU;CACvE,MAAM,WAAW,MAAM,UAAU,QAAQ,MAAM,UAAU;CACzD,IAAI,CAAC,UAAU,OAAO;CACtB,IAAI,CAAC,MAAM,QAAQ,MAAM,MAAM,WAAW,GAAG,OAAO;CAEpD,OACE,oBAAC,YAAY,MAAb;EACE,MAAM,MAAM;EACZ,eAAe,SAAS;GACtB,IAAI,MAAM;IACR,oBAAoB,EAAE,KAAK,CAAC;IAC5B;GACF;GACA,iBAAiB;EACnB;EAEA,UAAA,oBAAC,YAAY,QAAb;GAAoB,WAAW;GAC7B,UAAA,oBAAC,YAAY,YAAb;IACE,QAAQ,MAAM,UAAU,KAAA;IACxB,WAAW,OAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO;KAAE,GAAG;KAAmB;IAAO;IAEtC,UAAA,qBAAC,YAAY,OAAb;KACE,WAAW,GAAG,OAAO,OAAO,YAAY,OAAO,cAAc;KAC7D,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,mBAAiB,MAAM,UAAU,OAAO,KAAA,IAAY;KACpD,eAAe;KAJjB,UAAA;MAMG,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;MAChF,WAAW,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAe,UAAA;MAAe,CAAA,IAAI;MACpE,MAAM,UAAU,OAAO,OAAO,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAS,UAAA,MAAM;MAAY,CAAA;KAChE;;GACG,CAAA;EACN,CAAA;CACJ,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { getFloatingCollisionPadding } from "../floating/collisionPadding.mjs";
|
|
1
2
|
import Icon from "../../Icon/Icon.mjs";
|
|
2
3
|
import { preventDefaultAndStopPropagation } from "../../utils/dom.mjs";
|
|
3
4
|
import Switch from "../Switch/Switch.mjs";
|
|
@@ -18,7 +19,7 @@ import { ContextMenu } from "@base-ui/react/context-menu";
|
|
|
18
19
|
* their own layer z-index (same pattern as DropdownMenu) rather than relying on
|
|
19
20
|
* the fixed CSS fallback that can fall behind after repeated root openings (#608).
|
|
20
21
|
*/
|
|
21
|
-
const ContextMenuSubmenuPositioner = memo(({ style, ...rest }) => {
|
|
22
|
+
const ContextMenuSubmenuPositioner = memo(({ collisionPadding, style, ...rest }) => {
|
|
22
23
|
const explicitZIndex = typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0;
|
|
23
24
|
const { zIndex, ref: zRef } = useLayerZIndex("floating", explicitZIndex);
|
|
24
25
|
const resolvedStyle = typeof style === "function" ? (state) => ({
|
|
@@ -30,6 +31,7 @@ const ContextMenuSubmenuPositioner = memo(({ style, ...rest }) => {
|
|
|
30
31
|
};
|
|
31
32
|
return /* @__PURE__ */ jsx(ContextMenu.Positioner, {
|
|
32
33
|
...rest,
|
|
34
|
+
collisionPadding: collisionPadding ?? getFloatingCollisionPadding(),
|
|
33
35
|
ref: zRef,
|
|
34
36
|
style: resolvedStyle
|
|
35
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n type ComponentProps,\n type KeyboardEvent as ReactKeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { styles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport Switch from '@/base-ui/Switch';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport {\n type BaseMenuItemGroupType,\n type BaseSubMenuType,\n getItemKey,\n getItemLabel,\n hasAnyIcon,\n hasCheckboxAndIcon,\n type MenuDividerType,\n type MenuItemType,\n renderIcon,\n type RenderItemContentOptions,\n type RenderOptions,\n} from '@/Menu';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport {\n type ContextMenuCheckboxItem,\n type ContextMenuItem,\n type ContextMenuSwitchItem,\n} from './type';\n\ntype ContextMenuPositionerProps = ComponentProps<typeof ContextMenu.Positioner>;\n\n/**\n * Submenu positioners are portaled outside the root menu, so they must allocate\n * their own layer z-index (same pattern as DropdownMenu) rather than relying on\n * the fixed CSS fallback that can fall behind after repeated root openings (#608).\n */\nconst ContextMenuSubmenuPositioner = memo(({ style, ...rest }: ContextMenuPositionerProps) => {\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return <ContextMenu.Positioner {...rest} ref={zRef as any} style={resolvedStyle} />;\n});\n\nContextMenuSubmenuPositioner.displayName = 'ContextMenuSubmenuPositioner';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n const { t } = useTranslation(common);\n return (\n <ContextMenu.Item disabled className={cx(styles.item, styles.empty)}>\n <div className={styles.itemContent}>\n <span className={styles.label}>{t('common.empty')}</span>\n </div>\n </ContextMenu.Item>\n );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n checked?: boolean;\n children: ReactNode;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n label?: string;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n checked: checkedProp,\n children,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n label,\n onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : internalChecked;\n\n const handleCheckedChange = useCallback(\n (newChecked: boolean) => {\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n onCheckedChange?.(newChecked);\n },\n [isControlled, onCheckedChange],\n );\n\n return (\n <ContextMenu.Item\n className={cx(styles.item, danger && styles.danger)}\n closeOnClick={closeOnClick}\n disabled={disabled}\n label={label}\n onClick={(e) => {\n e.preventDefault();\n if (!disabled) {\n handleCheckedChange(!checked);\n }\n }}\n >\n {children}\n <span\n style={{ display: 'inline-flex', marginInlineStart: 16 }}\n onFocus={(e) => e.stopPropagation()}\n >\n <Switch\n checked={checked}\n disabled={disabled}\n size=\"small\"\n tabIndex={-1}\n onChange={handleCheckedChange}\n onClick={(_, e) => e.stopPropagation()}\n />\n </span>\n </ContextMenu.Item>\n );\n};\n\nconst renderItemContent = (\n item: MenuItemType | BaseSubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\n options?: RenderItemContentOptions,\n iconNode?: ReactNode,\n) => {\n const label = getItemLabel(item);\n const desc = 'desc' in item ? item.desc : undefined;\n const extra = 'extra' in item ? item.extra : undefined;\n const indicatorOnRight = options?.indicatorOnRight;\n const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n const shouldRenderIcon = hasCustomIcon\n ? Boolean(options?.reserveIconSpace || iconNode)\n : Boolean(hasIcon || options?.reserveIconSpace);\n\n const labelNode = desc ? (\n <div className={styles.labelGroup}>\n <span className={styles.label}>{label}</span>\n <span className={styles.desc}>{desc}</span>\n </div>\n ) : (\n <span className={styles.label}>{label}</span>\n );\n\n return (\n <div className={cx(styles.itemContent, alignStart && styles.itemContentAlignStart)}>\n {shouldRenderIcon ? (\n <span\n aria-hidden={!hasIcon}\n className={cx(styles.icon, alignStart && styles.iconAlignStart)}\n >\n {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n </span>\n ) : null}\n {labelNode}\n {extra ? <span className={styles.extra}>{extra}</span> : null}\n {indicatorOnRight && iconNode ? iconNode : null}\n {options?.submenu ? (\n <span className={styles.submenuArrow}>\n <SubmenuArrowIcon />\n </span>\n ) : null}\n </div>\n );\n};\n\nconst invokeItemClick = (\n item: MenuItemType,\n keyPath: string[],\n event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n if (!item.onClick) return;\n const key = item.key ?? keyPath.at(-1) ?? '';\n const info: MenuInfo = {\n domEvent: event,\n item: event.currentTarget as MenuInfo['item'],\n key: String(key),\n keyPath,\n };\n item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n items: ContextMenuItem[],\n keyPath: string[] = [],\n options?: RenderOptions,\n): ReactNode[] => {\n const iconAlign = options?.iconAlign;\n const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n const reserveIconSpace =\n options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n return items.map((item, index) => {\n if (!item) return null;\n\n const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n const itemKey = getItemKey(item, fallbackKey);\n const nextKeyPath = [...keyPath, String(itemKey)];\n\n if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n const checkboxItem = item as ContextMenuCheckboxItem;\n const label = getItemLabel(checkboxItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(checkboxItem.danger);\n const indicator = (\n <ContextMenu.CheckboxItemIndicator>\n <Icon icon={Check} size={'small'} />\n </ContextMenu.CheckboxItemIndicator>\n );\n\n return (\n <ContextMenu.CheckboxItem\n checked={checkboxItem.checked}\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={checkboxItem.closeOnClick}\n defaultChecked={checkboxItem.defaultChecked}\n disabled={checkboxItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n >\n {renderItemContent(\n checkboxItem,\n { iconAlign, indicatorOnRight, reserveIconSpace },\n indicator,\n )}\n </ContextMenu.CheckboxItem>\n );\n }\n\n if ((item as ContextMenuSwitchItem).type === 'switch') {\n const switchItem = item as ContextMenuSwitchItem;\n const label = getItemLabel(switchItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(switchItem.danger);\n\n return (\n <ContextMenuSwitchItemInternal\n checked={switchItem.checked}\n closeOnClick={switchItem.closeOnClick}\n danger={isDanger}\n defaultChecked={switchItem.defaultChecked}\n disabled={switchItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={switchItem.onCheckedChange}\n >\n {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n </ContextMenuSwitchItemInternal>\n );\n }\n\n if ((item as MenuDividerType).type === 'divider') {\n return <ContextMenu.Separator className={styles.separator} key={itemKey} />;\n }\n\n if ((item as BaseMenuItemGroupType).type === 'group') {\n const group = item as BaseMenuItemGroupType;\n const groupReserveIconSpace =\n iconSpaceMode === 'group'\n ? group.children\n ? hasAnyIcon(group.children)\n : false\n : reserveIconSpace;\n const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n return (\n <ContextMenu.Group key={itemKey}>\n {group.label ? (\n <ContextMenu.GroupLabel className={styles.groupLabel}>\n {group.label}\n </ContextMenu.GroupLabel>\n ) : null}\n {group.children\n ? renderContextMenuItems(group.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n indicatorOnRight: groupIndicatorOnRight,\n reserveIconSpace: groupReserveIconSpace,\n })\n : null}\n </ContextMenu.Group>\n );\n }\n\n if (\n (item as BaseSubMenuType).type === 'submenu' ||\n ('children' in item && (item as BaseSubMenuType).children)\n ) {\n const submenu = item as BaseSubMenuType;\n const label = getItemLabel(submenu);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n const submenuHasSlots = submenu.header != null || submenu.footer != null;\n const submenuBody =\n submenu.children && submenu.children.length > 0 ? (\n renderContextMenuItems(submenu.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n })\n ) : (\n <EmptyMenuItem />\n );\n\n return (\n <ContextMenu.SubmenuRoot\n defaultOpen={submenu.defaultOpen}\n key={itemKey}\n open={submenu.open}\n onOpenChange={submenu.onOpenChange}\n >\n <ContextMenu.SubmenuTrigger\n {...submenu.triggerProps}\n className={cx(styles.item, isDanger && styles.danger)}\n closeDelay={submenu.closeDelay}\n delay={submenu.delay}\n disabled={submenu.disabled}\n label={labelText}\n openOnHover={submenu.openOnHover}\n onClick={submenu.onClick}\n >\n {renderItemContent(submenu, {\n iconAlign,\n reserveIconSpace,\n submenu: true,\n })}\n </ContextMenu.SubmenuTrigger>\n <ContextMenu.Portal>\n <ContextMenuSubmenuPositioner\n alignOffset={-4}\n className={styles.positioner}\n data-submenu=\"\"\n sideOffset={-1}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n <ContextMenu.Popup\n className={submenuHasSlots ? cx(styles.popup, styles.popupWithSlots) : styles.popup}\n >\n {submenu.header == null ? null : (\n <div className={styles.header}>{submenu.header}</div>\n )}\n {submenuHasSlots ? (\n <div className={styles.slotViewport}>{submenuBody}</div>\n ) : (\n submenuBody\n )}\n {submenu.footer == null ? null : (\n <div className={styles.footer}>{submenu.footer}</div>\n )}\n </ContextMenu.Popup>\n </ContextMenuSubmenuPositioner>\n </ContextMenu.Portal>\n </ContextMenu.SubmenuRoot>\n );\n }\n\n const menuItem = item as MenuItemType;\n const label = getItemLabel(menuItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n return (\n <ContextMenu.Item\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={menuItem.closeOnClick}\n disabled={menuItem.disabled}\n key={itemKey}\n label={labelText}\n onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n >\n {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n </ContextMenu.Item>\n );\n });\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"renderItems.mjs","names":["common"],"sources":["../../../src/base-ui/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n type ComponentProps,\n type KeyboardEvent as ReactKeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n type ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport { styles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport Switch from '@/base-ui/Switch';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport {\n type BaseMenuItemGroupType,\n type BaseSubMenuType,\n getItemKey,\n getItemLabel,\n hasAnyIcon,\n hasCheckboxAndIcon,\n type MenuDividerType,\n type MenuItemType,\n renderIcon,\n type RenderItemContentOptions,\n type RenderOptions,\n} from '@/Menu';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { useLayerZIndex } from '../zIndex';\nimport {\n type ContextMenuCheckboxItem,\n type ContextMenuItem,\n type ContextMenuSwitchItem,\n} from './type';\n\ntype ContextMenuPositionerProps = ComponentProps<typeof ContextMenu.Positioner>;\n\n/**\n * Submenu positioners are portaled outside the root menu, so they must allocate\n * their own layer z-index (same pattern as DropdownMenu) rather than relying on\n * the fixed CSS fallback that can fall behind after repeated root openings (#608).\n */\nconst ContextMenuSubmenuPositioner = memo(\n ({ collisionPadding, style, ...rest }: ContextMenuPositionerProps) => {\n const explicitZIndex =\n typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n ? style.zIndex\n : undefined;\n const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n\n const resolvedStyle =\n typeof style === 'function'\n ? (state: any) => ({ zIndex, ...style(state) })\n : { zIndex, ...style };\n\n return (\n <ContextMenu.Positioner\n {...rest}\n collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n ref={zRef as any}\n style={resolvedStyle}\n />\n );\n },\n);\n\nContextMenuSubmenuPositioner.displayName = 'ContextMenuSubmenuPositioner';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n const { t } = useTranslation(common);\n return (\n <ContextMenu.Item disabled className={cx(styles.item, styles.empty)}>\n <div className={styles.itemContent}>\n <span className={styles.label}>{t('common.empty')}</span>\n </div>\n </ContextMenu.Item>\n );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n checked?: boolean;\n children: ReactNode;\n closeOnClick?: boolean;\n danger?: boolean;\n defaultChecked?: boolean;\n disabled?: boolean;\n label?: string;\n onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n checked: checkedProp,\n children,\n closeOnClick = false,\n danger,\n defaultChecked,\n disabled,\n label,\n onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\n const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : internalChecked;\n\n const handleCheckedChange = useCallback(\n (newChecked: boolean) => {\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n onCheckedChange?.(newChecked);\n },\n [isControlled, onCheckedChange],\n );\n\n return (\n <ContextMenu.Item\n className={cx(styles.item, danger && styles.danger)}\n closeOnClick={closeOnClick}\n disabled={disabled}\n label={label}\n onClick={(e) => {\n e.preventDefault();\n if (!disabled) {\n handleCheckedChange(!checked);\n }\n }}\n >\n {children}\n <span\n style={{ display: 'inline-flex', marginInlineStart: 16 }}\n onFocus={(e) => e.stopPropagation()}\n >\n <Switch\n checked={checked}\n disabled={disabled}\n size=\"small\"\n tabIndex={-1}\n onChange={handleCheckedChange}\n onClick={(_, e) => e.stopPropagation()}\n />\n </span>\n </ContextMenu.Item>\n );\n};\n\nconst renderItemContent = (\n item: MenuItemType | BaseSubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\n options?: RenderItemContentOptions,\n iconNode?: ReactNode,\n) => {\n const label = getItemLabel(item);\n const desc = 'desc' in item ? item.desc : undefined;\n const extra = 'extra' in item ? item.extra : undefined;\n const indicatorOnRight = options?.indicatorOnRight;\n const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n const shouldRenderIcon = hasCustomIcon\n ? Boolean(options?.reserveIconSpace || iconNode)\n : Boolean(hasIcon || options?.reserveIconSpace);\n\n const labelNode = desc ? (\n <div className={styles.labelGroup}>\n <span className={styles.label}>{label}</span>\n <span className={styles.desc}>{desc}</span>\n </div>\n ) : (\n <span className={styles.label}>{label}</span>\n );\n\n return (\n <div className={cx(styles.itemContent, alignStart && styles.itemContentAlignStart)}>\n {shouldRenderIcon ? (\n <span\n aria-hidden={!hasIcon}\n className={cx(styles.icon, alignStart && styles.iconAlignStart)}\n >\n {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n </span>\n ) : null}\n {labelNode}\n {extra ? <span className={styles.extra}>{extra}</span> : null}\n {indicatorOnRight && iconNode ? iconNode : null}\n {options?.submenu ? (\n <span className={styles.submenuArrow}>\n <SubmenuArrowIcon />\n </span>\n ) : null}\n </div>\n );\n};\n\nconst invokeItemClick = (\n item: MenuItemType,\n keyPath: string[],\n event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n if (!item.onClick) return;\n const key = item.key ?? keyPath.at(-1) ?? '';\n const info: MenuInfo = {\n domEvent: event,\n item: event.currentTarget as MenuInfo['item'],\n key: String(key),\n keyPath,\n };\n item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n items: ContextMenuItem[],\n keyPath: string[] = [],\n options?: RenderOptions,\n): ReactNode[] => {\n const iconAlign = options?.iconAlign;\n const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n const reserveIconSpace =\n options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n return items.map((item, index) => {\n if (!item) return null;\n\n const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n const itemKey = getItemKey(item, fallbackKey);\n const nextKeyPath = [...keyPath, String(itemKey)];\n\n if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n const checkboxItem = item as ContextMenuCheckboxItem;\n const label = getItemLabel(checkboxItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(checkboxItem.danger);\n const indicator = (\n <ContextMenu.CheckboxItemIndicator>\n <Icon icon={Check} size={'small'} />\n </ContextMenu.CheckboxItemIndicator>\n );\n\n return (\n <ContextMenu.CheckboxItem\n checked={checkboxItem.checked}\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={checkboxItem.closeOnClick}\n defaultChecked={checkboxItem.defaultChecked}\n disabled={checkboxItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n >\n {renderItemContent(\n checkboxItem,\n { iconAlign, indicatorOnRight, reserveIconSpace },\n indicator,\n )}\n </ContextMenu.CheckboxItem>\n );\n }\n\n if ((item as ContextMenuSwitchItem).type === 'switch') {\n const switchItem = item as ContextMenuSwitchItem;\n const label = getItemLabel(switchItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = Boolean(switchItem.danger);\n\n return (\n <ContextMenuSwitchItemInternal\n checked={switchItem.checked}\n closeOnClick={switchItem.closeOnClick}\n danger={isDanger}\n defaultChecked={switchItem.defaultChecked}\n disabled={switchItem.disabled}\n key={itemKey}\n label={labelText}\n onCheckedChange={switchItem.onCheckedChange}\n >\n {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n </ContextMenuSwitchItemInternal>\n );\n }\n\n if ((item as MenuDividerType).type === 'divider') {\n return <ContextMenu.Separator className={styles.separator} key={itemKey} />;\n }\n\n if ((item as BaseMenuItemGroupType).type === 'group') {\n const group = item as BaseMenuItemGroupType;\n const groupReserveIconSpace =\n iconSpaceMode === 'group'\n ? group.children\n ? hasAnyIcon(group.children)\n : false\n : reserveIconSpace;\n const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n return (\n <ContextMenu.Group key={itemKey}>\n {group.label ? (\n <ContextMenu.GroupLabel className={styles.groupLabel}>\n {group.label}\n </ContextMenu.GroupLabel>\n ) : null}\n {group.children\n ? renderContextMenuItems(group.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n indicatorOnRight: groupIndicatorOnRight,\n reserveIconSpace: groupReserveIconSpace,\n })\n : null}\n </ContextMenu.Group>\n );\n }\n\n if (\n (item as BaseSubMenuType).type === 'submenu' ||\n ('children' in item && (item as BaseSubMenuType).children)\n ) {\n const submenu = item as BaseSubMenuType;\n const label = getItemLabel(submenu);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n const submenuHasSlots = submenu.header != null || submenu.footer != null;\n const submenuBody =\n submenu.children && submenu.children.length > 0 ? (\n renderContextMenuItems(submenu.children, nextKeyPath, {\n iconAlign,\n iconSpaceMode,\n })\n ) : (\n <EmptyMenuItem />\n );\n\n return (\n <ContextMenu.SubmenuRoot\n defaultOpen={submenu.defaultOpen}\n key={itemKey}\n open={submenu.open}\n onOpenChange={submenu.onOpenChange}\n >\n <ContextMenu.SubmenuTrigger\n {...submenu.triggerProps}\n className={cx(styles.item, isDanger && styles.danger)}\n closeDelay={submenu.closeDelay}\n delay={submenu.delay}\n disabled={submenu.disabled}\n label={labelText}\n openOnHover={submenu.openOnHover}\n onClick={submenu.onClick}\n >\n {renderItemContent(submenu, {\n iconAlign,\n reserveIconSpace,\n submenu: true,\n })}\n </ContextMenu.SubmenuTrigger>\n <ContextMenu.Portal>\n <ContextMenuSubmenuPositioner\n alignOffset={-4}\n className={styles.positioner}\n data-submenu=\"\"\n sideOffset={-1}\n onContextMenu={preventDefaultAndStopPropagation}\n >\n <ContextMenu.Popup\n className={submenuHasSlots ? cx(styles.popup, styles.popupWithSlots) : styles.popup}\n >\n {submenu.header == null ? null : (\n <div className={styles.header}>{submenu.header}</div>\n )}\n {submenuHasSlots ? (\n <div className={styles.slotViewport}>{submenuBody}</div>\n ) : (\n submenuBody\n )}\n {submenu.footer == null ? null : (\n <div className={styles.footer}>{submenu.footer}</div>\n )}\n </ContextMenu.Popup>\n </ContextMenuSubmenuPositioner>\n </ContextMenu.Portal>\n </ContextMenu.SubmenuRoot>\n );\n }\n\n const menuItem = item as MenuItemType;\n const label = getItemLabel(menuItem);\n const labelText = typeof label === 'string' ? label : undefined;\n const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n return (\n <ContextMenu.Item\n className={cx(styles.item, isDanger && styles.danger)}\n closeOnClick={menuItem.closeOnClick}\n disabled={menuItem.disabled}\n key={itemKey}\n label={labelText}\n onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n >\n {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n </ContextMenu.Item>\n );\n });\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { DraggablePanelProps } from "./type.mjs";
|
|
2
|
+
//#region src/base-ui/DraggablePanel/DraggablePanel.d.ts
|
|
3
|
+
declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { DraggablePanel as default };
|
|
6
|
+
//# sourceMappingURL=DraggablePanel.d.mts.map
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { AXES } from "./core/axes.mjs";
|
|
3
|
+
import { DraggablePanelContent, DraggablePanelHandle, DraggablePanelRoot, DraggablePanelToggle } from "./atoms.mjs";
|
|
4
|
+
import { memo, useCallback } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { cx } from "antd-style";
|
|
7
|
+
//#region src/base-ui/DraggablePanel/DraggablePanel.tsx
|
|
8
|
+
const toNumber = (value) => typeof value === "number" ? Math.max(value, 0) : void 0;
|
|
9
|
+
const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, styles: customStyles, ...rest }) => {
|
|
10
|
+
const { vertical } = AXES[placement];
|
|
11
|
+
const toSize = useCallback((value) => vertical ? {
|
|
12
|
+
height: value,
|
|
13
|
+
width: "100%"
|
|
14
|
+
} : {
|
|
15
|
+
height: "100%",
|
|
16
|
+
width: value
|
|
17
|
+
}, [vertical]);
|
|
18
|
+
const toDelta = useCallback((value) => vertical ? {
|
|
19
|
+
height: value,
|
|
20
|
+
width: 0
|
|
21
|
+
} : {
|
|
22
|
+
height: 0,
|
|
23
|
+
width: value
|
|
24
|
+
}, [vertical]);
|
|
25
|
+
const handleSizeChange = useCallback((next, delta) => onSizeChange?.(toDelta(delta), toSize(next)), [
|
|
26
|
+
onSizeChange,
|
|
27
|
+
toDelta,
|
|
28
|
+
toSize
|
|
29
|
+
]);
|
|
30
|
+
const handleSizeDragging = useCallback((next, delta) => onSizeDragging?.(toDelta(delta), toSize(next)), [
|
|
31
|
+
onSizeDragging,
|
|
32
|
+
toDelta,
|
|
33
|
+
toSize
|
|
34
|
+
]);
|
|
35
|
+
return /* @__PURE__ */ jsxs(DraggablePanelRoot, {
|
|
36
|
+
backgroundColor,
|
|
37
|
+
className,
|
|
38
|
+
collapseThreshold,
|
|
39
|
+
defaultExpand,
|
|
40
|
+
defaultSize: toNumber(vertical ? defaultSize?.height : defaultSize?.width),
|
|
41
|
+
expand,
|
|
42
|
+
expandable,
|
|
43
|
+
max: toNumber(vertical ? maxHeight : maxWidth),
|
|
44
|
+
min: toNumber(vertical ? minHeight : minWidth) ?? 0,
|
|
45
|
+
mode,
|
|
46
|
+
placement,
|
|
47
|
+
showBorder,
|
|
48
|
+
size: toNumber(vertical ? size?.height : size?.width),
|
|
49
|
+
onExpandChange,
|
|
50
|
+
onSizeChange: handleSizeChange,
|
|
51
|
+
onSizeDragging: handleSizeDragging,
|
|
52
|
+
...rest,
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsx(DraggablePanelToggle, { showHandleWhenCollapsed }),
|
|
55
|
+
/* @__PURE__ */ jsx(DraggablePanelContent, {
|
|
56
|
+
className: cx(classNames?.content),
|
|
57
|
+
style: customStyles?.content,
|
|
58
|
+
children
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsx(DraggablePanelHandle, { wideArea: showHandleWideArea })
|
|
61
|
+
]
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
DraggablePanel.displayName = "DraggablePanel";
|
|
65
|
+
//#endregion
|
|
66
|
+
export { DraggablePanel as default };
|
|
67
|
+
|
|
68
|
+
//# sourceMappingURL=DraggablePanel.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DraggablePanel.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport {\n DraggablePanelContent,\n DraggablePanelHandle,\n DraggablePanelRoot,\n DraggablePanelToggle,\n} from './atoms';\nimport { AXES } from './core/axes';\nimport type { DraggablePanelProps, DraggablePanelSize } from './type';\n\nconst toNumber = (value: number | string | undefined) =>\n typeof value === 'number' ? Math.max(value, 0) : undefined;\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n backgroundColor,\n children,\n className,\n classNames,\n collapseThreshold,\n defaultExpand,\n defaultSize,\n expand,\n expandable = true,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n showHandleWhenCollapsed,\n showHandleWideArea = true,\n size,\n styles: customStyles,\n ...rest\n }) => {\n const { vertical } = AXES[placement];\n\n const toSize = useCallback(\n (value: number): DraggablePanelSize =>\n vertical ? { height: value, width: '100%' } : { height: '100%', width: value },\n [vertical],\n );\n const toDelta = useCallback(\n (value: number): DraggablePanelSize =>\n vertical ? { height: value, width: 0 } : { height: 0, width: value },\n [vertical],\n );\n\n const handleSizeChange = useCallback(\n (next: number, delta: number) => onSizeChange?.(toDelta(delta), toSize(next)),\n [onSizeChange, toDelta, toSize],\n );\n const handleSizeDragging = useCallback(\n (next: number, delta: number) => onSizeDragging?.(toDelta(delta), toSize(next)),\n [onSizeDragging, toDelta, toSize],\n );\n\n return (\n <DraggablePanelRoot\n backgroundColor={backgroundColor}\n className={className}\n collapseThreshold={collapseThreshold}\n defaultExpand={defaultExpand}\n defaultSize={toNumber(vertical ? defaultSize?.height : defaultSize?.width)}\n expand={expand}\n expandable={expandable}\n max={toNumber(vertical ? maxHeight : maxWidth)}\n min={toNumber(vertical ? minHeight : minWidth) ?? 0}\n mode={mode}\n placement={placement}\n showBorder={showBorder}\n size={toNumber(vertical ? size?.height : size?.width)}\n onExpandChange={onExpandChange}\n onSizeChange={handleSizeChange}\n onSizeDragging={handleSizeDragging}\n {...rest}\n >\n <DraggablePanelToggle showHandleWhenCollapsed={showHandleWhenCollapsed} />\n <DraggablePanelContent className={cx(classNames?.content)} style={customStyles?.content}>\n {children}\n </DraggablePanelContent>\n <DraggablePanelHandle wideArea={showHandleWideArea} />\n </DraggablePanelRoot>\n );\n },\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,UAChB,OAAO,UAAU,WAAW,KAAK,IAAI,OAAO,CAAC,IAAI,KAAA;AAEnD,MAAM,iBAAiB,MACpB,EACC,iBACA,UACA,WACA,YACA,mBACA,eACA,aACA,QACA,aAAa,MACb,WACA,UACA,WACA,UACA,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,yBACA,qBAAqB,MACrB,MACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,EAAE,aAAa,KAAK;CAE1B,MAAM,SAAS,aACZ,UACC,WAAW;EAAE,QAAQ;EAAO,OAAO;CAAO,IAAI;EAAE,QAAQ;EAAQ,OAAO;CAAM,GAC/E,CAAC,QAAQ,CACX;CACA,MAAM,UAAU,aACb,UACC,WAAW;EAAE,QAAQ;EAAO,OAAO;CAAE,IAAI;EAAE,QAAQ;EAAG,OAAO;CAAM,GACrE,CAAC,QAAQ,CACX;CAEA,MAAM,mBAAmB,aACtB,MAAc,UAAkB,eAAe,QAAQ,KAAK,GAAG,OAAO,IAAI,CAAC,GAC5E;EAAC;EAAc;EAAS;CAAM,CAChC;CACA,MAAM,qBAAqB,aACxB,MAAc,UAAkB,iBAAiB,QAAQ,KAAK,GAAG,OAAO,IAAI,CAAC,GAC9E;EAAC;EAAgB;EAAS;CAAM,CAClC;CAEA,OACE,qBAAC,oBAAD;EACmB;EACN;EACQ;EACJ;EACf,aAAa,SAAS,WAAW,aAAa,SAAS,aAAa,KAAK;EACjE;EACI;EACZ,KAAK,SAAS,WAAW,YAAY,QAAQ;EAC7C,KAAK,SAAS,WAAW,YAAY,QAAQ,KAAK;EAC5C;EACK;EACC;EACZ,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM,KAAK;EACpC;EAChB,cAAc;EACd,gBAAgB;EAChB,GAAI;EAjBN,UAAA;GAmBE,oBAAC,sBAAD,EAA+C,wBAA0B,CAAA;GACzE,oBAAC,uBAAD;IAAuB,WAAW,GAAG,YAAY,OAAO;IAAG,OAAO,cAAc;IAC7E;GACoB,CAAA;GACvB,oBAAC,sBAAD,EAAsB,UAAU,mBAAqB,CAAA;EACnC;;AAExB,CACF;AAEA,eAAe,cAAc"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { DivProps } from "../../types/index.mjs";
|
|
2
|
+
import { Placement } from "./core/axes.mjs";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
//#region src/base-ui/DraggablePanel/atoms.d.ts
|
|
5
|
+
interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {
|
|
6
|
+
backgroundColor?: string;
|
|
7
|
+
collapseThreshold?: number;
|
|
8
|
+
defaultExpand?: boolean;
|
|
9
|
+
defaultSize?: number;
|
|
10
|
+
expand?: boolean;
|
|
11
|
+
expandable?: boolean;
|
|
12
|
+
max?: number;
|
|
13
|
+
min?: number;
|
|
14
|
+
mode?: 'fixed' | 'float';
|
|
15
|
+
onExpandChange?: (expand: boolean) => void;
|
|
16
|
+
onSizeChange?: (size: number, delta: number) => void;
|
|
17
|
+
onSizeDragging?: (size: number, delta: number) => void;
|
|
18
|
+
placement?: Placement;
|
|
19
|
+
showBorder?: boolean;
|
|
20
|
+
size?: number;
|
|
21
|
+
}
|
|
22
|
+
declare const DraggablePanelRoot: import("react").NamedExoticComponent<DraggablePanelRootProps>;
|
|
23
|
+
interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}
|
|
24
|
+
declare const DraggablePanelContent: import("react").NamedExoticComponent<DraggablePanelContentProps>;
|
|
25
|
+
interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {
|
|
26
|
+
wideArea?: boolean;
|
|
27
|
+
}
|
|
28
|
+
declare const DraggablePanelHandle: import("react").NamedExoticComponent<DraggablePanelHandleProps>;
|
|
29
|
+
interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {
|
|
30
|
+
showHandleWhenCollapsed?: boolean;
|
|
31
|
+
}
|
|
32
|
+
declare const DraggablePanelToggle: import("react").NamedExoticComponent<DraggablePanelToggleProps>;
|
|
33
|
+
type DraggablePanelContainerProps = DivProps;
|
|
34
|
+
declare const DraggablePanelContainer: import("react").NamedExoticComponent<DivProps>;
|
|
35
|
+
type DraggablePanelBodyProps = DivProps;
|
|
36
|
+
declare const DraggablePanelBody: import("react").NamedExoticComponent<DivProps>;
|
|
37
|
+
type DraggablePanelFooterProps = DivProps;
|
|
38
|
+
declare const DraggablePanelFooter: import("react").NamedExoticComponent<DivProps>;
|
|
39
|
+
interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {
|
|
40
|
+
extra?: ReactNode;
|
|
41
|
+
onCollapse?: () => void;
|
|
42
|
+
title?: ReactNode;
|
|
43
|
+
}
|
|
44
|
+
declare const DraggablePanelHeader: import("react").NamedExoticComponent<DraggablePanelHeaderProps>;
|
|
45
|
+
//#endregion
|
|
46
|
+
export { DraggablePanelBody, DraggablePanelBodyProps, DraggablePanelContainer, DraggablePanelContainerProps, DraggablePanelContent, DraggablePanelContentProps, DraggablePanelFooter, DraggablePanelFooterProps, DraggablePanelHandle, DraggablePanelHandleProps, DraggablePanelHeader, DraggablePanelHeaderProps, DraggablePanelRoot, DraggablePanelRootProps, DraggablePanelToggle, DraggablePanelToggleProps };
|
|
47
|
+
//# sourceMappingURL=atoms.d.mts.map
|