@zohodesk/library-platform 1.1.1 → 1.1.2-exp.0

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

@@ -0,0 +1,31 @@
+export function TransformState(state) {
+  const {
+    ePHI,
+    tooltip
+  } = state.properties;
+  let actions = [];
+
+  if (tooltip) {
+    actions.push({
+      type: 'InfoIcon',
+      eventMappings: [],
+      properties: {
+        tooltip
+      }
+    });
+  }
+
+  if (ePHI) {
+    actions.push({
+      type: 'EPHITag',
+      properties: {},
+      eventMappings: []
+    });
+  }
+
+  return { ...state,
+    viewModel: { ...state.properties,
+      actions
+    }
+  };
+}

package/es/library/dot/components/form-fields/url/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.handleFieldFocus,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleFieldBlur,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleFieldChange
+    };
+  }
+
+  static handleFieldFocus(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldBlur(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleFieldChange(_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/url/frameworks/ui/Url.js

@@ -0,0 +1,14 @@
+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";
+let Url = createCustomComponent({
+  name: 'FormUrlField',
+  View: UrlView,
+  transformState: TransformState,
+  properties: UrlProperties,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default Url;

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

@@ -0,0 +1,47 @@
+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 style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function UrlView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    actions,
+    errorMessage,
+    disabled,
+    readonly,
+    required
+  } = state.viewModel;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.fieldWrapper
+  }, /*#__PURE__*/React.createElement(Label, {
+    for: id,
+    label: label,
+    actions: actions,
+    isMandatory: required
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    disabled: disabled,
+    readonly: readonly,
+    required: required
+  })), errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+    text: errorMessage,
+    htmlFor: id,
+    type: "secondary"
+  }) : null);
+}
+
+export default UrlView;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Url from "../Url";
+import { testEPHIFieldVisibility, testCommonFieldAttributes, testRequiredTextKindFieldAttributes, testDisabledTextKindFieldAttributes, testReadOnlyTextKindFieldAttributes, testTextKindFieldValueChange } from "../../../../field/__test__/common.js";
+describe('Url Field Component', () => {
+  it('should render the Url component', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(Url, null));
+    const input = getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  it('should display placeholder text', () => {
+    const placeholderText = 'Enter url here';
+    const {
+      getByPlaceholderText
+    } = render( /*#__PURE__*/React.createElement(Url, {
+      placeholder: placeholderText
+    }));
+    const input = getByPlaceholderText(placeholderText);
+    expect(input).toBeInTheDocument();
+  });
+  testCommonFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testRequiredTextKindFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testDisabledTextKindFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testReadOnlyTextKindFieldAttributes(Url, {
+    id: 'url-field'
+  });
+  testEPHIFieldVisibility(Url, {
+    id: 'url-field'
+  });
+  testTextKindFieldValueChange(Url, {
+    id: 'url-field',
+    value: ''
+  }, 'abc123.com');
+});

package/es/library/dot/components/section/adapters/presenter/TransFormState.js

@@ -0,0 +1,26 @@
+/* eslint-disable @zohodesk/architecturerules/return-void */
+export default function TransFormState(state) {
+  const {
+    fields
+  } = state.properties;
+
+  if (Array.isArray(fields) === false) {
+    return state;
+  }
+
+  const slotContract = fields.filter(field => field.isVisible).map(field => {
+    const {
+      type,
+      ...properties
+    } = field;
+    return {
+      type,
+      properties
+    };
+  });
+  return { ...state,
+    properties: { ...state.properties,
+      fields: slotContract
+    }
+  };
+}

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

