From 3a27212fe7d4e23a491902de1279780ee43ae6e7 Mon Sep 17 00:00:00 2001
From: Francisco Ribeiro <44645995+fpribeiro3069@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:57:23 +0000
Subject: [PATCH] Feat/add disabled to listbox listboxitem (#2485)

Co-authored-by: endigo9740 <gundamx9740@gmail.com>
---
 .changeset/giant-tomatoes-kick.md                     |  5 +++++
 .../src/lib/components/ListBox/ListBox.svelte         |  3 +++
 .../src/lib/components/ListBox/ListBoxItem.svelte     | 11 +++++++----
 .../routes/(inner)/components/listboxes/+page.svelte  |  7 +++++++
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/giant-tomatoes-kick.md

diff --git a/.changeset/giant-tomatoes-kick.md b/.changeset/giant-tomatoes-kick.md
new file mode 100644
index 0000000000..7dce40f402
--- /dev/null
+++ b/.changeset/giant-tomatoes-kick.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Added `disabled` prop to ListBox and ListBoxItem components.
diff --git a/packages/skeleton/src/lib/components/ListBox/ListBox.svelte b/packages/skeleton/src/lib/components/ListBox/ListBox.svelte
index 8e3fe9ffb6..6818c9456d 100644
--- a/packages/skeleton/src/lib/components/ListBox/ListBox.svelte
+++ b/packages/skeleton/src/lib/components/ListBox/ListBox.svelte
@@ -7,6 +7,8 @@
 	// Props
 	/** Enable selection of multiple items. */
 	export let multiple = false;
+	/** Disables selection of items. */
+	export let disabled = false;
 
 	// Props (styles)
 	/** Provide class to set the vertical spacing style. */
@@ -35,6 +37,7 @@
 	export let labelledby = '';
 
 	// Context
+	setContext('disabled', disabled);
 	setContext('multiple', multiple);
 	setContext('rounded', rounded);
 	setContext('active', active);
diff --git a/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte b/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte
index 43bcd24159..361e8369f3 100644
--- a/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte
+++ b/packages/skeleton/src/lib/components/ListBox/ListBoxItem.svelte
@@ -19,6 +19,7 @@
 	export let value: any;
 
 	// Context
+	export let disabled: boolean = getContext('disabled');
 	export let multiple: string = getContext('multiple');
 	export let rounded: CssClasses = getContext('rounded');
 	export let active: CssClasses = getContext('active');
@@ -30,6 +31,7 @@
 
 	// Classes
 	const cBase = 'cursor-pointer -outline-offset-[3px]';
+	const cDisabled = 'opacity-50 !cursor-default';
 	const cLabel = 'flex items-center space-x-4';
 
 	// Local
@@ -95,8 +97,9 @@
 
 	// Reactive
 	$: selected = multiple ? group.some((groupVal: unknown) => areDeeplyEqual(value, groupVal)) : areDeeplyEqual(group, value);
-	$: classesActive = selected ? active : hover;
-	$: classesBase = `${cBase} ${rounded} ${padding} ${classesActive} ${$$props.class ?? ''}`;
+	$: classesActive = selected ? active : !disabled ? hover : '';
+	$: classesDisabled = disabled ? cDisabled : '';
+	$: classesBase = `${cBase} ${classesDisabled} ${rounded} ${padding} ${classesActive} ${$$props.class ?? ''}`;
 	$: classesLabel = `${cLabel}`;
 	$: classesRegionLead = `${cRegionLead} ${regionLead}`;
 	$: classesRegionDefault = `${cRegionDefault} ${regionDefault}`;
@@ -119,9 +122,9 @@
 		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 		<div class="h-0 w-0 overflow-hidden">
 			{#if multiple}
-				<input bind:this={elemInput} type="checkbox" {name} {value} bind:checked tabindex="-1" on:click on:change />
+				<input {disabled} bind:this={elemInput} type="checkbox" {name} {value} bind:checked tabindex="-1" on:click on:change />
 			{:else}
-				<input bind:this={elemInput} type="radio" bind:group {name} {value} tabindex="-1" on:click on:change />
+				<input {disabled} bind:this={elemInput} type="radio" bind:group {name} {value} tabindex="-1" on:click on:change />
 			{/if}
 		</div>
 		<!-- <slot /> -->
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte
index 3e603abf44..fe53a1d29f 100644
--- a/sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte
@@ -30,6 +30,7 @@
 	// Local
 	let valueSingle = 'books';
 	let valueMultiple = ['books', 'movies'];
+	let valueDisabled = ['books', 'movies'];
 </script>
 
 <DocsShell {settings}>
@@ -119,6 +120,12 @@
 				</svelte:fragment>
 			</DocsPreview>
 		</section>
+		<section class="space-y-4">
+			<h2 class="h2">Disabled</h2>
+			<p>Use the <code class="code">disabled</code> property to disable the entire listbox or each item.</p>
+			<CodeBlock language="html" code={`<ListBox ... disabled>...</ListBox>`} />
+			<CodeBlock language="html" code={`<ListBoxItem ... disabled>...</ListBoxItem>`} />
+		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Lead and Trail Slots</h2>
 			<p>