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

package/es/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/es/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/es/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/es/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/es/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 ;
-}
+}

package/es/FreezeLayer/FreezeLayer.js

@@ -6,7 +6,7 @@ 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 './useFreezeLayer';
+import useFreezeLayer from '../Hooks/useFreezeLayer';
 import style from './css/FreezeLayer.module.css';
 export default function FreezeLayer(props) {
   let {

package/es/IconButton/IconButton.module.css

@@ -6,7 +6,6 @@
   width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
-  /* css:theme-validation:ignore */
   color: var(--iconColor);
   cursor: pointer;
 }

package/es/TagWithIcon/TagWithIcon.module.css

@@ -8,15 +8,12 @@
 
 .wrapper {
   composes: varClass;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
   background-color: var(--tag_bg_color);
 }
 
 .small,
 .large {
-  /* css:theme-validation:ignore */
   max-width: 100% ;
   height: var(--zd_size18) ;
 }

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -6,16 +6,11 @@
 .container {
   vertical-align: middle;
   composes: varClass;
-  /* css:theme-validation:ignore */
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
   border-color: var(--border_color)
 }
-.borderOnHover:hover,
-.borderOnActive {
-  /* css:theme-validation:ignore */
-}
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--border_hoverColor)
 }
@@ -40,7 +35,6 @@
   --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
 }
 .iconColor {
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
 }
 .icon_danger {

package/es/common/dot_boxShadow.module.css

@@ -35,4 +35,6 @@
 
     /* desktop notification */
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
+
+
 }

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -522,6 +522,10 @@ export class ToggleDropDown extends Component {
       getFooter,
       customProps,
       needMultiLineText,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       customClass
     } = this.props;
     let {
@@ -624,6 +628,10 @@ export class ToggleDropDown extends Component {
         palette: palette,
         isResponsivePadding: true,
         needFocusScope: true,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         customProps: {
           focusScopeProps: {
             loadNextOptions: this.handleGetNextOptions,

package/es/dropdown/ToggleDropDown/props/defaultProps.js

@@ -23,5 +23,7 @@ export const defaultProps = {
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
   needMultiLineText: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {}
 };

package/es/dropdown/ToggleDropDown/props/propTypes.js

@@ -74,6 +74,10 @@ export const propTypes = {
     customListBox: PropTypes.string
   }),
   onSelectLabel: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   from: PropTypes.string,
   top: PropTypes.number
 };

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -21,7 +21,6 @@
 }
 .title {
   font-family: var(--zd_semibold);
-  /* css:theme-validation:ignore */
   color: var(--titleColor);
   word-wrap: break-word;
 }
@@ -33,7 +32,6 @@
 }
 .linkWrapper,
 .linkDescWrapper {
-  /* css:theme-validation:ignore */
   color: var(--descriptionColor);
 }
 .small .linkWrapper,
@@ -69,13 +67,11 @@
   line-height: 1.358;
 }
 .link {
-  /* css:theme-validation:ignore */
   color: var(--linkColor);
   display: inline-block;
   cursor: pointer;
 }
 .link:hover {
-  /* css:theme-validation:ignore */
   color: var(--linkHoverColor);
 }
 .children {

package/es/form/fields/RadioField/RadioField.js

@@ -76,6 +76,7 @@ export default class RadioField extends PureComponent {
         text,
         value,
         disabled = false,
+        tooltip,
         infoTooltip
       } = option;
       return /*#__PURE__*/React.createElement("span", {
@@ -90,6 +91,8 @@ export default class RadioField extends PureComponent {
         labelSize: labelSize,
         active: isActive,
         disabled: disabled || isDisabled,
+        disabledTitle: tooltip,
+        title: tooltip,
         onChange: this.handleChange,
         size: size,
         checked: selectedValue == value,

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

@@ -162,7 +162,8 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {}
+      TagProps = {},
+      listProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
@@ -274,7 +275,7 @@ export default class TagsMultiSelect extends React.Component {
           isNew,
           listItemProps
         } = item;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, _extends({
           key: index,
           index: index,
           autoHover: true,
@@ -287,7 +288,7 @@ export default class TagsMultiSelect extends React.Component {
           isDisabled: listDisabled,
           customProps: listItemProps,
           customClass: listItemClass
-        }, isNew ? /*#__PURE__*/React.createElement(Container, {
+        }, listProps), isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"
         }, /*#__PURE__*/React.createElement(Box, {

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

@@ -77,6 +77,7 @@ export default class TextareaField extends PureComponent {
       validationRuleMessage,
       validationRulePalette,
       // onKeyDown,
+      onFocus,
       infoText,
       borderColor,
       fieldSize,
@@ -126,6 +127,7 @@ export default class TextareaField extends PureComponent {
       text: value,
       placeHolder: placeHolder,
       dataId: `property(${dataId})`,
+      onFocus: onFocus,
       onBlur: this.handleBlur,
       borderColor: borderColor,
       needEffect: isReadOnly || isDisabled ? false : true,

package/es/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/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,7 +5,6 @@
   display: inline;
 }
 .icon{
-  /* css:theme-validation:ignore */
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -48,7 +48,6 @@
 }
 
 .tertiary_borderStyle {
-  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -150,7 +149,6 @@
 
 .footer {
   composes: varClass;
-  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/es/list/Comment/Comment.module.css

@@ -5,7 +5,6 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -48,15 +50,19 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
+    const {
+      toggleDropDownProps = {}
+    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, {
+    return /*#__PURE__*/React.createElement(ToggleDropDown, _extends({
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {
@@ -85,7 +91,7 @@ class DepartmentDropDown extends Component {
       isNextOptions: isNextOptions,
       onSearch: onSearch,
       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,6 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  })
+  }),
+  customProps: PropTypes.string
 };

package/es/list/Dot/Dot.module.css

@@ -4,7 +4,6 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
-  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }