@zohodesk/library-platform 1.2.2-exp.2 → 1.2.2-exp.5

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

@@ -44,7 +44,8 @@ function TableListView(_ref2, _ref) {
   const {
     headers,
     rows,
-    clientScripts
+    clientScripts,
+    massActionsContext
   } = data;
   const {
     hasActions: hasRowActions,
@@ -100,7 +101,8 @@ function TableListView(_ref2, _ref) {
     hasRowActions,
     rowActionsColumnWidth,
     dispatch,
-    clientScripts
+    clientScripts,
+    massActionsContext
   }), renderBody({
     TableRef,
     dispatch,
@@ -149,7 +151,8 @@ function renderHeader(_ref3) {
     hasRowActions,
     rowActionsColumnWidth,
     dispatch,
-    clientScripts
+    clientScripts,
+    massActionsContext
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isReorderEnabled: isReorderEnabled,
@@ -166,7 +169,8 @@ function renderHeader(_ref3) {
     headers: headers,
     isMultiline: isMultiline,
     dispatch: dispatch,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    massActionsContext: massActionsContext
   });
 }
 

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

@@ -26,7 +26,8 @@ function Header(_ref) {
     headers,
     isMultiline,
     dispatch,
-    clientScripts
+    clientScripts,
+    massActionsContext
   } = _ref;
 
   if (headers.length <= 0) {
@@ -48,15 +49,16 @@ function Header(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TableHeaderRow, {
     $flag_autoHeight: isMultiline
-  }, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts), renderHeaders(headers, isMultiline, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts, massActionsContext), renderHeaders(headers, isMultiline, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts) {
+function rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts, massActionsContext) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
     isMultiline: isMultiline,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: massActionsContext
   });
 }
 

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

@@ -2,11 +2,11 @@ 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 { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import { ActionViewGap, Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import ColumnResizer from "./ColumnResizer"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
-import RowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
 
 function HeaderData(_ref) {
   let {
@@ -26,7 +26,8 @@ function HeaderData(_ref) {
     sortable,
     width,
     alignment,
-    actions
+    actions,
+    context
   } = header;
   const hasActions = Boolean(actions?.length);
   return (
@@ -50,10 +51,14 @@ function HeaderData(_ref) {
     }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: text,
       $flag_wrapText: isMultiline
-    }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }), hasActions ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
       isResizing: isResizing,

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

@@ -1,16 +1,18 @@
 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 AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer"; // @ts-ignore
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading'; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
+import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
     isMultiline,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = _ref;
 
   if (!isSelectionEnabled) {
@@ -36,9 +38,13 @@ function MassAction(_ref) {
     customStyle: {
       container: style.massActionHeader
     }
-  }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
+  }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context,
+    viewMeta: {
+      layout: Layout.HORIZONTAL
+    }
   }));
 }
 

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

@@ -47,7 +47,8 @@ function RowView(_ref, ref) {
   } = state.properties;
   const {
     type,
-    actions
+    actions,
+    context
   } = rowActionLocation;
   return /*#__PURE__*/React.createElement(TableRow, {
     key: id,
@@ -90,7 +91,8 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions,
-    clientScripts
+    clientScripts,
+    context
   }), isDroppable && /*#__PURE__*/React.createElement("div", {
     className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
@@ -171,7 +173,8 @@ function renderRowActions(_ref6) {
     columnWidth,
     actions,
     type,
-    clientScripts
+    clientScripts,
+    context
   } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
@@ -179,7 +182,8 @@ function renderRowActions(_ref6) {
     columnWidth: columnWidth,
     type: type,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   });
 }
 

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import TableAction from '@zohodesk-private/desk-components/es/table/TableAction/TableAction';
-import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowActions(_ref) {
   let {
     hasActions,
@@ -9,18 +10,24 @@ export default function RowActions(_ref) {
     columnWidth,
     type = '',
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = _ref;
 
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
       $data_width: columnWidth,
       $ui_alignItems: isMultiline ? 'start' : 'center'
-    }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      renderComponentType: type,
-      gap: ActionViewGap.MEDIUM
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL_WITH_MORE_ACTIONS,
+        gap: ActionViewGap.MEDIUM
+      },
+      instanceName: context.instanceName,
+      location: "row_actions"
     }));
   }
 

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

@@ -5,7 +5,9 @@ import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-type
 import FieldComponent from "../field/FieldComponent"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
