@zohodesk/library-platform 1.2.2-exp.5 → 1.2.2-exp.6

package/es/library/dot/components/action-status/frameworks/ui/css/ActionStatus.module.css

@@ -5,13 +5,13 @@
 }
 
 .container {
-  gap: var(--zd_size8) ;
+  gap: 8px;
 }
 
 .spinner {
   display: inline-block;
-  width: var(--zd_size16) ;
-  height: var(--zd_size16) ;
+  width: 16px;
+  height: 16px;
   /* COLOR VARIABLES TO BE UPDATED PROPERLY USING COMMON COLORS */
   flex-shrink: 0;
   box-sizing: border-box;

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -3,17 +3,17 @@
 }
 
 .field {
-    margin-top: var(--zd_size5) ;
+    margin-top: 5px;
 }
 
 .multiSelectField {
-    margin-top: var(--zd_size2) 
+    margin-top: 2px
 }
 
 .checkboxField {
     composes: dInflex alignFstart from '~@zohodesk/components/es/common/common.module.css';
-    max-width: 100% ;
-    gap: var(--zd_size8) 
+    max-width: 100%;
+    gap: 8px
 }
 
 .cursor_pointer {
@@ -27,36 +27,36 @@
 }
 
 [dir=ltr] .footer {
-    padding-right: var(--zd_size32) 
+    padding-right: 32px
 }
 
 [dir=rtl] .footer {
-    padding-left: var(--zd_size32) 
+    padding-left: 32px
 }
 
 /* Sections layout */
 
 .sectionsWrapper {
-    padding-bottom: var(--zd_size8) 
+    padding-bottom: 8px
 }
 
 .sectionsLayout, .sectionsTwoLayout {
-    margin: 0 auto 
+    margin: 0 auto
 }
 
 .sectionsLayout {
-    max-width: var(--local-form-layout-max-width, var(--zd_size1080))
+    max-width: var(--local-form-layout-max-width, 1080px)
 }
 
 .sectionsTwoLayout {
-    column-gap: var(--zd_size8) ;
-    max-width: var(--local-form-layout-max-width, var(--zd_size1210))
+    column-gap: 8px;
+    max-width: var(--local-form-layout-max-width, 1210px)
 }
 
 .rightPanel {
     height: var(--local-form-right-panel-height, 100%);
     position: -webkit-sticky;
     position: sticky;
-    top: 0 ;
-    padding: var(--zd_size8) 0 
+    top: 0;
+    padding: 8px 0
 }

package/es/library/dot/components/form-fields/field/css/FieldItem.module.css

