@zohodesk/library-platform 1.1.10 → 1.1.11

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/error-state/frameworks/ui/ErrorState.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ErrorStateProperties from "../../../../../../cc/error-state/Properties";
+import ErrorStateView from "./ErrorStateView";
+let ErrorState = createCustomComponent({
+  name: "ErrorState",
+  View: ErrorStateView,
+  properties: ErrorStateProperties,
+  eventHandlers: {}
+});
+export default ErrorState;

package/es/library/dot/legacy-to-new-arch/error-state/frameworks/ui/ErrorStateView.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ErrorTypes from "../../../../../../cc/error-state/ErrorTypes";
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+import OopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss';
+import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+import PermissionDenied from '@zohodesk/dot/lib/version2/errorstate/UnauthorizedLogin/UnauthorizedLogin';
+import UrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
+import WillBeRightBack from '@zohodesk/dot/lib/version2/errorstate/WillBeRightBack/WillBeRightBack';
+const errorStateComponents = {
+  [ErrorTypes.Inconvenience]: Inconvenience,
+  [ErrorTypes.OopsSomethingMiss]: OopsSomethingMiss,
+  [ErrorTypes.UnableToProcess]: UnableToProcess,
+  [ErrorTypes.PermissionDenied]: PermissionDenied,
+  [ErrorTypes.UrlNotFound]: UrlNotFound,
+  [ErrorTypes.WillBeRightBack]: WillBeRightBack
+};
+
+const getErrorStateContent = type => {
+  const errorStateContent = {
+    [ErrorTypes.Inconvenience]: {
+      title: i18NProviderUtils.getI18NValue('support.error.inconvenience.v2.title'),
+      description: i18NProviderUtils.getI18NValue('support.error.inconvenience.v2.message')
+    },
+    [ErrorTypes.OopsSomethingMiss]: {
+      title: i18NProviderUtils.getI18NValue('support.error.oops.something.miss'),
+      description: i18NProviderUtils.getI18NValue('support.error.oops.something.miss.desc')
+    },
+    [ErrorTypes.UnableToProcess]: {
+      title: i18NProviderUtils.getI18NValue('support.something.went.wrong'),
+      description: i18NProviderUtils.getI18NValue('support.unable.to.process.your.request.desc')
+    },
+    [ErrorTypes.PermissionDenied]: {
+      title: i18NProviderUtils.getI18NValue('support.error.lable.insufficient'),
+      description: i18NProviderUtils.getI18NValue('support.error.lable.insufficient.message')
+    },
+    [ErrorTypes.UrlNotFound]: {
+      title: i18NProviderUtils.getI18NValue('support.label.requested.url.not.found'),
+      description: i18NProviderUtils.getI18NValue('support.label.requested.url.not.found.desc')
+    },
+    [ErrorTypes.WillBeRightBack]: {
+      title: i18NProviderUtils.getI18NValue('support.crmlabel.err.whoa'),
+      description: i18NProviderUtils.getI18NValue('support.something.went.wrong')
+    }
+  };
+  return errorStateContent[type] || errorStateContent[ErrorTypes.Inconvenience];
+};
+
+function ErrorStateView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    type,
+    title,
+    description
+  } = state.properties;
+  const ErrorComponent = errorStateComponents[type];
+  const errorStateContent = getErrorStateContent(type);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(ErrorComponent, {
+    title: title || errorStateContent.title,
+    description: description || errorStateContent.description
+  }));
+}
+
+export default ErrorStateView;

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/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,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,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

@@ -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: 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

@@ -0,0 +1,8 @@
+
+.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'
   });
 }

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