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

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/HeaderData.js

@@ -2,20 +2,22 @@ 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 ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } 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";
 
 function HeaderData(_ref) {
   let {
     header,
+    isMultiline,
     sortedBy,
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
   const {
     id,
@@ -46,10 +48,12 @@ function HeaderData(_ref) {
         tableHead: style.headerWithActions
       } : undefined
     }, /*#__PURE__*/React.createElement(TableHeading, {
-      $i18n_text: text
-    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      $i18n_text: text,
+      $flag_wrapText: isMultiline
+    }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL
+      gap: ActionViewGap.SMALL,
+      clientScripts: clientScripts
     }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
       isResizing: isResizing,

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/Headers.js

@@ -4,10 +4,12 @@ import HeaderData from "./HeaderData";
 function Headers(_ref) {
   let {
     headers,
+    isMultiline,
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
   return headers.map((header, index) => {
     const {
@@ -18,11 +20,13 @@ function Headers(_ref) {
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,
       header: header,
+      isMultiline: isMultiline,
       sortedBy: sortOrder,
       isResizing: isResizing,
       isResizerEnabled: isResizerEnabled,
       isFlexibleColumns: isFlexibleColumns,
-      dispatch: dispatch
+      dispatch: dispatch,
+      clientScripts: clientScripts
     });
   });
 }

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/MassAction.js

@@ -1,21 +1,27 @@
 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 ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer"; // @ts-ignore
+
 import style from "./../../css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
-    actions
+    isMultiline,
+    actions,
+    clientScripts
   } = _ref;
 
   if (!isSelectionEnabled) {
     return null;
   }
 
+  const alignItems = isMultiline ? 'start' : 'center';
+
   if (!actions || actions.length === 0) {
     return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      $ui_alignItems: alignItems,
       customStyle: {
         container: style.massActionHeader
       }
@@ -26,11 +32,13 @@ function MassAction(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    $ui_alignItems: alignItems,
     customStyle: {
       container: style.massActionHeader
     }
-  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
-    actions: actions
+  }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
+    actions: actions,
+    clientScripts: clientScripts
   }));
 }
 

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

