Merge pull request #5873 from pat270/LPD-36695

docs(clayui.com): LPD-36695 DualListBox arrow buttons should be disab…
liferay · Sep 25, 2024 · fd4e8da · fd4e8da
2 parents f30d20d + 5a6b6d4
commit fd4e8da
Showing 1 changed file with 38 additions and 34 deletions.
diff --git a/packages/clay-form/docs/duallistbox.js b/packages/clay-form/docs/duallistbox.js
@@ -12,47 +12,51 @@ import classNames from 'classnames';
 `;
 
 const dualListBoxCode = `const Component = () => {
-    const moveBoxesOptions = [
-        [
-            {
-                label: 'Discord',
-                value: 'discord',
-            },
-            {
-                label: 'Evernote',
-                value: 'evernote',
-            },
-            {
-                label: 'Facebook',
-                value: 'facebook',
-            },
-            {
-                label: 'LinkedIn',
-                value: 'linkedin',
-            },
-        ],
-        [
-            {
-                label: 'Reddit',
-                value: 'reddit',
-            },
-            {
-                label: 'Slack',
-                value: 'slack',
-            },
-            {
-                label: 'Twitter',
-                value: 'twitter',
-            },
-        ],
-    ];
+	const moveBoxesOptions = [
+		[
+			{
+				label: 'Discord',
+				value: 'discord',
+			},
+			{
+				label: 'Evernote',
+				value: 'evernote',
+			},
+			{
+				label: 'Facebook',
+				value: 'facebook',
+			},
+			{
+				label: 'LinkedIn',
+				value: 'linkedin',
+			},
+		],
+		[
+			{
+				label: 'Reddit',
+				value: 'reddit',
+			},
+			{
+				label: 'Slack',
+				value: 'slack',
+			},
+			{
+				label: 'Twitter',
+				value: 'twitter',
+			},
+		],
+	];
 
 	const [items, setItems] = useState(moveBoxesOptions);
 	const [leftSelected, setLeftSelected] = useState([]);
 	const [rightSelected, setRightSelected] = useState([]);
 
+	const [firstSelectBoxItems, secondSelectBoxItems] = items;
+
 	return (
 		<ClayDualListBox
+			disableLTR={firstSelectBoxItems.length === 0}
+			disableRTL={secondSelectBoxItems.length === 0}
 			items={items}
 			left={{
 				label: 'In Use',