This commit is contained in:
eewing
Generated
Vendored
+113
@@ -0,0 +1,113 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { DropdownMenuContentStaticProps } from "../types.js";
|
||||
import { MenuContentState } from "../../menu/menu.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
|
||||
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
|
||||
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
id = createId(uid),
|
||||
child,
|
||||
children,
|
||||
ref = $bindable(null),
|
||||
loop = true,
|
||||
onInteractOutside = noop,
|
||||
onEscapeKeydown = noop,
|
||||
onCloseAutoFocus = noop,
|
||||
forceMount = false,
|
||||
style,
|
||||
...restProps
|
||||
}: DropdownMenuContentStaticProps = $props();
|
||||
|
||||
const contentState = MenuContentState.create({
|
||||
id: boxWith(() => id),
|
||||
loop: boxWith(() => loop),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
||||
|
||||
function handleInteractOutside(e: PointerEvent) {
|
||||
contentState.handleInteractOutside(e);
|
||||
if (e.defaultPrevented) return;
|
||||
onInteractOutside(e);
|
||||
if (e.defaultPrevented) return;
|
||||
contentState.parentMenu.onClose();
|
||||
}
|
||||
function handleEscapeKeydown(e: KeyboardEvent) {
|
||||
onEscapeKeydown(e);
|
||||
if (e.defaultPrevented) return;
|
||||
contentState.parentMenu.onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if forceMount}
|
||||
<PopperLayerForceMount
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
enabled={contentState.parentMenu.opts.open.current}
|
||||
onInteractOutside={handleInteractOutside}
|
||||
onEscapeKeydown={handleEscapeKeydown}
|
||||
trapFocus
|
||||
{loop}
|
||||
forceMount={true}
|
||||
isStatic
|
||||
{id}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("dropdown-menu") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayerForceMount>
|
||||
{:else if !forceMount}
|
||||
<PopperLayer
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
open={contentState.parentMenu.opts.open.current}
|
||||
onInteractOutside={handleInteractOutside}
|
||||
onEscapeKeydown={handleEscapeKeydown}
|
||||
trapFocus
|
||||
{loop}
|
||||
forceMount={false}
|
||||
isStatic
|
||||
{id}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("dropdown-menu") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayer>
|
||||
{/if}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { DropdownMenuContentStaticProps } from "../types.js";
|
||||
declare const DropdownMenuContentStatic: import("svelte").Component<DropdownMenuContentStaticProps, {}, "ref">;
|
||||
type DropdownMenuContentStatic = ReturnType<typeof DropdownMenuContentStatic>;
|
||||
export default DropdownMenuContentStatic;
|
||||
Generated
Vendored
+122
@@ -0,0 +1,122 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { DropdownMenuContentProps } from "../types.js";
|
||||
import { MenuContentState } from "../../menu/menu.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
|
||||
import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
|
||||
import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
id = createId(uid),
|
||||
child,
|
||||
children,
|
||||
ref = $bindable(null),
|
||||
loop = true,
|
||||
onInteractOutside = noop,
|
||||
onEscapeKeydown = noop,
|
||||
onCloseAutoFocus = noop,
|
||||
forceMount = false,
|
||||
trapFocus = false,
|
||||
style,
|
||||
...restProps
|
||||
}: DropdownMenuContentProps = $props();
|
||||
|
||||
const contentState = MenuContentState.create({
|
||||
id: boxWith(() => id),
|
||||
loop: boxWith(() => loop),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, contentState.props));
|
||||
|
||||
function handleInteractOutside(e: PointerEvent) {
|
||||
contentState.handleInteractOutside(e);
|
||||
if (e.defaultPrevented) return;
|
||||
onInteractOutside(e);
|
||||
if (e.defaultPrevented) return;
|
||||
|
||||
// don't close if the interaction is with a submenu content or items
|
||||
if (e.target && e.target instanceof Element) {
|
||||
const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr("sub-content")}]`;
|
||||
if (e.target.closest(subContentSelector)) return;
|
||||
}
|
||||
contentState.parentMenu.onClose();
|
||||
}
|
||||
function handleEscapeKeydown(e: KeyboardEvent) {
|
||||
onEscapeKeydown(e);
|
||||
if (e.defaultPrevented) return;
|
||||
contentState.parentMenu.onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if forceMount}
|
||||
<PopperLayerForceMount
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
enabled={contentState.parentMenu.opts.open.current}
|
||||
onInteractOutside={handleInteractOutside}
|
||||
onEscapeKeydown={handleEscapeKeydown}
|
||||
{trapFocus}
|
||||
{loop}
|
||||
forceMount={true}
|
||||
{id}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props, wrapperProps })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("dropdown-menu") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...wrapperProps}>
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayerForceMount>
|
||||
{:else if !forceMount}
|
||||
<PopperLayer
|
||||
{...mergedProps}
|
||||
{...contentState.popperProps}
|
||||
ref={contentState.opts.ref}
|
||||
open={contentState.parentMenu.opts.open.current}
|
||||
onInteractOutside={handleInteractOutside}
|
||||
onEscapeKeydown={handleEscapeKeydown}
|
||||
{trapFocus}
|
||||
{loop}
|
||||
forceMount={false}
|
||||
{id}
|
||||
shouldRender={contentState.shouldRender}
|
||||
>
|
||||
{#snippet popper({ props, wrapperProps })}
|
||||
{@const finalProps = mergeProps(
|
||||
props,
|
||||
{ style: getFloatingContentCSSVars("dropdown-menu") },
|
||||
{ style }
|
||||
)}
|
||||
{#if child}
|
||||
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
||||
{:else}
|
||||
<div {...wrapperProps}>
|
||||
<div {...finalProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</PopperLayer>
|
||||
{/if}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { DropdownMenuContentProps } from "../types.js";
|
||||
declare const DropdownMenuContent: import("svelte").Component<DropdownMenuContentProps, {}, "ref">;
|
||||
type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;
|
||||
export default DropdownMenuContent;
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
export { default as Root } from "../menu/components/menu.svelte";
|
||||
export { default as Sub } from "../menu/components/menu-sub.svelte";
|
||||
export { default as Item } from "../menu/components/menu-item.svelte";
|
||||
export { default as Group } from "../menu/components/menu-group.svelte";
|
||||
export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
|
||||
export { default as Arrow } from "../menu/components/menu-arrow.svelte";
|
||||
export { default as Content } from "./components/dropdown-menu-content.svelte";
|
||||
export { default as ContentStatic } from "./components/dropdown-menu-content-static.svelte";
|
||||
export { default as Trigger } from "../menu/components/menu-trigger.svelte";
|
||||
export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
|
||||
export { default as Separator } from "../menu/components/menu-separator.svelte";
|
||||
export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
|
||||
export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
|
||||
export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
|
||||
export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
|
||||
export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
|
||||
export { default as Portal } from "../utilities/portal/portal.svelte";
|
||||
export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";
|
||||
export type { DropdownMenuArrowProps as ArrowProps, DropdownMenuCheckboxItemProps as CheckboxItemProps, DropdownMenuContentProps as ContentProps, DropdownMenuContentStaticProps as ContentStaticProps, DropdownMenuGroupProps as GroupProps, DropdownMenuItemProps as ItemProps, DropdownMenuGroupHeadingProps as GroupHeadingProps, DropdownMenuRootProps as RootProps, DropdownMenuRadioGroupProps as RadioGroupProps, DropdownMenuRadioItemProps as RadioItemProps, DropdownMenuSeparatorProps as SeparatorProps, DropdownMenuSubContentProps as SubContentProps, DropdownMenuSubContentStaticProps as SubContentStaticProps, DropdownMenuSubProps as SubProps, DropdownMenuSubTriggerProps as SubTriggerProps, DropdownMenuTriggerProps as TriggerProps, DropdownMenuPortalProps as PortalProps, DropdownMenuCheckboxGroupProps as CheckboxGroupProps, } from "./types.js";
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
export { default as Root } from "../menu/components/menu.svelte";
|
||||
export { default as Sub } from "../menu/components/menu-sub.svelte";
|
||||
export { default as Item } from "../menu/components/menu-item.svelte";
|
||||
export { default as Group } from "../menu/components/menu-group.svelte";
|
||||
export { default as GroupHeading } from "../menu/components/menu-group-heading.svelte";
|
||||
export { default as Arrow } from "../menu/components/menu-arrow.svelte";
|
||||
export { default as Content } from "./components/dropdown-menu-content.svelte";
|
||||
export { default as ContentStatic } from "./components/dropdown-menu-content-static.svelte";
|
||||
export { default as Trigger } from "../menu/components/menu-trigger.svelte";
|
||||
export { default as RadioItem } from "../menu/components/menu-radio-item.svelte";
|
||||
export { default as Separator } from "../menu/components/menu-separator.svelte";
|
||||
export { default as RadioGroup } from "../menu/components/menu-radio-group.svelte";
|
||||
export { default as SubContent } from "../menu/components/menu-sub-content.svelte";
|
||||
export { default as SubContentStatic } from "../menu/components/menu-sub-content-static.svelte";
|
||||
export { default as SubTrigger } from "../menu/components/menu-sub-trigger.svelte";
|
||||
export { default as CheckboxItem } from "../menu/components/menu-checkbox-item.svelte";
|
||||
export { default as Portal } from "../utilities/portal/portal.svelte";
|
||||
export { default as CheckboxGroup } from "../menu/components/menu-checkbox-group.svelte";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as DropdownMenu from "./exports.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as DropdownMenu from "./exports.js";
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export type { MenuArrowProps as DropdownMenuArrowProps, MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, MenuContentProps as DropdownMenuContentProps, MenuContentStaticProps as DropdownMenuContentStaticProps, MenuGroupProps as DropdownMenuGroupProps, MenuItemProps as DropdownMenuItemProps, MenuGroupHeadingProps as DropdownMenuGroupHeadingProps, MenuRootProps as DropdownMenuRootProps, MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparatorProps as DropdownMenuSeparatorProps, MenuSubContentProps as DropdownMenuSubContentProps, MenuSubContentStaticProps as DropdownMenuSubContentStaticProps, MenuSubProps as DropdownMenuSubProps, MenuSubTriggerProps as DropdownMenuSubTriggerProps, MenuTriggerProps as DropdownMenuTriggerProps, MenuPortalProps as DropdownMenuPortalProps, MenuCheckboxGroupProps as DropdownMenuCheckboxGroupProps, } from "../menu/types.js";
|
||||
export type { MenuRootPropsWithoutHTML as DropdownMenuRootPropsWithoutHTML, MenuArrowPropsWithoutHTML as DropdownMenuArrowPropsWithoutHTML, MenuCheckboxItemPropsWithoutHTML as DropdownMenuCheckboxItemPropsWithoutHTML, MenuContentPropsWithoutHTML as DropdownMenuContentPropsWithoutHTML, MenuContentStaticPropsWithoutHTML as DropdownMenuContentStaticPropsWithoutHTML, MenuGroupPropsWithoutHTML as DropdownMenuGroupPropsWithoutHTML, MenuItemPropsWithoutHTML as DropdownMenuItemPropsWithoutHTML, MenuGroupHeadingPropsWithoutHTML as DropdownMenuGroupHeadingPropsWithoutHTML, MenuRadioGroupPropsWithoutHTML as DropdownMenuRadioGroupPropsWithoutHTML, MenuRadioItemPropsWithoutHTML as DropdownMenuRadioItemPropsWithoutHTML, MenuSeparatorPropsWithoutHTML as DropdownMenuSeparatorPropsWithoutHTML, MenuSubPropsWithoutHTML as DropdownMenuSubPropsWithoutHTML, MenuSubTriggerPropsWithoutHTML as DropdownMenuSubTriggerPropsWithoutHTML, MenuSubContentPropsWithoutHTML as DropdownMenuSubContentPropsWithoutHTML, MenuSubContentStaticPropsWithoutHTML as DropdownMenuSubContentStaticPropsWithoutHTML, MenuTriggerPropsWithoutHTML as DropdownMenuTriggerPropsWithoutHTML, MenuPortalPropsWithoutHTML as DropdownMenuPortalPropsWithoutHTML, MenuCheckboxGroupPropsWithoutHTML as DropdownMenuCheckboxGroupPropsWithoutHTML, } from "../menu/types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user