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

package/es/cc/tags-list-dropdown/Properties.js

@@ -0,0 +1,96 @@
+const TagProperties = {
+  hasSearch: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  searchPlaceholder: {
+    required: false,
+    defaultValue: 'Search',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  text: {
+    required: false,
+    defaultValue: '',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  dropdownHeading: {
+    required: false,
+    defaultValue: '',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  emptyMessage: {
+    required: false,
+    defaultValue: 'No tags found',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  tags: {
+    required: false,
+    defaultValue: [],
+    typeMetadata: {
+      schema: {
+        $schema: 'http://json-schema.org/draft-07/schema#',
+        definitions: {
+          TagsProperties: {
+            type: 'object',
+            properties: {
+              id: {
+                type: 'string'
+              },
+              label: {
+                type: 'string'
+              },
+              color: {
+                type: 'string'
+              },
+              imageSrc: {
+                type: 'string'
+              },
+              imageAltText: {
+                type: 'string'
+              },
+              iconName: {
+                type: 'string'
+              },
+              iconSize: {
+                type: 'string'
+              },
+              disabled: {
+                type: 'boolean'
+              },
+              tooltip: {
+                type: 'string'
+              }
+            },
+            required: ['label']
+          }
+        },
+        type: 'array',
+        items: {
+          $ref: '#/definitions/TagsProperties'
+        }
+      }
+    }
+  }
+};
+export default TagProperties;

package/es/cc/tags-list-dropdown/index.js

@@ -0,0 +1,4 @@
+export { default as TagsListDropdownProperties } from "./Properties";
+export { default as TagsListDropdownEvents } from "./Events";
+export { default as TagsListDropdownConstants } from "./Constants";
+export { default as TagsListDropdownDataType } from "./Data";

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

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

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

@@ -137,35 +137,35 @@
 }
 
 .loader {
-    padding: 40px 0
+    padding: var(--zd_size40) 0 
 }
 
 .wrapper {
-    height: 100%;
-    width: 100%;
+    height: 100% ;
+    width: 100% ;
     z-index: 1;
     position: relative
 }
 
 .hiddenDummyRow {
-    height: 40px;
-    width: 0;
+    height: var(--zd_size40) ;
+    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) * 1px);
+    width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
     flex-shrink: 0
 }
 
@@ -174,32 +174,32 @@
 }
 
 [dir=ltr] .contentWrapper {
-    left: 0;
+    left: 0 ;
 }
 
 [dir=rtl] .contentWrapper {
-    right: 0;
+    right: 0 ;
 }
 
 .initialLoading {
-    height: calc(100% - 100px)
+    height: calc(100% - (var(--zd_size100)))
 }
 
 .emptyContent {
-    padding: 160px 0 60px
+    padding: var(--zd_size160) 0 var(--zd_size60) 
 }
 
 .errorContent {
-    padding: 60px 0
+    padding: var(--zd_size60) 0 
 }
 
 .headerWithActions,
 .fieldWithActions {
-    gap: 6px
+    gap: var(--zd_size6) 
 }
 
 .actions {
-    gap: 8px
+    gap: var(--zd_size8) 
 }
 
 .rowCursor_default {
@@ -244,7 +244,7 @@
 }
 
 .dragHandleContainer {
-    height: 100%;
+    height: 100% ;
     opacity: 0;
     visibility: hidden;
 }
@@ -268,8 +268,8 @@
 }
 
 .rowDropIndicator {
-    width: 100%;
-    height: 2px;
+    width: 100% ;
+    height: var(--zd_size2) ;
     /* css:theme-validation:ignore */
     position: absolute;
     z-index: 2;
@@ -277,11 +277,11 @@
 }
 
 .dropIndicatorTop {
-    top: 0;
+    top: 0 ;
 }
 
 .dropIndicatorBottom {
-    bottom: -3px;
+    bottom: calc( var(--zd_size3) * -1 ) ;
 }
 
 .row {

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) {
@@ -63,7 +65,7 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
-      tableList: style.row,
+      tableList: `${arrowStyle.transparentContainer} ${style.row}`,
       $pointer: style[`rowCursor_${cursor}`]
     }
   }, renderReorderer({

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: 4px;
+    column-gap: var(--zd_size4) ;
 }
 
 .separator {
     --separator_fontSize: 14px;
-    margin: 0 10px;
+    margin: 0 var(--zd_size10) ;
 }
 
 .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: 2px;
+    margin-top: var(--zd_size2) ;
 }

package/es/library/dot/legacy-to-new-arch/email/frameworks/ui/EmailView.js

@@ -13,7 +13,8 @@ function EmailView(_ref, ref) {
   let {
     email,
     isDotted,
-    weight
+    weight,
+    tooltip
   } = state.properties;
   return /*#__PURE__*/React.createElement(TableEmail, {
     $method_getRef: ref,
@@ -27,7 +28,8 @@ function EmailView(_ref, ref) {
         }
       });
     },
-    $data_email: email
+    $data_email: email,
+    $i18n_tooltip: tooltip
   });
 }
 

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";

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: 6px
+    padding-right: var(--zd_size6) 
 }[dir=rtl] .label {
-    padding-left: 6px
+    padding-left: var(--zd_size6) 
 }
 
 .mandatory::after {
@@ -11,9 +11,9 @@
 }
 
 [dir=ltr] .mandatory::after {
-    padding-left: 2px
+    padding-left: var(--zd_size2) 
 }
 
 [dir=rtl] .mandatory::after {
-    padding-right: 2px
+    padding-right: var(--zd_size2) 
 }

package/es/library/dot/legacy-to-new-arch/link/frameworks/ui/LinkView.js

@@ -11,11 +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
@@ -24,12 +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/css/MultiSelectView.module.css

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

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

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

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