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

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;

package/es/library/dot/components/form-fields/phone/frameworks/ui/PhoneView.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 PhoneView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_phone",
+    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_phone",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function PhoneView(_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 PhoneView;

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

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

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import SelectConstants from "../../../../../../../cc/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 Select from "../../../../../legacy-to-new-arch/select/frameworks/ui/Select"; // @ts-ignore
+import Select from "../../../../../legacy-to-new-arch/select/frameworks/ui/Select";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
 
 import style from "../../../../form/frameworks/ui/css/Form.module.css";
 
@@ -24,18 +23,25 @@ function PickListView(_ref, ref) {
     required,
     disabled,
     readonly,
-    actions
+    labelActions,
+    actions,
+    uiConfig
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_picklist",
+  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_picklist",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement(FieldController, {
     $ui_className: style.field,
     $event_onFocus: () => dispatch({
       type: SelectConstants.SELECT_FOCUSED
@@ -49,12 +55,9 @@ function PickListView(_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 PickListView;

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

@@ -1,14 +1,15 @@
 import { createCustomComponent } from "../../../../../../custom-component";
 import TextAreaProperties from "../../../../../../../cc/fields/text/Properties";
 import TextAreaView from "./TextAreaView";
-import { TransformState } from "../../adapters/presenter/TransformState";
 import EventHandlerFactory from "./EventHandlerFactory";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
 const TextArea = createCustomComponent({
   name: 'FormTextAreaField',
   View: TextAreaView,
-  transformState: TransformState,
   properties: TextAreaProperties,
   eventHandlers: EventHandlerFactory.create(),
-  behaviours: []
+  behaviours: [FocusFieldBehaviourFactory.create({
+    selector: 'textarea'
+  })]
 });
 export default TextArea;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
 import TextArea from "../../../../../legacy-to-new-arch/text-area/frameworks/ui/TextArea";
-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 TextAreaView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
+    required,
+    uiConfig,
+    labelActions,
+    actions
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_textarea",
+  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_textarea",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextArea, {
     id: id,
@@ -37,12 +43,9 @@ function TextAreaView(_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 TextAreaView;

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

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

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.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 TextBoxView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
+    required,
+    uiConfig,
+    labelActions,
+    actions
   } = state.properties;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_textbox",
+  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_textbox",
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function TextBoxView(_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 TextBoxView;

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

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

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.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 UrlView(_ref, ref) {
     label,
     value,
     placeholder,
-    actions,
+    uiConfig,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_url",
+    required,
+    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,
+    size: size,
+    breakRow: breakRow,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_url"
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
     id: id,
@@ -37,12 +43,9 @@ function UrlView(_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 UrlView;

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

@@ -24,7 +24,7 @@ function SectionView(_ref, ref) {
     }
   }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, fields.filter(field => field.isVisible).map((field, index) => renderField(field, index))));
+  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))));
 }
 
 export default SectionView;

package/es/library/dot/components/table-list/frameworks/ui/sub-components/ErrorState.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ErrorOopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
-// import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
-// import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+import ErrorOopsSomethingMiss from '@zohodesk/dot/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/es/version2/errorstate/UrlNotFound/UrlNotFound';
+// import UnableToProcess from '@zohodesk/dot/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+// import Inconvenience from '@zohodesk/dot/es/version2/errorstate/Inconvenience/Inconvenience';
 
 /* @ts-ignore */
 

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -26,7 +26,7 @@ export default function ActionIconView(_ref, ref) {
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
-    hasPadding: hasPadding,
+    $flag_hasPadding: hasPadding,
     customStyle: hoverVariant === 'default' ? {
       icon: style.cursor_default
     } : undefined,

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/DateView.js

@@ -1,6 +1,9 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import DateConstants from "../../../../../../cc/date/Constants";
+import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator"; // @ts-ignore
+
+import style from "./css/DateView.module.css";
 
 function DateView(_ref, ref) {
   let {
@@ -18,8 +21,19 @@ function DateView(_ref, ref) {
     readonly,
     pattern,
     isTimeInculded,
-    timeZone
+    timeZone,
+    actions
   } = state.properties;
+
+  const renderRightFieldActions = () => {
+    if (!(actions !== null && actions !== void 0 && actions.length)) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions
+    }));
+  };
+
   return /*#__PURE__*/React.createElement(DateWidget, {
     onFocus: () => dispatch({
       type: DateConstants.DATE_FOCUSED
@@ -48,6 +62,9 @@ function DateView(_ref, ref) {
         TextBoxProps: {
           required
         }
+      },
+      TextBoxIconProps: {
+        renderRightPlaceholderNode: renderRightFieldActions()
       }
     }
   });

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/css/DateView.module.css

@@ -0,0 +1,3 @@
+.actionContainer {
+    margin-top: var(--zd_size2) ;
+}