@zohodesk/library-platform 1.1.10-temp-1 → 1.1.11

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

@@ -36,6 +36,7 @@ function RowView(_ref, ref) {
     id,
     columns,
     rowActionLocation,
+    isMultiline,
     isFlexibleColumns,
     cursor,
     hasActions,
@@ -50,6 +51,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
+    $flag_autoHeight: isMultiline,
     $flag_padding: false,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
@@ -66,10 +68,12 @@ function RowView(_ref, ref) {
     }
   }, renderReorderer({
     isReorderEnabled,
-    isReOrderLoading
+    isReOrderLoading,
+    isMultiline
   }), renderRowSelection({
     isSelectionEnabled,
     id,
+    isMultiline,
     selectionTooltip,
     isSelected,
     isSelectable,
@@ -80,6 +84,7 @@ function RowView(_ref, ref) {
     clientScripts
   }), renderRowActions({
     hasActions,
+    isMultiline,
     columnWidth: rowActionsColumnWidth,
     type,
     actions,
@@ -93,6 +98,7 @@ function renderRowSelection(_ref2) {
   let {
     isSelectionEnabled,
     id,
+    isMultiline,
     selectionTooltip,
     isSelected,
     isSelectable,
@@ -101,6 +107,7 @@ function renderRowSelection(_ref2) {
   return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
     id: id,
+    isMultiline: isMultiline,
     tooltip: selectionTooltip,
     selected: isSelected,
     selectable: isSelectable,
@@ -110,10 +117,16 @@ function renderRowSelection(_ref2) {
 
 const DragHandler = SortableHandle(_ref3 => {
   let {
-    isDisabled
+    isDisabled,
+    isMultiline
   } = _ref3;
   return /*#__PURE__*/React.createElement(DragHandle, {
     isDisabled: isDisabled,
+    customProps: {
+      containerProps: {
+        $ui_alignItems: isMultiline ? 'start' : 'center'
+      }
+    },
     customStyle: {
       container: style.dragHandleContainer
     }
@@ -123,7 +136,8 @@ const DragHandler = SortableHandle(_ref3 => {
 function renderReorderer(_ref4) {
   let {
     isReorderEnabled,
-    isReOrderLoading
+    isReOrderLoading,
+    isMultiline
   } = _ref4;
 
   if (!isReorderEnabled) {
@@ -134,7 +148,8 @@ function renderReorderer(_ref4) {
     tabIndex: 0,
     className: style.dragHandleWrapper
   }, /*#__PURE__*/React.createElement(DragHandler, {
-    isDisabled: isReOrderLoading
+    isDisabled: isReOrderLoading,
+    isMultiline: isMultiline
   }));
 }
 
@@ -154,6 +169,7 @@ function renderColumns(_ref5) {
 function renderRowActions(_ref6) {
   let {
     hasActions,
+    isMultiline,
     columnWidth,
     actions,
     type,
@@ -161,6 +177,7 @@ function renderRowActions(_ref6) {
   } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
+    isMultiline: isMultiline,
     columnWidth: columnWidth,
     type: type,
     actions: actions,

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

@@ -5,6 +5,7 @@ import { ActionViewGap } from "../../../../../../../../platform/client-actions/c
 export default function RowActions(_ref) {
   let {
     hasActions,
+    isMultiline,
     columnWidth,
     type = '',
     actions,
@@ -13,7 +14,8 @@ export default function RowActions(_ref) {
 
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
-      $data_width: columnWidth
+      $data_width: columnWidth,
+      $ui_alignItems: isMultiline ? 'start' : 'center'
     }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,

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

@@ -30,6 +30,7 @@ function RowSelection(_ref) {
   let {
     isSelectionEnabled,
     id,
+    isMultiline,
     tooltip,
     selected,
     selectable,
@@ -44,6 +45,8 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    $flag_autoHeight: isMultiline,
+    $ui_alignItems: isMultiline ? 'start' : 'center',
     customStyle: {
       container: style.tableListSelectContainer
     },

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

@@ -1,9 +1,10 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
-import DateConstants from "../../../../../../cc/date/Constants"; // @ts-ignore
+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 RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function DateView(_ref, ref) {
   let {
@@ -20,9 +21,10 @@ function DateView(_ref, ref) {
     disabled,
     readonly,
     pattern,
-    isTimeInculded,
+    isTimeIncluded,
     timeZone,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
 
   const renderRightFieldActions = () => {
@@ -30,7 +32,9 @@ function DateView(_ref, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: style.actionContainer
     }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
-      actions: actions
+      actions: actions,
+      clientScripts: clientScripts,
+      gap: ActionViewGap.SMALL
     }));
   };
 
@@ -50,7 +54,7 @@ function DateView(_ref, ref) {
     getRef: ref,
     htmlId: id,
     value: value,
-    isDateTime: isTimeInculded,
+    isDateTime: isTimeIncluded,
     textBoxSize: "xmedium",
     timeZone: timeZone,
     dateFormat: pattern,

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/email/frameworks/ui/EmailView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import TableEmail from '@zohodesk-private/desk-components/es/table/TableEmail/TableEmail';
-import { EmailConstants } from "../../../../../../cc";
+import EmailConstants from "../../../../../../cc/email/Constants";
 
 function EmailView(_ref, ref) {
   let {
@@ -11,10 +11,14 @@ function EmailView(_ref, ref) {
     dispatch
   } = helpers;
   let {
-    email
+    email,
+    isDotted,
+    weight
   } = state.properties;
   return /*#__PURE__*/React.createElement(TableEmail, {
     $method_getRef: ref,
+    $flag_wrapText: !isDotted,
+    $ui_weight: weight,
     $event_onCopyEmailClick: mail => {
       dispatch({
         type: EmailConstants.EMAIL_COPIED,

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

@@ -14,7 +14,8 @@ function LabelView(_ref, ref) {
     label,
     for: htmlFor,
     isMandatory,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   return /*#__PURE__*/React.createElement(Flex, {
     ref: ref,
@@ -28,7 +29,8 @@ function LabelView(_ref, ref) {
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
   }), actions.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions,
-    gap: ActionViewGap.XMEDIUM
+    gap: ActionViewGap.XMEDIUM,
+    clientScripts: clientScripts
   }) : 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/link/frameworks/ui/LinkView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import TableLink from "@zohodesk-private/desk-components/es/table/TableLink/TableLink";
-import { LinkConstants } from "../../../../../../cc";
+import LinkConstants from "../../../../../../cc/link/Constants";
 
 function LinkView(_ref, ref) {
   let {
@@ -13,6 +13,8 @@ function LinkView(_ref, ref) {
   let {
     label,
     variant,
+    isDotted,
+    weight,
     href,
     opensNewTab
   } = state.properties;
@@ -26,6 +28,8 @@ function LinkView(_ref, ref) {
     $data_url: href,
     $data_target: target,
     $ui_variant: variant,
+    $flag_wrapText: !isDotted,
+    $ui_weight: weight,
     $event_onClick: () => {
       dispatch({
         type: LinkConstants.LINK_CLICKED

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

@@ -1,9 +1,10 @@
 import React from "react";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
-import { MultiSelectConstants } from "../../../../../../cc/multi-select"; // @ts-ignore
+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 RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -22,21 +23,44 @@ function MultiSelectView(_ref, ref) {
     required,
     disabled,
     readonly,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
+  const transformedOptions = options.map(option => {
+    const baseOption = option;
+
+    if (option.optionActions && option.optionActions.length !== 0) {
+      return { ...option,
+        listItemCustomProps: {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
+            actions: option.optionActions,
+            gap: ActionViewGap.SMALL,
+            clientScripts: clientScripts
+          }),
+          customClass: {
+            customValueRightPlaceholder: style.optionActionsContainer
+          }
+        }
+      };
+    }
+
+    return baseOption;
+  });
 
   const renderRightFieldActions = () => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.actionContainer
+      className: style.fieldActionsContainer
     }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
-      actions: actions
+      actions: actions,
+      gap: ActionViewGap.SMALL,
+      clientScripts: clientScripts
     }));
   };
 
   return /*#__PURE__*/React.createElement(MultiSelect, {
     getRef: ref,
-    options: options,
+    options: transformedOptions,
     selectedOptions: value,
     htmlId: id,
     placeHolder: placeholder,

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

@@ -1,37 +1,29 @@
-.actionContainer {
-    margin-top: var(--zd_size4) ;
+.fieldActionsContainer {
+    margin-top: 4px;
+}
+
+[dir=ltr] .optionActionsContainer {
+    margin-left: 4px;
+}
+
+[dir=rtl] .optionActionsContainer {
+    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 {
     --textboxicon_icon_margin: 0;
-}
-
-[dir=ltr] .paddingRight64 {
-    padding-right: var(--zd_size64) ;
-}
-
-[dir=rtl] .paddingRight64 {
-    padding-left: var(--zd_size64) ;
-}
-
-[dir=ltr] .paddingRight96 {
-    padding-right: var(--zd_size96) ;
-}
-
-[dir=rtl] .paddingRight96 {
-    padding-left: var(--zd_size96) ;
 }

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

@@ -2,6 +2,9 @@ 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";
 
 function SelectView(_ref, ref) {
   let {
@@ -19,16 +22,38 @@ function SelectView(_ref, ref) {
     required,
     disabled,
     readonly,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
-  const transformedOptions = options.map(option => ({
-    id: option.value,
-    text: option.value
-  }));
+  const transformedOptions = options.map(option => {
+    const baseOption = {
+      id: option.value,
+      text: option.value
+    };
+
+    if (option.optionActions && option.optionActions.length !== 0) {
+      return { ...baseOption,
+        listItemCustomProps: {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
+            actions: option.optionActions,
+            gap: ActionViewGap.SMALL,
+            clientScripts: clientScripts
+          }),
+          customClass: {
+            customValueRightPlaceholder: style.optionActionsContainer
+          }
+        }
+      };
+    }
+
+    return baseOption;
+  });
 
   const renderRightFieldActions = () => {
     return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
-      actions: actions
+      actions: actions,
+      gap: ActionViewGap.SMALL,
+      clientScripts: clientScripts
     }) : null;
   };
 

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/css/Select.module.css

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

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

@@ -1,13 +1,65 @@
 /* eslint-disable max-lines-per-function */
-import React from 'react';
+import React, { useRef } from 'react';
 import ColumnChooser from '@zohodesk-private/desk-components/es/ColumnChooser/ColumnChooser';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import { DropDownHeading, DropDownSeparator } from '@zohodesk/components/es/DropDown';
 import { TableColumnChooserConstants } from "../../../../../../cc/table-column-chooser";
+import { TableTextOverflowConstants } from "../../../../../../cc/table-text-overflow"; // @ts-ignore
 
-function TableColumnChooserView(_ref, ref) {
+import style from "./css/TableColumnChooserView.module.css";
+const textFlowOptions = [{
+  id: 'clip',
+  value: 'Clip'
+}, {
+  id: 'wrap',
+  value: 'Wrap'
+}];
+
+function TextOverflowConfig(_ref) {
+  let {
+    mode = 'clip',
+    dispatch,
+    popupRef
+  } = _ref;
+
+  function handleClick(id) {
+    popupRef.current && popupRef.current.closePopupOnly && popupRef.current.closePopupOnly();
+    dispatch({
+      type: TableTextOverflowConstants.TEXT_OVERFLOW_UPDATED,
+      payload: {
+        mode: id
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropDownHeading, {
+    text: "Text Overflow",
+    customClass: style.textOverflowHeading
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.textOverflowOptions
+  }, textFlowOptions.map(_ref2 => {
+    let {
+      id,
+      value
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: id,
+      id: id,
+      value: value,
+      autoHover: true,
+      needBorder: false,
+      needTick: true,
+      active: mode === id,
+      onClick: handleClick
+    });
+  })), /*#__PURE__*/React.createElement(DropDownSeparator, null));
+}
+
+function TableColumnChooserView(_ref3, ref) {
   let {
     state,
     helpers
-  } = _ref;
+  } = _ref3;
   const {
     dispatch
   } = helpers;
@@ -18,7 +70,8 @@ function TableColumnChooserView(_ref, ref) {
     infoText,
     hasSearch,
     searchString,
-    searchPlaceholder
+    searchPlaceholder,
+    textOverflowConfig
   } = state.properties;
   const {
     emptyMessage,
@@ -26,7 +79,23 @@ function TableColumnChooserView(_ref, ref) {
     saveLabel,
     cancelLabel
   } = state.properties;
+  const {
+    isEnabled: isTextOverflowEnabled,
+    mode: textOverflowMode
+  } = textOverflowConfig;
+  const popupRef = useRef(null);
+
+  const renderTextOverflowConfig = () => {
+    return /*#__PURE__*/React.createElement(TextOverflowConfig, {
+      mode: textOverflowMode,
+      dispatch: dispatch,
+      popupRef: popupRef
+    });
+  };
+
   return /*#__PURE__*/React.createElement(ColumnChooser, {
+    ref: popupRef,
+    renderCustomHeader: isTextOverflowEnabled ? renderTextOverflowConfig : null,
     options: options,
     getRef: ref,
     tooltip: tooltip,

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

@@ -1,3 +1,8 @@
-.textFlowOptions {
-    margin-top: var(--zd_size10) 
+
+.textOverflowHeading {
+    flex-shrink: 0
+}
+
+.textOverflowOptions {
+    margin-top: 10px
 }

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

@@ -22,8 +22,6 @@ function TableColumnFilterView(_ref, ref) {
     heading,
     hasSearch,
     searchPlaceholder,
-    hasClearButton,
-    isClearButtonDisabled,
     clearFilterLabel,
     optionTagLabel,
     taggedOption
@@ -58,7 +56,7 @@ function TableColumnFilterView(_ref, ref) {
     });
   };
 
-  const isFiltered = isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0; // For SingleSelectFilter, pass selectedOption (object)
+  const isFiltered = isMultiSelect ? Array.isArray(selectedOptions) && selectedOptions.length > 0 : selectedOptions && Object.keys(selectedOptions).length > 0 && !!selectedOptions.id; // For SingleSelectFilter, pass selectedOption (object)
   // For MultiSelectFilter, pass selectedOptions (array)
 
   const commonProps = {
@@ -88,8 +86,8 @@ function TableColumnFilterView(_ref, ref) {
     options,
     hasSearch,
     searchPlaceholder,
-    hasClearButton,
-    isClearButtonDisabled,
+    hasClearButton: true,
+    isClearButtonDisabled: !isFiltered,
     clearFilterLabel,
     optionTagLabel,
     taggedOption,

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-multiselect-field/frameworks/ui/ColouredMultiSelectFieldView.js

@@ -6,7 +6,8 @@ export function ColouredMultiSelectFieldView(_ref, ref) {
   } = _ref;
   const {
     value,
-    options
+    options,
+    textOverflowMode
   } = state.properties;
   const selectedOptions = value.map(item => {
     const option = options.find(opt => opt.value === item);
@@ -18,6 +19,7 @@ export function ColouredMultiSelectFieldView(_ref, ref) {
   });
   return /*#__PURE__*/React.createElement(Tags, {
     getRef: ref,
-    tags: selectedOptions
+    tags: selectedOptions,
+    isWrapped: textOverflowMode === 'wrap'
   });
 }

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

@@ -8,7 +8,9 @@ export function CurrencyFieldView(_ref, ref) {
   const {
     value,
     currencyLocale,
-    currencySymbol
+    currencySymbol,
+    textOverflowMode,
+    isRead
   } = state.properties;
   const formatedValue = formatCurrency({
     value,
@@ -17,6 +19,9 @@ export function CurrencyFieldView(_ref, ref) {
   });
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: formatedValue
+    text: formatedValue,
+    tooltip: formatedValue,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }