@zohodesk/library-platform 1.1.10 → 1.1.12

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

@@ -1,7 +1,8 @@
 import React from "react";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 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";
 
@@ -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
-    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
-      actions: actions
+      className: style.fieldActionsContainer
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      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,7 +1,15 @@
-.actionContainer {
+.fieldActionsContainer {
     margin-top: var(--zd_size4) ;
 }
 
+[dir=ltr] .optionActionsContainer {
+    margin-left: var(--zd_size4) ;
+}
+
+[dir=rtl] .optionActionsContainer {
+    margin-right: var(--zd_size4) ;
+}
+
 .custmInputWrapper {
     position: absolute;
     top: 0 ;
@@ -18,20 +26,4 @@
 
 .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

@@ -1,7 +1,10 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+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(ActionEventMediator, {
-      actions: actions
+    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      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: var(--zd_size4) ;
+}[dir=rtl] .optionActionsContainer {
+    margin-right: var(--zd_size4) ;
+}

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

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

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

@@ -23,7 +23,6 @@ function TableColumnFilterView(_ref, ref) {
     hasSearch,
     searchPlaceholder,
     hasClearButton,
-    isClearButtonDisabled,
     clearFilterLabel,
     optionTagLabel,
     taggedOption
@@ -58,7 +57,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 = {
@@ -89,7 +88,7 @@ function TableColumnFilterView(_ref, ref) {
     hasSearch,
     searchPlaceholder,
     hasClearButton,
-    isClearButtonDisabled,
+    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'
   });
 }

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

@@ -5,10 +5,15 @@ export function DateFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,10 +5,15 @@ export function DateTimeFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,10 +5,15 @@ export function DecimalFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,10 +5,14 @@ export function EmailFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Email, {
     getRef: ref,
-    email: value
+    email: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/index.js

@@ -1,4 +1,5 @@
 import FieldTypes from "../../../../cc/fields/field/Types";
+import PrimaryField from "./primary-field/frameworks/ui/PrimaryField";
 import CheckboxField from "./checkbox-field/frameworks/ui/CheckboxField";
 import SwitchField from "./switch-field/frameworks/ui/SwitchField";
 import SingleLineField from "./singleline-field/frameworks/ui/SingleLineField";
@@ -17,8 +18,10 @@ import NumberField from "./number-field/frameworks/ui/NumberField";
 import DecimalField from "./decimal-field/frameworks/ui/DecimalField";
 import MultiSelectField from "./multiselect-field/frameworks/ui/MultiSelectField";
 const FieldComponents = {
+  [FieldTypes.PrimaryField]: PrimaryField,
   [FieldTypes.CheckboxField]: CheckboxField,
   [FieldTypes.SwitchField]: SwitchField,
+  // TODO: Need to register SwitchField
   [FieldTypes.SingleLineField]: SingleLineField,
   [FieldTypes.EmailField]: EmailField,
   [FieldTypes.URLField]: UrlField,

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

@@ -4,14 +4,21 @@ export function LookupFieldView(_ref, ref) {
   let {
     state
   } = _ref;
+  const {
+    textOverflowMode,
+    value,
+    isRead
+  } = state.properties;
   const {
     name,
     url
-  } = state.properties.value;
+  } = value;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
     label: name,
     variant: "secondary",
-    href: url
+    href: url,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,7 +5,8 @@ export function MultiSelectFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode
   } = state.properties;
   const selectedOptions = value.map(item => ({
     id: item,
@@ -13,6 +14,7 @@ export function MultiSelectFieldView(_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/number-field/frameworks/ui/NumberFieldView.js

@@ -5,10 +5,15 @@ export function NumberFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,10 +5,15 @@ export function PercentageFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -6,7 +6,9 @@ function PhoneFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   const href = `tel:${value}`;
   return /*#__PURE__*/React.createElement(Link, {
@@ -14,7 +16,9 @@ function PhoneFieldView(_ref, ref) {
     label: value,
     href: href,
     variant: "secondary",
-    opensNewTab: true
+    weight: isRead ? undefined : 'bold',
+    opensNewTab: true,
+    isDotted: textOverflowMode === 'clip'
   });
 }
 

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

@@ -5,10 +5,15 @@ export function PickListFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
-    text: value
+    text: value,
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import NameFieldProperties from "../../../../../../../cc/fields/name/Properties";
+import NameFieldEvents from "../../../../../../../cc/fields/name/Events";
+import PrimaryFieldView from "./PrimaryFieldView";
+const PrimaryField = createCustomComponent({
+  name: 'PrimaryField',
+  View: PrimaryFieldView,
+  properties: NameFieldProperties,
+  events: NameFieldEvents,
+  eventHandlers: {}
+});
+export default PrimaryField;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import TableLink from "@zohodesk-private/desk-components/es/table/TableLink/TableLink";
+import { TableListConstants } from "../../../../../../../cc/table-list";
+export default function PrimaryFieldView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    value: propValue,
+    name: fieldName,
+    textOverflowMode,
+    isRead
+  } = state.properties;
+  let {
+    value,
+    url,
+    isPreventDefault
+  } = propValue;
+
+  function handleClick(event) {
+    if (isPreventDefault) {
+      event && event.preventDefault();
+    }
+
+    dispatch({
+      type: TableListConstants.TABLE_LIST_NAME_FIELD_CLICKED,
+      payload: {
+        fieldName,
+        url
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(TableLink, {
+    $customProps_link: {
+      ref,
+      onClick: handleClick
+    },
+    $data_text: value,
+    $data_url: url,
+    $data_target: "_self",
+    $flag_wrapText: textOverflowMode === 'wrap',
+    $flag_hoverableFromList: true,
+    $ui_weight: isRead ? undefined : 'bold'
+  });
+}

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

@@ -5,11 +5,15 @@ export function SingleLineFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Text, {
     getRef: ref,
     text: value,
-    tooltip: ""
+    tooltip: value,
+    isDotted: textOverflowMode === 'clip',
+    weight: isRead ? undefined : 'bold'
   });
 }

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

@@ -5,13 +5,17 @@ export function UrlFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    value,
+    textOverflowMode,
+    isRead
   } = state.properties;
   return /*#__PURE__*/React.createElement(Link, {
     getRef: ref,
     label: value,
     href: value,
     variant: "secondary",
-    opensNewTab: true
+    weight: isRead ? undefined : 'bold',
+    opensNewTab: true,
+    isDotted: textOverflowMode === 'clip'
   });
 }