From a1bab18402f163a8d7d1903510a53a1e4435cb67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Goran=20Alkovi=C4=87?=
 <77000136+goranalkovic-infinum@users.noreply.github.com>
Date: Wed, 9 Oct 2024 09:37:09 +0200
Subject: [PATCH] add PR fixes

---
 lib/components/responsive/mini-responsive.jsx | 8 +++++++-
 lib/components/responsive/responsive.jsx      | 9 +++++++--
 src/App.jsx                                   | 6 ------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/lib/components/responsive/mini-responsive.jsx b/lib/components/responsive/mini-responsive.jsx
index 874dc78..5782ad6 100644
--- a/lib/components/responsive/mini-responsive.jsx
+++ b/lib/components/responsive/mini-responsive.jsx
@@ -97,6 +97,12 @@ export const MiniResponsive = (props) => {
 		innerContentAlign = 'start',
 	} = props;
 
+	if (typeof rawBreakpoints === 'undefined' || !Array.isArray(rawBreakpoints)) {
+		console.warn(__("MiniResponsive: Missing or invalid 'breakpoints' prop.", 'eightshift-ui-components'));
+
+		return null;
+	}
+
 	const breakpoints = rawBreakpoints.slice(1);
 	const desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map((breakpoint) =>
 		breakpoint.startsWith('max-') ? breakpoint : `max-${breakpoint}`,
@@ -132,7 +138,7 @@ export const MiniResponsive = (props) => {
 
 							{firstMobileFirstOverride &&
 								!isDesktopFirst &&
-								sprintf(__('Applies when the browser width is %dpx or narrower.', 'eightshift-ui-components'), breakpointData[firstMobileFirstOverride] - 1)}
+								sprintf(__('Applies when the browser width is %dpx or less.', 'eightshift-ui-components'), breakpointData[firstMobileFirstOverride] - 1)}
 
 							{lastDesktopFirstOverride &&
 								isDesktopFirst &&
diff --git a/lib/components/responsive/responsive.jsx b/lib/components/responsive/responsive.jsx
index 27ed6b1..3633936 100644
--- a/lib/components/responsive/responsive.jsx
+++ b/lib/components/responsive/responsive.jsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { DecorativeTooltip } from '../tooltip/tooltip';
 import { clsx } from 'clsx/lite';
-
 import { __, sprintf } from '@wordpress/i18n';
 import { BreakpointPreview } from '../breakpoint-preview/breakpoint-preview';
 import { upperFirst } from '../../utilities';
@@ -101,6 +100,12 @@ export const Responsive = (props) => {
 		innerContentAlign = 'start',
 	} = props;
 
+	if (typeof rawBreakpoints === 'undefined' || !Array.isArray(rawBreakpoints)) {
+		console.warn(__("Responsive: Missing or invalid 'breakpoints' prop.", 'eightshift-ui-components'));
+
+		return null;
+	}
+
 	const breakpoints = rawBreakpoints.slice(1);
 	const desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map((breakpoint) =>
 		breakpoint.startsWith('max-') ? breakpoint : `max-${breakpoint}`,
@@ -138,7 +143,7 @@ export const Responsive = (props) => {
 
 							{firstMobileFirstOverride &&
 								!isDesktopFirst &&
-								sprintf(__('Applies when the browser width is %dpx or narrower.', 'eightshift-ui-components'), breakpointData[firstMobileFirstOverride] - 1)}
+								sprintf(__('Applies when the browser width is %dpx or less.', 'eightshift-ui-components'), breakpointData[firstMobileFirstOverride] - 1)}
 
 							{lastDesktopFirstOverride &&
 								isDesktopFirst &&
diff --git a/src/App.jsx b/src/App.jsx
index 1c15eab..70a7c09 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -443,12 +443,6 @@ function App() {
 		},
 	];
 
-	// const [repeaterItems, setRepeaterItems] = useState();
-	// const [repeaterItems2, setRepeaterItems2] = useState();
-	// const [draggableListItems, setDraggableListItems] = useState();
-	// const [draggableListItems2, setDraggableListItems2] = useState();
-	// const [draggableItems, setDraggableItems] = useState();
-
 	const [repeaterItems, setRepeaterItems] = useState(repeaterDefaultItems);
 	const [repeaterItems2, setRepeaterItems2] = useState(repeaterDefaultItems2);
 	const [draggableListItems, setDraggableListItems] = useState(draggableListDefaultItems);