chore: Add MutuationObserver to track changes in positions of widgets and layouts. (#28315)

app/client/src/layoutSystems/anvil/canvas/types.ts

@@ -1,3 +1,4 @@
 export interface AdditionalAnvilProperties {
-  layoutId: string;
+  layoutId: string; // Id of nearest drop target ancestor layout.
+  rowIndex: number; // Index of the widget in it's parent layout.
 }

app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx

@@ -105,8 +105,17 @@ export function AnvilFlexComponent(props: AnvilFlexComponentProps) {
         props.widgetId
       } ${widgetTypeClassname(
         props.widgetType,
-      )} t--widget-${props.widgetName.toLowerCase()}`,
+      )} t--widget-${props.widgetName.toLowerCase()} drop-target-${
-    [props.parentId, props.widgetId, props.widgetType, props.widgetName],
+        props.layoutId
+      } row-index-${props.rowIndex}`,
+    [
+      props.parentId,
+      props.widgetId,
+      props.widgetType,
+      props.widgetName,
+      props.layoutId,
+      props.rowIndex,
+    ],
   );
 
   // Memoize flex props to be passed to the WDS Flex component.

app/client/src/layoutSystems/anvil/editor/AnvilEditorWidgetOnion.tsx

@@ -43,7 +43,9 @@ export const AnvilEditorWidgetOnion = (props: BaseWidgetProps) => {
   return (
     <AnvilFlexComponent
       isResizeDisabled={props.resizeDisabled}
+      layoutId={props.layoutId}
       parentId={props.parentId}
+      rowIndex={props.rowIndex}
       widgetId={props.widgetId}
       widgetName={props.widgetName}
       widgetSize={widgetSize}

app/client/src/layoutSystems/anvil/layoutComponents/components/AlignedLayoutColumn.tsx

@@ -35,8 +35,14 @@ class AlignedLayoutColumn extends BaseLayoutComponent {
   }
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -44,6 +50,7 @@ class AlignedLayoutColumn extends BaseLayoutComponent {
         direction="column"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         {...(layoutStyle || {})}
       >

app/client/src/layoutSystems/anvil/layoutComponents/components/AlignedWidgetColumn.tsx

@@ -37,8 +37,14 @@ class AlignedWidgetColumn extends BaseLayoutComponent {
   static rendersWidgets: boolean = true;
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -46,6 +52,7 @@ class AlignedWidgetColumn extends BaseLayoutComponent {
         direction="column"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         {...(layoutStyle || {})}
       >

app/client/src/layoutSystems/anvil/layoutComponents/components/AlignedWidgetRow.tsx

@@ -29,8 +29,14 @@ class AlignedWidgetRow extends BaseLayoutComponent {
   static rendersWidgets: boolean = true;
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -40,6 +46,7 @@ class AlignedWidgetRow extends BaseLayoutComponent {
         direction="row"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         wrap="wrap"
         {...(layoutStyle || {})}

app/client/src/layoutSystems/anvil/layoutComponents/components/FlexLayout.tsx

@@ -31,6 +31,7 @@ export interface FlexLayoutProps
   children: ReactNode;
   isDropTarget?: boolean;
   layoutId: string;
+  layoutIndex: number;
   renderMode: RenderMode;
 
   border?: string;
@@ -66,6 +67,7 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => {
     isDropTarget,
     justifyContent,
     layoutId,
+    layoutIndex,
     maxHeight,
     maxWidth,
     minHeight,
@@ -147,9 +149,14 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => {
     };
   }, [border, isDropTarget, position, renderMode]);
 
+  const className = useMemo(() => {
+    return `layout-${layoutId} layout-index-${layoutIndex}`;
+  }, [layoutId, layoutIndex]);
+
   return (
     <Flex
       {...flexProps}
+      className={className}
       id={getAnvilLayoutDOMId(canvasId, layoutId)}
       ref={ref}
       style={styleProps}

app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutColumn.tsx

@@ -34,8 +34,14 @@ class LayoutColumn extends BaseLayoutComponent {
   }
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -43,6 +49,7 @@ class LayoutColumn extends BaseLayoutComponent {
         direction="column"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         {...(layoutStyle || {})}
       >

app/client/src/layoutSystems/anvil/layoutComponents/components/LayoutRow.tsx

@@ -22,8 +22,14 @@ class LayoutRow extends BaseLayoutComponent {
   static deriveHighlights: DeriveHighlightsFn = deriveRowHighlights;
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -33,6 +39,7 @@ class LayoutRow extends BaseLayoutComponent {
         direction="row"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         {...(layoutStyle || {})}
       >

app/client/src/layoutSystems/anvil/layoutComponents/components/WidgetColumn.tsx

@@ -36,8 +36,14 @@ class WidgetColumn extends BaseLayoutComponent {
   static rendersWidgets: boolean = true;
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -45,6 +51,7 @@ class WidgetColumn extends BaseLayoutComponent {
         direction="column"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         {...(layoutStyle || {})}
       >

app/client/src/layoutSystems/anvil/layoutComponents/components/WidgetRow.tsx

@@ -24,8 +24,14 @@ class WidgetRow extends BaseLayoutComponent {
   static rendersWidgets: boolean = true;
 
   render() {
-    const { canvasId, isDropTarget, layoutId, layoutStyle, renderMode } =
+    const {
-      this.props;
+      canvasId,
+      isDropTarget,
+      layoutId,
+      layoutIndex,
+      layoutStyle,
+      renderMode,
+    } = this.props;
 
     return (
       <FlexLayout
@@ -35,6 +41,7 @@ class WidgetRow extends BaseLayoutComponent {
         direction="row"
         isDropTarget={!!isDropTarget}
         layoutId={layoutId}
+        layoutIndex={layoutIndex}
         renderMode={renderMode}
         {...(layoutStyle || {})}
       >

app/client/src/layoutSystems/anvil/utils/anvilTypes.ts

@@ -52,6 +52,7 @@ export interface LayoutComponentProps extends LayoutProps {
   canvasId: string; // Parent canvas of the layout.
   children?: React.ReactNode; // The children of the layout component
   childrenMap: Record<string, WidgetProps>; // Map of child widget ids to their props.
+  layoutIndex: number; // Index of the layout component in the parent layout.
   layoutOrder: string[]; // Top - down hierarchy of layoutIds.
   parentDropTarget: string; // layoutId of the immediate drop target parent. Could be self as well.
   renderMode: RenderMode;

app/client/src/layoutSystems/anvil/utils/layouts/renderUtils.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import LayoutFactory from "layoutSystems/anvil/layoutComponents/LayoutFactory";
 import type {
   LayoutComponentProps,
@@ -7,25 +7,47 @@ import type {
 } from "../anvilTypes";
 import { type RenderMode, RenderModes } from "constants/WidgetConstants";
 import { isFillWidgetPresentInList } from "./widgetUtils";
-import { MOBILE_BREAKPOINT } from "../constants";
+import { AlignmentIndexMap, MOBILE_BREAKPOINT } from "../constants";
 import {
   FlexLayout,
   type FlexLayoutProps,
 } from "layoutSystems/anvil/layoutComponents/components/FlexLayout";
 import { FlexLayerAlignment } from "layoutSystems/common/utils/constants";
 import { isWidgetLayoutProps } from "./typeUtils";
-import { renderChildren } from "layoutSystems/common/utils/canvasUtils";
+import { renderChildWidget } from "layoutSystems/common/utils/canvasUtils";
 import type BaseLayoutComponent from "layoutSystems/anvil/layoutComponents/BaseLayoutComponent";
+import type { WidgetProps } from "widgets/BaseWidget";
 
-export function renderWidgets(props: LayoutComponentProps) {
+/**
+ *
+ * @param props | LayoutComponentProps : Component properties of a layout.
+ * @param startIndex | number (optional) : The index of the first child.
+ * @returns ReactNode[] | List of rendered child widgets
+ */
+export function renderWidgets(
+  props: LayoutComponentProps,
+  startIndex = 0,
+): ReactNode[] {
   const { canvasId, childrenMap, parentDropTarget, renderMode } = props;
-  return renderChildren(
+  /**
-    Object.values(childrenMap).filter((each) => !!each),
+   * startIndex is needed because AlignedWidgetRow uses three child Rows to render it's widgets.
-    canvasId,
+   * startIndex is used to correctly determine the index of a widget in the layout.
-    renderMode as RenderModes,
+   */
-    {},
+  return Object.values(childrenMap)
-    { layoutId: parentDropTarget },
+    .filter((each) => !!each)
-  );
+    .map((each: WidgetProps, index: number) => {
+      return renderChildWidget({
+        childWidgetData: each,
+        defaultWidgetProps: {},
+        layoutSystemProps: {
+          layoutId: parentDropTarget,
+          rowIndex: index + startIndex,
+        },
+        noPad: false,
+        renderMode: renderMode as RenderModes,
+        widgetId: canvasId,
+      });
+    });
 }
 
 /**
@@ -42,7 +64,7 @@ export function renderLayouts(
   renderMode: RenderMode = RenderModes.CANVAS,
   layoutOrder: string[],
 ): JSX.Element[] {
-  return layouts.map((layout) => {
+  return layouts.map((layout: LayoutProps, index: number) => {
     const Component: typeof BaseLayoutComponent = LayoutFactory.get(
       layout.layoutType,
     );
@@ -52,6 +74,7 @@ export function renderLayouts(
         canvasId={canvasId}
         childrenMap={getChildrenMap(layout, childrenMap)}
         key={layout.layoutId}
+        layoutIndex={index}
         layoutOrder={layoutOrder}
         parentDropTarget={
           layout.isDropTarget ? layout.layoutId : parentDropTarget
@@ -134,7 +157,10 @@ export function renderWidgetsInAlignedRow(
    * else render the child widgets separately
    * in their respective alignments.
    */
-  const commonProps: Omit<FlexLayoutProps, "children" | "layoutId"> = {
+  const commonProps: Omit<
+    FlexLayoutProps,
+    "children" | "layoutId" | "layoutIndex"
+  > = {
     alignSelf: "stretch",
     canvasId,
     columnGap: "4px",
@@ -146,6 +172,17 @@ export function renderWidgetsInAlignedRow(
     wrap: { base: "wrap", [`${MOBILE_BREAKPOINT}px`]: "nowrap" },
   };
 
+  const startChildren: Record<string, WidgetProps> = getChildrenMapForAlignment(
+    props,
+    FlexLayerAlignment.Start,
+  );
+  const centerChildren: Record<string, WidgetProps> =
+    getChildrenMapForAlignment(props, FlexLayerAlignment.Center);
+  const endChildren: Record<string, WidgetProps> = getChildrenMapForAlignment(
+    props,
+    FlexLayerAlignment.End,
+  );
+
   // TODO: After positionObserver integration,
   // check if use of FlexLayout is causing performance or other issues.
   // WDS Flex can be used as a replacement.
@@ -153,41 +190,45 @@ export function renderWidgetsInAlignedRow(
     <FlexLayout
       {...commonProps}
       justifyContent="start"
-      key={`${layoutId}-0`}
+      key={`${layoutId}-${AlignmentIndexMap[FlexLayerAlignment.Start]}`}
-      layoutId={`${layoutId}-0`}
+      layoutId={`${layoutId}-${AlignmentIndexMap[FlexLayerAlignment.Start]}`}
+      layoutIndex={AlignmentIndexMap[FlexLayerAlignment.Start]}
     >
       {renderWidgets({
         ...props,
-        childrenMap: getChildrenMapForAlignment(
+        childrenMap: startChildren,
-          props,
-          FlexLayerAlignment.Start,
-        ),
       })}
     </FlexLayout>,
     <FlexLayout
       {...commonProps}
       justifyContent="center"
-      key={`${layoutId}-1`}
+      key={`${layoutId}-${AlignmentIndexMap[FlexLayerAlignment.Center]}`}
-      layoutId={`${layoutId}-1`}
+      layoutId={`${layoutId}-${AlignmentIndexMap[FlexLayerAlignment.Center]}`}
+      layoutIndex={AlignmentIndexMap[FlexLayerAlignment.Start]}
     >
-      {renderWidgets({
+      {renderWidgets(
+        {
           ...props,
-        childrenMap: getChildrenMapForAlignment(
+          childrenMap: centerChildren,
-          props,
+        },
-          FlexLayerAlignment.Center,
+        Object.keys(startChildren)?.length,
-        ),
+      )}
-      })}
     </FlexLayout>,
     <FlexLayout
       {...commonProps}
       justifyContent="end"
-      key={`${layoutId}-2`}
+      key={`${layoutId}-${AlignmentIndexMap[FlexLayerAlignment.End]}`}
-      layoutId={`${layoutId}-2`}
+      layoutId={`${layoutId}-${AlignmentIndexMap[FlexLayerAlignment.End]}`}
+      layoutIndex={AlignmentIndexMap[FlexLayerAlignment.End]}
     >
-      {renderWidgets({
+      {renderWidgets(
+        {
           ...props,
-        childrenMap: getChildrenMapForAlignment(props, FlexLayerAlignment.End),
+          childrenMap: endChildren,
-      })}
+        },
+        Object.keys(startChildren)?.length +
+          Object.keys(centerChildren)?.length,
+      )}
     </FlexLayout>,
   ];
 }

app/client/src/layoutSystems/anvil/utils/types.ts

@@ -5,8 +5,10 @@ import type { WidgetType } from "WidgetProvider/factory";
 export interface AnvilFlexComponentProps {
   children: ReactNode;
   isResizeDisabled?: boolean;
+  layoutId: string;
   focused?: boolean;
   parentId?: string;
+  rowIndex: number;
   selected?: boolean;
   widgetId: string;
   widgetName: string;

app/client/src/layoutSystems/anvil/viewer/AnvilViewerWidgetOnion.tsx

@@ -25,7 +25,9 @@ export const AnvilViewerWidgetOnion = (props: BaseWidgetProps) => {
   return (
     <AnvilFlexComponent
       isResizeDisabled={props.resizeDisabled}
+      layoutId={props.layoutId}
       parentId={props.parentId}
+      rowIndex={props.rowIndex}
       widgetId={props.widgetId}
       widgetName={props.widgetName}
       widgetSize={widgetSize}

app/client/src/layoutSystems/common/utils/LayoutElementPositionsObserver/index.ts

@@ -22,13 +22,7 @@ class LayoutElementPositionObserver {
   private registeredWidgets: {
     [widgetDOMId: string]: { ref: RefObject<HTMLDivElement>; id: string };
   } = {};
-  private registeredLayers: {
+
-    [layerId: string]: {
-      ref: RefObject<HTMLDivElement>;
-      canvasId: string;
-      layerIndex: number;
-    };
-  } = {};
   private registeredLayouts: {
     [layoutDOMId: string]: {
       ref: RefObject<HTMLDivElement>;
@@ -38,6 +32,11 @@ class LayoutElementPositionObserver {
     };
   } = {};
 
+  private mutationOptions: MutationObserverInit = {
+    attributes: true,
+    attributeFilter: ["class"],
+  };
+
   private debouncedProcessBatch = debounce(this.processWidgetBatch, 200);
 
   // All the registered elements are registered with this Resize observer
@@ -48,10 +47,22 @@ class LayoutElementPositionObserver {
       for (const entry of entries) {
         if (entry?.target?.id) {
           const DOMId = entry?.target?.id;
-          if (DOMId.indexOf(ANVIL_WIDGET) > -1) {
+          this.trackEntry(DOMId);
-            this.addWidgetToProcess(DOMId);
+        }
-          } else if (DOMId.indexOf(LAYOUT) > -1) {
+      }
-            this.addLayoutToProcess(DOMId);
+    },
+  );
+
+  private mutationObserver = new MutationObserver(
+    (mutations: MutationRecord[]) => {
+      for (const mutation of mutations) {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "class"
+        ) {
+          const DOMId: string = (mutation?.target as HTMLElement)?.id;
+          if (DOMId) {
+            this.trackEntry(DOMId);
           }
         }
       }
@@ -64,6 +75,7 @@ class LayoutElementPositionObserver {
       const widgetDOMId = getAnvilWidgetDOMId(widgetId);
       this.registeredWidgets[widgetDOMId] = { ref, id: widgetId };
       this.resizeObserver.observe(ref.current);
+      this.mutationObserver.observe(ref.current, this.mutationOptions);
     }
   }
 
@@ -94,6 +106,7 @@ class LayoutElementPositionObserver {
         isDropTarget,
       };
       this.resizeObserver.observe(ref.current);
+      this.mutationObserver.observe(ref.current, this.mutationOptions);
     }
   }
 
@@ -144,6 +157,14 @@ class LayoutElementPositionObserver {
   public getRegisteredLayouts() {
     return this.registeredLayouts;
   }
+
+  private trackEntry(DOMId: string) {
+    if (DOMId.indexOf(ANVIL_WIDGET) > -1) {
+      this.addWidgetToProcess(DOMId);
+    } else if (DOMId.indexOf(LAYOUT) > -1) {
+      this.addLayoutToProcess(DOMId);
+    }
+  }
 }
 
 export const positionObserver = new LayoutElementPositionObserver();

app/client/src/layoutSystems/common/utils/canvasUtils.ts

@@ -19,7 +19,7 @@ type LayoutSystemProps =
  *
  * @returns
  */
-function renderChildWidget({
+export function renderChildWidget({
   childWidgetData,
   defaultWidgetProps,
   layoutSystemProps,

app/client/src/mocks/layoutComponents/layoutComponentMock.ts

@@ -47,6 +47,7 @@ export function generateLayoutComponentMock(
   return {
     layout,
     layoutId: generateReactKey(),
+    layoutIndex: 0,
     layoutStyle: {},
     layoutType: type,
 
@@ -98,6 +99,7 @@ export function generateAlignedRowMock(
   return {
     layout,
     layoutId: "",
+    layoutIndex: 0,
     layoutStyle: {},
     layoutType: LayoutComponentTypes.ALIGNED_WIDGET_ROW,
 

app/client/src/widgets/wds/WDSBaseInputWidget/widget/index.tsx

@@ -10,7 +10,10 @@ import type { BaseInputWidgetProps } from "./types";
 import { propertyPaneContentConfig } from "./contentConfig";
 import { FILL_WIDGET_MIN_WIDTH } from "constants/minWidthConstants";
 import { ResponsiveBehavior } from "layoutSystems/common/utils/constants";
-import type { WidgetBaseConfiguration } from "WidgetProvider/constants";
+import type {
+  AnvilConfig,
+  WidgetBaseConfiguration,
+} from "WidgetProvider/constants";
 
 class WDSBaseInputWidget<
   T extends BaseInputWidgetProps,
@@ -81,6 +84,17 @@ class WDSBaseInputWidget<
     };
   }
 
+  static getAnvilConfig(): AnvilConfig | null {
+    return {
+      widgetSize: {
+        maxHeight: {},
+        maxWidth: {},
+        minHeight: { base: "70px" },
+        minWidth: { base: "120px" },
+      },
+    };
+  }
+
   /**
    * disabled drag on focusState: true
    *

app/client/src/widgets/wds/WDSCheckboxWidget/config/anvilConfig.ts

@@ -0,0 +1,10 @@
+import type { AnvilConfig } from "WidgetProvider/constants";
+
+export const anvilConfig: AnvilConfig = {
+  widgetSize: {
+    maxHeight: {},
+    maxWidth: {},
+    minHeight: { base: "40px" },
+    minWidth: { base: "120px" },
+  },
+};

app/client/src/widgets/wds/WDSCheckboxWidget/config/index.ts

@@ -5,3 +5,4 @@ export { methodsConfig } from "./methodsConfig";
 export { defaultsConfig } from "./defaultsConfig";
 export { featuresConfig } from "./featuresConfig";
 export { autocompleteConfig } from "./autocompleteConfig";
+export { anvilConfig } from "./anvilConfig";

app/client/src/widgets/wds/WDSCheckboxWidget/widget/index.tsx

@@ -8,6 +8,7 @@ import * as config from "./../config";
 import BaseWidget from "widgets/BaseWidget";
 import type { CheckboxWidgetProps } from "./types";
 import type { WidgetState } from "widgets/BaseWidget";
+import type { AnvilConfig } from "WidgetProvider/constants";
 
 class WDSCheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
   static type = "WDS_CHECKBOX_WIDGET";
@@ -32,6 +33,10 @@ class WDSCheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
     return {};
   }
 
+  static getAnvilConfig(): AnvilConfig | null {
+    return config.anvilConfig;
+  }
+
   static getAutocompleteDefinitions() {
     return config.autocompleteConfig;
   }

app/client/src/widgets/wds/WDSIconButtonWidget/widget/index.tsx

@@ -12,6 +12,7 @@ import {
 } from "./../config";
 import type { IconButtonWidgetProps, IconButtonWidgetState } from "./types";
 import { IconButtonComponent } from "../component";
+import type { AnvilConfig } from "WidgetProvider/constants";
 
 class WDSIconButtonWidget extends BaseWidget<
   IconButtonWidgetProps,
@@ -39,6 +40,17 @@ class WDSIconButtonWidget extends BaseWidget<
     return {};
   }
 
+  static getAnvilConfig(): AnvilConfig | null {
+    return {
+      widgetSize: {
+        maxHeight: {},
+        maxWidth: {},
+        minHeight: { base: "40px" },
+        minWidth: { base: "40px" },
+      },
+    };
+  }
+
   static getAutocompleteDefinitions() {
     return autocompleteConfig;
   }

app/client/src/widgets/wds/WDSTableWidget/widget/index.tsx

@@ -122,6 +122,7 @@ import { getMemoiseTransformDataWithEditableCell } from "./reactTableUtils/trans
 import type { ExtraDef } from "utils/autocomplete/defCreatorUtils";
 import { generateTypeDef } from "utils/autocomplete/defCreatorUtils";
 import type {
+  AnvilConfig,
   AutocompletionDefinitions,
   PropertyUpdates,
   SnipingModeProperty,
@@ -373,6 +374,17 @@ export class WDSTableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     };
   }
 
+  static getAnvilConfig(): AnvilConfig | null {
+    return {
+      widgetSize: {
+        maxHeight: {},
+        maxWidth: {},
+        minHeight: { base: "300px" },
+        minWidth: { base: "280px" },
+      },
+    };
+  }
+
   static getPropertyPaneContentConfig() {
     return contentConfig;
   }

app/client/src/widgets/wds/WDSTextWidget/config/anvilConfig.ts

@@ -0,0 +1,10 @@
+import type { AnvilConfig } from "WidgetProvider/constants";
+
+export const anvilConfig: AnvilConfig = {
+  widgetSize: {
+    maxHeight: {},
+    maxWidth: {},
+    minHeight: { base: "40px" },
+    minWidth: { base: "120px" },
+  },
+};

app/client/src/widgets/wds/WDSTextWidget/config/index.ts

@@ -5,3 +5,4 @@ export { methodsConfig } from "./methodsConfig";
 export { defaultsConfig } from "./defaultsConfig";
 export { featuresConfig } from "./featuresConfig";
 export { autocompleteConfig } from "./autocompleteConfig";
+export { anvilConfig } from "./anvilConfig";

app/client/src/widgets/wds/WDSTextWidget/widget/index.tsx

@@ -7,6 +7,7 @@ import BaseWidget from "widgets/BaseWidget";
 import { Text } from "@design-system/widgets";
 import type { TextWidgetProps } from "./types";
 import type { WidgetState } from "widgets/BaseWidget";
+import type { AnvilConfig } from "WidgetProvider/constants";
 
 class WDSTextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
   static type = "WDS_TEXT_WIDGET";
@@ -31,6 +32,10 @@ class WDSTextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
     return {};
   }
 
+  static getAnvilConfig(): AnvilConfig | null {
+    return config.anvilConfig;
+  }
+
   static getAutocompleteDefinitions() {
     return config.autocompleteConfig;
   }