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

package/es/library/behaviours/sort-by/frameworks/ui/SortByBehaviourFactory.js

@@ -1,20 +1,30 @@
-import Properties from "../../../../../bc/sort-by/Properties";
+import properties from "../../../../../bc/sort-by/Properties";
 import ActionsHandlerFactory from "./ActionsHandlerFactory";
+import { SortModelOrder } from "../../../../../platform/zlist/domain/entities/interfaces/Properties";
+import { SortOrder } from "../../../../../bc/zlist/Types";
 
 class SortByBehaviourFactory {
   static create() {
     return {
       name: 'sortBy',
-      setInitialState: _ref => {
-        let {
+      setInitialState: args => {
+        const {
           properties
-        } = _ref;
+        } = args;
         const {
-          sortBy
+          sortConfig
         } = properties;
-        return sortBy || {};
+        const {
+          defaultSortField,
+          defaultSortOrder
+        } = sortConfig;
+        let finalOrder = defaultSortOrder === SortModelOrder.DES ? SortOrder.DES : SortOrder.ASC;
+        return {
+          order: finalOrder,
+          fieldName: defaultSortField
+        };
       },
-      properties: Properties,
+      properties,
       eventHandlers: ActionsHandlerFactory.create()
     };
   }

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;
 }
 
@@ -42,11 +43,11 @@ class EventManager {
   }
 
   unSubscribe(events) {
-    events.forEach((eventHandlers, key) => {
-      this._element && eventHandlers.map(eventHandler => {
+    if (this._element) {
+      events.forEach((eventHandler, key) => {
         this._element.removeEventListener(key, eventHandler);
       });
-    });
+    }
   }
 
   dispatch(event) {
@@ -91,6 +92,7 @@ class EventManager {
         code: ErrorCode.InvalidSchema,
         error: e
       };
+      __DEVELOPMENT__ && console.error('Schema Validation Error: ', e);
     }
 
     return error;
@@ -185,6 +187,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/applications/usecases/DispatchUseCase.js

@@ -35,6 +35,7 @@ class DispatchUseCase extends AbstractUseCase {
         eventManager.dispatch(action);
       }
     } catch (e) {
+      __DEVELOPMENT__ && console.error('ACA DispatchUseCase Error: ', e);
       component.setError(e);
       presenter.setError(e);
     }

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

@@ -15,6 +15,7 @@ class InitializeUseCase extends AbstractUseCase {
       let state = component.getState();
       presenter.render(state);
     } catch (e) {
+      __DEVELOPMENT__ && console.error('ACA InitializeUseCase Error: ', e);
       const error = component.getClassifiedErrorStructure(e);
       component.setError(error);
       presenter.setError(error);

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

@@ -18,6 +18,7 @@ class MountUsecase extends AbstractUseCase {
         eventManager.dispatch(mountAction);
       }
     } catch (e) {
+      __DEVELOPMENT__ && console.error('ACA MountUsecase Error: ', e);
       component.setError(e);
       presenter.setError(e);
     }

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

@@ -11,6 +11,12 @@ class SetRefUseCase extends AbstractUseCase {
       eventManager
     } = this.dependencies;
     const component = repository.getComponent();
+
+    if (!component) {
+      // NOTE:  need to check why component is null
+      return;
+    }
+
     const eventHandlers = component.getEventHandlersWrapper();
 
     try {
@@ -20,6 +26,7 @@ class SetRefUseCase extends AbstractUseCase {
         eventManager.subscribe(eventHandlers);
       }
     } catch (e) {
+      __DEVELOPMENT__ && console.error('ACA SetRefUseCase Error: ', e);
       const error = component.getClassifiedErrorStructure(e);
       component.setError(error);
       presenter.setError(error);

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

@@ -16,6 +16,7 @@ class UnmountUsecase extends AbstractUseCase {
       eventManager.unSubscribe(eventHanlders);
       repository.clear();
     } catch (e) {
+      __DEVELOPMENT__ && console.error('ACA UnmountUsecase Error: ', e);
       component.setError(null);
       presenter.setError(null);
     }

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

@@ -28,6 +28,7 @@ class UpdatePropertyUseCase extends AbstractUseCase {
         }));
       }
     } catch (error) {
+      __DEVELOPMENT__ && console.error('ACA UpdatePropertyUseCase Error: ', error);
       component.setError(error);
       presenter.setError(error);
     }

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

