@m4l/components 7.0.0 → 7.1.2

package/components/DynamicSort/types.d.ts

@@ -3,13 +3,13 @@ import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Maybe } from '@m4l/core';
 import { DYNAMIC_SORT_KEY_COMPONENT } from './constants';
 import { DynamicSortSlots } from './slots';
-export declare type FieldType = 'string';
-export declare type OperandType = string;
-export declare type OperandInitialSortType = string;
-export declare type Operator = 'asc' | 'desc';
-export declare type StringOperator = 'asc' | 'desc';
-export declare type FieldPresence = 'initialized' | 'fixed' | 'optional';
-export declare type FieldTypeOperator<T extends FieldType> = T extends 'string' ? StringOperator : T;
+export type FieldType = 'string';
+export type OperandType = string;
+export type OperandInitialSortType = string;
+export type Operator = 'asc' | 'desc';
+export type StringOperator = 'asc' | 'desc';
+export type FieldPresence = 'initialized' | 'fixed' | 'optional';
+export type FieldTypeOperator<T extends FieldType> = T extends 'string' ? StringOperator : T;
 export interface FieldBase<T extends FieldType = FieldType> {
     name: string;
     type: T;
@@ -26,7 +26,7 @@ export interface Label<T extends FieldType = FieldType> extends FieldBase<T> {
     label: string;
     dictionaryId?: undefined;
 }
-export declare type Field<T extends FieldType = FieldType> = FieldDictionaryId<T> | Label<T>;
+export type Field<T extends FieldType = FieldType> = FieldDictionaryId<T> | Label<T>;
 export interface BaseApplySort<T extends FieldType = FieldType> {
     id: number;
     field: Field<T>;
@@ -46,50 +46,42 @@ export interface SortValueOperator extends SortValueBase {
 }
 /**
  * Valor de un filtro sobrecargado para cada tipo de dato
- *
- * @type
  */
-export declare type SortValue = SortValueOperator;
+export type SortValue = SortValueOperator;
 /**
  * Estado del Filtro + Valor valor del filtro.
- *
- * @type
  */
-export declare type SortFieldApplied<T extends FieldType = FieldType> = BaseApplySort<T> & SortValue;
+export type SortFieldApplied<T extends FieldType = FieldType> = BaseApplySort<T> & SortValue;
 /**
- * @interface RawSortFieldApply Formato para enviar los sorts a las APIs.
+ * RawSortFieldApply Formato para enviar los sorts a las APIs.
  */
 export interface RawSortFieldApply {
     f: string;
     o: Operator;
 }
-export declare type SortToEditApply = SortFieldApplied;
+export type SortToEditApply = SortFieldApplied;
 export interface DataTypeFilerLabels {
     labelField: string;
     labelOperator: string;
 }
 /**
  * Tipado de los sorts a inicializar el componente DynamicSort
- *
- * @interface
  */
-export declare type InitialSortApplied = {
+export type InitialSortApplied = {
     name: string;
     operator: Operator;
 };
-export declare type FormOperator<T extends Operator = Operator> = {
+export type FormOperator<T extends Operator = Operator> = {
     operator: T;
     name: string;
 };
-export declare type FormOperandString = {
+export type FormOperandString = {
     operator: string;
     name: string;
 };
-export declare type FormOperand = FormOperandString;
+export type FormOperand = FormOperandString;
 /**
  * Base para el tipado de overloading de los valor de un filtro
- *
- * @interface
  */
 export interface FormSortValueBase {
     fieldType: FieldType;
@@ -101,22 +93,16 @@ export interface FormSortValueString extends FormSortValueBase {
 }
 /**
  * Valor de un filtro sobrecargado para cada tipo de dato
- *
- * @type
  */
-export declare type FormSortValue = FormSortValueString;
+export type FormSortValue = FormSortValueString;
 /**
  * Estado del Filtro + Valor valor del filtro.
- *
- * @type
  */
-export declare type FormSortFieldApplied<T extends FieldType = FieldType> = BaseApplySort<T> & FormSortValue;
+export type FormSortFieldApplied<T extends FieldType = FieldType> = BaseApplySort<T> & FormSortValue;
 /**
  * Tipado del handler cuando se ejecuta el filtro
- *
- * @interface OnChangeSorts
  */
-export declare type OnChangeSorts = (
+export type OnChangeSorts = (
 /**
  *  "Sorts" Vector de sorts aplicados, los cuales pueden servir como entrada del campo "i"nitialappliedSorts" en un refresh,
  */
@@ -128,8 +114,6 @@ Sorts: Array<InitialSortApplied>,
 rawSorts: Array<RawSortFieldApply>) => void;
 /**
  * Propiedades que recibe el componente DynamicSort
- *
- * @interface DynamicSortProps
  */
 export interface DynamicSortProps {
     /**
@@ -148,8 +132,6 @@ export interface DynamicSortProps {
 }
 /**
  * Interface que define la variables que se van a usar en clases del componente
- *
- * @interface
  */
 export interface OwnerState {
     /**
@@ -179,5 +161,5 @@ export interface OwnerState {
 }
 export interface DynamicSortOwnerState extends DynamicSortProps, OwnerState {
 }
-export declare type DynamicSortSlotsType = keyof typeof DynamicSortSlots;
-export declare type DynamicSortStyles = Partial<OverridesStyleRules<DynamicSortSlotsType, typeof DYNAMIC_SORT_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type DynamicSortSlotsType = keyof typeof DynamicSortSlots;
+export type DynamicSortStyles = Partial<OverridesStyleRules<DynamicSortSlotsType, typeof DYNAMIC_SORT_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/GridLayout/GridLayout.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
 import { GridLayoutProps } from './types';
 /**
  * A reactive, fluid grid layout with draggable, resizable components.
  *
  */
+/**
+ * TODO: Documentar
+ */
 export declare function GridLayout(props: GridLayoutProps): JSX.Element;

package/components/GridLayout/GridLayout.js

@@ -0,0 +1,563 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import { i as isEqualLayout, c as cloneLayout, g as getLayoutItem, a as cloneLayoutItem, b as getLayoutItemH, m as moveElement, d as compact, w as withLayoutItem, e as bottom, n as noop, f as getAllCollisions } from "./utils.js";
+import { M as MemonizedGridItem } from "./subcomponents/GridItem/index.js";
+import { G as GridLayoutRoot } from "./styles.js";
+import { D as DEFAULT_COLS, a as DEFAULT_CONTAINER_PADDING, b as DEFAULT_MARGIN, c as DEFAULT_ROW_HEIGHT, d as DEFAULT_COLAPSED_HEIGHT, e as DEFAULT_CONTAINER_WIDTH, f as DEFAULT_CONTAINER_HEIGHT, g as DEFAULT_TRANSFORM_SCALE } from "./constants.js";
+import { g as gridLayoutClasses } from "./classes/index.js";
+function GridLayout(props) {
+  const {
+    layoutItemRender,
+    innerRef,
+    //Referencia requerida por el provedor WidthProvider para detectar los cambios de tamaño
+    autoSize = true,
+    cols = DEFAULT_COLS,
+    containerPadding = DEFAULT_CONTAINER_PADDING,
+    margin = DEFAULT_MARGIN,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    colapsedHeight = DEFAULT_COLAPSED_HEIGHT,
+    containerWidth = DEFAULT_CONTAINER_WIDTH,
+    containerHeight = DEFAULT_CONTAINER_HEIGHT,
+    transformScale = DEFAULT_TRANSFORM_SCALE,
+    className = "",
+    style = {},
+    draggableHandle = "",
+    draggableCancel = "",
+    maxRows = Infinity,
+    // infinite vertical growth
+    layout = [],
+    isBounded = false,
+    isDraggable = true,
+    isResizable = true,
+    allowOverlap = false,
+    useCSSTransforms = true,
+    compactType = "vertical",
+    preventCollision = false,
+    resizeHandles = ["se"],
+    resizeHandle,
+    maximizeId,
+    onLayoutChange = noop,
+    onDragStart = noop,
+    onDrag = noop,
+    onDragStop = noop,
+    onResizeStart = noop,
+    onResize = noop,
+    onResizeStop = noop
+  } = props;
+  const [currentState, setCurrentState] = useState({
+    mounted: false
+  });
+  const [nrOnlayoutChanges, setNrOnlayoutChanges] = useState(0);
+  const [finalLayoutRender, setFinalLayoutRender] = useState(layout);
+  const [zIndexes, setzIndexes] = useState(() => {
+    return layout.filter((li) => li.freeMove).map((lmap) => lmap.i);
+  });
+  const refState = useRef({
+    layout,
+    oldDragItem: void 0,
+    oldLayout: void 0,
+    oldResizeItem: void 0,
+    zIndexes,
+    colapsedHeight,
+    rowHeight
+  });
+  refState.current.colapsedHeight = colapsedHeight;
+  refState.current.rowHeight = rowHeight;
+  useEffect(() => {
+    setCurrentState({ mounted: true });
+  }, []);
+  useEffect(() => {
+    if (nrOnlayoutChanges > 0) {
+      onLayoutChange(refState.current.layout);
+    }
+  }, [nrOnlayoutChanges]);
+  useEffect(() => {
+    if (!isEqualLayout(finalLayoutRender, layout)) {
+      const newLayout = cloneLayout(layout);
+      const newzIndexes = [...zIndexes];
+      for (let index = 0; index < newLayout.length; index++) {
+        const li = newLayout[index];
+        if (li.freeMove && newzIndexes.indexOf(li.i) === -1) {
+          newzIndexes.push(li.i);
+        }
+      }
+      refState.current.layout = newLayout;
+      setFinalLayoutRender(newLayout);
+      if (newzIndexes.length !== zIndexes.length) {
+        setzIndexes(newzIndexes);
+        refState.current.zIndexes = newzIndexes;
+      }
+    }
+  }, [layout]);
+  const onLayoutMaybeChanged = useCallback((newLayout, oldLayout) => {
+    if (!oldLayout) {
+      oldLayout = refState.current.layout;
+    }
+    if (!isEqualLayout(oldLayout, newLayout)) {
+      setNrOnlayoutChanges((prev) => prev + 1);
+    }
+  }, []);
+  const localOnDragStart = useCallback(
+    (i, _x, _y, gridDragEvent) => {
+      const { layout: layoutCurrent } = refState.current;
+      const { e, node } = gridDragEvent;
+      const li = getLayoutItem(layoutCurrent, i);
+      if (!li) {
+        return;
+      }
+      refState.current = {
+        ...refState.current,
+        oldDragItem: cloneLayoutItem(li),
+        oldLayout: layoutCurrent
+        //Punto de arranque, layout actual
+      };
+      if (li && li.freeMove) {
+        onClickSetOnTopFreeMove(li.i, "onDragStart");
+      }
+      if (gridDragEvent.e.type !== "touchmove") {
+        gridDragEvent.e.preventDefault();
+      }
+      gridDragEvent.e.stopPropagation();
+      return onDragStart(layoutCurrent, li, li, void 0, e, node);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const localOnDrag = useCallback(
+    (i, x, y, gridDragEvent) => {
+      const { oldDragItem, layout: layoutCurrent } = refState.current;
+      const { e, node } = gridDragEvent;
+      const li = getLayoutItem(layoutCurrent, i);
+      if (!li) {
+        return;
+      }
+      const newPlaceholder = {
+        w: li.w,
+        h: getLayoutItemH(li, refState.current.colapsedHeight, refState.current.rowHeight),
+        x: li.x,
+        y: li.y,
+        placeholder: true,
+        i
+      };
+      const isUserAction = true;
+      try {
+        let newLayout;
+        if (!li.freeMove) {
+          newLayout = moveElement(
+            layoutCurrent,
+            li,
+            x,
+            y,
+            isUserAction,
+            preventCollision,
+            compactType,
+            cols,
+            refState.current.colapsedHeight,
+            refState.current.rowHeight,
+            allowOverlap
+          );
+        } else {
+          li.x = x;
+          li.y = y;
+          newPlaceholder.x = x;
+          newPlaceholder.y = y;
+          newLayout = cloneLayout(layoutCurrent);
+        }
+        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
+          newLayout,
+          compactType,
+          cols,
+          refState.current.colapsedHeight,
+          refState.current.rowHeight,
+          allowOverlap
+        );
+        refState.current = {
+          ...refState.current,
+          layout: finalLayout,
+          activeDrag: newPlaceholder
+        };
+        setCurrentState((prev) => ({
+          ...prev,
+          activeDrag: newPlaceholder
+        }));
+        setFinalLayoutRender(finalLayout);
+        if (gridDragEvent.e.type !== "touchmove") {
+          gridDragEvent.e.preventDefault();
+        }
+        gridDragEvent.e.stopPropagation();
+        onDrag(newLayout, oldDragItem, li, newPlaceholder, e, node);
+      } catch (_e) {
+        console.warn("GridLayout error capturado");
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const localOnDragStop = useCallback(
+    (i, x, y, { e, node }) => {
+      if (!refState.current.activeDrag) {
+        return;
+      }
+      const { oldDragItem, layout: layoutCurrent, oldLayout } = refState.current;
+      const li = getLayoutItem(layoutCurrent, i);
+      if (!li) {
+        return;
+      }
+      let newLayout;
+      const isUserAction = true;
+      if (!li.freeMove) {
+        newLayout = moveElement(
+          layoutCurrent,
+          li,
+          x,
+          y,
+          isUserAction,
+          preventCollision,
+          compactType,
+          cols,
+          refState.current.colapsedHeight,
+          refState.current.rowHeight,
+          allowOverlap
+        );
+      } else {
+        li.x = x;
+        li.y = y;
+        newLayout = cloneLayout(layoutCurrent);
+      }
+      const finalLayout = allowOverlap ? newLayout || li.freeMove : compact(
+        newLayout,
+        compactType,
+        cols,
+        refState.current.colapsedHeight,
+        refState.current.rowHeight,
+        allowOverlap
+      );
+      setCurrentState((prev) => ({
+        ...prev,
+        activeDrag: void 0
+      }));
+      setFinalLayoutRender(finalLayout);
+      refState.current = {
+        ...refState.current,
+        layout: finalLayout,
+        oldDragItem: void 0,
+        oldLayout: void 0,
+        activeDrag: void 0
+      };
+      if (e.type !== "touchmove") {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+      onLayoutMaybeChanged(finalLayout, oldLayout);
+      onDragStop(layoutCurrent, oldDragItem, li, void 0, e, node);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const localOnResizeStart = useCallback(
+    (i, _w, _h, { e, node }) => {
+      const { layout: layoutCurrent } = refState.current;
+      const li = getLayoutItem(layoutCurrent, i);
+      if (!li) {
+        return;
+      }
+      refState.current = {
+        ...refState.current,
+        oldResizeItem: cloneLayoutItem(li),
+        oldLayout: refState.current.layout
+        //Punto de arranque, layout actual
+      };
+      onResizeStart(layoutCurrent, li, li, void 0, e, node);
+      if (li && li.freeMove) {
+        onClickSetOnTopFreeMove(li.i, "onResizeStart");
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const localOnResize = useCallback(
+    (i, w, h, { e, node }) => {
+      const { layout: layoutCurrent, oldResizeItem } = refState.current;
+      let newLayout;
+      let li;
+      if (!oldResizeItem?.freeMove) {
+        const cb = (cbLi) => {
+          let hasCollisions;
+          if (preventCollision && !allowOverlap) {
+            const collisions = getAllCollisions(
+              layoutCurrent,
+              { ...cbLi, w, h },
+              refState.current.colapsedHeight,
+              refState.current.rowHeight
+            ).filter((layoutItem) => layoutItem.i !== cbLi.i);
+            hasCollisions = collisions.length > 0;
+            if (hasCollisions) {
+              let leastX = Infinity, leastY = Infinity;
+              collisions.forEach((layoutItem) => {
+                if (layoutItem.x > cbLi.x) {
+                  leastX = Math.min(leastX, layoutItem.x);
+                }
+                if (layoutItem.y > cbLi.y) {
+                  leastY = Math.min(leastY, layoutItem.y);
+                }
+              });
+              if (Number.isFinite(leastX)) {
+                cbLi.w = leastX - cbLi.x;
+              }
+              if (Number.isFinite(leastY)) {
+                cbLi.h = leastY - cbLi.y;
+              }
+            }
+          }
+          if (!hasCollisions) {
+            cbLi.w = w;
+            cbLi.h = h;
+          }
+          return cbLi;
+        };
+        const [tempLayout, tempLi] = withLayoutItem(cloneLayout(layoutCurrent), i, cb);
+        newLayout = tempLayout;
+        li = tempLi;
+      } else {
+        newLayout = cloneLayout(layoutCurrent);
+        li = getLayoutItem(newLayout, i);
+        if (li) {
+          li.w = w;
+          li.h = h;
+        }
+      }
+      if (!li) {
+        return;
+      }
+      const newPlaceholder = {
+        w: li.w,
+        h: li.h,
+        x: li.x,
+        y: li.y,
+        static: true,
+        i
+      };
+      try {
+        const finalLayout = allowOverlap || li.freeMove ? newLayout : compact(
+          newLayout,
+          compactType,
+          cols,
+          refState.current.colapsedHeight,
+          refState.current.rowHeight,
+          allowOverlap
+        );
+        refState.current = {
+          ...refState.current,
+          layout: finalLayout,
+          activeDrag: newPlaceholder
+        };
+        setFinalLayoutRender(finalLayout);
+        setCurrentState((prev) => ({ ...prev, activeDrag: newPlaceholder }));
+        onResize(newLayout, oldResizeItem, li, newPlaceholder, e, node);
+      } catch (_e) {
+      }
+      if (e.type !== "touchmove") {
+        e.preventDefault();
+      }
+      e.stopPropagation();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const localOnResizeStop = useCallback(
+    (i, _w, _h, { e, node }) => {
+      if (!refState.current.activeDrag) {
+        return;
+      }
+      const { layout: layoutCurrent, oldResizeItem, oldLayout } = refState.current;
+      const l = getLayoutItem(layoutCurrent, i);
+      refState.current = {
+        ...refState.current,
+        // layout: finalLayout,
+        oldResizeItem: void 0,
+        oldLayout: void 0,
+        activeDrag: void 0
+      };
+      setCurrentState((prev) => ({ ...prev, activeDrag: void 0 }));
+      onLayoutMaybeChanged(layoutCurrent, oldLayout);
+      if (l) {
+        onResizeStop(layoutCurrent, oldResizeItem, l, void 0, e, node);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const onClickSetOnTopFreeMove = useCallback((i, _source) => {
+    const { layout: layoutCurrent } = refState.current;
+    const index = refState.current.zIndexes.indexOf(i);
+    const l = getLayoutItem(layoutCurrent, i);
+    if (l && l?.freeMove) {
+      if (index !== refState.current.zIndexes.length - 1 || index === -1) {
+        const newIndexes = [...refState.current.zIndexes];
+        if (index !== -1) {
+          newIndexes.splice(index, 1);
+        }
+        newIndexes.push(i);
+        refState.current.zIndexes = newIndexes;
+        setzIndexes(newIndexes);
+      }
+    }
+  }, []);
+  const placeholder = () => {
+    const { activeDrag } = currentState;
+    if (!activeDrag) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      MemonizedGridItem,
+      {
+        type: "placeholder",
+        layoutItemRender,
+        w: activeDrag.w,
+        h: activeDrag.h,
+        x: activeDrag.x,
+        y: activeDrag.y,
+        i: activeDrag.i,
+        className: gridLayoutClasses.gridItemPlaceholder,
+        containerWidth,
+        containerHeight,
+        cols,
+        margin,
+        containerPadding,
+        maxRows,
+        rowHeight,
+        isDraggable: false,
+        isResizable: false,
+        isBounded: false,
+        useCSSTransforms,
+        transformScale,
+        draggableCancel: "",
+        draggableHandle: "",
+        minW: 0,
+        maxW: 0,
+        minH: 0,
+        maxH: 0,
+        maximize: "none",
+        colapsed: activeDrag.colapsed,
+        colapsedHeight
+      }
+    );
+  };
+  const processGridItem = useCallback(
+    (l, isMounted) => {
+      const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
+      const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
+      const resizeHandlesOptions = l.resizeHandles || resizeHandles;
+      const bounded = draggable && isBounded && l.isBounded !== false;
+      const mximize = maximizeId ? maximizeId === l.i ? "maximize_me" : "maximize_other" : "none";
+      let zIndex = void 0;
+      let newStyle;
+      if (l.freeMove) {
+        zIndex = zIndexes.indexOf(l.i);
+        if (zIndex !== -1) {
+          zIndex = zIndex + 1;
+          newStyle = { zIndex };
+        }
+      }
+      return /* @__PURE__ */ jsx(
+        MemonizedGridItem,
+        {
+          type: "layoutItem",
+          layoutItemRender,
+          containerWidth,
+          containerHeight,
+          cols,
+          margin,
+          containerPadding: containerPadding || margin,
+          maxRows,
+          rowHeight,
+          draggableCancel,
+          draggableHandle,
+          onDragStart: localOnDragStart,
+          onDrag: localOnDrag,
+          onDragStop: localOnDragStop,
+          onResizeStart: localOnResizeStart,
+          onResize: localOnResize,
+          onResizeStop: localOnResizeStop,
+          onFreeMoveClick: l.freeMove ? onClickSetOnTopFreeMove : void 0,
+          isDraggable: draggable,
+          isResizable: resizable,
+          isBounded: bounded,
+          useCSSTransforms: useCSSTransforms && isMounted,
+          usePercentages: !isMounted,
+          transformScale,
+          w: l.w,
+          h: l.h,
+          x: l.x,
+          y: l.y,
+          i: l.i,
+          minH: l.minH,
+          minW: l.minW,
+          maxH: l.maxH,
+          maxW: l.maxW,
+          static: l.static,
+          resizeHandles: resizeHandlesOptions,
+          resizeHandle,
+          maximize: mximize,
+          freeMove: l.freeMove,
+          colapsed: l.colapsed,
+          visible: l.visible,
+          colapsedHeight,
+          style: newStyle
+        },
+        l.i
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      containerWidth,
+      containerHeight,
+      cols,
+      margin,
+      containerPadding,
+      maxRows,
+      rowHeight,
+      draggableCancel,
+      draggableHandle,
+      isDraggable,
+      isResizable,
+      isBounded,
+      useCSSTransforms,
+      transformScale,
+      resizeHandles,
+      resizeHandle,
+      maximizeId,
+      zIndexes,
+      colapsedHeight,
+      rowHeight
+    ]
+  );
+  const containerAutoSizeHeight = useCallback(() => {
+    if (!autoSize) {
+      return;
+    }
+    const nbRow = bottom(finalLayoutRender, colapsedHeight, rowHeight);
+    const containerPaddingY = containerPadding ? containerPadding[1] : margin[1];
+    return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
+  }, [autoSize, containerPadding, margin, finalLayoutRender, colapsedHeight]);
+  const mergedStyle = {
+    height: containerAutoSizeHeight(),
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    GridLayoutRoot,
+    {
+      className: clsx(gridLayoutClasses.root, className),
+      style: mergedStyle,
+      ref: innerRef,
+      children: [
+        finalLayoutRender.map((li) => processGridItem(li, !!currentState.mounted)),
+        placeholder()
+      ]
+    }
+  );
+}
+export {
+  GridLayout as G
+};