@zohodesk/library-platform 1.1.12 → 1.2.0

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

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import Table from '@zohodesk-private/desk-components/es/table/Table/Table';
+import FloatingPagination from "../../../../legacy-to-new-arch/floating-pagination/frameworks/ui/FloatingPagination";
 import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
 import Rows from "./sub-components/Rows";
@@ -35,6 +36,7 @@ function TableListView(_ref2, _ref) {
     rowActionsConfig,
     keyboardControlsConfig,
     textOverflowConfig,
+    floatPaginationConfig,
     selection,
     emptyStateUiType,
     isError
@@ -56,6 +58,16 @@ function TableListView(_ref2, _ref) {
   const isReorderEnabled = reOrderConfig.isEnabled;
   const isSelectionEnabled = selectionConfig.isEnabled;
   const isMultiline = textOverflowConfig.mode === 'wrap';
+  const {
+    isEnabled: isPaginationEnabled,
+    scrollCount,
+    totalCount,
+    scrollToUpTooltip,
+    scrollToDownTooltip,
+    isTopReached,
+    isBottomReached,
+    isVisible
+  } = floatPaginationConfig;
   const className = getTableListClassName({
     isKeyboardControlsEnabled,
     isReorderEnabled,
@@ -70,6 +82,9 @@ function TableListView(_ref2, _ref) {
     "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement(Table, {
     ref: TableRef,
+    customStyle: !isLoading && isPaginationEnabled ? {
+      table: style.paginationSpace
+    } : undefined,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
@@ -110,7 +125,15 @@ function TableListView(_ref2, _ref) {
   }), /*#__PURE__*/React.createElement(Loading, {
     isLoading: isLoading,
     hasRows: hasRows
-  })), renderColumnResizingLine(resizerState));
+  })), renderColumnResizingLine(resizerState), isPaginationEnabled && isVisible && scrollCount > 0 && totalCount !== undefined && /*#__PURE__*/React.createElement("div", {
+    className: style.pagination
+  }, /*#__PURE__*/React.createElement(FloatingPagination, {
+    text: `${scrollCount}/${totalCount}`,
+    scrollToUpTooltip: scrollToUpTooltip,
+    scrollToDownTooltip: scrollToDownTooltip,
+    isScrollToUpDisabled: isTopReached,
+    isScrollToDownDisabled: isBottomReached
+  })));
 }
 
 function renderHeader(_ref3) {

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

@@ -136,15 +136,19 @@
     /*  */
 }
 
