@xaypay/tui 0.2.13 → 0.2.14

package/dist/index.es.js

@@ -521,6 +521,7 @@ var packageResult = {
       ...fontObject
     },
     label: {
+      dots: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -1148,6 +1149,12 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    draggable: {
+      boxShadow: '1px 1px 9px black',
+      color: {
+        background: 'white'
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1730,19 +1737,19 @@ const File = /*#__PURE__*/forwardRef(({
             setError('');
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
-              change(file[0]);
-              setSingleFile(file[0]);
+              change(file);
+              setSingleFile(file);
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
               handleCheckHeicFormat(file[0]).then(() => {
                 setImage('heic');
-                change(file[0]);
-                setSingleFile(file[0]);
+                change(file);
+                setSingleFile(file);
               }).catch(() => {
                 setImage(null);
                 setError(formatError ?? configStyles.FILE.error.format);
               });
             } else {
-              change(file[0]);
+              change(file);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -2351,7 +2358,7 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   }
   return val;
 };
-const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength) => {
   if (maxLength && maxLength > 0) {
     if (val.length > maxLength) {
       val = val.substr(0, maxLength);
@@ -2361,6 +2368,9 @@ const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumS
     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];
@@ -2505,16 +2515,16 @@ const TD = ({
   item,
   index,
   rowItem,
+  dragged,
+  dragEnd,
   rowRadius,
   dragStart,
-  handleMouseDown,
   hideBorder,
   innerIndex,
   tBodyColor,
   orderColor,
   borderRight,
   tBodyPadding,
-  setIsDragging,
   orderFontSize,
   tBodyFontSize,
   openListColor,
@@ -2664,7 +2674,9 @@ const TD = ({
       height: '24px',
       cursor: 'grab'
     },
-    onDragStart: () => dragStart(index)
+    onDrag: dragged,
+    onDragEnd: dragEnd,
+    onDragStart: e => dragStart(e, index, row)
   }, /*#__PURE__*/React__default.createElement("img", {
     src: img$1,
     alt: "drag"
@@ -2904,8 +2916,11 @@ const Table = ({
   draggable,
   showOrder,
   draggableColor,
-  getDraggableData
+  getDraggableData,
+  draggableItemBoxShadow,
+  draggableItemBackgroundColor
 }) => {
+  const itemRefs = useRef({});
   const headerRef = useRef(null);
   const draggedRowIndex = useRef(null);
   const [body, setBody] = useState([]);
@@ -2915,8 +2930,12 @@ const Table = ({
   const [checkDrag, setCheckDrag] = useState(false);
   const [checkedArray, setCheckedArray] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
-  useState(false);
-  const [draggingIndex, setDraggingIndex] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const [draggedItem, setDraggedItem] = useState(null);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3053,6 +3072,7 @@ const Table = ({
     }
   };
   const handleCheckedHeader = (data, e) => {
+    console.log('ok - - - - - - - ');
     e.stopPropagation();
     let removeItemIndex;
     let checkableItemBool;
@@ -3323,11 +3343,19 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
-  const handleDragStart = index => {
+  const handleDragStart = (e, index, row) => {
+    setDragging(true);
+    setDraggedItem(row);
     draggedRowIndex.current = index;
-    setDraggingIndex(() => index);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
   };
-  const handleDrop = index => {
+  const handleDrag = e => {
+    setPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  const handleDrop = (e, index) => {
     let correctData = [];
     const newRows = body;
     const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
@@ -3339,8 +3367,20 @@ const Table = ({
     getDraggableData && getDraggableData(correctData);
     setCheckDrag(prev => !prev);
     draggedRowIndex.current = null;
-    setDraggingIndex(() => null);
     correctData = null;
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const handleDragEnd = e => {
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const setRef = (index, element) => {
+    if (element) {
+      itemRefs.current[index] = element;
+    }
   };
   useEffect(() => {
     const draggableArray = body && body.length && body.map((item, index) => {
@@ -3545,22 +3585,24 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default.createElement("tr", {
-      onDragStart: () => handleDragStart(index),
       onDragOver: e => e.preventDefault(),
-      onDrop: () => handleDrop(index),
+      onDrop: e => handleDrop(e, index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
         borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.body.row.border,
         borderColor: hideBorder ? 'transparent' : configStyles.TABLE.body.row.borderColor,
         boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.body.row.box.shadow : 'none'
-      }
+      },
+      ref: el => setRef(index, el)
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default.createElement(TD, {
         index: index,
         item: innerItem,
+        dragged: handleDrag,
         hideBorder: hideBorder,
         innerIndex: innerIndex,
+        dragEnd: handleDragEnd,
         row: Object.values(item),
         dragStart: handleDragStart,
         id: item.id ? item.id : '',
@@ -3596,6 +3638,52 @@ const Table = ({
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
+  })), draggable && dragging && draggedItem && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'fixed',
+      top: `${position.y - 30}px`,
+      left: `${position.x - 30}px`,
+      borderSpacing: '0px',
+      pointerEvents: 'none',
+      height: 'fit-content',
+      blockSize: 'fit-content',
+      borderRadius: tableRowItem ? tableRowRadius ?? configStyles.TABLE.body.row.radius : '0px',
+      boxShadow: draggableItemBoxShadow ?? configStyles.TABLE.draggable.boxShadow,
+      backgroundColor: draggableItemBackgroundColor ?? configStyles.TABLE.draggable.color.background
+    }
+  }, draggedItem.map((innerItem, innerIndex) => {
+    return /*#__PURE__*/React__default.createElement(TD, {
+      item: innerItem,
+      dragged: handleDrag,
+      hideBorder: hideBorder,
+      innerIndex: innerIndex,
+      row: Object.values(draggedItem),
+      dragStart: handleDragStart,
+      handleCheckDots: handleCheckDots,
+      key: `${innerItem}__${innerIndex}`,
+      openListColor: openListColor ?? configStyles.TABLE.openList.color,
+      tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth,
+      openListFontSize: openListFontSize ?? configStyles.TABLE.openList.font.size,
+      openListFontStyle: openListFontStyle ?? configStyles.TABLE.openList.font.style,
+      openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
+      openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
+      tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
+      orderColor: orderColor ?? configStyles.TABLE.order.color,
+      rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
+      tBodyPadding: tBodyPadding ?? configStyles.TABLE.body.padding,
+      tBodyTextAlign: tBodyTextAlign ?? configStyles.TABLE.textAlign,
+      rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
+      tBodyFontSize: tBodyFontSize ?? configStyles.TABLE.body.font.size,
+      orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+      orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+      tBodyFontFamily: tBodyFontFamily ?? configStyles.TABLE.body.font.family,
+      tBodyFontWeight: tBodyFontWeight ?? configStyles.TABLE.body.font.weight,
+      orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+      orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
+      borderRight: innerIndex === Object.values(draggedItem).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
+      borderRightColor: innerIndex === Object.values(draggedItem).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor
+    });
   })));
 };
 Table.propTypes = {
@@ -4308,6 +4396,7 @@ const NumberInput = ({
   value,
   float,
   radius,
+  withZero,
   disabled,
   inpStyles,
   minNumSize,
@@ -4315,6 +4404,7 @@ const NumberInput = ({
   insideError,
   inputChange,
   inpAttributes,
+  numberMaxLength,
   setInnerErrorMessage
 }) => {
   const [innerValue, setInnerValue] = useState('');
@@ -4322,7 +4412,7 @@ const NumberInput = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
-    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots);
+    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     setInnerValue(() => currentValue);
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
@@ -4352,11 +4442,13 @@ const NumberInput = ({
     }
   };
   const handleBlur = () => {
-    const newVal = handleRemoveLeadingZeros(innerValue);
-    if (parseFloat(newVal) === 0) {
-      inputChange('');
-    } else {
-      inputChange(newVal);
+    if (!withZero) {
+      const newVal = handleRemoveLeadingZeros(innerValue);
+      if (parseFloat(newVal) === 0) {
+        inputChange('');
+      } else {
+        inputChange(newVal);
+      }
     }
   };
   useEffect(() => {
@@ -4373,10 +4465,10 @@ const NumberInput = ({
   useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots);
+      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     }
     setInnerValue(() => newValue);
-  }, [dots, value, float, maxNumSize, minNumSize]);
+  }, [dots, value, float, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default.createElement("input", {
     type: "text",
     value: innerValue,
@@ -4429,6 +4521,7 @@ const Input = ({
   leftIcon,
   required,
   disabled,
+  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -4462,7 +4555,9 @@ const Input = ({
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
+  numberMaxLength,
   backgroundColor,
+  withZero = false,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -4554,6 +4649,7 @@ const Input = ({
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
+      maxWidth: '100%',
       color: labelColor ?? configStyles.INPUT.label.color,
       fontSize: labelSize ?? configStyles.INPUT.label.font.size,
       fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
@@ -4561,8 +4657,12 @@ const Input = ({
       fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
       lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
-      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family
-    }
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      whiteSpace: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'nowrap' : 'normal',
+      overflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'hidden' : 'visible',
+      textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
+    },
+    title: label
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['input-content']}`,
     style: {
@@ -4608,9 +4708,11 @@ const Input = ({
     value: innerValue,
     float: floatToFix,
     disabled: disabled,
+    withZero: withZero,
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    numberMaxLength: numberMaxLength,
     insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
@@ -4672,18 +4774,20 @@ const Input = ({
 Input.propTypes = {
   size: PropTypes.string,
   name: PropTypes.string,
-  style: PropTypes.string,
-  weight: PropTypes.string,
-  family: PropTypes.string,
   change: PropTypes.func,
+  style: PropTypes.string,
   color: PropTypes.string,
   width: PropTypes.string,
   label: PropTypes.string,
+  withZero: PropTypes.bool,
+  weight: PropTypes.string,
+  family: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   height: PropTypes.string,
   radius: PropTypes.string,
   padding: PropTypes.string,
+  labelDots: PropTypes.bool,
   tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
   className: PropTypes.string,
@@ -4720,6 +4824,7 @@ Input.propTypes = {
   phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
   labelLineHeight: PropTypes.string,
+  numberMaxLength: PropTypes.number,
   labelMarginBottom: PropTypes.string,
   regexpErrorMessage: PropTypes.string,
   regexp: PropTypes.instanceOf(RegExp),

package/dist/index.js

@@ -552,6 +552,7 @@ var packageResult = {
       ...fontObject
     },
     label: {
+      dots: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -1179,6 +1180,12 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    draggable: {
+      boxShadow: '1px 1px 9px black',
+      color: {
+        background: 'white'
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1761,19 +1768,19 @@ const File = /*#__PURE__*/React.forwardRef(({
             setError('');
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
-              change(file[0]);
-              setSingleFile(file[0]);
+              change(file);
+              setSingleFile(file);
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
               handleCheckHeicFormat(file[0]).then(() => {
                 setImage('heic');
-                change(file[0]);
-                setSingleFile(file[0]);
+                change(file);
+                setSingleFile(file);
               }).catch(() => {
                 setImage(null);
                 setError(formatError ?? configStyles.FILE.error.format);
               });
             } else {
-              change(file[0]);
+              change(file);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -2382,7 +2389,7 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   }
   return val;
 };
-const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength) => {
   if (maxLength && maxLength > 0) {
     if (val.length > maxLength) {
       val = val.substr(0, maxLength);
@@ -2392,6 +2399,9 @@ const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumS
     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];
@@ -2536,16 +2546,16 @@ const TD = ({
   item,
   index,
   rowItem,
+  dragged,
+  dragEnd,
   rowRadius,
   dragStart,
-  handleMouseDown,
   hideBorder,
   innerIndex,
   tBodyColor,
   orderColor,
   borderRight,
   tBodyPadding,
-  setIsDragging,
   orderFontSize,
   tBodyFontSize,
   openListColor,
@@ -2695,7 +2705,9 @@ const TD = ({
       height: '24px',
       cursor: 'grab'
     },
-    onDragStart: () => dragStart(index)
+    onDrag: dragged,
+    onDragEnd: dragEnd,
+    onDragStart: e => dragStart(e, index, row)
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: img$1,
     alt: "drag"
@@ -2935,8 +2947,11 @@ const Table = ({
   draggable,
   showOrder,
   draggableColor,
-  getDraggableData
+  getDraggableData,
+  draggableItemBoxShadow,
+  draggableItemBackgroundColor
 }) => {
+  const itemRefs = React.useRef({});
   const headerRef = React.useRef(null);
   const draggedRowIndex = React.useRef(null);
   const [body, setBody] = React.useState([]);
@@ -2946,8 +2961,12 @@ const Table = ({
   const [checkDrag, setCheckDrag] = React.useState(false);
   const [checkedArray, setCheckedArray] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
-  React.useState(false);
-  const [draggingIndex, setDraggingIndex] = React.useState(null);
+  const [dragging, setDragging] = React.useState(false);
+  const [draggedItem, setDraggedItem] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3084,6 +3103,7 @@ const Table = ({
     }
   };
   const handleCheckedHeader = (data, e) => {
+    console.log('ok - - - - - - - ');
     e.stopPropagation();
     let removeItemIndex;
     let checkableItemBool;
@@ -3354,11 +3374,19 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
-  const handleDragStart = index => {
+  const handleDragStart = (e, index, row) => {
+    setDragging(true);
+    setDraggedItem(row);
     draggedRowIndex.current = index;
-    setDraggingIndex(() => index);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
   };
-  const handleDrop = index => {
+  const handleDrag = e => {
+    setPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  const handleDrop = (e, index) => {
     let correctData = [];
     const newRows = body;
     const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
@@ -3370,8 +3398,20 @@ const Table = ({
     getDraggableData && getDraggableData(correctData);
     setCheckDrag(prev => !prev);
     draggedRowIndex.current = null;
-    setDraggingIndex(() => null);
     correctData = null;
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const handleDragEnd = e => {
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const setRef = (index, element) => {
+    if (element) {
+      itemRefs.current[index] = element;
+    }
   };
   React.useEffect(() => {
     const draggableArray = body && body.length && body.map((item, index) => {
@@ -3576,22 +3616,24 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
-      onDragStart: () => handleDragStart(index),
       onDragOver: e => e.preventDefault(),
-      onDrop: () => handleDrop(index),
+      onDrop: e => handleDrop(e, index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
         borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.body.row.border,
         borderColor: hideBorder ? 'transparent' : configStyles.TABLE.body.row.borderColor,
         boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.body.row.box.shadow : 'none'
-      }
+      },
+      ref: el => setRef(index, el)
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default["default"].createElement(TD, {
         index: index,
         item: innerItem,
+        dragged: handleDrag,
         hideBorder: hideBorder,
         innerIndex: innerIndex,
+        dragEnd: handleDragEnd,
         row: Object.values(item),
         dragStart: handleDragStart,
         id: item.id ? item.id : '',
@@ -3627,6 +3669,52 @@ const Table = ({
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
+  })), draggable && dragging && draggedItem && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'fixed',
+      top: `${position.y - 30}px`,
+      left: `${position.x - 30}px`,
+      borderSpacing: '0px',
+      pointerEvents: 'none',
+      height: 'fit-content',
+      blockSize: 'fit-content',
+      borderRadius: tableRowItem ? tableRowRadius ?? configStyles.TABLE.body.row.radius : '0px',
+      boxShadow: draggableItemBoxShadow ?? configStyles.TABLE.draggable.boxShadow,
+      backgroundColor: draggableItemBackgroundColor ?? configStyles.TABLE.draggable.color.background
+    }
+  }, draggedItem.map((innerItem, innerIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement(TD, {
+      item: innerItem,
+      dragged: handleDrag,
+      hideBorder: hideBorder,
+      innerIndex: innerIndex,
+      row: Object.values(draggedItem),
+      dragStart: handleDragStart,
+      handleCheckDots: handleCheckDots,
+      key: `${innerItem}__${innerIndex}`,
+      openListColor: openListColor ?? configStyles.TABLE.openList.color,
+      tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth,
+      openListFontSize: openListFontSize ?? configStyles.TABLE.openList.font.size,
+      openListFontStyle: openListFontStyle ?? configStyles.TABLE.openList.font.style,
+      openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
+      openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
+      tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
+      orderColor: orderColor ?? configStyles.TABLE.order.color,
+      rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
+      tBodyPadding: tBodyPadding ?? configStyles.TABLE.body.padding,
+      tBodyTextAlign: tBodyTextAlign ?? configStyles.TABLE.textAlign,
+      rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
+      tBodyFontSize: tBodyFontSize ?? configStyles.TABLE.body.font.size,
+      orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+      orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+      tBodyFontFamily: tBodyFontFamily ?? configStyles.TABLE.body.font.family,
+      tBodyFontWeight: tBodyFontWeight ?? configStyles.TABLE.body.font.weight,
+      orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+      orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
+      borderRight: innerIndex === Object.values(draggedItem).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
+      borderRightColor: innerIndex === Object.values(draggedItem).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor
+    });
   })));
 };
 Table.propTypes = {
@@ -4339,6 +4427,7 @@ const NumberInput = ({
   value,
   float,
   radius,
+  withZero,
   disabled,
   inpStyles,
   minNumSize,
@@ -4346,6 +4435,7 @@ const NumberInput = ({
   insideError,
   inputChange,
   inpAttributes,
+  numberMaxLength,
   setInnerErrorMessage
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
@@ -4353,7 +4443,7 @@ const NumberInput = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
-    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots);
+    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     setInnerValue(() => currentValue);
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
@@ -4383,11 +4473,13 @@ const NumberInput = ({
     }
   };
   const handleBlur = () => {
-    const newVal = handleRemoveLeadingZeros(innerValue);
-    if (parseFloat(newVal) === 0) {
-      inputChange('');
-    } else {
-      inputChange(newVal);
+    if (!withZero) {
+      const newVal = handleRemoveLeadingZeros(innerValue);
+      if (parseFloat(newVal) === 0) {
+        inputChange('');
+      } else {
+        inputChange(newVal);
+      }
     }
   };
   React.useEffect(() => {
@@ -4404,10 +4496,10 @@ const NumberInput = ({
   React.useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots);
+      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     }
     setInnerValue(() => newValue);
-  }, [dots, value, float, maxNumSize, minNumSize]);
+  }, [dots, value, float, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
@@ -4460,6 +4552,7 @@ const Input = ({
   leftIcon,
   required,
   disabled,
+  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -4493,7 +4586,9 @@ const Input = ({
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
+  numberMaxLength,
   backgroundColor,
+  withZero = false,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -4585,6 +4680,7 @@ const Input = ({
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
+      maxWidth: '100%',
       color: labelColor ?? configStyles.INPUT.label.color,
       fontSize: labelSize ?? configStyles.INPUT.label.font.size,
       fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
@@ -4592,8 +4688,12 @@ const Input = ({
       fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
       lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
-      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family
-    }
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      whiteSpace: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'nowrap' : 'normal',
+      overflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'hidden' : 'visible',
+      textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
+    },
+    title: label
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['input-content']}`,
     style: {
@@ -4639,9 +4739,11 @@ const Input = ({
     value: innerValue,
     float: floatToFix,
     disabled: disabled,
+    withZero: withZero,
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    numberMaxLength: numberMaxLength,
     insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
@@ -4703,18 +4805,20 @@ const Input = ({
 Input.propTypes = {
   size: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].string,
-  family: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
+  withZero: PropTypes__default["default"].bool,
+  weight: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   height: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
+  labelDots: PropTypes__default["default"].bool,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -4751,6 +4855,7 @@ Input.propTypes = {
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
+  numberMaxLength: PropTypes__default["default"].number,
   labelMarginBottom: PropTypes__default["default"].string,
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -1,3 +1,4 @@
+import { background } from '@storybook/theming';
 import React from 'react'
 
 const boxSizing = 'border-box';
@@ -97,6 +98,7 @@ export default {
         font: {...fontObject},
         
         label: {
+            dots: false,
             color: presetColors.dark,
             display: 'block',
             lineHeight: '22px',
@@ -772,6 +774,13 @@ export default {
         order: {
             color: '#000',
             font: {...fontObject}
+        },
+
+        draggable: {
+            boxShadow: '1px 1px 9px black',
+            color: {
+                background: 'white'
+            }
         }
     },
     // default properties for <Pagination /> component