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

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,
@@ -56,24 +64,18 @@ function CheckboxView(_ref2, ref) {
         type: CheckboxConstants.CHECKBOX_TOGGLED
       })
     } : undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.checkboxWrapper
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: id,
     checked: value,
     required: required,
     disabled: disabled,
     readonly: readonly
-  })), /*#__PURE__*/React.createElement(Label, {
+  }), /*#__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;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
 import Date from "../../../../../legacy-to-new-arch/date/frameworks/ui/Date";
-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";
 
@@ -13,34 +12,38 @@ function DateView(_ref, ref) {
     id,
     label,
     value,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_date",
+    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,
+    size: size,
+    breakRow: breakRow,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_date"
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(Date, {
     id: id,
     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 DateView;

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

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import Label from "../../../../../legacy-to-new-arch/label/frameworks/ui/Label";
 import Date from "../../../../../legacy-to-new-arch/date/frameworks/ui/Date";
-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";
 
@@ -13,22 +12,29 @@ function DateView(_ref, ref) {
     id,
     label,
     value,
-    actions,
     errorMessage,
     disabled,
     readonly,
-    required
-  } = state.viewModel;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test-id": "smart_form_field_datetime",
+    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,
+    size: size,
+    breakRow: breakRow,
+    errorMessage: errorMessage,
+    testId: "smart_form_field_datetime"
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(Date, {
     id: id,
@@ -36,12 +42,9 @@ function DateView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
+    actions: actions,
     isTimeInculded: true
-  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
-    text: errorMessage,
-    htmlFor: id,
-    type: "secondary"
-  }) : null);
+  })));
 }
 
 export default DateView;

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/__test__/common.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, fireEvent, screen, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -17,9 +19,9 @@ export function testEPHIFieldVisibility(Component, props) {
   it('should display ePHI tag for ePHI-enabled fields', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       ePHI: true
-    }));
+    })));
     const ePHITag = getByText('ePHI');
     expect(ePHITag).toBeInTheDocument();
   });
@@ -38,9 +40,9 @@ export function testCommonFieldAttributes(Component, props) {
   it('should display the correct label', () => {
     const {
       getByLabelText
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       label: "Test Label"
-    }));
+    })));
     const label = getByLabelText('Test Label');
     expect(label).toBeInTheDocument();
   });
@@ -51,9 +53,9 @@ export function testFieldErrorMessage(Component, props) {
   it('should display the correct error message', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       errorMessage: "Error occurred"
-    }));
+    })));
     const errorMessage = getByRole('alert');
     expect(errorMessage).toHaveTextContent('Error occurred');
   });
@@ -65,9 +67,9 @@ export function testFieldTooltip(Component, props) {
     const {
       getByText,
       container
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       tooltip: tooltipText
-    })));
+    }))));
     const infoIcon = container.querySelector(`[data-title="${tooltipText}"]`);
     expect(infoIcon).toBeInTheDocument();
     fireEvent.mouseEnter(infoIcon);
@@ -86,9 +88,9 @@ export function testRequiredTextKindFieldAttributes(Component, props) {
   it('should be required when required prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       required: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toBeRequired();
   });
@@ -97,9 +99,9 @@ export function testDisabledTextKindFieldAttributes(Component, props) {
   it('should be disabled when disabled prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       disabled: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toBeDisabled();
   });
@@ -108,9 +110,9 @@ export function testReadOnlyTextKindFieldAttributes(Component, props) {
   it('should be readonly when readonly prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       readonly: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toHaveAttribute('readonly');
   });
@@ -145,10 +147,10 @@ export function testFieldValueChange(_ref2) {
     const Parent = createCustomComponent({
       name: 'Parent',
       View: (_, ref) => {
-        return /*#__PURE__*/React.createElement(Component, { ...props,
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
           name: "fieldDetails",
           getRef: ref
-        });
+        }));
       },
       properties: {},
       eventHandlers: {

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";