@zohodesk/library-platform 1.0.1 → 1.0.2-exp.1.1

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import Row from "./row/Row";
-const emptyArray = Object.freeze([]);
-const emptyObject = {};
 
 function Rows(_ref) {
   let {
@@ -9,44 +7,44 @@ function Rows(_ref) {
     rows,
     isFlexibleColumns,
     isSelectionEnabled,
-    resizedColumnsWidth,
-    hasRowActions
+    rowCursor,
+    hasRowActions,
+    rowActionsColumnWidth
   } = _ref;
   return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
     key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions)
+    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth)
   }));
 }
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions) {
+function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth) {
   const {
     id,
     columns,
     isSelected,
     isSelectable,
     selectionTooltip,
-    clickAction,
-    rowActions
+    rowActionLocation
   } = row;
   const updatedColumns = getUpdatedColumns(columns, headers);
   return {
     id,
-    columns: updatedColumns || emptyArray,
-    clickAction: clickAction || emptyObject,
-    rowActions: rowActions || emptyArray,
+    columns: updatedColumns,
+    rowActionLocation,
     isSelected,
     isSelectable,
     selectionTooltip,
     isFlexibleColumns,
     isSelectionEnabled,
-    resizedColumnsWidth,
-    hasActions: hasRowActions
+    cursor: rowCursor,
+    hasActions: hasRowActions,
+    rowActionsColumnWidth
   };
 }
 
 function getUpdatedColumns(columns, headers) {
   return columns.map((column, index) => ({
-    size: headers[index].size,
+    width: headers[index].width,
     field: column,
     alignment: headers[index].alignment
   }));

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

@@ -2,12 +2,13 @@ import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
 export default function ActionColumn(_ref) {
   let {
-    hasRowActions
+    hasRowActions,
+    columnWidth
   } = _ref;
 
   if (hasRowActions) {
     return /*#__PURE__*/React.createElement(TableHead, {
-      $ui_size: "medium"
+      $data_width: columnWidth
     }, /*#__PURE__*/React.createElement(React.Fragment, null));
   }
 

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

@@ -1,13 +1,55 @@
 import React from 'react';
 import TableColumnResizer from '@zohodesk-private/desk-components/es/table/TableHead/TableColumnResizer/TableColumnResizer';
+import { useMouseResizable } from "../../../hooks/useMouseResizable";
+import TableListEventConstants from "../../../../../../../../cc/table-list/Constants";
+const {
+  TABLE_LIST_RESIZE_START_REQUESTED,
+  TABLE_LIST_RESIZE_MOVE_REQUESTED,
+  TABLE_LIST_RESIZE_END_REQUESTED
+} = TableListEventConstants;
 export default function ColumnResizer(_ref) {
   let {
     isResizerEnabled,
-    isResizing
+    isResizing,
+    dispatch,
+    columnName,
+    columnWidth
   } = _ref;
+  const {
+    ref,
+    elementRef: resizerLineRef
+  } = useMouseResizable({
+    onDragStart: mouseEvent => {
+      const lineElement = resizerLineRef.current;
+      dispatch({
+        type: TABLE_LIST_RESIZE_START_REQUESTED,
+        payload: {
+          columnName,
+          columnWidth,
+          lineElement,
+          mouseEvent
+        }
+      });
+    },
+    onDrag: mouseEvent => {
+      dispatch({
+        type: TABLE_LIST_RESIZE_MOVE_REQUESTED,
+        payload: {
+          mouseEvent
+        }
+      });
+    },
+    onDragEnd: () => {
+      dispatch({
+        type: TABLE_LIST_RESIZE_END_REQUESTED,
+        payload: {}
+      });
+    }
+  });
 
   if (isResizerEnabled) {
     return /*#__PURE__*/React.createElement(TableColumnResizer, {
+      ref: ref,
       $flag_resizing: isResizing
     });
   }

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

@@ -1,5 +1,8 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
+import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import HeaderText from "./HeaderText";
 import ColumnResizer from "./ColumnResizer";
 
@@ -10,7 +13,6 @@ function HeaderData(_ref) {
     sortTooltip,
     isResizing,
     isResizerEnabled,
-    resizedWidth,
     isFlexibleColumns,
     dispatch
   } = _ref;
@@ -19,29 +21,43 @@ function HeaderData(_ref) {
     name,
     text,
     sortable,
-    size,
-    alignment
+    width,
+    alignment,
+    actions
   } = header;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return (
     /*#__PURE__*/
     // @ts-ignore
     React.createElement(TableHead, {
-      $ui_size: size,
       $ui_align: alignment,
-      $data_width: resizedWidth,
-      $flag_flexible: isFlexibleColumns
+      $data_width: width,
+      $flag_flexible: isFlexibleColumns,
+      $a11yAttributes_container: {
+        'aria-sort': sortable ? sortedBy : 'none'
+      },
+      $customProps_container: hasActions ? {
+        $ui_displayMode: 'flex',
+        $ui_alignItems: 'center',
+        $ui_justifyContent: AlignmentOfFlex[alignment]
+      } : null
     }, /*#__PURE__*/React.createElement(HeaderText, {
       id: id,
       name: name,
       text: text,
       sortable: sortable,
       sortedBy: sortedBy,
-      sortTooltip: sortTooltip // Yet to be implemented
-      ,
+      sortTooltip: sortTooltip,
       dispatch: dispatch
-    }), /*#__PURE__*/React.createElement(ColumnResizer, {
+    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions,
+      gap: ActionViewGap.SMALL
+    }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
-      isResizing: isResizing
+      isResizing: isResizing,
+      dispatch: dispatch,
+      columnName: name,
+      columnWidth: width
     }))
   );
 }

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

@@ -4,7 +4,6 @@ import HeaderData from "./HeaderData";
 function Headers(_ref) {
   let {
     headers,
-    resizedColumnsWidth,
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
@@ -17,12 +16,9 @@ function Headers(_ref) {
     } = header;
     let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
-    let resizedWidth = resizedColumnsWidth[header.id]; // TODO: To be adopted with properties
-
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,
       header: header,
-      resizedWidth: resizedWidth,
       sortedBy: sortOrder,
       sortTooltip: sortTooltip,
       isResizing: isResizing,

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
-import TableCheckBox from '@zohodesk-private/desk-components/es/table/TableCheckBox/TableCheckBox';
 import { TableListConstants } from "../../../../../../../../cc/table-list";
 
 function SelectAll(_ref) {
   let {
     isSelectionEnabled,
+    isSelectAllEnabled,
     hasAllSelected,
     dispatch
   } = _ref;
@@ -14,9 +15,9 @@ function SelectAll(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableCheckBox, {
-    $flag_checked: hasAllSelected,
-    $event_onChange: () => dispatch({
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, isSelectAllEnabled && /*#__PURE__*/React.createElement(CheckBox, {
+    checked: hasAllSelected,
+    onChange: () => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION
     })
   }));

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

@@ -3,23 +3,19 @@ import RowData from "./RowData";
 
 function Columns(_ref) {
   let {
-    resizedColumnsWidth,
     data,
     isFlexibleColumns
   } = _ref;
   return data.map((column, index) => {
     const {
-      size,
+      width,
       alignment,
       field
     } = column;
-    const resizedWidth = resizedColumnsWidth[field.id]; // Will be adopted with properties
-
     return /*#__PURE__*/React.createElement(RowData, {
       key: index,
       field: field,
-      resizedWidth: resizedWidth,
-      size: size,
+      width: width,
       alignment: alignment,
       isFlexibleColumns: isFlexibleColumns
     });

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

@@ -6,7 +6,9 @@ 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";
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+
+import style from "../../css/TableList.module.css";
 
 function RowView(_ref, ref) {
   let {
@@ -25,11 +27,16 @@ function RowView(_ref, ref) {
   const {
     id,
     columns,
-    rowActions,
+    rowActionLocation,
     isFlexibleColumns,
-    resizedColumnsWidth,
-    hasActions
+    cursor,
+    hasActions,
+    rowActionsColumnWidth
   } = state.properties;
+  const {
+    type,
+    actions
+  } = rowActionLocation;
   return /*#__PURE__*/React.createElement(TableRow, {
     key: id,
     ref: ref,
@@ -40,7 +47,10 @@ function RowView(_ref, ref) {
       payload: {
         id
       }
-    })
+    }),
+    customStyle: {
+      $pointer: style[`rowCursor_${cursor}`]
+    }
   }, renderRowSelection({
     isSelectionEnabled,
     id,
@@ -50,12 +60,12 @@ function RowView(_ref, ref) {
     dispatch
   }), renderColumns({
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   }), renderRowActions({
     hasActions,
-    rowActions,
-    dispatch
+    columnWidth: rowActionsColumnWidth,
+    type,
+    actions
   }));
 }
 
@@ -81,12 +91,10 @@ function renderRowSelection(_ref2) {
 function renderColumns(_ref3) {
   let {
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   } = _ref3;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
-    resizedColumnsWidth: resizedColumnsWidth,
     isFlexibleColumns: isFlexibleColumns
   });
 }
@@ -94,13 +102,15 @@ function renderColumns(_ref3) {
 function renderRowActions(_ref4) {
   let {
     hasActions,
-    rowActions,
-    dispatch
+    columnWidth,
+    actions,
+    type
   } = _ref4;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
-    actions: rowActions,
-    dispatch: dispatch
+    columnWidth: columnWidth,
+    type: type,
+    actions: actions
   });
 }
 

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

@@ -1,17 +1,23 @@
 import React from 'react';
 import TableAction from '@zohodesk-private/desk-components/es/table/TableAction/TableAction';
-import ActionLocation from "../../../../../action-location/frameworks/ui/ActionLocation";
+import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowActions(_ref) {
   let {
     hasActions,
+    columnWidth,
+    type = '',
     actions
   } = _ref;
 
+  // TODO: Need to fix the defaultValue from properties => CC
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
-      $ui_size: "medium"
-    }, /*#__PURE__*/React.createElement(ActionLocation, {
-      actions: actions
+      $data_width: columnWidth
+    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions,
+      renderComponentType: type,
+      gap: ActionViewGap.MEDIUM
     }));
   }
 

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

@@ -1,25 +1,36 @@
 import React from 'react';
 import TableData from '@zohodesk-private/desk-components/es/table/TableData/TableData';
+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";
 export default function RowData(_ref) {
   let {
     field,
-    size,
+    width,
     alignment,
-    resizedWidth,
     isFlexibleColumns
   } = _ref;
   let {
     type,
+    actions,
     ...props
   } = field;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return /*#__PURE__*/React.createElement(TableData, {
-    $ui_size: size,
-    $ui_align: alignment,
-    $data_width: resizedWidth,
-    $flag_flexible: isFlexibleColumns
+    $ui_align: hasActions ? null : alignment,
+    $data_width: width,
+    $flag_flexible: isFlexibleColumns,
+    $customProps_container: hasActions ? {
+      $ui_displayMode: 'flex',
+      $ui_alignItems: 'center',
+      $ui_justifyContent: AlignmentOfFlex[alignment]
+    } : null
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props
-  }));
+  }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions,
+    gap: ActionViewGap.SMALL
+  }) : null);
 }

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

