Repository: melt-ui/melt-ui
Pull request #989 (2024-02-16 15:47:15)

fix: disabled date picker triggers
Closes: #815 

changeset-bot[bot]: ###  🦋  Changeset detected

Latest commit: ffb824449fa6f4d7ccfbe9d0de33cfae34ec502e

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name            | Type  |
| --------------- | ----- |
| @melt-ui/svelte | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/huntabyte/melt-ui/new/fix/815?filename=.changeset/odd-peas-help.md&value=---%0A%22%40melt-ui%2Fsvelte%22%3A%20patch%0A---%0A%0Afix%3A%20disabled%20date%20picker%20triggers%0A)


github-actions[bot]: <!-- refined-cf-pages-action:deployment-summary:melt-ui -->

###### built with [Refined Cloudflare Pages Action](https://github.com/AdrianGonz97/refined-cf-pages-action)
## ⚡ Cloudflare Pages Deployment
| Name | Status | Preview | Last Commit |
| :--- | :----- | :------ | :---------- |
| **melt-ui** | 🔨 Building ([View Log](https://github.com/melt-ui/melt-ui/actions/runs/7932932260)) |  | ffb824449fa6f4d7ccfbe9d0de33cfae34ec502e |

lolcabanon: Hey! I was debugging some issue related to trigger not being disabled.

**Happy to see it's fixed already!** :fire: 

Patch:
diff --git a/.changeset/early-turtles-pay.md b/.changeset/early-turtles-pay.md
new file mode 100644
index 00000000..9a23abf9
--- /dev/null
+++ b/.changeset/early-turtles-pay.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': patch
+---
+
+Date Picker/Date Range Picker: disable trigger when picker is disabled (Closes #815)
diff --git a/.changeset/great-toys-look.md b/.changeset/great-toys-look.md
new file mode 100644
index 00000000..50fe33b8
--- /dev/null
+++ b/.changeset/great-toys-look.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/svelte': patch
+---
+
+Toast: return close element `type` attribute type as `"button"` instead of `string`
diff --git a/src/lib/builders/date-picker/create.ts b/src/lib/builders/date-picker/create.ts
index 9e52e512..3adbfce7 100644
--- a/src/lib/builders/date-picker/create.ts
+++ b/src/lib/builders/date-picker/create.ts
@@ -76,12 +76,13 @@ export function createDatePicker(props?: CreateDatePickerProps) {
 	});
 
 	const trigger = makeElement('popover-trigger', {
-		stores: [popover.elements.trigger],
-		returned: ([$trigger]) => {
+		stores: [popover.elements.trigger, options.disabled],
+		returned: ([$trigger, $disabled]) => {
 			return {
 				...omit($trigger, 'action'),
 				'aria-label': 'Open date picker',
 				'data-segment': 'trigger',
+				disabled: $disabled ? true : undefined,
 			};
 		},
 		action: (node: HTMLElement): MeltActionReturn<DatePickerEvents['trigger']> => {
diff --git a/src/lib/builders/date-range-picker/create.ts b/src/lib/builders/date-range-picker/create.ts
index 6c89c640..5f046587 100644
--- a/src/lib/builders/date-range-picker/create.ts
+++ b/src/lib/builders/date-range-picker/create.ts
@@ -88,12 +88,13 @@ export function createDateRangePicker(props?: CreateDateRangePickerProps) {
 	const placeholder = dateStore(rfPlaceholder, withDefaults.defaultPlaceholder ?? defaultDate);
 
 	const trigger = makeElement('popover-trigger', {
-		stores: [popover.elements.trigger],
-		returned: ([$trigger]) => {
+		stores: [popover.elements.trigger, options.disabled],
+		returned: ([$trigger, $disabled]) => {
 			return {
 				...omit($trigger, 'action'),
 				'aria-label': 'Open date picker',
 				'data-segment': 'trigger',
+				disabled: $disabled ? true : undefined,
 			};
 		},
 		action: (node: HTMLElement): MeltActionReturn<DateRangePickerEvents['trigger']> => {
diff --git a/src/lib/builders/toast/create.ts b/src/lib/builders/toast/create.ts
index cf3b30a0..fd7d104a 100644
--- a/src/lib/builders/toast/create.ts
+++ b/src/lib/builders/toast/create.ts
@@ -192,7 +192,7 @@ export function createToaster<T = object>(props?: CreateToasterProps) {
 	const close = makeElement(name('close'), {
 		returned: () => {
 			return (id: string) => ({
-				type: 'button',
+				type: 'button' as const,
 				'data-id': id,
 			});
 		},


Test patch:
diff --git a/src/tests/date-picker/DatePicker.spec.ts b/src/tests/date-picker/DatePicker.spec.ts
index 821fea42..2ff9089e 100644
--- a/src/tests/date-picker/DatePicker.spec.ts
+++ b/src/tests/date-picker/DatePicker.spec.ts
@@ -552,4 +552,12 @@ describe('DatePicker', () => {
 		await user.click(outside);
 		await waitFor(() => expect(content).toBeVisible());
 	});
+
+	test('trigger is disabled when `disabled` prop is true', async () => {
+		const { trigger } = setup({
+			disabled: true,
+		});
+
+		expect(trigger).toBeDisabled();
+	});
 });