@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/es/Tab/TabContentWrapper.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from './props/defaultProps';
-import { TabContentWrapper_propTypes } from './props/propTypes';
+import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
@@ -22,6 +21,15 @@ const TabContentWrapper = _ref => {
   }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 
-TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
-TabContentWrapper.propTypes = TabContentWrapper_propTypes;
+TabContentWrapper.defaultProps = {
+  children: []
+};
+TabContentWrapper.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  onScroll: PropTypes.func,
+  selectedTab: PropTypes.string,
+  style: PropTypes.object
+};
 export default TabContentWrapper;

package/es/Tab/TabWrapper.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || 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, useCallback } from 'react';
-import { TabWrapper_defaultProps } from './props/defaultProps';
-import { TabWrapper_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { Container } from '../Layout';
 
 function TabWrapper(_ref) {
@@ -50,6 +49,28 @@ function TabWrapper(_ref) {
   }));
 }
 
-TabWrapper.propTypes = TabWrapper_propTypes;
-TabWrapper.defaultProps = TabWrapper_defaultProps;
+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', 'zeta'])
+};
+TabWrapper.defaultProps = {
+  hookToDisableInternalState: false,
+  isAnimate: false,
+  needBorder: true,
+  needPadding: true,
+  needTabBorder: false,
+  type: 'alpha',
+  align: 'vertical',
+  needAppearance: true
+};
 export default TabWrapper;

package/es/Tab/Tabs.js

@@ -10,11 +10,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
     }]
 */
 import React from 'react';
