@xaypay/tui 0.2.27 → 0.2.29

package/CHANGELOG.md

@@ -0,0 +1,360 @@
+# Changelog
+
+All notable changes to `@xaypay/tui` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.27] - 2025-11-05
+
+### Added
+- **SWIPEMODAL** Update title possibility in SwipeModal component with updateTitle function, need two params title and id
+- **FILE** ExtentionsTextDots props on FILE component
+- **FILE** New props on FILE component: lableShowMore, labelShowLessText, labelShowMoreText, showMoreTextColor
+- **MODAL** NoScroll props on MODAL config
+- **SWIPEMODAL** NoScroll config props on SWIPEMODAL
+
+### Fixed
+- **TABLE** Drag and drop functionality when draggable is false
+- **FILE** Extentions color
+
+## [0.2.26] - 2025-08-21
+
+### Added
+- **ACCORDION** CloseHoverIcon props on accordion component
+- **FILE** Exist color prop on extensions text
+- **INPUT, AUTOCOMPLETE, FILE, SELECT, TEXTAREA** UseLabelTooltip props on INPUT, AUTOCOMPLETE, FILE, SELECT, TEXTAREA components
+- **FILE** ExtentionsTextColor props on FILE component
+- **INPUT, SELECT, TEXTAREA, AUTOCOMPLETE** Tooltip functionality on INPUT, SELECT, TEXTAREA, AUTOCOMPLETE components, like as FILE component tooltip
+- **SELECT** Placeholder color to select component
+
+### Removed
+- **INPUT** LabelDots props from INPUT component
+
+## [0.2.25] - 2025-07-22
+
+### Changed
+- **SWIPEMODAL** Update SwipeModal old version
+
+### Added
+- **SELECT** ErrorIcon and showErrorIcon props on Select component
+- **FILE** SVG icon on File component
+- **TABLE** ClickableRowColumnTd prop on Table component
+- **MODAL** CloseIconFix, closeIconTopPosition, closeIconRightPosition props
+- **MODAL** Correction: close Icon on Modal
+
+## [0.2.24] - 2025-07-03
+
+### Fixed
+- **FILE** File component fake clear files
+- **FILE** File tooltip
+
+### Removed
+- Console logs
+
+## [0.2.23] - 2025-06-27
+
+### Added
+- **FILE** Tooltip on label in FILE component
+- **FILE** Error icon on FILE component
+- **FILE** Possibility to set text align to left on FILE component
+- **INPUT** Placeholder color on INPUT component
+- **TABLE** Hover possibility on TABLE component actions, add contentHover prop in data structure
+
+## [0.2.22] - 2025-06-23
+
+### Changed
+- **TABLE** Table border set style
+
+### Added
+- **TABLE** TableBorderColor prop
+- **TABLE** Open close arrow icons on table component
+- **TABLE** New functionality on table, to collapse full row
+- **TABLE** CollapseFullRow and tableBorder props
+- **TABLE** Implement collapse all table in collapseFullRow mode
+
+### Fixed
+- **INPUT** Input with cardNumber copy and paste long numbers
+- **INPUT** Input with cardNumber prop bug (type after num length 16)
+- **INPUT** InputMode attribute on input number for open numeric mode keyboard browser detect mobile device
+- **FILE** ShowPreviewIconInSmallComponent prop on file component for show icon if needed
+
+## [0.2.21] - 2025-06-05
+
+### Added
+- **INPUT** ClassName to input type tel, for number code
+
+## [0.2.20] - 2025-05-16
+
+### Added
+- **MODAL** CloseIconClass prop and className in MODAL.icon
+- **MODAL** Set header icon on modal component
+
+## [0.2.19] - 2025-04-08
+
+### Fixed
+- **MODAL** Header close icon position
+- **FILE** Show single file name
+
+## [0.2.18] - 2025-03-31
+
+### Fixed
+- **FILE** File choose rollback
+
+### Added
+- **MODAL** No data on body message
+- Hide unnecessary border
+- **FILE** Doc and docx file upload possibility on File component
+
+## [0.2.17] - 2025-02-27
+
+### Added
+- **MODAL** Possibility to add icon on modal component in header
+- **MODAL** Add props
+
+## [0.2.16] - 2025-02-18
+
+### Changed
+- **SWIPEMODAL** Swipe modal usage
+
+### Added
+- **TEXTAREA** Remove required field from Textarea onChange
+- **TEXTAREA** Add name on Textarea
+- **SWIPEMODAL** Check react root element for swipe modal
+- **SWIPEMODAL** Check width with percentage
+
+### Fixed
+- **INPUT** ErrorMessage input type number with cardNumber prop
+
+## [0.2.15] - 2025-01-17
+
+### Fixed
+- **TABLE** Table draggable rerender
+
+### Added
+- **SELECT** Prop on select for rotate arrow
+- **INPUT** SSN to input type text
+
+## [0.2.14] - 2025-01-04
+
+### Changed
+- **INPUT** Input number cardnumber
+- **INPUT** Input number
+- **INPUT** Input error border color logic
+- **SELECT** Inline style position in select component
+- **ACCORDION** Accordion prop
+- **RADIO** Radio component
+- **FILE** File component sendBack file functionality
+- **INPUT** Input maxLength logic, also get from config
+- **INPUT** Input max and min numSize logic
+- **TABLE** Margins in table for legal project
+- **TOASTER** Deprecated findDOMNode to ref
+
+### Added
+- **ACCORDION** OpenHoverIcon on accordion component
+- **SELECT** Lang prop on select
+- **SELECT** Set select icon width
+- **INPUT** Add styles on goTo input
+- **INPUT** CardNumber on input component
+- **RADIO** Label hover color on radio component
+- **ACCORDION** Create accordion component
+- **PAGINATION** Fix pagination and add offset select
+- **PAGINATION** Add select into pagination
+- **MODAL** ShowCloseIcon and headerTextAlign props into modal component
+- **INPUT** IconPadding prop on input component
+- **TABLE** Refactor table for draggable td
+- **TEXTAREA, SWIPEMODAL** Refactor textarea and swipemodal
+- **SWIPEMODAL** Add showCloseIcon on swipe modal
+- **INPUT** Add icons for input label and error
+- **TOOLTIP** New positions on tooltip component
+- **TOOLTIP** Add functionality to open tooltip with hover
+- **SWIPEMODAL** Create swipe modal component
+- **SWIPEMODAL** SwipeModal: over functionality
+- **BUTTON** New requirements on BUTTON component, can choose left/right icon side, without styling prop for hide border and background color
+- **TOASTER** Customization functionality on Toaster component, add opportunity to add custom icons
+- **TABLE** Dnd on table component
+- **INPUT** LabelDots prop into config
+- **INPUT** Props on input type number (labelDots, withZero, numberMaxLength)
+- **INPUT** Type tel functionality
+- **INPUT** Functionality on input type number to remove unnecessary 0
+- **MODAL** Change slides in modal with arrows keys
+- **SELECT** Select: solve open options
+- **MODAL** Default loader in modal component
+- **INPUT** Resolve input type number float with dot and comma
+
+### Fixed
+- **MODAL** Modal outsideClose logic
+- **ACCORDION** Accordion opened color
+- **INPUT** Input type number with cardNumber prop
+- **MODAL** Modal close icon size
+- **INPUT** Input inner error
+- **FILE** File component logic in single mode
+- **FILE, TABLE** Heic format, table drag drop
+- **FILE** Check heic file format on windows os
+- **TOASTER** Toaster center in mobile
+- **TOASTER** Toaster exist before render
+
+## [0.2.13] - 2024-06-28
+
+### Changed
+- **ALL** Import export configs for all components
+- **ALL** Remove all defaultProps from all components, set in params (version less v0.2.2)
+- **CORE** Utils from project to core
+
+## [0.2.12] - 2024-06-25
+
+### Changed
+- **ALL** Import export configs for all components
+- **ALL** Remove all defaultProps from all components, set in params (version less v0.2.2)
+
+## [0.2.11] - 2024-06-12
+
+### Changed
+- **BUILD** Pin node version in volta
+
+## [0.2.10] - 2024-05-20
+
+### Changed
+- **BUILD** Merge branch 'new-node-version'
+
+## [0.2.9] - 2024-05-16
+
+### Changed
+- **BUILD** Test version of build-lib
+
+## [0.2.8] - 2024-05-13
+
+### Changed
+- **BUILD** Package json version update
+- **BUILD** Temp commit with node new version
+
+## [0.2.7] - 2024-03-04
+
+### Changed
+- **DOCS** Changelog for 0.1.6 version
+
+## [0.2.6] - 2024-01-16
+
+### Changed
+- **DOCS** Change changelog for new version
+
+## [0.2.5] - 2024-01-15
+
+### Changed
+- **DOCS** Changelog: Add new version
+
+## [0.2.4] - 2023-02-26
+
+### Changed
+- **BUILD** Merge with master, check version in package json, resolve conflicts
+
+### Fixed
+- **INPUT** Resolve value type, add Proptypes.number, check it to transform to string
+
+## [0.2.3] - 2023-02-11
+
+### Changed
+- **BUILD** Change webpack version from 4 to 5 for build storybook
+
+### Fixed
+- **CHECKBOX** Resolve config imports in singlecheckbox
+
+## [0.2.2] - 2023-02-11
+
+### Changed
+- **ALL** Import export configs for all components
+- **ALL** Remove all defaultProps from all components, set in params
+
+## [0.2.1] - Previous
+
+### Added
+- **ALL** Initial features and components
+
+## [0.2.0] - Previous
+
+### Added
+- **TUI** Major release with component library structure
+- **TUI** Refactor configuration new styles
+- **TUI** Code optimization
+- **TUI** Hotfix
+
+## [0.1.10] - Previous
+
+### Added
+- Previous version features
+
+## [0.1.9] - Previous
+
+### Added
+- Previous version features
+
+## [0.1.8] - Previous
+
+### Added
+- **FILE** Add functionality for reset error message in single mode (using ref from project)
+
+### Fixed
+- **MODAL** Fix Modal body alignment
+
+## [0.1.7] - Previous
+
+### Fixed
+- **BUILD** Fix build problem
+
+## [0.1.6] - Previous
+
+### Fixed
+- **TEXTAREA** Fix Textarea typing problem
+
+## [0.1.5] - Previous
+
+### Added
+- **INPUT** Split as components through propTypes
+- **MODAL** Add prop for head background color with type content
+
+### Changed
+- **AUTOCOMPLETE** Change typing logic for change prop function
+- **TEXTAREA** Change error message show logic
+
+## [0.1.4] - Previous
+
+### Fixed
+- **INPUT** Fix error animation, maxLength prop
+- **INPUT** Fix key. Random to uuid
+
+### Changed
+- **INPUT** Deprecated props and configs of animation, transform and animationDuration
+
+## [0.1.3] - Previous
+
+### Changed
+- **INPUT** Optimization code and structure
+
+## [0.1.2] - Previous
+
+### Added
+- **TABLE** Add possibility on table to set content list item as array
+
+### Changed
+- **INPUT** Change type tel show message when typing
+
+## [0.1.1] - Previous
+
+### Changed
+- **INPUT** Change telErrorMessage to errorMessage
+
+### Fixed
+- **TEXTAREA** Fix textarea errorMessage
+- **MODAL** Fix max height and width
+
+## [0.1.0] - Previous
+
+### Added
+- **TUI** Refactor configuration new styles
+- **TUI** Code optimization
+- **TUI** Hotfix
+
+---
+
+_Note: Versions 0.0.119 through 0.0.123 contain additional component changes. Please refer to git history for those versions._
+

package/dist/index.es.js

@@ -2535,11 +2535,11 @@ const File = /*#__PURE__*/forwardRef(({
       overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
       textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
     }
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 ", ' ', /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, "(", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$b['small-file-component'],
     style: {
       width: '100%',
@@ -2584,11 +2584,20 @@ const File = /*#__PURE__*/forwardRef(({
       overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
       textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
     }
-  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default.createElement("span", {
+  }, singleFile && singleFile[`${0}`] ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      display: 'inline-block',
+      width: `calc(${maxWidth ?? configStyles.FILE.maxWidth} - 140px)`,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textAlign: 'right'
+    }
+  }, singleFile[`${0}`].name) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 ", ' ', /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")")))))), /*#__PURE__*/React__default.createElement("div", {
+  }, "(", fileExtensions.toString().split(',').join(', '), ")")))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4706,6 +4715,9 @@ const Modal = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  function ResetTouchRemove(e) {
+    e.preventDefault();
+  }
   useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -4749,6 +4761,9 @@ const Modal = ({
         document.head.appendChild(style);
         document.body.classList.add('tui-no-srcoll-class');
         document.documentElement.classList.add('tui-no-srcoll-class');
+        document.documentElement.addEventListener('touchmove', ResetTouchRemove, {
+          passive: false
+        });
       }
       setClassProps(() => classnames(className ?? data.MODAL.className));
       setConfigStyles(() => {
@@ -4768,6 +4783,7 @@ const Modal = ({
           style.remove();
           document.body.classList.remove('tui-no-srcoll-class');
           document.documentElement.classList.remove('tui-no-srcoll-class');
+          document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
         }
       }
       document.removeEventListener('keydown', e => {
@@ -8462,7 +8478,7 @@ const Swipe = ({
   }, child));
 };
 
-var css_248z$2 = "body.swipe-module_tui-no-srcoll-class__YS9cI,html.swipe-module_tui-no-srcoll-class__YS9cI{height:100%;overflow:hidden!important}.swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
+var css_248z$2 = "body.swipe-module_tui-no-srcoll-class__YS9cI,html.swipe-module_tui-no-srcoll-class__YS9cI{height:100%;overflow:hidden!important;overscroll-behavior:none!important}.swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
 var styles$2 = {"tui-no-srcoll-class":"swipe-module_tui-no-srcoll-class__YS9cI","to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
 styleInject(css_248z$2);
 
@@ -8566,6 +8582,9 @@ const handleNavigationChange = () => {
   };
 })(window.history);
 const style = document.createElement('style');
+function ResetTouchRemove(e) {
+  e.preventDefault();
+}
 const swipe = {
   open: (title = '', id, child, props) => {
     let newConfigStyles = {};
@@ -8583,6 +8602,9 @@ const swipe = {
           document.head.appendChild(style);
           document.body.classList.add('tui-no-srcoll-class');
           document.documentElement.classList.add('tui-no-srcoll-class');
+          document.documentElement.addEventListener('touchmove', ResetTouchRemove, {
+            passive: false
+          });
         }
         window.addEventListener('popstate', handleNavigationChange);
         window.addEventListener('navigationchange', handleNavigationChange);
@@ -8628,6 +8650,7 @@ const swipe = {
                 style.remove();
                 document.body.classList.remove('tui-no-srcoll-class');
                 document.documentElement.classList.remove('tui-no-srcoll-class');
+                document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
               }
             }
           }
@@ -8644,6 +8667,7 @@ const swipe = {
               style.remove();
               document.body.classList.remove('tui-no-srcoll-class');
               document.documentElement.classList.remove('tui-no-srcoll-class');
+              document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
             }
           }
         }

package/dist/index.js

@@ -2566,11 +2566,11 @@ const File = /*#__PURE__*/React.forwardRef(({
       overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
       textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
     }
-  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 ", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "(", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$b['small-file-component'],
     style: {
       width: '100%',
@@ -2615,11 +2615,20 @@ const File = /*#__PURE__*/React.forwardRef(({
       overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
       textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
     }
-  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default["default"].createElement("span", {
+  }, singleFile && singleFile[`${0}`] ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      display: 'inline-block',
+      width: `calc(${maxWidth ?? configStyles.FILE.maxWidth} - 140px)`,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textAlign: 'right'
+    }
+  }, singleFile[`${0}`].name) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 ", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")")))))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "(", fileExtensions.toString().split(',').join(', '), ")")))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4737,6 +4746,9 @@ const Modal = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  function ResetTouchRemove(e) {
+    e.preventDefault();
+  }
   React.useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -4780,6 +4792,9 @@ const Modal = ({
         document.head.appendChild(style);
         document.body.classList.add('tui-no-srcoll-class');
         document.documentElement.classList.add('tui-no-srcoll-class');
+        document.documentElement.addEventListener('touchmove', ResetTouchRemove, {
+          passive: false
+        });
       }
       setClassProps(() => classnames__default["default"](className ?? data.MODAL.className));
       setConfigStyles(() => {
@@ -4799,6 +4814,7 @@ const Modal = ({
           style.remove();
           document.body.classList.remove('tui-no-srcoll-class');
           document.documentElement.classList.remove('tui-no-srcoll-class');
+          document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
         }
       }
       document.removeEventListener('keydown', e => {
@@ -8493,7 +8509,7 @@ const Swipe = ({
   }, child));
 };
 
-var css_248z$2 = "body.swipe-module_tui-no-srcoll-class__YS9cI,html.swipe-module_tui-no-srcoll-class__YS9cI{height:100%;overflow:hidden!important}.swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
+var css_248z$2 = "body.swipe-module_tui-no-srcoll-class__YS9cI,html.swipe-module_tui-no-srcoll-class__YS9cI{height:100%;overflow:hidden!important;overscroll-behavior:none!important}.swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
 var styles$2 = {"tui-no-srcoll-class":"swipe-module_tui-no-srcoll-class__YS9cI","to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
 styleInject(css_248z$2);
 
@@ -8597,6 +8613,9 @@ const handleNavigationChange = () => {
   };
 })(window.history);
 const style = document.createElement('style');
+function ResetTouchRemove(e) {
+  e.preventDefault();
+}
 const swipe = {
   open: (title = '', id, child, props) => {
     let newConfigStyles = {};
@@ -8614,6 +8633,9 @@ const swipe = {
           document.head.appendChild(style);
           document.body.classList.add('tui-no-srcoll-class');
           document.documentElement.classList.add('tui-no-srcoll-class');
+          document.documentElement.addEventListener('touchmove', ResetTouchRemove, {
+            passive: false
+          });
         }
         window.addEventListener('popstate', handleNavigationChange);
         window.addEventListener('navigationchange', handleNavigationChange);
@@ -8659,6 +8681,7 @@ const swipe = {
                 style.remove();
                 document.body.classList.remove('tui-no-srcoll-class');
                 document.documentElement.classList.remove('tui-no-srcoll-class');
+                document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
               }
             }
           }
@@ -8675,6 +8698,7 @@ const swipe = {
               style.remove();
               document.body.classList.remove('tui-no-srcoll-class');
               document.documentElement.classList.remove('tui-no-srcoll-class');
+              document.documentElement.removeEventListener('touchmove', ResetTouchRemove);
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -69,4 +69,4 @@
   "volta": {
     "node": "20.13.1"
   }
-}
+}