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

package/es/library/behaviours/keyboard-controls/frameworks/KeyboardControlBehaviourFactory.js

@@ -0,0 +1,23 @@
+import EventHandlerFactory from "./EventHandlerFactory";
+import events from "../../../../bc/keyboard-controls/Events";
+import properties from "../../../../bc/keyboard-controls/Properties";
+
+class KeyboardControlBehaviourFactory {
+  static create() {
+    return {
+      name: 'keyboardControls',
+      setInitialState: () => {
+        return {
+          focussedIndex: 0,
+          totalLists: 0
+        };
+      },
+      eventHandlers: EventHandlerFactory.create(),
+      events,
+      properties
+    };
+  }
+
+}
+
+export default KeyboardControlBehaviourFactory;

package/es/library/behaviours/list-selection/frameworks/ActionHandlerFactory.js

@@ -10,6 +10,7 @@ import UpdateController from "../adapters/controllers/UpdateController";
 import DestructController from "../adapters/controllers/DestructController";
 import SelectController from "../adapters/controllers/SelectController";
 import DeselectController from "../adapters/controllers/DeselectController";
+import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 
 class ActionHandlerFactory {
   static create() {
@@ -28,9 +29,9 @@ class ActionHandlerFactory {
 
   static createHandlers(service) {
     return {
-      ['MOUNT']: new InitializeController(service).handle,
-      ['UPDATE_PROPERTIES']: new UpdateController(service).handle,
-      ['UNMOUNT']: new DestructController(service).handle,
+      [LifeCycleEvents.MOUNT]: new InitializeController(service).handle,
+      [LifeCycleEvents.UPDATE_PROPERTIES]: new UpdateController(service).handle,
+      [LifeCycleEvents.UN_MOUNT]: new DestructController(service).handle,
       [LIST_SELECTION_SELECT_ITEM]: new SelectController(service).handle,
       [LIST_SELECTION_DESELECT_ITEM]: new DeselectController(service).handle,
       [LIST_SELECTION_TOGGLE_ITEMS]: new SelectionController(service).handle,

package/es/library/custom-component/applications/entities-factory/BehavioursFactory.js

@@ -1,31 +1,18 @@
+import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 import Behaviour from "../../domain/entities/Behaviour";
 import EventHandlersFactory from "./EventHandlersFactory";
 import PropertiesFactory from "./PropertiesFactory";
-/* eslint-disable max-lines-per-function, @zohodesk/architecturerules/no-returnStatement-rule */
 
 class BehavioursFactory {
   static create(input) {
-    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
-    let behaviours = input.behaviours || [];
+    const behaviours = input.behaviours ? input.behaviours : [];
     return behaviours.map(behaviour => {
       // DEPRECATED: Remove while refactoring actionHandlers
       if (behaviour.actionHandlers) {
         behaviour.eventHandlers = behaviour.actionHandlers;
       }
 
-      const {
-        eventHandlers
-      } = behaviour;
-      let newEventHandlers = Object.keys(eventHandlers).reduce((res, next) => {
-        let key = next;
-
-        if (['MOUNT', 'UN_MOUNT', 'UPDATE_PROPERTIES'].includes(next)) {
-          key = input.name + '#' + next;
-        }
-
-        res[key] = eventHandlers[next];
-        return res;
-      }, {});
+      const newEventHandlers = BehavioursFactory.createNamedEventHandlers(behaviour.eventHandlers, input);
       return new Behaviour({
         name: behaviour.name,
         eventHandlers: EventHandlersFactory(newEventHandlers),
@@ -38,6 +25,21 @@ class BehavioursFactory {
     });
   }
 
+  static createNamedEventHandlers(eventHandlers, input) {
+    return Object.keys(eventHandlers).reduce((res, key) => {
+      // if (['MOUNT', 'UN_MOUNT', 'UPDATE_PROPERTIES'].includes(eventName)) {
+      // if ('MOUNT', LifeCycleEvents.UN_MOUNT, LifeCycleEvents.UPDATE_PROPERTIES, LifeCycleEvents.STATE_UPDATED].includes(eventName)) {
+      let eventName = key;
+
+      if (LifeCycleEvents[key]) {
+        eventName = `${input.name}#${key}`;
+      }
+
+      res[eventName] = eventHandlers[key];
+      return res;
+    }, {});
+  }
+
 }
 
 export default BehavioursFactory;

package/es/library/custom-component/applications/usecases/UpdatePropertyUseCase.js

@@ -21,6 +21,9 @@ class UpdatePropertyUseCase extends AbstractUseCase {
         previousProperties: properties
       });
       eventManager.dispatch(updatePropertyAction);
+      eventManager.dispatch(component.getStateUpdatedAction({
+        state
+      }));
     }
   }
 

package/es/library/custom-component/applications/usecases/UpdateStateUseCase.js

@@ -4,7 +4,8 @@ class UpdateStateUseCase extends AbstractUseCase {
   execute(newState) {
     let {
       repository,
-      presenter
+      presenter,
+      eventManager
     } = this.dependencies;
     let component = repository.getComponent(); // let preState=component.getState();
     // console.log(`preState ${component.getName()}`,preState)
@@ -13,6 +14,9 @@ class UpdateStateUseCase extends AbstractUseCase {
     let state = component.getState(); // console.log(`newState ${component.getName()}`,state)
 
     presenter.render(state);
+    eventManager.dispatch(component.getStateUpdatedAction({
+      state
+    }));
   }
 
 }

package/es/library/custom-component/domain/entities/Component.js

@@ -64,6 +64,10 @@ export default class Component {
     return this._lifeCycleAction.getUpdatePropertiesAction(payload);
   }
 
+  getStateUpdatedAction(payload) {
+    return this._lifeCycleAction.getStateUpdatedAction(payload);
+  }
+
   getState() {
     let state = this._tranformer(this.mergeStateAndProps());
 

package/es/library/custom-component/domain/entities/LifeCycleAction.js

@@ -1,23 +1,27 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import LifeCycleEvents from "../../../../cc/component/LifeCycleEventsEnum";
 export default class LifeCycleAction {
   constructor(name) {
     _defineProperty(this, "mount", void 0);
 
     _defineProperty(this, "unmount", void 0);
 
+    _defineProperty(this, "name", void 0);
+
     _defineProperty(this, "contructUpdatePropertiesAction", void 0);
 
+    this.name = name;
     this.mount = {
-      type: `${name}#MOUNT`
+      type: `${name}#${LifeCycleEvents.MOUNT}`
     };
     this.unmount = {
-      type: `${name}#UN_MOUNT`
+      type: `${name}#${LifeCycleEvents.UN_MOUNT}`
     };
 
     this.contructUpdatePropertiesAction = payload => {
       return {
-        type: `${name}#UPDATE_PROPERTIES`,
+        type: `${name}#${LifeCycleEvents.UPDATE_PROPERTIES}`,
         payload
       };
     };
@@ -31,6 +35,13 @@ export default class LifeCycleAction {
     return this.unmount;
   }
 
+  getStateUpdatedAction(payload) {
+    return {
+      type: `${this.name}#${LifeCycleEvents.STATE_UPDATED}`,
+      payload
+    };
+  }
+
   getUpdatePropertiesAction(payload) {
     return this.contructUpdatePropertiesAction(payload);
   }

package/es/library/custom-component/frameworks/ui/ComponentRegistry.js

@@ -14,6 +14,14 @@ class ComponentRegistry {
   }
 
   register(name, component) {
+    if (this.components.has(name)) {
+      console.warn(`Component with name "${name}" is already registered. Overwriting the existing component.`);
+    }
+
+    if (this.components.has(name) && this.get(name) !== component) {
+      console.warn(`Component with name "${name}" is already registered with a different instance. Overwriting the existing component.`);
+    }
+
     this.components.set(name, component);
   }
 

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,9 +1,13 @@
 import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
 import TableColumnSort from "../../../../legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSort";
+import TableColumnChooser from "../../../../legacy-to-new-arch/table-column-chooser/frameworks/ui/TableColumnChooser";
+import Checkbox from "../../../../legacy-to-new-arch/checkbox/frameworks/ui/Checkbox";
 import TableColumnFilter from "../../../../legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['TableColumnSort']: TableColumnSort,
+  ['TableColumnChooser']: TableColumnChooser,
+  ['TableSelectAll']: Checkbox,
   ['TableColumnFilter']: TableColumnFilter
 };
 export default ActionComponentMapping;

package/es/library/dot/components/action-location/frameworks/ui/EventHandlersFactory.js

@@ -24,7 +24,7 @@ export default class EventHandlersFactory {
     return {
       [ActionLocationConstants.MOUNT]: initializeController.handle,
       [ActionLocationConstants.UPDATE_PROPERTIES]: propertiesChangeController.handle,
-      [ActionLocationConstants.UNMOUNT]: unmountController.handle
+      [ActionLocationConstants.UN_MOUNT]: unmountController.handle
     };
   }
 

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

@@ -4,10 +4,11 @@ class TableTranslator {
       data,
       selectionConfig,
       selection,
-      sortBy
+      sortBy,
+      focussedRow
     } = state.properties;
     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,
@@ -28,13 +29,14 @@ class TableTranslator {
     });
   }
 
-  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)

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

@@ -1,11 +1,14 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, KeyboardRowSelectController, KeyboardRowClickController } from "../../adapters/controllers";
 import TableRowConstants from "../../../../../../cc/table-list/row/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,

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

@@ -27,6 +27,7 @@ function TableListView(_ref2, _ref) {
     isFlexibleColumns,
     rowCursor,
     rowActionsConfig,
+    keyboardControlsConfig,
     selection,
     emptyStateUiType,
     isError
@@ -43,6 +44,7 @@ function TableListView(_ref2, _ref) {
 
   const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
+  const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
     ref: _ref
@@ -55,6 +57,7 @@ function TableListView(_ref2, _ref) {
     resizerState,
     selectionConfig,
     selection,
+    isKeyboardControlsEnabled,
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
@@ -64,6 +67,7 @@ function TableListView(_ref2, _ref) {
     rows,
     isFlexibleColumns,
     selectionConfig,
+    isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
@@ -85,6 +89,7 @@ function renderHeader(_ref3) {
     resizerState,
     selectionConfig,
     selection,
+    isKeyboardControlsEnabled,
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
@@ -92,15 +97,15 @@ function renderHeader(_ref3) {
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isSelectionEnabled: selectionConfig.isEnabled,
-    isSelectAllEnabled: selectionConfig.isSelectAllEnabled,
-    hasAllSelected: selection.hasAllSelected,
     isResizerEnabled: resizerState.isEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
     isCurrentlyResizing: resizerState.isCurrentlyResizing,
     resizerExtraWidth: resizerState.extraWidth,
     isFlexibleColumns: isFlexibleColumns,
     hasRowActions: hasRowActions,
     rowActionsColumnWidth: rowActionsColumnWidth,
+    actions: selection.actions,
     headers: headers,
     dispatch: dispatch
   });
@@ -112,6 +117,7 @@ function renderBody(_ref4) {
     rows,
     isFlexibleColumns,
     selectionConfig,
+    isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
@@ -127,7 +133,8 @@ function renderBody(_ref4) {
     isSelectionEnabled: selectionConfig.isEnabled,
     rowCursor: rowCursor,
     hasRowActions: hasRowActions,
-    rowActionsColumnWidth: rowActionsColumnWidth
+    rowActionsColumnWidth: rowActionsColumnWidth,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled
   }));
 }
 

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

@@ -28,6 +28,9 @@
 .errorContent {
     padding: var(--zd_size60) 0 
 }
+.headerWithActions, .fieldWithActions {
+    gap: var(--zd_size6) 
+}
 .actions {
     gap: var(--zd_size8) 
 }

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

@@ -8,7 +8,7 @@ const TableHeaderRow = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
-import SelectAll from "./header/SelectAll";
+import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
@@ -16,8 +16,8 @@ import ResizerExtraSpace from "./header/ResizerExtraSpace";
 function Header(_ref2) {
   let {
     isSelectionEnabled,
-    isSelectAllEnabled,
-    hasAllSelected,
+    actions,
+    isKeyboardControlsEnabled,
     isResizerEnabled,
     currentlyResizingColumn,
     isCurrentlyResizing,
@@ -35,16 +35,15 @@ function Header(_ref2) {
 
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, isSelectAllEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+    $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)));
 }
 
-function renderSelectAll(isSelectionEnabled, isSelectAllEnabled, hasAllSelected, dispatch) {
-  return /*#__PURE__*/React.createElement(SelectAll, {
+function rendermassAction(isSelectionEnabled, actions) {
+  return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
-    isSelectAllEnabled: isSelectAllEnabled,
-    hasAllSelected: hasAllSelected,
-    dispatch: dispatch
+    actions: actions
   });
 }
 

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

@@ -9,20 +9,22 @@ function Rows(_ref) {
     isSelectionEnabled,
     rowCursor,
     hasRowActions,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    isKeyboardControlsEnabled
   } = _ref;
   return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
     key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth)
+    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled)
   }));
 }
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth) {
+function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled) {
   const {
     id,
     columns,
     isSelected,
     isSelectable,
+    isFocussed,
     selectionTooltip,
     rowActionLocation
   } = row;
@@ -33,11 +35,13 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCur
     rowActionLocation,
     isSelected,
     isSelectable,
+    isFocussed,
     selectionTooltip,
     isFlexibleColumns,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
+    isKeyboardControlsEnabled,
     rowActionsColumnWidth
   };
 }

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

