@zohodesk/library-platform 1.1.3 → 1.1.6

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -1,36 +1,151 @@
+/* Default: no special styles */
+.tableListRow {
+    /*  */
+}
+
+/* Keyboard + Reorder + Selection */
+.tableListRow-kbdReorderSelection {
+    --local-tableList-selectionColumn-width: 56px;
+    --local-tableList-selectionColumn-left: 24px;
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Keyboard + Reorder, no Selection */
+.tableListRow-kbdReorder {
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Keyboard + Selection, no Reorder */
+.tableListRow-kbdSelection {
+    --local-tableList-row-paddingLeft: 8px;
+    --local-tableList-selectionColumn-width: 72px;
+    --local-tableList-selectionColumn-left: 8px;
+    --local-tableList-selectionColumn-paddingRight: 8px;
+    --local-tableList-selectionColumn-justifyContent: center;
+}
+
+/* Keyboard only */
+.tableListRow-kbd {
+    /*  */
+}
+
+/* Reorder + Selection, no Keyboard */
+.tableListRow-reorderSelection {
+    --local-tableList-selectionColumn-width: 56px;
+    --local-tableList-selectionColumn-left: 24px;
+    --local-tableList-selectionColumn-paddingRight: 16px;
+    --local-tableList-reorder-paddingLeft: 8px;
+}
+
+/* Reorder only */
+.tableListRow-reorder {
+    --local-tableList-reorder-paddingLeft: 8px;
+}
+
+/* Selection only */
+.tableListRow-selection {
+    --local-tableList-selectionColumn-justifyContent: center;
+}
+
+/* Default: no special styles */
+.tableListHeader {
+    /*  */
+}
+
+/* Keyboard + Reorder + Selection */
+.tableListHeader-kbdReorderSelection {
+    --local-tableList-reorderHeader-paddingRight: 8px;
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-reorderHeader-left: 8px;
+    --local-tableList-reorderHeader-width: 16px;
+
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-massActionHeader-paddingRight: 24px;
+    --local-tableList-massActionHeader-width: 56px;
+}
+
+/* Keyboard + Reorder, no Selection */
+.tableListHeader-kbdReorder {
+    --local-tableList-reorderHeader-left: 8px;
+    --local-tableList-reorderHeader-paddingRight: 8px;
+    --local-tableList-reorderHeader-width: 16px;
+}
+
+/* Reorder only */
+.tableListHeader-reorder {
+    --local-tableList-reorderHeader-width: 24px;
+}
+
+/* Keyboard + Selection, no Reorder */
+.tableListHeader-kbdSelection {
+    --local-tableList-header-paddingLeft: 8px;
+    --local-tableList-massActionHeader-left: 8px;
+    --local-tableList-massActionHeader-paddingRight: 8px;
+    --local-tableList-massActionHeader-width: 72px;
+}
+
+/* Keyboard only */
+.tableListHeader-kbd {
+    --local-tableList-header-paddingLeft: 24px;
+}
+
+/* Reorder + Selection, no Keyboard */
+.tableListHeader-reorderSelection {
+    --local-tableList-reorderHeader-width: 24px;
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-massActionHeader-paddingRight: 24px;
+    --local-tableList-massActionHeader-width: 56px;
+}
+
+/* Selection only */
+.tableListHeader-selection {
+    /*  */
+}
+
 .loader {
     padding: var(--zd_size40) 0 
 }
+
 .wrapper {
     height: 100% ;
     width: 100% ;
     position: relative
 }
+
 .resizerSpace {
     width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
     flex-shrink: 0
 }
+
 .contentWrapper {
     composes: sticky from '~@zohodesk/components/es/common/common.module.css';
 }
+
 [dir=ltr] .contentWrapper {
     left: 0 ;
 }
+
 [dir=rtl] .contentWrapper {
     right: 0 ;
 }
+
 .initialLoading {
     height: calc(100% - (var(--zd_size100)))
 }
+
 .emptyContent {
     padding: var(--zd_size160) 0 var(--zd_size60) 
 }
+
 .errorContent {
     padding: var(--zd_size60) 0 
 }
-.headerWithActions, .fieldWithActions {
+
+.headerWithActions,
+.fieldWithActions {
     gap: var(--zd_size6) 
 }
+
 .actions {
     gap: var(--zd_size8) 
 }
@@ -38,9 +153,133 @@
 .rowCursor_default {
     cursor: default
 }
+
 .rowCursor_pointer {
     cursor: pointer
 }
+
 .rowCursor_not-allowed {
     cursor: not-allowed
+}
+
+.preventTextSelection {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.preventPointerEvents {
+    pointer-events: none;
+}
+
+.dragging {
+    overflow: hidden;
+    box-shadow: var(--local_tablelist_box_shadow);
+}
+
+:global(.GLOBAL_ZDDC_tableList).dragging .dragHandleContainer {
+    /* css:theme-validation:ignore */
+    color: var(--local_drag_handle_hover_color);
+    background-color: var(--local_drag_handle_dragging_bg);
+}
+
+:global(.GLOBAL_ZDDC_tableList).dragging .dragHandleContainer,
+:global(.GLOBAL_ZDDC_tableList:hover) .dragHandleContainer,
+:global(.GLOBAL_ZDDC_tableList:focus-within) .dragHandleContainer {
+    visibility: visible;
+    opacity: 1;
+}
+
+.dragHandleContainer {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.dragHandleWrapper {
+    align-self: stretch;
+    composes: sticky from '~@zohodesk/components/es/common/common.module.css';
+    z-index: 1;
+    /* css:theme-validation:ignore */
+    background-color: var(--local_tablelist_bg);
+}
+
+[dir=ltr] .dragHandleWrapper {
+    left: var(--local-tableList-reorder-left, 0);
+    padding: 0 var(--local-tableList-reorder-paddingRight, 0) 0 var(--local-tableList-reorder-paddingLeft, 0);
+}
+
+[dir=rtl] .dragHandleWrapper {
+    right: var(--local-tableList-reorder-left, 0);
+    padding: 0 var(--local-tableList-reorder-paddingLeft, 0) 0 var(--local-tableList-reorder-paddingRight, 0);
+}
+
+.rowDropIndicator {
+    width: 100% ;
+    height: var(--zd_size2) ;
+    /* css:theme-validation:ignore */
+    position: absolute;
+    z-index: 2;
+    background-color: var(--local_tablelist_reorder_placeholderline_bg);
+}
+
+.dropIndicatorTop {
+    top: 0 ;
+}
+
+.dropIndicatorBottom {
+    bottom: calc( var(--zd_size3) * -1 ) ;
+}
+
+.row {
+    --local_padding_left: var(--local-tableList-row-paddingLeft);
+}
+
+.tableListSelectContainer {
+    --local_column_width: var(--local-tableList-selectionColumn-width);
+    justify-content: var(--local-tableList-selectionColumn-justifyContent, start);
+}
+
+[dir=ltr] .tableListSelectContainer {
+    left: var(--local-tableList-selectionColumn-left, 0);
+    padding-left: var(--local-tableList-selectionColumn-paddingLeft, 0);
+    padding-right: var(--local-tableList-selectionColumn-paddingRight, 0);
+}
+
+[dir=rtl] .tableListSelectContainer {
+    right: var(--local-tableList-selectionColumn-left, 0);
+    padding-right: var(--local-tableList-selectionColumn-paddingLeft, 0);
+    padding-left: var(--local-tableList-selectionColumn-paddingRight, 0);
+}
+
+.header {
+    --local_padding_left: var(--local-tableList-header-paddingLeft);
+}
+
+.reOrderHeader {
+    --local_column_width: var(--local-tableList-reorderHeader-width);
+}
+
+[dir=ltr] .reOrderHeader {
+    left: var(--local-tableList-reorderHeader-left, 0);
+    padding-right: var(--local-tableList-reorderHeader-paddingRight, 0);
+}
+
+[dir=rtl] .reOrderHeader {
+    right: var(--local-tableList-reorderHeader-left, 0);
+    padding-left: var(--local-tableList-reorderHeader-paddingRight, 0);
+}
+
+.massActionHeader {
+    --local_column_width: var(--local-tableList-massActionHeader-width);
+}
+
+[dir=ltr] .massActionHeader {
+    left: var(--local-tableList-massActionHeader-left, 0);
+    padding-right: var(--local-tableList-massActionHeader-paddingRight, 0);
+}
+
+[dir=rtl] .massActionHeader {
+    right: var(--local-tableList-massActionHeader-left, 0);
+    padding-left: var(--local-tableList-massActionHeader-paddingRight, 0);
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader'; // import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
+import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader';
+import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode'; // import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
 
 const TableHeaderRow = _ref => {
   let {
@@ -12,9 +13,12 @@ import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
+import getHeaderClasses from "./../../utils/getHeaderClasses";
+import style from "./../css/TableList.module.css";
 
 function Header(_ref2) {
   let {
+    isReorderEnabled,
     isSelectionEnabled,
     actions,
     isKeyboardControlsEnabled,
@@ -33,11 +37,19 @@ function Header(_ref2) {
     return null;
   }
 
+  const headerClasses = getHeaderClasses({
+    isReorderEnabled,
+    isSelectionEnabled,
+    isKeyboardControlsEnabled
+  });
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled,
-    $flag_hasHighlighter: isKeyboardControlsEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_hasHighlighter: isKeyboardControlsEnabled,
+    customStyle: {
+      tableHeader: `${style.header} ${style[headerClasses]}`
+    }
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
 function rendermassAction(isSelectionEnabled, actions) {
@@ -47,6 +59,18 @@ function rendermassAction(isSelectionEnabled, actions) {
   });
 }
 
+function renderReOrderColumn(isReorderEnabled) {
+  if (!isReorderEnabled) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: style.reOrderHeader
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null));
+}
+
 function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,

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

@@ -1,24 +1,36 @@
 import React from 'react';
 import Row from "./row/Row";
+import { SortableElement } from 'react-sortable-hoc';
+const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, { ...props
+}));
 
-function Rows(_ref) {
+const Rows = _ref => {
   let {
     headers,
     rows,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    isKeyboardControlsEnabled
+    isKeyboardControlsEnabled,
+    dropIndicator,
+    isReOrderLoading
   } = _ref;
-  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
-    key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled)
-  }));
-}
+  return rows.map((row, index) => {
+    const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
+    const dropPosition = dropIndicator.position;
+    return /*#__PURE__*/React.createElement(SortableRow, {
+      key: `${row.id}`,
+      index: index,
+      disabled: isReOrderLoading,
+      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)
+    });
+  });
+};
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading) {
   const {
     id,
     columns,
@@ -38,11 +50,15 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCur
     isFocussed,
     selectionTooltip,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
     isKeyboardControlsEnabled,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    isDroppable,
+    dropPosition,
+    isReOrderLoading
   };
 }
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
 import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import style from "./../../css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
