@zohodesk/components 1.2.18 → 1.2.20

package/es/v1/Tab/props/propTypes.js

@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+export const Tab_propTypes = {
+  activeClass: PropTypes.string,
+  align: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getTabRef: PropTypes.func,
+  href: PropTypes.string,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLink: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  style: PropTypes.object,
+  text: PropTypes.string,
+  title: PropTypes.string,
+  titlePosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  tourId: PropTypes.string,
+  type: PropTypes.string,
+  customProps: PropTypes.object,
+  isVirtual: PropTypes.bool,
+  dataSelectorId: PropTypes.string
+};
+export const TabContent_propTypes = {
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  id: PropTypes.string,
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: PropTypes.string
+};
+export const TabContentWrapper_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  onScroll: PropTypes.func,
+  selectedTab: PropTypes.string,
+  style: PropTypes.object,
+  dataSelectorId: PropTypes.string
+};
+export const Tabs_propTypes = {
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  boxPosition: PropTypes.string,
+  childType: PropTypes.elementType,
+  children: PropTypes.array,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  highlightClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isAnimate: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isResponsive: PropTypes.bool,
+  itemActiveClass: PropTypes.string,
+  itemClass: PropTypes.string,
+  maxTabsCount: PropTypes.number,
+  menuItemClass: PropTypes.string,
+  minTabsCount: PropTypes.number,
+  moreBoxClass: PropTypes.string,
+  moreButtonActiveClass: PropTypes.string,
+  moreButtonClass: PropTypes.string,
+  moreContainerClass: PropTypes.string,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needPadding: PropTypes.bool,
+  needTabBorder: PropTypes.bool,
+  onScroll: PropTypes.func,
+  onSelect: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  selectedTab: PropTypes.string,
+  showTitleInMoreOptions: PropTypes.bool,
+  style: PropTypes.object,
+  togglePopup: PropTypes.func,
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  getTargetRef: PropTypes.func,
+  containerClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    DropBoxProps: PropTypes.object,
+    ListItemProps: PropTypes.object,
+    MoreButtonProps: PropTypes.object
+  }),
+  getCustomDropBoxHeaderPlaceHolder: PropTypes.func,
+  dataSelectorId: PropTypes.string
+};
+export const TabWrapper_propTypes = {
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  defaultTab: PropTypes.string,
+  hookToDisableInternalState: PropTypes.bool,
+  isAnimate: PropTypes.bool,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needPadding: PropTypes.bool,
+  needTabBorder: PropTypes.bool,
+  onSelect: PropTypes.func,
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
+  dataSelectorId: PropTypes.string
+};

package/es/v1/Tag/Tag.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import { defaultProps } from '../../Tag/props/defaultProps';
-import { propTypes } from '../../Tag/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import Avatar from '../Avatar/Avatar';
 import { Container } from '../Layout';

package/es/v1/Tag/props/defaultProps.js

@@ -0,0 +1,14 @@
+export const defaultProps = {
+  active: false,
+  closePalette: 'danger',
+  hasAvatar: false,
+  palette: 'default',
+  rounded: true,
+  size: 'medium',
+  dataId: 'tag',
+  customClass: {},
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false,
+  dataSelectorId: 'tag'
+};

package/es/v1/Tag/props/propTypes.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  active: PropTypes.bool,
+  avatarPalette: PropTypes.string,
+  closePalette: PropTypes.oneOf(['danger', 'primary']),
+  closeTitle: PropTypes.string,
+  dataId: PropTypes.string,
+  disabled: PropTypes.bool,
+  getRef: PropTypes.func,
+  hasAvatar: PropTypes.bool,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  imageURL: PropTypes.string,
+  initial: PropTypes.string,
+  onRemove: PropTypes.func,
+  onSelectTag: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink']),
+  rounded: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tooltip: PropTypes.string,
+  customClass: PropTypes.shape({
+    customTag: PropTypes.string,
+    customTagClose: PropTypes.string,
+    customTagIcon: PropTypes.string,
+    customAvatar: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  needEffect: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  dataSelectorId: PropTypes.string
+};

package/es/v1/TextBox/TextBox.js

@@ -1,8 +1,8 @@
 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, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from '../../TextBox/props/defaultProps';
-import { propTypes } from '../../TextBox/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../TextBox/TextBox.module.css';
 
 function TextBox(props) {

package/es/v1/TextBox/props/defaultProps.js

@@ -0,0 +1,19 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  dataId: 'textBox',
+  needReadOnlyStyle: true,
+  needAppearance: true,
+  isClickable: false,
+  needEffect: true,
+  autoComplete: true,
+  borderColor: 'default',
+  a11y: {},
+  isFocus: false,
+  customProps: {},
+  dataSelectorId: 'textBox'
+};

package/es/v1/TextBox/props/propTypes.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  autofocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  htmlId: PropTypes.string,
+  id: PropTypes.string,
+  inputRef: PropTypes.func,
+  isClickable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  name: PropTypes.string,
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  type: PropTypes.oneOf(['text', 'password', 'number']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
+  htmlId: PropTypes.string,
+  customClass: PropTypes.string,
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaAutocomplete: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaDescribedby: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    autoComplete: PropTypes.bool,
+    ariaHaspopup: PropTypes.bool,
+    ariaRequired: PropTypes.bool,
+    ariaLabelledby: PropTypes.string,
+    ariaInvalid: PropTypes.bool,
+    ariaOwns: PropTypes.string,
+    ariaActivedescendant: PropTypes.string,
+    ariaReadonly: PropTypes.bool,
+    ariaMultiselectable: PropTypes.bool
+  }),
+  isFocus: PropTypes.bool,
+  customProps: PropTypes.object,
+  dataSelectorId: PropTypes.string,
+  autoComplete: PropTypes.bool
+};

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,8 +1,8 @@
 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, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from '../../TextBoxIcon/props/defaultProps';