-import RowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import ClientActionsTranslator from "../../../../../../../../platform/client-actions/translators/client-actions-translator";
+import { Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowData(_ref) {
   let {
     field,
@@ -17,9 +19,11 @@ export default function RowData(_ref) {
   let {
     type,
     actions,
+    context,
     ...props
   } = field;
-  const hasActions = Boolean(actions?.length);
+  const resolvedActions = ClientActionsTranslator.transform(actions, context.instanceName, context.moduleName, context);
+  const hasActions = Boolean(resolvedActions?.length);
   return /*#__PURE__*/React.createElement(TableData, {
     $ui_align: hasActions ? null : alignment,
     $data_width: width,
@@ -35,9 +39,13 @@ export default function RowData(_ref) {
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props
-  }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+  }), hasActions ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
     actions: actions,
     clientScripts: clientScripts,
-    gap: ActionViewGap.SMALL
+    context: context,
+    viewMeta: {
+      layout: Layout.HORIZONTAL,
+      gap: ActionViewGap.SMALL
+    }
   }) : null);
 }

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Button from '@zohodesk-private/dot-registry/es/Button/Button';
+import Icon from "@zohodesk/icons/es/Icon";
 import ButtonConstants from "../../../../../../cc/button/Constants";
 
 function ButtonView(_ref, ref) {
@@ -18,11 +19,25 @@ function ButtonView(_ref, ref) {
     isDisabled,
     id,
     status,
-    tooltip
+    tooltip,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
+  const iconElement = iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  }) : null;
+  const buttonText = iconElement ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '4px'
+    }
+  }, iconPosition === 'left' && iconElement, text, iconPosition !== 'left' && iconElement) : text;
   return /*#__PURE__*/React.createElement(Button, {
     getRef: ref,
-    text: text,
+    text: buttonText,
     palette: palette,
     size: size,
     isRounded: isRounded,

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

@@ -1,10 +1,11 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import DateConstants from "../../../../../../cc/date/Constants";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/DateView.module.css";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function DateView(_ref, ref) {
   let {
@@ -24,17 +25,22 @@ function DateView(_ref, ref) {
     isTimeIncluded,
     timeZone,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
 
   const renderRightFieldActions = () => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      gap: ActionViewGap.SMALL
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }));
   };
 

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValueView.js

@@ -1,5 +1,6 @@
 import React from "react";
 import StatusBox from "@zohodesk-private/desk-components/es/table/StatusBox/StatusBox";
+import Icon from "@zohodesk/icons/es/Icon";
 import HighlightedValueConstants from "../../../../../../cc/highlighted-value/Constants"; // @ts-ignore
 
 import style from "./css/HighlightedValue.module.css";
