@zohodesk/components 1.2.19 → 1.2.21

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

@@ -0,0 +1,44 @@
+export const Tab_defaultProps = {
+  dataId: 'tabMenu',
+  customProps: {},
+  dataSelectorId: 'tab'
+};
+export const TabContent_defaultProps = {
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
+};
+export const TabContentWrapper_defaultProps = {
+  children: [],
+  dataSelectorId: 'tabContentWrapper'
+};
+export const Tabs_defaultProps = {
+  isAnimate: false,
+  isResponsive: true,
+  needTabBorder: false,
+  type: 'alpha',
+  dataId: 'highlight',
+  align: 'horizontal',
+  children: [],
+  highlightClass: '',
+  minTabsCount: 0,
+  maxTabsCount: 100,
+  moreButtonClass: '',
+  moreBoxClass: '',
+  menuItemClass: '',
+  iconName: 'ZD-TB-menu',
+  iconSize: '7',
+  containerClass: '',
+  customProps: {},
+  dataSelectorId: 'tabs'
+};
+export const TabWrapper_defaultProps = {
+  hookToDisableInternalState: false,
+  isAnimate: false,
+  needBorder: true,
+  needPadding: true,
+  needTabBorder: false,
+  type: 'alpha',
+  align: 'vertical',
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
+};

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/Tab/v1Tab.module.css

@@ -0,0 +1,100 @@
+.tab {
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.vertical {
+  height: 100% ;
+}
+.horizontal {
+  width: 100% ;
+  max-width: 100% ;
+}
+.textContainer,
+.tabText {
+  max-width: inherit ;
+}
+.tabText {
+  composes: dotted from '../../common/common.module.css';
+}
+.disabled {
+  cursor: not-allowed;
+}
+.border {
+  border-bottom: 1px solid var(--zdt_tab_default_border);
+}
+
+.alpha,
+.beta,
+.delta {
+  transition: all var(--zd_transition2);
+}
+.alpha {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size18) ;
+}
+.tabAlpha {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_text);
+}
+.alphaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+  background-color: var(--zdt_tab_alpha_hover_bg);
+}
+.alphaActive {
+  composes: alpha;
+  color: var(--zdt_tab_alpha_active_text);
+}
+.alphaActive_border, .betaActive_border {
+  border-color: var(--zdt_tab_alpha_active_border);
+}
+.deltaActive_border {
+  border-color: var(--zdt_tab_delta_active_border);
+}
+.beta {
+  font-size: var(--zd_font_size14) ;
+  line-height: 4.2857;
+  text-transform: capitalize;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40) ;
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40) ;
+}
+.tabBeta {
+  composes: beta;
+  color: var(--zdt_tab_alpha_text);
+}
+.betaHover:hover {
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.betaActive {
+  composes: beta;
+  color: var(--zdt_tab_alpha_hover_text);
+}
+.delta {
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+  padding: 0 var(--zd_size4) ;
+}
+[dir=ltr] .delta {
+  margin-right: var(--zd_size10) ;
+}
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10) ;
+}
+.tabDelta {
+  composes: delta;
+  color: var(--zdt_tab_alpha_text);
+}
+.deltaHover:hover {
+  color: var(--zdt_tab_alpha_active_text);
+}
+.deltaActive {
+  composes: delta;
+  color: var(--zdt_tab_alpha_active_text);
+}

package/es/v1/Tab/v1TabContent.module.css

@@ -0,0 +1,4 @@
+/* $Id$ */
+.container {
+  position: relative;
+}

package/es/v1/Tab/v1Tabs.module.css

@@ -0,0 +1,137 @@
+.tab {
+  position: relative;
+  z-index: 1;
+  --tab_position_gap: 22px;
+}
+
+.alpha {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .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);
+  border-style: solid;
+}
+
+.alpha::after {
+  content: '';
+  position: absolute;
+  z-index: -2;
+  width: 76% ;
+  bottom: 0 ;
+  height: var(--zd_size10) ;
+  border-radius: 100px / 5px;
+  box-shadow: var(--zd_bs_tabs_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 {
+  left: 0 ;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0 ;
+}
+
+.beta {
+  height: var(--zd_size61) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .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);
+}
+
+.delta {
+  height: var(--zd_size35) ;
+  background-color: var(--zdt_tabs_alpha_bg);
+}
+
+[dir=ltr] .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);
+}
+
+.delta .highlight {
+  border-color: var(--zdt_tabs_delta_border);
+}
+
+.maxWidth {
+  max-width: 100% ;
+}
+
+.highlight {
+  position: absolute;
+  bottom: 0 ;
+  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
+}
+
+.lineAnimate {
+  transition: transform var(--zd_transition3) linear;
+}
+
+.menu {
+  position: relative;
+  cursor: pointer;
+}
+
+.menuBox {
+  max-height: var(--zd_size220) ;
+}
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+  right: calc(var(--tab_position_gap) * -1); 
+}
+
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+  left: calc(var(--tab_position_gap) * -1); 
+}
+
+.hidden {
+  visibility: hidden;
+}

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) {
@@ -40,7 +40,8 @@ function TextBox(props) {
     onFocus,
     onBlur,
     onChange,
-    inputRef
+    inputRef,
+    isScrollPrevent
   } = props;
   let {
     ariaLabel,
@@ -106,6 +107,10 @@ function TextBox(props) {
     onChange && !isReadOnly && onChange(value, e);
   };
 
+  const handlePreventTextBoxScroll = () => {
+    this.inputEle.scrollLeft = 0;
+  };
+
   let classList = needAppearance ? `${style.container} ${style[size]}  ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
   value = value === null || value === undefined ? '' : value;
   return /*#__PURE__*/React.createElement("input", _extends({
@@ -123,7 +128,7 @@ function TextBox(props) {
     "aria-activedescendant": ariaActivedescendant,
     "aria-readonly": ariaReadonly,
     "aria-multiselectable": ariaMultiselectable,
-    className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass ? customClass : ''}`,
+    className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${isScrollPrevent ? style.inputDotted : ''} ${customClass ? customClass : ''}`,
     "data-id": `${dataId}`,
     "data-test-id": `${dataId}`,
     "data-selector-id": dataSelectorId,
@@ -140,6 +145,7 @@ function TextBox(props) {
     ref: handleRef,
     type: type,
     value: value,
+    onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
     onKeyPress: onKeyPress,
     onMouseDown: onMouseDown
   }, options.current, customProps));

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

@@ -0,0 +1,20 @@
+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,
+  isScrollPrevent: false,
+  customProps: {},
+  dataSelectorId: 'textBox'
+};

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

@@ -0,0 +1,56 @@
+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,
+  isScrollPrevent: 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';
@@ -49,7 +49,8 @@ export default function TextBoxIcon(props) {
     customProps,
     inputRef,
     onFocus,
-    onBlur
+    onBlur,
+    isScrollPrevent
   } = props;
   const {
     customTBoxWrap = '',
@@ -122,6 +123,7 @@ export default function TextBoxIcon(props) {
     onKeyPress: onKeyPress,
     onMouseDown: onMouseDown,
     needBorder: false,
+    isScrollPrevent: isScrollPrevent,
     customClass: customTextBox,
     customProps: TextBoxProps
   }))), /*#__PURE__*/React.createElement(Box, {

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

@@ -0,0 +1,23 @@
+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,
+  isScrollPrevent: false,
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
+};

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

@@ -0,0 +1,52 @@
+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,
+  isScrollPrevent: PropTypes.bool,
+  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 {