@@ -1,7 +1,7 @@
 .fieldItem {
     position: relative;
-    min-width: 0 ;
-    min-height: 0 
+    min-width: 0;
+    min-height: 0
 }
 
 .largeSize {

package/es/library/dot/components/section/frameworks/ui/css/Section.module.css

@@ -1,11 +1,11 @@
 .fieldsContainer {
-    padding-top: var(--zd_size1) 
+    padding-top: 1px
 }
 
 [dir=ltr] .actionContainer {
-    margin-left: var(--zd_size8) ;
+    margin-left: 8px;
 }
 
 [dir=rtl] .actionContainer {
-    margin-right: var(--zd_size8) ;
+    margin-right: 8px;
 }

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

@@ -137,39 +137,39 @@
 }
 
 .paginationSpace {
-    padding-bottom: var(--zd_size70) ;
+    padding-bottom: 70px;
 }
 
 .loader {
-    padding: var(--zd_size20) 0 
+    padding: 20px 0
 }
 
 .wrapper {
-    height: 100% ;
-    width: 100% ;
+    height: 100%;
+    width: 100%;
     z-index: 1;
     position: relative;
 }
 
 .hiddenDummyRow {
-    height: var(--zd_size40) ;
-    width: 0 ;
+    height: 40px;
+    width: 0;
     position: absolute;
     z-index: -100;
-    top: 0 ;
+    top: 0;
     pointer-events: none;
 }
 
 [dir=ltr] .hiddenDummyRow {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .hiddenDummyRow {
-    right: 0 ;
+    right: 0;
 }
 
 .resizerSpace {
-    width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
+    width: calc(var(--local_table_resizer_extra_space, 0) * 1px);
     flex-shrink: 0
 }
 
@@ -178,32 +178,32 @@
 }
 
 [dir=ltr] .contentWrapper {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .contentWrapper {
-    right: 0 ;
+    right: 0;
 }
 
 .initialLoading {
-    height: calc(100% - (var(--zd_size100)))
+    height: calc(100% - 100px)
 }
 
 .emptyContent {
-    padding: var(--zd_size160) 0 var(--zd_size60) 
+    padding: 160px 0 60px
 }
 
 .errorContent {
-    padding: var(--zd_size60) 0 
+    padding: 60px 0
 }
 
 .headerWithActions,
 .fieldWithActions {
-    gap: var(--zd_size6) 
+    gap: 6px
 }
 
 .actions {
-    gap: var(--zd_size8) 
+    gap: 8px
 }
 
 .rowCursor_default {
@@ -248,7 +248,7 @@
 }
 
 .dragHandleContainer {
-    height: 100% ;
+    height: 100%;
     opacity: 0;
     visibility: hidden;
 }
@@ -272,8 +272,8 @@
 }
 
 .rowDropIndicator {
-    width: 100% ;
-    height: var(--zd_size2) ;
+    width: 100%;
+    height: 2px;
     /* css:theme-validation:ignore */
     position: absolute;
     z-index: 2;
@@ -281,11 +281,11 @@
 }
 
 .dropIndicatorTop {
-    top: 0 ;
+    top: 0;
 }
 
 .dropIndicatorBottom {
-    bottom: calc( var(--zd_size3) * -1 ) ;
+    bottom: -3px;
 }
 
 .row {
@@ -341,13 +341,13 @@
 
 .pagination {
     composes: posab from '~@zohodesk/components/lib/common/common.module.css';
-    bottom: var(--zd_size20) ;
+    bottom: 20px;
 }
 
 [dir=ltr] .pagination {
-    right: var(--zd_size30) ;
+    right: 30px;
 }
 
 [dir=rtl] .pagination {
-    left: var(--zd_size30) ;
+    left: 30px;
 }

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

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

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

@@ -1,3 +1,3 @@
 .actionContainer {
-    margin-top: var(--zd_size2) ;
+    margin-top: 2px;
 }

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/css/HighlightedValue.module.css

@@ -3,5 +3,5 @@
 }
 
 .gap {
-    gap: var(--zd_size4) ;
+    gap: 4px;
 }

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/multi-select/frameworks/ui/css/MultiSelectView.module.css