@@ -18,8 +19,15 @@ function HighlightedValueView(_ref, ref) {
     tooltip,
     weight,
     isDotted,
-    cursor
+    cursor,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
+  const iconElement = iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  }) : null;
   return /*#__PURE__*/React.createElement(StatusBox, {
     $customProps_container: {
       ref
@@ -29,8 +37,11 @@ function HighlightedValueView(_ref, ref) {
     $ui_weight: weight,
     $flag_wrapText: !isDotted,
     $i18n_tooltip: tooltip,
+    $render_leftChild: iconPosition === 'left' ? iconElement : null,
+    $render_rightChild: iconPosition !== 'left' ? iconElement : null,
     customStyle: {
-      pointer: cursor === "default" && style.default
+      pointer: cursor === "default" && style.default,
+      container: iconName ? style.gap : undefined
     },
     $event_onClick: () => {
       dispatch({

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/css/HighlightedValue.module.css

@@ -1,3 +1,7 @@
 .default {
     cursor: default
+}
+
+.gap {
+    gap: var(--zd_size4) ;
 }

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/LabelView.js

@@ -4,7 +4,8 @@ import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 // @ts-ignore
 import style from "./css/Label.module.css";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function LabelView(_ref, ref) {
   let {
@@ -15,7 +16,8 @@ function LabelView(_ref, ref) {
     for: htmlFor,
     isMandatory,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   return /*#__PURE__*/React.createElement(Flex, {
     ref: ref,
@@ -27,10 +29,14 @@ function LabelView(_ref, ref) {
     htmlFor: htmlFor,
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
-  }), actions.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+  }), actions.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
     actions: actions,
-    gap: ActionViewGap.XMEDIUM,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context,
+    viewMeta: {
+      layout: Layout.HORIZONTAL,
+      gap: ActionViewGap.XMEDIUM
+    }
   }) : null);
 }
 

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/MultiSelectView.js

@@ -1,10 +1,11 @@
 import React from "react";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
 import { MultiSelectConstants } from "../../../../../../cc/multi-select";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/MultiSelectView.module.css";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -24,18 +25,26 @@ function MultiSelectView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const transformedOptions = options.map(option => {
+    const {
+      context
+    } = option;
     const baseOption = option;
 
     if (option.optionActions && option.optionActions.length !== 0) {
       return { ...option,
         listItemCustomProps: {
-          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(ClientActionsRenderer, {
             actions: option.optionActions,
-            gap: ActionViewGap.SMALL,
-            clientScripts: clientScripts
+            clientScripts: clientScripts,
+            context: context,
+            viewMeta: {
+              layout: Layout.HORIZONTAL,
+              gap: ActionViewGap.SMALL
+            }
           }),
           customClass: {
             customValueRightPlaceholder: style.optionActionsContainer
@@ -51,10 +60,14 @@ function MultiSelectView(_ref, ref) {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.fieldActionsContainer
-    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }));
   };
 

package/es/library/dot/legacy-to-new-arch/radio-dropdown/frameworks/ui/RadioDropdownView.js

@@ -107,7 +107,9 @@ function RadioDropdownView(_ref, ref) {
         payload: {
           id,
           value,
-          secondaryValue
+          secondaryValue,
+          previousId: selectedId,
+          previousValue: selectedValue
         }
       });
     },

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/SelectView.js

@@ -1,10 +1,11 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Select.module.css";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function SelectView(_ref, ref) {
   let {
@@ -23,7 +24,8 @@ function SelectView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const transformedOptions = options.map(option => {
     const baseOption = {
@@ -34,10 +36,14 @@ function SelectView(_ref, ref) {
     if (option.optionActions && option.optionActions.length !== 0) {
       return { ...baseOption,
         listItemCustomProps: {
-          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(ClientActionsRenderer, {
             actions: option.optionActions,
-            gap: ActionViewGap.SMALL,
-            clientScripts: clientScripts
+            clientScripts: clientScripts,
+            context: context,
+            viewMeta: {
+              layout: Layout.HORIZONTAL,
+              gap: ActionViewGap.SMALL
+            }
           }),
           customClass: {
             customValueRightPlaceholder: style.optionActionsContainer
@@ -50,10 +56,14 @@ function SelectView(_ref, ref) {
   });
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    return actions?.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }) : null;
   };
 

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/EventHandlersFactory.js

@@ -0,0 +1,26 @@
+import TableColumnFilterConstants from "../../../../../../cc/table-column-filter/Constants";
+import { SEARCH_REQUESTED } from "../../../../../../bc/search/Constants";
+export default class EventHandlersFactory {
+  static create() {
+    const searchHandler = input => {
+      const {
+        dispatch,
+        action
+      } = input;
+      const {
+        searchText
+      } = action.payload;
+      dispatch({
+        type: SEARCH_REQUESTED,
+        payload: {
+          searchString: searchText
+        }
+      });
+    };
+
+    return {
+      [TableColumnFilterConstants.FILTER_SEARCHED]: searchHandler
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilter.js

@@ -1,12 +1,30 @@
 import { createCustomComponent } from "../../../../../custom-component";
 import TableColumnFilterProperties from "../../../../../../cc/table-column-filter/Properties";
 import TableColumnFilterEvents from "../../../../../../cc/table-column-filter/Events";
+import SearchTranslator from "../../../../../behaviours/search/adapters/presenter/SearchTranslator";
+import SearchBehaviourFactory from "../../../../../behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory";
+import EventHandlersFactory from "./EventHandlersFactory";
 import TableColumnFilterView from "./TableColumnFilterView";
+
+function transformState(state) {
+  const {
+    searchString
+  } = state.behaviours.search;
+  return { ...state,
+    viewModel: { ...state.properties,
+      ...state.viewModel,
+      options: SearchTranslator(searchString, 'value', state.properties.options)
+    }
+  };
+}
+
 const TableColumnFilter = createCustomComponent({
   name: 'TableColumnFilter',
   View: TableColumnFilterView,
+  transformState,
   properties: TableColumnFilterProperties,
+  behaviours: [SearchBehaviourFactory.create()],
   events: TableColumnFilterEvents,
-  eventHandlers: {}
+  eventHandlers: EventHandlersFactory.create()
 });
 export default TableColumnFilter;

package/es/library/dot/legacy-to-new-arch/table-column-filter/frameworks/ui/TableColumnFilterView.js

@@ -22,11 +22,12 @@ function TableColumnFilterView(_ref, ref) {
     heading,
     hasSearch,
     searchPlaceholder,
+    emptyStateMessage,
     hasClearButton,
     clearFilterLabel,
     optionTagLabel,
     taggedOption
-  } = state.properties;
+  } = state.viewModel;
 
   const handleFilter = (_ref2, e) => {
     let {
@@ -87,6 +88,7 @@ function TableColumnFilterView(_ref, ref) {
     options,
     hasSearch,
     searchPlaceholder,
+    emptyStateTitle: emptyStateMessage,
     hasClearButton,
     isClearButtonDisabled: !isFiltered,
     clearFilterLabel,

package/es/library/dot/legacy-to-new-arch/table-field-components/checkbox-field/frameworks/ui/EventHandlersFactory.js

@@ -16,7 +16,8 @@ export class EventHandlersFactory {
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: toggledValue
+          value: toggledValue,
+          previousValue: checked
         }
       });
     };