+.paginationSpace {
+    padding-bottom: var(--zd_size70) ;
+}
+
 .loader {
-    padding: var(--zd_size40) 0 
+    padding: var(--zd_size20) 0 
 }
 
 .wrapper {
     height: 100% ;
     width: 100% ;
     z-index: 1;
-    position: relative
+    position: relative;
 }
 
 .hiddenDummyRow {
@@ -333,4 +337,17 @@
 [dir=rtl] .massActionHeader {
     right: var(--local-tableList-massActionHeader-left, 0);
     padding-left: var(--local-tableList-massActionHeader-paddingRight, 0);
+}
+
+.pagination {
+    composes: posab from '~@zohodesk/components/lib/common/common.module.css';
+    bottom: var(--zd_size20) ;
+}
+
+[dir=ltr] .pagination {
+    right: var(--zd_size30) ;
+}
+
+[dir=rtl] .pagination {
+    left: var(--zd_size30) ;
 }

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

@@ -41,7 +41,7 @@ function HeaderData(_ref) {
       },
       $customProps_container: hasActions ? {
         $ui_displayMode: 'flex',
-        $ui_alignItems: 'center',
+        $ui_alignItems: isMultiline ? 'baseline' : 'center',
         $ui_justifyContent: AlignmentOfFlex[alignment]
       } : null,
       customStyle: hasActions ? {

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({
@@ -122,11 +124,7 @@ const DragHandler = SortableHandle(_ref3 => {
   } = _ref3;
   return /*#__PURE__*/React.createElement(DragHandle, {
     isDisabled: isDisabled,
-    customProps: {
-      containerProps: {
-        $ui_alignItems: isMultiline ? 'start' : 'center'
-      }
-    },
+    iconVerticalPlacement: isMultiline ? 'top' : 'middle',
     customStyle: {
       container: style.dragHandleContainer
     }

package/es/library/dot/legacy-to-new-arch/action-band-components/search/frameworks/ui/Search.js

@@ -0,0 +1,41 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import SearchProperties from "../../../../../../../cc/search/Properties";
+import SearchEvents from "../../../../../../../cc/search/Events";
+import SearchView from "./SearchView";
+import SearchBehaviourFactory from "../../../../../../behaviours/search-box/frameworks/ui/SearchBehaviourFactory";
+import { SEARCH_TYPE_CLEAR_REQUESTED, SEARCH_TYPE_UPDATE_REQUESTED } from "../../../../../../../bc/search-box/Constants";
+import SearchTranslator from "./SearchTranslator";
+import { SearchConstants } from "../../../../../../../cc/search";
+let Search = createCustomComponent({
+  name: "Search",
+  View: SearchView,
+  properties: SearchProperties,
+  events: SearchEvents,
+  transformState: SearchTranslator.transformState,
+  eventHandlers: {
+    [SearchConstants.SEARCH_REQUESTED]: _ref => {
+      let {
+        action,
+        dispatch
+      } = _ref;
+      const {
+        payload
+      } = action;
+      dispatch({
+        type: SEARCH_TYPE_UPDATE_REQUESTED,
+        payload
+      });
+    },
+    [SearchConstants.SEARCH_CLEARED]: _ref2 => {
+      let {
+        action,
+        dispatch
+      } = _ref2;
+      dispatch({
+        type: SEARCH_TYPE_CLEAR_REQUESTED
+      });
+    }
+  },
+  behaviours: [SearchBehaviourFactory.create()]
+});
+export default Search;

package/es/library/dot/legacy-to-new-arch/action-band-components/search/frameworks/ui/SearchTranslator.js

@@ -0,0 +1,16 @@
+export default class SearchTranslator {
+  static transformState(state) {
+    const {
+      search
+    } = state.behaviours;
+    const {
+      searchQuery
+    } = search;
+    return { ...state,
+      viewModel: { ...state.viewModel,
+        value: searchQuery
+      }
+    };
+  }
+
+}

package/es/library/dot/legacy-to-new-arch/action-band-components/search/frameworks/ui/SearchView.js

@@ -0,0 +1,37 @@
+import React from "react";
+import SearchBox from '@zohodesk-private/desk-components/es/SearchBox/SearchBox';
+import SearchConstants from "../../../../../../../cc/search/Constants";
+
+function SearchView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    value
+  } = state.viewModel;
+  return /*#__PURE__*/React.createElement(SearchBox, {
+    getRef: ref,
+    value: value,
+    onChange: searchQuery => {
+      dispatch({
+        type: SearchConstants.SEARCH_REQUESTED,
+        payload: {
+          searchQuery
+        }
+      });
+    },
+    onClear: () => {
+      dispatch({
+        type: SearchConstants.SEARCH_CLEARED
+      });
+    },
+    customId: "searchBox",
+    testId: "searchBox"
+  });
+}
+
+export default SearchView;

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -13,6 +13,8 @@ export default function ActionIconView(_ref, ref) {
     iconSize,
     hasPadding,
     label,
+    colorVariant,
+    isHoverable,
     hoverVariant,
     isDisabled
   } = state.properties;
@@ -23,11 +25,13 @@ export default function ActionIconView(_ref, ref) {
     ref: ref,
     $ui_iconName: icon,
     $ui_size: JSON.stringify(iconSize),
+    $ui_colorVariant: colorVariant,
+    $flag_isHoverable: isHoverable,
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
     $flag_hasPadding: hasPadding,
-    customStyle: hoverVariant === 'default' ? {
+    customStyle: !isHoverable && hoverVariant === 'default' ? {
       icon: style.cursor_default
     } : undefined,
     $event_onClick: !isDisabled ? () => {

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/floating-pagination/frameworks/ui/FloatingPagination.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import FloatingPaginationProperties from "../../../../../../cc/floating-pagination/Properties";
+import FloatingPaginationView from "./FloatingPaginationView";
+let WrapFloatingPagination = createCustomComponent({
+  name: "FloatingPagination",
+  View: FloatingPaginationView,
+  properties: FloatingPaginationProperties,
+  eventHandlers: {}
+});
+export default WrapFloatingPagination;

package/es/library/dot/legacy-to-new-arch/floating-pagination/frameworks/ui/FloatingPaginationView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import FloatingPagination from '@zohodesk-private/desk-components/es/ListPagination/ListPagination';
+import FloatingPaginationConstants from "../../../../../../cc/floating-pagination/Constants";
+
+function FloatingPaginationView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  let {
+    text,
+    hasScrollControls,
+    scrollToUpTooltip,
+    scrollToDownTooltip,
+    isScrollToUpDisabled,
+    isScrollToDownDisabled
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(FloatingPagination, {
+    text: text,
+    hasScrollControls: hasScrollControls,
+    scrollToUpTooltip: scrollToUpTooltip,
+    scrollToDownTooltip: scrollToDownTooltip,
+    customProps: {
+      container: {
+        eleRef: ref
+      }
+    },
+    isScrollToUpDisabled: isScrollToUpDisabled,
+    isScrollToDownDisabled: isScrollToDownDisabled,
+    onScrollToUp: () => {
+      dispatch({
+        type: FloatingPaginationConstants.SCROLL_UP_CLICKED
+      });
+    },
+    onScrollToDown: () => {
+      dispatch({
+        type: FloatingPaginationConstants.SCROLL_DOWN_CLICKED
+      });
+    },
+    testId: "listPagination"
+  });
+}
+
+export default FloatingPaginationView;

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,7 @@ 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";
+export { default as ActionIcon } from "./action-icon/frameworks/ui/ActionIcon";
+export { default as SortDropdown } from "./sort-dropdown/frameworks/ui/SortDropdown";

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/list-item/frameworks/ui/ListItemView.js

@@ -19,6 +19,7 @@ function ListItemView(_ref, ref) {
     isActive,
     text,
     secondaryText,
+    palette,
     size,
     tooltip,
     icon,
@@ -41,6 +42,7 @@ function ListItemView(_ref, ref) {
       active: isActive,
       value: text,
       secondaryValue: secondaryText,
+      palette: palette,
       size: size,
       title: tooltip,
       disableTitle: tooltip,
@@ -72,6 +74,7 @@ function ListItemView(_ref, ref) {
       active: isActive,
       value: text,
       secondaryValue: secondaryText,
+      palette: palette,
       size: size,
       title: tooltip,
       disableTitle: tooltip,
@@ -99,6 +102,7 @@ function ListItemView(_ref, ref) {
       active: isActive,
       value: text,
       secondaryValue: secondaryText,
+      palette: palette,
       size: size,
       title: tooltip,
       disableTitle: tooltip,

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,125 @@
+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",
+    testId: "radioDropdown",
+    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/ribbon/frameworks/ui/Ribbon.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import RibbonProperties from "../../../../../../cc/ribbon/Properties";
+import RibbonView from "./RibbonView";
+let Ribbon = createCustomComponent({
+  name: "Ribbon",
+  View: RibbonView,
+  properties: RibbonProperties,
+  eventHandlers: {}
+});
+export default Ribbon;

package/es/library/dot/legacy-to-new-arch/ribbon/frameworks/ui/RibbonView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Ribbon from '@zohodesk-private/desk-components/es/Ribbon/Ribbon';
+const paletteMapper = {
+  secondary: 'grey',
+  warning: 'orange'
+};
+
+function RibbonView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  let {
+    text,
+    palette,
+    iconName,
+    iconSize,
+    size,
+    flagPlacement
+  } = state.properties;
+  palette = paletteMapper[palette] || palette;
+  return /*#__PURE__*/React.createElement(Ribbon, {
+    text: text,
+    palette: palette,
+    iconName: iconName,
+    iconSize: iconSize,
+    size: size,
+    arrowDirection: flagPlacement,
+    isInline: true,
+    customProps: {
+      container: {
+        eleRef: ref
+      }
+    }
+  });
+}
+
+export default RibbonView;

package/es/library/dot/legacy-to-new-arch/sort-dropdown/frameworks/ui/SortDropdown.js

@@ -0,0 +1,31 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import SortDropdownProperties from "../../../../../../cc/sort-dropdown/Properties";
+import SortDropdownConstants from "../../../../../../cc/sort-dropdown/Constants";
+import SortDropdownEvents from "../../../../../../cc/sort-dropdown/Events";
+import SortDropdownView from "./SortDropdownView";
+import SearchBehaviourFactory from "../../../../../behaviours/search/frameworks/ui/SearchStringStoreBehaviourFactory";
+import { SEARCH_REQUESTED } from "../../../../../../bc/search/Constants";
+import SortDropdownTranslator from "./SortDropdownTranslator";
+const SortDropdown = createCustomComponent({
+  name: 'SortDropdown',
+  View: SortDropdownView,
+  properties: SortDropdownProperties,
+  transformState: SortDropdownTranslator.transformState,
+  behaviours: [SearchBehaviourFactory.create()],
+  events: SortDropdownEvents,
+  eventHandlers: {
+    [SortDropdownConstants.SORT_DROPDOWN_SEARCH_REQUESTED]: _ref => {
+      let {
+        dispatch,
+        action
+      } = _ref;
+      dispatch({
+        type: SEARCH_REQUESTED,
+        payload: {
+          searchString: action.payload.searchValue
+        }
+      });
+    }
+  }
+});
+export default SortDropdown;