@zohodesk/library-platform 1.1.7 → 1.1.8-exp.1

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/action-location/usecases/interactors/PropertiesChangeUseCase.js

@@ -10,7 +10,7 @@ export default class PropertiesChangeUseCase extends AbstractUseCase {
       currentActions,
       previousActions
     } = input;
-    actionLocation.processActionsChange(currentActions, previousActions);
+    actionLocation.processActionsChange(previousActions, currentActions);
     presenter.updateActionLocation(actionLocation.toObject());
   }
 

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

@@ -34,62 +34,19 @@ function updateFieldValues(_ref) {
   });
 }
 
-const footerLeftActions = [{
-  component: 'Button',
-  properties: {
-    text: 'Submit',
-    palette: 'primaryFilled'
-  },
-  eventMappings: [{
-    payloadValueMapping: {},
-    sourceEvent: "BUTTON#CLICKED",
-    id: "1234567890",
-    targetEvent: "FORM#SUBMIT"
-  }]
-}, {
-  component: 'Button',
-  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,
     isLoading,
     values,
-    errorMessages
+    errorMessages,
+    isHeaderEnabled,
+    isFooterEnabled,
+    headerLeftActions,
+    headerRightActions,
+    footerLeftActions,
+    footerRightActions,
+    rightPanel
   } = state.properties; // const { values, errorMessages } = state.behaviours.form;
 
   const updatedSections = updateFieldValues({
@@ -100,12 +57,15 @@ export function TransformState(state) {
   return { ...state,
     // properties: { ...state.properties, sections: updatedSections }
     viewModel: {
+      isHeaderEnabled,
+      isFooterEnabled,
       sections: updatedSections,
       isLoading,
-      headerLeftActions: headerLeftActions,
-      headerRightActions: headerRightActions,
+      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 Section from "../../../section/frameworks/ui/Section";
 export function registerDefaultComponents() {
   // Registering components in the ComponentRegistry
@@ -22,7 +20,5 @@ 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(DefaultFormSectionUIType, Section);
 }

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

@@ -1,28 +1,23 @@
 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,
-    footerRightActions
+    footerRightActions,
+    isHeaderEnabled,
+    isFooterEnabled
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
     $ui_tagName: "form",
@@ -30,32 +25,19 @@ function FormView(_ref, ref) {
     $ui_direction: "column",
     $flag_fullsize: true,
     ref: ref
-  }, /*#__PURE__*/React.createElement(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
-  }))), /*#__PURE__*/React.createElement(FormAction, {
-    size: "small",
-    paddingLeftSize: "xmedium",
-    paddingRightClass: style.footer
-  }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
-    actions: footerLeftActions,
-    gap: ActionViewGap.LARGE
-  })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
-    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/css/Form.module.css

@@ -11,7 +11,8 @@
 }
 
 .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 {
@@ -34,4 +35,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,42 @@
+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;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import CheckboxConstants from "../../../../../../../cc/checkbox/Constants";
-import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage';
 import FieldController from '@zohodesk-private/desk-components/es/form/FieldController/FieldController';
 import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
-import Checkbox from "../../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox"; // @ts-ignore
+import Checkbox from "../../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -29,17 +29,25 @@ function CheckboxView(_ref2, ref) {
     id,
     label,
     value,
-    actions,
+    uiConfig,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
+    required,
+    labelActions
+  } = state.properties;
+  const {
+    size,
+    breakRow
+  } = uiConfig;
   const isEditable = !disabled && !readonly;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_checkbox",
+  return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
-    className: style.fieldWrapper
+    id: id,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_checkbox",
+    size: size,
+    breakRow: breakRow
   }, /*#__PURE__*/React.createElement(FieldController, {
     $ui_className: `${style.checkboxField} ${cursorStyle({
       disabled,
@@ -67,13 +75,9 @@ function CheckboxView(_ref2, ref) {
   })), /*#__PURE__*/React.createElement(Label, {
     for: id,
     label: label,
-    actions: actions,
+    actions: labelActions,
     isMandatory: required
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+  })));
 }
 
 export default CheckboxView;

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

@@ -1,14 +1,14 @@
 import { createCustomComponent } from "../../../../../../custom-component";
 import { CurrencyFieldProperties } from "../../../../../../../cc/fields";
 import CurrencyView from "./CurrencyView";
-import { TransformState } from "./../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 let PickList = createCustomComponent({
   name: "Currency",
   View: CurrencyView,
-  transformState: TransformState,
   properties: CurrencyFieldProperties,
   events: [],
-  eventHandlers: EventHandlersFactory.create()
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: [FocusFieldBehaviourFactory.create()]
 });
 export default PickList;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
 import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
-import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage'; // @ts-ignore
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -18,18 +17,25 @@ function CurrencyView(_ref, ref) {
     disabled,
     readonly,
     required,
-    actions
+    labelActions,
+    actions,
+    uiConfig
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_currency",
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
-    className: style.fieldWrapper
-  }, /*#__PURE__*/React.createElement(Label, {
-    for: id,
+    id: id,
     label: label,
-    actions: actions,
-    isMandatory: required
-  }), /*#__PURE__*/React.createElement("div", {
+    labelActions: labelActions,
+    required: required,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_currency",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function CurrencyView(_ref, ref) {
     placeholder: placeholder,
     disabled: disabled,
     readonly: readonly,
-    required: required
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    required: required,
+    actions: actions
+  })));
 }
 
 export default CurrencyView;

package/es/library/dot/components/form-fields/date/frameworks/ui/Date.js

@@ -1,14 +1,13 @@
 import { createCustomComponent } from "../../../../../../custom-component";
 import DateProperties from "../../../../../../../cc/fields/date/Properties";
 import DateView from "./DateView";
-import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 let Date = createCustomComponent({
   name: 'FormDateField',
   View: DateView,
-  transformState: TransformState,
   properties: DateProperties,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: []
+  behaviours: [FocusFieldBehaviourFactory.create()]
 });
 export default Date;