@thangdevalone/meet-layout-grid-react 1.1.1 → 1.2.0

package/dist/index.cjs

@@ -57,13 +57,11 @@ function useMeetGrid(options) {
     options.gap,
     options.layoutMode,
     options.pinnedIndex,
-    options.sidebarPosition,
-    options.sidebarRatio,
+    options.othersPosition,
     options.maxItemsPerPage,
     options.currentPage,
     options.maxVisible,
     options.currentVisiblePage,
-    options.flexLayout,
     itemAspectRatiosKey
   ]);
 }
@@ -71,128 +69,104 @@ function useGridAnimation(preset = "smooth") {
   return React.useMemo(() => meetLayoutGridCore.getSpringConfig(preset), [preset]);
 }
 
-const GridContainer = React.forwardRef(
-  function GridContainer2({
-    children,
-    aspectRatio = "16:9",
-    gap = 8,
-    count,
-    layoutMode = "gallery",
+const GridContainer = React.forwardRef(function GridContainer2({
+  children,
+  aspectRatio = "16:9",
+  gap = 8,
+  count,
+  layoutMode = "gallery",
+  pinnedIndex,
+  othersPosition,
+  springPreset = "smooth",
+  style,
+  className,
+  maxItemsPerPage,
+  currentPage,
+  maxVisible,
+  currentVisiblePage,
+  itemAspectRatios,
+  ...props
+}, forwardedRef) {
+  const internalRef = React.useRef(null);
+  const ref = forwardedRef || internalRef;
+  const dimensions = useGridDimensions(ref);
+  const childCount = count ?? React__default.Children.count(children);
+  const gridOptions = {
+    dimensions,
+    count: childCount,
+    aspectRatio,
+    gap,
+    layoutMode,
     pinnedIndex,
-    sidebarPosition,
-    sidebarRatio,
-    springPreset = "smooth",
-    style,
-    className,
+    othersPosition,
     maxItemsPerPage,
     currentPage,
     maxVisible,
     currentVisiblePage,
-    itemAspectRatios,
-    flexLayout,
-    ...props
-  }, forwardedRef) {
-    const internalRef = React.useRef(null);
-    const ref = forwardedRef || internalRef;
-    const dimensions = useGridDimensions(ref);
-    const childCount = count ?? React__default.Children.count(children);
-    const gridOptions = {
-      dimensions,
-      count: childCount,
-      aspectRatio,
-      gap,
-      layoutMode,
-      pinnedIndex,
-      sidebarPosition,
-      sidebarRatio,
-      maxItemsPerPage,
-      currentPage,
-      maxVisible,
-      currentVisiblePage,
-      itemAspectRatios,
-      flexLayout
-    };
-    const grid = useMeetGrid(gridOptions);
-    const containerStyle = {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      ...style
-    };
-    return /* @__PURE__ */ React__default.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React__default.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+    itemAspectRatios
+  };
+  const grid = useMeetGrid(gridOptions);
+  const containerStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    ...style
+  };
+  return /* @__PURE__ */ React__default.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React__default.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+});
+const GridItem = React.forwardRef(function GridItem2({
+  index,
+  children,
+  itemAspectRatio,
+  transition: customTransition,
+  disableAnimation = false,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { grid, springPreset } = useGridContext();
+  if (!grid) {
+    return null;
   }
-);
-const GridItem = React.forwardRef(
-  function GridItem2({
-    index,
-    children,
-    itemAspectRatio,
-    transition: customTransition,
-    disableAnimation = false,
-    className,
-    style,
-    ...props
-  }, ref) {
-    const { grid, springPreset } = useGridContext();
-    if (!grid) {
-      return null;
-    }
-    if (!grid.isItemVisible(index)) {
-      return null;
-    }
-    const { top, left } = grid.getPosition(index);
-    const { width, height } = grid.getItemDimensions(index);
-    const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
-    const isMain = grid.isMainItem(index);
-    if (grid.layoutMode === "spotlight" && !isMain) {
-      return null;
-    }
-    const springConfig = meetLayoutGridCore.getSpringConfig(springPreset);
-    const transition = customTransition ?? {
-      type: springConfig.type,
-      stiffness: springConfig.stiffness,
-      damping: springConfig.damping
-    };
-    const animatedStyle = {
-      position: "absolute",
-      width,
-      height,
-      top,
-      left
-    };
-    const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
-    const isLastVisibleOther = index === lastVisibleOthersIndex;
-    const hiddenCount = grid.hiddenCount;
-    const renderChildren = () => {
-      if (typeof children === "function") {
-        return children({ contentDimensions, isLastVisibleOther, hiddenCount });
-      }
-      return children;
-    };
-    if (disableAnimation) {
-      return /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          ref,
-          style: { ...animatedStyle, ...style },
-          className,
-          "data-grid-index": index,
-          "data-grid-main": isMain,
-          ...props
-        },
-        renderChildren()
-      );
+  if (!grid.isItemVisible(index)) {
+    return null;
+  }
+  const { top, left } = grid.getPosition(index);
+  const { width, height } = grid.getItemDimensions(index);
+  const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
+  const isMain = grid.isMainItem(index);
+  if (grid.layoutMode === "spotlight" && !isMain) {
+    return null;
+  }
+  const springConfig = meetLayoutGridCore.getSpringConfig(springPreset);
+  const transition = customTransition ?? {
+    type: springConfig.type,
+    stiffness: springConfig.stiffness,
+    damping: springConfig.damping
+  };
+  const animatedStyle = {
+    position: "absolute",
+    width,
+    height,
+    top,
+    left
+  };
+  const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
+  const isLastVisibleOther = index === lastVisibleOthersIndex;
+  const hiddenCount = grid.hiddenCount;
+  const renderChildren = () => {
+    if (typeof children === "function") {
+      return children({ contentDimensions, isLastVisibleOther, hiddenCount });
     }
+    return children;
+  };
+  if (disableAnimation) {
     return /* @__PURE__ */ React__default.createElement(
-      react.motion.div,
+      "div",
       {
         ref,
-        layout: true,
-        initial: false,
-        animate: animatedStyle,
-        transition,
-        style,
+        style: { ...animatedStyle, ...style },
         className,
         "data-grid-index": index,
         "data-grid-main": isMain,
@@ -201,7 +175,23 @@ const GridItem = React.forwardRef(
       renderChildren()
     );
   }
-);
+  return /* @__PURE__ */ React__default.createElement(
+    react.motion.div,
+    {
+      ref,
+      layout: true,
+      initial: false,
+      animate: animatedStyle,
+      transition,
+      style,
+      className,
+      "data-grid-index": index,
+      "data-grid-main": isMain,
+      ...props
+    },
+    renderChildren()
+  );
+});
 const FloatingGridItem = React.forwardRef(
   function FloatingGridItem2({
     children,
@@ -224,20 +214,26 @@ const FloatingGridItem = React.forwardRef(
     const x = react.useMotionValue(0);
     const y = react.useMotionValue(0);
     const [isInitialized, setIsInitialized] = React__default.useState(false);
-    const getCornerPosition = React__default.useCallback((corner) => {
-      const padding = edgePadding + initialPosition.x;
-      switch (corner) {
-        case "top-left":
-          return { x: padding, y: padding };
-        case "top-right":
-          return { x: dimensions.width - width - padding, y: padding };
-        case "bottom-left":
-          return { x: padding, y: dimensions.height - height - padding };
-        case "bottom-right":
-        default:
-          return { x: dimensions.width - width - padding, y: dimensions.height - height - padding };
-      }
-    }, [dimensions.width, dimensions.height, width, height, edgePadding, initialPosition.x]);
+    const getCornerPosition = React__default.useCallback(
+      (corner) => {
+        const padding = edgePadding + initialPosition.x;
+        switch (corner) {
+          case "top-left":
+            return { x: padding, y: padding };
+          case "top-right":
+            return { x: dimensions.width - width - padding, y: padding };
+          case "bottom-left":
+            return { x: padding, y: dimensions.height - height - padding };
+          case "bottom-right":
+          default:
+            return {
+              x: dimensions.width - width - padding,
+              y: dimensions.height - height - padding
+            };
+        }
+      },
+      [dimensions.width, dimensions.height, width, height, edgePadding, initialPosition.x]
+    );
     React__default.useEffect(() => {
       if (dimensions.width > 0 && dimensions.height > 0 && !isInitialized) {
         const pos = getCornerPosition(currentAnchor);
@@ -321,29 +317,27 @@ const FloatingGridItem = React.forwardRef(
     );
   }
 );
-const GridOverlay = React.forwardRef(
-  function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
-    if (!visible)
-      return null;
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        ref,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor,
-          ...style
-        },
-        ...props
+const GridOverlay = React.forwardRef(function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        ...style
       },
-      children
-    );
-  }
-);
+      ...props
+    },
+    children
+  );
+});
 
 exports.createGrid = meetLayoutGridCore.createGrid;
 exports.createGridItemPositioner = meetLayoutGridCore.createGridItemPositioner;

package/dist/index.d.cts

@@ -59,12 +59,14 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for pin/spotlight modes) */
     pinnedIndex?: number;
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar ratio (0-1) */
-    sidebarRatio?: number;
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Spring animation preset */
     springPreset?: SpringPreset;
     /** Custom container style */
