@zohodesk/library-platform 1.1.2 → 1.1.3-exp.2

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import TableRow from '@zohodesk-private/desk-components/es/table/TableList/TableList';
+import DragHandle from '@zohodesk-private/desk-components/es/DragHandle/DragHandle';
 import RowSelection from "./RowSelection";
 import Columns from "./Columns";
 import RowActions from "./RowActions";
 import { createCustomComponent } from "../../../../../../../custom-component";
 import { RowEventHandlersFactory } from "./RowEventHandlersFactory";
 import TableRowProperties from "../../../../../../../../cc/table-list/row/Properties";
-import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
+import { SortableHandle } from 'react-sortable-hoc'; // @ts-ignore
 
 import style from "../../css/TableList.module.css";
 
@@ -19,10 +21,15 @@ function RowView(_ref, ref) {
     dispatch
   } = helpers;
   const {
+    isReorderEnabled,
     isSelectionEnabled,
     isSelected,
     isSelectable,
-    selectionTooltip
+    isKeyboardControlsEnabled,
+    isFocussed,
+    selectionTooltip,
+    isDroppable,
+    dropPosition
   } = state.properties;
   const {
     id,
@@ -37,11 +44,14 @@ function RowView(_ref, ref) {
     type,
     actions
   } = rowActionLocation;
-  return /*#__PURE__*/React.createElement(TableRow, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled,
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_active: isSelected,
+    $flag_hasHighlighter: isKeyboardControlsEnabled,
+    $flag_isHighlighted: isFocussed,
     $event_onClick: () => dispatch({
       type: TableRowConstants.TABLE_ROW_CLICKED,
       payload: {
@@ -51,8 +61,14 @@ function RowView(_ref, ref) {
     customStyle: {
       $pointer: style[`rowCursor_${cursor}`]
     }
-  }, renderRowSelection({
+  }, renderReorderer({
+    isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled
+  }), renderRowSelection({
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     id,
     selectionTooltip,
     isSelected,
@@ -66,12 +82,16 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions
-  }));
+  }), isDroppable && /*#__PURE__*/React.createElement("div", {
+    className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
+  })));
 }
 
 function renderRowSelection(_ref2) {
   let {
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     id,
     selectionTooltip,
     isSelected,
@@ -80,6 +100,8 @@ function renderRowSelection(_ref2) {
   } = _ref2;
   return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     id: id,
     tooltip: selectionTooltip,
     selected: isSelected,
@@ -88,24 +110,52 @@ function renderRowSelection(_ref2) {
   });
 }
 
-function renderColumns(_ref3) {
+function renderReorderer(_ref3) {
+  let {
+    isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled
+  } = _ref3;
+  const DragHandler = SortableHandle(_ref4 => {
+    let {
+      isSelectionEnabled,
+      isReorderEnabled,
+      isKeyboardControlsEnabled
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("td", {
+      tabIndex: 0,
+      className: `${style.dragHandleWrapper} ${isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled ? style.paddingRight16 : isKeyboardControlsEnabled ? `${style.offsetLeft8} ${style.paddingLeft0} ${style.paddingRight8}` : `${style.offsetLeft0} ${style.paddingLeft8}`}`
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      customStyle: {
+        container: `${style.dragHandleContainer} `
+      }
+    }));
+  });
+  return isReorderEnabled ? /*#__PURE__*/React.createElement(DragHandler, {
+    isSelectionEnabled: isSelectionEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled
+  }) : null;
+}
+
+function renderColumns(_ref5) {
   let {
     columns,
     isFlexibleColumns
-  } = _ref3;
+  } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
     isFlexibleColumns: isFlexibleColumns
   });
 }
 
