@zohodesk/library-platform 1.1.10-exp.1 → 1.1.10-exp.3

package/es/library/custom-component/frameworks/json-schema-validator/Validator.js

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import Ajv from 'ajv';
 let jsonValidator = new Ajv({
   useDefaults: true
@@ -5,6 +6,10 @@ let jsonValidator = new Ajv({
 
 class Validator {
   static validate(schema, value) {
+    if (schema.schema) {
+      return Validator.validatePropertySchema(schema, value);
+    }
+
     let errors = [];
     Validator.checkFunctionsRecursively(schema, value, '', '#', errors); // Use AJV for the rest of the validation, ignoring functions
 
@@ -16,12 +21,13 @@ class Validator {
 
     if (!isValid) {
       // errors = validate.errors;
-      errors.push(...(validate.errors || []));
+      validate.errors && errors.push(...validate.errors);
     }
 
     return {
       isValid: isValid && errors.length === 0,
-      errors
+      errors,
+      warnings: []
     };
   }
 
@@ -33,13 +39,13 @@ class Validator {
     if (schema.type === 'function') {
       if (typeof value !== 'function') {
         errors.push({
-          keyword: "type",
-          dataPath: path ? `.${path}` : "",
+          keyword: 'type',
+          dataPath: path ? `.${path}` : '',
           schemaPath: `${schemaPath}/type`,
           params: {
-            type: "function"
+            type: 'function'
           },
-          message: "should be function"
+          message: 'should be function'
         });
       }
 
@@ -89,34 +95,65 @@ class Validator {
 
   }
 
-  static validatePropsAgainstSchema(schemaProps, props) {
-    const warnings = [];
-    const errors = [];
+  static validatePropertySchema(propertySchema, value) {
+    const {
+      schema
+    } = propertySchema;
+    const result = Validator.validateRequired(propertySchema, value);
+    const isProvided = propertySchema.isValueProvided;
 
-    for (const key in schemaProps) {
-      const schemaDef = schemaProps[key];
-      const isRequired = schemaDef.required === true;
-      const hasDefault = Object.prototype.hasOwnProperty.call(schemaDef, 'defaultValue');
-      const isProvided = Object.prototype.hasOwnProperty.call(props, key); // Handle missing required top-level properties
-
-      if (!isProvided) {
-        if (isRequired) {
-          if (hasDefault) {
-            if (schemaDef.defaultValue === undefined) {
-              errors.push(`Required property '${key}' is missing — default value is undefined.`);
-            } else {
-              warnings.push(`Required property '${key}' is missing. Default value will be used.`);
-            }
-          } else {
-            errors.push(`Required property '${key}' is missing — neither a value nor a default value is present.`);
-          }
-        }
+    if (result.isValid === false) {
+      return result;
+    }
+
+    if (!isProvided) {
+      return {
+        isValid: true,
+        errors: [],
+        warnings: result.warnings
+      };
+    }
 
-        continue;
+    const {
+      isValid,
+      errors,
+      warnings
+    } = Validator.validate(schema, value);
+    return {
+      key: propertySchema.name,
+      isValid,
+      errors,
+      warnings: [...result.warnings, ...warnings]
+    };
+  }
+
+  static validateRequired(propertySchema, value) {
+    const errors = [];
+    const warnings = [];
+    const isRequired = propertySchema.required === true;
+    const hasDefault = Object.prototype.hasOwnProperty.call(propertySchema, 'defaultValue');
+    const isProvided = propertySchema.isValueProvided;
+
+    if (!isProvided && isRequired) {
+      if (hasDefault) {
+        if (propertySchema.defaultValue === undefined) {
+          errors.push({
+            message: `is required but missing. So, default value is undefined.`
+          });
+        } else {
+          warnings.push({
+            message: `is required but missing. So, Default value will be used.`
+          });
+        }
+      } else {
+        errors.push({
+          message: `is required but missing. And, neither a value nor a default value is present.`
+        });
       }
     }
 
     return {
+      isValid: errors.length === 0,
       warnings,
       errors
     };

package/es/library/custom-component/frameworks/ui/CreateCustomComponent.js

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import DependencyFactory from "./DependencyFactory";
 import Compare from "./Compare";
 import { generateSlotChildren } from "./CreateSlotComponent";
+import { ACA_ERROR_OCCURRED } from "../../../../cc/component/ErrorStructure";
 
 function discardChildren(props) {
   const newObject = { ...props
@@ -58,6 +59,13 @@ const createCustomComponent = input => {
 
     componentDidMount() {
       this.controller.mount();
+
+      if (this.state.error) {
+        this.helpers.dispatch({
+          type: ACA_ERROR_OCCURRED,
+          payload: this.state.error
+        });
+      }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -76,31 +84,36 @@ const createCustomComponent = input => {
       this.controller.updateProperties(discardChildren(nextProps));
     }
 
-    componentDidUpdate() {// this.controller.updateProperties(this.props);
+    componentDidUpdate(prevProps, prevState) {
+      if (!Compare.deepEqual(prevState.error, this.state.error)) {
+        this.helpers.dispatch({
+          type: ACA_ERROR_OCCURRED,
+          payload: this.state.error
+        });
+      } // this.controller.updateProperties(this.props);
+
     }
 
     setRef = element => {
-      const {
-        setElement
-      } = this.eventManager;
-      setElement.bind(this.eventManager)(element);
-      this.eventManager.setElement(element);
+      this.controller.setElement(element);
       this.props.getRef && this.props.getRef(element);
     };
 
     render() {
-      let View = this.View;
-      let {
+      const View = this.View;
+      const {
         slots,
         children
       } = this.props;
+      const {
+        error
+      } = this.state;
 
-      if (this.state.error) {
+      if (error) {
         if (__TEST__) {
-          throw this.state.error;
+          throw error;
         }
 
-        console.log(this.state.error);
         const {
           FallbackView
         } = input;
@@ -108,12 +121,12 @@ const createCustomComponent = input => {
         if (FallbackView) {
           return /*#__PURE__*/React.createElement(FallbackView, {
             ref: this.setRef,
-            error: this.state.error
+            error: error
           });
         }
 
         return /*#__PURE__*/React.createElement("div", {
-          ref: element => this.setRef(element)
+          ref: this.setRef
         }, "error");
       } else {
         return /*#__PURE__*/React.createElement(View, {

package/es/library/custom-component/frameworks/ui/DependencyFactory.js

@@ -19,8 +19,7 @@ class DependencyFactory {
       repository,
       presenter,
       eventManager,
-      jsonValidator: Validator.validate,
-      schemaValidator: Validator.validatePropsAgainstSchema
+      jsonValidator: Validator.validate
     });
     const controller = new Controller(service);
     return {

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -9,10 +9,11 @@ import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/framework
 import Breadcrumb from "../../../../legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb";
 import IconButton from "../../../../legacy-to-new-arch/icon-button/frameworks/ui/IconButton";
 import HighlightedValue from "../../../../legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue";
+import ListItem from "../../../../legacy-to-new-arch/list-item/frameworks/ui/ListItem";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
-  // ['ListItem']: ListItem,
+  ['ListItem']: ListItem,
   ['MoreDropdown']: MoreDropdown,
   ['TableColumnSort']: TableColumnSort,
   ['TableColumnChooser']: TableColumnChooser,

package/es/library/dot/components/form/adapters/presenter/TransformState.js

@@ -46,7 +46,8 @@ export function TransformState(state) {
     headerRightActions,
     footerLeftActions,
     footerRightActions,
-    rightPanel
+    rightPanel,
+    clientScripts
   } = state.properties; // const { values, errorMessages } = state.behaviours.form;
 
   const updatedSections = updateFieldValues({
@@ -65,6 +66,7 @@ export function TransformState(state) {
       headerRightActions,
       footerLeftActions,
       footerRightActions,
+      clientScripts,
       rightPanel
     }
   };

package/es/library/dot/components/form/frameworks/ui/DefaultComponentRegister.js

@@ -2,6 +2,9 @@ import { DefaultFormSectionUIType } from "../../../../../../cc/fields/field/Form
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
 import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox, LookUp } from "../../../form-fields";
 import Section from "../../../section/frameworks/ui/Section";
+import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button";
+import SwitchField from "../../../../legacy-to-new-arch/table-field-components/switch-field/frameworks/ui/SwitchField";
 export function registerDefaultComponents() {
   // Registering components in the ComponentRegistry
   // NOTE: This is a workaround to avoid dynamic imports
@@ -19,7 +22,12 @@ export function registerDefaultComponents() {
   ComponentRegistry.register('Decimal', Decimal);
   ComponentRegistry.register('Date', Date);
   ComponentRegistry.register('DateTime', DateTime);
-  ComponentRegistry.register('Checkbox', Checkbox);
+  ComponentRegistry.register('Checkbox', Checkbox); // ComponentRegistry.register('Switch', Checkbox);
+
   ComponentRegistry.register('LookUp', LookUp);
-  ComponentRegistry.register(DefaultFormSectionUIType, Section);
+  ComponentRegistry.register(DefaultFormSectionUIType, Section); // Add more components as needed
+
+  ComponentRegistry.register('Switch', SwitchField);
+  ComponentRegistry.register('Button', Button);
+  ComponentRegistry.register('ActionIcon', ActionIcon);
 }

package/es/library/dot/components/form/frameworks/ui/Form.js

@@ -4,10 +4,12 @@ import FormView from "./FormView";
 import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
 import { registerDefaultComponents } from "./DefaultComponentRegister";
+import FormFallbackView from "./FormFallbackView";
 registerDefaultComponents();
 const Form = createCustomComponent({
   name: 'CustomForm',
   View: FormView,
+  FallbackView: FormFallbackView,
   properties: FormProperties,
   transformState: TransformState,
   eventHandlers: EventHandlersFactory.create(),

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -17,20 +17,23 @@ function FormView(_ref, ref) {
     footerLeftActions,
     footerRightActions,
     isHeaderEnabled,
-    isFooterEnabled
+    isFooterEnabled,
+    clientScripts
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
+    $ui_tagName: "form",
     $ui_displayMode: "flex",
     $ui_direction: "column",
     $flag_fullsize: true,
-    $a11y_attributes: {
+    $a11yAttributes_container: {
       role: 'form'
     },
     ref: ref
   }, /*#__PURE__*/React.createElement(Header, {
     hasHeader: isHeaderEnabled,
     headerLeftActions: headerLeftActions,
-    headerRightActions: headerRightActions
+    headerRightActions: headerRightActions,
+    clientScripts: clientScripts
   }), /*#__PURE__*/React.createElement(MiddleSection, {
     sections: sections,
     isLoading: isLoading,
@@ -38,7 +41,8 @@ function FormView(_ref, ref) {
   }), /*#__PURE__*/React.createElement(Footer, {
     hasFooter: isFooterEnabled,
     footerLeftActions: footerLeftActions,
-    footerRightActions: footerRightActions
+    footerRightActions: footerRightActions,
+    clientScripts: clientScripts
   }));
 }
 

package/es/library/dot/components/form/frameworks/ui/sub-components/Footer.js

@@ -1,27 +1,30 @@
 import React from 'react';
 import FormAction, { LeftSide, RightSide } from '@zohodesk/dot/es/FormAction/FormAction';
-import ActionEventMediator from "../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "../css/Form.module.css";
+import { RowActionsRenderer } from "../../../../../../../index";
 export default function Footer(_ref) {
   let {
     hasFooter,
     footerLeftActions,
-    footerRightActions
+    footerRightActions,
+    clientScripts
   } = _ref;
   if (!hasFooter) return null;
   return /*#__PURE__*/React.createElement(FormAction, {
     size: "small",
     paddingLeftSize: "xmedium",
     paddingRightClass: style.footer
-  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(RowActionsRenderer, {
     testId: "formFooter_leftActions",
     actions: footerLeftActions,
+    clientScripts: clientScripts,
     gap: ActionViewGap.LARGE
-  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(RowActionsRenderer, {
     testId: "formFooter_rightActions",
     actions: footerRightActions,
+    clientScripts: clientScripts,
     gap: ActionViewGap.LARGE
   })));
 }

package/es/library/dot/components/form/frameworks/ui/sub-components/Header.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import FormHeader from '@zohodesk-private/desk-components/es/setup/SetupHeader/SetupHeader';
-import ActionEventMediator from "../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import RowActionsRenderer from "../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 export default function Header(_ref) {
   let {
     hasHeader,
     headerLeftActions,
-    headerRightActions
+    headerRightActions,
+    clientScripts
   } = _ref;
   if (!hasHeader) return null;
   return /*#__PURE__*/React.createElement(FormHeader, {
     customId: "formHeader",
     testId: "formHeader",
-    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: headerLeftActions,
+      clientScripts: clientScripts,
       gap: ActionViewGap.MEDIUM
     }) : null,
-    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: headerRightActions,
+      clientScripts: clientScripts,
       gap: ActionViewGap.MEDIUM
     }) : null
   });

package/es/library/dot/components/form-fields/currency/frameworks/ui/Currency.js

@@ -3,12 +3,12 @@ import { CurrencyFieldProperties } from "../../../../../../../cc/fields";
 import CurrencyView from "./CurrencyView";
 import EventHandlersFactory from "./EventHandlerFactory";
 import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
-let PickList = createCustomComponent({
-  name: "Currency",
+let Currency = createCustomComponent({
+  name: "FormCurrencyField",
   View: CurrencyView,
   properties: CurrencyFieldProperties,
   events: [],
   eventHandlers: EventHandlersFactory.create(),
   behaviours: [FocusFieldBehaviourFactory.create()]
 });
-export default PickList;
+export default Currency;

package/es/library/dot/components/form-fields/lookup/frameworks/ui/Lookup.js

@@ -1,5 +1,5 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import LookupFieldProperties from "../../../../../../../cc/fields/text/Properties";
+import LookupFieldProperties from "../../../../../../../cc/fields/lookup/Properties";
 import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 import LookupView from "./LookupView";
 import EventHandlersFactory from "./EventHandlerFactory";

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -1,7 +1,10 @@
 import React from 'react';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
-import { renderField } from "./RenderField";
+import { renderField } from "./RenderField"; // @ts-ignore
+
+import style from "./css/Section.module.css";
 
 function SectionView(_ref, ref) {
   let {
@@ -16,16 +19,21 @@ function SectionView(_ref, ref) {
   } = state.properties;
   return /*#__PURE__*/React.createElement(Section, {
     $i18n_heading: title,
-    $flag_isDescriptionAsRichText: true,
+    $flag_isDescriptionAsHtmlText: true,
     $i18n_description: description,
     testId: name,
     customId: name,
     $tagAttributes_container: {
       ref
     }
-  }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
+  }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: "slideDown",
+    isActive: !isCollapsed
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.fieldsContainer
+  }, /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))));
+  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))))));
 }
 
 export default SectionView;

package/es/library/dot/components/section/frameworks/ui/css/Section.module.css

@@ -0,0 +1,3 @@
+.fieldsContainer {
+    padding-top: var(--zd_size1) 
+}

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -40,7 +40,8 @@ function TableListView(_ref2, _ref) {
   } = state.properties;
   const {
     headers,
-    rows
+    rows,
+    clientScripts
   } = data;
   const {
     hasActions: hasRowActions,
@@ -76,7 +77,8 @@ function TableListView(_ref2, _ref) {
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
-    dispatch
+    dispatch,
+    clientScripts
   }), renderBody({
     TableRef,
     dispatch,
@@ -90,7 +92,8 @@ function TableListView(_ref2, _ref) {
     hasRowActions,
     rowActionsColumnWidth,
     hasRows,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
@@ -113,7 +116,8 @@ function renderHeader(_ref3) {
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isReorderEnabled: isReorderEnabled,
@@ -128,7 +132,8 @@ function renderHeader(_ref3) {
     rowActionsColumnWidth: rowActionsColumnWidth,
     actions: selection.actions,
     headers: headers,
-    dispatch: dispatch
+    dispatch: dispatch,
+    clientScripts: clientScripts
   });
 }
 
@@ -158,7 +163,8 @@ function renderBody(_ref4) {
     hasRowActions,
     rowActionsColumnWidth,
     hasRows,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   } = _ref4;
   const {
     rowData,
@@ -204,7 +210,8 @@ function renderBody(_ref4) {
     rowActionsColumnWidth: rowActionsColumnWidth,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     dropIndicator: dropIndicator,
-    isReOrderLoading: isReOrderLoading
+    isReOrderLoading: isReOrderLoading,
+    clientScripts: clientScripts
   }));
 }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/ErrorState.js

@@ -1,9 +1,7 @@
 import React from 'react';
+import ErrorTypes from "../../../../../../../cc/error-state/ErrorTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ErrorOopsSomethingMiss from '@zohodesk/dot/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/es/version2/errorstate/UrlNotFound/UrlNotFound';
-// import UnableToProcess from '@zohodesk/dot/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
-// import Inconvenience from '@zohodesk/dot/es/version2/errorstate/Inconvenience/Inconvenience';
-
+import CommonErrorState from "../../../../../legacy-to-new-arch/error-state/frameworks/ui/ErrorState";
 /* @ts-ignore */
 
 import style from "../css/TableList.module.css";
@@ -18,9 +16,8 @@ export default function ErrorState(_ref) {
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: `${style.contentWrapper} ${style.errorContent}`
-    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
-      title: "Oops! Something is missing",
-      description: "We are unable to process your request. Please try again later."
+    }, /*#__PURE__*/React.createElement(CommonErrorState, {
+      type: ErrorTypes.OopsSomethingMiss
     }));
   }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Header.js

@@ -24,7 +24,8 @@ function Header(_ref) {
     hasRowActions,
     rowActionsColumnWidth,
     headers,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
 
   if (headers.length <= 0) {
@@ -43,13 +44,14 @@ function Header(_ref) {
     customStyle: {
       tableHeader: `${style.header} ${style[headerClasses]}`
     }
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions, clientScripts), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function rendermassAction(isSelectionEnabled, actions) {
+function rendermassAction(isSelectionEnabled, actions, clientScripts) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   });
 }
 
@@ -65,13 +67,14 @@ function renderReOrderColumn(isReorderEnabled) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null));
 }
 
-function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
+function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,
-    dispatch: dispatch
+    dispatch: dispatch,
+    clientScripts: clientScripts
   });
 }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Rows.js

@@ -17,7 +17,8 @@ const Rows = _ref => {
     rowActionsColumnWidth,
     isKeyboardControlsEnabled,
     dropIndicator,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   } = _ref;
   return rows.map((row, index) => {
     const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
@@ -26,11 +27,11 @@ const Rows = _ref => {
       key: `${row.id}`,
       index: index,
       disabled: isReOrderLoading
-    }, getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)));
+    }, getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading, clientScripts)));
   });
 };
 
-function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading, clientScripts) {
   const {
     id,
     columns,
@@ -58,7 +59,8 @@ function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelect
     rowActionsColumnWidth,
     isDroppable,
     dropPosition,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   };
 }