@zohodesk/library-platform 1.1.8 → 1.1.9-alpha.1

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/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

@@ -8,6 +8,7 @@ import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filte
 import MoreDropdown from "../../../../legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown";
 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";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
@@ -18,6 +19,7 @@ const ActionComponentMapping = {
   ['TableSelectAll']: Checkbox,
   ['TableColumnFilter']: TableColumnFilter,
   ['Breadcrumb']: Breadcrumb,
-  ['IconButton']: IconButton
+  ['IconButton']: IconButton,
+  ['HighlightedValue']: HighlightedValue
 };
 export default ActionComponentMapping;

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

@@ -32,63 +32,8 @@ function updateFieldValues(_ref) {
       fields
     };
   });
-} // const footerLeftActions = [{
-//   component: 'Button',
-//   location: 'footer_left_actions',
-//   properties: {
-//     text: 'Submit',
-//     palette: 'primaryFilled'
-//   },
-//   eventMappings: [
-//     {
-//       payloadValueMapping: {},
-//       sourceEvent: "BUTTON#CLICKED",
-//       id: "1234567890",
-//       targetEvent: "FORM#SUBMIT"
-//     }
-//   ]
-// },
-// {
-//   component: 'Button',
-//   location: 'footer_left_actions',
-//   properties: {
-//     text: 'Cancel',
-//     palette: 'secondary'
-//   },
-//   eventMappings: []
-// }];
+}
 
-
-const headerLeftActions = [{
-  component: 'Breadcrumb',
-  properties: {
-    items: [{
-      id: 'customization',
-      text: 'Customization',
-      isLink: true
-    }, {
-      id: 'buttons',
-      text: 'Buttons',
-      isLink: true
-    }, {
-      id: 'new-button',
-      text: 'New Button',
-      isActive: true
-    }, {
-      id: 'kakarot',
-      text: 'Kakarot',
-      iconName: 'ZD-GN-department'
-    }]
-  },
-  eventMappings: []
-}];
-const headerRightActions = [{
-  component: 'IconButton',
-  properties: {
-    iconName: 'ZD-GN-infoStroke',
-    title: 'Help'
-  }
-}];
 export function TransformState(state) {
   const {
     sections,
@@ -100,7 +45,8 @@ export function TransformState(state) {
     headerLeftActions,
     headerRightActions,
     footerLeftActions,
-    footerRightActions
+    footerRightActions,
+    rightPanel
   } = state.properties; // const { values, errorMessages } = state.behaviours.form;
 
   const updatedSections = updateFieldValues({
@@ -118,7 +64,8 @@ export function TransformState(state) {
       headerLeftActions,
       headerRightActions,
       footerLeftActions,
-      footerRightActions
+      footerRightActions,
+      rightPanel
     }
   };
 }

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

@@ -1,8 +1,6 @@
 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 EPHITag from "../../../form-fields/ephi-tag/frameworks/ui/EPHITag";
-import InfoIcon from "../../../form-fields/info-icon/frameworks/ui/InfoIcon";
+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";
 export function registerDefaultComponents() {
   // Registering components in the ComponentRegistry
@@ -22,7 +20,6 @@ export function registerDefaultComponents() {
   ComponentRegistry.register('Date', Date);
   ComponentRegistry.register('DateTime', DateTime);
   ComponentRegistry.register('Checkbox', Checkbox);
-  ComponentRegistry.register('EPHITag', EPHITag);
-  ComponentRegistry.register('InfoIcon', InfoIcon);
+  ComponentRegistry.register('LookUp', LookUp);
   ComponentRegistry.register(DefaultFormSectionUIType, Section);
 }

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

@@ -1,24 +1,17 @@
 import React from 'react';
-import Loader from '@zohodesk/svg/es/v1/Loader/Loader';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import FormAction, { LeftSide, RightSide } from '@zohodesk/dot/es/FormAction/FormAction';
-import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper';
-import FormHeader from '@zohodesk-private/desk-components/es/setup/SetupHeader/SetupHeader';
-import MiddleContainer from '@zohodesk-private/desk-components/es/setup/SetupContent/SetupContent';
-import Sections from "./sub-components/Sections";
-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 Header from "./sub-components/Header";
+import MiddleSection from "./sub-components/MiddleSection";
+import Footer from "./sub-components/Footer";
 
 function FormView(_ref, ref) {
   let {
-    state,
-    helpers
+    state
   } = _ref;
   const {
     sections,
     isLoading,
+    rightPanel,
     headerLeftActions,
     headerRightActions,
     footerLeftActions,
@@ -32,36 +25,19 @@ function FormView(_ref, ref) {
     $ui_direction: "column",
     $flag_fullsize: true,
     ref: ref
-  }, isHeaderEnabled && /*#__PURE__*/React.createElement(FormHeader, {
-    customId: "formHeader",
-    testId: "formHeader",
-    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
-      actions: headerLeftActions,
-      gap: ActionViewGap.MEDIUM
-    }) : null,
-    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
-      actions: headerRightActions,
-      gap: ActionViewGap.MEDIUM
-    }) : null
-  }), /*#__PURE__*/React.createElement(MiddleContainer, {
-    $flag_padding: true,
-    $flag_greyBg: true,
-    $flag_childrenWrapper: true
-  }, isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement(Sections, {
-    sections: sections
-  }))), isFooterEnabled && /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium",
-    paddingRightClass: style.footer
-  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
-    testId: "formFooter_leftActions",
-    actions: footerLeftActions,
-    gap: ActionViewGap.LARGE
-  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
-    testId: "formFooter_rightActions",
-    actions: footerRightActions,
-    gap: ActionViewGap.LARGE
-  }))));
+  }, /*#__PURE__*/React.createElement(Header, {
+    hasHeader: isHeaderEnabled,
+    headerLeftActions: headerLeftActions,
+    headerRightActions: headerRightActions
+  }), /*#__PURE__*/React.createElement(MiddleSection, {
+    sections: sections,
+    isLoading: isLoading,
+    rightPanel: rightPanel
+  }), /*#__PURE__*/React.createElement(Footer, {
+    hasFooter: isFooterEnabled,
+    footerLeftActions: footerLeftActions,
+    footerRightActions: footerRightActions
+  }));
 }
 
 export default FormView;

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

