@zohodesk/library-platform 1.1.9 → 1.1.10-exp.2

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

@@ -1,9 +1,8 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 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
@@ -19,30 +18,6 @@ const createCustomComponent = input => {
   class Component extends React.Component {
     constructor(props) {
       super(props);
-
-      _defineProperty(this, "controller", void 0);
-
-      _defineProperty(this, "elementRef", void 0);
-
-      _defineProperty(this, "state", void 0);
-
-      _defineProperty(this, "presenter", void 0);
-
-      _defineProperty(this, "eventManager", void 0);
-
-      _defineProperty(this, "View", void 0);
-
-      _defineProperty(this, "helpers", void 0);
-
-      _defineProperty(this, "setRef", element => {
-        const {
-          setElement
-        } = this.eventManager;
-        setElement.bind(this.eventManager)(element);
-        this.eventManager.setElement(element);
-        this.props.getRef && this.props.getRef(element);
-      });
-
       this.state = null;
       let {
         controller,
@@ -84,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) {
@@ -102,22 +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 => {
+      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;
@@ -125,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/CreateSlotComponent.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Children } from "react";
 import ComponentRegistry from "./ComponentRegistry";
 
@@ -58,9 +60,9 @@ export function generateSlotChildren() {
       }
 
       if (View) {
-        slotChildren[name].push( /*#__PURE__*/React.createElement(View, { ...finalisedProps,
+        slotChildren[name].push( /*#__PURE__*/React.createElement(View, _extends({}, finalisedProps, {
           key: `${name}_${elementName}_${index}`
-        }, childProps.children));
+        }), childProps.children));
       }
     });
   });

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

@@ -40,7 +40,7 @@ function Component(props) {
   }, [props]);
   const View = /*#__PURE__*/forwardRef(input.View);
 