-function renderRowActions(_ref4) {
+function renderRowActions(_ref6) {
   let {
     hasActions,
     columnWidth,
     actions,
     type
-  } = _ref4;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
     columnWidth: columnWidth,

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

@@ -3,7 +3,9 @@ import TableData from '@zohodesk-private/desk-components/es/table/TableData/Tabl
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
-import FieldComponent from "../field/FieldComponent";
+import FieldComponent from "../field/FieldComponent"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 export default function RowData(_ref) {
   let {
     field,
@@ -25,7 +27,10 @@ export default function RowData(_ref) {
       $ui_displayMode: 'flex',
       $ui_alignItems: 'center',
       $ui_justifyContent: AlignmentOfFlex[alignment]
-    } : null
+    } : null,
+    customStyle: hasActions ? {
+      tableData: style.fieldWithActions
+    } : undefined
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import TableListSelect from '@zohodesk-private/desk-components/es/table/TableListSelect/TableListSelect';
 import { TableListConstants } from "../../../../../../../../cc/table-list";
+import style from "./../../css/TableList.module.css";
 
 function RowSelection(_ref) {
   let {
     isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
     id,
     tooltip,
     selected,
@@ -16,10 +19,18 @@ function RowSelection(_ref) {
     return null;
   }
 
+  const customPropsContainer = isReorderEnabled && isSelectionEnabled ? {
+    $data_width: 56
+  } : {};
   return /*#__PURE__*/React.createElement(TableListSelect, {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    customStyle: {
+      container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.paddingRight16} ${style.offsetLeft8}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+    },
+    $customProps_container: customPropsContainer,
+    $flag_disabled: !selectable,
     $event_onChange: (_, event) => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
       payload: {

package/es/library/dot/components/table-list/frameworks/utils/reOrder.js

@@ -0,0 +1,76 @@
+function reorderImmutableArray(arr, fromIndex, toIndex) {
+  const start = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+
+  if (start >= 0 && start < arr.length) {
+    const end = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(start, 1);
+    arr.splice(end, 0, item);
+  }
+}
+
+export function reorderArray(arr, fromIndex, toIndex) {
+  const copy = [...arr];
+  reorderImmutableArray(copy, fromIndex, toIndex);
+  return copy;
+}
+export function parseCssNumberWithUnit(value) {
+  if (typeof value !== "string") return null;
+  const regex = /^(-?\d+(\.\d+)?)([a-z%]*)$/i;
+  const match = value.trim().match(regex);
+  if (!match) return null;
+  return {
+    number: parseFloat(match[1]),
+    unit: match[3] || ""
+  };
+}
+export function setTableUserSelect(ref, value) {
+  if (ref.current) {
+    ref.current.style.userSelect = value;
+  }
+}
+export function adjustHelperElementPosition(ref, draggingClass) {
+  if (ref.current) {
+    const TableScrollLeft = ref.current.scrollLeft;
+    const helperElement = ref.current.querySelector(`.${draggingClass}`);
+
+    if (helperElement) {
+      const helperLeft = parseCssNumberWithUnit(helperElement.style.left);
+
+      if (helperLeft && helperLeft.unit === 'px') {
+        helperElement.style.left = `${helperLeft.number + TableScrollLeft}px`;
+      }
+    }
+  }
+}
+export function getDropIndicator(_ref) {
+  let {
+    index,
+    oldIndex,
+    newIndex,
+    rowsLength
+  } = _ref;
+  const isMovingDown = newIndex > oldIndex;
+  let dropIndex, normalizedDropIndex, dropPosition;
+
+  if (isMovingDown) {
+    dropIndex = newIndex < index ? newIndex : newIndex + 1;
+  } else {
+    dropIndex = newIndex <= index ? newIndex - 1 : newIndex;
+  }
+
+  normalizedDropIndex = dropIndex;
+  dropPosition = isMovingDown ? 'downward' : 'upward';
+
+  if (dropIndex < 0) {
+    normalizedDropIndex = 0;
+    dropPosition = 'downward';
+  } else if (dropIndex >= rowsLength) {
+    normalizedDropIndex = rowsLength - 1;
+    dropPosition = 'upward';
+  }
+
+  return {
+    index: normalizedDropIndex,
+    position: dropPosition
+  };
+}

package/es/library/dot/legacy-to-new-arch/table-column-chooser/frameworks/ui/TableColumnChooser.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TableColumnChooserProperties } from "../../../../../../cc/table-column-chooser";
+import TableColumnChooserView from "./TableColumnChooserView";
+const TableColumnChooser = createCustomComponent({
+  name: 'TableColumnChooser',
+  View: TableColumnChooserView,
+  properties: TableColumnChooserProperties,
+  events: [],
+  eventHandlers: {}
+});
+export default TableColumnChooser;

package/es/library/dot/legacy-to-new-arch/table-column-chooser/frameworks/ui/TableColumnChooserView.js

@@ -0,0 +1,79 @@
+/* eslint-disable max-lines-per-function */
+import React from 'react';
+import ColumnChooser from '@zohodesk-private/desk-components/es/ColumnChooser/ColumnChooser';
+import { TableColumnChooserConstants } from "../../../../../../cc/table-column-chooser";
+
+function TableColumnChooserView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    options,
+    tooltip,
+    heading,
+    infoText,
+    hasSearch,
+    searchString,
+    searchPlaceholder
+  } = state.properties;
+  const {
+    emptyMessage,
+    errorMessage,
+    saveLabel,
+    cancelLabel
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(ColumnChooser, {
+    options: options,
+    getRef: ref,
+    tooltip: tooltip,
+    heading: heading,
+    infoText: infoText,
+    emptyMessage: emptyMessage,
+    getHelperContainer: () => document.querySelector('[data-id="table"]'),
+    hasSearch: hasSearch,
+    searchString: searchString,
+    searchPlacholder: searchPlaceholder,
+    onSearch: searchString => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_SEARCH_REQUESTED,
+      payload: {
+        searchString
+      }
+    }),
+    onClearSearch: () => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_SEARCH_REQUESTED,
+      payload: {
+        searchString: ''
+      }
+    }),
+    onOpen: () => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_OPEN_REQUESTED
+    }),
+    onClose: () => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_CLOSE_REQUESTED
+    }),
+    onSelect: data => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_SELECT_REQUESTED,
+      payload: {
+        data
+      }
+    }),
+    onReorder: reOrderedIndex => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_REORDER_REQUESTED,
+      payload: {
+        reOrderedIndex
+      }
+    }),
+    onSave: () => dispatch({
+      type: TableColumnChooserConstants.COLUMN_CHOOSER_SAVE_REQUESTED
+    }),
+    errorMessage: errorMessage,
+    saveLabel: saveLabel,
+    cancelLabel: cancelLabel
+  });
+}
+
+export default TableColumnChooserView;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.js