@@ -4,7 +4,8 @@ import RowData from "./RowData";
 function Columns(_ref) {
   let {
     data,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref;
   return data.map((column, index) => {
     const {
@@ -17,7 +18,8 @@ function Columns(_ref) {
       field: field,
       width: width,
       alignment: alignment,
-      isFlexibleColumns: isFlexibleColumns
+      isFlexibleColumns: isFlexibleColumns,
+      clientScripts: clientScripts
     });
   });
 }

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

@@ -10,6 +10,8 @@ import TableRowProperties from "../../../../../../../../cc/table-list/row/Proper
 import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
 import { SortableHandle } from 'react-sortable-hoc'; // @ts-ignore
 
+import arrowStyle from '@zohodesk/components/es/shared/ArrowIcon/ArrowIcon.module.css'; // @ts-ignore
+
 import style from "../../css/TableList.module.css";
 
 function RowView(_ref, ref) {
@@ -36,10 +38,12 @@ function RowView(_ref, ref) {
     id,
     columns,
     rowActionLocation,
+    isMultiline,
     isFlexibleColumns,
     cursor,
     hasActions,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    clientScripts
   } = state.properties;
   const {
     type,
@@ -49,6 +53,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
+    $flag_autoHeight: isMultiline,
     $flag_padding: false,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
@@ -60,27 +65,32 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
-      tableList: style.row,
+      tableList: `${arrowStyle.transparentContainer} ${style.row}`,
       $pointer: style[`rowCursor_${cursor}`]
     }
   }, renderReorderer({
     isReorderEnabled,
-    isReOrderLoading
+    isReOrderLoading,
+    isMultiline
   }), renderRowSelection({
     isSelectionEnabled,
     id,
+    isMultiline,
     selectionTooltip,
     isSelected,
     isSelectable,
     dispatch
   }), renderColumns({
     columns,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   }), renderRowActions({
     hasActions,
+    isMultiline,
     columnWidth: rowActionsColumnWidth,
     type,
-    actions
+    actions,
+    clientScripts
   }), isDroppable && /*#__PURE__*/React.createElement("div", {
     className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
@@ -90,6 +100,7 @@ function renderRowSelection(_ref2) {
   let {
     isSelectionEnabled,
     id,
+    isMultiline,
     selectionTooltip,
     isSelected,
     isSelectable,
@@ -98,6 +109,7 @@ function renderRowSelection(_ref2) {
   return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
     id: id,
+    isMultiline: isMultiline,
     tooltip: selectionTooltip,
     selected: isSelected,
     selectable: isSelectable,
@@ -107,10 +119,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
     }
@@ -120,7 +138,8 @@ const DragHandler = SortableHandle(_ref3 => {
 function renderReorderer(_ref4) {
   let {
     isReorderEnabled,
-    isReOrderLoading
+    isReOrderLoading,
+    isMultiline
   } = _ref4;
 
   if (!isReorderEnabled) {
@@ -131,33 +150,40 @@ function renderReorderer(_ref4) {
     tabIndex: 0,
     className: style.dragHandleWrapper
   }, /*#__PURE__*/React.createElement(DragHandler, {
-    isDisabled: isReOrderLoading
+    isDisabled: isReOrderLoading,
+    isMultiline: isMultiline
   }));
 }
 
 function renderColumns(_ref5) {
   let {
     columns,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
-    isFlexibleColumns: isFlexibleColumns
+    isFlexibleColumns: isFlexibleColumns,
+    clientScripts: clientScripts
   });
 }
 
 function renderRowActions(_ref6) {
   let {
     hasActions,
+    isMultiline,
     columnWidth,
     actions,
-    type
+    type,
+    clientScripts
   } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
+    isMultiline: isMultiline,
     columnWidth: columnWidth,
     type: type,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   });
 }
 

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

@@ -1,21 +1,24 @@
 import React from 'react';
 import TableAction from '@zohodesk-private/desk-components/es/table/TableAction/TableAction';
-import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowActions(_ref) {
   let {
     hasActions,
+    isMultiline,
     columnWidth,
     type = '',
-    actions
+    actions,
+    clientScripts
   } = _ref;
 
-  // TODO: Need to fix the defaultValue from properties => CC
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
-      $data_width: columnWidth
-    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+      $data_width: columnWidth,
+      $ui_alignItems: isMultiline ? 'start' : 'center'
+    }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
       actions: actions,
+      clientScripts: clientScripts,
       renderComponentType: type,
       gap: ActionViewGap.MEDIUM
     }));

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

@@ -1,17 +1,18 @@
 import React from 'react';
 import TableData from '@zohodesk-private/desk-components/es/table/TableData/TableData';
-import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
 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";
 export default function RowData(_ref) {
   let {
     field,
     width,
     alignment,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref;
   let {
     type,
@@ -34,8 +35,9 @@ export default function RowData(_ref) {
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props
-  }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions,
+    clientScripts: clientScripts,
     gap: ActionViewGap.SMALL
   }) : null);
 }

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

@@ -3,11 +3,34 @@ import TableListSelect from '@zohodesk-private/desk-components/es/table/TableLis
 import { TableListConstants } from "../../../../../../../../cc/table-list"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
+import { Analytics } from "../../../../../../../analytics";
+
+class SmartTableRowSelectedMetric {
+  event = 'smart_table_row_selected';
+  contextDetails = {
+    moduleName: 'table-list',
+    instanceName: '',
+    rowId: '',
+    isSelected: false
+  };
+
+  constructor(id, isSelected) {
+    this.event = 'smart_table_row_selected';
+    this.contextDetails = {
+      moduleName: 'table-list',
+      instanceName: id,
+      rowId: id,
+      isSelected: isSelected
+    };
+  }
+
+}
 
 function RowSelection(_ref) {
   let {
     isSelectionEnabled,
     id,
+    isMultiline,
     tooltip,
     selected,
     selectable,
@@ -22,17 +45,22 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    $flag_autoHeight: isMultiline,
+    $ui_alignItems: isMultiline ? 'start' : 'center',
     customStyle: {
       container: style.tableListSelectContainer
     },
     $flag_disabled: !selectable,
-    $event_onChange: (_, event) => dispatch({
-      type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
-      payload: {
-        id,
-        event
-      }
-    })
+    $event_onChange: (_, event) => {
+      Analytics.push(new SmartTableRowSelectedMetric(id, event.target.checked));
+      dispatch({
+        type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
+        payload: {
+          id,
+          event
+        }
+      });
+    }
   });
 }
 

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/sub-components/BreadcrumbItem.js

@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "@zohodesk/icons/es/Icon";
 import Flex from "@zohodesk/layout/es/Flex/Flex";
 import Typography from "@zohodesk/components/es/Typography/Typography";
-import Button from "@zohodesk/components/es/Button/Button";
+import Button from "@zohodesk-private/dot-registry/es/Button/Button";
 import BreadcrumbConstants from "../../../../../../../cc/breadcrumb/Constants"; // @ts-ignore
 
 import style from "./../css/Breadcrumb.module.css";

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from '@zohodesk/components/es/Button/Button';
+import Button from '@zohodesk-private/dot-registry/es/Button/Button';
 import ButtonConstants from "../../../../../../cc/button/Constants";
 
 function ButtonView(_ref, ref) {
@@ -26,10 +26,10 @@ function ButtonView(_ref, ref) {
     palette: palette,
     size: size,
     isRounded: isRounded,
-    isDisabled: isDisabled,
+    disabled: isDisabled,
     id: id,
     status: status,
-    tooltip: tooltip,
+    title: tooltip,
     onClick: () => {
       dispatch({
         type: ButtonConstants.BUTTON_CLICKED

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/DateView.js

@@ -1,7 +1,8 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import DateConstants from "../../../../../../cc/date/Constants";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator"; // @ts-ignore
+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";
 
@@ -20,17 +21,20 @@ function DateView(_ref, ref) {
     disabled,
     readonly,
     pattern,
-    isTimeInculded,
+    isTimeIncluded,
     timeZone,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
 
   const renderRightFieldActions = () => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
-      actions: actions
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      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,
@@ -60,7 +64,7 @@ function DateView(_ref, ref) {
     customProps: {
       TextBoxProps: {
         TextBoxProps: {
-          required
+          'aria-required': required
         }
       },
       TextBoxIconProps: {

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,15 @@ function EmailView(_ref, ref) {
     dispatch
   } = helpers;
   let {
-    email
+    email,
+    isDotted,
+    weight,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(TableEmail, {
     $method_getRef: ref,
+    $flag_wrapText: !isDotted,
+    $ui_weight: weight,
     $event_onCopyEmailClick: mail => {
       dispatch({
         type: EmailConstants.EMAIL_COPIED,
@@ -23,7 +28,8 @@ function EmailView(_ref, ref) {
         }
       });
     },
-    $data_email: email
+    $data_email: email,
+    $i18n_tooltip: tooltip
   });
 }
 

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/highlighted-value/frameworks/ui/HighlightedValueView.js

@@ -1,6 +1,7 @@
 import React from "react";
 import StatusBox from "@zohodesk-private/desk-components/es/table/StatusBox/StatusBox";
-import { HighlightedValueConstants } from "../../../../../../cc";
+import HighlightedValueConstants from "../../../../../../cc/highlighted-value/Constants"; // @ts-ignore
+
 import style from "./css/HighlightedValue.module.css";
 
 function HighlightedValueView(_ref, ref) {
@@ -15,6 +16,8 @@ function HighlightedValueView(_ref, ref) {
     text,
     color,
     tooltip,
+    weight,
+    isDotted,
     cursor
   } = state.properties;
   return /*#__PURE__*/React.createElement(StatusBox, {
@@ -23,6 +26,8 @@ function HighlightedValueView(_ref, ref) {
     },
     $ui_color: color,
     $i18n_text: text,
+    $ui_weight: weight,
+    $flag_wrapText: !isDotted,
     $i18n_tooltip: tooltip,
     customStyle: {
       pointer: cursor === "default" && style.default

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

@@ -5,5 +5,6 @@ export { default as HighlightedValue } from "./highlighted-value/frameworks/ui/H
 export { default as Link } from "./link/frameworks/ui/Link";
 export { default as Switch } from "./switch/frameworks/ui/Switch";
 export { default as Tags } from "./tags/frameworks/ui/Tags";
+export { default as Tag } from "./tag/frameworks/ui/Tag";
 export { default as Text } from "./text/frameworks/ui/Text";
 export { default as ActionIcon } from "./action-icon/frameworks/ui/ActionIcon";