@zohodesk/dot 1.0.0-beta.234 → 1.0.0-beta.235

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.235
+
+ - Action Button => innerClassName and popupGroup prop added.
+
 # 1.0.0-beta.234
 
 - AlertLookup V1 => isHtmlContent prop added

package/es/ActionButton/ActionButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import Icon from '@zohodesk/icons/lib/Icon';
 import Button from '@zohodesk/components/lib/Button/Button';
@@ -47,7 +48,9 @@ export class ActionButton extends React.Component {
       isBoxPaddingNeed,
       getContainerRef,
       getTargetRef,
-      removeChildrenTooltip
+      removeChildrenTooltip,
+      innerClassName,
+      popupGroup
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -71,7 +74,7 @@ export class ActionButton extends React.Component {
       flexible: true,
       onClick: onClick,
       dataId: dataId,
-      className: `${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} `,
+      className: `${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
@@ -114,7 +117,8 @@ export class ActionButton extends React.Component {
         customDropBoxWrap: dropBoxClass
       },
       isBoxPaddingNeed: isBoxPaddingNeed,
-      getRef: getContainerRef
+      getRef: getContainerRef,
+      popupGroup: popupGroup
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
@@ -123,50 +127,8 @@ export class ActionButton extends React.Component {
   }
 
 }
-ActionButton.defaultProps = {
-  size: 'medium',
-  isArrow: false,
-  arrowBoxDataId: 'arrowBox',
-  dataId: 'actionButton',
-  onHover: false,
-  className: '',
-  iconName: '',
-  iconSize: '9',
-  isDisabled: false,
-  dropBoxClass: '',
-  arrowBoxSize: 'medium',
-  isBoxPaddingNeed: true,
-  palette: 'primaryFilled',
-  removeChildrenTooltip: false
-};
-ActionButton.propTypes = {
-  arrowBoxDataId: PropTypes.string,
-  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  dropBoxClass: PropTypes.string,
-  defaultPosition: PropTypes.string,
-  position: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isBoxPaddingNeed: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  onClick: PropTypes.func,
-  onHover: PropTypes.bool,
-  palette: PropTypes.oneOf('primaryFilled', 'primary'),
-  removeClose: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  subText: PropTypes.string,
-  text: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  removeChildrenTooltip: PropTypes.bool
-};
+ActionButton.defaultProps = defaultProps;
+ActionButton.propTypes = propTypes;
 ActionButton.docs = {
   componentGroup: 'Atom'
 };

package/es/ActionButton/ActionButton.module.css

@@ -21,12 +21,9 @@
 .primaryBtn, .primaryArw {
   border: 1px solid var(--buttonBorder);
 }
-[dir=ltr] .primaryBtn {
+.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);
@@ -34,12 +31,9 @@
 .clickable {
   cursor: pointer;
 }
-[dir=ltr] .contentBoxBdr {
+.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);
 }
@@ -59,7 +53,8 @@
 .small_btnBox {
   padding: 0 var(--zd_size8);
 }
-.medium_btnBox, .large_btnBox {
+.medium_btnBox,
+.large_btnBox {
   padding: 0 var(--zd_size10);
 }
 .txt {
@@ -82,20 +77,12 @@
 }
 .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;
+  cursor: pointer;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=rtl] .arrowWrapper {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-[dir=ltr] .primaryFilledArw {
-  border-left: 1px solid var(--buttonSeparatorBorder);
-}
-[dir=rtl] .primaryFilledArw {
-    border-right: 1px solid var(--buttonSeparatorBorder);
+.primaryFilledArw {
+    border-left: 1px solid var(--buttonSeparatorBorder);
 }
 .small_arrowBox {
   width: var(--zd_size20);
@@ -128,9 +115,6 @@
 .iconClr {
   color: var(--buttonText);
 }
-[dir=ltr] .iconMrgn {
+.iconMrgn {
   margin-right: var(--zd_size6);
 }
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6);
-}

package/es/ActionButton/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  size: 'medium',
+  isArrow: false,
+  arrowBoxDataId: 'arrowBox',
+  dataId: 'actionButton',
+  onHover: false,
+  className: '',
+  iconName: '',
+  iconSize: '9',
+  isDisabled: false,
+  dropBoxClass: '',
+  arrowBoxSize: 'medium',
+  isBoxPaddingNeed: true,
+  palette: 'primaryFilled',
+  removeChildrenTooltip: false,
+  innerClassName: ''
+};

package/es/ActionButton/props/propTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  arrowBoxDataId: PropTypes.string,
+  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  dropBoxClass: PropTypes.string,
+  defaultPosition: PropTypes.string,
+  position: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+  onHover: PropTypes.bool,
+  palette: PropTypes.oneOf('primaryFilled', 'primary'),
+  removeClose: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  subText: PropTypes.string,
+  text: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  removeChildrenTooltip: PropTypes.bool,
+  innerClassName: PropTypes.string,
+  popupGroup: PropTypes.string
+};

package/es/AlphabeticList/AlphabeticList.js

@@ -1,13 +1,11 @@
 /*** Libraries ***/
 import React from 'react';
-import PropTypes from 'prop-types';
+import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from './props/defaultProps';
+import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /*** CSS ***/
 
 import style from './AlphabeticList.module.css';
-let AlphabeticCharacters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
-let AlphabeticCharactersWithHash = [...AlphabeticCharacters, '#'];
-let NumberList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '#'];
 export default class AlphabeticList extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -70,23 +68,8 @@ export default class AlphabeticList extends React.PureComponent {
   }
 
 }
-AlphabeticList.propTypes = {
-  align: PropTypes.string,
-  onSelect: PropTypes.func.isRequired,
-  selectedCharacter: PropTypes.oneOf(['ALL', ...AlphabeticCharacters, ...NumberList, ...AlphabeticCharactersWithHash]),
-  type: PropTypes.oneOf(['alphabetical', 'numeral', 'alphabeticalwithhash']),
-  i18nKeys: PropTypes.shape({
-    allTitle: PropTypes.string,
-    allText: PropTypes.string
-  }),
-  dataId: PropTypes.string
-};
-AlphabeticList.defaultProps = {
-  align: 'vertical',
-  type: 'alphabetical',
-  i18nKeys: {},
-  dataId: 'Navi'
-};
+AlphabeticList.propTypes = AlphabeticList_propTypes;
+AlphabeticList.defaultProps = AlphabeticList_defaultProps;
 AlphabeticList.docs = {
   componentGroup: 'Atom'
 };
@@ -124,15 +107,5 @@ class AlphabeticListItem extends React.PureComponent {
 
 }
 
-AlphabeticListItem.propTypes = {
-  id: PropTypes.string,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  dataId: PropTypes.string
-};
-AlphabeticListItem.defaultProps = {
-  isActive: false,
-  text: '',
-  dataId: 'Navi'
-};
+AlphabeticListItem.propTypes = AlphabeticListItem_propTypes;
+AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;

package/es/AlphabeticList/AlphabeticList.module.css

@@ -7,19 +7,16 @@
   composes: varClass;
   composes: h100 from '~@zohodesk/components/lib/common/common.module.css';
   list-style: none;
-  pointer-events: initial;
   margin: 0;
   padding: 0;
+  pointer-events: initial;
 }
 .column .title {
   margin-bottom: var(--zd_size3);
 }
-[dir=ltr] .row .title {
+.row .title {
   margin-right: var(--zd_size3);
 }
-[dir=rtl] .row .title {
-  margin-left: var(--zd_size3);
-}
 .row  .letter {
   padding: 0 var(--zd_size3);
 }
@@ -32,10 +29,10 @@
 }
 .list {
   font-size: var(--zd_font_size11);
-  flex-basis: var(--zd_size12);
-  color: var(--textColor);
   text-align: center;
+  flex-basis: var(--zd_size12);
   cursor: pointer;
+  color: var(--textColor);
 }
 .title {
   flex-basis: var(--zd_size15);

package/es/AlphabeticList/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const AlphabeticList_defaultProps = {
+  align: 'vertical',
+  type: 'alphabetical',
+  i18nKeys: {},
+  dataId: 'Navi'
+};
+export const AlphabeticListItem_defaultProps = {
+  isActive: false,
+  text: '',
+  dataId: 'Navi'
+};

package/es/AlphabeticList/props/propTypes.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+export const AlphabeticCharacters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+export const NumberList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '#'];
+export const AlphabeticCharactersWithHash = [...AlphabeticCharacters, '#'];
+export const AlphabeticList_propTypes = {
+  align: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  selectedCharacter: PropTypes.oneOf(['ALL', ...AlphabeticCharacters, ...NumberList, ...AlphabeticCharactersWithHash]),
+  type: PropTypes.oneOf(['alphabetical', 'numeral', 'alphabeticalwithhash']),
+  i18nKeys: PropTypes.shape({
+    allTitle: PropTypes.string,
+    allText: PropTypes.string
+  }),
+  dataId: PropTypes.string
+};
+export const AlphabeticListItem_propTypes = {
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  text: PropTypes.string,
+  dataId: PropTypes.string
+};

package/es/Attachment/Attachment.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Link from '../Link/Link';
@@ -76,26 +77,8 @@ export default class Attachment extends React.Component {
   }
 
 }
-Attachment.propTypes = {
-  dataId: PropTypes.string,
-  downloadLink: PropTypes.string,
-  fileInfo: PropTypes.string,
-  fileName: PropTypes.string,
-  fileSize: PropTypes.string,
-  iconName: PropTypes.string,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['transparent', 'default']),
-  size: PropTypes.oneOf(['small', 'medium']),
-  i18nKeys: PropTypes.shape({
-    downloadTitle: PropTypes.string
-  })
-};
-Attachment.defaultProps = {
-  size: 'medium',
-  palette: 'default',
-  dataId: 'attachment',
-  i18nKeys: {}
-};
+Attachment.propTypes = propTypes;
+Attachment.defaultProps = defaultProps;
 
 if (false) {
   Attachment.docs = {

package/es/Attachment/Attachment.module.css

@@ -1,8 +1,8 @@
 .attachment {
-  position: relative;
-  overflow: hidden;
   border: 1px solid var(--zdt_attachment_default_border);
   border-radius: 2px;
+  position: relative;
+  overflow: hidden;
 }
 .attachmentHover {
   cursor: pointer;
@@ -13,7 +13,8 @@
 .palette_transparent {
   background-color: var(--zdt_attachment_transparent_bg);
 }
-.attachmentHover:hover, .attachmentHover:hover .attachleft {
+.attachmentHover:hover,
+.attachmentHover:hover .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 .attachmentHover:hover .attachleft i {
@@ -34,12 +35,9 @@
   width: var(--zd_size145);
   height: var(--zd_size40);
 }
-[dir=ltr] .attachleft {
+.attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }
-[dir=rtl] .attachleft {
-  border-left: 1px solid var(--zdt_attachment_default_border);
-}
 .medium .attachleft {
   width: var(--zd_size50);
 }
@@ -47,13 +45,9 @@
   width: var(--zd_size40);
 }
 
-[dir=ltr] .medium .attachright {
+.medium .attachright {
   padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10);
 }
-
-[dir=rtl] .medium .attachright {
-  padding: var(--zd_size5) var(--zd_size10) var(--zd_size5) var(--zd_size25);
-}
 .small .attachright {
   padding: 0 var(--zd_size10) 0 var(--zd_size10);
 }
@@ -88,15 +82,10 @@
 .attachDownload {
   position: absolute;
   top: calc(var(--zd_size1) * -1);
-  display: none;
+  right: calc(var(--zd_size1) * -1);
   background-color: var(--zdt_attachment_download_bg);
   text-align: center;
-}
-[dir=ltr] .attachDownload {
-  right: calc(var(--zd_size1) * -1);
-}
-[dir=rtl] .attachDownload {
-  left: calc(var(--zd_size1) * -1);
+  display: none;
 }
 .medium .attachDownload {
   height: var(--zd_size25);
@@ -124,9 +113,9 @@
 }
 
 .dot {
+  background-color: var(--zdt_dot_text);
   height: 2px;
   width: 2px;
-  background-color: var(--zdt_dot_text);
   border-radius: 50%;
   margin: 0 var(--zd_size6);
 }

package/es/Attachment/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  size: 'medium',
+  palette: 'default',
+  dataId: 'attachment',
+  i18nKeys: {}
+};

package/es/Attachment/props/propTypes.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  downloadLink: PropTypes.string,
+  fileInfo: PropTypes.string,
+  fileName: PropTypes.string,
+  fileSize: PropTypes.string,
+  iconName: PropTypes.string,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['transparent', 'default']),
+  size: PropTypes.oneOf(['small', 'medium']),
+  i18nKeys: PropTypes.shape({
+    downloadTitle: PropTypes.string
+  })
+};

package/es/AttachmentViewer/AttachmentImage.js

@@ -2,7 +2,8 @@
 
 /** * Libraries ** */
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { AttachmentImage_defaultProps } from './props/defaultProps';
+import { AttachmentImage_propTypes } from './props/propTypes';
 import Image from '../Image/Image';
 /** * CSS ** */
 
@@ -73,17 +74,5 @@ export default class AttachmentImage extends Component {
   }
 
 }
-AttachmentImage.propTypes = {
-  alt: PropTypes.string,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  id: PropTypes.string,
-  isCover: PropTypes.bool,
-  isImage: PropTypes.string,
-  onClick: PropTypes.func,
-  onLoad: PropTypes.func,
-  src: PropTypes.string
-};
-AttachmentImage.defaultProps = {
-  dataId: 'AttachmentImage'
-};
+AttachmentImage.propTypes = AttachmentImage_propTypes;
+AttachmentImage.defaultProps = AttachmentImage_defaultProps;

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
+import { AttachmentViewer_defaultProps } from './props/defaultProps';
+import { AttachmentViewer_propTypes } from './props/propTypes';
 import { Container, Box } from "@zohodesk/components/lib/Layout";
 import Icon from "@zohodesk/icons/lib/Icon";
 import Avatar from "@zohodesk/components/lib/Avatar/Avatar";
@@ -529,32 +530,8 @@ export default class AttachmentViewer extends Component {
   }
 
 }
-AttachmentViewer.propTypes = {
-  hideAttachmentViewer: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    nextText: PropTypes.string,
-    previousText: PropTypes.string,
-    zoomOutText: PropTypes.string,
-    zoomInText: PropTypes.string,
-    newTabText: PropTypes.string,
-    downloadText: PropTypes.string,
-    closeText: PropTypes.string,
-    hideText: PropTypes.string,
-    showText: PropTypes.string
-  }),
-  needDownload: PropTypes.string,
-  previewObj: PropTypes.object,
-  responsiveId: PropTypes.string,
-  maintainZoom: PropTypes.bool,
-  isActive: PropTypes.bool
-};
-AttachmentViewer.defaultProps = {
-  responsiveId: "Helmet",
-  needDownload: true,
-  i18nKeys: {},
-  maintainZoom: false,
-  isActive: false
-};
+AttachmentViewer.propTypes = AttachmentViewer_propTypes;
+AttachmentViewer.defaultProps = AttachmentViewer_defaultProps;
 
 if (false) {
   AttachmentViewer.docs = {