@@ -210,6 +210,7 @@ export default class Component {
               ...helpers
             });
           } catch (e) {
+            __DEVELOPMENT__ && console.error(`ACA ${key} Event Handler Error: `, e);
             const error = {
               code: ErrorCodes.EVENT_HANDLER_FAILED,
               message: 'Error occurred in event handler for event ' + key,

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

@@ -12,7 +12,7 @@ export default class Logger {
 
 
   logPropertiesValidation(validationResults) {
-    if (__DEVELOPMENT__) {
+    if (__DEVELOPMENT__ && validationResults) {
       console.group(`%cProperties Validation: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, validationResults);
       validationResults.forEach(_ref => {
         let {
@@ -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
         });
       });
@@ -44,14 +44,9 @@ export default class Logger {
         return;
       }
 
-      console.group(`%cError Occurred: %c${this.componentName}`, ERROR_PRIMARY, ERROR_SECONDARY, error);
-      console.error(`%cError Code: %c${error.code}`, ERROR_PRIMARY, ERROR_SECONDARY);
-      console.error(`%cError Message: %c${error.message}`, ERROR_PRIMARY, ERROR_SECONDARY);
-
-      if (error.errorDetails?.originalError) {
-        console.error(error.errorDetails.originalError);
-      }
-
+      console.group(`%cError Occurred: %c${this.componentName}`, ERROR_SECONDARY, ERROR_PRIMARY, error);
+      console.error(`%cError Code: %c${error.code}`, ERROR_SECONDARY, ERROR_PRIMARY);
+      console.error(`%cError Message: %c${error.message}`, ERROR_SECONDARY, ERROR_PRIMARY);
       console.groupEnd();
     }
   }
@@ -61,11 +56,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,9 @@ 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";
+import Search from "../../../../legacy-to-new-arch/action-band-components/search/frameworks/ui/Search";
+import SortDropdown from "../../../../legacy-to-new-arch/sort-dropdown/frameworks/ui/SortDropdown";
 const ActionComponentMapping = {
   ['ActionIcon']: ActionIcon,
   ['Button']: Button,
@@ -23,6 +26,9 @@ const ActionComponentMapping = {
   ['TableColumnFilter']: TableColumnFilter,
   ['Breadcrumb']: Breadcrumb,
   ['IconButton']: IconButton,
-  ['HighlightedValue']: HighlightedValue
+  ['HighlightedValue']: HighlightedValue,
+  ['Ribbon']: Ribbon,
+  ['Search']: Search,
+  ['SortDropdown']: SortDropdown
 };
 export default ActionComponentMapping;

package/es/library/dot/components/form-fields/currency/frameworks/ui/CurrencyView.js

@@ -18,6 +18,7 @@ function CurrencyView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     errorMessage,
     disabled,
     readonly,
@@ -54,6 +55,7 @@ function CurrencyView(_ref, ref) {
     id: id,
     value: formattedValue,
     placeholder: placeholder,
+    maxLength: maxLength,
     disabled: disabled,
     readonly: readonly,
     required: required,

package/es/library/dot/components/form-fields/decimal/frameworks/ui/DecimalView.js

@@ -13,6 +13,7 @@ function DecimalView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     errorMessage,
     disabled,
     readonly,
@@ -42,6 +43,7 @@ function DecimalView(_ref, ref) {
     id: id,
     placeholder: placeholder,
     value: value,
+    maxLength: maxLength,
     required: required,
     disabled: disabled,
     readonly: readonly,

package/es/library/dot/components/form-fields/email/frameworks/ui/Email.js

@@ -1,5 +1,5 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import EmailProperties from "../../../../../../../cc/fields/text/Properties";
+import EmailProperties from "../../../../../../../cc/fields/email/Properties";
 import EmailView from "./EmailView";
 import EventHandlersFactory from "./EventHandlerFactory";
 import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";

package/es/library/dot/components/form-fields/email/frameworks/ui/EmailView.js

@@ -13,6 +13,7 @@ function EmailView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     disabled,
     readonly,
     errorMessage,
@@ -42,6 +43,7 @@ function EmailView(_ref, ref) {
     id: id,
     placeholder: placeholder,
     value: value,
+    maxLength: maxLength,
     disabled: disabled,
     readonly: readonly,
     required: required,

package/es/library/dot/components/form-fields/number/frameworks/ui/NumberView.js

@@ -13,6 +13,7 @@ function NumberView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     errorMessage,
     disabled,
     readonly,
@@ -42,6 +43,7 @@ function NumberView(_ref, ref) {
     id: id,
     placeholder: placeholder,
     value: value,
+    maxLength: maxLength,
     disabled: disabled,
     readonly: readonly,
     required: required,

package/es/library/dot/components/form-fields/phone/frameworks/ui/PhoneView.js

@@ -13,6 +13,7 @@ function PhoneView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     errorMessage,
     disabled,
     readonly,
@@ -42,6 +43,7 @@ function PhoneView(_ref, ref) {
     id: id,
     placeholder: placeholder,
     value: value,
+    maxLength: maxLength,
     disabled: disabled,
     readonly: readonly,
     required: required,

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextArea.js

@@ -1,5 +1,5 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import TextAreaProperties from "../../../../../../../cc/fields/text/Properties";
+import TextAreaProperties from "../../../../../../../cc/fields/multi-line/Properties";
 import TextAreaView from "./TextAreaView";
 import EventHandlerFactory from "./EventHandlerFactory";
 import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextAreaView.js

@@ -20,7 +20,8 @@ function TextAreaView(_ref, ref) {
     uiConfig,
     labelActions,
     actions,
-    clientScripts
+    clientScripts,
+    maxLength
   } = state.properties;
   const {
     size,
@@ -46,7 +47,8 @@ function TextAreaView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    maxLength: maxLength
   })));
 }
 

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.js

@@ -13,6 +13,7 @@ function TextBoxView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     errorMessage,
     disabled,
     readonly,
@@ -42,6 +43,7 @@ function TextBoxView(_ref, ref) {
     id: id,
     placeholder: placeholder,
     value: value,
+    maxLength: maxLength,
     required: required,
     disabled: disabled,
     readonly: readonly,

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.js

@@ -13,6 +13,7 @@ function UrlView(_ref, ref) {
     label,
     value,
     placeholder,
+    maxLength,
     uiConfig,
     errorMessage,
     disabled,
@@ -42,6 +43,7 @@ function UrlView(_ref, ref) {
     id: id,
     placeholder: placeholder,
     value: value,
+    maxLength: maxLength,
     disabled: disabled,
     readonly: readonly,
     required: required,

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/header/HeaderData.js

@@ -41,7 +41,7 @@ function HeaderData(_ref) {
       },
       $customProps_container: hasActions ? {
         $ui_displayMode: 'flex',
-        $ui_alignItems: 'center',
+        $ui_alignItems: isMultiline ? 'baseline' : 'center',
         $ui_justifyContent: AlignmentOfFlex[alignment]
       } : null,
       customStyle: hasActions ? {

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

@@ -10,6 +10,8 @@ import TableRowProperties from "../../../../../../../../cc/table-list/row/Proper
 import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
 import { SortableHandle } from 'react-sortable-hoc'; // @ts-ignore
 
+import arrowStyle from '@zohodesk/components/es/shared/ArrowIcon/ArrowIcon.module.css'; // @ts-ignore
+
 import style from "../../css/TableList.module.css";
 
 function RowView(_ref, ref) {
@@ -63,7 +65,7 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
-      tableList: style.row,
+      tableList: `${arrowStyle.transparentContainer} ${style.row}`,
       $pointer: style[`rowCursor_${cursor}`]
     }
   }, renderReorderer({
@@ -122,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-band-components/search/frameworks/ui/Search.js

@@ -0,0 +1,41 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import SearchProperties from "../../../../../../../cc/search/Properties";
+import SearchEvents from "../../../../../../../cc/search/Events";
+import SearchView from "./SearchView";
+import SearchBehaviourFactory from "../../../../../../behaviours/search-box/frameworks/ui/SearchBehaviourFactory";
+import { SEARCH_TYPE_CLEAR_REQUESTED, SEARCH_TYPE_UPDATE_REQUESTED } from "../../../../../../../bc/search-box/Constants";
+import SearchTranslator from "./SearchTranslator";
+import { SearchConstants } from "../../../../../../../cc/search";
+let Search = createCustomComponent({
+  name: "Search",
+  View: SearchView,
+  properties: SearchProperties,
+  events: SearchEvents,
+  transformState: SearchTranslator.transformState,
+  eventHandlers: {
+    [SearchConstants.SEARCH_REQUESTED]: _ref => {
+      let {
+        action,
+        dispatch
+      } = _ref;
+      const {
+        payload
+      } = action;
+      dispatch({
+        type: SEARCH_TYPE_UPDATE_REQUESTED,
+        payload
+      });
+    },
+    [SearchConstants.SEARCH_CLEARED]: _ref2 => {
+      let {
+        action,
+        dispatch
+      } = _ref2;
+      dispatch({
+        type: SEARCH_TYPE_CLEAR_REQUESTED
+      });
+    }
+  },
+  behaviours: [SearchBehaviourFactory.create()]
+});
+export default Search;

package/es/library/dot/legacy-to-new-arch/action-band-components/search/frameworks/ui/SearchTranslator.js

@@ -0,0 +1,16 @@
+export default class SearchTranslator {
+  static transformState(state) {
+    const {
+      search
+    } = state.behaviours;
+    const {
+      searchQuery
+    } = search;
+    return { ...state,
+      viewModel: { ...state.viewModel,
+        value: searchQuery
+      }
+    };
+  }
+
+}