@@ -4,7 +4,9 @@ import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeadin
 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 ColumnResizer from "./ColumnResizer";
+import ColumnResizer from "./ColumnResizer"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 
 function HeaderData(_ref) {
   let {
@@ -39,7 +41,10 @@ function HeaderData(_ref) {
         $ui_displayMode: 'flex',
         $ui_alignItems: 'center',
         $ui_justifyContent: AlignmentOfFlex[alignment]
-      } : null
+      } : null,
+      customStyle: hasActions ? {
+        tableHead: style.headerWithActions
+      } : undefined
     }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: text
     }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {

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

@@ -0,0 +1,28 @@
+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";
+
+function MassAction(_ref) {
+  let {
+    isSelectionEnabled,
+    actions
+  } = _ref;
+
+  if (!isSelectionEnabled) {
+    return null;
+  }
+
+  if (!actions || actions.length === 0) {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableHeading, {
+      $i18n_text: "M/A",
+      $i18n_tooltip: "Mass Action"
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions
+  }));
+}
+
+export default MassAction;

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

@@ -22,6 +22,8 @@ function RowView(_ref, ref) {
     isSelectionEnabled,
     isSelected,
     isSelectable,
+    isKeyboardControlsEnabled,
+    isFocussed,
     selectionTooltip
   } = state.properties;
   const {
@@ -42,6 +44,9 @@ function RowView(_ref, ref) {
     ref: ref,
     testId: id,
     $flag_padding: !isSelectionEnabled,
+    $flag_active: isSelected,
+    $flag_hasHighlighter: isKeyboardControlsEnabled,
+    $flag_isHighlighted: isFocussed,
     $event_onClick: () => dispatch({
       type: TableRowConstants.TABLE_ROW_CLICKED,
       payload: {

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

@@ -20,6 +20,7 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    $flag_disabled: !selectable,
     $event_onChange: (_, event) => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
       payload: {

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;