@zohodesk/library-platform 1.1.1 → 1.1.2-exp.0

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

@@ -3,7 +3,6 @@ import { createCustomComponent } from "../../../../../custom-component";
 import TableTranslator from "../../adapters/presenters/TableTranslator";
 import TableListView from "./TableListView";
 import EventHandlersFactory from "./EventHandlersFactory";
-import SortByBehaviourFactory from "../../../../../behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
 const TableList = createCustomComponent({
   name: 'TableList',
   View: TableListView,
@@ -11,19 +10,6 @@ const TableList = createCustomComponent({
   setInitialState: () => ({}),
   transformState: TableTranslator.translate,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: [SortByBehaviourFactory.create(), {
-    name: 'resizerState',
-    properties: {},
-    eventHandlers: {},
-    setInitialState: () => ({
-      currentlyResizingColumn: '',
-      isCurrentlyResizing: false,
-      resizedColumnsWidth: {},
-      extraWidth: 0,
-      initialPosition: 0,
-      resizedPosition: 0,
-      tooltip: ''
-    })
-  }]
+  behaviours: []
 });
 export default TableList;

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

@@ -4,6 +4,7 @@ import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
 import Rows from "./sub-components/Rows";
 import NoData from "./sub-components/NoData";
+import ErrorState from "./sub-components/ErrorState";
 import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
 import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
@@ -21,17 +22,16 @@ function TableListView(_ref2, _ref) {
   const {
     data,
     isLoading,
-    resizerConfig,
+    resizerState,
     selectionConfig,
     isFlexibleColumns,
     rowCursor,
     rowActionsConfig,
+    keyboardControlsConfig,
     selection,
-    emptyStateUiType
+    emptyStateUiType,
+    isError
   } = state.properties;
-  const {
-    resizerState
-  } = state.behaviours;
   const {
     headers,
     rows
@@ -42,8 +42,9 @@ function TableListView(_ref2, _ref) {
   } = rowActionsConfig;
   const hasRows = rows.length > 0; // TODO: derive from state.properties
 
-  const isDataEmpty = !hasRows && !isLoading; // TODO: derive from state.properties
+  const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
+  const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
     ref: _ref
@@ -53,10 +54,10 @@ function TableListView(_ref2, _ref) {
     })
   }, renderHeader({
     headers,
-    resizerConfig,
     resizerState,
     selectionConfig,
     selection,
+    isKeyboardControlsEnabled,
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
@@ -66,6 +67,7 @@ function TableListView(_ref2, _ref) {
     rows,
     isFlexibleColumns,
     selectionConfig,
+    isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
@@ -73,6 +75,8 @@ function TableListView(_ref2, _ref) {
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
+  }), /*#__PURE__*/React.createElement(ErrorState, {
+    isError: isError
   }), /*#__PURE__*/React.createElement(Loading, {
     isLoading: isLoading,
     hasRows: hasRows
@@ -82,10 +86,10 @@ function TableListView(_ref2, _ref) {
 function renderHeader(_ref3) {
   let {
     headers,
-    resizerConfig,
     resizerState,
     selectionConfig,
     selection,
+    isKeyboardControlsEnabled,
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
@@ -93,15 +97,15 @@ function renderHeader(_ref3) {
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isSelectionEnabled: selectionConfig.isEnabled,
-    isSelectAllEnabled: selectionConfig.isSelectAllEnabled,
-    hasAllSelected: selection.hasAllSelected,
-    isResizerEnabled: resizerConfig.isEnabled,
+    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
   });
@@ -113,6 +117,7 @@ function renderBody(_ref4) {
     rows,
     isFlexibleColumns,
     selectionConfig,
+    isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
@@ -128,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

@@ -25,6 +25,12 @@
 .emptyContent {
     padding: var(--zd_size160) 0 var(--zd_size60) 
 }
+.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/ErrorState.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ErrorOopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
+// import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+// import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+
+/* @ts-ignore */
+
+import style from "../css/TableList.module.css";
+export default function ErrorState(_ref) {
+  let {
+    isError
+  } = _ref;
+
+  if (isError) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: `${style.contentWrapper} ${style.errorContent}`
+    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
+      title: "Oops! Something is missing",
+      description: "We are unable to process your request. Please try again later."
+    }));
+  }
+
+  return null;
+}

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

@@ -1,16 +1,23 @@
 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 SelectAll from "./header/SelectAll";
+import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader'; // import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
+
+const TableHeaderRow = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
 
-function Header(_ref) {
+function Header(_ref2) {
   let {
     isSelectionEnabled,
-    isSelectAllEnabled,
-    hasAllSelected,
+    actions,
+    isKeyboardControlsEnabled,
     isResizerEnabled,
     currentlyResizingColumn,
     isCurrentlyResizing,
@@ -20,7 +27,7 @@ function Header(_ref) {
     rowActionsColumnWidth,
     headers,
     dispatch
-  } = _ref;
+  } = _ref2;
 
   if (headers.length <= 0) {
     return null;
@@ -28,16 +35,15 @@ function Header(_ref) {
 
   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/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,16 +1,17 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 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";
+import ColumnResizer from "./ColumnResizer"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 
 function HeaderData(_ref) {
   let {
     header,
     sortedBy,
-    sortTooltip,
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
@@ -30,7 +31,7 @@ function HeaderData(_ref) {
     /*#__PURE__*/
     // @ts-ignore
     React.createElement(TableHead, {
-      $ui_align: alignment,
+      $ui_align: hasActions ? 'left' : alignment,
       $data_width: width,
       $flag_flexible: isFlexibleColumns,
       $a11yAttributes_container: {
@@ -40,21 +41,21 @@ function HeaderData(_ref) {
         $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,
-      dispatch: dispatch
+      } : null,
+      customStyle: hasActions ? {
+        tableHead: style.headerWithActions
+      } : undefined
+    }, /*#__PURE__*/React.createElement(TableHeading, {
+      $i18n_text: text
     }), 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

@@ -11,8 +11,7 @@ function Headers(_ref) {
   } = _ref;
   return headers.map((header, index) => {
     const {
-      sortOrder,
-      sortTooltip
+      sortOrder
     } = header;
     let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
@@ -20,7 +19,6 @@ function Headers(_ref) {
       key: index,
       header: header,
       sortedBy: sortOrder,
-      sortTooltip: sortTooltip,
       isResizing: isResizing,
       isResizerEnabled: isResizerEnabled,
       isFlexibleColumns: isFlexibleColumns,

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/action-icon/frameworks/ui/ActionIcon.js

@@ -1,27 +1,11 @@
 import { createCustomComponent } from "../../../../../custom-component";
-import Properties from "../../../../../../cc/action-icon/Properties";
-import ActionIconView, { ButtonView, FilterDropdownView } from "./ActionIconView";
+import { ActionIconProperties } from "../../../../../../cc/action-icon";
+import ActionIconView from "./ActionIconView";
 const ActionIcon = createCustomComponent({
   name: 'ActionIcon',
   View: ActionIconView,
-  properties: Properties,
+  properties: ActionIconProperties,
   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: {}
-});
+export default ActionIcon;

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

@@ -1,8 +1,6 @@
 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";
+import Constants from "../../../../../../cc/action-icon/Constants";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -12,16 +10,13 @@ export default function ActionIconView(_ref, ref) {
     icon,
     label,
     hoverVariant,
-    isDisabled,
-    isVisible
+    isDisabled
   } = state.properties;
   const {
     dispatch
   } = helpers;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
-    className: isVisible ? '' : style.hide
-  }, /*#__PURE__*/React.createElement(ActionIcon, {
     $ui_iconName: icon,
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
@@ -31,80 +26,5 @@ export default function ActionIconView(_ref, ref) {
         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/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;