-import { propTypes } from '../../TextBoxIcon/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import TextBox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
 import { Icon } from '@zohodesk/icons';

package/es/v1/TextBoxIcon/props/defaultProps.js

@@ -0,0 +1,22 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  iconRotated: false,
+  maxLength: '250',
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  needReadOnlyStyle: true,
+  isClickable: false,
+  needEffect: true,
+  dataId: 'textBoxIcon',
+  borderColor: 'default',
+  showClearIcon: false,
+  i18nKeys: {},
+  customClass: {},
+  iconOnHover: false,
+  isFocus: false,
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
+};

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
+export const propTypes = { ...TextBox_propTypes,
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
+  children: PropTypes.node,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string
+  }),
+  iconRotated: PropTypes.bool,
+  id: PropTypes.string,
+  inputRef: PropTypes.func,
+  isClickable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.string,
+  name: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  showClearIcon: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  title: PropTypes.func,
+  type: PropTypes.oneOf(['text', 'password', 'number']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  customClass: PropTypes.shape({
+    customTBoxWrap: PropTypes.string,
+    customTextBox: PropTypes.string,
+    customTBoxIcon: PropTypes.string,
+    customTBoxLine: PropTypes.string
+  }),
+  iconOnHover: PropTypes.bool,
+  isFocus: PropTypes.bool,
+  onClearMouseDown: PropTypes.func,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object
+  })
+};

package/es/v1/Textarea/Textarea.js

@@ -1,8 +1,8 @@
 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, { useRef } from 'react';
-import { defaultProps } from '../../Textarea/props/defaultProps';
-import { propTypes } from '../../Textarea/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from '../../Textarea/Textarea.module.css';
 export default function Textarea(props) {
   let {

package/es/v1/Textarea/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {},
+  dataSelectorId: 'textarea'
+};

package/es/v1/Textarea/props/propTypes.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  animated: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  getRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  needAppearance: PropTypes.bool,
+  needBorder: PropTypes.bool,
+  needEffect: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  placeHolder: PropTypes.string,
+  resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: PropTypes.string,
+  variant: PropTypes.oneOf(['default', 'primary']),
+  customClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    ariaLabel: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  })
+};

package/es/v1/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../Tooltip/props/defaultProps';
-import { propTypes } from '../../Tooltip/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../../Provider/Config';
 import style from '../../Tooltip/Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';

package/es/v1/Tooltip/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  dataId: 'toolTip',
+  customClass: ''
+};

package/es/v1/Tooltip/props/propTypes.js

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  customClass: PropTypes.string
+};

package/es/v1/Typography/css/Typography.module.css

@@ -238,130 +238,77 @@
 .lineheight_inherit{
   line-height: inherit;
 }
