@zohodesk/library-platform 1.1.6-temp-1 → 1.1.7-exp.1

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -22,7 +22,9 @@ function FormView(_ref, ref) {
     headerLeftActions,
     headerRightActions,
     footerLeftActions,
-    footerRightActions
+    footerRightActions,
+    isHeaderEnabled,
+    isFooterEnabled
   } = state.viewModel;
   return /*#__PURE__*/React.createElement(Flex, {
     $ui_tagName: "form",
@@ -30,7 +32,9 @@ function FormView(_ref, ref) {
     $ui_direction: "column",
     $flag_fullsize: true,
     ref: ref
-  }, /*#__PURE__*/React.createElement(FormHeader, {
+  }, isHeaderEnabled && /*#__PURE__*/React.createElement(FormHeader, {
+    customId: "formHeader",
+    testId: "formHeader",
     $render_leftElement: headerLeftActions.length > 0 ? /*#__PURE__*/React.createElement(ActionEventMediator, {
       actions: headerLeftActions,
       gap: ActionViewGap.MEDIUM
@@ -45,14 +49,16 @@ function FormView(_ref, ref) {
     $flag_childrenWrapper: true
   }, isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement(Sections, {
     sections: sections
-  }))), /*#__PURE__*/React.createElement(FormAction, {
+  }))), isFooterEnabled && /*#__PURE__*/React.createElement(FormAction, {
     size: "small",
     paddingLeftSize: "xmedium",
     paddingRightClass: style.footer
-  }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }, /*#__PURE__*/React.createElement(LeftSide, null, footerLeftActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+    testId: "formFooter_leftActions",
     actions: footerLeftActions,
     gap: ActionViewGap.LARGE
-  })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  })), /*#__PURE__*/React.createElement(RightSide, null, footerRightActions.length > 0 && /*#__PURE__*/React.createElement(ActionEventMediator, {
+    testId: "formFooter_rightActions",
     actions: footerRightActions,
     gap: ActionViewGap.LARGE
   }))));

package/es/library/dot/components/form/frameworks/ui/sub-components/Sections.js

