@superblocksteam/library 2.0.0-next.82 → 2.0.0-next.84

package/dist/{index-b-4mZYkh.js → index-Bl_0WPlq.js}

@@ -2690,14 +2690,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-TOKPYUgj.js"
+            "./allPathsLoader-DCdJ8f7M.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-uT6kxtxf.js"
+            "./splitPathsBySizeLoader-usZfSm2b.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -45807,22 +45807,48 @@ class SocketErrorException extends Error {
     this.message = message2;
   }
 }
+const INTENTIONAL_CLOSE_CODE = 4001;
 class ISocket {
-  constructor(ws2, requestHandlers, globalMiddlewares, timeouts, logger) {
+  constructor(ws2, requestHandlers, globalMiddlewares, options) {
     this.responseHandler = /* @__PURE__ */ new Map();
+    this.isClosed = false;
     this.ws = ws2;
     this.requestHandlers = requestHandlers;
     this.globalMiddlewares = globalMiddlewares;
     this.nxtRequestId = 0;
-    this.logger = logger ?? { error: console.error };
-    this.timeouts = timeouts;
+    this.logger = this.logger ?? {
+      error: console.error,
+      warn: console.warn,
+      info: console.info
+    };
+    this.timeouts = options.timeouts;
     this.resetConnectionTimeout();
-    this.ws.addEventListener("message", async (event) => {
-      const eventData = JSON.parse(event.data.toString());
-      return this.handleMessage(eventData);
+    this.ws.addEventListener("message", (event) => {
+      try {
+        const eventData = JSON.parse(event.data.toString());
+        void this.handleMessage(eventData);
+      } catch (error) {
+        this.logger.error(`Error parsing message: ${error}`);
+      }
+    });
+    this.ws.addEventListener("close", (event) => {
+      this.isClosed = true;
+      if (event.code !== INTENTIONAL_CLOSE_CODE) {
+        this.responseHandler.forEach((handler, key2) => {
+          clearTimeout(handler.timeout);
+          this.logger.error(`Rejecting pending requestId ${key2} due to connection close`);
+          handler.reject({ code: 8, message: "Connection closed" });
+        });
+        this.responseHandler.clear();
+      }
+      options.onClose(event);
     });
   }
   async handleMessage(message2) {
+    if (this.isClosed) {
+      this.logger.error("Connection closed, ignoring message");
+      return;
+    }
     this.resetConnectionTimeout();
     if (message2.request) {
       const parts = message2.request.method.split(".");
@@ -45902,6 +45928,9 @@ class ISocket {
     return handler(params, ctx, client2, next2);
   }
   request(method4, params, authorization) {
+    if (this.isClosed) {
+      return Promise.reject(new SocketErrorException(10, "Connection closed"));
+    }
     return new Promise((resolve, reject) => {
       const requestId = ++this.nxtRequestId;
       this.responseHandler.set(requestId, {
@@ -45950,9 +45979,7 @@ class ISocket {
   }
   handleConnectionTimeout() {
     return () => {
-      var _a2;
-      this.logger.error(`Connection timed out after ${(_a2 = this.timeouts) == null ? void 0 : _a2.connectionTimeoutInSeconds} seconds`);
-      this.close();
+      this.close("Connection timeout");
     };
   }
   resetNoResponseTimeout(requestId) {
@@ -45979,14 +46006,8 @@ class ISocket {
       reject({ code: 7, message: message2 });
     };
   }
-  close() {
-    clearTimeout(this.connectionTimeout);
-    this.responseHandler.forEach((handler, key2) => {
-      clearTimeout(handler.timeout);
-      this.logger.error(`Rejecting pending requestId ${key2} due to connection close`);
-      handler.reject({ code: 8, message: "Connection closed" });
-    });
-    this.ws.close();
+  close(reason) {
+    this.ws.close(INTENTIONAL_CLOSE_CODE, reason);
   }
 }
 const proxyTarget = Object.freeze(() => {
@@ -46014,7 +46035,7 @@ function createIsocketProxy(socket, path2) {
 }
 function createISocketClient(socket) {
   return {
-    close: () => socket.close(),
+    close: (reason) => socket.close(reason),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     call: createIsocketProxy(socket, void 0)
   };
@@ -46950,8 +46971,8 @@ function setHttpStatusFromError(span, error) {
   span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
 }
 class TracedSocket extends ISocket {
-  constructor(ws2, requestHandlers, globalMiddlewares, tracer, timeouts, logger) {
-    super(ws2, requestHandlers, globalMiddlewares, timeouts, logger);
+  constructor(ws2, requestHandlers, globalMiddlewares, tracer, options) {
+    super(ws2, requestHandlers, globalMiddlewares, options);
     this.activeSpanByRequestId = /* @__PURE__ */ new Map();
     this.middlewareSpanByReqId = /* @__PURE__ */ new Map();
     this.tracer = tracer;
@@ -47039,13 +47060,13 @@ class TracedSocket extends ISocket {
       this.lastActiveSpan.addEvent(eventName, attributes2, /* @__PURE__ */ new Date());
     }
   }
-  close() {
+  close(reason) {
     for (const span of this.activeSpanByRequestId.values()) {
       span.end();
     }
     this.activeSpanByRequestId = /* @__PURE__ */ new Map();
     this.lastActiveSpan = void 0;
-    super.close();
+    super.close(reason);
   }
 }
 var ws$1 = null;
@@ -47060,20 +47081,25 @@ if (typeof WebSocket !== "undefined") {
 } else if (typeof self !== "undefined") {
   ws$1 = self.WebSocket || self.MozWebSocket;
 }
-function connectWebSocket(wsUrl, protocol) {
+function connectWebSocket(wsUrl, protocol, timeout2 = 3e4) {
   return new Promise((resolve, reject) => {
     const ws2 = new ws$1(wsUrl, protocol);
+    const timeoutId = setTimeout(() => {
+      reject(new Error("Connection timeout"));
+    }, timeout2);
     ws2.addEventListener("open", () => {
+      clearTimeout(timeoutId);
       resolve(ws2);
     });
     ws2.addEventListener("error", (error) => {
+      clearTimeout(timeoutId);
       reject(error);
     });
   });
 }
 class ISocketWithClientAuth extends TracedSocket {
-  constructor(ws2, authorization, requestHandlers, globalMiddlewares, tracer, timeouts) {
-    super(ws2, requestHandlers, globalMiddlewares, tracer, timeouts);
+  constructor(ws2, authorization, requestHandlers, globalMiddlewares, tracer, options) {
+    super(ws2, requestHandlers, globalMiddlewares, tracer, options);
     this.hasSentAuth = false;
     this.authorization = authorization;
   }
@@ -95526,14 +95552,15 @@ class ApiManager {
     var _a2, _b2, _c2;
     const api2 = this.apisByName[apiName];
     editorBridge.setApiStarted(apiName);
+    if (!api2) {
+      console.error(`Api ${apiName} not found`);
+      throw new Error(`Api ${apiName} not found`);
+    }
     const inputs = getApiDeps(
       this.rootStore.entityManager,
       scopeId,
       this.apiNameToDepCandidates[apiName] ?? []
     );
-    if (!api2) {
-      throw new Error(`Api ${apiName} not found`);
-    }
     const orchestratorUrl = `${this.baseUrl}v2/execute`;
     const events2 = [];
     await ((_a2 = this.rootStore.editStore) == null ? void 0 : _a2.operationManager.ensureFilesSynced());
@@ -98160,16 +98187,13 @@ observerBatching(unstable_batchedUpdates);
 class ConnectionManager {
   // The status of the connection to the remote dev server
   constructor() {
-    __publicField(this, "socketInitialized", false);
-    // Set once after the socket is first initialized, since we do not want to show any connection warnings until then
-    __publicField(this, "connectionStatus", "disconnected");
+    __publicField(this, "connectionStatus", "pre-init");
     makeAutoObservable(this);
     registerStores({
       ConnectionManager: this
     });
   }
   initializeSocket() {
-    this.socketInitialized = true;
     this.connectionStatus = "connecting";
   }
   connect() {
@@ -98226,73 +98250,47 @@ const generateId = () => {
 class OperationAPI {
   constructor(serverUrl) {
     __publicField(this, "socket");
-    __publicField(this, "editorMoveComponent", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.moveComponent(payload);
-    });
-    __publicField(this, "editorCreateComponent", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.createComponent(payload);
-    });
-    __publicField(this, "editorDeleteComponents", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.deleteComponents(payload);
-    });
-    __publicField(this, "editorSetProperty", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.setProperty(payload);
-    });
-    __publicField(this, "editorSetProperties", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.setProperties(payload);
-    });
-    __publicField(this, "editorDeleteProperties", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.deleteProperties(payload);
-    });
-    __publicField(this, "editorBatchUpdate", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.batchUpdate(payload);
-    });
-    __publicField(this, "apiUpdate", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.apiUpdate(payload);
-    });
-    __publicField(this, "editorAddEntity", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.addEntity(payload);
-    });
-    __publicField(this, "editorUpdateEntity", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.updateEntity(payload);
-    });
-    __publicField(this, "editorDeleteEntity", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.deleteEntity(payload);
-    });
-    __publicField(this, "editorRenameElement", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.renameElement(payload);
-    });
-    __publicField(this, "editorUpdateTheme", async (payload) => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.updateTheme(payload);
-    });
+    __publicField(this, "retryAttempts", 0);
     __publicField(this, "ensureFilesSynced", async () => {
-      var _a2;
-      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.ensureFilesSynced();
+      if (!this.socket) {
+        throw new Error("Failed to connect to socket");
+      }
+      try {
+        await this.socket.call.editor.ensureFilesSynced();
+      } catch (error) {
+        console.error("Error ensuring files synced", error);
+      }
     });
     this.serverUrl = serverUrl;
   }
   async connect(peerId, userId) {
-    const socket = await connectSocket(this.serverUrl, peerId, userId);
+    const socket = await connectSocket(this.serverUrl, {
+      peerId,
+      userId,
+      onClose: () => {
+        var _a2;
+        console.log("App<>Dev box Socket closed, retrying...");
+        (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.disconnect();
+        if (this.retryAttempts < 3) {
+          this.connect(peerId, userId);
+        } else {
+          this.socket = void 0;
+        }
+        this.retryAttempts++;
+      }
+    });
+    this.retryAttempts = 0;
     this.socket = socket;
   }
 }
 const sourceUpdateApi = new OperationAPI(
   typeof window !== "undefined" ? window.location.origin : ""
 );
-async function connectSocket(serverUrl, peerId, userId) {
+async function connectSocket(serverUrl, {
+  peerId,
+  userId,
+  onClose: onClose2
+}) {
   var _a2, _b2, _c2;
   if (!serverUrl) {
     return void 0;
@@ -98302,15 +98300,9 @@ async function connectSocket(serverUrl, peerId, userId) {
   if (userId) {
     wsUrl.searchParams.set("userId", userId);
   }
-  const onClose2 = () => {
-    var _a3;
-    console.log("App<>Dev box Socket closed");
-    (_a3 = rootStore.editStore) == null ? void 0 : _a3.connectionManager.disconnect();
-  };
+  (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.initializeSocket();
   try {
     const ws2 = await connectWebSocket(wsUrl.toString());
-    (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.initializeSocket();
-    ws2.onclose = onClose2;
     const isocket = new ISocketWithClientAuth(
       ws2,
       void 0,
@@ -98408,8 +98400,16 @@ async function connectSocket(serverUrl, peerId, userId) {
       [],
       trace$1.getTracer("superblocks-ui-framework"),
       {
-        connectionTimeoutInSeconds: 6 * 60,
-        noResponseTimeoutInSeconds: 5 * 60
+        onClose: (event) => {
+          var _a3;
+          onClose2(event);
+          console.log("App<>Dev box Socket closed");
+          (_a3 = rootStore.editStore) == null ? void 0 : _a3.connectionManager.disconnect();
+        },
+        timeouts: {
+          connectionTimeoutInSeconds: void 0,
+          noResponseTimeoutInSeconds: 60
+        }
       }
     );
     const socket = createISocketClient(isocket);
@@ -144456,14 +144456,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-DiEGmK_4.js"
+            "./allPathsLoader-CwmAO7vH.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-DQcJgU2J.js"
+            "./splitPathsBySizeLoader-DJhelNAf.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -154787,7 +154787,8 @@ const renderCell = ({
         );
       }
       if (typeof value === "boolean") {
-        const ButtonIcon = value ? RadioButtonControlIcons["check"] : RadioButtonControlIcons[cellProps.booleanStyleFalse || "empty"];
+        const falseStyle = typeof cellProps.booleanStyleFalse === "string" ? cellProps.booleanStyleFalse.toLowerCase() : "empty";
+        const ButtonIcon = value ? RadioButtonControlIcons["check"] : RadioButtonControlIcons[falseStyle] ?? RadioButtonControlIcons["empty"];
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           CellWrapper,
           {
@@ -154900,46 +154901,56 @@ const renderCell = ({
     }
   }
 };
-const renderActions = (props, isHidden2, cellProperties, compactMode, theme) => {
-  if (!props.columnActions)
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      CellWrapper,
+const TableButton = (props) => {
+  const [loading, setLoading] = useState(false);
+  const onComplete = () => {
+    setLoading(false);
+  };
+  const [wrapperStyle, buttonStyle] = useMemo$2(() => {
+    const mode = getCompactMode(props.compactMode);
+    const rowHeight = TABLE_SIZES[mode].ROW_HEIGHT;
+    const buttonHeight = `${Math.min(30, rowHeight - 8)}px`;
+    const wrapperStyle2 = {
+      height: buttonHeight,
+      margin: "0 5px 0 0",
+      overflow: "hidden"
+    };
+    return [
+      wrapperStyle2,
       {
-        cellProperties,
-        isHidden: isHidden2,
-        compactMode
+        height: buttonHeight,
+        fontWeight: 400
       }
-    );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    CellWrapper,
+    ];
+  }, [props.compactMode]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": `action-button`, style: wrapperStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button$3,
     {
-      cellProperties,
-      isHidden: isHidden2,
-      compactMode,
-      children: props.columnActions.map((action2, index2) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TableAction,
-          {
-            action: action2,
-            rowIndex: props.rowIndex,
-            isSelected: props.isSelected,
-            isDisabled: props.isDisabled,
-            backgroundColor: props.backgroundColor,
-            buttonVariant: props.buttonVariant,
-            cellIcon: props.cellIcon,
-            cellIconPosition: props.cellIconPosition,
-            buttonLabelColor: props.buttonLabelColor,
-            onCommandClick: props.onCommandClick,
-            handleRowSelect: props.handleRowSelect,
-            compactMode: props.compactMode,
-            theme,
-            border: props.buttonBorder
-          },
-          index2
-        );
-      })
+      theme: props.theme,
+      textColor: props.buttonLabelColor,
+      buttonStyle: props.buttonVariant,
+      disabled: props.isDisabled,
+      isLoading: loading,
+      backgroundColor: props.backgroundColor,
+      text: props.buttonLabel,
+      border: props.buttonBorder,
+      style: buttonStyle,
+      useDynamicContrast: props.buttonVariant === "primary",
+      icon: props.cellIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicSVG, { iconName: props.cellIcon, disablePointerEvents: true }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}),
+      iconPosition: props.cellIconPosition,
+      onClick: (e3) => {
+        e3.stopPropagation();
+        if (props.isDisabled) return;
+        if (!props.isSelected) {
+          props.handleRowSelect(props.rowIndex);
+        }
+        if (!loading) {
+          setLoading(true);
+          props.onClick(onComplete);
+        }
+      }
     }
-  );
+  ) });
 };
 const renderLink = (props) => {
   var _a2;
@@ -155006,57 +155017,6 @@ const renderLink = (props) => {
     }
   );
 };
-const TableAction = (props) => {
-  const [loading, setLoading] = useState(false);
-  const onComplete = () => {
-    setLoading(false);
-  };
-  const [wrapperStyle, buttonStyle] = useMemo$2(() => {
-    const mode = getCompactMode(props.compactMode);
-    const rowHeight = TABLE_SIZES[mode].ROW_HEIGHT;
-    const buttonHeight = `${Math.min(30, rowHeight - 8)}px`;
-    const wrapperStyle2 = {
-      height: buttonHeight,
-      margin: "0 5px 0 0",
-      overflow: "hidden"
-    };
-    return [
-      wrapperStyle2,
-      {
-        height: buttonHeight,
-        fontWeight: 400
-      }
-    ];
-  }, [props.compactMode]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": `action-button`, style: wrapperStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Button$3,
-    {
-      theme: props.theme,
-      textColor: props.buttonLabelColor,
-      buttonStyle: props.buttonVariant,
-      disabled: props.isDisabled,
-      isLoading: loading,
-      backgroundColor: props.backgroundColor,
-      text: props.action.label,
-      border: props.border,
-      style: buttonStyle,
-      useDynamicContrast: props.buttonVariant === "primary",
-      icon: props.cellIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx(DynamicSVG, { iconName: props.cellIcon, disablePointerEvents: true }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}),
-      iconPosition: props.cellIconPosition,
-      onClick: (e3) => {
-        e3.stopPropagation();
-        if (props.isDisabled) return;
-        if (!props.isSelected) {
-          props.handleRowSelect(props.rowIndex);
-        }
-        if (!loading) {
-          setLoading(true);
-          props.onCommandClick(onComplete);
-        }
-      }
-    }
-  ) });
-};
 const renderEmptyRow = (columns, page, prepareRow, index2, columnSizeMap, resizingColumnIdRef) => {
   const canvasScaleFactor = 1;
   if (page.length) {
@@ -155222,16 +155182,6 @@ function getDefaultComputedValue(accessor, widgetName, isDerived) {
     accessor
   )} })}}`;
 }
-function getTableStyles(props) {
-  return {
-    textColor: props.textColor,
-    textSize: props.textSize,
-    fontStyle: props.fontStyle,
-    cellBackground: props.cellBackground,
-    verticalAlign: props.verticalAlign,
-    horizontalAlign: props.horizontalAlign
-  };
-}
 const getColumnWidthStyle = ({
   column: column2,
   columnSizeMap,
@@ -155312,11 +155262,9 @@ function collapseTableData(data2, largestRow) {
   );
   return filledData.filter((row) => row.length > 0).map((row) => row.filter((_22, colIdx) => !emptyColumns[colIdx]));
 }
-function createTableColumns(props) {
-  const { columns = {}, tableData = [] } = props;
+function createTableColumns(columns = {}, tableData = [], tableStyles, widgetName) {
   const previousColumnIds = Object.keys(columns);
   const tableColumns = {};
-  const tableStyles = getTableStyles(props);
   const columnKeys = getAllTableColumnKeys(
     tableData,
     // if there is no table data, fallback to the previous column ids
@@ -155325,11 +155273,7 @@ function createTableColumns(props) {
   let index2 = 0;
   for (index2 = 0; index2 < columnKeys.length; index2++) {
     const i3 = columnKeys[index2];
-    const columnProperties = getDefaultColumnProperties(
-      i3,
-      index2,
-      props.widgetName
-    );
+    const columnProperties = getDefaultColumnProperties(i3, index2, widgetName);
     tableColumns[columnProperties.id] = {
       ...columnProperties,
       ...tableStyles,
@@ -155345,7 +155289,7 @@ function createTableColumns(props) {
     const defaultProperties = getDefaultColumnProperties(
       derivedColumnKey,
       index2,
-      props.widgetName,
+      widgetName,
       true
     );
     tableColumns[derivedColumnKey] = {
@@ -155463,7 +155407,19 @@ function getFilteredTableData(props) {
     $originalIndex: index2
   }));
   if (props.columns && lodashExports.isPlainObject(props.columns)) {
-    const columns = createTableColumns(props);
+    const columns = createTableColumns(
+      props.columns,
+      props.tableData,
+      {
+        textColor: props.textColor,
+        textSize: props.textSize,
+        fontStyle: props.fontStyle,
+        cellBackground: props.cellBackground,
+        verticalAlign: props.verticalAlign,
+        horizontalAlign: props.horizontalAlign
+      },
+      props.name ?? ""
+    );
     const columnIds = Object.keys(columns ?? {});
     columnIds.forEach((columnId) => {
       const column2 = columns == null ? void 0 : columns[columnId];
@@ -155481,7 +155437,7 @@ function getFilteredTableData(props) {
           computedValues = column2.computedValue;
         }
       }
-      if (computedValues.length === 0 && column2.isDerived) {
+      if (computedValues && computedValues.length === 0 && column2.isDerived) {
         computedValues = Array(derivedTableData.length).fill(
           column2.computedValue ?? ""
         );
@@ -155836,7 +155792,19 @@ const propertiesDefinition$9 = {
         // TODO(mark): this should be part of the composite prop config
       },
       propertyValue() {
-        return createTableColumns(this);
+        return createTableColumns(
+          this.columns,
+          this.tableData,
+          {
+            textColor: this.textColor,
+            textSize: this.textSize,
+            fontStyle: this.fontStyle,
+            cellBackground: this.cellBackground,
+            verticalAlign: this.verticalAlign,
+            horizontalAlign: this.horizontalAlign
+          },
+          this.name ?? ""
+        );
       }
     })
   }),
@@ -170114,6 +170082,15 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     });
     __publicField(this, "previousColumnsString", "");
     __publicField(this, "previousColumns", []);
+    __publicField(this, "handleTableButtonClick", (columnId, onComplete) => {
+      var _a2;
+      const columnProperties = (_a2 = this.props.columns) == null ? void 0 : _a2[columnId];
+      if ((columnProperties == null ? void 0 : columnProperties.onClick) && typeof columnProperties.onClick === "function") {
+        columnProperties.onClick(this.getRowContext()).then(onComplete);
+      } else {
+        onComplete();
+      }
+    });
     __publicField(this, "getEmptyRow", () => {
       const columnKeys = getAllTableColumnKeys(this.props.tableData);
       const selectedRow = {};
@@ -170906,9 +170883,6 @@ const _TableWidget = class _TableWidget extends React__default.Component {
   componentDidMount() {
     this.addEventListeners();
   }
-  componentDidUpdate() {
-    this.addEventListeners();
-  }
   addEventListeners() {
     if (!this.tableElement) {
       this.tableElement = document.querySelector(
@@ -170924,18 +170898,9 @@ const _TableWidget = class _TableWidget extends React__default.Component {
   }
   getReactTableColumns() {
     const columnsArray = [];
-    const {
-      sortedColumn,
-      columnOrder,
-      columnSizeMap,
-      columns = {},
-      columnFreezes
-    } = this.props;
+    const { sortedColumn, columnOrder, columnSizeMap, columns, columnFreezes } = this.props;
+    let allColumns = columns;
     const tableProps = this.props;
-    let allColumns = Object.assign(
-      {},
-      createTableColumns(this.props) || columns
-    );
     const sortColumn = sortedColumn == null ? void 0 : sortedColumn.column;
     const sortOrder = sortedColumn == null ? void 0 : sortedColumn.asc;
     allColumns = reorderColumns(allColumns, columnOrder ?? [], columnFreezes);
@@ -171179,12 +171144,8 @@ const _TableWidget = class _TableWidget extends React__default.Component {
               rowIndex: currentRowIndex,
               isSelected: !!props.row.isSelected,
               isDisabled: cellProperties.isDisabled,
-              onCommandClick: (onComplete) => {
-                if (columnProperties.onClick && typeof columnProperties.onClick === "function") {
-                  columnProperties.onClick(this.getRowContext()).then(onComplete);
-                } else {
-                  onComplete();
-                }
+              onClick: (onComplete) => {
+                this.handleTableButtonClick(columnProperties.id, onComplete);
               },
               handleRowSelect: this.handleRowSelect,
               backgroundColor: cellProperties.buttonBackgroundColor,
@@ -171197,21 +171158,12 @@ const _TableWidget = class _TableWidget extends React__default.Component {
               ),
               cellIconPosition: cellProperties.cellIconPosition ?? "left",
               compactMode: this.props.compactMode,
-              columnActions: [
-                {
-                  id: columnProperties.id,
-                  label: cellProperties.buttonLabel ?? "Action",
-                  actions: columnProperties.onClick ?? lodashExports.noop
-                }
-              ]
+              id: columnProperties.id,
+              buttonLabel: cellProperties.buttonLabel ?? "Action",
+              isHidden: isHidden2,
+              theme: this.props.theme
             };
-            return renderActions(
-              buttonProps,
-              isHidden2,
-              cellProperties,
-              this.props.compactMode,
-              this.props.theme
-            );
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(TableButton, { ...buttonProps });
           } else if (columnProperties.columnType === "link") {
             return renderLink({
               cellProperties,
@@ -171611,27 +171563,6 @@ const SbTable = registerSbComponent(
       },
       [update]
     );
-    const transformedColumns = useMemo$2(() => {
-      const transformedColumns2 = {};
-      const columns = createTableColumns(props) ?? {};
-      for (const [key2, column2] of Object.entries(columns)) {
-        transformedColumns2[key2] = Object.fromEntries(
-          Object.entries(column2).map(([key22, value]) => {
-            if (typeof value === "function") {
-              return [
-                key22,
-                async (...args) => {
-                  await (value == null ? void 0 : value(...args));
-                }
-              ];
-            }
-            return [key22, value];
-          })
-        );
-        transformedColumns2[key2].id = key2;
-      }
-      return transformedColumns2;
-    }, [props]);
     const passthroughProps = usePassthroughProps(props);
     const disableNudge = useCallback(
       (disable) => {
@@ -171670,6 +171601,19 @@ const SbTable = registerSbComponent(
       },
       [features.dragAndDrop]
     );
+    const columns = createTableColumns(
+      props.columns,
+      props.tableData,
+      {
+        textColor: props.textColor,
+        textSize: props.textSize,
+        fontStyle: props.fontStyle,
+        cellBackground: props.cellBackground,
+        verticalAlign: props.verticalAlign,
+        horizontalAlign: props.horizontalAlign
+      },
+      props.name ?? ""
+    );
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...passthroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableWidget,
       {
@@ -171680,7 +171624,7 @@ const SbTable = registerSbComponent(
         searchPlaceholder: props.searchPlaceholder ?? "",
         searchText: props.searchText ?? "",
         paginationType: props.paginationType,
-        columns: transformedColumns,
+        columns: columns ?? EMPTY_OBJ,
         filters: props.filters ?? EMPTY_OBJ,
         header: props.header ?? "",
         tableData: props.tableData ?? EMPTY_ARRAY,
@@ -177481,54 +177425,7 @@ function listenForUrlChange() {
   observer2.observe(bodyList, config2);
   return observer2;
 }
-const ConnectionHandlerWrapper = observer(function ConnectionHandlerWrapper2(props) {
-  const [isRestarting, setIsRestarting] = useState(false);
-  const handleMouseMove = useCallback(async () => {
-    if (isRestarting) {
-      return;
-    }
-    setIsRestarting(true);
-    if (props.peerId) {
-      console.log("App<>Dev box Socket reconnecting");
-      await sourceUpdateApi.connect(props.peerId, props.userId);
-      setIsRestarting(false);
-    }
-  }, [props.peerId, props.userId, isRestarting]);
-  const showSpinner = editStore.connectionManager.socketInitialized && editStore.connectionManager.connectionStatus !== "connected";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    showSpinner && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        onMouseMove: handleMouseMove,
-        style: {
-          opacity: isRestarting ? 0.8 : 0,
-          width: "100%",
-          height: "100%",
-          backgroundColor: "black",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          color: "white",
-          fontSize: "24px",
-          fontWeight: "bold",
-          zIndex: 1e3,
-          flexDirection: "column"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Reconnecting..." }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner$1, {})
-        ]
-      }
-    ),
-    props.children
-  ] });
-});
 const IframeConnected = observer(function IframeConnected2(props) {
-  const [peerId, setPeerId] = useState();
-  const [userId, setUserId] = useState();
   useEffect(() => {
     if (!isEmbeddedBySuperblocksFirstParty()) {
       return;
@@ -177539,9 +177436,6 @@ const IframeConnected = observer(function IframeConnected2(props) {
       editorBridge.connected();
       rootStore.setEditStore(editStore);
       await sourceUpdateApi.connect(data2.payload.peerId, data2.payload.userId);
-      console.log("App<>Dev box Socket connected");
-      setPeerId(data2.payload.peerId);
-      setUserId(data2.payload.userId);
       editorBridge.updatePropertiesPanels(
         editStore.propertiesPanelManager.getNonDynamicPropertiesPanels()
       );
@@ -177571,10 +177465,10 @@ const IframeConnected = observer(function IframeConnected2(props) {
   }, []);
   const isPossiblyEditor = useMemo$2(isEmbeddedBySuperblocksFirstParty, []);
   if (isPossiblyEditor && editStore.isInitialized && typeof window !== "undefined") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectionHandlerWrapper, { peerId, userId, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DnDProvider, { children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(DnDProvider, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(NewComponentsDragLayer, {}),
       props.children
-    ] }) });
+    ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: props.children });
 });
@@ -191011,4 +190905,4 @@ export {
   copyToClipboard as y,
   navigateTo as z
 };
-//# sourceMappingURL=index-b-4mZYkh.js.map
+//# sourceMappingURL=index-Bl_0WPlq.js.map