@@ -75,23 +77,16 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible items (0 = show all). In gallery mode: limits all items. In sidebar: limits "others". */
+    /** Maximum visible items (0 = show all). In gallery mode without pin: limits all items. With pin: limits "others". */
     maxVisible?: number;
     /** Current page for visible items (0-based), used when maxVisible > 0 */
     currentVisiblePage?: number;
     /**
      * Per-item aspect ratio configurations.
-     * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
-     * @example ['16:9', '9:16', 'fill', undefined]
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['16:9', '9:16', undefined]
      */
     itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /**
-     * Enable flexible cell sizing based on item aspect ratios.
-     * When true, portrait items (9:16) get narrower cells, landscape items (16:9) get wider cells.
-     * Items are packed into rows intelligently.
-     * @default false
-     */
-    flexLayout?: boolean;
 }
 /**
  * Container component for the meet grid.

package/dist/index.d.mts

@@ -59,12 +59,14 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for pin/spotlight modes) */
     pinnedIndex?: number;
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar ratio (0-1) */
-    sidebarRatio?: number;
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Spring animation preset */
     springPreset?: SpringPreset;
     /** Custom container style */
@@ -75,23 +77,16 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible items (0 = show all). In gallery mode: limits all items. In sidebar: limits "others". */
+    /** Maximum visible items (0 = show all). In gallery mode without pin: limits all items. With pin: limits "others". */
     maxVisible?: number;
     /** Current page for visible items (0-based), used when maxVisible > 0 */
     currentVisiblePage?: number;
     /**
      * Per-item aspect ratio configurations.
-     * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
-     * @example ['16:9', '9:16', 'fill', undefined]
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['16:9', '9:16', undefined]
      */
     itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /**
-     * Enable flexible cell sizing based on item aspect ratios.
-     * When true, portrait items (9:16) get narrower cells, landscape items (16:9) get wider cells.
-     * Items are packed into rows intelligently.
-     * @default false
-     */
-    flexLayout?: boolean;
 }
 /**
  * Container component for the meet grid.

package/dist/index.d.ts

@@ -59,12 +59,14 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for pin/spotlight modes) */
     pinnedIndex?: number;
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar ratio (0-1) */
-    sidebarRatio?: number;
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Spring animation preset */
     springPreset?: SpringPreset;
     /** Custom container style */