-  if (state !== null && state !== void 0 && state.error) {
+  if (state?.error) {
     console.log(state.error);
     return /*#__PURE__*/React.createElement("div", null, "error");
   } else {

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/adapters/gateway/Repository.js

@@ -1,14 +1,6 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import ActionLocationEntity from "../../entities/ActionLocationEntity";
 export default class Repository {
   constructor() {
-    _defineProperty(this, "element", void 0);
-
-    _defineProperty(this, "dispatch", void 0);
-
-    _defineProperty(this, "state", void 0);
-
     this.element = null;
   }
 

package/es/library/dot/components/action-location/adapters/presenters/Presenter.js

@@ -1,12 +1,4 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export default class Presenter {
-  constructor() {
-    _defineProperty(this, "updateState", void 0);
-
-    _defineProperty(this, "state", void 0);
-  }
-
   updateDependencies(state, updateState) {
     this.updateState = updateState;
     this.state = state;

package/es/library/dot/components/action-location/entities/ActionLocationEntity.js

@@ -40,18 +40,14 @@ export default class ActionLocationEntity {
   }
 
   listen(eventName) {
-    var _this$element;
-
     const handler = this.createEventHandlers(eventName);
     this.handlers[eventName] = handler;
-    (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.addEventListener(eventName, handler);
+    this.element?.addEventListener(eventName, handler);
   }
 
   unListen(eventName) {
-    var _this$element2;
-
     const handler = this.handlers[eventName];
-    (_this$element2 = this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.removeEventListener(eventName, handler);
+    this.element?.removeEventListener(eventName, handler);
     this.handlers[eventName] = undefined;
   }
 

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/actions-renderer/frameworks/ui/ActionsRendererView.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
 import ActionComponentMapping from "../../../action-location/frameworks/ui/ActionComponentMapping";
@@ -23,13 +25,13 @@ function ActionsRendererView(_ref, ref) {
     /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
 
     const ActionUiType = ActionComponentMapping[type] || ComponentRegistry.get(type);
-    return /*#__PURE__*/React.createElement(ActionUiType, {
-      key: index,
-      ...properties,
+    return /*#__PURE__*/React.createElement(ActionUiType, _extends({
+      key: index
+    }, properties, {
       appendToActionPayload: {
         eventMappings
       }
-    });
+    }));
   }));
 }
 

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

@@ -1,7 +1,10 @@
 import { DefaultFormSectionUIType } from "../../../../../../cc/fields/field/FormDefaultUIType";
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox } from "../../../form-fields";
+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,6 +22,12 @@ export function registerDefaultComponents() {
   ComponentRegistry.register('Decimal', Decimal);
   ComponentRegistry.register('Date', Date);
   ComponentRegistry.register('DateTime', DateTime);
-  ComponentRegistry.register('Checkbox', Checkbox);
-  ComponentRegistry.register(DefaultFormSectionUIType, Section);
+  ComponentRegistry.register('Checkbox', Checkbox); // ComponentRegistry.register('Switch', Checkbox);
+
+  ComponentRegistry.register('LookUp', LookUp);
+  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/FormFallbackView.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ErrorState from "../../../../legacy-to-new-arch/error-state/frameworks/ui/ErrorState";
+import { ErrorCodes } from "../../../../../../cc/component/ErrorStructure";
+import ErrorTypes from "../../../../../../cc/error-state/ErrorTypes";
+
+function FormFallbackView(_ref, ref) {
+  let {
+    error
+  } = _ref;
+  const map = {
+    [ErrorCodes.API_FAILED]: ErrorTypes.UrlNotFound,
+    [ErrorCodes.PROPERTY_VALIDATION_FAILED]: ErrorTypes.OopsSomethingMiss,
+    [ErrorCodes.EVENT_HANDLER_FAILED]: ErrorTypes.Inconvenience,
+    [ErrorCodes.UNKNOWN_ERROR]: ErrorTypes.Inconvenience
+  };
+  const errorType = map[error.code] === undefined ? ErrorTypes.Inconvenience : map[error.code];
+  return /*#__PURE__*/React.createElement(ErrorState, {
+    type: errorType,
+    getRef: ref
+  });
+}
+
+export default /*#__PURE__*/React.forwardRef(FormFallbackView);

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

@@ -17,18 +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,
+    $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,
@@ -36,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/__test__/Form.test.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -24,8 +26,7 @@ describe('Form Sections', () => {
   test('Sections are vertically aligned', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(getByText('Address Information')).toBeInTheDocument();
   });
@@ -42,24 +43,21 @@ describe('Form Sections', () => {
     const {
       getByText,
       queryByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...singleSectionProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, singleSectionProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(queryByText('Address Information')).not.toBeInTheDocument();
   });
   test('Multiple sections in a layout', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(getByText('Address Information')).toBeInTheDocument();
   });
   test('Maintain section order during rendering', () => {
     const {
       getAllByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     const sections = getAllByText(/Details|Information/);
     expect(sections[0]).toHaveTextContent('User Details');
     expect(sections[1]).toHaveTextContent('Address Information');
@@ -68,8 +66,7 @@ describe('Form Sections', () => {
     const {
       getAllByText,
       rerender
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     const sections = getAllByText(/Details|Information/);
     expect(sections[0]).toHaveTextContent('User Details');
     expect(sections[1]).toHaveTextContent('Address Information');
@@ -94,8 +91,7 @@ describe('Form Sections', () => {
         isVisible: true
       }]
     };
-    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
-    }));
+    rerender( /*#__PURE__*/React.createElement(Form, updatedProperties));
     const updatedSections = getAllByText(/Details|Summary|Information/);
     expect(updatedSections[0]).toHaveTextContent('User Details');
     expect(updatedSections[1]).toHaveTextContent('Order Summary');
@@ -107,8 +103,7 @@ describe('Form Sections', () => {
       getByText,
       queryByText,
       rerender
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties
-    }));
+    } = render( /*#__PURE__*/React.createElement(Form, formProperties));
     const sections = getAllByText(/Details|Information/);
     expect(sections[0]).toHaveTextContent('User Details');
     expect(sections[1]).toHaveTextContent('Address Information');
@@ -121,8 +116,7 @@ describe('Form Sections', () => {
         isVisible: true
       }]
     };
-    rerender( /*#__PURE__*/React.createElement(Form, { ...updatedProperties
-    }));
+    rerender( /*#__PURE__*/React.createElement(Form, updatedProperties));
     expect(getByText('User Details')).toBeInTheDocument();
     expect(queryByText('Address Information')).not.toBeInTheDocument();
   }); // Loading tests
@@ -130,17 +124,17 @@ describe('Form Sections', () => {
   test('Display loading indicator during form loading', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+    } = render( /*#__PURE__*/React.createElement(Form, _extends({}, formProperties, {
       isLoading: true
-    }));
+    })));
     expect(getByText('Loading...')).toBeInTheDocument();
   });
   test('No loading indicator when form is not loading', () => {
     const {
       queryByText
-    } = render( /*#__PURE__*/React.createElement(Form, { ...formProperties,
+    } = render( /*#__PURE__*/React.createElement(Form, _extends({}, formProperties, {
       isLoading: false
-    }));
+    })));
     expect(queryByText('Loading...')).not.toBeInTheDocument();
   });
 });

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -3,20 +3,17 @@
 }
 
 .field {
-    margin-top: var(--zd_size5) ;
+    margin-top: 5px;
 }
 
 .multiSelectField {
-    margin-top: var(--zd_size2) 
+    margin-top: 2px
 }
 
 .checkboxField {
     composes: dInflex alignFstart from '~@zohodesk/components/es/common/common.module.css';
-    max-width: 100% ;
-    gap: var(--zd_size8) 
-}
-.checkboxWrapper {
-    margin-top: var(--zd_size3) 
+    max-width: 100%;
+    gap: 8px
 }
 
 .cursor_pointer {
@@ -30,36 +27,36 @@
 }
 
 [dir=ltr] .footer {
-    padding-right: var(--zd_size32) 
+    padding-right: 32px
 }
 
 [dir=rtl] .footer {
-    padding-left: var(--zd_size32) 
+    padding-left: 32px
 }
 
 /* Sections layout */
 
 .sectionsWrapper {
-    padding-bottom: var(--zd_size8) 
+    padding-bottom: 8px
 }
 
 .sectionsLayout, .sectionsTwoLayout {
-    margin: 0 auto 
+    margin: 0 auto
 }
 
 .sectionsLayout {
-    max-width: var(--local-form-layout-max-width, var(--zd_size1080))
+    max-width: var(--local-form-layout-max-width, 1080px)
 }
 
 .sectionsTwoLayout {
-    column-gap: var(--zd_size8) ;
-    max-width: var(--local-form-layout-max-width, var(--zd_size1210))
+    column-gap: 8px;
+    max-width: var(--local-form-layout-max-width, 1210px)
 }
 
 .rightPanel {
     height: var(--local-form-right-panel-height, 100%);
     position: -webkit-sticky;
     position: sticky;
-    top: 0 ;
-    padding: var(--zd_size8) 0 
+    top: 0;
+    padding: 8px 0
 }

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/frameworks/ui/sub-components/SectionsWithRightPanelLayout.js

@@ -25,8 +25,7 @@ export default function SectionsWithRightPanelLayout(_ref) {
   }, children), /*#__PURE__*/React.createElement(Flex, {
     $flag_shrink: false,
     $ui_className: style.rightPanel
-  }, /*#__PURE__*/React.createElement(RightPanelComponent, { ...properties
-  })));
+  }, /*#__PURE__*/React.createElement(RightPanelComponent, properties)));
 }
 
 function updateRightPanelHeight(ref) {

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/CheckboxView.js

@@ -64,15 +64,13 @@ function CheckboxView(_ref2, ref) {
         type: CheckboxConstants.CHECKBOX_TOGGLED
       })
     } : undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.checkboxWrapper
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: id,
     checked: value,
     required: required,
     disabled: disabled,
     readonly: readonly
-  })), /*#__PURE__*/React.createElement(Label, {
+  }), /*#__PURE__*/React.createElement(Label, {
     for: id,
     label: label,
     actions: labelActions,

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;