@@ -54,9 +54,10 @@ function TableColumnFilterView(_ref, ref) {
         searchText
       }
     });
-  }; // For SingleSelectFilter, pass selectedOption (object)
-  // For MultiSelectFilter, pass selectedOptions (array)
+  };
 
+  const isFiltered = isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0; // For SingleSelectFilter, pass selectedOption (object)
+  // For MultiSelectFilter, pass selectedOptions (array)
 
   const commonProps = {
     customProps: {
@@ -72,9 +73,12 @@ function TableColumnFilterView(_ref, ref) {
               }
             },
             customStyle: {
-              container: `${style.container} ${(isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0) ? style.active : ''}`
+              container: `${style.container} ${isFiltered ? style.active : ''}`
             }
-          }
+          },
+          iconButtonProps: isFiltered ? {
+            isActive: true
+          } : undefined
         }
       }
     },

package/es/library/dot/legacy-to-new-arch/table-field-components/lookup-field/frameworks/ui/LookupFieldView.js

@@ -1,19 +1,17 @@
 import React from 'react';
-import Tag from '@zohodesk/components/es/Tag/Tag';
+import Link from "../../../../link/frameworks/ui/Link";
 export function LookupFieldView(_ref, ref) {
   let {
     state
   } = _ref;
   const {
     name,
-    photoURL
+    url
   } = state.properties.value;
-  return /*#__PURE__*/React.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
-    text: name,
-    hasAvatar: true,
-    initial: name,
-    imageURL: photoURL,
-    tooltip: name
+    label: name,
+    variant: "secondary",
+    href: url
   });
 }

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/EventHandlersFactory.js