@@ -14,13 +15,21 @@ function MassAction(_ref) {
   }
 
   if (!actions || actions.length === 0) {
-    return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableHeading, {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      customStyle: {
+        container: style.massActionHeader
+      }
+    }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: "M/A",
       $i18n_tooltip: "Mass Action"
     }));
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: style.massActionHeader
+    }
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
     actions: actions
   }));
 }

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,12 +21,16 @@ function RowView(_ref, ref) {
     dispatch
   } = helpers;
   const {
+    isReorderEnabled,
     isSelectionEnabled,
     isSelected,
     isSelectable,
     isKeyboardControlsEnabled,
     isFocussed,
-    selectionTooltip
+    selectionTooltip,
+    isDroppable,
+    dropPosition,
+    isReOrderLoading
   } = state.properties;
   const {
     id,
@@ -43,7 +49,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled,
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     $flag_isHighlighted: isFocussed,
@@ -54,9 +60,13 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
+      tableList: isSelectionEnabled || isReorderEnabled ? style.row : '',
       $pointer: style[`rowCursor_${cursor}`]
     }
-  }, renderRowSelection({
+  }, renderReorderer({
+    isReorderEnabled,
+    isReOrderLoading
+  }), renderRowSelection({
     isSelectionEnabled,
     id,
     selectionTooltip,
@@ -71,6 +81,8 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions
+  }), isDroppable && /*#__PURE__*/React.createElement("div", {
+    className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
 }
 
@@ -93,24 +105,54 @@ function renderRowSelection(_ref2) {
   });
 }
 
