@zohodesk/dot 1.0.0-temp-212 → 1.0.0-temp-200.8

package/es/FormAction/__tests__/FormAction.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import FormAction from '../FormAction';
+import FormAction from "../FormAction";
 describe('FormAction', () => {
   test('rendering the defult props', () => {
     const {

package/es/FreezeLayer/FreezeLayer.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Container } from '@zohodesk/components/lib/Layout';
 import { mergeStyle } from '@zohodesk/utils';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import cssJSLogic from './css/cssJSLogic';
-import useFreezeLayer from '../Hooks/useFreezeLayer';
-import style from './css/FreezeLayer.module.css';
+import cssJSLogic from "./css/cssJSLogic";
+import useFreezeLayer from "../Hooks/useFreezeLayer";
+import style from "./css/FreezeLayer.module.css";
 export default function FreezeLayer(props) {
   let {
     isActive: propsActive,
@@ -21,7 +21,10 @@ export default function FreezeLayer(props) {
     forwardRef,
     isSvgMask,
     needAutoZindex,
-    customStyle
+    customStyle,
+    onAnimateEnter,
+    postAnimateStyles,
+    onAnimateExit
   } = props;
   const finalStyle = mergeStyle(style, customStyle);
   const {
@@ -58,7 +61,10 @@ export default function FreezeLayer(props) {
     component: Container,
     alignBox: "row",
     align: align,
-    dataId: "reactFreezeLayer"
+    dataId: "reactFreezeLayer",
+    onEnterComplete: onAnimateEnter,
+    postEnterStyles: postAnimateStyles,
+    onExitComplete: onAnimateExit
   }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: align,

package/es/FreezeLayer/__tests__/FreezeLayer.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import FreezeLayer from '../FreezeLayer';
+import FreezeLayer from "../FreezeLayer";
 describe('FreezeLayer', () => {
   test('rendering the defult props', () => {
     const {

package/es/FreezeLayer/index.js

@@ -1,2 +1,2 @@
-export { default as FreezeLayer } from './FreezeLayer';
-export { default as FreezeLayerPropTypes } from './props/propTypes';
+export { default as FreezeLayer } from "./FreezeLayer";
+export { default as FreezeLayerPropTypes } from "./props/propTypes";

package/es/FreezeLayer/props/propTypes.js

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

package/es/Hooks/Dragger/useDragger.js

@@ -1,14 +1,14 @@
 //Hooks from React
 import { useEffect, useRef, useCallback } from 'react'; //CustomFunction
 
-import { DragPosCalc } from './utils/DraggerUtil'; //GlobalConfig
+import { DragPosCalc } from "./utils/DraggerUtil"; //GlobalConfig
 
-import { getDotLibraryConfig } from '../../Provider/Config'; //Props
+import { getDotLibraryConfig } from "../../Provider/Config"; //Props
 
-import defaultProps from './props/defaultProps';
-import propTypes from './props/propTypes'; //CSS
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes"; //CSS
 
-import style from './css/Dragger.module.css';
+import style from "./css/Dragger.module.css";
 export default function useDragger(_ref) {
   let {
     isActive,
@@ -86,6 +86,8 @@ export default function useDragger(_ref) {
     style.top = `${top}px`;
     style.left = `${left}px`;
     style.width = `${width}px`;
+    style.bottom = 'initial';
+    style.right = 'initial';
     style.position = 'fixed';
     offset.current.x = draggableEle.current.offsetLeft - e.clientX;
     offset.current.y = draggableEle.current.offsetTop - e.clientY;

package/es/Hooks/useFreezeLayer.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { isTextSelected, cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
-import { getDotLibraryConfig } from '../Provider/Config';
+import { getDotLibraryConfig } from "../Provider/Config";
 export default function useFreezeLayer(_ref) {
   let {
     isActive: propsActive,

package/es/IconButton/IconButton.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
-import style from './IconButton.module.css';
+import style from "./IconButton.module.css";
 export default class IconButton extends React.Component {
   constructor(props) {
     super(props);
@@ -136,7 +136,7 @@ export default class IconButton extends React.Component {
       isBold: isBold,
       size: iconSize,
       name: iconName,
-      iconClass: iconClass
+      iconClass: `${iconClass} ${style.icon_button_center}`
     }) : null, children ? children : null));
   }
 

package/es/IconButton/IconButton.module.css

@@ -46,4 +46,7 @@
 .primaryFilled,
 .primaryFilled_active {
   --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}
+.icon_button_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
 }

package/es/IconButton/__tests__/IconButton.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import IconButton from '../IconButton.js';
+import IconButton from "../IconButton.js";
 describe('IconButton', () => {
   test('rendering the defult props', () => {
     const {

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

@@ -94,7 +94,7 @@ exports[`IconButton rendering in Icon 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-infoStroke fbold iconClass  "
+      class="zd_font_icons basic icon-infoStroke fbold iconClass icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/es/Image/Image.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './Image.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./Image.module.css";
 export default class Image extends React.Component {
   render() {
     let {

package/es/Image/__tests__/Image.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from "@testing-library/react";
-import Image from '../Image.js';
+import Image from "../Image.js";
 describe('Image - ', () => {
   test('rendering the default props', () => {
     const {

package/es/ImportantNotes/ImportantNotes.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Icon } from '@zohodesk/icons';
-import style from './ImportantNotes.module.css';
+import style from "./ImportantNotes.module.css";
 export default class ImportantNotes extends React.Component {
   constructor(props) {
     super(props);

package/es/ImportantNotes/__tests__/ImportantNotes.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ImportantNotes from '../ImportantNotes';
+import ImportantNotes from "../ImportantNotes";
 describe('ImportantNotes', () => {
   test('rendering the defult props', () => {
     const {

package/es/Link/Link.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
-import style from './Link.module.css';
-import LinkContext from './LinkContext';
+import style from "./Link.module.css";
+import LinkContext from "./LinkContext";
 export default class Link extends React.Component {
   constructor(props, context) {
     super(props, context);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Link from '../Link';
-import LinkContext from '../LinkContext';
+import Link from "../Link";
+import LinkContext from "../LinkContext";
 describe('Link Component Snapshot Tests', () => {
   const targetOptions = ['_blank', '_self'];
   const mockContextOptions = {

package/es/Loader/Loader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import style from './Loader.module.css';
+import style from "./Loader.module.css";
 export default class Loader extends React.Component {
   constructor(props) {
     super(props);

package/es/Loader/__tests__/Loader.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Loader from '../Loader';
+import Loader from "../Loader";
 describe('Loader', () => {
   test('rendering the defult props', () => {
     const {

package/es/Message/Message.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes, MessageUI_propTypes, MessageNew_propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes, MessageUI_propTypes, MessageNew_propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import AutoClose from '../actions/AutoClose';
-import style from './Message.module.css';
+import AutoClose from "../actions/AutoClose";
+import style from "./Message.module.css";
 export default class Message extends React.Component {
   constructor(props) {
     super(props);

package/es/Message/__tests__/Message.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Message from '../Message';
+import Message from "../Message";
 describe('Message', () => {
   test('rendering the defult props', () => {
     const {

package/es/Message/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AutoClose_PropTypes } from '../../actions/props/propTypes';
+import { propTypes as AutoClose_PropTypes } from "../../actions/props/propTypes";
 export const propTypes = {
   hideMessage: PropTypes.func,
   showMessage: PropTypes.bool,

package/es/MessageBanner/MessageBanner.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Link from '../Link/Link';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import Link from "../Link/Link";
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './MessageBanner.module.css';
+import style from "./MessageBanner.module.css";
 export default class MessageBanner extends React.Component {
   render() {
     let {

package/es/MessageBanner/__tests__/MessageBanner.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import MessageBanner from '../MessageBanner';
+import MessageBanner from "../MessageBanner";
 describe('MessageBanner', () => {
   const PALETTE = ['default', 'blue', 'white'];
   const TYPE = ['primary', 'secondary'];

package/es/NewStar/NewStar.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
-import style from './NewStar.module.css';
+import style from "./NewStar.module.css";
 export default class NewStar extends React.Component {
   render() {
     let {

package/es/NewStar/__tests__/NewStar.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import NewStar from '../NewStar';
+import NewStar from "../NewStar";
 describe('NewStar', () => {
   const PALETTE = ['green', 'blue', 'yellow'];
   const POSITION = ['topRight', 'topLeft', 'bottomRight', 'bottomLeft'];

package/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js

@@ -1,11 +1,11 @@
 import React from 'react';
 /* Props */
 
-import { propTypes } from './props/propTypes.js';
-import { defaultProps } from './props/defaultProps.js';
+import { propTypes } from "./props/propTypes.js";
+import { defaultProps } from "./props/defaultProps.js";
 /* Style */
 
-import style from './css/CarouselDot.module.css';
+import style from "./css/CarouselDot.module.css";
 
 function CarouselDot(props) {
   const {

package/es/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import CarouselDot from '../CarouselDot';
+import CarouselDot from "../CarouselDot";
 describe('CarouselDot', () => {
   test('rendering the defult props', () => {
     const {

package/es/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -52,11 +52,11 @@
   }
   [dir=ltr] .bulletActive::after {
     left:-100% ;
-    animation:  progressLoading-ltr 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=rtl] .bulletActive::after {
     right:-100% ;
-    animation:  progressLoading-rtl 5s linear infinite;
+    animation: progressLoading 5s linear infinite;
   }
   [dir=ltr] .animationPaused::after {
     animation-play-state: paused;
@@ -64,20 +64,11 @@
   [dir=rtl] .animationPaused::after {
     animation-play-state: paused;
   }
-  @keyframes progressLoading-ltr {
+  @keyframes progressLoading {
     0% {
-      left: -100% ;
+      inset-inline-start: -100%;
     }
     100% {
-      left: 0% ;
+      inset-inline-start: 0%;
     }
   }
-  @keyframes progressLoading-rtl {
-    0% {
-      left: -100% ;
-    }
-    100% {
-      left: 0% ;
-    }
-  }
-  

package/es/Onboarding/CarouselDots/CarouselDots.js

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import { Flex } from '@zohodesk/layout';
-import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps';
-import CarouselDot from './CarouselDot/CarouselDot';
-import style from './css/CarouselDots.module.css';
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+import CarouselDot from "./CarouselDot/CarouselDot";
+import style from "./css/CarouselDots.module.css";
 
 const CarouselDots = _ref => {
   let {

package/es/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import CarouselDots from '../CarouselDots';
+import CarouselDots from "../CarouselDots";
 describe('CarouselDots', () => {
   const sliderData = [{
     imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",

package/es/Onboarding/Onboarding.js

@@ -1,8 +1,8 @@
 import React from 'react';
 /**propTypes**/
 
-import { propTypes } from './props/propTypes';
-import { defaultProps } from './props/defaultProps';
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
 /**components**/
 
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -12,23 +12,24 @@ import Modal from '@zohodesk/components/lib/Modal/Modal';
 import Ribbon from '@zohodesk/components/es/Ribbon/Ribbon';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 /** local **/
 
-import VideoLookup from '../VideoLookup/VideoLookup';
-import Link from '../Link/Link';
-import CarouselDots from './CarouselDots/CarouselDots';
-import Image from '../Image/Image';
+import VideoLookup from "../VideoLookup/VideoLookup";
+import Link from "../Link/Link";
+import CarouselDots from "./CarouselDots/CarouselDots";
+import Image from "../Image/Image";
 /** hooks **/
 
-import useOnboardingSlider from './hooks/useOnboardingSlider';
+import useOnboardingSlider from "./hooks/useOnboardingSlider";
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-import useOnboarding from './hooks/useOnboarding';
+import useOnboarding from "./hooks/useOnboarding";
 /** Constant **/
 
-import { DUMMY_OBJECT } from '../utils/General';
+import { DUMMY_OBJECT } from "../utils/General";
 /** style **/
 
-import defaultStyle from './css/Onboarding.module.css';
+import defaultStyle from "./css/Onboarding.module.css";
 
 const Onboarding = _ref => {
   let {
@@ -46,14 +47,25 @@ const Onboarding = _ref => {
     hasExpandedButton,
     onPrimaryButtonClick,
     onSecondaryButtonClick,
-    customProps
+    customProps,
+    tagAttributes,
+    a11yAttributes,
+    closeIconTooltip,
+    dragBoundaryLimit,
+    isDraggable,
+    position
   } = _ref;
+  const getNextIndex = useZIndex();
   const style = useMergeStyle(defaultStyle, customStyle);
   const {
     state,
+    dragRef,
     openVideoLookup,
     closeVideoLookup
-  } = useOnboarding();
+  } = useOnboarding({
+    dragBoundaryLimit,
+    isDraggable: isDraggable && sliderData.length > 0
+  });
   const {
     videoLookupLink,
     isVideoLookupOpen,
@@ -72,15 +84,18 @@ const Onboarding = _ref => {
   } = customProps;
   const {
     sliderIndex,
+    mainContainerEleRef,
     isAnimationPaused,
     translateMovementVal,
     handleMouseEnter,
     handleMouseLeave,
     handleSliderIndexChange,
-    handleSliderNext
+    handleSliderNext,
+    handleAnimationEnd
   } = useOnboardingSlider({
     isAutoPlayAnimation: isAutoPlayAnimation,
-    sliderData: sliderData
+    sliderData: sliderData,
+    animationClass: style.mainContainerAnimation
   });
 
   const renderMediaElement = (imageSource, videoSourceLink, videoSourceFormat) => imageSource ? /*#__PURE__*/React.createElement(Image, {
@@ -178,9 +193,17 @@ const Onboarding = _ref => {
   };
 
   return /*#__PURE__*/React.createElement("div", {
+    "data-drag-container": isDraggable ? 'true' : 'false',
+    style: position !== 'static' || isDraggable ? {
+      zIndex: getNextIndex()
+    } : null,
+    ref: mainContainerEleRef,
     "data-id": `${customId}_container`,
     "data-test-id": `${testId}_container`,
-    className: `${style.mainContainer} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`
+    className: `${style.mainContainer} ${position !== 'static' ? style[`positon_${position}`] : ''} ${hasBouncAnimationOnMount ? style.mainContainerAnimation : ""}`,
+    onAnimationEnd: hasBouncAnimationOnMount ? handleAnimationEnd : null,
+    ...tagAttributes,
+    ...a11yAttributes
   }, /*#__PURE__*/React.createElement("div", {
     className: style.mainWrapper,
     onMouseEnter: handleMouseEnter,
@@ -192,7 +215,9 @@ const Onboarding = _ref => {
   }), /*#__PURE__*/React.createElement("div", {
     className: `${style.circleBlur} ${style.circleBlurTwo}`
   })), Array.isArray(sliderData) && sliderData.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: style.carousel
+    className: style.carousel,
+    ref: isDraggable ? dragRef : null,
+    "data-drag-hook": isDraggable ? "true" : "false"
   }, /*#__PURE__*/React.createElement(Flex, {
     $ui_displayMode: "flex",
     $tagAttributes_container: {
@@ -217,6 +242,9 @@ const Onboarding = _ref => {
     const isEmbeddedvideoLookupSource = videoLookupSource && videoLookupSource.isEmbeddedLink ? videoLookupSource.isEmbeddedLink : null;
     const videoSourceLink = videoSource && videoSource.link ? videoSource.link : null;
     const videoSourceFormat = videoSource && videoSource.format ? videoSource.format : null;
+
+    const handleOpenVideoLookup = () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat);
+
     return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_direction: "column",
@@ -224,7 +252,7 @@ const Onboarding = _ref => {
       $ui_className: style.carouselItem,
       key: tabName
     }, /*#__PURE__*/React.createElement(Flex, {
-      $ui_className: style.header,
+      $ui_className: `${style.header}`,
       $ui_displayMode: "flex",
       $ui_justifyContent: "center",
       $ui_alignItems: "center",
@@ -244,7 +272,7 @@ const Onboarding = _ref => {
       customId: `${customId}_play_icon`,
       testId: `${testId}_play_icon`,
       $ui_className: `${style.playIcon} ${style.animate} ${btnStyle.buttonReset}`,
-      $event_onClick: () => openVideoLookup(videoLookupSourceLink, isEmbeddedvideoLookupSource, videoLookupSourceFormat)
+      $event_onClick: videoLookupSourceLink ? handleOpenVideoLookup : null
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-arrowFill",
       iconClass: style.playIconInner
@@ -268,8 +296,10 @@ const Onboarding = _ref => {
       ...descriptionProps
     }, description)));
   }))) : null, renderFooter(sliderData, sliderIndex), hasCloseIcon ? /*#__PURE__*/React.createElement(Flex, {
-    $flag_fullsize: true,
     $ui_tagName: "button",
+    $tagAttributes_container: {
+      'data-title': closeIconTooltip
+    },
     $ui_displayMode: "flex",
     customId: `${customId}_close_icon`,
     testId: `${testId}_close_icon`,