@@ -11,12 +11,10 @@
 }
 
 .checkboxField {
-    composes: dflex alignFstart from '~@zohodesk/components/lib/common/common.module.css';
+    composes: dInflex alignFstart from '~@zohodesk/components/es/common/common.module.css';
+    max-width: 100% ;
     gap: var(--zd_size8) 
 }
-.checkboxWrapper {
-    margin-top: var(--zd_size3) 
-}
 
 .cursor_pointer {
     cursor: pointer
@@ -34,4 +32,31 @@
 
 [dir=rtl] .footer {
     padding-left: var(--zd_size32) 
+}
+
+/* Sections layout */
+
+.sectionsWrapper {
+    padding-bottom: var(--zd_size8) 
+}
+
+.sectionsLayout, .sectionsTwoLayout {
+    margin: 0 auto 
+}
+
+.sectionsLayout {
+    max-width: var(--local-form-layout-max-width, var(--zd_size1080))
+}
+
+.sectionsTwoLayout {
+    column-gap: var(--zd_size8) ;
+    max-width: var(--local-form-layout-max-width, var(--zd_size1210))
+}
+
+.rightPanel {
+    height: var(--local-form-right-panel-height, 100%);
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0 ;
+    padding: var(--zd_size8) 0 
 }

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

@@ -0,0 +1,27 @@
+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";
+export default function Footer(_ref) {
+  let {
+    hasFooter,
+    footerLeftActions,
+    footerRightActions
+  } = _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, {
+    testId: "formFooter_leftActions",
+    actions: footerLeftActions,
+    gap: ActionViewGap.LARGE
+  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+    testId: "formFooter_rightActions",
+    actions: footerRightActions,
+    gap: ActionViewGap.LARGE
+  })));
+}

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