-import Tab from './Tab';
-import { Tabs_defaultProps } from './props/defaultProps';
-import { Tabs_propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import { remConvert, getTotalDimension, cs, bind, throttle } from '../utils/Common';
 import { Box, Container } from '../Layout';
+import Tab from './Tab';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -588,8 +587,71 @@ class Tabs extends React.Component {
 
 }
 
-Tabs.propTypes = Tabs_propTypes;
-Tabs.defaultProps = { ...Tabs_defaultProps,
-  childType: Tab
+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,
+  hookToDisableInternalState: PropTypes.bool,
+  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
+};
+Tabs.defaultProps = {
+  isAnimate: false,
+  isResponsive: true,
+  needTabBorder: false,
+  type: 'alpha',
+  dataId: 'highlight',
+  align: 'horizontal',
+  childType: Tab,
+  children: [],
+  highlightClass: '',
+  minTabsCount: 0,
+  maxTabsCount: 100,
+  moreButtonClass: '',
+  moreBoxClass: '',
+  menuItemClass: '',
+  iconName: 'ZD-TB-menu',
+  iconSize: '7',
+  containerClass: '',
+  customProps: {}
 };
 export default Popup(Tabs);

package/es/Tab/Tabs.module.css

@@ -9,14 +9,10 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .alpha_padding {
+.alpha_padding {
   padding-left: var(--zd_size15);
 }
 
-[dir=rtl] .alpha_padding {
-  padding-right: var(--zd_size15);
-}
-
 .alpha_border {
   border-width: 0 0 1px 0;
   border-color: var(--zdt_tabs_alpha_border);
@@ -30,34 +26,20 @@
   width: 76%;
   bottom: 0;
   height: var(--zd_size10);
+  left: 12%;
   border-radius: 100px / 5px;
   box-shadow: 0 -2px 9px var(--zdt_tabs_alpha_box_shadow);
 }
 
-[dir=ltr] .alpha::after {
-  left: 12%;
-}
-
-[dir=rtl] .alpha::after {
-  right: 12%;
-}
-
 .alpha:before {
   content: '';
   position: absolute;
   z-index: -1;
   width: 100%;
-  height: 100%;
-  top: 0;
   background: inherit;
-}
-
-[dir=ltr] .alpha:before {
+  height: 100%;
   left: 0;
-}
-
-[dir=rtl] .alpha:before {
-  right: 0;
+  top: 0;
 }
 
 .beta {
@@ -65,14 +47,10 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .beta_padding {
+.beta_padding {
   padding-left: var(--zd_size13);
 }
 
-[dir=rtl] .beta_padding {
-  padding-right: var(--zd_size13);
-}
-
 .beta_border {
   border-bottom: 1px solid var(--zdt_tabs_alpha_border);
 }
@@ -82,14 +60,10 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .delta_padding {
+.delta_padding {
   padding-left: var(--zd_size10);
 }
 
-[dir=rtl] .delta_padding {
-  padding-right: var(--zd_size10);
-}
-
 .delta_border {
   border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
 }
@@ -121,20 +95,12 @@
 }
 
 
-[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
+.bottomRightToLeft, .topRightToLeft, .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
-
-
-[dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
-  left: calc(var(--tab_position_gap) * -1);
-}
-[dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
+.bottomLeftToRight, .topLeftToRight, .bottomCenterToRight {
   left: calc(var(--tab_position_gap) * -1);
 }
-[dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
-  right: calc(var(--tab_position_gap) * -1);
-}
 
 .hidden{
   visibility: hidden;

package/es/Tab/docs/tabdocs.module.css

@@ -4,8 +4,8 @@
 }
 .item {
   color: #fff;
-  font-size: 12px;
   padding: 10px;
+  font-size: 12px;
 }
 
 .itemActive {

package/es/Tag/Tag.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { PropTypes } from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
 import Avatar from '../Avatar/Avatar';
 import { Container } from '../Layout';
@@ -142,8 +141,52 @@ export default class Tag extends PureComponent {
   }
 
 }
-Tag.defaultProps = defaultProps;
-Tag.propTypes = propTypes;
+Tag.defaultProps = {
+  active: false,
+  closePalette: 'danger',
+  hasAvatar: false,
+  palette: 'default',
+  rounded: true,
+  size: 'medium',
+  dataId: 'tag',
+  customClass: {},
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
+};
+Tag.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
+};
 
 if (false) {
   Tag.docs = {

package/es/Tag/Tag.module.css

@@ -14,21 +14,16 @@
   --tag_cursor: auto;
 
   /* tag close icon default variables */
+  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
   --tag_closeicon_color: var(--zdt_tag_secondary_text);
+  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6)
+    /*rtl: 0 var(--zd_size6) 0 var(--zd_size7)*/;
   --tag_closeicon_cursor: pointer;
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 
   /* tag normal icon default variables */
-  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
-}[dir=ltr] .varClass {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6)
-    /*rtl: 0 var(--zd_size6) 0 var(--zd_size7)*/;
   --tag_icon_margin: 0 0 0 var(--zd_size5) /*rtl: 0 var(--zd_size5) 0 0*/;
-}[dir=rtl] .varClass {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
-  --tag_icon_margin: 0 var(--zd_size5) 0 0;
+  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }
 .container {
   composes: varClass;
@@ -36,17 +31,17 @@
   position: relative;
   vertical-align: middle;
   color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
-  height: var(--tag_height);
-  max-width: 100%;
-  background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
+  height: var(--tag_height);
   border-width: var(--tag_border_width);
   border-style: var(--tag_border_style);
   border-color: var(--tag_border_color);
   padding: var(--tag_padding);
   cursor: var(--tag_cursor);
+  max-width: 100%;
 }
 .disabled {
   pointer-events: none;
@@ -70,24 +65,18 @@
 }
 .smalltext,
 .mediumtext {
-  font-size: var(--tag_font_size);
-}
-.smalltext, .mediumtext {
   padding: var(--tag_inner_text_padding);
+  font-size: var(--tag_font_size);
 }
 .small {
   --tag_height: var(--zd_size20);
   --tag_padding: var(--zd_size1);
   --tag_inner_text_padding: 0 var(--zd_size7);
 }
-[dir=ltr] .small .avatar {
+.small .avatar {
   transform: scale(0.8) translateX(-2px);
   margin-right: calc(var(--zd_size8) * -1);
 }
-[dir=rtl] .small .avatar {
-  transform: scale(0.8) translateX(2px);
-  margin-left: calc(var(--zd_size8) * -1);
-}
 .smalltext {
   --tag_font_size: var(--zd_font_size12);
 }
@@ -123,34 +112,23 @@
   display: block;
 }
 .close {
+  padding: var(--tag_closeicon_padding);
+  cursor: var(--tag_closeicon_cursor);
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
-  padding: var(--tag_closeicon_padding);
-  cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
   background: var(--tag_closeicon_bg_color);
 }
-[dir=ltr] .close {
-  right: 0;
-}
-[dir=rtl] .close {
-  left: 0;
-}
-[dir=ltr] .lgRadiusClose {
+.lgRadiusClose {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
 }
-[dir=rtl] .lgRadiusClose {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-}
-[dir=ltr] .smRadiusClose {
+.smRadiusClose {
   --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
 }
-[dir=rtl] .smRadiusClose {
-  --tag_closeicon_border_radius: 3px 0 0 3px;
-}
 .closedanger {
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 }

package/es/TextBox/TextBox.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || 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 from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
 import style from './TextBox.module.css';
@@ -168,8 +167,77 @@ export default class Textbox extends React.PureComponent {
   }
 
 }
-Textbox.defaultProps = defaultProps;
-Textbox.propTypes = propTypes;
+Textbox.defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  maxLength: 250,
+  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: {}
+};
+Textbox.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
+};
 
 if (false) {
   Textbox.docs = {

package/es/TextBox/TextBox.module.css

@@ -41,20 +41,20 @@
 }
 .container {
   composes: basic;
+  background-color: var(--textbox_bg_color);
   transition: border var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
+  padding: var(--textbox_padding);
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
-  line-height: var(--textbox_line_height);
-  background-color: var(--textbox_bg_color);
-  -webkit-transition: border var(--zd_transition2) linear 0s;
-  padding: var(--textbox_padding);
   border-radius: var(--textbox_border_radius);
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
   border-color: var(--textbox_border_color);
+  line-height: var(--textbox_line_height);
 }
 .basic:disabled,
 .container:disabled,
@@ -82,17 +82,21 @@
   --textbox_cursor: pointer;
 }
 /* Need Border */
-.border, .effect:hover, .effect:focus {
+.border,
+.effect:hover,
+.effect:focus {
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
-.effect:hover, .effect:focus {
+.effect:hover,
+.effect:focus {
   border-color: var(--textbox_border_color);
 }
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
-.borderColor_transparent, .borderColor_default {
+.borderColor_transparent,
+.borderColor_default {
   border-color: var(--textbox_border_color);
 }
 .borderColor_transparent {

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,8 +1,7 @@
 function _extends() { _extends = Object.assign || 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 from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import PropTypes from 'prop-types';
 import TextBox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -157,8 +156,75 @@ export default class TextBoxIcon extends React.Component {
   }
 
 }
-TextBoxIcon.defaultProps = defaultProps;
-TextBoxIcon.propTypes = propTypes;
+TextBoxIcon.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: {}
+};
+TextBoxIcon.propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
+  children: PropTypes.node,
+  dataId: 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
+  })
+};
 
 if (false) {
   TextBoxIcon.docs = {