@zohodesk/library-platform 1.1.12-exp.1 → 1.1.12-exp.3

package/es/library/behaviours/search/applications/interfaces/output/IPresenter.js

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

package/es/library/behaviours/search/applications/interfaces/output/SearchOutputModel.js

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

package/es/library/behaviours/search/applications/usecases/AbstractUseCase.js

@@ -0,0 +1,17 @@
+class AbstractUseCase {
+  constructor(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+  updateDependencies(state, updateState) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    repository.init(state);
+    presenter.updateDependencies(state, updateState);
+  }
+
+}
+
+export default AbstractUseCase;

package/es/library/behaviours/search/applications/usecases/SearchUseCase.js

@@ -0,0 +1,28 @@
+import AbstractUseCase from "./AbstractUseCase";
+import { SEARCH_UPDATED } from "../../../../../bc/search/Constants";
+
+class SearchUseCase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const {
+      searchString,
+      dispatch
+    } = input;
+    const search = repository.getSearchEntity();
+    search.setSearchString(searchString);
+    const storeData = search.toObject();
+    presenter.updateSearchState(storeData);
+    dispatch({
+      type: SEARCH_UPDATED,
+      payload: {
+        searchString: storeData.searchString
+      }
+    });
+  }
+
+}
+
+export default SearchUseCase;

package/es/library/behaviours/search/applications/usecases/UpdatePropertiesUsecase.js

@@ -0,0 +1,25 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class UpdatePropertiesUsecase extends AbstractUseCase {
+  execute(input) {
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const {
+      searchString,
+      previousSearchString
+    } = input;
+
+    if (searchString === previousSearchString) {
+      return;
+    }
+
+    const search = repository.getSearchEntity();
+    search.setSearchString(searchString);
+    presenter.updateSearchState(search.toObject());
+  }
+
+}
+
+export default UpdatePropertiesUsecase;

package/es/library/behaviours/search/domain/entities/Search.js

@@ -0,0 +1,23 @@
+class Search {
+  constructor() {
+    let searchString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    this.searchString = searchString;
+  }
+
+  setSearchString(searchString) {
+    this.searchString = searchString;
+  }
+
+  getSearchString() {
+    return this.searchString;
+  }
+
+  toObject() {
+    return {
+      searchString: this.searchString
+    };
+  }
+
+}
+
+export default Search;

package/es/library/behaviours/search/domain/entities/interfaces/ISearch.js

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

package/es/library/behaviours/search/frameworks/ui/EventHandlerFactory.js