@@ -0,0 +1,24 @@
+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";
+export default function Header(_ref) {
+  let {
+    hasHeader,
+    headerLeftActions,
+    headerRightActions
+  } = _ref;
+  if (!hasHeader) return null;
+  return /*#__PURE__*/React.createElement(FormHeader, {
+    customId: "formHeader",
+    testId: "formHeader",
+    $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: headerLeftActions,
+      gap: ActionViewGap.MEDIUM
+    }) : null,
+    $render_rightElement: headerRightActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: headerRightActions,
+      gap: ActionViewGap.MEDIUM
+    }) : null
+  });
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import MiddleContainer from '@zohodesk-private/desk-components/es/setup/SetupContent/SetupContent';
+import SectionStencil from '@zohodesk-private/desk-components/es/form/SectionStencil/SectionStencil';
+import SectionsLayout from "./SectionsLayout";
+import Sections from "./Sections";
+export default function MiddleSection(_ref) {
+  let {
+    sections,
+    isLoading,
+    rightPanel
+  } = _ref;
+  return /*#__PURE__*/React.createElement(MiddleContainer, {
+    $flag_padding: true,
+    $flag_greyBg: true,
+    customId: "formContent",
+    testId: "formContent"
+  }, isLoading ? /*#__PURE__*/React.createElement(SectionStencil, {
+    fieldSizes: ['half', 'half', 'half', 'half', 'full']
+  }) : /*#__PURE__*/React.createElement(SectionsLayout, {
+    rightPanel: rightPanel
+  }, /*#__PURE__*/React.createElement(Sections, {
+    sections: sections
+  })));
+}

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

@@ -1,10 +1,15 @@
 import React from 'react';
 import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper'; // @ts-ignore
+
+import style from "../css/Form.module.css";
 export default function Sections(_ref) {
   let {
     sections
   } = _ref;
-  return sections.map(section => {
+  return /*#__PURE__*/React.createElement(SectionsWrapper, {
+    $ui_className: style.sectionsWrapper
+  }, sections.map(section => {
     const {
       id,
       name,
@@ -28,5 +33,5 @@ export default function Sections(_ref) {
       isCollapsed: isCollapsed,
       additionalDetails: additionalDetails
     });
-  });
+  }));
 }

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import SectionsWithRightPanelLayout from "./SectionsWithRightPanelLayout"; // @ts-ignore
+
+import style from "../css/Form.module.css";
+export default function SectionsLayout(_ref) {
+  let {
+    rightPanel,
+    children
+  } = _ref;
+
+  if (!!rightPanel.componentName) {
+    return /*#__PURE__*/React.createElement(SectionsWithRightPanelLayout, {
+      rightPanel: rightPanel
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.sectionsLayout
+  }, children);
+}

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

@@ -0,0 +1,41 @@
+import React, { useRef, useCallback } from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import useResizeObserver from '@zohodesk/hooks/es/utils/useResizeObserver';
+import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry"; // @ts-ignore
+
+import style from "../css/Form.module.css";
+export default function SectionsWithRightPanelLayout(_ref) {
+  let {
+    rightPanel,
+    children
+  } = _ref;
+  const {
+    componentName,
+    properties
+  } = rightPanel;
+  const RightPanelComponent = ComponentRegistry.get(componentName);
+  const containerRef = useRef(null);
+  updateRightPanelHeight(containerRef);
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: containerRef,
+    $ui_displayMode: "flex",
+    $ui_className: style.sectionsTwoLayout
+  }, /*#__PURE__*/React.createElement(Flex, {
+    $flag_flexible: true
+  }, children), /*#__PURE__*/React.createElement(Flex, {
+    $flag_shrink: false,
+    $ui_className: style.rightPanel
+  }, /*#__PURE__*/React.createElement(RightPanelComponent, properties)));
+}
+
+function updateRightPanelHeight(ref) {
+  const getElement = useCallback(() => ref.current.parentElement, [ref]);
+  const callback = useCallback(entry => {
+    entry.target.style.setProperty('--local-form-right-panel-height', `${entry.target.clientHeight}px`);
+  }, []);
+  useResizeObserver({
+    getElement,
+    callback,
+    isObserve: true
+  });
+}

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

@@ -1,14 +1,15 @@
 import { createCustomComponent } from "../../../../../../custom-component";
 import CheckboxProperties from "../../../../../../../cc/fields/boolean/Properties";
 import CheckboxView from "./CheckboxView";
-import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 let Checkbox = createCustomComponent({
   name: 'FormCheckboxField',
   View: CheckboxView,
-  transformState: TransformState,
   properties: CheckboxProperties,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: []
+  behaviours: [FocusFieldBehaviourFactory.create({
+    selector: '[role="checkbox"]'
+  })]
 });
 export default Checkbox;