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

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/label/frameworks/ui/css/Label.module.css

@@ -1,9 +1,9 @@
 .label {
     --label_cursor: inherit
 }[dir=ltr] .label {
-    padding-right: var(--zd_size6) 
+    padding-right: 6px
 }[dir=rtl] .label {
-    padding-left: var(--zd_size6) 
+    padding-left: 6px
 }
 
 .mandatory::after {
@@ -11,9 +11,9 @@
 }
 
 [dir=ltr] .mandatory::after {
-    padding-left: var(--zd_size2) 
+    padding-left: 2px
 }
 
 [dir=rtl] .mandatory::after {
-    padding-right: var(--zd_size2) 
+    padding-right: 2px
 }

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/multi-select/frameworks/ui/css/MultiSelectView.module.css

@@ -1,27 +1,27 @@
 .fieldActionsContainer {
-    margin-top: var(--zd_size4) ;
+    margin-top: 4px;
 }
 
 [dir=ltr] .optionActionsContainer {
-    margin-left: var(--zd_size4) ;
+    margin-left: 4px;
 }
 
 [dir=rtl] .optionActionsContainer {
-    margin-right: var(--zd_size4) ;
+    margin-right: 4px;
 }
 
 .custmInputWrapper {
     position: absolute;
-    top: 0 ;
-    width: 100% ;
+    top: 0;
+    width: 100%;
 }
 
 [dir=ltr] .custmInputWrapper {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .custmInputWrapper {
-    right: 0 ;
+    right: 0;
 }
 
 .clearIconContainer {

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/radio-dropdown/frameworks/ui/css/RadioDropdown.module.css

@@ -1,6 +1,6 @@
 
 .wrapper {
-    max-width: 100% 
+    max-width: 100%
 }
 
 .disabled {
@@ -11,13 +11,13 @@
 .downIcon {
     flex-shrink: 0;
     opacity: 0.4;
-    margin-top: var(--zd_size2) 
+    margin-top: 2px
 }
 
 [dir=ltr] .downIcon {
-    margin-left: var(--zd_size4) 
+    margin-left: 4px
 }
 
 [dir=rtl] .downIcon {
-    margin-right: var(--zd_size4) 
+    margin-right: 4px
 }

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/select/frameworks/ui/css/Select.module.css

@@ -1,5 +1,5 @@
 [dir=ltr] .optionActionsContainer {
-    margin-left: var(--zd_size4) ;
+    margin-left: 4px;
 }[dir=rtl] .optionActionsContainer {
-    margin-right: var(--zd_size4) ;
+    margin-right: 4px;
 }

package/es/library/dot/legacy-to-new-arch/table-column-chooser/frameworks/ui/css/TableColumnChooserView.module.css

@@ -4,5 +4,5 @@
 }
 
 .textOverflowOptions {
-    margin-top: var(--zd_size10) 
+    margin-top: 10px
 }

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
         }
       });
     };

package/es/library/dot/legacy-to-new-arch/table-field-components/highlighted-value-field/frameworks/ui/HighlightedValueFieldView.js

@@ -10,7 +10,10 @@ export default function HighlightedValueFieldView(_ref, ref) {
     tooltip,
     weight,
     isDotted,
-    cursor
+    cursor,
+    iconName,
+    iconSize,
+    iconPosition
   } = state.properties;
   return /*#__PURE__*/React.createElement(HighlightedValue, {
     getRef: ref,
@@ -19,6 +22,9 @@ export default function HighlightedValueFieldView(_ref, ref) {
     tooltip: tooltip,
     cursor: cursor,
     weight: weight,
-    isDotted: isDotted
+    isDotted: isDotted,
+    iconName: iconName,
+    iconSize: iconSize,
+    iconPosition: iconPosition
   });
 }

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

@@ -15,13 +15,15 @@ export class EventHandlersFactory {
         fieldType
       } = state.properties;
       const {
-        id
+        id,
+        previousId
       } = action.payload;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {
           fieldName,
-          value: fieldType === 'Boolean' ? id === 'true' : id
+          value: fieldType === 'Boolean' ? id === 'true' : id,
+          previousValue: fieldType === 'Boolean' ? previousId === 'true' : previousId
         }
       });
     };

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

@@ -1,3 +1,3 @@
 .wrapper {
-    margin-inline-start: calc( var(--zd_size11) * -1 ) 
+    margin-inline-start: -11px
 }

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

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

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -3,8 +3,9 @@ import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import TextAreaConstants from "../../../../../../cc/textarea/Constants"; // @ts-ignore
 
 import style from "./css/TextAreaView.module.css";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 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";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -23,7 +24,8 @@ function TextAreaView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const textAreaRenderer = /*#__PURE__*/React.createElement(Textarea, {
     getRef: ref,
@@ -64,10 +66,14 @@ function TextAreaView(_ref, ref) {
     className: style.hasChildren
   }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
     className: style.rightPlaceholder
-  }, /*#__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/text-area/frameworks/ui/css/TextAreaView.module.css

@@ -4,13 +4,13 @@
 
 .rightPlaceholder {
     position: absolute;
-    bottom: var(--zd_size4) ;
+    bottom: 4px;
 }
 
 [dir=ltr] .rightPlaceholder {
-    right: var(--zd_size12) ;
+    right: 12px;
 }
 
 [dir=rtl] .rightPlaceholder {
-    left: var(--zd_size12) ;
+    left: 12px;
 }

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBoxView.js

@@ -1,8 +1,9 @@
 import React from "react";
 import TextBox from "@zohodesk/components/es/TextBoxIcon/TextBoxIcon";
 import TextBoxConstants from "../../../../../../cc/textbox/Constants";
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
-import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+// eslint-disable-next-line @zohodesk/architecturerules/import-contract
+import { ActionViewGap, Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
 
 function TextBoxView(_ref, ref) {
   let {
@@ -23,14 +24,19 @@ function TextBoxView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    return actions?.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      gap: ActionViewGap.SMALL
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }) : null;
   };