@zohodesk/library-platform 1.1.2 → 1.1.3

package/es/library/behaviours/keyboard-controls/domain/entities/KeyboardControls.js

@@ -0,0 +1,87 @@
+import { SMART_TABLE_ACTION_TRIGGERED, SMART_TABLE_SELECTION_TOGGLED } from "../../../../../cc/table-connected/constants/Events";
+
+class KeyboardControls {
+  constructor(focussedIndex, totalLists) {
+    this.focussedIndex = focussedIndex;
+    this.totalLists = totalLists;
+  }
+
+  setFocussedIndex(index) {
+    this.focussedIndex = index;
+  }
+
+  getFocussedIndex() {
+    return this.focussedIndex;
+  }
+
+  focusPrevious() {
+    if (this.focussedIndex > 0) {
+      this.focussedIndex -= 1;
+    }
+  }
+
+  focusNext() {
+    if (this.totalLists > 1 && this.focussedIndex < this.totalLists - 1) {
+      this.focussedIndex += 1;
+    }
+  } // focusPrevious(): void {
+  //     if (this.focussedIndex > 0) {
+  //         this.focussedIndex -= 1;
+  //     } else if (this.focussedIndex === 0 && this.totalLists > 1) {
+  //         this.focussedIndex = this.totalLists - 1;
+  //     }
+  // }
+  // focusNext(): void {
+  //     if ((this.totalLists > 1) && (this.focussedIndex <= this.totalLists - 1)) {
+  //         if (this.focussedIndex >= this.totalLists - 1) {
+  //             this.focussedIndex = 0;
+  //         } else {
+  //             this.focussedIndex += 1;
+  //         }
+  //     }
+  // }
+  // getPreviousFocusEvent(event: KeyboardEvent): EventModel {
+  //     return {
+  //         type: SMART_TABLE_PREVIOUS_FOCUS,
+  //         payload: {
+  //             event
+  //         }
+  //     }
+  // }
+  // getNextFocusEvent(event: KeyboardEvent): EventModel {
+  //     return {
+  //         type: SMART_TABLE_NEXT_FOCUS,
+  //         payload: {
+  //             event
+  //         }
+  //     }
+  // }
+
+
+  getSelectionEvent(event) {
+    return {
+      type: SMART_TABLE_SELECTION_TOGGLED,
+      payload: {
+        event
+      }
+    };
+  }
+
+  getClickActionEvent(event) {
+    return {
+      type: SMART_TABLE_ACTION_TRIGGERED,
+      payload: {
+        event
+      }
+    };
+  }
+
+  toObject() {
+    return {
+      focussedIndex: this.focussedIndex
+    };
+  }
+
+}
+
+export default KeyboardControls;

package/es/library/behaviours/keyboard-controls/domain/entities/interface/IKeyboardControls.js

@@ -0,0 +1 @@
+export {};

package/es/library/behaviours/keyboard-controls/domain/entities/interface/KeyboardControlModel.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,48 @@
+import { KEYBOARD_CONTROL_DOWN_ARROW_PRESSED, KEYBOARD_CONTROL_ENTER_PRESSED, KEYBOARD_CONTROL_SPACE_PRESSED, KEYBOARD_CONTROL_UP_ARROW_PRESSED } from "../../../../bc/keyboard-controls/Constants";
+import UpArrowPressController from "../adapters/controllers/UpArrowPressController";
+import DownArrowPressController from "../adapters/controllers/DownArrowPressController";
+import SpacePressController from "../adapters/controllers/SpacePressController";
+import EnterPressController from "../adapters/controllers/EnterPressController";
+import Service from "../adapters/gateways/Service";
+import Repository from "../adapters/gateways/Repository";
+import Presenter from "../adapters/presenters/Presenter";
+import KeyboardHandler from "../adapters/gateways/KeyboardHandler"; // import FocusPreviousController from "../adapters/controllers/FocusPreviousController";
+// import FocusNextController from "../adapters/controllers/FocusNextController";
+
+import LifeCycleAction from "../../../../cc/architecture/LifeCycleActionEnum";
+import InitializeController from "../adapters/controllers/InitializeController";
+import DestructController from "../adapters/controllers/DestructController";
+
+class EventHandlerFactory {
+  static create() {
+    const service = this.createService();
+    return this.createHandlers(service);
+  }
+
+  static createService() {
+    const repository = new Repository();
+    const presenter = new Presenter();
+    const keyboardHandler = new KeyboardHandler();
+    return new Service({
+      repository: repository,
+      presenter,
+      keyboardHandler
+    });
+  }
+
+  static createHandlers(service) {
+    return {
+      [LifeCycleAction.MOUNT]: new InitializeController(service).handle,
+      [LifeCycleAction.UN_MOUNT]: new DestructController(service).handle,
+      // [SMART_TABLE_PREVIOUS_FOCUS]: new FocusPreviousController(service).handle,
+      // [SMART_TABLE_NEXT_FOCUS]: new FocusNextController(service).handle,
+      [KEYBOARD_CONTROL_UP_ARROW_PRESSED]: new UpArrowPressController(service).handle,
+      [KEYBOARD_CONTROL_DOWN_ARROW_PRESSED]: new DownArrowPressController(service).handle,
+      [KEYBOARD_CONTROL_SPACE_PRESSED]: new SpacePressController(service).handle,
+      [KEYBOARD_CONTROL_ENTER_PRESSED]: new EnterPressController(service).handle
+    };
+  }
+
+}
+
+export default EventHandlerFactory;

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/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/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/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;