@@ -26,8 +26,7 @@ function RowSelection(_ref) {
         id,
         event
       }
-    }),
-    $flag_disabled: !selectable
+    })
   });
 }
 

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

@@ -0,0 +1,27 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import Properties from "../../../../../../cc/action-icon/Properties";
+import ActionIconView, { ButtonView, FilterDropdownView } from "./ActionIconView";
+const ActionIcon = createCustomComponent({
+  name: 'ActionIcon',
+  View: ActionIconView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+});
+export default ActionIcon; // NOTE: This is a sample of Button action component
+
+export const Button = createCustomComponent({
+  name: 'Button',
+  View: ButtonView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+}); // NOTE: This is a sample of FilterDropdown action component
+
+export const FilterDropdown = createCustomComponent({
+  name: 'FilterDropdown',
+  View: FilterDropdownView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+});

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIcon.module.css";
+export default function ActionIconView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    icon,
+    label,
+    hoverVariant,
+    isDisabled,
+    isVisible
+  } = state.properties;
+  const {
+    dispatch
+  } = helpers;
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    className: isVisible ? '' : style.hide
+  }, /*#__PURE__*/React.createElement(ActionIcon, {
+    $ui_iconName: icon,
+    $ui_hoverVariant: hoverVariant,
+    $flag_disabled: isDisabled,
+    $i18n_tooltip: label,
+    $event_onClick: !isDisabled ? () => {
+      dispatch({
+        type: Constants.ACTION_ICON_CLICKED
+      });
+    } : null
+  }));
+} // NOTE: This is a sample of Button action component
+
+export function ButtonView(_ref2, ref) {
+  let {
+    state,
+    helpers
+  } = _ref2;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    sourceEvent,
+    payload
+  } = state.properties.appendToActionPayload.eventMappings[0];
+  const {
+    value
+  } = payload;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-title": value,
+    onClick: () => dispatch({
+      type: sourceEvent
+    }),
+    ref: ref
+  }, value);
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    onClick: () => {
+      dispatch({
+        type: sourceEvent
+      });
+    }
+  }, value);
+} // NOTE: This is a sample of FilterDropdown action component
+
+export function FilterDropdownView(_ref3, ref) {
+  let {
+    state,
+    helpers
+  } = _ref3;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    options,
+    isMultiselectable
+  } = state.properties;
+  const {
+    sourceEvent,
+    payload
+  } = state.properties.appendToActionPayload.eventMappings[0];
+  const {
+    fieldName: value
+  } = payload;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-title": value,
+    onClick: () => dispatch({
+      type: sourceEvent
+    }),
+    ref: ref
+  }, value);
+  return /*#__PURE__*/React.createElement("select", {
+    "data-title": '',
+    ref: ref,
+    onChange: e => dispatch({
+      type: sourceEvent,
+      payload: {
+        sourcePayload: {
+          selectedValue: e.target.value
+        }
+      }
+    })
+  }, options.map((option, index) => /*#__PURE__*/React.createElement("option", {
+    key: index,
+    value: option.value
+  }, option.label)));
+}

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/css/ActionIcon.module.css

