@zohodesk/dot 1.7.12 → 1.7.14

package/lib/Onboarding/css/Onboarding.module.css

@@ -2,6 +2,15 @@
   width: var(--zd_size360) ;
 }
 
+
+.positon_absolute{
+  position: absolute;
+}
+
+.positon_fixed{
+  position: fixed;
+}
+
 [dir=ltr] .mainContainerAnimation{
   transform-origin: 100% 100%;
   animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
@@ -41,6 +50,7 @@
   border-top-right-radius: inherit;
 }
 
+
 .mediaElement {
   width: 100% ;
   height: 100% ;
@@ -51,8 +61,10 @@
 }
 
 .image {
+  user-drag: none;
+  -webkit-user-drag: none;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; 
 }
 
 /* image filter layer */
@@ -450,7 +462,13 @@
 .carouselInner {
   transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
   width: 100% ;
-  transform: translate3d(var(--local_translate_movement), 0, 0)
+}
+[dir=ltr] .carouselInner {
+  transform: translateX(var(--local_translate_movement))
+  /*rtl:translateX(calc(var(--local_translate_movement) * -1))*/;
+}
+[dir=rtl] .carouselInner {
+  transform: translateX(calc(var(--local_translate_movement) * -1));
 }
 .carouselItem {
   width: 100% 

package/lib/Onboarding/hooks/useOnboarding.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _react = require("react");
+
 var _useMergeState3 = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeState"));
 
+var _useDragger = _interopRequireDefault(require("../../Hooks/Dragger/useDragger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -21,7 +25,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var useOnboarding = function useOnboarding(props) {
+var useOnboarding = function useOnboarding(_ref) {
+  var dragBoundaryLimit = _ref.dragBoundaryLimit,
+      isDraggable = _ref.isDraggable;
+  var dragRef = (0, _react.useRef)(null);
+  (0, _useDragger["default"])({
+    isActive: isDraggable,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  });
+
   var _useMergeState = (0, _useMergeState3["default"])({
     videoLookupLink: '',
     isVideoLookupOpen: false,
@@ -50,6 +63,7 @@ var useOnboarding = function useOnboarding(props) {
 
   return {
     state: state,
+    dragRef: dragRef,
     openVideoLookup: openVideoLookup,
     closeVideoLookup: closeVideoLookup
   };

package/lib/Onboarding/hooks/useOnboardingSlider.js

@@ -23,7 +23,8 @@ var autoplayDelay = 50; // 5000ms divided by 100 for smoother animation
 
 var useOnboardingSlider = function useOnboardingSlider(_ref) {
   var isAutoPlayAnimation = _ref.isAutoPlayAnimation,
-      sliderData = _ref.sliderData;
+      sliderData = _ref.sliderData,
+      animationClass = _ref.animationClass;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36,6 +37,7 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
       setAutoplay = _useState4[1];
 
   var progressRef = (0, _react.useRef)(0);
+  var mainContainerEleRef = (0, _react.useRef)(null);
   var totalSlidesArrayLen = sliderData.length;
   var handleSliderIndexChange = (0, _react.useCallback)(function (index) {
     progressRef.current = 0;
@@ -45,13 +47,16 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
     progressRef.current = 0;
     setCurrentSlide(currentSlide + 1);
     setAutoplay(false);
-  }, [currentSlide]);
+  }, []);
   var handleMouseEnter = (0, _react.useCallback)(function () {
     setAutoplay(false);
   }, []);
   var handleMouseLeave = (0, _react.useCallback)(function () {
     setAutoplay(true);
   }, []);
+  var handleAnimationEnd = (0, _react.useCallback)(function () {
+    mainContainerEleRef.current && mainContainerEleRef.current.classList.remove(animationClass);
+  }, [animationClass]);
   (0, _react.useEffect)(function () {
     var progressInterval;
 
@@ -74,10 +79,12 @@ var useOnboardingSlider = function useOnboardingSlider(_ref) {
     sliderIndex: currentSlide,
     isAnimationPaused: !autoplay,
     translateMovementVal: translateMovementVal,
+    mainContainerEleRef: mainContainerEleRef,
     handleMouseEnter: handleMouseEnter,
     handleMouseLeave: handleMouseLeave,
     handleSliderIndexChange: handleSliderIndexChange,
-    handleSliderNext: handleSliderNext
+    handleSliderNext: handleSliderNext,
+    handleAnimationEnd: handleAnimationEnd
   };
 };
 

package/lib/Onboarding/props/defaultProps.js

@@ -7,6 +7,7 @@ exports.defaultProps = void 0;
 var defaultProps = {
   ribbonText: "New",
   videoLookupCloseText: "Esc",
+  closeIconTooltip: "Close",
   isAutoPlayAnimation: true,
   customId: "onboarding",
   testId: 'onboarding',
@@ -15,6 +16,16 @@ var defaultProps = {
   customProps: {},
   hasBouncAnimationOnMount: true,
   hasCloseIcon: true,
-  hasRibbon: true
+  hasRibbon: true,
+  tagAttributes: {},
+  a11yAttributes: {},
+  isDraggable: true,
+  position: "static",
+  dragBoundaryLimit: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
 };
 exports.defaultProps = defaultProps;

package/lib/Onboarding/props/propTypes.js

@@ -26,15 +26,26 @@ var propTypes = {
   testId: _propTypes["default"].string,
   hasRibbon: _propTypes["default"].bool,
   customId: _propTypes["default"].string,
+  position: _propTypes["default"].string,
+  isDraggable: _propTypes["default"].bool,
   ribbonText: _propTypes["default"].string,
   hasCloseIcon: _propTypes["default"].bool,
   customStyle: _propTypes["default"].object,
+  tagAttributes: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object,
   hasExpandedButton: _propTypes["default"].bool,
+  closeIconTooltip: _propTypes["default"].string,
   isAutoPlayAnimation: _propTypes["default"].bool,
   onPrimaryButtonClick: _propTypes["default"].func,
   videoLookupCloseText: _propTypes["default"].string,
   onSecondaryButtonClick: _propTypes["default"].func,
   hasBouncAnimationOnMount: _propTypes["default"].bool,
+  dragBoundaryLimit: _propTypes["default"].shape({
+    top: _propTypes["default"].number,
+    left: _propTypes["default"].number,
+    right: _propTypes["default"].number,
+    bottom: _propTypes["default"].number
+  }),
   sliderData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     heading: _propTypes["default"].string,
     imageSource: _propTypes["default"].string,

package/lib/PlusIcon/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -15,7 +15,7 @@ exports[`PlusIcon renders with  size is  - medium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -41,7 +41,7 @@ exports[`PlusIcon renders with  size is  - small 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -67,7 +67,7 @@ exports[`PlusIcon renders with  size is  - xlarge 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`PlusIcon renders with  size is  - xmedium 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -119,7 +119,7 @@ exports[`PlusIcon renders with  size is  - xsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -145,7 +145,7 @@ exports[`PlusIcon renders with  size is  - xxsmall 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -171,7 +171,7 @@ exports[`PlusIcon renders with customClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -197,7 +197,7 @@ exports[`PlusIcon renders with dataId prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -223,7 +223,7 @@ exports[`PlusIcon renders with default props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -249,7 +249,7 @@ exports[`PlusIcon renders with iconClass prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus   custom-icon-class icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus   custom-icon-class icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -275,7 +275,7 @@ exports[`PlusIcon renders with iconName prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -301,7 +301,7 @@ exports[`PlusIcon renders with iconSize prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -328,7 +328,7 @@ exports[`PlusIcon renders with title prop 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus    icon iconColor  undefined   "
+        class="zd_font_icons basic icon-plus    icon avatar_align_center  iconColor     "
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/VideoLookup/__tests__/VideoLookup.spec.js

@@ -4,10 +4,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _VideoLookup = _interopRequireDefault(require("../VideoLookup"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+beforeEach(function () {
+  (0, _IdProvider.setGlobalId)(0);
+});
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
 describe('VideoLookup', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VideoLookup["default"], null)),

package/lib/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -770,7 +770,7 @@ exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/lib/avatar/AvatarIcon/AvatarIcon.js

@@ -79,7 +79,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
           AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc;
       var border = borderOnHover || onClick;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AvatarIconModule["default"].container, " ").concat(borderOnActive ? _AvatarIconModule["default"].borderOnActive : border ? _AvatarIconModule["default"].borderOnHover : '', " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarIconModule["default"][palette], " ").concat(className),
+        className: "".concat(_AvatarIconModule["default"].container, " ").concat(borderOnActive ? _AvatarIconModule["default"].borderOnActive : border ? _AvatarIconModule["default"].borderOnHover : '', " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarIconModule["default"][palette] ? _AvatarIconModule["default"][palette] : '', " ").concat(className),
         onClick: onClick,
         dataId: dataId,
         "data-title": title,
@@ -90,7 +90,7 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
       }, AvatarIconProps), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: name,
         size: iconSize,
-        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)]) : '', " "),
+        iconClass: " ".concat(iconClass, " ").concat(_AvatarIconModule["default"].avatar_align_center, "  ").concat(_AvatarIconModule["default"].iconColor, " ").concat(iconColor ? " ".concat(_AvatarIconModule["default"]["icon_".concat(iconColor)] ? _AvatarIconModule["default"]["icon_".concat(iconColor)] : '') : '', " "),
         isBold: isIconBold
       }));
     }

package/lib/avatar/AvatarIcon/AvatarIcon.module.css

@@ -56,3 +56,6 @@
   --icon_color: var(--zdt_avatarIcon_dark_icon);
 }
 
+.avatar_align_center {
+  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+}

package/lib/avatar/AvatarIcon/__tests__/__snapshots__/AvatarIcon.spec.js.snap

@@ -10,7 +10,7 @@ exports[`AvatarIcon rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-add-ag    iconColor  undefined   "
+      class="zd_font_icons basic icon-add-ag    avatar_align_center  iconColor     "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -54,12 +54,12 @@
 .desc{
   word-wrap: break-word;
 }
-[dir=ltr] .linkDesc, [dir=ltr] .desc {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .linkDesc, [dir=rtl] .desc {
+[dir=ltr] .linkDesc+.link, [dir=ltr] .desc+.link {
   margin-left: var(--zd_size4) ;
 }
+[dir=rtl] .linkDesc+.link, [dir=rtl] .desc+.link {
+  margin-right: var(--zd_size4) ;
+}
 .small .desc {
   line-height: 1.584;
 }
@@ -68,7 +68,6 @@
 }
 .link {
   color: var(--linkColor);
-  display: inline-block;
   cursor: pointer;
 }
 .link:hover {

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -114,3 +114,7 @@
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }
+
+.searchEmpty{
+  padding:0 var(--zd_size10) 
+}

package/lib/list/ListStencils/__tests__/__snapshots__/ListStencils.spec.js.snap

@@ -15,7 +15,7 @@ exports[`ListStencils customId and testId 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -28,14 +28,14 @@ exports[`ListStencils customId and testId 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>
@@ -58,7 +58,7 @@ exports[`ListStencils rendering the defult props 1`] = `
         class="avatar"
       >
         <div
-          class="container circle clarge primary "
+          class="container animate circle size_large primary "
         />
       </div>
       <div
@@ -71,14 +71,14 @@ exports[`ListStencils rendering the defult props 1`] = `
             class="primaryRow"
           >
             <div
-              class="container rectangular default primary "
+              class="container animate rect default primary "
             />
           </div>
           <div
             class="secondaryRow"
           >
             <div
-              class="container rectangular medium primary "
+              class="container animate rect medium primary "
             />
           </div>
         </div>

package/lib/lookup/header/Close/__tests__/__snapshots__/Close.spec.js.snap

@@ -12,7 +12,7 @@ exports[`AlphabeticList rendering the defult props 1`] = `
   >
     <i
       aria-hidden="true"
-      class="zd_font_icons basic icon-cross    "
+      class="zd_font_icons basic icon-cross   icon_button_center  "
       data-id="fontIcon"
       data-selector-id="fontIcon"
       data-test-id="fontIcon"

package/lib/lookup/header/TicketHeader/__tests__/__snapshots__/TicketHeader.spec.js.snap

@@ -46,7 +46,7 @@ exports[`TicketHeader rendering the defult props 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross    "
+          class="zd_font_icons basic icon-cross   icon_button_center  "
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.7.12",
+  "version": "1.7.14",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -63,7 +63,7 @@
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.4",
-    "@zohodesk/components": "1.3.2",
+    "@zohodesk/components": "1.3.4",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/icons": "1.0.78",
     "@zohodesk/layout": "^3.1.0",
@@ -77,7 +77,7 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/components": "1.3.2",
+    "@zohodesk/components": "1.3.4",
     "@zohodesk/icons": "1.0.78",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",
@@ -87,4 +87,4 @@
     "@zohodesk/a11y": "2.3.4",
     "@zohodesk/layout": "3.1.0"
   }
-}
+}