@xaypay/tui 0.2.20 → 0.2.22

package/dist/index.es.js

@@ -564,6 +564,7 @@ var packageResult = {
       shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
     },
     colors: {
+      placeholder: 'gray',
       background: 'white',
       backgroundDisable: presetColors.secondary
     },
@@ -1017,6 +1018,15 @@ var packageResult = {
       color: '#4A4A4D',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     font: {
@@ -1194,6 +1204,8 @@ var packageResult = {
   TABLE: {
     className: '',
     textAlign: 'center',
+    border: '1px solid',
+    borderColor: 'transparent',
     column: {
       maxWidth: '',
       minWidth: ''
@@ -1398,7 +1410,7 @@ async function getPProps() {
   const projectPath = `../../../../tui.config.js`;
   async function loadComponent(componentName) {
     try {
-      const Component = await import( /* @vite-ignore */componentName);
+      const Component = await import(/* @vite-ignore */componentName);
       return Component.default;
     } catch (err) {
       console.error(`Error loading component: ${componentName}`);
@@ -1707,8 +1719,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}";
-var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW"};
+var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}.file-module_file-label__uscgT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-module_tooltip__FjCUU{background-color:#333;border-radius:4px;color:#fff;font-size:14px;pointer-events:none;position:fixed;visibility:hidden;white-space:nowrap;z-index:1000}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW","file-label":"file-module_file-label__uscgT","tooltip":"file-module_tooltip__FjCUU"};
 styleInject(css_248z$d);
 
 // eslint-disable-next-line react/display-name
@@ -1741,6 +1753,14 @@ const File = /*#__PURE__*/forwardRef(({
   labelStyle,
   labelWeight,
   labelFamily,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   removeFile,
   labelColor,
   errorColor,
@@ -1750,6 +1770,8 @@ const File = /*#__PURE__*/forwardRef(({
   uploadColor,
   defaultData,
   formatError,
+  errorIcon,
+  errorIconShow,
   errorMessage,
   fileSizeText,
   maxSizeError,
@@ -1806,6 +1828,7 @@ const File = /*#__PURE__*/forwardRef(({
   listItemBackgroundColor,
   listItemBackgroundErrorColor,
   maxCHoosenLengthErrorHideTime,
+  textAlignLeftInSmallComponent,
   showPreviewIconInSmallComponent,
   maxSize = 10,
   preview = true,
@@ -1813,12 +1836,16 @@ const File = /*#__PURE__*/forwardRef(({
   fileExtensions = ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 }, ref) => {
   const inpRef = useRef(null);
+  const labelRef = useRef(null);
+  const parentlRef = useRef(null);
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [classProps, setClassProps] = useState({});
   const [singleFile, setSingleFile] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [choosenFileCount, setChoosenFileCount] = useState(0);
   const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url.startsWith('data:image/heif') || defaultData.url.startsWith('data:image/heic') || defaultData.url.startsWith('data:application/octet-stream') ? 'heic' : defaultData.url : 'pdf' : null : null);
   const handleCheckHeicFormat = async file => {
@@ -2049,14 +2076,10 @@ const File = /*#__PURE__*/forwardRef(({
     }
   };
   const handleClick = () => {
-    inpRef.current.files = null;
-    inpRef.current.value = null;
-    if (multiple) {
+    if (!image && !singleFile) {
+      inpRef.current.files = null;
+      inpRef.current.value = null;
       inpRef.current.click();
-    } else {
-      if (!image) {
-        inpRef.current.click();
-      }
     }
   };
   const handleDrop = e => {
@@ -2083,6 +2106,79 @@ const File = /*#__PURE__*/forwardRef(({
   const handleStopPropagation = e => {
     e.stopPropagation();
   };
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentlRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.FILE.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.FILE.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.FILE.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.FILE.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.FILE.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.FILE.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.FILE.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useImperativeHandle(ref, () => ({
     handleReset() {
       setError('');
@@ -2149,8 +2245,14 @@ const File = /*#__PURE__*/forwardRef(({
     }, error => {
       console.error(error);
     });
+    return () => {
+      if (tooltipElem) {
+        document.body.removeChild(tooltipElem);
+      }
+    };
   }, []);
   return configStyles.FILE && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentlRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth
@@ -2163,15 +2265,28 @@ const File = /*#__PURE__*/forwardRef(({
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end'
     }
-  }, label && /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
     style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
+    className: styles$b['file-label'],
+    style: {
+      width: '100%',
       color: labelColor ?? configStyles.FILE.label.color,
       fontSize: labelSize ?? configStyles.FILE.label.font.size,
       fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
       fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
       fontFamily: labelFamily ?? configStyles.FILE.label.font.family
-    }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
+    },
+    onMouseEnter: handleLabelMouseEnter,
+    onMouseLeave: handleLabelMouseLeave
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
     style: {
       cursor: 'pointer'
     },
@@ -2256,7 +2371,7 @@ const File = /*#__PURE__*/forwardRef(({
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
-      justifyContent: 'space-between'
+      justifyContent: textAlignLeftInSmallComponent ? 'flex-start' : 'space-between'
     }
   }, showPreviewIconInSmallComponent ? !image ? /*#__PURE__*/React__default.createElement(Button, {
     contentWidth: true,
@@ -2318,14 +2433,16 @@ const File = /*#__PURE__*/forwardRef(({
   }, iconRemoveFile ? iconRemoveFile : configStyles.FILE.icon.removeFile ? configStyles.FILE.icon.removeFile : /*#__PURE__*/React__default.createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       marginTop: '6px',
-      display: 'inline-block',
       color: errorColor ?? configStyles.FILE.error.color,
       fontSize: errorSize ?? configStyles.FILE.error.font.size,
       fontStyle: errorStyle ?? configStyles.FILE.error.font.style,
       fontWeight: errorWeight ?? configStyles.FILE.error.font.weight,
-      fontFamily: errorFamily ?? configStyles.FILE.error.font.family
+      fontFamily: errorFamily ?? configStyles.FILE.error.font.family,
+      alignItems: 'center',
+      columnGap: '5px',
+      display: errorIconShow && (errorIcon || configStyles.FILE.error?.icon) ? 'inline-flex' : 'inline-block'
     }
-  }, error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
+  }, errorIconShow ? errorIcon ? errorIcon : configStyles.FILE.error?.icon ? configStyles.FILE.error?.icon : '' : '', error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
     return /*#__PURE__*/React__default.createElement(FileItem, {
       key: item.uuid,
       uuid: item.uuid,
@@ -2397,6 +2514,14 @@ File.propTypes = {
   labelWeight: PropTypes.string,
   labelFamily: PropTypes.string,
   labelColor: PropTypes.string,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   errorColor: PropTypes.string,
   formatError: PropTypes.string,
   putFileHere: PropTypes.string,
@@ -2404,6 +2529,8 @@ File.propTypes = {
   defaultData: PropTypes.object,
   componentId: PropTypes.number,
   maxSizeError: PropTypes.string,
+  errorIcon: PropTypes.element,
+  errorIconShow: PropTypes.bool,
   errorMessage: PropTypes.string,
   fileSizeText: PropTypes.string,
   noChoosenFile: PropTypes.string,
@@ -2461,10 +2588,107 @@ File.propTypes = {
   listItemBackgroundErrorColor: PropTypes.string,
   maxCHoosenLengthErrorHideTime: PropTypes.number,
   filesArray: PropTypes.arrayOf(PropTypes.object),
+  textAlignLeftInSmallComponent: PropTypes.bool,
   showPreviewIconInSmallComponent: PropTypes.bool,
   fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
 
+const hasOwnerProperty = (object, property) => {
+  return Object.prototype.hasOwnProperty.call(object, property);
+};
+const handleUtilsMouseEnterLeave = (e, behaviourStyle) => {
+  if (typeof behaviourStyle !== 'object' || behaviourStyle === null || behaviourStyle === undefined) {
+    alert('Please set a second param of handleUtilsMouseEnter function as valid object');
+    return;
+  }
+  if (!hasOwnerProperty(e, 'target')) {
+    alert('Please set a valid object like DOM event');
+    return;
+  }
+  const existStyle = e.target.style;
+  if (typeof existStyle !== 'object' || existStyle === null) {
+    alert('Please set a valid style object in DOM event tergat');
+    return;
+  }
+  for (const property in behaviourStyle) {
+    if (existStyle[property]) {
+      existStyle[property] = behaviourStyle[property];
+    }
+  }
+};
+const handleUtilsCheckTypeTel = (val, prevVal) => {
+  const phoneNumberRegex = /^\d{0,8}$/;
+  if (val.length > 7) {
+    val = val.substr(0, 8);
+  }
+  if (!phoneNumberRegex.test(val)) {
+    val = prevVal;
+  }
+  return val;
+};
+const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength, cardNumber) => {
+  if (maxLength && maxLength > 0) {
+    if (val.length > maxLength) {
+      val = val.substr(0, maxLength);
+    }
+  } else {
+    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.|\․|\.|\,)?(\d+)?$/ : /^\d+$/;
+    if (cardNumber) {
+      if (val.length > 19 && !val.includes('.')) {
+        val = val.substr(0, 19);
+      }
+    } else {
+      if (val.length > 16 && !val.includes('.')) {
+        val = val.substr(0, 16);
+      }
+    }
+    if (numberMaxLength && numberMaxLength > 0 && !val.includes('.')) {
+      val = val.substr(0, numberMaxLength);
+    }
+    const floatNumParts = typeof val === 'string' ? val.split(/\.|\․|\.|\,/) : val;
+    const int = floatNumParts[0];
+    const float = floatNumParts[1];
+    if (floatToFix > 0) {
+      if (float && float.length > 0) {
+        let floatResult = '';
+        [...float].map((item, index) => {
+          if (index + 1 <= floatToFix) {
+            floatResult += item;
+          }
+        });
+        floatResult !== '' ? val = `${int}.${floatResult}` : val = `${int}`;
+      }
+    } else {
+      if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+        val = `${int}`;
+      }
+    }
+    if (!regNum.test(val)) {
+      let newVal = typeof val === 'number' ? val.toString() : val;
+      const newStr = newVal.replace(/[^0-9.]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
+        return b + c.replace(/\.|\․|\.|\,/g, '');
+      });
+      val = newStr;
+    }
+  }
+  if (withoutDot && !/^\d+$/.test(val)) {
+    let newVal = typeof val === 'number' ? val.toString() : val;
+    const newStr = newVal.replace(/[^0-9]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
+      return b + c.replace(/\.|\․|\.|\,/g, '');
+    });
+    val = newStr;
+  }
+  return val;
+};
+const handleUtilsOpenInNewTab = url => {
+  const imageLink = document.createElement('a');
+  imageLink.href = url, imageLink.target = '_blank';
+  imageLink.click();
+};
+const handleRemoveLeadingZeros = str => {
+  return str.replace(/^0+(\d)/, '$1');
+};
+
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -2630,102 +2854,6 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes.bool
 };
 
-const hasOwnerProperty = (object, property) => {
-  return Object.prototype.hasOwnProperty.call(object, property);
-};
-const handleUtilsMouseEnterLeave = (e, behaviourStyle) => {
-  if (typeof behaviourStyle !== 'object' || behaviourStyle === null || behaviourStyle === undefined) {
-    alert('Please set a second param of handleUtilsMouseEnter function as valid object');
-    return;
-  }
-  if (!hasOwnerProperty(e, 'target')) {
-    alert('Please set a valid object like DOM event');
-    return;
-  }
-  const existStyle = e.target.style;
-  if (typeof existStyle !== 'object' || existStyle === null) {
-    alert('Please set a valid style object in DOM event tergat');
-    return;
-  }
-  for (const property in behaviourStyle) {
-    if (existStyle[property]) {
-      existStyle[property] = behaviourStyle[property];
-    }
-  }
-};
-const handleUtilsCheckTypeTel = (val, prevVal) => {
-  const phoneNumberRegex = /^\d{0,8}$/;
-  if (val.length > 7) {
-    val = val.substr(0, 8);
-  }
-  if (!phoneNumberRegex.test(val)) {
-    val = prevVal;
-  }
-  return val;
-};
-const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength, cardNumber) => {
-  if (maxLength && maxLength > 0) {
-    if (val.length > maxLength) {
-      val = val.substr(0, maxLength);
-    }
-  } else {
-    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.|\․|\.|\,)?(\d+)?$/ : /^\d+$/;
-    if (cardNumber) {
-      if (val.length > 19 && !val.includes('.')) {
-        val = val.substr(0, 19);
-      }
-    } else {
-      if (val.length > 16 && !val.includes('.')) {
-        val = val.substr(0, 16);
-      }
-    }
-    if (numberMaxLength && numberMaxLength > 0 && !val.includes('.')) {
-      val = val.substr(0, numberMaxLength);
-    }
-    const floatNumParts = typeof val === 'string' ? val.split(/\.|\․|\.|\,/) : val;
-    const int = floatNumParts[0];
-    const float = floatNumParts[1];
-    if (floatToFix > 0) {
-      if (float && float.length > 0) {
-        let floatResult = '';
-        [...float].map((item, index) => {
-          if (index + 1 <= floatToFix) {
-            floatResult += item;
-          }
-        });
-        floatResult !== '' ? val = `${int}.${floatResult}` : val = `${int}`;
-      }
-    } else {
-      if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-        val = `${int}`;
-      }
-    }
-    if (!regNum.test(val)) {
-      let newVal = typeof val === 'number' ? val.toString() : val;
-      const newStr = newVal.replace(/[^0-9.]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
-        return b + c.replace(/\.|\․|\.|\,/g, '');
-      });
-      val = newStr;
-    }
-  }
-  if (withoutDot && !/^\d+$/.test(val)) {
-    let newVal = typeof val === 'number' ? val.toString() : val;
-    const newStr = newVal.replace(/[^0-9]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
-      return b + c.replace(/\.|\․|\.|\,/g, '');
-    });
-    val = newStr;
-  }
-  return val;
-};
-const handleUtilsOpenInNewTab = url => {
-  const imageLink = document.createElement('a');
-  imageLink.href = url, imageLink.target = '_blank';
-  imageLink.click();
-};
-const handleRemoveLeadingZeros = str => {
-  return str.replace(/^0+(\d)/, '$1');
-};
-
 var css_248z$c = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
 var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO","no-tabel-data":"table-module_no-tabel-data__6xp3N"};
 styleInject(css_248z$c);
@@ -2820,6 +2948,7 @@ const TD = ({
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
+  collapseFullRow,
   openListFontSize,
   borderRightColor,
   openListFontStyle,
@@ -2834,6 +2963,11 @@ const TD = ({
   handleCheckArrowAction,
   handleOpenCloseRowSingleArrow
 }) => {
+  const [actionHover, setActionHover] = useState({
+    id: '',
+    type: '',
+    index: -1
+  });
   const handleBodyAction = (e, data) => {
     const actionData = {
       index,
@@ -2873,6 +3007,24 @@ const TD = ({
       contentListInnerItem
     });
   };
+  const handleMouseEnter = (item, index) => {
+    setActionHover(() => {
+      return {
+        id: item.id,
+        type: item.type,
+        index
+      };
+    });
+  };
+  const handleMouseLeave = () => {
+    setActionHover(() => {
+      return {
+        id: '',
+        type: '',
+        index: -1
+      };
+    });
+  };
   return /*#__PURE__*/React__default.createElement("td", {
     style: {
       width: 'auto',
@@ -2907,8 +3059,10 @@ const TD = ({
         type: newItem.type,
         className: styles$a['td-span'],
         key: `${newItem.id}_${newIndex}`,
-        onClick: e => handleCheckActions(e, newItem, 'type', newIndex)
-      }, newItem.content === 0 ? newItem.content.toString() : newItem.content ? newItem.content : '');
+        onClick: e => handleCheckActions(e, newItem, 'type', newIndex),
+        onMouseEnter: () => handleMouseEnter(newItem, newIndex),
+        onMouseLeave: () => handleMouseLeave()
+      }, newItem.content === 0 ? newItem.content.toString() : newItem.contentHover && actionHover.id === newItem.id && actionHover.type === newItem.type && actionHover.index === newIndex ? newItem.contentHover : newItem.content ? newItem.content : '');
     } else if (newItem && Array.isArray(newItem)) {
       return /*#__PURE__*/React__default.createElement("span", {
         key: `${newItem.id}_${newIndex}`,
@@ -2928,9 +3082,11 @@ const TD = ({
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
           className: styles$a['td-span'],
-          onClick: e => handleCheckActions(e, iT, 'type', iN),
-          key: `${iT.id || iT.content}_${iN}`
-        }, iT.content === 0 ? iT.content.toString() : iT.content ? iT.content : '');
+          key: `${iT.id || iT.content}_${iN}`,
+          onMouseEnter: () => handleMouseEnter(iT, iN),
+          onMouseLeave: () => handleMouseLeave(),
+          onClick: e => handleCheckActions(e, iT, 'type', iN)
+        }, iT.content === 0 ? iT.content.toString() : iT.contentHover && actionHover.id === iT.id && actionHover.type === iT.type && actionHover.index === iN ? iT.contentHover : iT.content ? iT.content : '');
       }));
     } else {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -2995,7 +3151,7 @@ const TD = ({
       cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto',
       ...item.props
     },
-    onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
+    onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, collapseFullRow ? index : item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
   }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'block',
@@ -3042,7 +3198,7 @@ const TD = ({
       },
       title: optionItem.content
     }, optionItem.content === 0 ? optionItem.content.toString() : optionItem.content ? optionItem.content : ''));
-  }))) : ''), hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__default.createElement("div", {
+  }))) : ''), hasOwnerProperty(item, 'contentList') && !collapseFullRow && /*#__PURE__*/React__default.createElement("div", {
     style: {
       overflow: 'auto',
       marginTop: '10px',
@@ -3203,7 +3359,12 @@ const Table = ({
   draggableColor,
   getDraggableData,
   draggableItemBoxShadow,
-  draggableItemBackgroundColor
+  draggableItemBackgroundColor,
+  tableBorder,
+  tableBorderColor,
+  collapseFullRow,
+  openArrow,
+  closeArrow
 }) => {
   const itemRefs = useRef({});
   const headerRef = useRef(null);
@@ -3337,8 +3498,8 @@ const Table = ({
       status: 'close',
       checkIndex: null,
       arrowComponent: true,
-      openArrow: /*#__PURE__*/React__default.createElement(SvgUpArrow, null),
-      closeArrow: /*#__PURE__*/React__default.createElement(SvgDownArrow, null)
+      openArrow: openArrow ? openArrow : configStyles.TABLE?.openArrow ? configStyles.TABLE?.openArrow : /*#__PURE__*/React__default.createElement(SvgUpArrow, null),
+      closeArrow: closeArrow ? closeArrow : configStyles.TABLE?.closeArrow ? configStyles.TABLE?.closeArrow : /*#__PURE__*/React__default.createElement(SvgDownArrow, null)
     };
     if (type === 'body') {
       return data.map((item, index) => {
@@ -3502,6 +3663,49 @@ const Table = ({
       prev[rowPosition] = checkedOpenableRow;
       return [...prev];
     });
+    if (collapseFullRow) {
+      const newRows = [];
+      body[rowPosition].filter(newItem => hasOwnerProperty(newItem, 'contentList')).map((cfrItem, cfrIndex) => {
+        newRows[cfrIndex] = cfrItem.contentList;
+      });
+      const transformedArray = newRows && newRows[0] && newRows[0].map((_, index) => {
+        let result = [];
+        for (let i = 0; i < newRows.length; i++) {
+          result[i] = newRows[i][index];
+        }
+        return result;
+      });
+      if (transformedArray && transformedArray.length) {
+        const fakeData = transformedArray.map(fakeItem => {
+          fakeItem.unshift({
+            id: 'fake',
+            content: ''
+          });
+          fakeItem.push({
+            id: 'fake',
+            content: ''
+          });
+          return fakeItem;
+        });
+        if (status === 'close') {
+          let met = [...body];
+          setTimeout(() => {
+            setBody(() => {
+              met.splice(rowPosition + 1, 0, ...fakeData);
+              return met;
+            });
+          }, 0);
+        } else {
+          let met = [...body];
+          setTimeout(() => {
+            setBody(() => {
+              met.splice(rowPosition + 1, fakeData.length);
+              return met;
+            });
+          }, 0);
+        }
+      }
+    }
   };
   const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex, clickableItem) => {
     let single = {};
@@ -3542,6 +3746,7 @@ const Table = ({
   };
   const handleCheckArrowActionHeader = (e, item) => {
     e.stopPropagation();
+    let mergedArray = [];
     const checkedOpenableAllRows = header.map((innerItem, innerIndex) => {
       if (item.checkIndex === (draggable && !showOrder ? innerIndex - 1 : draggable && showOrder ? innerIndex - 2 : innerIndex)) {
         if (item.status === 'close') {
@@ -3564,8 +3769,52 @@ const Table = ({
         return iElem;
       });
     });
+    if (collapseFullRow) {
+      if (item.status === 'open') {
+        const newFakeBody = checkedOpenableAllRowsBody.map(bodyItem => {
+          let fakeData = [];
+          const newRows = [];
+          bodyItem.filter(newItem => hasOwnerProperty(newItem, 'contentList')).map((cfrItem, cfrIndex) => {
+            newRows[cfrIndex] = cfrItem.contentList;
+          });
+          const transformedArray = newRows && newRows[0] && newRows[0].map((_, index) => {
+            let result = [];
+            for (let i = 0; i < newRows.length; i++) {
+              result[i] = newRows[i][index];
+            }
+            return result;
+          });
+          if (transformedArray && transformedArray.length) {
+            fakeData = transformedArray.map(fakeItem => {
+              fakeItem.unshift({
+                id: 'fake',
+                content: ''
+              });
+              fakeItem.push({
+                id: 'fake',
+                content: ''
+              });
+              return fakeItem;
+            });
+          }
+          return fakeData;
+        });
+        if (newFakeBody && newFakeBody.length) {
+          checkedOpenableAllRowsBody.map((newBodyItem, newBodyIndex) => {
+            mergedArray.push(newBodyItem);
+            if (newFakeBody[newBodyIndex] && newFakeBody[newBodyIndex].length) {
+              newFakeBody[newBodyIndex].map(newFakeBodyItem => {
+                mergedArray.push(newFakeBodyItem);
+              });
+            }
+          });
+        }
+      } else {
+        mergedArray = checkedOpenableAllRowsBody.filter(realArray => !realArray.some(item => item.id === 'fake'));
+      }
+    }
     setHeader(() => checkedOpenableAllRows);
-    setBody(() => checkedOpenableAllRowsBody);
+    setBody(() => !collapseFullRow ? checkedOpenableAllRowsBody : mergedArray);
   };
   const handleCheckDots = (e, item, index, innerIndex) => {
     e.stopPropagation();
@@ -3834,8 +4083,11 @@ const Table = ({
   return configStyles.TABLE && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("table", {
     style: {
       width: '100%',
-      borderCollapse: tableRowItem ?? configStyles.TABLE.body.row.asItem ? 'separate' : 'collapse',
-      borderSpacing: `0 ${tBodyRowMarginTop ?? configStyles.TABLE.body.row.marginTop}`
+      borderRadius: tHeadBorderRadius ?? configStyles.TABLE.head.radius,
+      outline: hideBorder ? 'none' : tableBorder ?? configStyles.TABLE.border,
+      outlineColor: hideBorder ? 'none' : tableBorderColor ?? configStyles.TABLE.borderColor,
+      borderSpacing: `0 ${tBodyRowMarginTop ?? configStyles.TABLE.body.row.marginTop}`,
+      borderCollapse: tableRowItem ?? configStyles.TABLE.body.row.asItem ? 'separate' : 'collapse'
     },
     onClick: handleTableClick,
     className: classProps
@@ -3845,7 +4097,7 @@ const Table = ({
     style: {
       color: tHeadColor ?? configStyles.TABLE.head.color,
       backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
-      borderColor: hideBorder ? 'transparent' : '#eeeeee'
+      borderColor: hideBorder ? 'transparent' : tableBorderColor ?? configStyles.TABLE.borderColor
     }
   }, header.map((item, index) => {
     return /*#__PURE__*/React__default.createElement(TH, {
@@ -3922,7 +4174,8 @@ const Table = ({
         borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
         borderRightColor: innerIndex === Object.values(item).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor,
         handleCheckArrowAction: handleCheckArrowAction,
-        handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
+        handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow,
+        collapseFullRow: collapseFullRow
       });
     }));
   })) : '', body && body.length > 0 && draggable && dragging && draggedItem && /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
@@ -4014,7 +4267,12 @@ Table.propTypes = {
   openListFontStyle: PropTypes.string,
   openListFontWeight: PropTypes.string,
   openListFontFamily: PropTypes.string,
-  hideBorder: PropTypes.bool
+  hideBorder: PropTypes.bool,
+  collapseFullRow: PropTypes.bool,
+  tableBorder: PropTypes.string,
+  tableBorderColor: PropTypes.string,
+  openArrow: PropTypes.element,
+  closeArrow: PropTypes.element
 };
 
 var css_248z$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
@@ -4614,6 +4872,7 @@ const TelInput = ({
     disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
+    className: "tui-color-placeholder",
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
     style: {
@@ -4666,6 +4925,7 @@ const TextInput = ({
     disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
+    className: "tui-color-placeholder",
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
     style: {
@@ -4724,6 +4984,7 @@ const PassInput = ({
     disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
+    className: "tui-color-placeholder",
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
     style: {
@@ -4766,7 +5027,11 @@ const NumberInput = ({
     currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
     if (cardNumber) {
       let digits = currentValue.replace(/\D/g, '');
-      setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+      if (digits.length <= 16) {
+        setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+      } else {
+        setInnerValue(() => digits.substring(0, 16).replace(/(\d{4})(?=\d)/g, '$1-'));
+      }
     } else {
       setInnerValue(() => currentValue);
     }
@@ -4844,7 +5109,11 @@ const NumberInput = ({
     }
     if (cardNumber) {
       let digits = newValue.replace(/\D/g, '');
-      setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+      if (digits.length <= 16) {
+        setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+      } else {
+        setInnerValue(() => digits.substring(0, 16).replace(/(\d{4})(?=\d)/g, '$1-'));
+      }
     } else {
       setInnerValue(() => newValue);
     }
@@ -4855,6 +5124,7 @@ const NumberInput = ({
     value: innerValue,
     disabled: disabled,
     name: inpAttributes?.iName,
+    className: "tui-color-placeholder",
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
     style: {
@@ -4960,6 +5230,7 @@ const Input = ({
   numberMaxLength,
   backgroundColor,
   errorIconMargin,
+  placeholderColor,
   withZero = false,
   labelMarginBottom,
   regexpErrorMessage,
@@ -5074,7 +5345,9 @@ const Input = ({
   }, []);
   return configStyles.INPUT && /*#__PURE__*/React__default.createElement("div", {
     className: classProps
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, /*#__PURE__*/React__default.createElement("style", null, `.tui-color-placeholder::placeholder {
+                            color: ${placeholderColor ?? configStyles.INPUT.colors.placeholder};
+                        }`), label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       maxWidth: '100%',
       color: labelColor ?? configStyles.INPUT.label.color,
@@ -5302,6 +5575,7 @@ Input.propTypes = {
   labelMarginBottom: PropTypes.string,
   borderRight: PropTypes.string,
   placeholder: PropTypes.string,
+  placeholderColor: PropTypes.string,
   phoneDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
   errorDots: PropTypes.bool,
@@ -6853,7 +7127,7 @@ const Stepper = ({
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
-      steppers.push( /*#__PURE__*/React__default.createElement("div", {
+      steppers.push(/*#__PURE__*/React__default.createElement("div", {
         className: classnames(`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
         key: step
       }, /*#__PURE__*/React__default.createElement("div", {