@zohodesk/library-platform 1.1.3 → 1.1.6-temp-1

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

@@ -24,7 +24,7 @@ export default class EventHandlersFactory {
     return {
       [ActionLocationConstants.MOUNT]: initializeController.handle,
       [ActionLocationConstants.UPDATE_PROPERTIES]: propertiesChangeController.handle,
-      [ActionLocationConstants.UNMOUNT]: unmountController.handle
+      [ActionLocationConstants.UN_MOUNT]: unmountController.handle
     };
   }
 

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

@@ -34,6 +34,26 @@ 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: []
+}];
 export function TransformState(state) {
   const {
     sections,
@@ -51,7 +71,11 @@ export function TransformState(state) {
     // properties: { ...state.properties, sections: updatedSections }
     viewModel: {
       sections: updatedSections,
-      isLoading
+      isLoading,
+      headerLeftActions: [],
+      headerRightActions: [],
+      footerLeftActions,
+      footerRightActions: []
     }
   };
 }

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

@@ -0,0 +1,28 @@
+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
+  // NOTE: This is a workaround to avoid dynamic imports
+  // NOTE: register these components in place
+  ComponentRegistry.register('TextBox', TextBox);
+  ComponentRegistry.register('TextArea', TextArea);
+  ComponentRegistry.register('PickList', PickList);
+  ComponentRegistry.register('Email', Email);
+  ComponentRegistry.register('Currency', Currency);
+  ComponentRegistry.register('MultiSelect', MultiSelect);
+  ComponentRegistry.register('Url', Url);
+  ComponentRegistry.register('Percentage', Percentage);
+  ComponentRegistry.register('Phone', Phone);
+  ComponentRegistry.register('Number', Number);
+  ComponentRegistry.register('Decimal', Decimal);
+  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/EventHandlerFactory.js

@@ -4,12 +4,13 @@ import FormConstants from "../../../../../../cc/form/Constants";
 class EventHandlersFactory {
   static create() {
     return {
+      [SectionConstants.SECTION_FIELD_FOCUSED]: this.handleSectionFieldFocused,
       [SectionConstants.SECTION_FIELD_BLURRED]: this.handleSectionFieldBlurred,
       [SectionConstants.SECTION_FIELD_CHANGED]: this.handleSectionFieldChanged
     };
   }
 
-  static handleSectionFieldBlurred(_ref) {
+  static handleSectionFieldFocused(_ref) {
     let {
       action,
       dispatch
@@ -19,7 +20,7 @@ class EventHandlersFactory {
       fieldName
     } = action.payload;
     dispatch({
-      type: FormConstants.FORM_FIELD_BLURRED,
+      type: FormConstants.FORM_FIELD_FOCUSED,
       payload: {
         sectionId,
         fieldName
@@ -28,11 +29,30 @@ class EventHandlersFactory {
     });
   }
 
-  static handleSectionFieldChanged(_ref2) {
+  static handleSectionFieldBlurred(_ref2) {
     let {
       action,
       dispatch
     } = _ref2;
+    const {
+      id: sectionId,
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: FormConstants.FORM_FIELD_BLURRED,
+      payload: {
+        sectionId,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleSectionFieldChanged(_ref3) {
+    let {
+      action,
+      dispatch
+    } = _ref3;
     const {
       id: sectionId,
       fieldName,

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

@@ -3,6 +3,8 @@ import FormProperties from "../../../../../../cc/form/Properties";
 import FormView from "./FormView";
 import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlersFactory from "./EventHandlerFactory";
+import { registerDefaultComponents } from "./DefaultComponentRegister";
+registerDefaultComponents();
 const Form = createCustomComponent({
   name: 'CustomForm',
   View: FormView,

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

@@ -1,43 +1,61 @@
 import React from 'react';
-import FormConstants from "../../../../../../cc/form/Constants";
+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";
 
 function FormView(_ref, ref) {
   let {
     state,
     helpers
   } = _ref;
-  const {
-    dispatch
-  } = helpers;
   const {
     sections,
-    isLoading
+    isLoading,
+    headerLeftActions,
+    headerRightActions,
+    footerLeftActions,
+    footerRightActions
   } = state.viewModel;
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    dispatch({
-      type: FormConstants.FORM_SUBMIT
-    });
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_tagName: "form",
+    $ui_displayMode: "flex",
+    $ui_direction: "column",
+    $flag_fullsize: true,
     ref: ref
-  }, isLoading ?
-  /*#__PURE__*/
-  // Check for loading state
-  React.createElement("div", null, "Loading...") // Display loading indicator
-  : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
-    type: "submit",
-    onClick: handleSubmit
-  }, "Submit"), /*#__PURE__*/React.createElement(Sections, {
+  }, /*#__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("button", {
-    type: "submit",
-    onClick: handleSubmit
-  }, "Submit")));
+  }))), /*#__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
+  }))));
 }
 
 export default FormView;

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

@@ -26,4 +26,12 @@
 }
 .cursor_default {
     cursor: default
+}
+
+[dir=ltr] .footer {
+    padding-right: var(--zd_size32) 
+}
+
+[dir=rtl] .footer {
+    padding-left: var(--zd_size32) 
 }

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import DefaultSection from "../../../../section/frameworks/ui/Section";
 import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
 export default function Sections(_ref) {
   let {
@@ -10,23 +9,22 @@ export default function Sections(_ref) {
       id,
       title,
       description,
+      isCollapsed,
       isVisible,
       fields,
-      type
+      type,
+      ...extraProps
     } = section;
+    const Section = ComponentRegistry.get(type);
     if (isVisible === false) return null;
-    let Section = DefaultSection;
-
-    if (type) {
-      Section = ComponentRegistry.get(type);
-    }
-
     return /*#__PURE__*/React.createElement(Section, {
       key: id,
       id: id,
       title: title,
       description: description,
-      fields: fields
+      fields: fields,
+      isCollapsed: isCollapsed,
+      ...extraProps
     });
   });
 }

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

@@ -37,6 +37,7 @@ function CheckboxView(_ref2, ref) {
   } = state.viewModel;
   const isEditable = !disabled && !readonly;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_checkbox",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(FieldController, {

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

@@ -21,6 +21,7 @@ function CurrencyView(_ref, ref) {
     actions
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_currency",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

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

@@ -20,6 +20,7 @@ function DateView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_date",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/datetime/frameworks/ui/DateTimeView.js

@@ -20,6 +20,7 @@ function DateView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_datetime",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/decimal/frameworks/ui/DecimalView.js

@@ -21,6 +21,7 @@ function DecimalView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_decimal",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/email/frameworks/ui/EmailView.js

@@ -21,6 +21,7 @@ function EmailView(_ref, ref) {
     required
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_email",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/multi-select/frameworks/ui/MultiSelectView.js

@@ -27,6 +27,7 @@ function MultiSelectView(_ref, ref) {
     actions
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_multiselect",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/number/frameworks/ui/NumberView.js

@@ -21,6 +21,7 @@ function NumberView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_number",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/percentage/frameworks/ui/PercentageView.js

@@ -21,6 +21,7 @@ function PercentageView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_percentage",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/phone/frameworks/ui/PhoneView.js

@@ -21,6 +21,7 @@ function PhoneView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_phone",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/PickListView.js

@@ -27,6 +27,7 @@ function PickListView(_ref, ref) {
     actions
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_picklist",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextAreaView.js

@@ -21,6 +21,7 @@ function TextAreaView(_ref, ref) {
     required
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_textarea",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.js

@@ -21,6 +21,7 @@ function TextBoxView(_ref, ref) {
     required
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_textbox",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.js

@@ -21,6 +21,7 @@ function UrlView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_url",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

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

@@ -4,12 +4,13 @@ import FieldConstants from "../../../../../../cc/fields/field/Constants";
 class EventHandlersFactory {
   static create() {
     return {
+      [FieldConstants.FIELD_FOCUSED]: this.handleFieldFocused,
       [FieldConstants.FIELD_BLURRED]: this.handleFieldBlurred,
       [FieldConstants.FIELD_CHANGED]: this.handleFieldChanged
     };
   }
 
-  static handleFieldBlurred(_ref) {
+  static handleFieldFocused(_ref) {
     let {
       action,
       state,
@@ -22,7 +23,7 @@ class EventHandlersFactory {
       fieldName
     } = action.payload;
     dispatch({
-      type: SectionConstants.SECTION_FIELD_BLURRED,
+      type: SectionConstants.SECTION_FIELD_FOCUSED,
       payload: {
         id,
         fieldName
@@ -31,7 +32,7 @@ class EventHandlersFactory {
     });
   }
 
-  static handleFieldChanged(_ref2) {
+  static handleFieldBlurred(_ref2) {
     let {
       action,
       state,
@@ -40,6 +41,28 @@ class EventHandlersFactory {
     const {
       id
     } = state.properties;
+    const {
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: SectionConstants.SECTION_FIELD_BLURRED,
+      payload: {
+        id,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldChanged(_ref3) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref3;
+    const {
+      id
+    } = state.properties;
     const {
       fieldName,
       value

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+export function renderField(field, key) {
+  const {
+    type,
+    ...properties
+  } = field;
+  const Component = ComponentRegistry.get(type);
+
+  if (!Component) {
+    console.warn(`Component for type "${type}" not found.`);
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Component, {
+    key: key,
+    ...properties
+  });
+}

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

@@ -2,14 +2,23 @@
 import { createCustomComponent } from "../../../../../custom-component";
 import { SectionProperties } from "../../../../../../cc/section";
 import SectionView from "./SectionView";
-import TransFormState from "../../adapters/presenter/TransFormState";
 import EventHandlersFactory from "./EventHandlerFactory";
+export class FieldSectionEventMappingBehaviourFactory {
+  static create() {
+    return {
+      name: 'fieldSectionEventMapping',
+      setInitialState: () => ({}),
+      properties: {},
+      eventHandlers: EventHandlersFactory.create()
+    };
+  }
+
+}
 let WrapSection = createCustomComponent({
   name: 'Section',
   View: SectionView,
   properties: SectionProperties,
-  transformState: TransFormState,
-  eventHandlers: EventHandlersFactory.create(),
-  behaviours: []
+  eventHandlers: {},
+  behaviours: [FieldSectionEventMappingBehaviourFactory.create()]
 });
 export default WrapSection;

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

@@ -1,29 +1,7 @@
 import React from 'react';
-import ConvertSlotToComponent from "../../../../../slot/frameworks/ui/ConvertSlotToComponent";
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
-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"; // NOTE: This is a workaround to avoid dynamic imports
-// NOTE: register these components in place
-
-ComponentRegistry.register('TextBox', TextBox);
-ComponentRegistry.register('TextArea', TextArea);
-ComponentRegistry.register('PickList', PickList);
-ComponentRegistry.register('Email', Email);
-ComponentRegistry.register('Currency', Currency);
-ComponentRegistry.register('MultiSelect', MultiSelect);
-ComponentRegistry.register('Url', Url);
-ComponentRegistry.register('Percentage', Percentage);
-ComponentRegistry.register('Phone', Phone);
-ComponentRegistry.register('Number', Number);
-ComponentRegistry.register('Decimal', Decimal);
-ComponentRegistry.register('Date', Date);
-ComponentRegistry.register('DateTime', DateTime);
-ComponentRegistry.register('Checkbox', Checkbox);
-ComponentRegistry.register('EPHITag', EPHITag);
-ComponentRegistry.register('InfoIcon', InfoIcon);
+import { renderField } from "./RenderField";
 
 function SectionView(_ref, ref) {
   let {
@@ -31,8 +9,10 @@ function SectionView(_ref, ref) {
   } = _ref;
   const {
     id,
+    name,
     title,
     description,
+    isCollapsed,
     fields
   } = state.properties;
   return /*#__PURE__*/React.createElement(Section, {
@@ -41,11 +21,12 @@ function SectionView(_ref, ref) {
     testId: id,
     customId: id,
     $tagAttributes_container: {
-      ref
+      ref,
+      'data-section-name': name
     }
-  }, /*#__PURE__*/React.createElement(FieldsLayout, {
+  }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, ConvertSlotToComponent(fields)));
+  }, fields.filter(field => field.isVisible).map((field, index) => renderField(field, index))));
 }
 
 export default SectionView;

package/es/library/dot/components/table-list/frameworks/hooks/useDropIndicator.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+export function useDropIndicator() {
+  const [dropIndicator, setDropIndicator] = useState({
+    index: null,
+    position: ''
+  });
+  return [dropIndicator, setDropIndicator];
+}

package/es/library/dot/components/table-list/frameworks/hooks/useRowData.js

@@ -0,0 +1,15 @@
+import { useState, useMemo, useRef } from 'react';
+export function useRowData(rows) {
+  const rowRef = useRef(null);
+  useMemo(() => {
+    rowRef.current = rows;
+  }, [rows]);
+  const [, forceUpdate] = useState(rows);
+
+  function setRowData(rows) {
+    rowRef.current = rows;
+    forceUpdate(rows);
+  }
+
+  return [rowRef.current, setRowData];
+}