Merge pull request #8 from huntabyte/fix/dropdown

huntabyte · Aug 8, 2023 · 4692b9b · 4692b9b
2 parents aea094c + fe27357
commit 4692b9b
Show file tree

Hide file tree

Showing 17 changed files with 33 additions and 18 deletions.
diff --git a/.changeset/spotty-cobras-sip.md b/.changeset/spotty-cobras-sip.md
@@ -0,0 +1,5 @@
+---
+"@huntabyte/primitives": patch
+---
+
+[Menu Primitives] Fix `sideOffset` prop
diff --git a/.eslintignore b/.eslintignore
@@ -11,3 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+.changeset/
+.prettierrc
+package.json
diff --git a/.prettierignore b/.prettierignore
@@ -11,3 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+.changeset/
+.prettierrc
+package.json
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-# Primitives
+# Primitives (WIP)
 
 Headless Svelte components built with [Melt UI](https://melt-ui.com) builders.
diff --git a/src/lib/primitives/collapsible/components/CollapsibleContent.svelte b/src/lib/primitives/collapsible/components/CollapsibleContent.svelte
@@ -2,6 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import type { ContentProps } from "../types.js";
 	import { ctx } from "../ctx.js";
+	import type { Transition } from "$internal/types.js";
 
 	type T = $$Generic<Transition>;
 	type $$Props = ContentProps<T>;

diff --git a/src/lib/primitives/collapsible/components/CollapsibleTrigger.svelte b/src/lib/primitives/collapsible/components/CollapsibleTrigger.svelte
@@ -4,7 +4,7 @@
 	import type { TriggerProps } from "../types.js";
 
 	type $$Props = TriggerProps;
-	export let asChild: boolean = false;
+	export let asChild = false;
 	const trigger = ctx.get().elements.trigger;
 </script>
 

diff --git a/src/lib/primitives/context-menu/components/ContextMenuContent.svelte b/src/lib/primitives/context-menu/components/ContextMenuContent.svelte
@@ -4,10 +4,8 @@
 	import type { ContentProps } from "../types.js";
 
 	type $$Props = ContentProps;
-	const {
-		elements: { menu: content },
-		states: { open }
-	} = ctx.get();
+	export let sideOffset: $$Props["sideOffset"] = 5;
+	const { content, open } = ctx.getContent(sideOffset);
 </script>
 
 {#if $open}

diff --git a/src/lib/primitives/context-menu/ctx.ts b/src/lib/primitives/context-menu/ctx.ts
@@ -96,7 +96,7 @@ function getSubTrigger() {
 	return subTrigger;
 }
 
-function getContent(sideoffset = -4) {
+function getContent(sideoffset = 5) {
 	const {
 		elements: { menu: content },
 		states: { open },

diff --git a/src/lib/primitives/context-menu/types.ts b/src/lib/primitives/context-menu/types.ts
@@ -27,7 +27,9 @@ type RadioGroupProps = Expand<
 > &
 	HTMLDivAttributes;
 
-type ContentProps = HTMLDivAttributes;
+type ContentProps = {
+	sideOffset?: number;
+} & HTMLDivAttributes;
 type GroupProps = HTMLDivAttributes;
 type ItemProps = HTMLDivAttributes;
 type CheckboxItemIndicatorProps = HTMLDivAttributes;

diff --git a/src/lib/primitives/dialog/components/DialogOverlay.svelte b/src/lib/primitives/dialog/components/DialogOverlay.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { ctx } from "../ctx.js";
-	import type { AlertDialogOverlayProps } from "../types.js";
+	import type { OverlayProps } from "../types.js";
 
-	type $$Props = AlertDialogOverlayProps;
+	type $$Props = OverlayProps;
 	const overlay = ctx.getOverlay();
 </script>
 

diff --git a/src/lib/primitives/dropdown-menu/components/DropdownMenuContent.svelte b/src/lib/primitives/dropdown-menu/components/DropdownMenuContent.svelte
@@ -4,7 +4,8 @@
 	import type { ContentProps } from "../types.js";
 
 	type $$Props = ContentProps;
-	const { open, content } = ctx.getContent();
+	export let sideOffset: $$Props["sideOffset"] = 5;
+	const { open, content } = ctx.getContent(sideOffset);
 </script>
 
 {#if $open}

diff --git a/src/lib/primitives/dropdown-menu/ctx.ts b/src/lib/primitives/dropdown-menu/ctx.ts
@@ -96,7 +96,7 @@ function getSubTrigger() {
 	return subTrigger;
 }
 
-function getContent(sideoffset = -4) {
+function getContent(sideoffset = 5) {
 	const {
 		elements: { menu: content },
 		states: { open },

diff --git a/src/lib/primitives/dropdown-menu/types.ts b/src/lib/primitives/dropdown-menu/types.ts
@@ -28,7 +28,9 @@ type RadioGroupProps = Expand<
 > &
 	HTMLDivAttributes;
 
-type ContentProps = HTMLDivAttributes;
+type ContentProps = {
+	sideOffset?: number;
+} & HTMLDivAttributes;
 type GroupProps = HTMLDivAttributes;
 type ItemProps = HTMLDivAttributes;
 type CheckboxItemIndicatorProps = HTMLDivAttributes;

diff --git a/src/lib/primitives/menubar/components/MenubarContent.svelte b/src/lib/primitives/menubar/components/MenubarContent.svelte
@@ -4,8 +4,8 @@
 	import type { ContentProps } from "../types.js";
 
 	type $$Props = ContentProps;
-	export let sideOffset = 4;
-	const { content, open } = ctx.getContent(sideOffset);
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	const { content } = ctx.getContent(sideOffset);
 </script>
 
 <div use:melt={$content} {...$$restProps}>

diff --git a/src/lib/primitives/menubar/components/MenubarSubContent.svelte b/src/lib/primitives/menubar/components/MenubarSubContent.svelte
@@ -4,7 +4,7 @@
 	import type { SubContentProps } from "../types.js";
 
 	type $$Props = SubContentProps;
-	const { subContent, subOpen } = ctx.getSubContent();
+	const { subContent } = ctx.getSubContent();
 </script>
 
 <div use:melt={$subContent} {...$$restProps}>

diff --git a/src/lib/primitives/menubar/ctx.ts b/src/lib/primitives/menubar/ctx.ts
@@ -111,7 +111,7 @@ function getSubTrigger() {
 	return subTrigger;
 }
 
-function getContent(sideOffset = 4) {
+function getContent(sideOffset = 5) {
 	const {
 		elements: { menu: content },
 		states: { open },

diff --git a/src/lib/primitives/select/components/Select.svelte b/src/lib/primitives/select/components/Select.svelte
@@ -20,7 +20,7 @@
 	export let label: $$Props["label"] = undefined;
 
 	const {
-		states: { open: localOpen, value: localValue, valueLabel },
+		states: { open: localOpen, value: localValue },
 		updateOption
 	} = ctx.set({
 		required,