@zohodesk/dot 1.0.0-temp-210 → 1.0.0-temp-187.16

package/es/FreezeLayer/FreezeLayer.js

@@ -21,8 +21,7 @@ export default function FreezeLayer(props) {
     forwardRef,
     isSvgMask,
     needAutoZindex,
-    customStyle,
-    onEnterComplete
+    customStyle
   } = props;
   const finalStyle = mergeStyle(style, customStyle);
   const {
@@ -43,8 +42,7 @@ export default function FreezeLayer(props) {
   return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: animationName && animationName,
     isActive: isActive,
-    runOnMount: runOnMount,
-    onEnterComplete: onEnterComplete
+    runOnMount: runOnMount
   }, /*#__PURE__*/React.createElement("div", {
     style: isActive && needAutoZindex ? {
       zIndex: `${getNextIndex()}`
@@ -60,8 +58,7 @@ export default function FreezeLayer(props) {
     component: Container,
     alignBox: "row",
     align: align,
-    dataId: "reactFreezeLayer",
-    onEnterComplete: onEnterComplete
+    dataId: "reactFreezeLayer"
   }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: align,

package/es/FreezeLayer/props/defaultProps.js

@@ -5,6 +5,5 @@ export const defaultProps = {
   isSvgMask: false,
   customClass: '',
   customStyle: {},
-  needAutoZindex: true,
-  onEnterComplete: {}
+  needAutoZindex: true
 };

package/es/FreezeLayer/props/propTypes.js

@@ -14,7 +14,6 @@ export const propTypes = {
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
   customStyle: PropTypes.object,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10']),
-  onEnterComplete: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+  zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
 };
 export default propTypes;

package/es/Link/__tests__/Link.spec.js

@@ -1,11 +1,131 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Link from "../Link";
-describe('Link', () => {
-  test('rendering the defult props', () => {
+import LinkContext from "../LinkContext";
+describe('Link Component Snapshot Tests', () => {
+  const targetOptions = ['_blank', '_self'];
+  const mockContextOptions = {
+    options: {
+      isLink: true,
+      constructURL: jest.fn((urlName, urlData) => `https://zoho.com/${urlName}/${urlData || ''}`)
+    }
+  };
+
+  const renderWithProvider = component => render( /*#__PURE__*/React.createElement(LinkContext.Provider, {
+    value: mockContextOptions
+  }, component));
+
+  test('renders with default props', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Link, null));
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with children content', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, null, "Click Here"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with href prop', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      href: "https://zoho.com"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(targetOptions)('renders with target - %s', target => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      target: target
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData using provider', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      urlName: "profile",
+      urlData: {
+        id: 123
+      }
+    }));
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', {
+      id: 123
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and undefined urlData using provider', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      urlName: "profile"
+    }));
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith('profile', undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with urlName and urlData as undefined using provider', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      urlName: undefined,
+      urlData: undefined
+    }));
+    expect(mockContextOptions.options.constructURL).toHaveBeenCalledWith(undefined, undefined);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with custom className', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      className: "custom-link"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with title prop', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      title: "Example Title"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with download attribute', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      download: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with rel attribute', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      rel: "noopener noreferrer"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with dataId prop', () => {
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      dataId: "test-id"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with customProps', () => {
+    const customProps = {
+      'data-custom': 'customValue',
+      'data-id': 'uniqueId'
+    };
+    const {
+      asFragment
+    } = renderWithProvider( /*#__PURE__*/React.createElement(Link, {
+      customProps: customProps
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/Link/__tests__/__snapshots__/Link.spec.js.snap

@@ -1,10 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link rendering the defult props 1`] = `
+exports[`Link Component Snapshot Tests renders with children content 1`] = `
 <DocumentFragment>
   <a
     class="container  "
-    href="javascript:void(0);"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  >
+    Click Here
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with custom className 1`] = `
+<DocumentFragment>
+  <a
+    class="container  custom-link"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with customProps 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-custom="customValue"
+    data-id="uniqueId"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with dataId prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-id="test-id"
+    data-test-id="test-id"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with default props 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with download attribute 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    download=""
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with href prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with rel attribute 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with target - _blank 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+    target="_blank"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with target - _self 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+    target="_self"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with title prop 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    data-title="Example Title"
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and undefined urlData using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/profile/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and urlData as undefined using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/undefined/"
+    rel="noopener noreferrer"
+  />
+</DocumentFragment>
+`;
+
+exports[`Link Component Snapshot Tests renders with urlName and urlData using provider 1`] = `
+<DocumentFragment>
+  <a
+    class="container  "
+    href="https://zoho.com/profile/[object Object]"
     rel="noopener noreferrer"
   />
 </DocumentFragment>

package/es/Onboarding/Onboarding.js

@@ -28,7 +28,7 @@ import useOnboarding from "./hooks/useOnboarding";
 import { DUMMY_OBJECT } from "../utils/General";
 /** style **/
 
-import defaultStyle from "./css/Onboarding.module.css";
+import defaultStyle from "./css/CardOnboarding.module.css";
 
 const Onboarding = _ref => {
   let {

package/es/VideoLookup/VideoLookup.js

@@ -11,7 +11,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
-import defaultStyle from "./css/VideoLookup.module.css";
+import defaultStyle from "./css/VideoLookupStyles.module.css";
 export default function VideoLookup(props) {
   const {
     isOpened,

package/es/form/fields/Fields.module.css

@@ -218,3 +218,7 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
+}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,12 +160,14 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = ''
+      textBoxIconWrapperClass = '',
+      dropBoxClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {}
+      TagProps = {},
+      ListItemProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -254,7 +256,8 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown
+          customDropBoxWrap: style.dropdown,
+          customDropBox: dropBoxClass
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -300,7 +303,8 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass
+          customClass: listItemClass,
+          ...ListItemProps
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,7 +52,8 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object
+    TagProps: PropTypes.object,
+    ListItemProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,8 +48,12 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
+    const {
+      ToggleDropDownProps = {}
+    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -84,7 +88,8 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching
+      needSearchFetching: needSearchFetching,
+      ...ToggleDropDownProps
     });
   }
 

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,5 +20,8 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -178,8 +178,12 @@ export class StatusDropdown extends React.Component {
       targetOffset,
       renderTargetElement,
       renderFooterElement,
-      a11y = {}
+      a11y = {},
+      customClass
     } = this.props;
+    const {
+      dropBoxClass = ''
+    } = customClass;
     const {
       tabIndex = 0,
       ariaLabelledby,
@@ -247,7 +251,8 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: dropBoxClass
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,

package/es/list/status/StatusDropdown/props/defaultProps.js

@@ -18,5 +18,6 @@ export const defaultProps = {
   needMultiLineText: false,
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  customClass: {}
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -56,5 +56,8 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  customClass: PropTypes.shape({
+    dropBoxClass: PropTypes.string
+  })
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -36,9 +36,8 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue {
+  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -90,6 +89,10 @@
 }
 /* Status Type */
 .statusType {
+  --status_listitem_bullet_min_height: var(--zd_size8);
+  --status_listitem_bullet_min_width: var(--zd_size8);
+  min-height: var(--status_listitem_bullet_min_height);
+  min-width: var(--status_listitem_bullet_min_width);
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
   border-radius: 50%;