-.lineheight_0{
-  line-height: 0px;
-}
-.lineheight_1{
-  line-height: 1;
-}
-.lineheight_8{
-  line-height: 8px;
-}
-.lineheight_10{
-  line-height: 10px;
-}
-.lineheight_11{
-  line-height: 11px;
-}
-.lineheight_12{
-  line-height: 12px;
-}
-.lineheight_13{
-  line-height: 13px;
-}
-.lineheight_14{
-  line-height: 14px;
-}
-.lineheight_15{
-  line-height: 15px;
-}
-.lineheight_16{
-  line-height: 16px;
-}
-.lineheight_17{
-  line-height: 17px;
-}
-.lineheight_18{
-  line-height: 18px;
-}
-.lineheight_19{
-  line-height: 19px;
-}
-.lineheight_20{
-  line-height: 20px;
-}
-.lineheight_21{
-  line-height: 21px;
-}
-.lineheight_22{
-  line-height: 22px;
+.lineheight_initial{
+  line-height: initial;
 }
-.lineheight_24{
-  line-height: 24px;
+.lineheight_normal{
+  line-height: normal;
 }
-.lineheight_25{
-  line-height: 25px;
-}
-.lineheight_26{
-  line-height: 26px;
-}
-.lineheight_27{
-  line-height: 27px;
-}
-.lineheight_28{
-  line-height: 28px;
+.lineheight_0{
+  line-height: 0;
 }
-.lineheight_29{
-  line-height: 29px;
+.lineheight_0_1{
+  line-height: 0.1;
 }
-.lineheight_30{
-  line-height: 30px;
+.lineheight_0_2{
+  line-height: 0.2;
 }
-.lineheight_32{
-  line-height: 32px;
+.lineheight_0_3{
+  line-height: 0.3;
 }
-.lineheight_33{
-  line-height: 33px;
+.lineheight_0_4{
+  line-height: 0.4;
 }
-.lineheight_34{
-  line-height: 34px;
+.lineheight_0_5{
+  line-height: 0.5;
 }
-.lineheight_35{
-  line-height: 35px;
+.lineheight_0_6{
+  line-height: 0.6;
 }
-.lineheight_36{
-  line-height: 36px;
+.lineheight_0_7{
+  line-height: 0.7;
 }
-.lineheight_38{
-  line-height: 38px;
+.lineheight_0_8{
+  line-height: 0.8;
 }
-.lineheight_40{
-  line-height: 40px;
+.lineheight_0_9{
+  line-height: 0.9;
 }
-.lineheight_41{
-  line-height: 41px;
+.lineheight_1{
+  line-height: 1;
 }
-.lineheight_42{
-  line-height: 42px;
+.lineheight_1_1{
+  line-height: 1.1;
 }
-.lineheight_45{
-  line-height: 45px;
+.lineheight_1_2{
+  line-height: 1.2;
 }
-.lineheight_50{
-  line-height: 50px;
+.lineheight_1_3{
+  line-height: 1.3;
 }
-.lineheight_52{
-  line-height: 52px;
+.lineheight_1_4{
+  line-height: 1.4;
 }
-.lineheight_54{
-  line-height: 54px;
+.lineheight_1_5{
+  line-height: 1.5;
 }
-.lineheight_55{
-  line-height: 55px;
+.lineheight_1_6{
+  line-height: 1.6;
 }
-.lineheight_60{
-  line-height: 60px;
+.lineheight_1_7{
+  line-height: 1.7;
 }
-.lineheight_70{
-  line-height: 70px;
+.lineheight_1_8{
+  line-height: 1.8;
 }
-.lineheight_75{
-  line-height: 75px;
+.lineheight_1_9{
+  line-height: 1.9;
 }
-.lineheight_120{
-  line-height: 120px;
+.lineheight_2{
+  line-height: 2;
 }
 
+
 /*............... Lineheight End.........*/
 
 /*............... Letterspacing Start.........*/
@@ -369,41 +316,65 @@
 .letterspacing_inherit{
   letter-spacing:inherit;
 }
-.letterspacing_01{
+.letterspacing_0_1{
   letter-spacing: 0.1px;
 }
-.letterspacing_02{
+.letterspacing_0_2{
   letter-spacing: 0.2px;
 }
-.letterspacing_03{
+.letterspacing_0_3{
   letter-spacing: 0.3px;
 }
-.letterspacing_04{
+.letterspacing_0_4{
   letter-spacing: 0.4px;
 }
-.letterspacing_05{
+.letterspacing_0_5{
   letter-spacing: 0.5px;
 }
-.letterspacing_06{
+.letterspacing_0_6{
   letter-spacing: 0.6px;
 }
-.letterspacing_07{
+.letterspacing_0_7{
   letter-spacing: 0.7px;
 }
-.letterspacing_08{
+.letterspacing_0_8{
   letter-spacing: 0.8px;
 }
-.letterspacing_09{
+.letterspacing_0_9{
   letter-spacing: 0.9px;
 }
 .letterspacing_1{
   letter-spacing: 1px;
 }
+.letterspacing_1_1{
+  letter-spacing: 1.1px;
+}
+.letterspacing_1_2{
+  letter-spacing: 1.2px;
+}
+.letterspacing_1_3{
+  letter-spacing: 1.3px;
+}
+.letterspacing_1_4{
+  letter-spacing: 1.4px;
+}
+.letterspacing_1_5{
+  letter-spacing: 1.5px;
+}
+.letterspacing_1_6{
+  letter-spacing: 1.6px;
+}
+.letterspacing_1_7{
+  letter-spacing: 1.7px;
+}
+.letterspacing_1_8{
+  letter-spacing: 1.8px;
+}
+.letterspacing_1_9{
+  letter-spacing: 1.9px;
+}
 .letterspacing_2{
   letter-spacing: 2px;
 }
-.letterspacing_4{
-  letter-spacing: 4px;
-}
 
 /*............... Letterspacing End.........*/