@@ -0,0 +1,60 @@
+import SectionConstants from "../../../../../../cc/section/Constants";
+import FieldConstants from "../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [FieldConstants.FIELD_BLURRED]: this.handleFieldBlurred,
+      [FieldConstants.FIELD_CHANGED]: this.handleFieldChanged
+    };
+  }
+
+  static handleFieldBlurred(_ref) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref;
+    const {
+      id
+    } = state.properties;
+    const {
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: SectionConstants.SECTION_FIELD_BLURRED,
+      payload: {
+        id,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldChanged(_ref2) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      id
+    } = state.properties;
+    const {
+      fieldName,
+      value
+    } = action.payload;
+    dispatch({
+      type: SectionConstants.SECTION_FIELD_CHANGED,
+      payload: {
+        id,
+        fieldName,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,15 @@
+/* eslint-disable @zohodesk/architecturerules/define-property-schema */
+import { createCustomComponent } from "../../../../../custom-component";
+import { SectionProperties } from "../../../../../../cc/section";
+import SectionView from "./SectionView";
+import TransFormState from "../../adapters/presenter/TransFormState";
+import EventHandlersFactory from "./EventHandlerFactory";
+let WrapSection = createCustomComponent({
+  name: 'Section',
+  View: SectionView,
+  properties: SectionProperties,
+  transformState: TransFormState,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default WrapSection;

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

@@ -0,0 +1,51 @@
+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);
+
+function SectionView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    title,
+    description,
+    fields
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Section, {
+    $i18n_heading: title,
+    $i18n_description: description,
+    testId: id,
+    customId: id,
+    $tagAttributes_container: {
+      ref
+    }
+  }, /*#__PURE__*/React.createElement(FieldsLayout, {
+    $flag_topSpace: !!title || !!description
+  }, ConvertSlotToComponent(fields)));
+}
+
+export default SectionView;

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

@@ -0,0 +1,76 @@
+/* eslint-disable*/
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import WrapSection from "../Section";
+beforeEach(() => {
+  cleanup();
+});
+describe('Section Component', () => {
+  it('should render section', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(WrapSection, null));
+    expect(getByRole('region')).toBeInTheDocument();
+  });
+  it('should render section with valid title', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      title: 'User Information'
+    }));
+    expect(getByRole('heading')).toHaveTextContent('User Information');
+  });
+  it('should throw error for title longer than 255 characters', () => {
+    const longTitle = 'a'.repeat(256);
+    expect(() => render( /*#__PURE__*/React.createElement(WrapSection, {
+      title: longTitle
+    }))).toThrow();
+  });
+  it('should throw error for title with special characters', () => {
+    expect(() => render( /*#__PURE__*/React.createElement(WrapSection, {
+      title: 'User@Info!'
+    }))).toThrow();
+  });
+  it('should render section with no title', () => {
+    const {
+      queryByRole
+    } = render( /*#__PURE__*/React.createElement(WrapSection, null));
+    expect(queryByRole('heading')).toBeNull();
+  });
+  it('should render section with empty description', () => {
+    const {
+      queryByTestId
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      id: "custom_section",
+      description: ""
+    }));
+    expect(queryByTestId('custom_section_description')).toBeNull();
+  });
+  it('should render section with valid description', () => {
+    const {
+      getByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      id: "custom_section",
+      description: 'This section includes fields for user details.',
+      isVisible: true
+    }));
+    expect(getByText('This section includes fields for user details.')).toBeInTheDocument();
+    expect(getByTestId('custom_section_description')).toHaveTextContent('This section includes fields for user details.');
+  });
+  it('should render section with large description', () => {
+    const largeDescription = 'a'.repeat(10000);
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      description: largeDescription,
+      isVisible: true
+    }));
+    expect(getByText(largeDescription)).toBeInTheDocument();
+  }); // TODO: Curently, component without ref not support. So, It will be handled by parent component.
+  // it('should not render hidden section', () => {
+  //   const { queryByRole } = render(<WrapSection title={'Payment Information'} isVisible={false} />);
+  //   expect(queryByRole('region')).not.toBeInTheDocument();
+  // });
+});

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowClickController.js

@@ -0,0 +1,36 @@
+import SmartTableConstants from "../../../../../../cc/table-connected/constants/Events";
+import AbstractController from "./AbstractController";
+
+class KeyboardRowClickController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      dispatch,
+      action
+    } = event;
+    const {
+      event: keyboardEvent
+    } = action.payload;
+    const {
+      focussedRow,
+      data
+    } = state.properties || {};
+    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+
+    if (!record) {
+      return;
+    }
+
+    let id = record.id;
+    dispatch({
+      type: SmartTableConstants.SMART_TABLE_ROW_ACTION_TRIGGERED,
+      payload: {
+        id,
+        event: keyboardEvent
+      }
+    });
+  }
+
+}
+
+export default KeyboardRowClickController;

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowSelectController.js

@@ -0,0 +1,31 @@
+import { LIST_SELECTION_TOGGLE_ITEMS } from "../../../../../../bc/list-selection/Constants";
+import AbstractController from "./AbstractController";
+
+class KeyboardRowSelectController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      dispatch
+    } = event;
+    const {
+      focussedRow,
+      data
+    } = state.properties || {};
+    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+
+    if (!record) {
+      return;
+    }
+
+    let id = record.id;
+    dispatch({
+      type: LIST_SELECTION_TOGGLE_ITEMS,
+      payload: {
+        selected: [id]
+      }
+    });
+  }
+
+}
+
+export default KeyboardRowSelectController;

package/es/library/dot/components/table-list/adapters/controllers/index.js

@@ -4,4 +4,6 @@ export { default as ScrollController } from "./ScrollController";
 export { default as SortByController } from "./SortByController";
 export { default as SortedController } from "./SortedController";
 export { default as FieldChangeController } from "./FieldChangeController";