@@ -7,24 +7,26 @@ export default function Sections(_ref) {
   return sections.map(section => {
     const {
       id,
+      name,
       title,
       description,
       isCollapsed,
       isVisible,
       fields,
       type,
-      ...extraProps
+      additionalDetails
     } = section;
     const Section = ComponentRegistry.get(type);
     if (isVisible === false) return null;
     return /*#__PURE__*/React.createElement(Section, {
       key: id,
       id: id,
+      name: name,
       title: title,
       description: description,
       fields: fields,
       isCollapsed: isCollapsed,
-      ...extraProps
+      additionalDetails: additionalDetails
     });
   });
 }

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -8,7 +8,6 @@ function SectionView(_ref, ref) {
     state
   } = _ref;
   const {
-    id,
     name,
     title,
     description,
@@ -18,11 +17,10 @@ function SectionView(_ref, ref) {
   return /*#__PURE__*/React.createElement(Section, {
     $i18n_heading: title,
     $i18n_description: description,
-    testId: id,
-    customId: id,
+    testId: name,
+    customId: name,
     $tagAttributes_container: {
-      ref,
-      'data-section-name': name
+      ref
     }
   }, !isCollapsed && /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -1,45 +1,60 @@
 /* Default: no special styles */
 .tableListRow {
-    /*  */
+    /*  Variable:Ignore  */
+    --local-tableList-row-paddingLeft: var(--zd_size24);
 }
 
 /* Keyboard + Reorder + Selection */
 .tableListRow-kbdReorderSelection {
-    --local-tableList-selectionColumn-width: 56px;
-    --local-tableList-selectionColumn-left: 24px;
-    --local-tableList-reorder-left: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-width: var(--zd_size56);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-left: var(--zd_size8);
 }
 
 /* Keyboard + Reorder, no Selection */
 .tableListRow-kbdReorder {
-    --local-tableList-reorder-left: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-left: var(--zd_size8);
 }
 
 /* Keyboard + Selection, no Reorder */
 .tableListRow-kbdSelection {
-    --local-tableList-row-paddingLeft: 8px;
-    --local-tableList-selectionColumn-width: 72px;
-    --local-tableList-selectionColumn-left: 8px;
-    --local-tableList-selectionColumn-paddingRight: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-row-paddingLeft: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-width: var(--zd_size72);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-paddingRight: var(--zd_size8);
     --local-tableList-selectionColumn-justifyContent: center;
 }
 
 /* Keyboard only */
 .tableListRow-kbd {
-    /*  */
+    /*  Variable:Ignore  */
+    --local-tableList-row-paddingLeft: var(--zd_size24);
 }
 
 /* Reorder + Selection, no Keyboard */
 .tableListRow-reorderSelection {
-    --local-tableList-selectionColumn-width: 56px;
-    --local-tableList-selectionColumn-left: 24px;
-    --local-tableList-selectionColumn-paddingRight: 16px;
-    --local-tableList-reorder-paddingLeft: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-width: var(--zd_size56);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-selectionColumn-paddingRight: var(--zd_size16);
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-paddingLeft: var(--zd_size8);
 }
 
 /* Reorder only */
 .tableListRow-reorder {
-    --local-tableList-reorder-paddingLeft: 8px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorder-paddingLeft: var(--zd_size8);
 }
 
 /* Selection only */
@@ -49,52 +64,71 @@
 
 /* Default: no special styles */
 .tableListHeader {
-    /*  */
+    /*  Variable:Ignore  */
+    --local-tableList-header-paddingLeft: var(--zd_size24);
 }
 
 /* Keyboard + Reorder + Selection */
 .tableListHeader-kbdReorderSelection {
-    --local-tableList-reorderHeader-paddingRight: 8px;
-    --local-tableList-massActionHeader-left: 24px;
-    --local-tableList-reorderHeader-left: 8px;
-    --local-tableList-reorderHeader-width: 16px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-paddingRight: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size16);
 
-    --local-tableList-massActionHeader-left: 24px;
-    --local-tableList-massActionHeader-paddingRight: 24px;
-    --local-tableList-massActionHeader-width: 56px;
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-paddingRight: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-width: var(--zd_size56);
 }
 
 /* Keyboard + Reorder, no Selection */
 .tableListHeader-kbdReorder {
-    --local-tableList-reorderHeader-left: 8px;
-    --local-tableList-reorderHeader-paddingRight: 8px;
-    --local-tableList-reorderHeader-width: 16px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-paddingRight: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size16);
 }
 
 /* Reorder only */
 .tableListHeader-reorder {
-    --local-tableList-reorderHeader-width: 24px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size24);
 }
 
 /* Keyboard + Selection, no Reorder */
 .tableListHeader-kbdSelection {
-    --local-tableList-header-paddingLeft: 8px;
-    --local-tableList-massActionHeader-left: 8px;
-    --local-tableList-massActionHeader-paddingRight: 8px;
-    --local-tableList-massActionHeader-width: 72px;
+    /*  Variable:Ignore  */
+    --local-tableList-header-paddingLeft: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-left: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-paddingRight: var(--zd_size8);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-width: var(--zd_size72);
 }
 
 /* Keyboard only */
 .tableListHeader-kbd {
-    --local-tableList-header-paddingLeft: 24px;
+    /*  Variable:Ignore  */
+    --local-tableList-header-paddingLeft: var(--zd_size24);
 }
 
 /* Reorder + Selection, no Keyboard */
 .tableListHeader-reorderSelection {
-    --local-tableList-reorderHeader-width: 24px;
-    --local-tableList-massActionHeader-left: 24px;
-    --local-tableList-massActionHeader-paddingRight: 24px;
-    --local-tableList-massActionHeader-width: 56px;
+    /*  Variable:Ignore  */
+    --local-tableList-reorderHeader-width: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-left: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-paddingRight: var(--zd_size24);
+    /*  Variable:Ignore  */
+    --local-tableList-massActionHeader-width: var(--zd_size56);
 }
 
 /* Selection only */
