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

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

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

package/es/library/dot/components/form-fields/decimal/frameworks/ui/DecimalView.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";
 
@@ -14,22 +13,29 @@ function DecimalView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_decimal",
+    required,
+    uiConfig,
+    labelActions,
+    actions
+  } = state.properties;
+  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_decimal",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function DecimalView(_ref, ref) {
     value: value,
     required: required,
     disabled: disabled,
-    readonly: readonly
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    readonly: readonly,
+    actions: actions
+  })));
 }
 
 export default DecimalView;

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

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
-import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox"; // @ts-ignore
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -14,22 +13,29 @@ function EmailView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     disabled,
     readonly,
     errorMessage,
-    required
+    required,
+    uiConfig,
+    labelActions,
+    actions
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_email",
+  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_email",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function EmailView(_ref, ref) {
     value: value,
     disabled: disabled,
     readonly: readonly,
-    required: required
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    required: required,
+    actions: actions
+  })));
 }
 
 export default EmailView;

package/es/library/dot/components/form-fields/field/FieldItem.js

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import ErrorMessage from '@zohodesk/dot/es/form/fields/ValidationMessage/ValidationMessage';
+import Label from "../../../legacy-to-new-arch/label/frameworks/ui/Label"; // @ts-ignore
+
+import style from "./css/FieldItem.module.css";
+const FieldItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    id,
+    label,
+    labelActions,
+    required,
+    size,
+    breakRow,
+    errorMessage,
+    testId,
+    children
+  } = props;
+  const isLargeSize = size === 'large';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-test-id": testId,
+    className: `${style.fieldItem} ${isLargeSize || breakRow ? style.largeSize : ''}`
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: labelActions,
+    isMandatory: required
+  }), !isLargeSize && breakRow ? /*#__PURE__*/React.createElement("div", {
+    className: style.breakRow
+  }, children) : children, errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+});
+export default FieldItem;

package/es/library/dot/components/form-fields/field/css/FieldItem.module.css

@@ -0,0 +1,13 @@
+.fieldItem {
+    position: relative;
+    min-width: 0 ;
+    min-height: 0 
+}
+
+.largeSize {
+    grid-column: 1 / -1
+}
+
+.breakRow {
+    max-width: var(--local_field_half_size)
+}

package/es/library/dot/components/form-fields/index.js

@@ -12,4 +12,5 @@ export { default as Number } from "./number/frameworks/ui/Number";
 export { default as Decimal } from "./decimal/frameworks/ui/Decimal";
 export { default as Date } from "./date/frameworks/ui/Date";
 export { default as DateTime } from "./datetime/frameworks/ui/DateTime";
-export { default as Checkbox } from "./checkbox/frameworks/ui/Checkbox";
+export { default as Checkbox } from "./checkbox/frameworks/ui/Checkbox";
+export { default as LookUp } from "./lookup/frameworks/ui/Lookup";

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

@@ -0,0 +1,70 @@
+import { TextBoxConstants } from "../../../../../../../cc/textbox";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextBoxConstants.TEXTBOX_FOCUSED]: this.handleTextBoxFocused,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleTextBoxBlurred,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleTextBoxChanged
+    };
+  }
+
+  static handleTextBoxFocused(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleTextBoxBlurred(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleTextBoxChanged(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,13 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import LookupFieldProperties from "../../../../../../../cc/fields/text/Properties";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
+import LookupView from "./LookupView";
+import EventHandlersFactory from "./EventHandlerFactory";
+let Lookup = createCustomComponent({
+  name: 'FormLookUpField',
+  View: LookupView,
+  properties: LookupFieldProperties,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: [FocusFieldBehaviourFactory.create()]
+});
+export default Lookup;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function TextBoxView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    errorMessage,
+    disabled,
+    readonly,
+    required,
+    uiConfig,
+    labelActions,
+    actions
+  } = state.properties;
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
+    ref: ref,
+    id: id,
+    label: label,
+    labelActions: labelActions,
+    required: required,
+    errorMessage: errorMessage,
+    testId: 'smart_form_field_lookup',
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly,
+    actions: actions
+  })));
+}
+
+export default TextBoxView;

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

@@ -1,14 +1,13 @@
 import { createCustomComponent } from "../../../../../../custom-component";
 import { MultiSelectFieldProperties } from "../../../../../../../cc/fields";
 import MultiSelectView from "./MultiSelectView";
-import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlerFactory from "./EventHandlerFactory";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 const MultiSelect = createCustomComponent({
   name: 'MultiSelectField',
   View: MultiSelectView,
-  transformState: TransformState,
   properties: MultiSelectFieldProperties,
   eventHandlers: EventHandlerFactory.create(),
-  behaviours: []
+  behaviours: [FocusFieldBehaviourFactory.create()]
 });
 export default MultiSelect;

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import MultiSelectConstants from "../../../../../../../cc/multi-select/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 MultiSelect from "../../../../../legacy-to-new-arch/multi-select/frameworks/ui/MultiSelect"; // @ts-ignore
+import MultiSelect from "../../../../../legacy-to-new-arch/multi-select/frameworks/ui/MultiSelect";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -24,18 +23,25 @@ function MultiSelectView(_ref, ref) {
     required,
     disabled,
     readonly,
-    actions
+    labelActions,
+    actions,
+    uiConfig
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_multiselect",
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
     ref: ref,
-    className: style.fieldWrapper
-  }, /*#__PURE__*/React.createElement(Label, {
-    for: id,
+    id: id,
     label: label,
-    isMandatory: required,
-    actions: actions
-  }), /*#__PURE__*/React.createElement(FieldController, {
+    labelActions: labelActions,
+    required: required,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_multiselect",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement(FieldController, {
     $ui_className: style.multiSelectField,
     $event_onFocus: () => dispatch({
       type: MultiSelectConstants.MULTISELECT_FOCUSED
@@ -49,12 +55,9 @@ function MultiSelectView(_ref, ref) {
     id: id,
     required: required,
     disabled: disabled,
-    readonly: readonly
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    readonly: readonly,
+    actions: actions
+  })));
 }
 
 export default MultiSelectView;

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

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

package/es/library/dot/components/form-fields/number/frameworks/ui/NumberView.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";
 
@@ -14,22 +13,29 @@ function NumberView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_number",
+    required,
+    uiConfig,
+    labelActions,
+    actions
+  } = state.properties;
+  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_number",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function NumberView(_ref, ref) {
     value: value,
     disabled: disabled,
     readonly: readonly,
-    required: required
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    required: required,
+    actions: actions
+  })));
 }
 
 export default NumberView;

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

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

package/es/library/dot/components/form-fields/percentage/frameworks/ui/PercentageView.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";
 
@@ -14,22 +13,29 @@ function PercentageView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_percentage",
+    required,
+    uiConfig,
+    labelActions,
+    actions
+  } = state.properties;
+  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_percentage",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function PercentageView(_ref, ref) {
     value: value,
     disabled: disabled,
     readonly: readonly,
-    required: required
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+    required: required,
+    actions: actions
+  })));
 }
 
 export default PercentageView;

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

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