Merge pull request #3161 from adumesny/master

React removeWidget()

Author: adumesny

react/lib/grid-stack-provider.tsx

@@ -72,11 +72,8 @@ export function GridStackProvider({
 
   const removeWidget = useCallback(
     (id: string) => {
-      const element = document.body.querySelector(`[gs-id="${id}"]`);
-
-      if (element) {
-        gridStack?.removeWidget(element as GridItemHTMLElement);
-      }
+      const element = document.body.querySelector<GridItemHTMLElement>(`[gs-id="${id}"]`);
+      if (element) gridStack?.removeWidget(element);
 
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);

src/types.ts

@@ -82,9 +82,9 @@ export interface GridItemHTMLElement extends HTMLElement {
 
 /**
  * Type representing various ways to specify grid elements.
- * Can be a CSS selector string, HTMLElement, or GridItemHTMLElement.
+ * Can be a CSS selector string, GridItemHTMLElement (HTML element with GS variables when loaded).
  */
-export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+export type GridStackElement = string | GridItemHTMLElement;
 
 /**
  * Event handler function types for the .on() method.

src/utils.ts

@@ -123,8 +123,17 @@ export class Utils {
 
       let list = root.querySelectorAll(els);
       if (!list.length && els[0] !== '.' && els[0] !== '#') {
+        // see if mean to be a class
         list = root.querySelectorAll('.' + els);
-        if (!list.length) { list = root.querySelectorAll('#' + els) }
+
+        // else if mean to be an id
+        if (!list.length) list = root.querySelectorAll('#' + els);
+
+        // else see if gs-id attribute
+        if (!list.length) {
+          const el = root.querySelector<HTMLElement>(`[gs-id="${els}"]`);
+          return el ? [el] : [];
+        }
       }
       return Array.from(list) as HTMLElement[];
     }