-export { default as FieldClickController } from "./FieldClickController";
+export { default as FieldClickController } from "./FieldClickController";
+export { default as KeyboardRowSelectController } from "./KeyboardRowSelectController";
+export { default as KeyboardRowClickController } from "./KeyboardRowClickController";

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -1,17 +1,14 @@
 class TableTranslator {
   static translate(state) {
-    var _state;
-
     const {
       data,
       selectionConfig,
-      selection
+      selection,
+      sortBy,
+      focussedRow
     } = state.properties;
-    const {
-      sortBy
-    } = (_state = state) === null || _state === void 0 ? void 0 : _state.behaviours;
     const headers = TableTranslator.translateHeaders(data.headers, sortBy);
-    const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig);
+    const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig, focussedRow);
     state = { ...state,
       properties: { ...state.properties,
         data: { ...data,
@@ -25,21 +22,21 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.id) === header.id ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
       return { ...header,
-        sortOrder,
-        sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+        sortOrder
       };
     });
   }
 
-  static translateRows(rows, selection, selectionConfig) {
+  static translateRows(rows, selection, selectionConfig, focussedRow) {
     const {
       selected,
       hasAllSelected
     } = selection;
     return rows.map((row, index) => {
       return { ...row,
+        isFocussed: focussedRow === index,
         isSelected: selected.includes(row.id),
         isSelectable: selected.includes(row.id) || !hasAllSelected,
         selectionTooltip: this.getSelectionTooltip(row.id, index, selected, hasAllSelected, selectionConfig)
@@ -48,7 +45,7 @@ class TableTranslator {
   }
 
   static getSelectionTooltip(id, index, selected, hasAllSelected, selectionConfig) {
-    return `Record ${index + 1}`;
+    // return `Record ${index + 1}`;
     return !selected.includes(id) && hasAllSelected ? selectionConfig.limitExceedAlertMessage : `Record ${index + 1}`;
   }
 

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

@@ -0,0 +1,9 @@
+import { useRef, useCallback } from 'react';
+export function useLatestCallBack(callback) {
+  const funcRef = useRef(callback); // Doubt: Simply storing the callback in ref, will it be optimized or below is more suitable ?
+
+  funcRef.current = callback;
+  return useCallback(function () {
+    return funcRef.current(...arguments);
+  }, []);
+}

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

@@ -0,0 +1,49 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { useLatestCallBack } from "./useLatestCallBack";
+export function useMouseResizable(_ref) {
+  let {
+    onDragStart,
+    onDrag,
+    onDragEnd
+  } = _ref;
+  const elementRef = useRef();
+  const startResize = useLatestCallBack(mouseEvent => {
+    addEventListenersForMoveAndEnd();
+    onDragStart && onDragStart(mouseEvent);
+  });
+  const handleResize = useLatestCallBack(mouseEvent => {
+    onDrag && onDrag(mouseEvent);
+  });
+  const stopResize = useLatestCallBack(mouseEvent => {
+    removeEventListenersForMoveAndEnd();
+    onDragEnd && onDragEnd(mouseEvent);
+  });
+
+  function addEventListenersForMoveAndEnd() {
+    document.body.addEventListener('mousemove', handleResize);
+    document.body.addEventListener('mouseup', stopResize);
+    document.body.addEventListener('mouseleave', stopResize);
+  }
+
+  function removeEventListenersForMoveAndEnd() {
+    document.body.removeEventListener('mousemove', handleResize);
+    document.body.removeEventListener('mouseup', stopResize);
+    document.body.removeEventListener('mouseleave', stopResize);
+  }
+
+  const setDraggableRef = useCallback(element => {
+    if (elementRef.current === element) {
+      return;
+    }
+
+    elementRef.current && elementRef.current.removeEventListener('mousedown', startResize);
+    element && element.addEventListener('mousedown', startResize);
+    elementRef.current = element;
+  }, []); // useEffect(() => () => removeEventListenersForMoveAndEnd(), []);
+
+  useEffect(() => removeEventListenersForMoveAndEnd, []);
+  return {
+    ref: setDraggableRef,
+    elementRef
+  };
+}

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

@@ -1,18 +1,19 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, SortedController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, KeyboardRowSelectController, KeyboardRowClickController } from "../../adapters/controllers";
 import TableRowConstants from "../../../../../../cc/table-list/row/Constants";
-import { SORTBY_SORTED } from "../../../../../../bc/sort-by/Constants";
 import RowClickController from "../../adapters/controllers/RowClickController";
+import { SMART_TABLE_ACTION_TRIGGERED, SMART_TABLE_SELECTION_TOGGLED } from "../../../../../../cc/table-connected/constants/Events";
 
 class EventHandlersFactory {
   static create() {
     return {
+      [SMART_TABLE_SELECTION_TOGGLED]: new KeyboardRowSelectController().handle,
+      [SMART_TABLE_ACTION_TRIGGERED]: new KeyboardRowClickController().handle,
       [TableRowConstants.TABLE_ROW_CLICKED]: new RowClickController().handle,
       [TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION]: new SelectItemController().handle,
       [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: new SelectAllController().handle,
       [TableListConstants.TABLE_LIST_SCROLLED]: new ScrollController().handle,
       [TableListConstants.TABLE_LIST_SORTED]: new SortByController().handle,
-      [SORTBY_SORTED]: new SortedController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: new FieldChangeController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: new FieldClickController().handle
     };