@@ -0,0 +1,25 @@
+import LifeCycleAction from "../../../../../cc/architecture/LifeCycleActionEnum";
+import { SEARCH_REQUESTED } from "../../../../../bc/search/Constants";
+import SearchController from "../../adapters/controllers/SearchController";
+import Repository from "../../adapters/gateway/Repository";
+import Service from "../../adapters/gateway/Service";
+import Presenter from "../../adapters/presenter/Presenter";
+import UpdatePropertiesController from "../../adapters/controllers/UpdatePropertiesController";
+
+class EventHandlersFactory {
+  static create() {
+    const presenter = new Presenter();
+    const repository = new Repository();
+    const service = new Service({
+      presenter,
+      repository
+    });
+    return {
+      [LifeCycleAction.UPDATE_PROPERTIES]: new UpdatePropertiesController(service).handle,
+      [SEARCH_REQUESTED]: new SearchController(service).handle
+    };
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory.js

@@ -0,0 +1,26 @@
+import EventHandlersFactory from "./EventHandlerFactory";
+import SearchBehaviourProperties from "../../../../../bc/search/Properties";
+
+class SearchBehaviourFactory {
+  static create() {
+    return {
+      name: 'search',
+      setInitialState: _ref => {
+        let {
+          properties
+        } = _ref;
+        const {
+          searchString = ''
+        } = properties;
+        return {
+          searchString
+        };
+      },
+      properties: SearchBehaviourProperties,
+      eventHandlers: EventHandlersFactory.create()
+    };
+  }
+
+}
+
+export default SearchBehaviourFactory;

package/es/library/custom-component/adapters/gateways/event-manager/EventManager.js

@@ -1,6 +1,7 @@
 // @ts-ignore
 if (__DEVELOPMENT__) {
   globalThis.enableEventLogging = false;
+  globalThis.enableLifeCycleEventLogging = false;
   globalThis.enableEventVerbose = false;
 }
 
@@ -185,6 +186,10 @@ class EventManager {
     // @ts-ignore
     if (__DEVELOPMENT__) {
       if (globalThis.enableEventLogging && type) {
+        if (!globalThis.enableLifeCycleEventLogging && (type.endsWith('#MOUNT') || type.endsWith('#UN_MOUNT') || type.endsWith('#UPDATE_PROPERTIES') || type.endsWith('#STATE_UPDATED'))) {
+          return;
+        }
+
         const {
           msg,
           styles: nameStyles

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

@@ -113,7 +113,7 @@ export default class ComponentProperties {
   }
 
   getAppendToActionPayloadProperty() {
-    return this.properties.getAppendToActionPayloadProperty();
+    return this.findProperty("appendToActionPayload").getValue();
   }
 
 }

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

@@ -27,7 +27,7 @@ export default class Logger {
         warnings?.forEach(warning => {
           this.printResult(key, warning, 'warning');
         });
-        console.log('%cBut, Given is:', 'color: white;font-weight: bold;', {
+        console.log('%cBut, Given is:', 'color: inherit;font-weight: bold;', {
           [key]: value
         });
       });
@@ -61,11 +61,11 @@ export default class Logger {
       const log = type === 'error' ? console.error : console.warn;
 
       if (errorOrWarning.dataPath) {
-        log(`Invalid Property %c${key}%c${errorOrWarning.dataPath} %c${errorOrWarning.message}`, ERROR_PRIMARY, ERROR_SECONDARY, 'color: white;');
+        log(`Invalid Property %c${key}%c${errorOrWarning.dataPath} %c${errorOrWarning.message}`, ERROR_PRIMARY, ERROR_SECONDARY, 'color: inherit;');
         return;
       }
 
-      log(`Invalid Property %c${key} : %c${errorOrWarning.message}`, ERROR_PRIMARY, 'color: white;');
+      log(`Invalid Property %c${key} : %c${errorOrWarning.message}`, ERROR_PRIMARY, 'color: inherit;');
     }
   }
 

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

@@ -11,6 +11,7 @@ import IconButton from "../../../../legacy-to-new-arch/icon-button/frameworks/ui
 import HighlightedValue from "../../../../legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue";
 import Switch from "../../../../legacy-to-new-arch/switch/frameworks/ui/Switch";
 import ListItem from "../../../../legacy-to-new-arch/list-item/frameworks/ui/ListItem";
+import Ribbon from "../../../../legacy-to-new-arch/ribbon/frameworks/ui/Ribbon";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
@@ -23,6 +24,7 @@ const ActionComponentMapping = {
   ['TableColumnFilter']: TableColumnFilter,
   ['Breadcrumb']: Breadcrumb,
   ['IconButton']: IconButton,
-  ['HighlightedValue']: HighlightedValue
+  ['HighlightedValue']: HighlightedValue,
+  ['Ribbon']: Ribbon
 };
 export default ActionComponentMapping;

package/es/library/dot/components/table-list/adapters/controllers/ScrollController.js

@@ -1,4 +1,4 @@
-import { ZLIST_FETCH_MORE } from "../../../../../../bc/zlist/Constants";
+import { TableListConstants } from "../../../../../../cc/table-list";
 import AbstractController from "./AbstractController";
 
 class ScrollController extends AbstractController {
@@ -21,7 +21,7 @@ class ScrollController extends AbstractController {
 
     if (isEndReached) {
       dispatch({
-        type: ZLIST_FETCH_MORE,
+        type: TableListConstants.TABLE_LIST_SCROLL_END_REACHED,
         payload: {}
       });
     }

package/es/library/dot/components/table-list/adapters/controllers/index.js

@@ -1,8 +1,6 @@
 export { default as SelectItemController } from "./SelectItemController";
 export { default as SelectAllController } from "./SelectAllController";
 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 KeyboardRowSelectController } from "./KeyboardRowSelectController";

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

@@ -1,5 +1,5 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, KeyboardRowSelectController, KeyboardRowClickController, ResolutionBasedCountController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, KeyboardRowSelectController, KeyboardRowClickController, ResolutionBasedCountController } 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";
@@ -14,7 +14,6 @@ class EventHandlersFactory {
       [TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION]: new SelectItemController().handle,
       [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: new SelectAllController().handle,
       [TableListConstants.TABLE_LIST_SCROLLED]: new ScrollController().handle,
-      [TableListConstants.TABLE_LIST_SORTED]: new SortByController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: new FieldChangeController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: new FieldClickController().handle
     };

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

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import Table from '@zohodesk-private/desk-components/es/table/Table/Table';
+import FloatingPagination from "../../../../legacy-to-new-arch/floating-pagination/frameworks/ui/FloatingPagination";
 import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
 import Rows from "./sub-components/Rows";
@@ -35,6 +36,7 @@ function TableListView(_ref2, _ref) {
     rowActionsConfig,
     keyboardControlsConfig,
     textOverflowConfig,
+    floatPaginationConfig,
     selection,
     emptyStateUiType,
     isError
@@ -56,6 +58,16 @@ function TableListView(_ref2, _ref) {
   const isReorderEnabled = reOrderConfig.isEnabled;
   const isSelectionEnabled = selectionConfig.isEnabled;
   const isMultiline = textOverflowConfig.mode === 'wrap';
+  const {
+    isEnabled: isPaginationEnabled,
+    scrollCount,
+    totalCount,
+    scrollToUpTooltip,
+    scrollToDownTooltip,
+    isTopReached,
+    isBottomReached,
+    isVisible
+  } = floatPaginationConfig;
   const className = getTableListClassName({
     isKeyboardControlsEnabled,
     isReorderEnabled,
@@ -70,6 +82,9 @@ function TableListView(_ref2, _ref) {
     "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement(Table, {
     ref: TableRef,
+    customStyle: !isLoading && isPaginationEnabled ? {
+      table: style.paginationSpace
+    } : undefined,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
@@ -110,7 +125,15 @@ function TableListView(_ref2, _ref) {
   }), /*#__PURE__*/React.createElement(Loading, {
     isLoading: isLoading,
     hasRows: hasRows
-  })), renderColumnResizingLine(resizerState));
+  })), renderColumnResizingLine(resizerState), isPaginationEnabled && isVisible && scrollCount > 0 && totalCount !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: style.pagination
+  }, /*#__PURE__*/React.createElement(FloatingPagination, {
+    text: `${scrollCount}/${totalCount}`,
+    scrollToUpTooltip: scrollToUpTooltip,
+    scrollToDownTooltip: scrollToDownTooltip,
+    isScrollToUpDisabled: isTopReached,
+    isScrollToDownDisabled: isBottomReached
+  })));
 }
 
 function renderHeader(_ref3) {

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

@@ -136,15 +136,19 @@
     /*  */
 }
 
+.paginationSpace {
+    padding-bottom: var(--zd_size70) ;
+}
+
 .loader {
-    padding: var(--zd_size40) 0 
+    padding: var(--zd_size20) 0 
 }
 
 .wrapper {
     height: 100% ;
     width: 100% ;
     z-index: 1;
-    position: relative
+    position: relative;
 }
 
 .hiddenDummyRow {
@@ -333,4 +337,17 @@
 [dir=rtl] .massActionHeader {
     right: var(--local-tableList-massActionHeader-left, 0);
     padding-left: var(--local-tableList-massActionHeader-paddingRight, 0);
+}
+
+.pagination {
+    composes: posab from '~@zohodesk/components/lib/common/common.module.css';
+    bottom: var(--zd_size20) ;
+}
+
+[dir=ltr] .pagination {
+    right: var(--zd_size30) ;
+}
+
+[dir=rtl] .pagination {
+    left: var(--zd_size30) ;
 }

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

@@ -124,11 +124,7 @@ const DragHandler = SortableHandle(_ref3 => {
   } = _ref3;
   return /*#__PURE__*/React.createElement(DragHandle, {
     isDisabled: isDisabled,
-    customProps: {
-      containerProps: {
-        $ui_alignItems: isMultiline ? 'start' : 'center'
-      }
-    },
+    iconVerticalPlacement: isMultiline ? 'top' : 'middle',
     customStyle: {
       container: style.dragHandleContainer
     }

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

@@ -13,6 +13,8 @@ export default function ActionIconView(_ref, ref) {
     iconSize,
     hasPadding,
     label,
+    colorVariant,
+    isHoverable,
     hoverVariant,
     isDisabled
   } = state.properties;
@@ -23,11 +25,13 @@ export default function ActionIconView(_ref, ref) {
     ref: ref,
     $ui_iconName: icon,
     $ui_size: JSON.stringify(iconSize),
+    $ui_colorVariant: colorVariant,
+    $flag_isHoverable: isHoverable,
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
     $flag_hasPadding: hasPadding,
-    customStyle: hoverVariant === 'default' ? {
+    customStyle: !isHoverable && hoverVariant === 'default' ? {
       icon: style.cursor_default
     } : undefined,
     $event_onClick: !isDisabled ? () => {

package/es/library/dot/legacy-to-new-arch/floating-pagination/frameworks/ui/FloatingPagination.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import FloatingPaginationProperties from "../../../../../../cc/floating-pagination/Properties";
+import FloatingPaginationView from "./FloatingPaginationView";
+let WrapFloatingPagination = createCustomComponent({
+  name: "FloatingPagination",
+  View: FloatingPaginationView,
+  properties: FloatingPaginationProperties,
+  eventHandlers: {}
+});
+export default WrapFloatingPagination;

package/es/library/dot/legacy-to-new-arch/floating-pagination/frameworks/ui/FloatingPaginationView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import FloatingPagination from '@zohodesk-private/desk-components/es/ListPagination/ListPagination';
+import FloatingPaginationConstants from "../../../../../../cc/floating-pagination/Constants";
+
+function FloatingPaginationView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  let {
+    text,
+    hasScrollControls,
+    scrollToUpTooltip,
+    scrollToDownTooltip,
+    isScrollToUpDisabled,
+    isScrollToDownDisabled
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(FloatingPagination, {
+    text: text,
+    hasScrollControls: hasScrollControls,
+    scrollToUpTooltip: scrollToUpTooltip,
+    scrollToDownTooltip: scrollToDownTooltip,
+    customProps: {
+      container: {
+        eleRef: ref
+      }
+    },
+    isScrollToUpDisabled: isScrollToUpDisabled,
+    isScrollToDownDisabled: isScrollToDownDisabled,
+    onScrollToUp: () => {
+      dispatch({
+        type: FloatingPaginationConstants.SCROLL_UP_CLICKED
+      });
+    },
+    onScrollToDown: () => {
+      dispatch({
+        type: FloatingPaginationConstants.SCROLL_DOWN_CLICKED
+      });
+    },
+    testId: "listPagination"
+  });
+}
+
+export default FloatingPaginationView;

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

@@ -68,6 +68,7 @@ function RadioDropdownView(_ref, ref) {
     isAbsolutePositioningNeeded: true,
     defaultPosition: "bottomRight",
     dropboxSize: "large",
+    testId: "radioDropdown",
     dropboxHeaderElementsOrder: dropboxHeaderElementsOrder,
     isMultilineEnabled: true,
     isFocusScopeEnabled: true,

package/es/library/dot/legacy-to-new-arch/ribbon/frameworks/ui/Ribbon.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import RibbonProperties from "../../../../../../cc/ribbon/Properties";
+import RibbonView from "./RibbonView";
+let Ribbon = createCustomComponent({
+  name: "Ribbon",
+  View: RibbonView,
+  properties: RibbonProperties,
+  eventHandlers: {}
+});
+export default Ribbon;

package/es/library/dot/legacy-to-new-arch/ribbon/frameworks/ui/RibbonView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Ribbon from '@zohodesk-private/desk-components/es/Ribbon/Ribbon';
+const paletteMapper = {
+  secondary: 'grey',
+  warning: 'orange'
+};
+
+function RibbonView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  let {
+    text,
+    palette,
+    iconName,
+    iconSize,
+    size,
+    flagPlacement
+  } = state.properties;
+  palette = paletteMapper[palette] || palette;
+  return /*#__PURE__*/React.createElement(Ribbon, {
+    text: text,
+    palette: palette,
+    iconName: iconName,
+    iconSize: iconSize,
+    size: size,
+    arrowDirection: flagPlacement,
+    isInline: true,
+    customProps: {
+      container: {
+        eleRef: ref
+      }
+    }
+  });
+}
+
+export default RibbonView;

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

@@ -1,5 +1,7 @@
 import RadioDropdownConstants from "../../../../../../../cc/radio-dropdown/Constants";
 import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+import { SEARCH_REQUESTED } from "../../../../../../../bc/search/Constants";
+import Constants from "../../../../../../../cc/radio-dropdown/Constants";
 export class EventHandlersFactory {
   static create() {
     const changeHandler = input => {
@@ -25,6 +27,18 @@ export class EventHandlersFactory {
     };
 
     return {
+      [Constants.RADIO_DROPDOWN_SEARCHED]: _ref => {
+        let {
+          dispatch,
+          action
+        } = _ref;
+        dispatch({
+          type: SEARCH_REQUESTED,
+          payload: {
+            searchString: action.payload.value
+          }
+        });
+      },
       [RadioDropdownConstants.RADIO_DROPDOWN_VALUE_CHANGED]: changeHandler
     };
   }

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/RadioDropdownField.js

@@ -3,9 +3,13 @@ import RadioDropdownProperties from "../../../../../../../cc/radio-dropdown/Prop
 import FieldEvents from "../../../../../../../cc/fields/field/Events";
 import RadioDropdownFieldView from "./RadioDropdownFieldView";
 import { EventHandlersFactory } from "./EventHandlersFactory";
+import SearchTranslator from "../../../../../../behaviours/search/adapters/presenter/SearchTranslator";
+import SearchBehaviourFactory from "../../../../../../behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory";
 const RadioDropdownField = createCustomComponent({
   name: 'RadioDropdownField',
   View: RadioDropdownFieldView,
+  transformState,
+  behaviours: [SearchBehaviourFactory.create()],
   properties: { ...RadioDropdownProperties,
     fieldType: {
       required: false,
@@ -29,4 +33,17 @@ const RadioDropdownField = createCustomComponent({
   events: FieldEvents,
   eventHandlers: EventHandlersFactory.create()
 });
+
+function transformState(state) {
+  const {
+    searchString
+  } = state.behaviours.search;
+  return { ...state,
+    viewModel: { ...state.properties,
+      ...state.viewModel,
+      options: SearchTranslator(searchString, 'value', state.properties.options)
+    }
+  };
+}
+
 export default RadioDropdownField;

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/RadioDropdownFieldView.js

@@ -20,7 +20,7 @@ export default function RadioDropdownFieldView(_ref, ref) {
     emptyStateTitle,
     isDisabled,
     isReadOnly
-  } = state.properties;
+  } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
     $ui_displayMode: "flex",
     $ui_className: color === 'none' ? style.wrapper : ''

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-list-dropdown-field/frameworks/ui/TagsListDropdownField.js

@@ -2,11 +2,43 @@ import { createCustomComponent } from "../../../../../../custom-component";
 import TagsListDropdownProperties from "../../../../../../../cc/tags-list-dropdown/Properties";
 import FieldEvents from "../../../../../../../cc/fields/field/Events";
 import TagsListDropdownFieldView from "./TagsListDropdownFieldView";
+import SearchBehaviourFactory from "../../../../../../behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory";
+import Constants from "../../../../../../../cc/tags-list-dropdown/Constants";
+import { SEARCH_REQUESTED } from "../../../../../../../bc/search/Constants";
+import SearchTranslator from "../../../../../../behaviours/search/adapters/presenter/SearchTranslator";
 const TagsListDropdownField = createCustomComponent({
   name: 'TagsListDropdownField',
   View: TagsListDropdownFieldView,
+  transformState,
+  behaviours: [SearchBehaviourFactory.create()],
   properties: TagsListDropdownProperties,
   events: FieldEvents,
-  eventHandlers: {}
+  eventHandlers: {
+    [Constants.TAG_LIST_DROPDOWN_SEARCHED]: _ref => {
+      let {
+        dispatch,
+        action
+      } = _ref;
+      dispatch({
+        type: SEARCH_REQUESTED,
+        payload: {
+          searchString: action.payload.value
+        }
+      });
+    }
+  }
 });
+
+function transformState(state) {
+  const {
+    searchString
+  } = state.behaviours.search;
+  return { ...state,
+    viewModel: { ...state.properties,
+      ...state.viewModel,
+      tags: SearchTranslator(searchString, 'label', state.properties.tags)
+    }
+  };
+}
+
 export default TagsListDropdownField;

package/es/library/dot/legacy-to-new-arch/table-field-components/tags-list-dropdown-field/frameworks/ui/TagsListDropdownFieldView.js

@@ -11,7 +11,7 @@ export default function TagsListDropdownFieldView(_ref, ref) {
     text,
     dropdownHeading,
     emptyMessage
-  } = state.properties;
+  } = state.viewModel;
   return /*#__PURE__*/React.createElement(TagsListDropdown, {
     getRef: ref,
     tags: tags,