@@ -6,6 +6,7 @@ import PropertiesChangeUseCase from "../../applications/usecases/PropertiesChang
 import MountController from "../../adapters/controllers/MountController";
 import UnmountController from "../../adapters/controllers/UnmountController";
 import PropertiesChangeController from "../../adapters/controllers/PropertiesChangeController";
+import LifeCycleEvents from "../../../../../../cc/component/LifeCycleEventsEnum";
 export default class EventHandlersFactory {
   static create() {
     const repository = new Repository();
@@ -21,9 +22,9 @@ export default class EventHandlersFactory {
     const unmountController = new UnmountController(destroyUseCase);
     const propertiesChangeController = new PropertiesChangeController(propertiesChangeUseCase);
     return {
-      ['ActionEventMediator#MOUNT']: initializeController.handle,
-      ['ActionEventMediator#UPDATE_PROPERTIES']: propertiesChangeController.handle,
-      ['ActionEventMediator#UNMOUNT']: unmountController.handle
+      [`ActionEventMediator#${LifeCycleEvents.MOUNT}`]: initializeController.handle,
+      [`ActionEventMediator#${LifeCycleEvents.UPDATE_PROPERTIES}`]: propertiesChangeController.handle,
+      [`ActionEventMediator#${LifeCycleEvents.UN_MOUNT}`]: unmountController.handle
     };
   }
 

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.module.css

@@ -1,9 +1,3 @@
-[dir=ltr] .actions {
-    padding-left: var(--zd_size6) 
-}[dir=rtl] .actions {
-    padding-right: var(--zd_size6) 
-}
-
 .gap_small {
     gap: var(--zd_size4) 
 }

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRendererView.js

@@ -17,7 +17,7 @@ function RowActionsRendererView(_ref, ref) {
     ref: ref,
     $ui_displayMode: "inline",
     $ui_alignItems: "center",
-    $ui_className: `${style.actions} ${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
+    $ui_className: `${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
   }, actions.map((action, index) => {
     return /*#__PURE__*/React.createElement(DynamicActionComponent, {
       action: action,

package/es/platform/client-actions/translators/client-actions-translator/index.js

@@ -20,8 +20,11 @@ export default class ClientActionsTranslator {
   }
 
   static transform(actions, context) {
-    const resolvedActions = ActionContextResolver.resolveActions(actions, context);
-    const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, context, action.id));
+    const replacementContext = {
+      "@context": context
+    };
+    const resolvedActions = ActionContextResolver.resolveActions(actions, replacementContext);
+    const evaluatedActions = resolvedActions.filter(action => ConditionResolver.evaluateCondition(action.conditions, replacementContext, action.id));
     const finalTransformedActions = evaluatedActions.map(action => this.transformToActionViewModel(action));
     return finalTransformedActions;
   }

package/es/platform/client-actions/translators/condition-resolver/field-evaluators/GetResolvedContextFieldValue.js

@@ -1,6 +1,7 @@
+import TemplateResolver from "../../../template-resolver";
 export function getResolvedContextFieldValue(context, field) {
-  if (field.includes(".")) {
-    let value = field.split(".").reduce((obj, key) => obj && obj[key], context);
+  if (field.includes('.')) {
+    let value = TemplateResolver.replaceContextVariables(field, context);
     return value;
   }
 

package/es/platform/client-actions/translators/context-resolver/index.js

@@ -45,10 +45,7 @@ export class ActionContextResolver {
   }
 
   static resolveActions(actions, context) {
-    const replacementContext = {
-      "@context": context
-    };
-    return actions ? actions.map(action => this.resolveAction(action, replacementContext)) : [];
+    return actions ? actions.map(action => this.resolveAction(action, context)) : [];
   }
 
 }

package/es/platform/column-chooser/adapters/controllers/AbstractController.js

@@ -0,0 +1,10 @@
+class AbstractController {
+  constructor(service) {
+    this.service = service;
+    this.handle = this.handle.bind(this);
+  } // TODO: Add event type
+
+
+}
+
+export default AbstractController;

package/es/platform/column-chooser/adapters/controllers/ColumnChooserCloseController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+
+class ColumnChooserCloseController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      dispatch
+    } = event;
+    const {
+      columnChooserCloseUseCase
+    } = this.service;
+    columnChooserCloseUseCase.updateDependencies(state, updateState);
+    columnChooserCloseUseCase.execute({
+      dispatch
+    });
+  }
+
+}
+
+export default ColumnChooserCloseController;

package/es/platform/column-chooser/adapters/controllers/ColumnChooserOpenController.js

@@ -0,0 +1,26 @@
+import AbstractController from "./AbstractController";
+
+class ColumnChooserOpenController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      action,
+      updateState
+    } = event;
+    const {
+      order,
+      selectedArray
+    } = action.payload;
+    const {
+      columnChooserOpenUseCase
+    } = this.service;
+    columnChooserOpenUseCase.updateDependencies(state, updateState);
+    columnChooserOpenUseCase.execute({
+      order,
+      selectedArray
+    });
+  }
+
+}
+
+export default ColumnChooserOpenController;

