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

package/es/library/dot/components/section/frameworks/ui/RenderField.js

@@ -5,6 +5,7 @@ import ComponentRegistry from "../../../../../custom-component/frameworks/ui/Com
 export function renderField(field, key, clientScripts) {
   const {
     type,
+    context,
     ...properties
   } = field;
   const Component = ComponentRegistry.get(type);
@@ -17,6 +18,7 @@ export function renderField(field, key, clientScripts) {
   return /*#__PURE__*/React.createElement(Component, _extends({
     key: key
   }, properties, {
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   }));
 }

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
 import { renderField } from "./RenderField";
-import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
+import { ActionViewGap, Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Section.module.css";
+import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
 
 function SectionView(_ref, ref) {
   let {
@@ -21,7 +21,8 @@ function SectionView(_ref, ref) {
     fields,
     titleActions,
     headerActions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
 
   const renderActions = actions => {
@@ -30,10 +31,14 @@ function SectionView(_ref, ref) {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.LARGE,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.LARGE
+      }
     }));
   };
 

package/es/library/dot/components/section/frameworks/ui/css/Section.module.css

@@ -1,11 +1,11 @@
 .fieldsContainer {
-    padding-top: var(--zd_size1) 
+    padding-top: 1px
 }
 
 [dir=ltr] .actionContainer {
-    margin-left: var(--zd_size8) ;
+    margin-left: 8px;
 }
 
 [dir=rtl] .actionContainer {
-    margin-right: var(--zd_size8) ;
+    margin-right: 8px;
 }

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

@@ -13,7 +13,8 @@ class FieldChangeController extends AbstractController {
     } = state;
     const {
       fieldName,
-      value
+      value,
+      previousValue
     } = action.payload;
     const {
       id
@@ -23,7 +24,8 @@ class FieldChangeController extends AbstractController {
       payload: {
         rowId: id,
         fieldName,
-        value
+        value,
+        previousValue
       }
     });
   }

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/css/TableList.module.css

@@ -137,39 +137,39 @@
 }
 
 .paginationSpace {
-    padding-bottom: var(--zd_size70) ;
+    padding-bottom: 70px;
 }
 
 .loader {
-    padding: var(--zd_size20) 0 
+    padding: 20px 0
 }
 
 .wrapper {
-    height: 100% ;
-    width: 100% ;
+    height: 100%;
+    width: 100%;
     z-index: 1;
     position: relative;
 }
 
 .hiddenDummyRow {
-    height: var(--zd_size40) ;
-    width: 0 ;
+    height: 40px;
+    width: 0;
     position: absolute;
     z-index: -100;
-    top: 0 ;
+    top: 0;
     pointer-events: none;
 }
 
 [dir=ltr] .hiddenDummyRow {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .hiddenDummyRow {
-    right: 0 ;
+    right: 0;
 }
 
 .resizerSpace {
-    width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
+    width: calc(var(--local_table_resizer_extra_space, 0) * 1px);
     flex-shrink: 0
 }
 
@@ -178,32 +178,32 @@
 }
 
 [dir=ltr] .contentWrapper {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .contentWrapper {
-    right: 0 ;
+    right: 0;
 }
 
 .initialLoading {
-    height: calc(100% - (var(--zd_size100)))
+    height: calc(100% - 100px)
 }
 
 .emptyContent {
-    padding: var(--zd_size160) 0 var(--zd_size60) 
+    padding: 160px 0 60px
 }
 
 .errorContent {
-    padding: var(--zd_size60) 0 
+    padding: 60px 0
 }
 
 .headerWithActions,
 .fieldWithActions {
-    gap: var(--zd_size6) 
+    gap: 6px
 }
 
 .actions {
-    gap: var(--zd_size8) 
+    gap: 8px
 }
 
 .rowCursor_default {
@@ -248,7 +248,7 @@
 }
 
 .dragHandleContainer {
-    height: 100% ;
+    height: 100%;
     opacity: 0;
     visibility: hidden;
 }
@@ -272,8 +272,8 @@
 }
 
 .rowDropIndicator {
-    width: 100% ;
-    height: var(--zd_size2) ;
+    width: 100%;
+    height: 2px;
     /* css:theme-validation:ignore */
     position: absolute;
     z-index: 2;
@@ -281,11 +281,11 @@
 }
 
 .dropIndicatorTop {
-    top: 0 ;
+    top: 0;
 }
 
 .dropIndicatorBottom {
-    bottom: calc( var(--zd_size3) * -1 ) ;
+    bottom: -3px;
 }
 
 .row {
@@ -341,13 +341,13 @@
 
 .pagination {
     composes: posab from '~@zohodesk/components/lib/common/common.module.css';
-    bottom: var(--zd_size20) ;
+    bottom: 20px;
 }
 
 [dir=ltr] .pagination {
-    right: var(--zd_size30) ;
+    right: 30px;
 }
 
 [dir=rtl] .pagination {
-    left: var(--zd_size30) ;
+    left: 30px;
 }

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/breadcrumb/frameworks/ui/css/Breadcrumb.module.css

@@ -1,19 +1,19 @@
 .wrapper, .itemContainer {
-    max-width: 100% 
+    max-width: 100%
 }
 
 .itemContainer {
-    column-gap: var(--zd_size4) ;
+    column-gap: 4px;
 }
 
 .separator {
     --separator_fontSize: 14px;
-    margin: 0 var(--zd_size10) ;
+    margin: 0 10px;
 }
 
 .buttonStyle {
     --button_font_size: 14px;
     --button_padding: 0px;
     --button_letter_spacing: 0px;
-    max-width: 100% ;
+    max-width: 100%;
 }

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/date/frameworks/ui/css/DateView.module.css

@@ -1,3 +1,3 @@
 .actionContainer {
-    margin-top: var(--zd_size2) ;
+    margin-top: 2px;
 }

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: 4px;
 }