-function renderColumns(_ref3) {
+const DragHandler = SortableHandle(_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(DragHandle, {
+    isDisabled: isDisabled,
+    customStyle: {
+      container: style.dragHandleContainer
+    }
+  });
+});
+
+function renderReorderer(_ref4) {
+  let {
+    isReorderEnabled,
+    isReOrderLoading
+  } = _ref4;
+
+  if (!isReorderEnabled) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("td", {
+    tabIndex: 0,
+    className: style.dragHandleWrapper
+  }, /*#__PURE__*/React.createElement(DragHandler, {
+    isDisabled: isReOrderLoading
+  }));
+}
+
+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/RowSelection.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import TableListSelect from '@zohodesk-private/desk-components/es/table/TableListSelect/TableListSelect';
-import { TableListConstants } from "../../../../../../../../cc/table-list";
+import { TableListConstants } from "../../../../../../../../cc/table-list"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 
 function RowSelection(_ref) {
   let {
@@ -20,6 +22,10 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    customStyle: {
+      container: style.tableListSelectContainer
+    },
+    $flag_disabled: !selectable,
     $event_onChange: (_, event) => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
       payload: {

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

@@ -0,0 +1,37 @@
+export default function getTableListHeaderClassName(_ref) {
+  let {
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  } = _ref;
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && isSelectionEnabled) {
+    return 'tableListHeader-kbdReorderSelection';
+  }
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListHeader-kbdReorder';
+  }
+
+  if (isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled) {
+    return 'tableListHeader-kbdSelection';
+  }
+
+  if (isKeyboardControlsEnabled && !isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListHeader-kbd';
+  }
+
+  if (isReorderEnabled && isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-reorderSelection';
+  }
+
+  if (isReorderEnabled && !isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-reorder';
+  }
+
+  if (isSelectionEnabled && !isReorderEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-selection';
+  }
+
+  return 'tableListHeader';
+}

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

@@ -0,0 +1,37 @@
+export default function getTableListClassName(_ref) {
+  let {
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  } = _ref;
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && isSelectionEnabled) {
+    return 'tableListRow-kbdReorderSelection';
+  }
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListRow-kbdReorder';
+  }
+
+  if (isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled) {
+    return 'tableListRow-kbdSelection';
+  }
+
+  if (isKeyboardControlsEnabled && !isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListRow-kbd';
+  }
+
+  if (isReorderEnabled && isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-reorderSelection';
+  }
+
+  if (isReorderEnabled && !isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-reorder';
+  }
+
+  if (isSelectionEnabled && !isReorderEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-selection';
+  }
+
+  return 'tableListRow';
+}