package/es/platform/column-chooser/adapters/controllers/ColumnChooserReorderController.js

@@ -0,0 +1,26 @@
+import AbstractController from "./AbstractController";
+
+class ColumnChooserReorderController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      action,
+      updateState
+    } = event;
+    const {
+      oldIndex: fromIndex,
+      newIndex: toIndex
+    } = action.payload.reOrderedIndex;
+    const {
+      columnChooserReorderUseCase
+    } = this.service;
+    columnChooserReorderUseCase.updateDependencies(state, updateState);
+    columnChooserReorderUseCase.execute({
+      fromIndex,
+      toIndex
+    });
+  }
+
+}
+
+export default ColumnChooserReorderController;

package/es/platform/column-chooser/adapters/controllers/ColumnChooserSaveController.js

@@ -0,0 +1,21 @@
+import AbstractController from "./AbstractController";
+
+class ColumnChooserSaveController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      dispatch
+    } = event;
+    const {
+      columnChooserSaveUseCase
+    } = this.service;
+    columnChooserSaveUseCase.updateDependencies(state, updateState);
+    columnChooserSaveUseCase.execute({
+      dispatch
+    });
+  }
+
+}
+
+export default ColumnChooserSaveController;

package/es/platform/column-chooser/adapters/controllers/ColumnChooserSearchController.js

@@ -0,0 +1,24 @@
+import AbstractController from "./AbstractController";
+
+class ColumnChooserSearchController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      action,
+      updateState
+    } = event;
+    const {
+      searchString: searchText
+    } = action.payload;
+    const {
+      columnChooserSearchUseCase
+    } = this.service;
+    columnChooserSearchUseCase.updateDependencies(state, updateState);
+    columnChooserSearchUseCase.execute({
+      searchText
+    });
+  }
+
+}
+
+export default ColumnChooserSearchController;

package/es/platform/column-chooser/adapters/controllers/ColumnChooserSelectController.js

@@ -0,0 +1,26 @@
+import AbstractController from "./AbstractController";
+
+class ColumnChooserSelectController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      action,
+      updateState
+    } = event;
+    const {
+      id: columnId,
+      isChecked
+    } = action.payload.data;
+    const {
+      columnChooserSelectUseCase
+    } = this.service;
+    columnChooserSelectUseCase.updateDependencies(state, updateState);
+    columnChooserSelectUseCase.execute({
+      columnId,
+      isChecked
+    });
+  }
+
+}
+
+export default ColumnChooserSelectController;