@@ -1,27 +1,27 @@
 .fieldActionsContainer {
-    margin-top: var(--zd_size4) ;
+    margin-top: 4px;
 }
 
 [dir=ltr] .optionActionsContainer {
-    margin-left: var(--zd_size4) ;
+    margin-left: 4px;
 }
 
 [dir=rtl] .optionActionsContainer {
-    margin-right: var(--zd_size4) ;
+    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 {

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

@@ -1,6 +1,6 @@
 
 .wrapper {
-    max-width: 100% 
+    max-width: 100%
 }
 
 .disabled {
@@ -11,13 +11,13 @@
 .downIcon {
     flex-shrink: 0;
     opacity: 0.4;
-    margin-top: var(--zd_size2) 
+    margin-top: 2px
 }
 
 [dir=ltr] .downIcon {
-    margin-left: var(--zd_size4) 
+    margin-left: 4px
 }
 
 [dir=rtl] .downIcon {
-    margin-right: var(--zd_size4) 
+    margin-right: 4px
 }

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/css/Select.module.css

@@ -1,5 +1,5 @@
 [dir=ltr] .optionActionsContainer {
-    margin-left: var(--zd_size4) ;
+    margin-left: 4px;
 }[dir=rtl] .optionActionsContainer {
-    margin-right: var(--zd_size4) ;
+    margin-right: 4px;
 }

package/es/library/dot/legacy-to-new-arch/table-column-chooser/frameworks/ui/css/TableColumnChooserView.module.css

@@ -4,5 +4,5 @@
 }
 
 .textOverflowOptions {
-    margin-top: var(--zd_size10) 
+    margin-top: 10px
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/css/RadioDropdownField.module.css

@@ -1,3 +1,3 @@
 .wrapper {
-    margin-inline-start: calc( var(--zd_size11) * -1 ) 
+    margin-inline-start: -11px
 }

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/css/TextAreaView.module.css

@@ -4,13 +4,13 @@
 
 .rightPlaceholder {
     position: absolute;
-    bottom: var(--zd_size4) ;
+    bottom: 4px;
 }
 
 [dir=ltr] .rightPlaceholder {
-    right: var(--zd_size12) ;
+    right: 12px;
 }
 
 [dir=rtl] .rightPlaceholder {
-    left: var(--zd_size12) ;
+    left: 12px;
 }

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

@@ -1,23 +1,23 @@
 .wrapper {
-    max-width: 100% 
+    max-width: 100%
 }
 
 .gap_small {
-    gap: var(--zd_size4) 
+    gap: 4px
 }
 
 .gap_xmedium {
-    gap: var(--zd_size6) 
+    gap: 6px
 }
 
 .gap_medium {
-    gap: var(--zd_size8) 
+    gap: 8px
 }
 
 .gap_large {
-    gap: var(--zd_size10) 
+    gap: 10px
 }
 
 .gap_xlarge {
-    gap: var(--zd_size12) 
+    gap: 12px
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/library-platform",
-  "version": "1.2.2-exp.5",
+  "version": "1.2.2-exp.6",
   "description": "",
   "main": "es/index.js",
   "files": [

package/es/platform/client-actions/components/row-actions-renderer/domain/entities/interfaces/IState.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,12 +0,0 @@
-import { createCustomComponent } from "../../../../../../../library/custom-component";
-import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
-import { ComponentRegistry } from "../../../../../../../library";
-import AdaptiveRowActionsRendererView from "./AdaptiveRowActionsRendererView";
-const AdaptiveRowActionsRendererComponent = createCustomComponent({
-  name: 'AdaptiveRowActionsRenderer',
-  properties: RowActionsRendererProperties,
-  eventHandlers: {},
-  View: AdaptiveRowActionsRendererView
-});
-ComponentRegistry.register("AdaptiveRowActionsRenderer", AdaptiveRowActionsRendererComponent);
-export default AdaptiveRowActionsRendererComponent;

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

@@ -1,42 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import Flex from '@zohodesk/layout/es/Flex/Flex';
-import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
-import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
-import MoreActionsRenderer from "../MoreActions/MoreActionsRenderer";
-import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils"; // @ts-ignore
-
-import style from "../RowActions/RowActionsRenderer.module.css";
-export default function AdaptiveRowActionsRendererView(_ref, ref) {
-  let {
-    state,
-    helpers
-  } = _ref;
-  const {
-    actions,
-    gap,
-    testId,
-    clientScripts
-  } = state.properties;
-  const [firstAction, secondAction, ...moreActions] = actions;
-  const showMore = actions.length > 3;
-  const actionsList = showMore ? [firstAction, secondAction] : actions;
-
-  const renderAction = action => /*#__PURE__*/React.createElement(ActionEventMediator, {
-    key: action.id,
-    action: action,
-    clientScripts: findMappedClientScripts(action, clientScripts),
-    instanceName: action.instanceName
-  });
-
-  return /*#__PURE__*/React.createElement(Flex, {
-    ref: ref,
-    testId: testId ? testId : '',
-    $ui_className: gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : '',
-    $ui_displayMode: "inline",
-    $ui_alignItems: "center"
-  }, showMore ? /*#__PURE__*/React.createElement(React.Fragment, null, actionsList.map(renderAction), /*#__PURE__*/React.createElement(MoreActionsRenderer, {
-    actions: moreActions,
-    clientScripts: clientScripts
-  })) : actionsList.map(renderAction));
-}

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

@@ -1,10 +0,0 @@
-import { createCustomComponent } from "../../../../../../../library/custom-component";
-import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
-import MoreActionsRendererView from "./MoreActionsRendererView";
-const MoreActionsRenderer = createCustomComponent({
-  name: "MoreActionsRenderer",
-  eventHandlers: {},
-  properties: RowActionsRendererProperties,
-  View: MoreActionsRendererView
-});
-export default MoreActionsRenderer;

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
-import CustomDropdown from '@zohodesk-private/desk-components/es/CustomDropdown/CustomDropdown';
-import ListItemConstants from "../../../../../../../cc/list-item/Constants";
-import IconButton from '@zohodesk/dot/es/IconButton/IconButton';
-import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
-export const ListItemConvertor = action => {
-  const {
-    id,
-    properties: {
-      icon
-    },
-    eventMappings,
-    instanceName
-  } = action;
-  const label = action.properties.label ? action.properties.label : action.properties.text;
-  const updatedEventMappings = eventMappings.map(eventMapping => {
-    return { ...eventMapping,
-      sourceEvent: ListItemConstants.LISTITEM_CLICKED
-    };
-  });
-  return {
-    component: 'ListItem',
-    properties: {
-      text: label,
-      tooltip: label,
-      icon,
-      id
-    },
-    eventMappings: updatedEventMappings,
-    id,
-    instanceName
-  };
-};
-
-function MoreActionsRendererView(_ref, ref) {
-  let {
-    state,
-    helpers
-  } = _ref;
-  const {
-    actions,
-    clientScripts
-  } = state.properties;
-  const listItemActions = actions.map(action => {
-    return ListItemConvertor(action);
-  });
-
-  const renderTargetElement = _ref2 => {
-    let {
-      handleTogglePopup,
-      isPopupOpen
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      iconName: "ZD-GN-more",
-      iconSize: "16",
-      isActive: isPopupOpen,
-      onClick: handleTogglePopup
-    });
-  };
-
-  return /*#__PURE__*/React.createElement(CustomDropdown, {
-    $ui_boxSize: "medium",
-    $flag_padding: true,
-    $render_targetElement: renderTargetElement,
-    $method_getRef: ref,
-    $customProps_dropbox: {
-      onClick: undefined
-    }
-  }, listItemActions.map(action => /*#__PURE__*/React.createElement(ActionEventMediator, {
-    key: action.id,
-    action: action,
-    clientScripts: findMappedClientScripts(action, clientScripts),
-    instanceName: action.instanceName // getRef={ref}
-
-  })));
-}
-
-export default MoreActionsRendererView;

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

@@ -1,12 +0,0 @@
-import { createCustomComponent } from "../../../../../../../library/custom-component";
-import RowActionsRendererProperties from "../../../../../cc/action-event-mediator/Properties";
-import RowActionsRendererView from "./RowActionsRendererView";
-import { ComponentRegistry } from "../../../../../../../library";
-const RowActionsRendererComponent = createCustomComponent({
-  name: 'RowActionsRenderer',
-  properties: RowActionsRendererProperties,
-  eventHandlers: {},
-  View: RowActionsRendererView
-});
-ComponentRegistry.register("RowActionsRenderer", RowActionsRendererComponent);
-export default RowActionsRendererComponent;

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

@@ -1,23 +0,0 @@
-.wrapper {
-    max-width: 100% 
-}
-
-.gap_small {
-    gap: var(--zd_size4) 
-}
-
-.gap_xmedium {
-    gap: var(--zd_size6) 
-}
-
-.gap_medium {
-    gap: var(--zd_size8) 
-}
-
-.gap_large {
-    gap: var(--zd_size10) 
-}
-
-.gap_xlarge {
-    gap: var(--zd_size12) 
-}

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import Flex from '@zohodesk/layout/es/Flex/Flex';
-import { ActionViewGap } from "../../../../interfaces/ActionViewModel";
-// @ts-ignore
-import style from "./RowActionsRenderer.module.css";
-import ActionEventMediator from "../../../../action-event-mediator/frameworks/ui/ActionEventMediator";
-import { findMappedClientScripts } from "../../../../../../client-scripts/behaviour/zclient-scripts-execution/frameworks/ClientScriptsUtils";
-
-function RowActionsRendererView(_ref, ref) {
-  let {
-    state
-  } = _ref;
-  const {
-    actions,
-    gap,
-    clientScripts,
-    testId
-  } = state.properties;
-  return /*#__PURE__*/React.createElement(Flex, {
-    ref: ref,
-    testId: testId ? testId : "",
-    $ui_displayMode: "inline",
-    $ui_alignItems: "center",
-    $ui_className: `${gap !== ActionViewGap.NONE ? style[`gap_${gap}`] : ''}`
-  }, actions.map((action, index) => {
-    // @ts-ignore
-    return /*#__PURE__*/React.createElement(ActionEventMediator, {
-      action: action,
-      clientScripts: findMappedClientScripts(action, clientScripts),
-      key: index,
-      instanceName: action.instanceName
-    });
-  }));
-}
-
-;
-export default RowActionsRendererView;