@@ -0,0 +1,3 @@
+.hide {
+    display: none
+}

package/es/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/Checkbox.js

@@ -1,11 +1,11 @@
 import { createCustomComponent } from "../../../../../custom-component";
-import { CheckboxProperties, CheckboxActions } from "../../../../../../cc";
+import { CheckboxProperties, CheckboxActions } from "../../../../../../cc/checkbox";
 import CheckboxView from "./CheckboxView";
 let Checkbox = createCustomComponent({
   name: "Checkbox",
   View: CheckboxView,
   properties: CheckboxProperties,
-  actions: CheckboxActions,
-  actionHandlers: {}
+  events: CheckboxActions,
+  eventHandlers: {}
 });
 export default Checkbox;

package/es/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/CheckboxView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import CheckBox from "@zohodesk/components/es/CheckBox/CheckBox";
-import { CheckboxConstants } from "../../../../../../cc";
+import { CheckboxConstants } from "../../../../../../cc/checkbox";
 
 function CheckboxView(_ref, ref) {
   let {
@@ -11,7 +11,9 @@ function CheckboxView(_ref, ref) {
     dispatch
   } = helpers;
   let {
+    id,
     checked,
+    required,
     disabled,
     readonly,
     label,
@@ -19,6 +21,7 @@ function CheckboxView(_ref, ref) {
   } = state.properties;
   return /*#__PURE__*/React.createElement(CheckBox, {
     getContainerRef: ref,
+    id: id,
     checked: checked,
     disabled: disabled,
     isReadOnly: readonly,
@@ -29,6 +32,14 @@ function CheckboxView(_ref, ref) {
       dispatch({
         type: CheckboxConstants.CHECKBOX_TOGGLED
       });
+    } // NOTE: The checkbox is not rendered with input type. So, using the aria atributes.
+    ,
+    customProps: {
+      CheckBoxProps: {
+        'aria-required': required,
+        'aria-disabled': disabled,
+        'aria-readonly': readonly
+      }
     }
   });
 }

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import DateProperties from "../../../../../../cc/date/Properties";
+import DateEvents from "../../../../../../cc/date/Events";
+import DateView from "./DateView";
+let Date = createCustomComponent({
+  name: "Date",
+  View: DateView,
+  properties: DateProperties,
+  events: DateEvents,
+  eventHandlers: {}
+});
+export default Date;