@@ -75,23 +77,16 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible items (0 = show all). In gallery mode: limits all items. In sidebar: limits "others". */
+    /** Maximum visible items (0 = show all). In gallery mode without pin: limits all items. With pin: limits "others". */
     maxVisible?: number;
     /** Current page for visible items (0-based), used when maxVisible > 0 */
     currentVisiblePage?: number;
     /**
      * Per-item aspect ratio configurations.
-     * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
-     * @example ['16:9', '9:16', 'fill', undefined]
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['16:9', '9:16', undefined]
      */
     itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /**
-     * Enable flexible cell sizing based on item aspect ratios.
-     * When true, portrait items (9:16) get narrower cells, landscape items (16:9) get wider cells.
-     * Items are packed into rows intelligently.
-     * @default false
-     */
-    flexLayout?: boolean;
 }
 /**
  * Container component for the meet grid.

package/dist/index.mjs

@@ -52,13 +52,11 @@ function useMeetGrid(options) {
     options.gap,
     options.layoutMode,
     options.pinnedIndex,
-    options.sidebarPosition,
-    options.sidebarRatio,
+    options.othersPosition,
     options.maxItemsPerPage,
     options.currentPage,
     options.maxVisible,
     options.currentVisiblePage,
-    options.flexLayout,
     itemAspectRatiosKey
   ]);
 }
@@ -66,128 +64,104 @@ function useGridAnimation(preset = "smooth") {
   return useMemo(() => getSpringConfig(preset), [preset]);
 }
 
-const GridContainer = forwardRef(
-  function GridContainer2({
-    children,
-    aspectRatio = "16:9",
-    gap = 8,
-    count,
-    layoutMode = "gallery",
+const GridContainer = forwardRef(function GridContainer2({
+  children,
+  aspectRatio = "16:9",
+  gap = 8,
+  count,
+  layoutMode = "gallery",
+  pinnedIndex,
+  othersPosition,
+  springPreset = "smooth",
+  style,
+  className,
+  maxItemsPerPage,
+  currentPage,
+  maxVisible,
+  currentVisiblePage,
+  itemAspectRatios,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef(null);
+  const ref = forwardedRef || internalRef;
+  const dimensions = useGridDimensions(ref);
+  const childCount = count ?? React.Children.count(children);
+  const gridOptions = {
+    dimensions,
+    count: childCount,
+    aspectRatio,
+    gap,
+    layoutMode,
     pinnedIndex,
-    sidebarPosition,
-    sidebarRatio,
-    springPreset = "smooth",
-    style,
-    className,
+    othersPosition,
     maxItemsPerPage,
     currentPage,
     maxVisible,
     currentVisiblePage,
-    itemAspectRatios,
-    flexLayout,
-    ...props
-  }, forwardedRef) {
-    const internalRef = useRef(null);
-    const ref = forwardedRef || internalRef;
-    const dimensions = useGridDimensions(ref);
-    const childCount = count ?? React.Children.count(children);
-    const gridOptions = {
-      dimensions,
-      count: childCount,
-      aspectRatio,
-      gap,
-      layoutMode,
-      pinnedIndex,
-      sidebarPosition,
-      sidebarRatio,
-      maxItemsPerPage,
-      currentPage,
-      maxVisible,
-      currentVisiblePage,
-      itemAspectRatios,
-      flexLayout
-    };
-    const grid = useMeetGrid(gridOptions);
-    const containerStyle = {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      ...style
-    };
-    return /* @__PURE__ */ React.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+    itemAspectRatios
+  };
+  const grid = useMeetGrid(gridOptions);
+  const containerStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+});
+const GridItem = forwardRef(function GridItem2({
+  index,
+  children,
+  itemAspectRatio,
+  transition: customTransition,
+  disableAnimation = false,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { grid, springPreset } = useGridContext();
+  if (!grid) {
+    return null;
   }
-);
-const GridItem = forwardRef(
-  function GridItem2({
-    index,
-    children,
-    itemAspectRatio,
-    transition: customTransition,
-    disableAnimation = false,
-    className,
-    style,
-    ...props
-  }, ref) {
-    const { grid, springPreset } = useGridContext();
-    if (!grid) {
-      return null;
-    }
-    if (!grid.isItemVisible(index)) {
-      return null;
-    }
-    const { top, left } = grid.getPosition(index);
-    const { width, height } = grid.getItemDimensions(index);
-    const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
-    const isMain = grid.isMainItem(index);
-    if (grid.layoutMode === "spotlight" && !isMain) {
-      return null;
-    }
-    const springConfig = getSpringConfig(springPreset);
-    const transition = customTransition ?? {
-      type: springConfig.type,
-      stiffness: springConfig.stiffness,
-      damping: springConfig.damping
-    };
-    const animatedStyle = {
-      position: "absolute",
-      width,
-      height,
-      top,
-      left
-    };
-    const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
-    const isLastVisibleOther = index === lastVisibleOthersIndex;
-    const hiddenCount = grid.hiddenCount;
-    const renderChildren = () => {
-      if (typeof children === "function") {
-        return children({ contentDimensions, isLastVisibleOther, hiddenCount });
-      }
-      return children;
-    };
-    if (disableAnimation) {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ref,
-          style: { ...animatedStyle, ...style },
-          className,
-          "data-grid-index": index,
-          "data-grid-main": isMain,
-          ...props
-        },
-        renderChildren()
-      );
+  if (!grid.isItemVisible(index)) {
+    return null;
+  }
+  const { top, left } = grid.getPosition(index);
+  const { width, height } = grid.getItemDimensions(index);
+  const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
+  const isMain = grid.isMainItem(index);
+  if (grid.layoutMode === "spotlight" && !isMain) {
+    return null;
+  }
+  const springConfig = getSpringConfig(springPreset);
+  const transition = customTransition ?? {
+    type: springConfig.type,
+    stiffness: springConfig.stiffness,
+    damping: springConfig.damping
+  };
+  const animatedStyle = {
+    position: "absolute",
+    width,
+    height,
+    top,
+    left
+  };
+  const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
+  const isLastVisibleOther = index === lastVisibleOthersIndex;
+  const hiddenCount = grid.hiddenCount;
+  const renderChildren = () => {
+    if (typeof children === "function") {
+      return children({ contentDimensions, isLastVisibleOther, hiddenCount });
     }
+    return children;
+  };
+  if (disableAnimation) {
     return /* @__PURE__ */ React.createElement(
-      motion.div,
+      "div",
       {
         ref,
-        layout: true,
-        initial: false,
-        animate: animatedStyle,
-        transition,
-        style,
+        style: { ...animatedStyle, ...style },
         className,
         "data-grid-index": index,
         "data-grid-main": isMain,
@@ -196,7 +170,23 @@ const GridItem = forwardRef(
       renderChildren()
     );
   }
-);
+  return /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      ref,
+      layout: true,
+      initial: false,
+      animate: animatedStyle,
+      transition,
+      style,
+      className,
+      "data-grid-index": index,
+      "data-grid-main": isMain,
+      ...props
+    },
+    renderChildren()
+  );
+});
 const FloatingGridItem = forwardRef(
   function FloatingGridItem2({
     children,
@@ -219,20 +209,26 @@ const FloatingGridItem = forwardRef(
     const x = useMotionValue(0);
     const y = useMotionValue(0);
     const [isInitialized, setIsInitialized] = React.useState(false);
-    const getCornerPosition = React.useCallback((corner) => {
-      const padding = edgePadding + initialPosition.x;
-      switch (corner) {
-        case "top-left":
-          return { x: padding, y: padding };
-        case "top-right":
-          return { x: dimensions.width - width - padding, y: padding };
-        case "bottom-left":
-          return { x: padding, y: dimensions.height - height - padding };
-        case "bottom-right":
-        default:
-          return { x: dimensions.width - width - padding, y: dimensions.height - height - padding };
-      }
-    }, [dimensions.width, dimensions.height, width, height, edgePadding, initialPosition.x]);
+    const getCornerPosition = React.useCallback(
+      (corner) => {
+        const padding = edgePadding + initialPosition.x;
+        switch (corner) {
+          case "top-left":
+            return { x: padding, y: padding };
+          case "top-right":
+            return { x: dimensions.width - width - padding, y: padding };
+          case "bottom-left":
+            return { x: padding, y: dimensions.height - height - padding };
+          case "bottom-right":
+          default:
+            return {
+              x: dimensions.width - width - padding,
+              y: dimensions.height - height - padding
+            };
+        }
+      },
+      [dimensions.width, dimensions.height, width, height, edgePadding, initialPosition.x]
+    );
     React.useEffect(() => {
       if (dimensions.width > 0 && dimensions.height > 0 && !isInitialized) {
         const pos = getCornerPosition(currentAnchor);
@@ -316,28 +312,26 @@ const FloatingGridItem = forwardRef(
     );
   }
 );
-const GridOverlay = forwardRef(
-  function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
-    if (!visible)
-      return null;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor,
-          ...style
-        },
-        ...props
+const GridOverlay = forwardRef(function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        ...style
       },
-      children
-    );
-  }
-);
+      ...props
+    },
+    children
+  );
+});
 
 export { FloatingGridItem, GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meet-layout-grid-react",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React integration for meet-layout-grid with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "motion": "^11.15.0",
-    "@thangdevalone/meet-layout-grid-core": "1.1.1"
+    "@thangdevalone/meet-layout-grid-core": "1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",