@zohodesk/dot 1.4.12 → 1.4.14

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 ;
-}
+}

package/lib/FreezeLayer/FreezeLayer.js

@@ -21,7 +21,7 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _useFreezeLayer2 = _interopRequireDefault(require("./useFreezeLayer"));
+var _useFreezeLayer2 = _interopRequireDefault(require("../Hooks/useFreezeLayer"));
 
 var _FreezeLayerModule = _interopRequireDefault(require("./css/FreezeLayer.module.css"));
 

package/lib/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/lib/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/lib/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/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -590,6 +590,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           getFooter = _this$props9.getFooter,
           customProps = _this$props9.customProps,
           needMultiLineText = _this$props9.needMultiLineText,
+          isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props9.positionsOffset,
+          targetOffset = _this$props9.targetOffset,
+          isRestrictScroll = _this$props9.isRestrictScroll,
           customClass = _this$props9.customClass;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
           ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
@@ -691,6 +695,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           palette: palette,
           isResponsivePadding: true,
           needFocusScope: true,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           customProps: {
             focusScopeProps: {
               loadNextOptions: _this5.handleGetNextOptions,

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

@@ -29,6 +29,8 @@ var defaultProps = {
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
   needMultiLineText: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -84,6 +84,10 @@ var propTypes = {
     customListBox: _propTypes["default"].string
   }),
   onSelectLabel: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   from: _propTypes["default"].string,
   top: _propTypes["default"].number
 };

package/lib/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/lib/form/fields/RadioField/RadioField.js

@@ -129,6 +129,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
             value = option.value,
             _option$disabled = option.disabled,
             disabled = _option$disabled === void 0 ? false : _option$disabled,
+            tooltip = option.tooltip,
             infoTooltip = option.infoTooltip;
         return /*#__PURE__*/_react["default"].createElement("span", {
           key: index,
@@ -142,6 +143,8 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           labelSize: labelSize,
           active: isActive,
           disabled: disabled || isDisabled,
+          disabledTitle: tooltip,
+          title: tooltip,
           onChange: _this2.handleChange,
           size: size,
           checked: selectedValue == value,

package/lib/form/fields/TextareaField/TextareaField.js

@@ -126,6 +126,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           dataSelectorId = _this$props4.dataSelectorId,
           validationRuleMessage = _this$props4.validationRuleMessage,
           validationRulePalette = _this$props4.validationRulePalette,
+          onFocus = _this$props4.onFocus,
           infoText = _this$props4.infoText,
           borderColor = _this$props4.borderColor,
           fieldSize = _this$props4.fieldSize,
@@ -176,6 +177,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         text: value,
         placeHolder: placeHolder,
         dataId: "property(".concat(dataId, ")"),
+        onFocus: onFocus,
         onBlur: this.handleBlur,
         borderColor: borderColor,
         needEffect: isReadOnly || isDisabled ? false : true,

package/lib/form/fields/TextareaField/props/propTypes.js

@@ -29,6 +29,7 @@ var propTypes = _objectSpread({
   labelName: _propTypes["default"].string,
   labelPalette: _propTypes["default"].string,
   maxLength: _propTypes["default"].number,
+  onFocus: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
   placeHolder: _propTypes["default"].string,

package/lib/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/lib/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/lib/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/lib/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);
 }

package/lib/list/ListLayout/ListLayout.module.css

@@ -45,12 +45,6 @@
   border-bottom: 1px dotted var(--listBorder);
 }
 
-.compact,
-.classic,
-.superCompact {
-  /* css:theme-validation:ignore */
-}
-
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/lib/list/Subject/Subject.module.css

@@ -1,28 +1,35 @@
 .varClass {
   --subject_text: var(--zdt_subject_text);
 }
+
 .subject {
   composes: varClass;
   /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }
+
 .dotted {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .font_regular {
   font-family: var(--zd_regular);
 }
+
 .font_semibold {
   font-family: var(--zd_semibold);
 }
+
 .font_bold {
   font-family: var(--zd_bold);
 }
+
 .font_semibold,
 .font_bold {
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .cursorPointer {
   cursor: pointer;
-}
+}

package/lib/list/Thread/Thread.module.css

@@ -4,7 +4,6 @@
 .container {
   composes: varClass;
   position: relative;
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
   cursor: pointer;
 }

package/lib/lookup/Lookup/Lookup.js

@@ -109,7 +109,8 @@ var Lookup = /*#__PURE__*/function (_Component) {
           onClose = _this$props.onClose,
           needFocusScope = _this$props.needFocusScope,
           customProps = _this$props.customProps,
-          isMinHeight = _this$props.isMinHeight;
+          isMinHeight = _this$props.isMinHeight,
+          lookupClass = _this$props.lookupClass;
 
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
@@ -143,7 +144,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         "aria-label": ariaLabel,
         "aria-modal": ariaModal,
         id: htmlId,
-        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
+        className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")], " ").concat(lookupClass ? lookupClass : ''),
         "data-id": dataId,
         "data-test-id": dataId
       }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/lookup/Lookup/Lookup.module.css

@@ -35,7 +35,10 @@
 .largeSize {
   max-width: 70% ;
 }
+.xlargeSize {
+  max-width: 80% ;
+}
 
 .fullSize {
   max-width: 90% ;
-}
+}