@@ -206,12 +240,12 @@
 
 [dir=ltr] .dragHandleWrapper {
     left: var(--local-tableList-reorder-left, 0);
-    padding: 0 var(--local-tableList-reorder-paddingRight, 0) 0 var(--local-tableList-reorder-paddingLeft, 0);
+    padding: 0 0 0 var(--local-tableList-reorder-paddingLeft, 0);
 }
 
 [dir=rtl] .dragHandleWrapper {
     right: var(--local-tableList-reorder-left, 0);
-    padding: 0 var(--local-tableList-reorder-paddingLeft, 0) 0 var(--local-tableList-reorder-paddingRight, 0);
+    padding: 0 var(--local-tableList-reorder-paddingLeft, 0) 0 0;
 }
 
 .rowDropIndicator {
@@ -242,13 +276,11 @@
 
 [dir=ltr] .tableListSelectContainer {
     left: var(--local-tableList-selectionColumn-left, 0);
-    padding-left: var(--local-tableList-selectionColumn-paddingLeft, 0);
     padding-right: var(--local-tableList-selectionColumn-paddingRight, 0);
 }
 
 [dir=rtl] .tableListSelectContainer {
     right: var(--local-tableList-selectionColumn-left, 0);
-    padding-right: var(--local-tableList-selectionColumn-paddingLeft, 0);
     padding-left: var(--local-tableList-selectionColumn-paddingRight, 0);
 }
 

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

@@ -38,7 +38,7 @@ function Header(_ref) {
   });
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_padding: false,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     customStyle: {
       tableHeader: `${style.header} ${style[headerClasses]}`

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

@@ -49,7 +49,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_padding: false,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     $flag_isHighlighted: isFocussed,
@@ -60,7 +60,7 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
-      tableList: isSelectionEnabled || isReorderEnabled ? style.row : '',
+      tableList: style.row,
       $pointer: style[`rowCursor_${cursor}`]
     }
   }, renderReorderer({

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/Breadcrumb.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import BreadcrumbProperties from "../../../../../../cc/breadcrumb/Properties";
+import BreadcrumbEvents from "../../../../../../cc/breadcrumb/Events";
+import BreadcrumbView from "./BreadcrumbView";
+let Breadcrumb = createCustomComponent({
+  name: "Breadcrumb",
+  View: BreadcrumbView,
+  properties: BreadcrumbProperties,
+  events: BreadcrumbEvents,
+  eventHandlers: {}
+});
+export default Breadcrumb;

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/BreadcrumbView.js

@@ -0,0 +1,47 @@
+import React from "react";
+import Separator from "@zohodesk/dot/es/Separator/Separator";
+import BreadcrumbItem from "./sub-components/BreadcrumbItem"; // @ts-ignore
+
+import style from "./css/Breadcrumb.module.css";
+
+function BreadcrumbView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    items
+  } = state.properties;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: style.wrapper
+  }, /*#__PURE__*/React.createElement(Separator, {
+    type: "slash",
+    shrink: true,
+    customClass: {
+      customSeparator: style.separator
+    }
+  }, items.map(_ref2 => {
+    let {
+      id,
+      text,
+      isLink,
+      iconName,
+      isActive
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(BreadcrumbItem, {
+      key: id,
+      id: id,
+      text: text,
+      isLink: isLink,
+      iconName: iconName,
+      isActive: isActive,
+      dispatch: dispatch
+    });
+  })));
+}
+
+export default BreadcrumbView;

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/css/Breadcrumb.module.css

@@ -0,0 +1,19 @@
+.wrapper, .itemContainer {
+    max-width: 100% 
+}
+
+.itemContainer {
+    column-gap: var(--zd_size4) ;
+}
+
+.separator {
+    --separator_fontSize: 14px;
+    margin: 0 var(--zd_size10) ;
+}
+
+.buttonStyle {
+    --button_font_size: 14px;
+    --button_padding: 0px;
+    --button_letter_spacing: 0px;
+    max-width: 100% ;
+}

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

