@zohodesk/dot 1.0.0-temp-181.7 → 1.0.0-temp-183

package/es/v1/form/fields/SelectField/SelectField.js

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /** CSS */
 

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

@@ -12,7 +12,7 @@ import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSeparator';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import MultiSelectHeader from '@zohodesk/components/es/v1/MultiSelect/MultiSelectHeader';
 import { stopBubbling } from '../../../../utils/General';
 import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';

package/es/v1/form/fields/TextBoxField/TextBoxField.js

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

package/es/v1/form/fields/TextareaField/TextareaField.js

@@ -9,7 +9,7 @@ import { propTypes } from './props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
@@ -37,6 +37,7 @@ const TextareaField = props => {
     validationRuleMessage,
     validationRulePalette,
     // onKeyDown,
+    onFocus,
     infoText,
     borderColor,
     fieldSize,
@@ -103,6 +104,7 @@ const TextareaField = props => {
     text: value,
     placeHolder: placeHolder,
     dataId: `property(${dataId})`,
+    onFocus: onFocus,
     onBlur: handleBlur,
     borderColor: borderColor,
     needEffect: isReadOnly || isDisabled ? false : true,

package/es/v1/form/fields/TextareaField/props/propTypes.js

@@ -12,6 +12,7 @@ export const propTypes = {
   labelName: PropTypes.string,
   labelPalette: PropTypes.string,
   maxLength: PropTypes.number,
+  onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   placeHolder: PropTypes.string,

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

@@ -15,8 +15,8 @@ import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptySt
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
-import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import style from '../../../../list/status/StatusDropdown/StatusDropdown.module.css';
 

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -8,7 +8,7 @@ import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
-import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 /**** CSS ****/
 
 import style from '../../../../list/status/StatusListItem/StatusListItem.module.css';

package/es/v1/lookup/Lookup/Lookup.js

@@ -31,7 +31,8 @@ export default function Lookup(props) {
     needFocusScope,
     customProps,
     onKeyDown,
-    isMinHeight
+    isMinHeight,
+    lookupClass
   } = props;
   const {
     role = 'dialog',
@@ -77,7 +78,7 @@ export default function Lookup(props) {
     "aria-label": ariaLabel,
     "aria-modal": ariaModal,
     id: htmlId,
-    className: `${style.box} ${style[`${size}Size`]}`,
+    className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
     "data-id": dataId,
     "data-test-id": dataId
   }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {

package/es/v1/lookup/Lookup/props/propTypes.js

@@ -4,7 +4,7 @@ export const propTypes = {
   customClass: PropTypes.string,
   dataId: PropTypes.string,
   isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'xlarge', 'full']),
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
     role: PropTypes.string,
@@ -19,5 +19,6 @@ export const propTypes = {
   forwardRef: PropTypes.object,
   onClick: PropTypes.func,
   onClose: PropTypes.func,
-  isMinHeight: PropTypes.bool
+  isMinHeight: PropTypes.bool,
+  lookupClass: PropTypes.string
 };

package/es/v1/lookup/header/TicketHeader/TicketHeader.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React from 'react';
+import React, { memo, useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /*** Components ***/
@@ -9,6 +9,7 @@ import Close from '../Close/Close';
 import Search from '../Search/Search';
 import ViewDropDown from '../../../../lookup/header/ViewDropDown/ViewDropDown';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import useDragger from '../../../../Hooks/Dragger/useDragger';
 /*** CSS ***/
 
 import commonStyle from '../../../../lookup/header/lookupHeaderCommon.module.css';
@@ -16,7 +17,7 @@ import commonResponsive from '../../../../lookup/header/lookupHeaderCommonRespon
 import style from '../../../../lookup/header/TicketHeader/TicketHeader.module.css';
 /* eslint-disable react/forbid-component-props */
 
-export default function TicketHeader(props) {
+function TicketHeader(props) {
   let {
     needSearch,
     onLookupClose,
@@ -32,23 +33,29 @@ export default function TicketHeader(props) {
     getSearchBoxRef,
     needViewsList,
     i18nKeys,
-    palette
+    palette,
+    dragBoundaryLimit
   } = props;
   let {
     menuEmptyMessage = 'No matches found'
   } = i18nKeys;
+  const dragRef = useRef(null); //dragRef
+
+  useDragger({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
     className: `${commonStyle.container} ${commonStyle[`${palette}`]} ${commonResponsive.container} ${style.container}`,
     isCover: false,
-    wrap: "wrap"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: commonStyle.closeContainer
-  }, /*#__PURE__*/React.createElement(Close, {
-    onClose: onLookupClose,
-    dataId: "close"
-  })), /*#__PURE__*/React.createElement(Box, {
+    wrap: "wrap",
+    ref: dragRef,
+    "data-drag-hook": "true"
+  }, /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "column",
@@ -84,7 +91,18 @@ export default function TicketHeader(props) {
     dataId: "search",
     needOnTypeSearch: needOnTypeSearch,
     getRef: getSearchBoxRef
-  })) : null);
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    onClose: onLookupClose,
+    dataId: "close"
+  })));
 }
+
 TicketHeader.propTypes = propTypes;
-TicketHeader.defaultProps = defaultProps;
+TicketHeader.defaultProps = defaultProps;
+const MemoizedTicketHeader = /*#__PURE__*/memo(TicketHeader);
+MemoizedTicketHeader.propTypes = propTypes;
+MemoizedTicketHeader.defaultProps = defaultProps;
+MemoizedTicketHeader.displayName = 'TicketHeader';
+export default MemoizedTicketHeader;

package/es/v1/lookup/header/TicketHeader/props/defaultProps.js

@@ -1,4 +1,10 @@
 export const defaultProps = {
   i18nKeys: {},
-  palette: 'default'
+  palette: 'default',
+  dragBoundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
 };

package/es/v1/lookup/header/TicketHeader/props/propTypes.js

@@ -16,5 +16,6 @@ export const propTypes = {
   i18nKeys: PropTypes.shape({
     menuEmptyMessage: PropTypes.string
   }),
-  palette: PropTypes.oneOf(['default', 'white'])
+  palette: PropTypes.oneOf(['default', 'white']),
+  dragBoundaryLimit: PropTypes.object
 };

package/es/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -10,7 +10,7 @@ import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
 import DropDownSearch from '@zohodesk/components/es/v1/DropDown/DropDownSearch';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
 import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';

package/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -4,7 +4,7 @@ import React from 'react';
 import defaultProps from './props/defaultProps';
 import { propTypes, DesktopNotificationUI_propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
-import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import AutoClose from '../../../actions/AutoClose';
 import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from '../../../FormAction/FormAction';

package/es/v1/notification/DesktopNotification/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getDotLibraryConfig } from '../../../Provider/Config';
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   isMore: false,
   isAnimate: true,

package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getDotLibraryConfig } from '../../../Provider/Config';
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export default {
   needIcon: true,
   variant: 'primary',

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -29,7 +29,6 @@
 .stackShadowTwo::before {
   content: '';
   position: absolute;
-  /* css:theme-validation:ignore */
   height: var(--zd_size20) ;
 }
 
@@ -78,9 +77,6 @@
 .container {
   position: relative;
   pointer-events: initial;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   color: var(--globalnotification_text_color);
   z-index: 1;
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,7 +4,6 @@
 .container {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   background-color: var(--zdt_alertlookup_bg);
   border-style: solid;
   border-color: var(--commonalert_border_color);

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,8 +5,6 @@
     composes: varClass;
     min-height: var(--zd_size54) ;
     position: relative;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
     color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;

package/lib/ActionButton/ActionButton.module.css

@@ -3,121 +3,163 @@
   --buttonBorder: var(--zdt_actionButton_primary_border);
   --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
 }
+
 .container {
   composes: varClass;
 }
+
 .container:hover {
   --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
 }
+
 .primaryFilledBox {
   --buttonText: var(--zdt_actionButton_primaryFilled_text);
 }
-.primaryFilledBtn, .primaryFilledArw {
+
+.primaryFilledBtn,
+.primaryFilledArw {
   /* css:theme-validation:ignore */
+}
+
+.primaryFilledBtn, .primaryFilledArw {
   background-color: var(--buttonBg);
 }
+
 .primaryBox {
   --buttonText: var(--zdt_actionButton_primary_text);
 }
-.primaryBtn, .primaryArw {
+
+.primaryBtn,
+.primaryArw {
   /* css:theme-validation:ignore */
+}
+
+.primaryBtn, .primaryArw {
   border: 1px solid var(--buttonBorder);
 }
+
 [dir=ltr] .primaryBtn {
   border-right: none;
 }
+
 [dir=rtl] .primaryBtn {
   border-left: none;
 }
+
 .contentBox,
 .arrowWrapper {
   transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
 }
+
 .contentBox, .arrowWrapper {
   margin: 0 ;
 }
+
 .clickable {
   cursor: pointer;
 }
+
 [dir=ltr] .contentBoxBdr {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
+
 [dir=rtl] .contentBoxBdr {
   border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
 }
+
 .contentBoxBdrRds {
   border-radius: var(--zd_size4);
 }
+
 .small {
   height: var(--zd_size28) ;
 }
+
 .medium,
 .large {
   height: var(--zd_size30) ;
 }
+
 .medium {
   min-width: var(--zd_size115) ;
 }
+
 .large {
   min-width: var(--zd_size135) ;
 }
+
 .small_btnBox {
   padding: 0 var(--zd_size8) ;
 }
+
 .medium_btnBox, .large_btnBox {
   padding: 0 var(--zd_size10) ;
 }
+
 .txt {
   font-size: var(--zd_font_size13) ;
   font-family: var(--zd_semibold);
   text-transform: capitalize;
 }
+
 .subTxt {
   font-size: var(--zd_font_size10) ;
 }
+
 .contentwrapper,
 .txt,
 .subTxt {
   max-width: 100% ;
 }
+
 .txt,
 .subTxt {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
   /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
+
 .arrowWrapper {
   position: relative;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   cursor: pointer;
 }
+
 [dir=ltr] .arrowWrapper {
   border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
 }
+
 [dir=rtl] .arrowWrapper {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
+
 .primaryFilledArw {
   /* css:theme-validation:ignore */
 }
+
 [dir=ltr] .primaryFilledArw {
   border-left: 1px solid var(--buttonSeparatorBorder);
 }
+
 [dir=rtl] .primaryFilledArw {
-    border-right: 1px solid var(--buttonSeparatorBorder);
+  border-right: 1px solid var(--buttonSeparatorBorder);
 }
+
 .small_arrowBox {
   width: var(--zd_size20) ;
 }
+
 .medium_arrowBox {
   width: var(--zd_size26) ;
 }
+
 .primaryFilledArw:hover,
 .primaryFilledArw.arrowActive,
 .clickable.primaryFilledBtn:hover,
 .wholeDiv.primaryFilledBox:hover {
   --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
 }
+
 .primaryArw:hover,
 .primaryArw.arrowActive,
 .clickable.primaryBtn:hover,
@@ -125,22 +167,27 @@
   --buttonBorder: var(--zdt_actionButton_primary_hover_border);
   --buttonText: var(--zdt_actionButton_primary_hover_text);
 }
+
 .btn {
   height: 100% ;
   width: 100% ;
 }
+
 .popupWrapper {
   padding: var(--zd_size10) 0 ;
   margin: var(--zd_size5) 0 ;
 }
+
 .arrow,
 .iconClr {
   /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
+
 [dir=ltr] .iconMrgn {
   margin-right: var(--zd_size6) ;
 }
+
 [dir=rtl] .iconMrgn {
   margin-left: var(--zd_size6) ;
-}
+}

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -33,7 +33,6 @@
 .list {
   font-size: var(--zd_font_size11) ;
   flex-basis: var(--zd_size12) ;
-  /* css:theme-validation:ignore */
   color: var(--textColor);
   text-align: center;
   cursor: pointer;
@@ -50,7 +49,6 @@
 }
 .list :hover,
 .selected {
-  /* css:theme-validation:ignore */
   color: var(--textHoverColor);
 }
 .title {

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -154,7 +154,6 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
-  /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -346,7 +345,6 @@
 }
 
 .btn {
-  /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);

package/lib/ChannelIcon/ChannelIcon.module.css

@@ -4,12 +4,14 @@
   --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
   --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
 }
+
 .container {
   position: relative;
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
   composes: varClass;
 }
+
 .thread {
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
@@ -19,19 +21,21 @@
   /* css:theme-validation:ignore */
   background-color: var(--topIconBg);
 }
+
 [dir=ltr] .thread {
   right: calc( var(--zd_size1) * -1 ) ;
 }
+
 [dir=rtl] .thread {
   left: calc( var(--zd_size1) * -1 ) ;
 }
+
 .threadBorder {
-  /* css:theme-validation:ignore */
   border: 1px solid var(--topIconBorderColor);
 }
+
 .iconStyle {
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--iconColor);
 }
 
@@ -212,10 +216,11 @@
 .topic_olive {
   --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
 }
+
 .topic_yellow3 {
   --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
 }
+
 .topicIcon {
-  /* css:theme-validation:ignore */
   color: var(--topIconColor);
-}
+}

package/lib/FormAction/FormAction.module.css

@@ -2,11 +2,13 @@
   --footerBg: var(--zdt_formAction_bg);
   --footerBorder: var(--zdt_formAction_border);
 }
+
 .wrapperDiv {
   position: relative;
   z-index: 1;
   composes: varClass;
 }
+
 .footerParent {
   position: relative;
   /* css:theme-validation:ignore */
@@ -14,14 +16,17 @@
   background-color: var(--footerBg);
   border-top: solid 1px var(--footerBorder);
 }
+
 .largeFooter {
   padding-top: var(--zd_size24) ;
   padding-bottom: var(--zd_size24) ;
 }
+
 .mediumFooter {
   padding-top: var(--zd_size20) ;
   padding-bottom: var(--zd_size20) ;
 }
+
 .smallFooter {
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
@@ -34,27 +39,35 @@
 [dir=rtl] .largePadding {
   padding-right: var(--zd_size60) ;
 }
+
 [dir=ltr] .mediumPadding {
   padding-left: var(--zd_size50) ;
 }
+
 [dir=rtl] .mediumPadding {
   padding-right: var(--zd_size50) ;
 }
+
 [dir=ltr] .xmediumPadding {
   padding-left: var(--zd_size30) ;
 }
+
 [dir=rtl] .xmediumPadding {
   padding-right: var(--zd_size30) ;
 }
+
 [dir=ltr] .smallPadding {
   padding-left: var(--zd_size25) ;
 }
+
 [dir=rtl] .smallPadding {
   padding-right: var(--zd_size25) ;
 }
+
 [dir=ltr] .xsmallPadding {
   padding-left: var(--zd_size20) ;
 }
+
 [dir=rtl] .xsmallPadding {
   padding-right: var(--zd_size20) ;
 }
@@ -62,15 +75,19 @@
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
   margin-right: var(--zd_size15) ;
 }
+
 [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
   margin-left: var(--zd_size15) ;
 }
+
 [dir=ltr] .smallFooter .marginRight {
   margin-right: var(--zd_size12) ;
 }
+
 [dir=rtl] .smallFooter .marginRight {
   margin-left: var(--zd_size12) ;
 }
@@ -81,4 +98,4 @@
 
 [dir=rtl] .marginRight:last-child {
   margin-left: 0 ;
-}
+}