hunk.code_window:         this.executeOnPageChange();
         }
       }
       if (this.isCurrPageNoGreaterThanMaxPageNo()) {
         const totalRecords = this.getTotalDataCount();
         const maxPageNo = Math.max(Math.ceil(totalRecords / this.pageSize), 1);
  
hunk.labels: keep keep keep add keep keep keep keep
hunk.after_edit:     if (this.props.pageSize === this.pageSize) {
         this.pageSizeUpdated = true;
       }
  
hunk.file_path: app/client/src/widgets/ListWidgetV2/widget/index.tsx
hunk.type: add
file: import React from "react";
  import BaseControl, { ControlProps } from "./BaseControl";
  import { StyledDynamicInput } from "./StyledControls";
  import CodeEditor, {
    CodeEditorExpected,
  } from "components/editorComponents/CodeEditor";
  import {
    EditorModes,
    EditorSize,
    EditorTheme,
    TabBehaviour,
  } from "components/editorComponents/CodeEditor/EditorConfig";
  import { isDynamicValue } from "utils/DynamicBindingUtils";
  import styled from "styled-components";
  import { isString } from "utils/helpers";
  import {
    JSToString,
    stringToJS,
  } from "components/editorComponents/ActionCreator/utils";
  import { AdditionalDynamicDataTree } from "utils/autocomplete/customTreeTypeDefCreator";
  
  const PromptMessage = styled.span`
    line-height: 17px;
  `;
  export const CurlyBraces = styled.span`
    color: ${(props) => props.theme.colors.codeMirror.background.hoverState};
    background-color: #ffffff;
    border-radius: 2px;
    padding: 2px;
    margin: 0px 2px;
    font-size: 10px;
  `;
  
  type InputTextProp = {
    label: string;
    value: string;
    onChange: (event: React.ChangeEvent<HTMLTextAreaElement> | string) => void;
    evaluatedValue?: any;
    expected?: CodeEditorExpected;
    placeholder?: string;
    dataTreePath?: string;
    additionalDynamicData: AdditionalDynamicDataTree;
    theme: EditorTheme;
    promptMessage?: JSX.Element;
  };
  
  export function InputText(props: InputTextProp) {
    const {
      additionalDynamicData,
      dataTreePath,
      evaluatedValue,
      expected,
      onChange,
      placeholder,
      promptMessage,
      theme,
      value,
    } = props;
    return (
      <StyledDynamicInput>
        <CodeEditor
          additionalDynamicData={additionalDynamicData}
          dataTreePath={dataTreePath}
          evaluatedValue={evaluatedValue}
          expected={expected}
          input={{
            value: value,
            onChange: onChange,
          }}
          mode={EditorModes.TEXT_WITH_BINDING}
          placeholder={placeholder}
          promptMessage={<PromptMessage>{promptMessage}</PromptMessage>}
          size={EditorSize.EXTENDED}
          tabBehaviour={TabBehaviour.INDENT}
          theme={theme}
        />
      </StyledDynamicInput>
    );
  }
  
  const bindingPrefix = `{{
    (
      (isNewRow) => (
  `;
  
  const getBindingSuffix = (tableId: string) => {
    return `
      ))
      (
        ${tableId}.isAddRowInProgress
      )
    }}
    `;
  };
  
  class TableInlineEditValidationControl extends BaseControl<
    TableInlineEditValidationControlProps
  > {
    render() {
      const {
        dataTreePath,
        defaultValue,
        expected,
        label,
        propertyValue,
        theme,
        widgetProperties,
      } = this.props;
      const tableId = widgetProperties.widgetName;
      const value =
        propertyValue && isDynamicValue(propertyValue)
          ? this.getInputComputedValue(propertyValue, tableId)
          : propertyValue || defaultValue;
  
      // Load default value in evaluated value
      if (value && !propertyValue) {
        this.onTextChange(value);
      }
  
      const additionalDynamicData = {
        isNewRow: false,
      };
  
      return (
        <InputText
          additionalDynamicData={additionalDynamicData}
          dataTreePath={dataTreePath}
          expected={expected}
          label={label}
          onChange={this.onTextChange}
          theme={theme}
          value={value}
        />
      );
    }
  
    getInputComputedValue = (propertyValue: string, tableId: string) => {
      let value;
  
      if (propertyValue.indexOf(bindingPrefix) === 0) {
        value = `${propertyValue.substring(
          bindingPrefix.length,
          propertyValue.length - getBindingSuffix(tableId).length,
        )}`;
      } else {
        value = propertyValue;
      }
  
      const stringValue = JSToString(value);
  
      return stringValue;
    };
  
    getComputedValue = (value: string, tableId: string) => {
      if (!isDynamicValue(value)) {
        return value;
      }
  
      const stringToEvaluate = stringToJS(value);
  
      if (stringToEvaluate === "") {
        return stringToEvaluate;
      }
      return `${bindingPrefix}${stringToEvaluate}${getBindingSuffix(tableId)}`;
    };
  
    onTextChange = (event: React.ChangeEvent<HTMLTextAreaElement> | string) => {
      let value = "";
      if (typeof event !== "string") {
        value = event.target?.value;
      } else {
        value = event;
      }
      if (isString(value)) {
        const output = this.getComputedValue(
          value,
          this.props.widgetProperties.widgetName,
        );
  
        this.updateProperty(this.props.propertyName, output);
      } else {
        this.updateProperty(this.props.propertyName, value);
      }
    };
  
    getColumnName = () => {
      const matchedColumnName = this.props.parentPropertyName.match(
        /primaryColumns\.([^.]+)\.[^.]+\.[^.]+/,
      );
  
      if (matchedColumnName) {
        return matchedColumnName[1];
      }
  
      return "";
    };
  
    static getControlType() {
      return "TABLE_INLINE_EDIT_VALIDATION_CONTROL";
    }
  }
  
  export interface TableInlineEditValidationControlProps extends ControlProps {
    defaultValue?: string;
  }
  
  export default TableInlineEditValidationControl;
  