@@ -0,0 +1,58 @@
+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 BreadcrumbConstants from "../../../../../../../cc/breadcrumb/Constants"; // @ts-ignore
+
+import style from "./../css/Breadcrumb.module.css";
+
+function BreadcrumbItem(_ref) {
+  let {
+    id,
+    text,
+    isLink,
+    iconName,
+    iconSize = '14',
+    isActive,
+    dispatch
+  } = _ref;
+
+  const renderTitle = (text, isLink, isActive) => {
+    return isLink ? /*#__PURE__*/React.createElement(Button, {
+      text: text,
+      title: text,
+      palette: 'plainPrimary',
+      isBold: false,
+      customClass: {
+        customButton: style.buttonStyle
+      }
+    }) : /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: isActive ? '16' : '14',
+      $ui_weight: isActive ? 'semibold' : 'regular',
+      $flag_dotted: true,
+      $i18n_dataTitle: text,
+      $ui_tagName: 'span'
+    }, text);
+  };
+
+  const renderIcon = (iconName, iconSize) => /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize
+  });
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    key: id,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $ui_className: style.itemContainer,
+    $event_onClick: () => dispatch({
+      type: BreadcrumbConstants.BREADCRUMB_ITEM_CLICKED,
+      payload: {
+        id
+      }
+    })
+  }, !isLink && iconName && renderIcon(iconName, iconSize), renderTitle(text, isLink, isActive));
+}
+
+export default BreadcrumbItem;

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

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import IconButtonProperties from "../../../../../../cc/icon-button/Properties";
+import IconButtonEvents from "../../../../../../cc/icon-button/Events";
+import IconButtonView from "./IconButtonView";
+let IconButton = createCustomComponent({
+  name: "IconButton",
+  View: IconButtonView,
+  properties: IconButtonProperties,
+  events: IconButtonEvents,
+  eventHandlers: {}
+});
+export default IconButton;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
+import IconButtonConstants from "../../../../../../cc/icon-button/Constants";
+
+function IconButtonView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    palette,
+    iconSize,
+    size,
+    iconName,
+    isActive,
+    isDisabled,
+    hoverType,
+    title,
+    isBold
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    eleRef: ref,
+    palette: palette,
+    iconSize: iconSize,
+    size: size,
+    iconName: iconName,
+    isActive: isActive,
+    isDisabled: isDisabled,
+    hoverType: hoverType,
+    title: title,
+    isBold: isBold,
+    onClick: () => {
+      dispatch({
+        type: IconButtonConstants.ICON_BUTTON_CLICKED
+      });
+    }
+  });
+}
+
+export default IconButtonView;

package/es/library/dot/legacy-to-new-arch/switch/frameworks/ui/SwitchView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Switch from '@zohodesk-private/dot-registry/es/Switch/Switch';
+import Switch from '@zohodesk/components/es/Switch/Switch';
 import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import { SwitchConstants } from "../../../../../../cc";
 
@@ -21,14 +21,14 @@ function SwitchView(_ref, ref) {
   let id = getId();
   return /*#__PURE__*/React.createElement(Switch, {
     customProps: {
-      container: {
-        ref
+      SwitchProps: {
+        eleRef: ref
       }
     },
     id: id,
     size: size,
-    isChecked: checked,
-    isDisabled: disabled,
+    checked: checked,
+    disabled: disabled,
     title: tooltip,
     onChange: () => {
       dispatch({

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

@@ -11,6 +11,7 @@ export default function SwitchFieldView(_ref, ref) {
     getRef: ref,
     checked: value,
     disabled: false,
+    size: 'small',
     tooltip: ""
   });
 }

package/es/platform/client-actions/cc/action-event-mediator/Properties.js

@@ -6,6 +6,15 @@ export const actionsSchema = {
   items: actionSchema
 };
 export default {
+  testId: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
   actions: {
     required: true,
     typeMetadata: {

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediatorView.js

@@ -8,10 +8,12 @@ export default function ActionEventMediatorView(_ref, ref) {
   const {
     actions,
     renderComponentType,
-    gap
+    gap,
+    testId
   } = state.properties;
   const ActionRenderComponent = ComponentRegistry.get(renderComponentType) || RowActionsRenderer;
   return /*#__PURE__*/React.createElement(ActionRenderComponent, {
+    testId: testId,
     actions: actions,
     gap: gap,
     getRef: ref

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.module.css

@@ -1,3 +1,7 @@
+.wrapper {
+    max-width: 100% 
+}
+
 .gap_small {
     gap: var(--zd_size4) 
 }

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRendererView.js

@@ -11,13 +11,16 @@ function RowActionsRendererView(_ref, ref) {
   } = _ref;
   const {
     actions,
-    gap
+    gap,
+    testId
   } = state.properties;
   return /*#__PURE__*/React.createElement(Flex, {
     ref: ref,
+    testId: testId,
+    customId: testId,
     $ui_displayMode: "inline",
     $ui_alignItems: "center",
-    $ui_className: `${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
+    $ui_className: `${style.wrapper} ${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
   }, actions.map((action, index) => {
     return /*#__PURE__*/React.createElement(DynamicActionComponent, {
       action: action,