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

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import Label from '@zohodesk/components/es/Label/Label';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 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";
 
 function LabelView(_ref, ref) {
   let {
@@ -14,7 +14,8 @@ function LabelView(_ref, ref) {
     label,
     for: htmlFor,
     isMandatory,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   return /*#__PURE__*/React.createElement(Flex, {
     ref: ref,
@@ -26,9 +27,10 @@ function LabelView(_ref, ref) {
     htmlFor: htmlFor,
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
-  }), actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }), 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/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 {
@@ -11,9 +11,12 @@ function LinkView(_ref, ref) {
     dispatch
   } = helpers;
   let {
-    label,
+    text,
     variant,
+    isDotted,
+    weight,
     href,
+    tooltip,
     opensNewTab
   } = state.properties;
   let target = opensNewTab ? '_blank' : '_self'; // Will be adopted with properties
@@ -22,10 +25,13 @@ function LinkView(_ref, ref) {
     $customProps_link: {
       ref
     },
-    $data_text: label,
+    $data_text: text,
     $data_url: href,
     $data_target: target,
     $ui_variant: variant,
+    $flag_wrapText: !isDotted,
+    $ui_weight: weight,
+    $i18n_tooltip: tooltip,
     $event_onClick: () => {
       dispatch({
         type: LinkConstants.LINK_CLICKED

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import RadioDropdownProperties from "../../../../../../cc/radio-dropdown/Properties";
+import RadioDropdownEvents from "../../../../../../cc/radio-dropdown/Events";
+import RadioDropdownView from "./RadioDropdownView";
+let RadioDropdown = createCustomComponent({
+  name: "RadioDropdown",
+  View: RadioDropdownView,
+  properties: RadioDropdownProperties,
+  events: RadioDropdownEvents,
+  eventHandlers: {}
+});
+export default RadioDropdown;

package/es/library/dot/legacy-to-new-arch/radio-dropdown/frameworks/ui/RadioDropdownView.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import RadioDropdown from '@zohodesk-private/desk-components/es/RadioDropdown/RadioDropdown';
+import HighlightedValue from '@zohodesk-private/desk-components/es/table/StatusBox/StatusBox';
+import { Icon } from '@zohodesk/icons';
+import Constants from "../../../../../../cc/radio-dropdown/Constants"; // @ts-ignore
+
+import style from "./css/RadioDropdown.module.css";
+let dropboxHeaderElementsOrder = ['heading', 'search'];
+
+function RadioDropdownView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    options,
+    hoverVariant,
+    color,
+    isDotted,
+    weight,
+    selectedId,
+    selectedValue,
+    dropdownHeading,
+    hasSearch,
+    searchPlaceholder,
+    emptyStateTitle,
+    isDisabled,
+    isReadOnly
+  } = state.properties;
+
+  function renderCustomTargetElement(_ref2) {
+    let {
+      handleTogglePopup,
+      selectedValue
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(HighlightedValue, {
+      $ui_color: color,
+      $i18n_text: selectedValue,
+      $ui_weight: weight,
+      $flag_wrapText: !isDotted,
+      $i18n_tooltip: selectedValue,
+      $event_onClick: !isDisabled ? handleTogglePopup : undefined,
+      $render_rightChild: !isDisabled ? /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-down",
+        size: "7",
+        iconClass: style.downIcon
+      }) : undefined,
+      customStyle: isDisabled ? {
+        container: style.disabled
+      } : undefined
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(RadioDropdown, {
+    getRef: ref,
+    options: options,
+    selectedId: selectedId,
+    selectedValue: selectedValue,
+    dropdownHeading: dropdownHeading,
+    hasSearch: hasSearch,
+    searchPlaceholder: searchPlaceholder,
+    emptyStateTitle: emptyStateTitle,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isAbsolutePositioningNeeded: true,
+    defaultPosition: "bottomRight",
+    dropboxSize: "large",
+    dropboxHeaderElementsOrder: dropboxHeaderElementsOrder,
+    isMultilineEnabled: true,
+    isFocusScopeEnabled: true,
+    hasListItemActiveStyle: false,
+    hasLoading: false,
+    hasDropboxGap: true,
+    renderCustomTargetElement: color !== 'none' ? renderCustomTargetElement : undefined,
+    customProps: {
+      dropdown: {
+        customProps: {
+          dropdown: {
+            customStyle: {
+              container: style.wrapper
+            }
+          }
+        }
+      },
+      targetElement: {
+        hoverVariant,
+        customProps: {
+          text: {
+            $flag_dotted: isDotted,
+            $ui_weight: weight
+          }
+        }
+      }
+    },
+    onChange: _ref3 => {
+      let {
+        id,
+        value,
+        secondaryValue
+      } = _ref3;
+      dispatch({
+        type: Constants.RADIO_DROPDOWN_VALUE_CHANGED,
+        payload: {
+          id,
+          value,
+          secondaryValue
+        }
+      });
+    },
+    onSearch: value => {
+      dispatch({
+        type: Constants.RADIO_DROPDOWN_SEARCHED,
+        payload: {
+          value
+        }
+      });
+    }
+  });
+}
+
+export default RadioDropdownView;

package/es/library/dot/legacy-to-new-arch/radio-dropdown/frameworks/ui/css/RadioDropdown.module.css

@@ -0,0 +1,23 @@
+
+.wrapper {
+    max-width: 100% 
+}
+
+.disabled {
+    opacity: 0.7;
+    cursor: not-allowed
+}
+
+.downIcon {
+    flex-shrink: 0;
+    opacity: 0.4;
+    margin-top: var(--zd_size2) 
+}
+
+[dir=ltr] .downIcon {
+    margin-left: var(--zd_size4) 
+}
+
+[dir=rtl] .downIcon {
+    margin-right: var(--zd_size4) 
+}

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/checkbox-field/frameworks/ui/CheckboxField.js

@@ -1,12 +1,22 @@
 import { createCustomComponent } from "../../../../../../custom-component";
-import BooleanProperties from "../../../../../../../cc/fields/boolean/Properties";
+import CheckboxProperties from "../../../../../../../cc/checkbox/Properties";
 import BooleanEvents from "../../../../../../../cc/fields/boolean/Events";
 import CheckboxFieldView from "./CheckboxFieldView";
 import { EventHandlersFactory } from "./EventHandlersFactory";
 const CheckboxField = createCustomComponent({
   name: 'CheckboxField',
   View: CheckboxFieldView,
-  properties: BooleanProperties,
+  properties: { ...CheckboxProperties,
+    fieldName: {
+      required: false,
+      defaultValue: '',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
   events: BooleanEvents,
   eventHandlers: EventHandlersFactory.create()
 });

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

@@ -5,14 +5,17 @@ export default function CheckboxFieldView(_ref, ref) {
     state
   } = _ref;
   const {
-    value
+    checked,
+    disabled,
+    readonly,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(Checkbox, {
     getRef: ref,
-    checked: value,
-    disabled: false,
-    readonly: false,
+    checked: checked,
+    disabled: disabled,
+    readonly: readonly,
     label: "",
-    tooltip: ""
+    tooltip: tooltip
   });
 }

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

@@ -8,10 +8,10 @@ export class EventHandlersFactory {
         dispatch
       } = input;
       const {
-        name: fieldName,
-        value: currentValue
+        fieldName,
+        checked
       } = state.properties;
-      const toggledValue = !currentValue;
+      const toggledValue = !checked;
       dispatch({
         type: FieldConstants.FIELD_CHANGED,
         payload: {

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