npm - react-table-edit - Versions diffs - 1.5.42 → 1.5.44 - Mend

react-table-edit 1.5.42 → 1.5.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/component/sidebar-setting-column/index.d.ts +0 -2
package/dist/component/table/toolbar-bottom.d.ts +1 -1
package/dist/component/table-view/content.d.ts +1 -0
package/dist/component/table-view/header.d.ts +3 -3
package/dist/component/table-view/index.d.ts +1 -0
package/dist/component/table-view/table.d.ts +1 -0
package/dist/index.d.ts +1 -0
package/dist/index.js +1129 -320
package/dist/index.js.map +1 -1
package/dist/index.mjs +1129 -320
package/dist/index.mjs.map +1 -1
package/dist/styles/date-picker.css +771 -74
package/dist/styles/date-picker.css.map +1 -1
package/dist/styles/form-wizard.css.map +1 -1
package/dist/styles/index.css +840 -296
package/dist/styles/index.css.map +1 -1
package/dist/styles/select-table.css.map +1 -1
package/dist/styles/sidebar.css +0 -14
package/dist/styles/sidebar.css.map +1 -1
package/dist/styles/tab-menu.css.map +1 -1
package/package.json +1 -1
package/dist/component/calendar/index.d.ts +0 -8

package/dist/index.mjs CHANGED Viewed

@@ -9056,6 +9056,20 @@ var SvgProcess = function (_a) {
         React$5.createElement("path", { d: "M22.43 3.87a1.302 1.302 0 0 0-2.545-.374H9.886V1.874a.375.375 0 0 0-.375-.375H2.858a.375.375 0 0 0-.375.375v3.992a.375.375 0 0 0 .375.375h6.653a.375.375 0 0 0 .375-.375V4.245h9.999a1.301 1.301 0 0 0 .867.868v6.344h-.902v-1.62a.376.376 0 0 0-.375-.376h-6.653a.375.375 0 0 0-.375.375v1.62H4.115a1.3 1.3 0 1 0-1.617 1.618v7.055a.375.375 0 0 0 .375.375H5.81v1.621a.375.375 0 0 0 .375.375h6.652a.376.376 0 0 0 .375-.375v-1.62h5.327l-.695.674a.375.375 0 1 0 .522.538l1.357-1.316a.377.377 0 0 0 .006-.544l-1.357-1.316a.375.375 0 1 0-.522.539l.695.674h-5.333v-1.62a.376.376 0 0 0-.375-.376H6.185a.376.376 0 0 0-.375.375v1.621H3.248v-6.68a1.301 1.301 0 0 0 .867-.867h8.332v1.62a.374.374 0 0 0 .375.376h6.653a.374.374 0 0 0 .375-.375v-1.621h1.277a.376.376 0 0 0 .375-.375v-6.72a1.3 1.3 0 0 0 .929-1.242ZM9.137 5.492H3.233V2.25h5.903v3.242ZM6.56 18.508h5.902v3.242H6.56v-3.242Zm-3.687-6.122a.554.554 0 0 1 0-1.108.554.554 0 0 1 0 1.108ZM19.1 13.453h-5.903V10.21H19.1v3.242Zm2.027-9.029a.554.554 0 0 1 0-1.107.554.554 0 0 1 0 1.107Z", fill: props.color || "currentColor" })));
 };
+var SvgProjectSetting = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
+    return (React$5.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React$5.createElement("title", { id: titleId }, title) : null,
+        React$5.createElement("g", { clipPath: "url(#project-setting_svg__a)", fill: props.color || "currentColor" },
+            React$5.createElement("path", { d: "M1.266.042C.9.155.53.506.43.834.394.961.375 1.528.375 2.616v1.598l.122.094c.201.16.403.122.51-.094.057-.108.071-.408.071-1.655V1.031l.136-.15.136-.155H19.275l.136.155.136.15v8.916l.14.14c.118.113.17.136.272.108a.533.533 0 0 0 .207-.103c.08-.07.084-.347.084-4.575 0-3.314-.014-4.547-.056-4.683-.07-.234-.366-.572-.619-.708l-.192-.103-9-.009C5.433.009 1.33.024 1.266.042Z" }),
+            React$5.createElement("path", { d: "M2.03 2.156a.351.351 0 0 0-.15.136c-.033.061-.052.586-.052 1.481v1.388l.117.112c.061.066.17.118.235.118a.386.386 0 0 0 .234-.118c.108-.103.117-.15.117-.562v-.445h.263c.398 0 .623-.085.862-.329.347-.346.422-.778.206-1.209-.224-.45-.585-.619-1.303-.614-.234 0-.473.019-.53.042Zm1.106.778c.183.155.192.347.028.511-.094.099-.16.118-.375.118h-.258v-.75h.23c.183 0 .262.028.375.121ZM4.477 2.227l-.118.112V5.2l.122.093c.155.122.305.127.446.01.093-.075.112-.141.136-.474l.023-.389.323.37c.446.511.53.582.68.582.169 0 .333-.178.333-.361 0-.108-.075-.225-.328-.511-.178-.202-.328-.385-.328-.403 0-.02.037-.043.084-.057.131-.042.38-.304.483-.506.108-.206.117-.581.023-.806-.098-.24-.389-.488-.651-.567-.136-.042-.422-.07-.675-.07-.403 0-.45.009-.553.117Zm1.12.684c.272.216.07.558-.328.558h-.207v-.657h.207c.136 0 .244.033.328.099ZM7.876 2.184A1.619 1.619 0 0 0 6.84 4.472c.67 1.364 2.657 1.139 3.032-.342.211-.844-.323-1.725-1.185-1.95-.329-.085-.479-.085-.811.004Zm.68.68c.257.07.562.385.632.647.164.614-.356 1.228-.989 1.167a.98.98 0 0 1-.736-.506c-.21-.394-.07-.947.3-1.172.295-.183.492-.216.792-.136ZM11.08 2.166c-.187.089-.206.225-.206 1.378 0 1.232.005 1.218-.323 1.045-.169-.084-.216-.094-.328-.042a.402.402 0 0 0-.197.197c-.075.178 0 .337.234.492.418.281.961.15 1.21-.29.103-.184.108-.23.108-1.398V2.34l-.118-.113c-.122-.126-.22-.14-.38-.06ZM15.3 2.175c-.484.122-.873.445-1.107.914-.15.305-.155 1.003-.005 1.327.14.309.478.651.797.81.235.118.328.136.67.141.343 0 .436-.019.666-.131.488-.24.656-.61.384-.825-.173-.136-.253-.127-.501.07-.638.497-1.505-.01-1.43-.83.066-.642.746-.998 1.36-.707.271.126.323.126.478.004.145-.112.169-.365.042-.492-.258-.258-.914-.393-1.355-.281ZM17.19 2.203a.29.29 0 0 0-.128.263c0 .243.132.346.446.346h.258v2.386l.122.094c.154.122.304.127.445.01.112-.09.112-.094.126-1.29l.014-1.2h.254c.215 0 .262-.018.346-.121.122-.155.127-.305.01-.446-.09-.108-.113-.112-.928-.126-.797-.014-.844-.01-.966.084ZM12.268 2.212a.55.55 0 0 0-.127.193c-.06.178-.065 2.56 0 2.733.09.23.16.248.872.253.628 0 .661-.005.76-.108.145-.155.135-.375-.02-.497-.107-.084-.191-.098-.538-.098h-.418v-.563h.352c.403 0 .558-.056.633-.23.056-.14.005-.342-.103-.412-.033-.019-.24-.047-.46-.061l-.398-.024-.014-.271-.014-.268h.417c.351 0 .436-.014.544-.098a.35.35 0 0 0 .028-.511c-.085-.084-.155-.094-.764-.094-.464 0-.694.019-.75.056ZM.478 5.452l-.103.112.01 8.456.013 8.457.15.318c.179.37.535.764.849.938.501.272.408.267 4.945.267h4.163l.112-.117c.15-.145.15-.324 0-.469l-.112-.117H3.938l.14-.22c.277-.432.338-.68.366-1.44.023-.68.023-.703.154-.843l.127-.146H22.65l.14.16.141.154-.018.713c-.015.675-.02.717-.141.928-.174.29-.455.52-.745.614-.216.07-.718.08-5.185.08h-4.94l-.113.117c-.15.145-.15.323 0 .469l.113.117h4.959c5.414 0 5.236.01 5.742-.267.314-.174.67-.567.849-.938.145-.31.15-.337.164-1.064.018-.876-.02-1.064-.286-1.369-.357-.407-.394-.417-1.824-.43l-1.256-.015v-.539l.295.019c.53.033.77-.174 1.252-1.083.16-.295.192-.408.192-.614 0-.417-.197-.712-.652-.966l-.178-.103v-1.153l.178-.103c.46-.258.647-.54.647-.966 0-.22-.032-.323-.192-.623-.478-.895-.717-1.106-1.247-1.073l-.295.018v-.694c0-.632-.01-.703-.094-.787-.126-.127-.38-.122-.497.005-.08.089-.089.187-.103.867-.01.422-.023.769-.028.769-.01 0-.14-.075-.29-.165a2.169 2.169 0 0 0-.38-.192c-.099-.028-.108-.056-.108-.318 0-.385-.07-.605-.248-.811-.249-.286-.436-.342-1.14-.342-.346 0-.684.023-.773.056-.436.15-.651.482-.651 1.012v.338l-.291.145c-.164.08-.385.211-.497.286l-.202.14-.323-.168c-.24-.127-.375-.169-.544-.169-.272 0-.558.122-.726.31-.178.192-.647 1.04-.68 1.228-.08.417.131.82.558 1.068l.29.174v1.144l-.29.173c-.427.248-.638.651-.558 1.069.033.187.502 1.036.68 1.228.168.187.454.31.726.31.169 0 .305-.043.544-.17l.323-.168.202.14c.112.075.333.207.497.286.258.131.29.164.29.286v.14l-5.657.01-5.663.014-.192.103c-.21.113-.51.422-.59.615-.029.07-.066.454-.085.857-.023.67-.038.75-.16.994-.482.994-1.8 1.04-2.362.09l-.126-.221-.024-8.428-.023-8.433-.113-.09c-.15-.121-.342-.112-.464.02Zm17.494 6.417c.056.08.075.225.075.553 0 .408.01.46.108.548a.67.67 0 0 0 .22.131c.22.066.727.352.956.54.122.103.267.187.319.187.052 0 .277-.098.502-.22.539-.286.567-.277.886.267.351.595.337.656-.17.96-.215.127-.412.273-.44.32-.028.056-.028.215.01.487.037.305.037.511 0 .82-.066.511-.061.526.445.826.492.295.501.356.155.946-.32.544-.347.553-.886.267-.225-.121-.45-.22-.502-.22-.052 0-.197.085-.319.192a4.262 4.262 0 0 1-.675.404c-.618.3-.61.29-.61.703v.342H16.642v-.296c0-.417-.057-.492-.493-.675a4.13 4.13 0 0 1-.721-.412c-.193-.14-.39-.258-.441-.258-.052 0-.258.099-.46.216-.52.305-.562.29-.895-.263-.15-.243-.272-.487-.272-.543 0-.122.132-.24.525-.464.361-.207.422-.32.361-.638a4.085 4.085 0 0 1-.037-.534c0-.183.019-.422.037-.535.061-.319 0-.431-.36-.637-.394-.225-.526-.342-.526-.464 0-.056.122-.3.272-.544.333-.553.366-.563.89-.262.202.117.413.215.465.215.051 0 .248-.117.44-.258.193-.14.516-.328.722-.412.254-.108.394-.197.432-.272.033-.066.06-.29.06-.53 0-.586.005-.59.708-.59.516 0 .558.004.624.103Zm1.575 7.701v.352h-.797v-.155c0-.131.023-.16.202-.234.112-.042.276-.132.365-.197a.953.953 0 0 1 .197-.117c.019 0 .033.16.033.351Z" }),
+            React$5.createElement("path", { d: "M16.683 14.358c-.478.201-.811.515-1.022.965-.103.23-.122.324-.122.732 0 .436.01.492.15.778.183.375.52.703.895.876.235.113.324.127.76.127.45 0 .515-.014.773-.136a1.867 1.867 0 0 0 1.013-1.378c.13-.745-.305-1.566-1.013-1.908-.234-.112-.351-.136-.726-.15-.385-.014-.483 0-.708.094Zm1.106.684c.413.188.647.558.647 1.013 0 .633-.469 1.097-1.106 1.101-.46 0-.807-.215-.999-.633a1.129 1.129 0 0 1 .567-1.504c.207-.09.67-.08.891.023ZM2.742 6.21a.386.386 0 0 0-.117.235c0 .066.052.174.117.235l.113.117H17.77l.113-.117c.15-.146.15-.324 0-.47l-.113-.116H2.855l-.113.117ZM2.892 7.753c-.422.155-.764.506-.876.919-.028.094-.047.928-.047 1.955 0 1.678.004 1.809.093 2.043.113.296.39.59.694.746l.22.107h6.516l.267-.13c.15-.076.343-.216.432-.324.304-.352.309-.403.309-2.494 0-1.875 0-1.88-.113-2.114-.14-.305-.487-.614-.792-.703-.333-.099-6.426-.103-6.703-.005Zm6.553.703c.09.038.207.14.258.225.09.15.094.235.094 1.932 0 1.706-.005 1.78-.094 1.93-.192.31-.14.305-3.539.291-3.394-.014-3.197.005-3.398-.332-.09-.141-.094-.249-.094-1.885 0-1.94.005-1.964.333-2.142.15-.08.342-.084 3.22-.084 2.555 0 3.084.009 3.22.065Z" }),
+            React$5.createElement("path", { d: "M6.623 9.047a.351.351 0 0 0-.15.136c-.032.06-.051.604-.051 1.542 0 1.36.005 1.458.089 1.56.089.113.094.113 1.275.127 1.266.014 1.397-.004 1.49-.206.07-.16.07-2.826 0-2.986a.368.368 0 0 0-.168-.169c-.136-.06-2.33-.065-2.485-.004Zm2.002 1.664v1.008h-1.5V9.703h1.5v1.008ZM3.281 10.406c-.089.09-.094.155-.094.957v.867l.122.093c.118.094.183.099 1.308.099s1.19-.005 1.308-.099l.122-.093v-.867c0-.802-.005-.868-.094-.957-.089-.089-.155-.094-1.336-.094s-1.247.005-1.336.094Zm2.063.961v.352H3.89v-.703H5.344v.351ZM11.587 9.08c-.032.014-.089.08-.126.154-.09.17-.019.39.145.464.085.038 1.064.052 3.469.052h3.351l.113-.117a.386.386 0 0 0 .117-.235.386.386 0 0 0-.117-.234l-.113-.117-3.389.005c-1.865 0-3.417.014-3.45.028ZM11.526 10.49c-.155.127-.14.366.024.512l.126.107H15.895l.112-.117c.15-.145.155-.347.01-.483-.108-.103-.117-.103-2.245-.103-2.007 0-2.143.005-2.246.085ZM2.063 14.54c-.183.198-.075.512.197.577.061.014 2.25.019 4.87.014 4.613-.014 4.772-.018 4.866-.103.127-.117.131-.37.005-.497-.094-.094-.155-.094-4.969-.094h-4.87l-.099.104ZM2.062 15.89c-.202.202-.066.53.244.587.084.014 2.419.023 5.184.014l5.034-.014.09-.113c.117-.14.112-.356-.005-.473-.094-.094-.155-.094-5.274-.094-5.118 0-5.18 0-5.273.094ZM2.175 17.175a.332.332 0 0 0-.112.544c.094.093.155.093 4.987.093h4.899l.07-.103c.108-.15.094-.38-.023-.487-.094-.085-.253-.09-4.89-.099-3.946-.009-4.809 0-4.93.052ZM2.17 18.563c-.215.089-.267.389-.093.553.108.103.108.103 2.503.103 2.212 0 2.4-.005 2.489-.085a.435.435 0 0 0 .131-.206c.024-.103 0-.155-.112-.272l-.141-.14-2.339.004c-1.284 0-2.381.02-2.438.043Z" })),
+        React$5.createElement("defs", null,
+            React$5.createElement("clipPath", { id: "project-setting_svg__a" },
+                React$5.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" })))));
+};
 var SvgQuoteRight = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
     return (React$5.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
@@ -9224,6 +9238,13 @@ var SvgSettings = function (_a) {
         React$5.createElement("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })));
 };
+var SvgShapeGroup = function (_a) {
+    var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
+    return (React$5.createElement("svg", __assign({ width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: props.strokeWidth || 1.5, "aria-labelledby": titleId }, props),
+        title ? React$5.createElement("title", { id: titleId }, title) : null,
+        React$5.createElement("path", { d: "M24 15h-4.91l4.336 7.5H6.973l3.129-5.426a6.965 6.965 0 0 1-1.618.68A6.784 6.784 0 0 1 6.75 18a6.677 6.677 0 0 1-4.77-1.98 6.952 6.952 0 0 1-1.44-2.145A6.681 6.681 0 0 1 0 11.25a6.677 6.677 0 0 1 1.98-4.77 6.952 6.952 0 0 1 2.145-1.44A6.681 6.681 0 0 1 6.75 4.5c.664 0 1.313.094 1.945.281a6.579 6.579 0 0 1 1.805.856V1.5H24V15ZM6.75 16.5c.727 0 1.406-.137 2.04-.41a5.208 5.208 0 0 0 1.663-1.137 5.488 5.488 0 0 0 1.125-1.664A5.17 5.17 0 0 0 12 11.25c0-.719-.137-1.395-.41-2.027a5.448 5.448 0 0 0-1.125-1.676A5.054 5.054 0 0 0 8.8 6.422 5.555 5.555 0 0 0 6.75 6c-.727 0-1.406.137-2.04.41A5.305 5.305 0 0 0 1.923 9.2a5.258 5.258 0 0 0-.422 2.05c0 .727.137 1.406.41 2.04a5.305 5.305 0 0 0 2.79 2.788 5.257 5.257 0 0 0 2.05.422ZM20.824 21a1846.92 1846.92 0 0 1-2.812-4.875 1846.92 1846.92 0 0 0-2.813-4.875 1846.92 1846.92 0 0 0-2.812 4.875c-.93 1.617-1.867 3.242-2.813 4.875h11.25ZM22.5 3H12v4.066A6.7 6.7 0 0 1 13.102 9c.257.703.39 1.438.398 2.203l1.7-2.953 3.023 5.25H22.5V3Z", fill: props.color || "currentColor" })));
+};
 var SvgShare2 = function (_a) {
     var title = _a.title, titleId = _a.titleId, props = __rest$1(_a, ["title", "titleId"]);
     return (React$5.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: props.fontSize || 24, height: props.fontSize || 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: props.strokeWidth || 1.5, strokeLinecap: "round", strokeLinejoin: "round", className: "share-2_svg__feather share-2_svg__feather-share-2", "aria-labelledby": titleId }, props),
@@ -10451,6 +10472,7 @@ var Icon = /*#__PURE__*/Object.freeze({
   Power: SvgPower,
   Printer: SvgPrinter,
   Process: SvgProcess,
+  ProjectSetting: SvgProjectSetting,
   QuoteRight: SvgQuoteRight,
   Radio: SvgRadio,
   RefreshCcw: SvgRefreshCcw,
@@ -10470,6 +10492,7 @@ var Icon = /*#__PURE__*/Object.freeze({
   SendHorFill: SvgSendHorFill,
   Server: SvgServer,
   Settings: SvgSettings,
+  ShapeGroup: SvgShapeGroup,
   Share: SvgShare,
   Share2: SvgShare2,
   Share3: SvgShare3,
@@ -19784,17 +19807,20 @@ const isNullOrUndefined$1 = (d) => {
 const generateUUID = () => {
     // Public Domain/MIT
     let d = new Date().getTime(); //Timestamp
-    let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+    let d2 = (typeof performance !== 'undefined' &&
+        performance.now &&
+        performance.now() * 1000) ||
+        0; //Time in microseconds since page-load or 0 if unsupported
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         let r = Math.random() * 16; //random number between 0 and 16
         if (d > 0) {
             //Use timestamp until depleted
-            r = (d + r) % 16 | 0;
+            r = ((d + r) % 16) | 0;
             d = Math.floor(d / 16);
         }
         else {
             //Use microseconds since page-load if supported
-            r = (d2 + r) % 16 | 0;
+            r = ((d2 + r) % 16) | 0;
             d2 = Math.floor(d2 / 16);
         }
         return (c === 'x' ? r : 0x3).toString(16);
@@ -19816,12 +19842,16 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2,
     // eslint-disable-next-line
     if (str || str == '0') {
         str = str.toString();
-        const value = decimalSeparator !== '.' ? str.toString().replaceAll('.', decimalSeparator ?? '') : str;
+        const value = decimalSeparator !== '.'
+            ? str.toString().replaceAll('.', decimalSeparator ?? '')
+            : str;
         const arr = value.toString().split(decimalSeparator ?? '', 2);
         let flag = value.toString().includes(decimalSeparator ?? '');
         if (arr[0].length < 3) {
             const intergerArr = haveNegative ? arr[0] : arr[0].replace('-', '');
-            return flag ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : intergerArr;
+            return flag
+                ? `${intergerArr}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
+                : intergerArr;
         }
         else {
             let flagNegative = false;
@@ -19845,7 +19875,9 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 2,
             if (flagNegative && haveNegative) {
                 arr[0] = '-'.concat(arr[0]);
             }
-            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
+            return flag
+                ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}`
+                : arr[0];
         }
     }
     else {
@@ -19868,7 +19900,7 @@ const formatDateTime = (data, format = 'dd/MM/yyyy') => {
         MM: String(date.getMonth() + 1).padStart(2, '0'),
         yyyy: date.getFullYear(),
         HH: String(date.getHours()).padStart(2, '0'),
-        mm: String(date.getMinutes()).padStart(2, '0')
+        mm: String(date.getMinutes()).padStart(2, '0'),
     };
     return format.replace(/dd|DD|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
@@ -19889,7 +19921,7 @@ const FindNodeByPath = (tree, path) => {
         parent: current,
         lastIndex: levels.at(-1),
         firstIndex: levels.length === 1 ? levels[0] : -1,
-        node
+        node,
     };
 };
 /**
@@ -19917,7 +19949,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     const objHeaderWidthFixLeft = {};
     let maxDepth = 0;
     // Tính depth tối đa
-    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => (col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth)));
+    const calculateDepth = (cols, depth = 1) => Math.max(...cols.map((col) => col.columns?.length ? calculateDepth(col.columns, depth + 1) : depth));
     maxDepth = calculateDepth(columns);
     let leftTotal = 0;
     let rightTotal = 0;
@@ -19936,45 +19968,47 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     };
     const applySetting = (cols) => {
         return cols.map((cell) => {
-            const setting = settingColumns?.find((s) => s.field === cell.field);
+            const newCell = { ...cell };
+            const setting = settingColumns?.find((s) => s.field === newCell.field);
             if (setting) {
-                cell.sortOrder = setting.sortOrder;
-                if (!cell.visibleLocked) {
-                    cell.visible = setting.visible ?? true;
+                newCell.sortOrder = setting.sortOrder;
+                if (!newCell.visibleLocked) {
+                    newCell.visible = setting.visible ?? true;
                 }
-                cell.fixedType = setting.fixedType;
+                newCell.fixedType = setting.fixedType;
                 if (setting.width !== undefined && setting.width !== null) {
-                    cell.width = setting.width;
+                    newCell.width = setting.width;
                 }
                 if (setting.fraction !== undefined && setting.fraction !== null) {
-                    if (cell.numericSettings) {
-                        cell.numericSettings.fraction = setting.fraction;
+                    if (newCell.numericSettings) {
+                        newCell.numericSettings.fraction = setting.fraction;
                     }
                     else {
-                        cell.numericSettings = { fraction: setting.fraction };
+                        newCell.numericSettings = { fraction: setting.fraction };
                     }
                 }
-                cell.headerDisplay = setting.headerText || (cell.headerDisplay ?? cell.headerText);
+                newCell.headerDisplay =
+                    setting.headerText || (newCell.headerDisplay ?? newCell.headerText);
             }
             else {
-                if (cell.columns?.length) {
-                    cell.columns = applySetting(cell.columns);
-                    cell.sortOrder = cell.columns[0].sortOrder;
-                    if (cell.columns.some((x) => x.visible !== false)) {
-                        cell.visible = true;
+                if (newCell.columns?.length) {
+                    newCell.columns = applySetting(newCell.columns);
+                    newCell.sortOrder = newCell.columns[0].sortOrder;
+                    if (newCell.columns.some((x) => x.visible !== false)) {
+                        newCell.visible = true;
                     }
                     else {
-                        cell.visible = false;
+                        newCell.visible = false;
                     }
                 }
                 else {
-                    if (!cell.visibleLocked) {
-                        cell.visible = false;
+                    if (!newCell.visibleLocked) {
+                        newCell.visible = false;
                     }
                 }
             }
-            cell.isGroup = groupColumns?.includes(cell.field);
-            return cell;
+            newCell.isGroup = groupColumns?.includes(newCell.field);
+            return newCell;
         });
     };
     const traverse = (cols, level = 0) => {
@@ -19990,11 +20024,13 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 ...col,
                 columns: col.columns ?? [],
                 colspan,
-                rowspan: hasChildren ? 1 : maxDepth - level
+                rowspan: hasChildren ? 1 : maxDepth - level,
             };
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
+            if (cell.fixedType === 'left' &&
+                cell.visible !== false &&
+                cell.isGroup !== true) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
@@ -20002,16 +20038,22 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
                 const width = cell.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (cell.fixedType === 'left' && cell.visible !== false && cell.isGroup !== true) {
+                if (cell.fixedType === 'left' &&
+                    cell.visible !== false &&
+                    cell.isGroup !== true) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
+                if (cell.fixedType === 'right' &&
+                    cell.visible !== false &&
+                    cell.isGroup !== true) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (cell.fixedType === 'right' && cell.visible !== false && cell.isGroup !== true) {
+            if (cell.fixedType === 'right' &&
+                cell.visible !== false &&
+                cell.isGroup !== true) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
@@ -20024,13 +20066,20 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
     traverse(columns);
     // Danh sách các cột được hiển thị
     // const flatVisble = flat.filter((e) => e.visible !== false)
-    const flatVisbleContent = flat.filter((x) => x.visible !== false && x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
+    const flatVisbleContent = flat.filter((x) => x.visible !== false &&
+        x.field !== 'command' &&
+        x.field !== '#' &&
+        x.field !== 'checkbox');
     // Tính toán vị trí đầu tiên và cuối cùng của các cột cố định
     const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
     const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
     // Tính toán vị trí đầu tiên và cuối cùng của các cột có thể sửa
     const indexFirstEdit = flat.findIndex((item) => item.editEnable && item.visible !== false && !item.disabledCondition);
-    const indexLastEdit = flat.map((item, idx) => (item.editEnable && item.visible !== false && !item.disabledCondition ? idx : -1)).reduce((acc, val) => (val > acc ? val : acc), -1);
+    const indexLastEdit = flat
+        .map((item, idx) => item.editEnable && item.visible !== false && !item.disabledCondition
+        ? idx
+        : -1)
+        .reduce((acc, val) => (val > acc ? val : acc), -1);
     return {
         levels,
         flat,
@@ -20043,7 +20092,7 @@ const calculateTableStructure = (columns, settingColumns, groupColumns) => {
         objHeaderWidthFixRight,
         objHeaderWidthFixLeft,
         indexFirstEdit,
-        indexLastEdit
+        indexLastEdit,
     };
 };
 /**
@@ -20053,7 +20102,10 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isFilterMatch = filters.every((filter) => {
         const { key, value, ope } = filter;
         const rowValue = row[key];
-        if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+        if (rowValue === undefined ||
+            rowValue === null ||
+            value === undefined ||
+            value === null) {
             return false;
         }
         const valStr = String(rowValue).toLowerCase();
@@ -20086,7 +20138,10 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isSearchMatch = !keyword ||
         searchKeys.some((key) => {
             const val = row[key];
-            return val?.toString().toLowerCase().includes(keyword.trim().toLowerCase());
+            return val
+                ?.toString()
+                .toLowerCase()
+                .includes(keyword.trim().toLowerCase());
         });
     return isFilterMatch && isSearchMatch;
 };
@@ -20246,7 +20301,7 @@ const TableElement$1 = React__default.memo((props) => {
 const defaultMaxHeight$1 = 250;
 const SelectTable = forwardRef((props, ref) => {
-    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction } = props;
+    const { id, menuWidth, width, invalid, placeholder, textAlign, options, columns, value, fieldValue, fieldLabel, maxHeight, isClearable, component, isMulti, noHeader, isDisabled, showFooter, formatSetting, allowCreate, onPaste, onChange, handleAdd, onKeyDown, onOpenMenu, loadOptions, onCloseMenu, footerComponent, formatOptionLabel, compareFunction, } = props;
     const selectTableRef = useRef(null);
     const selectMenuTableRef = useRef(null);
     const inputRef = useRef(null);
@@ -20263,8 +20318,8 @@ const SelectTable = forwardRef((props, ref) => {
         {
             headerText: 'Name',
             field: fieldLabel ?? 'label',
-            width: menuWidth
-        }
+            width: menuWidth,
+        },
     ];
     const closeMenu = () => {
         setDropdownOpen(false);
@@ -20274,7 +20329,12 @@ const SelectTable = forwardRef((props, ref) => {
     };
     const handChange = (val) => {
         if (val && val.isCreated) {
-            const newVal = { ...val, [fieldLabel ?? 'label']: val.valueCreate, isCreated: undefined, isCreatedItem: true };
+            const newVal = {
+                ...val,
+                [fieldLabel ?? 'label']: val.valueCreate,
+                isCreated: undefined,
+                isCreatedItem: true,
+            };
             options.unshift(newVal);
             onChange(newVal);
             return;
@@ -20283,7 +20343,9 @@ const SelectTable = forwardRef((props, ref) => {
     };
     useEffect(() => {
         if (dropdownOpen && value && !isMulti && selectMenuTableRef) {
-            const index = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']));
+            const index = currentOptions?.findIndex((row) => compareFunction
+                ? compareFunction(row)
+                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']);
             if (index >= 0) {
                 selectMenuTableRef.current.scrollTo({ top: (index - 1) * 30 });
             }
@@ -20330,14 +20392,28 @@ const SelectTable = forwardRef((props, ref) => {
             }
         }
     };
-    const listKeyUse = ['Escape', 'Space', 'Enter', 'Tab', 'NumpadEnter', 'ArrowDown', 'ArrowUp', 'F9'];
+    const listKeyUse = [
+        'Escape',
+        'Space',
+        'Enter',
+        'Tab',
+        'NumpadEnter',
+        'ArrowDown',
+        'ArrowUp',
+        'F9',
+    ];
     const handleOnKeyDown = (e) => {
         let key = '';
         if (onKeyDown &&
             (!dropdownOpen ||
                 !listKeyUse.includes(e.code) ||
-                ((e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter' || e.code === 'Space') && !(currentOptions[indexFocus] || haveCreateNew)) ||
-                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') && currentOptions.length === 0) ||
+                ((e.code === 'Enter' ||
+                    e.code === 'Tab' ||
+                    e.code === 'NumpadEnter' ||
+                    e.code === 'Space') &&
+                    !(currentOptions[indexFocus] || haveCreateNew)) ||
+                ((e.code === 'ArrowDown' || e.code === 'ArrowUp') &&
+                    currentOptions.length === 0) ||
                 (e.code === 'Escape' && !(isClearable && value && !isDisabled)))) {
             key = onKeyDown(e);
         }
@@ -20350,7 +20426,12 @@ const SelectTable = forwardRef((props, ref) => {
             else if (e.code === 'Space') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
-                    newItem = { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true };
+                    newItem = {
+                        valueCreate: searchTerm,
+                        [fieldValue ?? 'value']: searchTerm,
+                        [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
+                        isCreated: true,
+                    };
                 }
                 else {
                     newItem = currentOptions[indexFocus];
@@ -20371,10 +20452,17 @@ const SelectTable = forwardRef((props, ref) => {
                     flag = true;
                 }
             }
-            else if (e.code === 'Enter' || e.code === 'Tab' || e.code === 'NumpadEnter') {
+            else if (e.code === 'Enter' ||
+                e.code === 'Tab' ||
+                e.code === 'NumpadEnter') {
                 let newItem;
                 if (haveCreateNew && indexFocus === 0) {
-                    newItem = { valueCreate: searchTerm, [fieldValue ?? 'value']: searchTerm, [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`, isCreated: true };
+                    newItem = {
+                        valueCreate: searchTerm,
+                        [fieldValue ?? 'value']: searchTerm,
+                        [fieldLabel ?? 'label']: `${t('Create')} '${searchTerm}'`,
+                        isCreated: true,
+                    };
                 }
                 else {
                     newItem = currentOptions[indexFocus];
@@ -20392,7 +20480,10 @@ const SelectTable = forwardRef((props, ref) => {
                         newIndex = indexFocus + 1;
                     }
                     else if (value) {
-                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) + 1;
+                        newIndex =
+                            currentOptions?.findIndex((row) => compareFunction
+                                ? compareFunction(row)
+                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) + 1;
                     }
                     if (newIndex < currentOptions.length) {
                         setIndexFocus(newIndex);
@@ -20416,7 +20507,10 @@ const SelectTable = forwardRef((props, ref) => {
                         newIndex = indexFocus - 1;
                     }
                     else if (value) {
-                        newIndex = currentOptions?.findIndex((row) => (compareFunction ? compareFunction(row) : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value'])) - 1;
+                        newIndex =
+                            currentOptions?.findIndex((row) => compareFunction
+                                ? compareFunction(row)
+                                : row[fieldValue ?? 'value'] === value[fieldValue ?? 'value']) - 1;
                     }
                     if (newIndex >= 0) {
                         setIndexFocus(newIndex);
@@ -20449,7 +20543,11 @@ const SelectTable = forwardRef((props, ref) => {
                     scrollToElement(selectMenuTableRef.current, selectMenuTableRef.current.scrollHeight);
                 }
                 else if (flag === 0 && rect.bottom + 30 > parentRect.bottom) {
-                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - selectMenuTableRef.current.offsetTop - parentRect.height + rect.height + 50);
+                    scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop -
+                        selectMenuTableRef.current.offsetTop -
+                        parentRect.height +
+                        rect.height +
+                        50);
                 }
                 else if (flag === 2 && rect.top < parentRect.top + 50) {
                     scrollToElement(selectMenuTableRef.current, elementFocus.offsetTop - 65);
@@ -20463,7 +20561,7 @@ const SelectTable = forwardRef((props, ref) => {
         timeOutElement = setTimeout(() => {
             elemment.scrollTo({
                 top,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }, 100);
     };
@@ -20473,7 +20571,12 @@ const SelectTable = forwardRef((props, ref) => {
         }
         for (let index = 0; index < columnsSearch.length; index++) {
             const key = columnsSearch[index].field.trim();
-            if (data[key] && data[key].toString().trim().toLowerCase().includes(keyword.trim().toLowerCase())) {
+            if (data[key] &&
+                data[key]
+                    .toString()
+                    .trim()
+                    .toLowerCase()
+                    .includes(keyword.trim().toLowerCase())) {
                 return true;
             }
         }
@@ -20489,7 +20592,8 @@ const SelectTable = forwardRef((props, ref) => {
         if (!searchTerm) {
             setOptionsLoad(undefined);
         }
-        else if (allowCreate && !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
+        else if (allowCreate &&
+            !currentOptions?.find((x) => x[fieldLabel ?? 'label'] === searchTerm)) {
             setHaveCreateNew(true);
             return;
         }
@@ -20501,9 +20605,24 @@ const SelectTable = forwardRef((props, ref) => {
     };
     React__default.memo((props) => {
         const { indexRow, row, isSelected, level = 0 } = props;
-        return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: { width: 40, textAlign: 'center', padding: 0, paddingBottom: 6 }, onClick: (e) => {
+        return (jsxs("tr", { id: `row-select-table-${indexRow}`, style: { paddingLeft: 10 * level }, className: classNames$1('r-select-row', { 'last-row': indexRow === currentOptions.length - 1 }, { 'fisrt-row': indexRow === 0 }), children: [isMulti && (jsx("td", { className: classNames$1(`r-select-rowcell`, {
+                        'r-select-move': indexFocus === indexRow,
+                        'r-select-active': !isMulti &&
+                            value &&
+                            (compareFunction
+                                ? compareFunction(row)
+                                : value[fieldValue ?? 'value'] ===
+                                    row[fieldValue ?? 'value']),
+                    }), style: {
+                        width: 40,
+                        textAlign: 'center',
+                        padding: 0,
+                        paddingBottom: 6,
+                    }, onClick: (e) => {
                         if (isMulti) {
-                            const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                            const index = value?.findIndex((x) => compareFunction
+                                ? compareFunction(row)
+                                : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']);
                             if (index > -1) {
                                 value?.splice(index, 1);
                                 handChange([...value]);
@@ -20521,25 +20640,42 @@ const SelectTable = forwardRef((props, ref) => {
                         }
                     }, children: jsx(Input$1, { checked: isSelected, type: "checkbox", className: "cursor-pointer", onChange: () => { }, style: { textAlign: 'center', marginTop: 6 } }) })), (columns ? columns : defaultColumns).map((col, indexCol) => {
                     let valueDisplay = row[col.field];
-                    if (col.type === 'numeric' || (col.typeCondition && col.typeCondition(row) === 'numeric')) {
-                        valueDisplay = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
+                    if (col.type === 'numeric' ||
+                        (col.typeCondition && col.typeCondition(row) === 'numeric')) {
+                        valueDisplay =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? '.', formatSetting?.thousandSeparator ?? ',', col.fraction ?? 0, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat) : '';
+                        valueDisplay = valueDisplay
+                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat)
+                            : '';
                     }
                     else if (col.type === 'datetime') {
-                        valueDisplay = valueDisplay ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                        valueDisplay = valueDisplay
+                            ? formatDateTime(valueDisplay, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
                     }
                     return (jsxs(Fragment, { children: [col.visible !== false && (jsx("td", { id: `select-${id}-${indexRow}-${indexCol}`,
                                 // ref={refRow}
-                                className: classNames$1(`r-select-rowcell`, { 'r-select-move': indexFocus === indexRow, 'r-select-active': !isMulti && value && (compareFunction ? compareFunction(row) : value[fieldValue ?? 'value'] === row[fieldValue ?? 'value']) }), style: {
+                                className: classNames$1(`r-select-rowcell`, {
+                                    'r-select-move': indexFocus === indexRow,
+                                    'r-select-active': !isMulti &&
+                                        value &&
+                                        (compareFunction
+                                            ? compareFunction(row)
+                                            : value[fieldValue ?? 'value'] ===
+                                                row[fieldValue ?? 'value']),
+                                }), style: {
                                     minWidth: col.minWidth,
                                     width: col.width,
                                     maxWidth: col.maxWidth,
-                                    textAlign: col.textAlign ? col.textAlign : 'left'
+                                    textAlign: col.textAlign ? col.textAlign : 'left',
                                 }, onClick: (e) => {
                                     if (isMulti) {
-                                        const index = value?.findIndex((x) => (compareFunction ? compareFunction(row) : x[fieldValue ?? 'value'] === row[fieldValue ?? 'value']));
+                                        const index = value?.findIndex((x) => compareFunction
+                                            ? compareFunction(row)
+                                            : x[fieldValue ?? 'value'] ===
+                                                row[fieldValue ?? 'value']);
                                         if (index > -1) {
                                             value?.splice(index, 1);
                                             handChange([...value]);
@@ -20566,7 +20702,7 @@ const SelectTable = forwardRef((props, ref) => {
                                         setIndexFocus(indexRow);
                                     }
                                     e.stopPropagation();
-                                }, children: col.template ? col.template(row, indexRow) : col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : valueDisplay }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
+                                }, children: col.template ? (col.template(row, indexRow)) : col.type === 'numeric' && Number(row[col.field]) < 0 ? (jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] })) : (valueDisplay) }, `col-${indexRow}-${indexCol}`)), checkOverflow(indexRow, indexCol) && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `select-${id}-${indexRow}-${indexCol}`, children: col.template ? col.template(row, indexRow) : valueDisplay }))] }, indexCol));
                 })] }, `row-${indexRow}`));
     });
     return (jsx("div", { className: classNames$1('react-select-table', { 'is-invalid': invalid }), ref: ref, id: id, children: jsx("div", { ref: selectTableRef, children: jsxs(Dropdown$1$1, { isOpen: dropdownOpen, toggle: () => { }, onMouseDown: (e) => e.preventDefault(), children: [jsxs(DropdownToggle$1, { onClick: (e) => {
@@ -20575,9 +20711,27 @@ const SelectTable = forwardRef((props, ref) => {
                                 handleOpenClose();
                             }
                             e.preventDefault();
-                        }, tag: "div", style: { width: width ? width : selectTableRef?.current?.clientWidth ? selectTableRef?.current?.clientWidth : 'auto' }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxs("div", { className: "select-table-container", children: [isMulti ? (jsx("div", { className: classNames$1('select-value is-mutil', { 'd-none': searchTerm }), children: value?.map((ele, index) => {
-                                            return (jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel ? formatOptionLabel(ele) : ele[fieldLabel ?? 'label']] }, index));
-                                        }) })) : (jsxs("div", { className: classNames$1('select-value', { 'd-none': searchTerm }), children: [value ? (formatOptionLabel ? formatOptionLabel(value) : value[fieldLabel ?? 'label']) : '', " "] })), !((isMulti ? value?.length > 0 : value) || isDisabled || searchTerm) && jsx("div", { className: classNames$1('select-placeholder'), children: placeholder }), jsx("div", { className: "input-container", children: jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
+                        }, tag: "div", style: {
+                            width: width
+                                ? width
+                                : selectTableRef?.current?.clientWidth
+                                    ? selectTableRef?.current?.clientWidth
+                                    : 'auto',
+                        }, className: classNames$1('select-table-control', { 'r-select-is-disabled': isDisabled }, { 'r-select-is-open': dropdownOpen }, { 'r-select-is-focus': isFocus }, { 'r-select-is-invalid': invalid }), children: [jsxs("div", { className: "select-table-container", children: [isMulti ? (jsx("div", { className: classNames$1('select-value is-mutil', {
+                                            'd-none': searchTerm,
+                                        }), children: value?.map((ele, index) => {
+                                            return (jsxs("span", { children: [index === 0 ? '' : ', ', formatOptionLabel
+                                                        ? formatOptionLabel(ele)
+                                                        : ele[fieldLabel ?? 'label']] }, index));
+                                        }) })) : (jsxs("div", { className: classNames$1('select-value', {
+                                            'd-none': searchTerm,
+                                        }), children: [value
+                                                ? formatOptionLabel
+                                                    ? formatOptionLabel(value)
+                                                    : value[fieldLabel ?? 'label']
+                                                : '', ' '] })), !((isMulti ? value?.length > 0 : value) ||
+                                        isDisabled ||
+                                        searchTerm) && (jsx("div", { className: classNames$1('select-placeholder'), children: placeholder })), jsx("div", { className: "input-container", children: jsx("input", { style: { textAlign: textAlign ?? 'left' }, ref: inputRef, className: classNames$1('select-input'), readOnly: isDisabled, value: searchTerm, onPaste: (e) => onPaste && !dropdownOpen && onPaste(e), onChange: (val) => {
                                                 if (val.target.value) {
                                                     if (loadOptions && val.target.value) {
                                                         setIsLoading(true);
@@ -20599,13 +20753,23 @@ const SelectTable = forwardRef((props, ref) => {
                             width: width ? width + 2 : 'min-content',
                             position: 'fixed',
                             borderRadius: 4,
-                            zIndex: 9999
+                            zIndex: 9999,
                         }, children: jsx(DropdownItem$1, { className: classNames$1('p-0 menu-select-table'), tag: "div", header: true, children: dropdownOpen && (jsx("div", { style: { backgroundColor: 'none' }, onMouseDown: (e) => {
                                     if (!isDisabled) {
                                         inputRef?.current.focus();
                                         e.preventDefault();
                                     }
-                                }, children: jsxs("div", { className: "r-select-grid", children: [jsx("div", { className: classNames$1('r-select-gridtable', { 'no-header': noHeader || (columns?.length ?? 0) === 0 }), ref: selectMenuTableRef, style: { width: menuWidth, minWidth: selectTableRef?.current?.clientWidth, maxHeight: maxHeight ?? defaultMaxHeight$1 }, children: jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxs("div", { className: classNames$1('r-select-footer', { 'd-none': !(showFooter === true || handleAdd || isMulti) }), children: [jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) }), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
+                                }, children: jsxs("div", { className: "r-select-grid", children: [jsx("div", { className: classNames$1('r-select-gridtable', {
+                                                'no-header': noHeader || (columns?.length ?? 0) === 0,
+                                            }), ref: selectMenuTableRef, style: {
+                                                width: menuWidth,
+                                                minWidth: selectTableRef?.current?.clientWidth,
+                                                maxHeight: maxHeight ?? defaultMaxHeight$1,
+                                            }, children: jsx(TableElement$1, { haveCreateNew: haveCreateNew, isLoading: isLoading, searchTerm: searchTerm, fieldLabel: fieldLabel, noHeader: noHeader, closeMenu: closeMenu, value: value, isMulti: isMulti, currentOptions: currentOptions, fieldValue: fieldValue, columns: columns, defaultColumns: defaultColumns, indexFocus: indexFocus, formatSetting: formatSetting, handChange: handChange, compareFunction: compareFunction, setIndexFocus: setIndexFocus, setSearchTerm: setSearchTerm }) }), jsxs("div", { className: classNames$1('r-select-footer', {
+                                                'd-none': !(showFooter === true ||
+                                                    handleAdd ||
+                                                    isMulti),
+                                            }), children: [jsxs(Button$1$1, { outline: true, color: "primary", onClick: () => handleAdd?.(), className: classNames$1('r-btn d-flex align-items-center', { 'd-none': !handleAdd }), children: [jsx(SvgPlus, { className: "me-50", fontSize: 16 }), t('AddNew'), " (F9)"] }), isMulti && (jsx("div", { className: "ms-50 text-primary h-100 d-flex align-items-center", children: t('countSelected', { item: value?.length ?? 0 }) })), footerComponent ? footerComponent() : null] })] }) })) }) })] }) }) }));
 });
 const PagingComponent = ({ totalItem, gridRef, pageSize, currentPage, onChangePage, pageOptions, onChangePageSize }) => {
@@ -25531,6 +25695,72 @@ function startOfYear(date, options) {
   return date_;
 }
+/**
+ * The {@link eachYearOfInterval} function options.
+ */
+/**
+ * The {@link eachYearOfInterval} function result type. It resolves the proper data type.
+ * It uses the first argument date object type, starting from the date argument,
+ * then the start interval date, and finally the end interval date. If
+ * a context function is passed, it uses the context function return type.
+ */
+/**
+ * @name eachYearOfInterval
+ * @category Interval Helpers
+ * @summary Return the array of yearly timestamps within the specified time interval.
+ *
+ * @description
+ * Return the array of yearly timestamps within the specified time interval.
+ *
+ * @typeParam IntervalType - Interval type.
+ * @typeParam Options - Options type.
+ *
+ * @param interval - The interval.
+ * @param options - An object with options.
+ *
+ * @returns The array with starts of yearly timestamps from the month of the interval start to the month of the interval end
+ *
+ * @example
+ * // Each year between 6 February 2014 and 10 August 2017:
+ * const result = eachYearOfInterval({
+ *   start: new Date(2014, 1, 6),
+ *   end: new Date(2017, 7, 10)
+ * })
+ * //=> [
+ * //   Wed Jan 01 2014 00:00:00,
+ * //   Thu Jan 01 2015 00:00:00,
+ * //   Fri Jan 01 2016 00:00:00,
+ * //   Sun Jan 01 2017 00:00:00
+ * // ]
+ */
+function eachYearOfInterval(interval, options) {
+  const { start, end } = normalizeInterval(options?.in, interval);
+  let reversed = +start > +end;
+  const endTime = reversed ? +start : +end;
+  const date = reversed ? end : start;
+  date.setHours(0, 0, 0, 0);
+  date.setMonth(0, 1);
+  let step = options?.step ?? 1;
+  if (!step) return [];
+  if (step < 0) {
+    step = -step;
+    reversed = !reversed;
+  }
+  const dates = [];
+  while (+date <= endTime) {
+    dates.push(constructFrom(start, date));
+    date.setFullYear(date.getFullYear() + step);
+  }
+  return reversed ? dates.reverse() : dates;
+}
 /**
  * The {@link endOfWeek} function options.
  */
@@ -26239,7 +26469,7 @@ const match = {
  * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp)
  * @author Lesha Koss [@leshakoss](https://github.com/leshakoss)
  */
-const enUS = {
+const enUS$1 = {
   code: "en-US",
   formatDistance: formatDistance,
   formatLong: formatLong,
@@ -27756,7 +27986,7 @@ const unescapedLatinCharacterRegExp$1 = /[a-zA-Z]/;
  */
 function format(date, formatStr, options) {
   const defaultOptions = getDefaultOptions$1();
-  const locale = options?.locale ?? defaultOptions.locale ?? enUS;
+  const locale = options?.locale ?? defaultOptions.locale ?? enUS$1;
   const firstWeekContainsDate =
     options?.firstWeekContainsDate ??
@@ -30449,7 +30679,7 @@ const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
 function parse(dateStr, formatStr, referenceDate, options) {
   const invalidDate = () => constructFrom(options?.in || referenceDate, NaN);
   const defaultOptions = getDefaultOptions();
-  const locale = options?.locale ?? defaultOptions.locale ?? enUS;
+  const locale = options?.locale ?? defaultOptions.locale ?? enUS$1;
   const firstWeekContainsDate =
     options?.firstWeekContainsDate ??
@@ -31255,6 +31485,69 @@ function endOfBroadcastWeek(date, dateLib) {
     return endDate;
 }
+/** English (United States) locale extended with DayPicker-specific translations. */
+const enUS = {
+    ...enUS$1,
+    labels: {
+        labelDayButton: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers.today)
+                label = `Today, ${label}`;
+            if (modifiers.selected)
+                label = `${label}, selected`;
+            return label;
+        },
+        labelMonthDropdown: "Choose the Month",
+        labelNext: "Go to the Next Month",
+        labelPrevious: "Go to the Previous Month",
+        labelWeekNumber: (weekNumber) => `Week ${weekNumber}`,
+        labelYearDropdown: "Choose the Year",
+        labelGrid: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            return formatDate(date, "LLLL yyyy");
+        },
+        labelGridcell: (date, modifiers, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            let label = formatDate(date, "PPPP");
+            if (modifiers?.today) {
+                label = `Today, ${label}`;
+            }
+            return label;
+        },
+        labelNav: "Navigation bar",
+        labelWeekNumberHeader: "Week Number",
+        labelWeekday: (date, options, dateLib) => {
+            let formatDate;
+            if (dateLib && typeof dateLib.format === "function") {
+                formatDate = dateLib.format.bind(dateLib);
+            }
+            else {
+                formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+            }
+            return formatDate(date, "cccc");
+        },
+    },
+};
 /**
  * A wrapper class around [date-fns](http://date-fns.org) that provides utility
  * methods for date manipulation and formatting.
@@ -31393,6 +31686,31 @@ class DateLib {
                 ? this.overrides.eachMonthOfInterval(interval)
                 : eachMonthOfInterval(interval);
         };
+        /**
+         * Returns the years between the given dates.
+         *
+         * @since 9.11.1
+         * @param interval The interval to get the years for.
+         * @returns The array of years in the interval.
+         */
+        this.eachYearOfInterval = (interval) => {
+            const years = this.overrides?.eachYearOfInterval
+                ? this.overrides.eachYearOfInterval(interval)
+                : eachYearOfInterval(interval);
+            // Remove duplicates that may happen across DST transitions (e.g., "America/Sao_Paulo")
+            // See https://github.com/date-fns/tz/issues/72
+            const uniqueYears = new Set(years.map((d) => this.getYear(d)));
+            if (uniqueYears.size === years.length) {
+                // No duplicates, return as is
+                return years;
+            }
+            // Rebuild the array to ensure one date per year
+            const yearsArray = [];
+            uniqueYears.forEach((y) => {
+                yearsArray.push(new Date(y, 0, 1));
+            });
+            return yearsArray;
+        };
         /**
          * Returns the end of the broadcast week for the given date.
          *
@@ -31731,7 +32049,63 @@ class DateLib {
     formatNumber(value) {
         return this.replaceDigits(value.toString());
     }
-}
+    /**
+     * Returns the preferred ordering for month and year labels for the current
+     * locale.
+     */
+    getMonthYearOrder() {
+        const code = this.options.locale?.code;
+        if (!code) {
+            return "month-first";
+        }
+        return DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+    }
+    /**
+     * Formats the month/year pair respecting locale conventions.
+     *
+     * @since 9.11.0
+     */
+    formatMonthYear(date) {
+        const { locale, timeZone, numerals } = this.options;
+        const localeCode = locale?.code;
+        if (localeCode && DateLib.yearFirstLocales.has(localeCode)) {
+            try {
+                const intl = new Intl.DateTimeFormat(localeCode, {
+                    month: "long",
+                    year: "numeric",
+                    timeZone,
+                    numberingSystem: numerals,
+                });
+                const formatted = intl.format(date);
+                return formatted;
+            }
+            catch {
+                // Fallback to date-fns formatting below.
+            }
+        }
+        const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+        return this.format(date, pattern);
+    }
+}
+DateLib.yearFirstLocales = new Set([
+    "eu",
+    "hu",
+    "ja",
+    "ja-Hira",
+    "ja-JP",
+    "ko",
+    "ko-KR",
+    "lt",
+    "lt-LT",
+    "lv",
+    "lv-LV",
+    "mn",
+    "mn-MN",
+    "zh",
+    "zh-CN",
+    "zh-HK",
+    "zh-TW",
+]);
 /**
  * The default date library with English locale.
  *
@@ -31752,6 +32126,9 @@ class CalendarDay {
         this.displayMonth = displayMonth;
         this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
         this.dateLib = dateLib;
+        this.isoDate = dateLib.format(date, "yyyy-MM-dd");
+        this.displayMonthId = dateLib.format(displayMonth, "yyyy-MM");
+        this.dateMonthId = dateLib.format(date, "yyyy-MM");
     }
     /**
      * Checks if this day is equal to another `CalendarDay`, considering both the
@@ -31927,7 +32304,7 @@ var UI;
     /** The dropdown with the years. */
     UI["YearsDropdown"] = "years_dropdown";
 })(UI || (UI = {}));
-/** Enum representing flags for the {@link UI.Day} element. */
+/** Enum representing flags for the {@link UI | UI.Day} element. */
 var DayFlag;
 (function (DayFlag) {
     /** The day is disabled. */
@@ -31942,8 +32319,8 @@ var DayFlag;
     DayFlag["today"] = "today";
 })(DayFlag || (DayFlag = {}));
 /**
- * Enum representing selection states that can be applied to the {@link UI.Day}
- * element in selection mode.
+ * Enum representing selection states that can be applied to the
+ * {@link UI | UI.Day} element in selection mode.
  */
 var SelectionState;
 (function (SelectionState) {
@@ -32393,7 +32770,7 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
             return isSameDay(date, matcher);
         }
         if (isDatesArray(matcher, dateLib)) {
-            return matcher.includes(date);
+            return matcher.some((matcherDate) => isSameDay(date, matcherDate));
         }
         if (isDateRange(matcher)) {
             return rangeIncludesDate(matcher, date, false, dateLib);
@@ -32444,7 +32821,7 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
  * @returns A function that retrieves the modifiers for a given `CalendarDay`.
  */
 function createGetModifiers(days, props, navStart, navEnd, dateLib) {
-    const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today, } = props;
+    const { disabled, hidden, modifiers, showOutsideDays, broadcastCalendar, today = dateLib.today(), } = props;
     const { isSameDay, isSameMonth, startOfMonth, isBefore, endOfMonth, isAfter, } = dateLib;
     const computedNavStart = navStart && startOfMonth(navStart);
     const computedNavEnd = navEnd && endOfMonth(navEnd);
@@ -32468,7 +32845,7 @@ function createGetModifiers(days, props, navStart, navEnd, dateLib) {
             // Broadcast calendar will show outside days as default
             (!broadcastCalendar && !showOutsideDays && isOutside) ||
             (broadcastCalendar && showOutsideDays === false && isOutside);
-        const isToday = isSameDay(date, today ?? dateLib.today());
+        const isToday = isSameDay(date, today);
         if (isOutside)
             internalModifiersMap.outside.push(day);
         if (isDisabled)
@@ -32627,7 +33004,7 @@ function getDefaultClassNames() {
 /**
  * Formats the caption of the month.
  *
- * @defaultValue `LLLL y` (e.g., "November 2022").
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
  * @param month The date representing the month.
  * @param options Configuration options for the date library.
  * @param dateLib The date library to use for formatting. If not provided, a new
@@ -32637,7 +33014,8 @@ function getDefaultClassNames() {
  * @see https://daypicker.dev/docs/translation#custom-formatters
  */
 function formatCaption(month, options, dateLib) {
-    return (dateLib ?? new DateLib(options)).format(month, "LLLL y");
+    const lib = dateLib ?? new DateLib(options);
+    return lib.formatMonthYear(month);
 }
 /**
  * @private
@@ -32777,127 +33155,6 @@ function getFormatters(customFormatters) {
     };
 }
-/**
- * Returns the months to show in the dropdown.
- *
- * This function generates a list of months for the current year, formatted
- * using the provided formatter, and determines whether each month should be
- * disabled based on the navigation range.
- *
- * @param displayMonth The currently displayed month.
- * @param navStart The start date for navigation.
- * @param navEnd The end date for navigation.
- * @param formatters The formatters to use for formatting the month labels.
- * @param dateLib The date library to use for date manipulation.
- * @returns An array of dropdown options representing the months, or `undefined`
- *   if no months are available.
- */
-function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
-    const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth, } = dateLib;
-    const months = eachMonthOfInterval({
-        start: startOfYear(displayMonth),
-        end: endOfYear(displayMonth),
-    });
-    const options = months.map((month) => {
-        const label = formatters.formatMonthDropdown(month, dateLib);
-        const value = getMonth(month);
-        const disabled = (navStart && month < startOfMonth(navStart)) ||
-            (navEnd && month > startOfMonth(navEnd)) ||
-            false;
-        return { value, label, disabled };
-    });
-    return options;
-}
-/**
- * Returns the computed style for a day based on its modifiers.
- *
- * This function merges the base styles for the day with any styles associated
- * with active modifiers.
- *
- * @param dayModifiers The modifiers applied to the day.
- * @param styles The base styles for the calendar elements.
- * @param modifiersStyles The styles associated with specific modifiers.
- * @returns The computed style for the day.
- */
-function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
-    let style = { ...styles?.[UI.Day] };
-    Object.entries(dayModifiers)
-        .filter(([, active]) => active === true)
-        .forEach(([modifier]) => {
-        style = {
-            ...style,
-            ...modifiersStyles?.[modifier],
-        };
-    });
-    return style;
-}
-/**
- * Generates a series of 7 days, starting from the beginning of the week, to use
- * for formatting weekday names (e.g., Monday, Tuesday, etc.).
- *
- * @param dateLib The date library to use for date manipulation.
- * @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
- * @param broadcastCalendar Whether to use the broadcast calendar (weeks start
- *   on Monday, but may include adjustments for broadcast-specific rules).
- * @returns An array of 7 dates representing the weekdays.
- */
-function getWeekdays(dateLib, ISOWeek, broadcastCalendar) {
-    const today = dateLib.today();
-    const start = broadcastCalendar
-        ? dateLib.startOfBroadcastWeek(today, dateLib)
-        : ISOWeek
-            ? dateLib.startOfISOWeek(today)
-            : dateLib.startOfWeek(today);
-    const days = [];
-    for (let i = 0; i < 7; i++) {
-        const day = dateLib.addDays(start, i);
-        days.push(day);
-    }
-    return days;
-}
-/**
- * Returns the years to display in the dropdown.
- *
- * This function generates a list of years between the navigation start and end
- * dates, formatted using the provided formatter.
- *
- * @param navStart The start date for navigation.
- * @param navEnd The end date for navigation.
- * @param formatters The formatters to use for formatting the year labels.
- * @param dateLib The date library to use for date manipulation.
- * @param reverse If true, reverses the order of the years (descending).
- * @returns An array of dropdown options representing the years, or `undefined`
- *   if `navStart` or `navEnd` is not provided.
- */
-function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false) {
-    if (!navStart)
-        return undefined;
-    if (!navEnd)
-        return undefined;
-    const { startOfYear, endOfYear, addYears, getYear, isBefore, isSameYear } = dateLib;
-    const firstNavYear = startOfYear(navStart);
-    const lastNavYear = endOfYear(navEnd);
-    const years = [];
-    let year = firstNavYear;
-    while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
-        years.push(year);
-        year = addYears(year, 1);
-    }
-    if (reverse)
-        years.reverse();
-    return years.map((year) => {
-        const label = formatters.formatYearDropdown(year, dateLib);
-        return {
-            value: getYear(year),
-            label,
-            disabled: false,
-        };
-    });
-}
 /**
  * Generates the ARIA label for a day button.
  *
@@ -32931,7 +33188,7 @@ const labelDay = labelDayButton;
  * Generates the ARIA label for the month grid, which is announced when entering
  * the grid.
  *
- * @defaultValue `LLLL y` (e.g., "November 2022").
+ * @defaultValue Locale-specific month/year order (e.g., "November 2022").
  * @param date - The date representing the month.
  * @param options - Optional configuration for the date formatting library.
  * @param dateLib - An optional instance of the date formatting library.
@@ -32940,7 +33197,8 @@ const labelDay = labelDayButton;
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
 function labelGrid(date, options, dateLib) {
-    return (dateLib ?? new DateLib(options)).format(date, "LLLL y");
+    const lib = dateLib ?? new DateLib(options);
+    return lib.formatMonthYear(date);
 }
 /**
  * @ignore
@@ -32992,6 +33250,7 @@ function labelNav() {
     return "";
 }
+const defaultLabel = "Go to the Next Month";
 /**
  * Generates the ARIA label for the "next month" button.
  *
@@ -33002,8 +33261,8 @@ function labelNav() {
  * @group Labels
  * @see https://daypicker.dev/docs/translation#aria-labels
  */
-function labelNext(_month) {
-    return "Go to the Next Month";
+function labelNext(_month, _options) {
+    return defaultLabel;
 }
 /**
@@ -33092,6 +33351,316 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
+const resolveLabel = (defaultLabel, customLabel, localeLabel) => {
+    if (customLabel)
+        return customLabel;
+    if (localeLabel) {
+        return (typeof localeLabel === "function"
+            ? localeLabel
+            : (..._args) => localeLabel);
+    }
+    return defaultLabel;
+};
+/**
+ * Merges custom labels from the props with the default labels.
+ *
+ * When available, uses the locale-provided translation for `labelNext`.
+ *
+ * @param customLabels The custom labels provided in the DayPicker props.
+ * @param options Options from the date library, used to resolve locale
+ *   translations.
+ * @returns The merged labels object with locale-aware defaults.
+ */
+function getLabels(customLabels, options) {
+    const localeLabels = options.locale?.labels ?? {};
+    return {
+        ...defaultLabels,
+        ...(customLabels ?? {}),
+        labelDayButton: resolveLabel(labelDayButton, customLabels?.labelDayButton, localeLabels.labelDayButton),
+        labelMonthDropdown: resolveLabel(labelMonthDropdown, customLabels?.labelMonthDropdown, localeLabels.labelMonthDropdown),
+        labelNext: resolveLabel(labelNext, customLabels?.labelNext, localeLabels.labelNext),
+        labelPrevious: resolveLabel(labelPrevious, customLabels?.labelPrevious, localeLabels.labelPrevious),
+        labelWeekNumber: resolveLabel(labelWeekNumber, customLabels?.labelWeekNumber, localeLabels.labelWeekNumber),
+        labelYearDropdown: resolveLabel(labelYearDropdown, customLabels?.labelYearDropdown, localeLabels.labelYearDropdown),
+        labelGrid: resolveLabel(labelGrid, customLabels?.labelGrid, localeLabels.labelGrid),
+        labelGridcell: resolveLabel(labelGridcell, customLabels?.labelGridcell, localeLabels.labelGridcell),
+        labelNav: resolveLabel(labelNav, customLabels?.labelNav, localeLabels.labelNav),
+        labelWeekNumberHeader: resolveLabel(labelWeekNumberHeader, customLabels?.labelWeekNumberHeader, localeLabels.labelWeekNumberHeader),
+        labelWeekday: resolveLabel(labelWeekday, customLabels?.labelWeekday, localeLabels.labelWeekday),
+    };
+}
+/**
+ * Returns the months to show in the dropdown.
+ *
+ * This function generates a list of months for the current year, formatted
+ * using the provided formatter, and determines whether each month should be
+ * disabled based on the navigation range.
+ *
+ * @param displayMonth The currently displayed month.
+ * @param navStart The start date for navigation.
+ * @param navEnd The end date for navigation.
+ * @param formatters The formatters to use for formatting the month labels.
+ * @param dateLib The date library to use for date manipulation.
+ * @returns An array of dropdown options representing the months, or `undefined`
+ *   if no months are available.
+ */
+function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
+    const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth, } = dateLib;
+    const months = eachMonthOfInterval({
+        start: startOfYear(displayMonth),
+        end: endOfYear(displayMonth),
+    });
+    const options = months.map((month) => {
+        const label = formatters.formatMonthDropdown(month, dateLib);
+        const value = getMonth(month);
+        const disabled = (navStart && month < startOfMonth(navStart)) ||
+            (navEnd && month > startOfMonth(navEnd)) ||
+            false;
+        return { value, label, disabled };
+    });
+    return options;
+}
+/**
+ * Returns the computed style for a day based on its modifiers.
+ *
+ * This function merges the base styles for the day with any styles associated
+ * with active modifiers.
+ *
+ * @param dayModifiers The modifiers applied to the day.
+ * @param styles The base styles for the calendar elements.
+ * @param modifiersStyles The styles associated with specific modifiers.
+ * @returns The computed style for the day.
+ */
+function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
+    let style = { ...styles?.[UI.Day] };
+    Object.entries(dayModifiers)
+        .filter(([, active]) => active === true)
+        .forEach(([modifier]) => {
+        style = {
+            ...style,
+            ...modifiersStyles?.[modifier],
+        };
+    });
+    return style;
+}
+/**
+ * Generates a series of 7 days, starting from the beginning of the week, to use
+ * for formatting weekday names (e.g., Monday, Tuesday, etc.).
+ *
+ * @param dateLib The date library to use for date manipulation.
+ * @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
+ * @param broadcastCalendar Whether to use the broadcast calendar (weeks start
+ *   on Monday, but may include adjustments for broadcast-specific rules).
+ * @returns An array of 7 dates representing the weekdays.
+ */
+function getWeekdays(dateLib, ISOWeek, broadcastCalendar, today) {
+    const referenceToday = today ?? dateLib.today();
+    const start = broadcastCalendar
+        ? dateLib.startOfBroadcastWeek(referenceToday, dateLib)
+        : ISOWeek
+            ? dateLib.startOfISOWeek(referenceToday)
+            : dateLib.startOfWeek(referenceToday);
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        const day = dateLib.addDays(start, i);
+        days.push(day);
+    }
+    return days;
+}
+/**
+ * Returns the years to display in the dropdown.
+ *
+ * This function generates a list of years between the navigation start and end
+ * dates, formatted using the provided formatter.
+ *
+ * @param navStart The start date for navigation.
+ * @param navEnd The end date for navigation.
+ * @param formatters The formatters to use for formatting the year labels.
+ * @param dateLib The date library to use for date manipulation.
+ * @param reverse If true, reverses the order of the years (descending).
+ * @returns An array of dropdown options representing the years, or `undefined`
+ *   if `navStart` or `navEnd` is not provided.
+ */
+function getYearOptions(navStart, navEnd, formatters, dateLib, reverse = false) {
+    if (!navStart)
+        return undefined;
+    if (!navEnd)
+        return undefined;
+    const { startOfYear, endOfYear, eachYearOfInterval, getYear } = dateLib;
+    const firstNavYear = startOfYear(navStart);
+    const lastNavYear = endOfYear(navEnd);
+    const years = eachYearOfInterval({ start: firstNavYear, end: lastNavYear });
+    if (reverse)
+        years.reverse();
+    return years.map((year) => {
+        const label = formatters.formatYearDropdown(year, dateLib);
+        return {
+            value: getYear(year),
+            label,
+            disabled: false,
+        };
+    });
+}
+/**
+ * Creates `dateLib` overrides that keep all calendar math at noon in the target
+ * time zone. This avoids second-level offset changes (e.g., historical zones
+ * with +03:41:12) from pushing dates backward across midnight.
+ */
+function createNoonOverrides(timeZone, options = {}) {
+    const { weekStartsOn, locale } = options;
+    const fallbackWeekStartsOn = (weekStartsOn ??
+        locale?.options?.weekStartsOn ??
+        0);
+    // Keep all internal math anchored at noon in the target zone to avoid
+    // historical second-level offsets from crossing midnight.
+    const toNoonTZDate = (date) => {
+        const normalizedDate = typeof date === "number" || typeof date === "string"
+            ? new Date(date)
+            : date;
+        return new TZDate(normalizedDate.getFullYear(), normalizedDate.getMonth(), normalizedDate.getDate(), 12, 0, 0, timeZone);
+    };
+    // Convert a value into a host `Date` that represents the same calendar day
+    // as the target-zone noon. This is useful for helpers (e.g., date-fns week
+    // utilities) that expect local `Date` instances rather than `TZDate`s.
+    const toCalendarDate = (date) => {
+        const zoned = toNoonTZDate(date);
+        return new Date(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 0, 0, 0, 0);
+    };
+    return {
+        today: () => {
+            return toNoonTZDate(TZDate.tz(timeZone));
+        },
+        newDate: (year, monthIndex, date) => {
+            return new TZDate(year, monthIndex, date, 12, 0, 0, timeZone);
+        },
+        startOfDay: (date) => {
+            return toNoonTZDate(date);
+        },
+        startOfWeek: (date, options) => {
+            const base = toNoonTZDate(date);
+            const weekStartsOnValue = (options?.weekStartsOn ??
+                fallbackWeekStartsOn);
+            const diff = (base.getDay() - weekStartsOnValue + 7) % 7;
+            base.setDate(base.getDate() - diff);
+            return base;
+        },
+        startOfISOWeek: (date) => {
+            const base = toNoonTZDate(date);
+            const diff = (base.getDay() - 1 + 7) % 7;
+            base.setDate(base.getDate() - diff);
+            return base;
+        },
+        startOfMonth: (date) => {
+            const base = toNoonTZDate(date);
+            base.setDate(1);
+            return base;
+        },
+        startOfYear: (date) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(0, 1);
+            return base;
+        },
+        endOfWeek: (date, options) => {
+            const base = toNoonTZDate(date);
+            const weekStartsOnValue = (options?.weekStartsOn ??
+                fallbackWeekStartsOn);
+            const endDow = (weekStartsOnValue + 6) % 7;
+            const diff = (endDow - base.getDay() + 7) % 7;
+            base.setDate(base.getDate() + diff);
+            return base;
+        },
+        endOfISOWeek: (date) => {
+            const base = toNoonTZDate(date);
+            const diff = (7 - base.getDay()) % 7;
+            base.setDate(base.getDate() + diff);
+            return base;
+        },
+        endOfMonth: (date) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(base.getMonth() + 1, 0);
+            return base;
+        },
+        endOfYear: (date) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(11, 31);
+            return base;
+        },
+        eachMonthOfInterval: (interval) => {
+            const start = toNoonTZDate(interval.start);
+            const end = toNoonTZDate(interval.end);
+            const result = [];
+            const cursor = new TZDate(start.getFullYear(), start.getMonth(), 1, 12, 0, 0, timeZone);
+            const endKey = end.getFullYear() * 12 + end.getMonth();
+            while (cursor.getFullYear() * 12 + cursor.getMonth() <= endKey) {
+                result.push(new TZDate(cursor, timeZone));
+                cursor.setMonth(cursor.getMonth() + 1, 1);
+            }
+            return result;
+        },
+        // Normalize to noon once before arithmetic (avoid DST/midnight edge cases),
+        // mutate the same TZDate, and return it.
+        addDays: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setDate(base.getDate() + amount);
+            return base;
+        },
+        addWeeks: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setDate(base.getDate() + amount * 7);
+            return base;
+        },
+        addMonths: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setMonth(base.getMonth() + amount);
+            return base;
+        },
+        addYears: (date, amount) => {
+            const base = toNoonTZDate(date);
+            base.setFullYear(base.getFullYear() + amount);
+            return base;
+        },
+        eachYearOfInterval: (interval) => {
+            const start = toNoonTZDate(interval.start);
+            const end = toNoonTZDate(interval.end);
+            const years = [];
+            const cursor = new TZDate(start.getFullYear(), 0, 1, 12, 0, 0, timeZone);
+            while (cursor.getFullYear() <= end.getFullYear()) {
+                years.push(new TZDate(cursor, timeZone));
+                cursor.setFullYear(cursor.getFullYear() + 1, 0, 1);
+            }
+            return years;
+        },
+        getWeek: (date, options) => {
+            const base = toCalendarDate(date);
+            return getWeek(base, {
+                weekStartsOn: options?.weekStartsOn ?? fallbackWeekStartsOn,
+                firstWeekContainsDate: options?.firstWeekContainsDate ??
+                    locale?.options?.firstWeekContainsDate ??
+                    1,
+            });
+        },
+        getISOWeek: (date) => {
+            const base = toCalendarDate(date);
+            return getISOWeek(base);
+        },
+        differenceInCalendarDays: (dateLeft, dateRight) => {
+            const left = toCalendarDate(dateLeft);
+            const right = toCalendarDate(dateRight);
+            return differenceInCalendarDays(left, right);
+        },
+        differenceInCalendarMonths: (dateLeft, dateRight) => {
+            const left = toCalendarDate(dateLeft);
+            const right = toCalendarDate(dateRight);
+            return differenceInCalendarMonths(left, right);
+        },
+    };
+}
 const asHtmlElement = (element) => {
     if (element instanceof HTMLElement)
         return element;
@@ -33284,19 +33853,27 @@ function getDates(displayMonths, maxDate, props, dateLib) {
         : ISOWeek
             ? startOfISOWeek(firstMonth)
             : startOfWeek(firstMonth);
-    const endWeekLastDate = broadcastCalendar
+    const displayMonthsWeekEnd = broadcastCalendar
         ? endOfBroadcastWeek(lastMonth)
         : ISOWeek
             ? endOfISOWeek(endOfMonth(lastMonth))
             : endOfWeek(endOfMonth(lastMonth));
-    const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
+    // If maxDate is set, clamp the grid to the end of that week.
+    const constraintWeekEnd = maxDate &&
+        (broadcastCalendar
+            ? endOfBroadcastWeek(maxDate)
+            : ISOWeek
+                ? endOfISOWeek(maxDate)
+                : endOfWeek(maxDate));
+    // Pick the earliest week end between the displayed months and the constraint.
+    const gridEndDate = constraintWeekEnd && isAfter(displayMonthsWeekEnd, constraintWeekEnd)
+        ? constraintWeekEnd
+        : displayMonthsWeekEnd;
+    const nOfDays = differenceInCalendarDays(gridEndDate, startWeekFirstDate);
     const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
     const dates = [];
     for (let i = 0; i <= nOfDays; i++) {
         const date = addDays(startWeekFirstDate, i);
-        if (maxDate && isAfter(date, maxDate)) {
-            break;
-        }
         dates.push(date);
     }
     // If fixed weeks is enabled, add the extra dates to the array
@@ -33627,17 +34204,45 @@ function useCalendar(props, dateLib) {
         setFirstMonth(newInitialMonth);
     }, [props.timeZone]);
     /** The months displayed in the calendar. */
-    const displayMonths = getDisplayMonths(firstMonth, navEnd, props, dateLib);
-    /** The dates displayed in the calendar. */
-    const dates = getDates(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, props, dateLib);
-    /** The Months displayed in the calendar. */
-    const months = getMonths(displayMonths, dates, props, dateLib);
-    /** The Weeks displayed in the calendar. */
-    const weeks = getWeeks(months);
-    /** The Days displayed in the calendar. */
-    const days = getDays(months);
-    const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
-    const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to recompute only when specific props change.
+    const { months, weeks, days, previousMonth, nextMonth } = useMemo(() => {
+        const displayMonths = getDisplayMonths(firstMonth, navEnd, { numberOfMonths: props.numberOfMonths }, dateLib);
+        const dates = getDates(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, {
+            ISOWeek: props.ISOWeek,
+            fixedWeeks: props.fixedWeeks,
+            broadcastCalendar: props.broadcastCalendar,
+        }, dateLib);
+        const months = getMonths(displayMonths, dates, {
+            broadcastCalendar: props.broadcastCalendar,
+            fixedWeeks: props.fixedWeeks,
+            ISOWeek: props.ISOWeek,
+            reverseMonths: props.reverseMonths,
+        }, dateLib);
+        const weeks = getWeeks(months);
+        const days = getDays(months);
+        const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
+        const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+        return {
+            months,
+            weeks,
+            days,
+            previousMonth,
+            nextMonth,
+        };
+    }, [
+        dateLib,
+        firstMonth.getTime(),
+        navEnd?.getTime(),
+        navStart?.getTime(),
+        props.disableNavigation,
+        props.broadcastCalendar,
+        props.endMonth?.getTime(),
+        props.fixedWeeks,
+        props.ISOWeek,
+        props.numberOfMonths,
+        props.pagedNavigation,
+        props.reverseMonths,
+    ]);
     const { disableNavigation, onMonthChange } = props;
     const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day)));
     const goToMonth = (date) => {
@@ -33856,6 +34461,12 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
         const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib);
         if (!nextFocus)
             return;
+        if (props.disableNavigation) {
+            const isNextInCalendar = calendar.days.some((day) => day.isEqualTo(nextFocus));
+            if (!isNextInCalendar) {
+                return;
+            }
+        }
         calendar.goToDay(nextFocus);
         setFocused(nextFocus);
     };
@@ -34138,15 +34749,33 @@ function rangeContainsModifiers(range, modifiers, dateLib = defaultDateLib) {
  *   range, and a function to check if a date is within the range.
  */
 function useRange(props, dateLib) {
-    const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
+    const { disabled, excludeDisabled, resetOnSelect, selected: initiallySelected, required, onSelect, } = props;
     const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
     const selected = !onSelect ? internallySelected : initiallySelected;
     const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
     const select = (triggerDate, modifiers, e) => {
         const { min, max } = props;
-        const newRange = triggerDate
-            ? addToRange(triggerDate, selected, min, max, required, dateLib)
-            : undefined;
+        let newRange;
+        if (triggerDate) {
+            const selectedFrom = selected?.from;
+            const selectedTo = selected?.to;
+            const hasFullRange = !!selectedFrom && !!selectedTo;
+            const isClickingSingleDayRange = !!selectedFrom &&
+                !!selectedTo &&
+                dateLib.isSameDay(selectedFrom, selectedTo) &&
+                dateLib.isSameDay(triggerDate, selectedFrom);
+            if (resetOnSelect && (hasFullRange || !selected?.from)) {
+                if (!required && isClickingSingleDayRange) {
+                    newRange = undefined;
+                }
+                else {
+                    newRange = { from: triggerDate, to: undefined };
+                }
+            }
+            else {
+                newRange = addToRange(triggerDate, selected, min, max, required, dateLib);
+            }
+        }
         if (excludeDisabled && disabled && newRange?.from && newRange.to) {
             if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
                 // if a disabled days is found, the range is reset
@@ -34234,6 +34863,78 @@ function useSelection(props, dateLib) {
     }
 }
+/**
+ * Convert a {@link Date} or {@link TZDate} instance to the given time zone.
+ * Reuses the same instance when it is already a {@link TZDate} using the target
+ * time zone to avoid extra allocations.
+ */
+function toTimeZone(date, timeZone) {
+    if (date instanceof TZDate && date.timeZone === timeZone) {
+        return date;
+    }
+    return new TZDate(date, timeZone);
+}
+function toZoneNoon(date, timeZone, noonSafe) {
+    if (!noonSafe)
+        return toTimeZone(date, timeZone);
+    const zoned = toTimeZone(date, timeZone);
+    const noonZoned = new TZDate(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 12, 0, 0, timeZone);
+    return new Date(noonZoned.getTime());
+}
+function convertMatcher(matcher, timeZone, noonSafe) {
+    if (typeof matcher === "boolean" || typeof matcher === "function") {
+        return matcher;
+    }
+    if (matcher instanceof Date) {
+        return toZoneNoon(matcher, timeZone, noonSafe);
+    }
+    if (Array.isArray(matcher)) {
+        return matcher.map((value) => value instanceof Date ? toZoneNoon(value, timeZone, noonSafe) : value);
+    }
+    if (isDateRange(matcher)) {
+        return {
+            ...matcher,
+            from: matcher.from ? toTimeZone(matcher.from, timeZone) : matcher.from,
+            to: matcher.to ? toTimeZone(matcher.to, timeZone) : matcher.to,
+        };
+    }
+    if (isDateInterval(matcher)) {
+        return {
+            before: toZoneNoon(matcher.before, timeZone, noonSafe),
+            after: toZoneNoon(matcher.after, timeZone, noonSafe),
+        };
+    }
+    if (isDateAfterType(matcher)) {
+        return {
+            after: toZoneNoon(matcher.after, timeZone, noonSafe),
+        };
+    }
+    if (isDateBeforeType(matcher)) {
+        return {
+            before: toZoneNoon(matcher.before, timeZone, noonSafe),
+        };
+    }
+    return matcher;
+}
+/**
+ * Convert any {@link Matcher} or array of matchers to the specified time zone.
+ *
+ * @param matchers - The matcher or matchers to convert.
+ * @param timeZone - The target IANA time zone.
+ * @returns The converted matcher(s).
+ * @group Utilities
+ */
+function convertMatchersToTimeZone(matchers, timeZone, noonSafe) {
+    if (!matchers) {
+        return matchers;
+    }
+    if (Array.isArray(matchers)) {
+        return matchers.map((matcher) => convertMatcher(matcher, timeZone, noonSafe));
+    }
+    return convertMatcher(matchers, timeZone, noonSafe);
+}
 /**
  * Renders the DayPicker calendar component.
  *
@@ -34244,58 +34945,83 @@ function useSelection(props, dateLib) {
  */
 function DayPicker(initialProps) {
     let props = initialProps;
-    if (props.timeZone) {
+    const timeZone = props.timeZone;
+    if (timeZone) {
         props = {
             ...initialProps,
+            timeZone,
         };
         if (props.today) {
-            props.today = new TZDate(props.today, props.timeZone);
+            props.today = toTimeZone(props.today, timeZone);
         }
         if (props.month) {
-            props.month = new TZDate(props.month, props.timeZone);
+            props.month = toTimeZone(props.month, timeZone);
         }
         if (props.defaultMonth) {
-            props.defaultMonth = new TZDate(props.defaultMonth, props.timeZone);
+            props.defaultMonth = toTimeZone(props.defaultMonth, timeZone);
         }
         if (props.startMonth) {
-            props.startMonth = new TZDate(props.startMonth, props.timeZone);
+            props.startMonth = toTimeZone(props.startMonth, timeZone);
         }
         if (props.endMonth) {
-            props.endMonth = new TZDate(props.endMonth, props.timeZone);
+            props.endMonth = toTimeZone(props.endMonth, timeZone);
         }
         if (props.mode === "single" && props.selected) {
-            props.selected = new TZDate(props.selected, props.timeZone);
+            props.selected = toTimeZone(props.selected, timeZone);
         }
         else if (props.mode === "multiple" && props.selected) {
-            props.selected = props.selected?.map((date) => new TZDate(date, props.timeZone));
+            props.selected = props.selected?.map((date) => toTimeZone(date, timeZone));
         }
         else if (props.mode === "range" && props.selected) {
             props.selected = {
                 from: props.selected.from
-                    ? new TZDate(props.selected.from, props.timeZone)
-                    : undefined,
+                    ? toTimeZone(props.selected.from, timeZone)
+                    : props.selected.from,
                 to: props.selected.to
-                    ? new TZDate(props.selected.to, props.timeZone)
-                    : undefined,
+                    ? toTimeZone(props.selected.to, timeZone)
+                    : props.selected.to,
             };
         }
+        if (props.disabled !== undefined) {
+            props.disabled = convertMatchersToTimeZone(props.disabled, timeZone);
+        }
+        if (props.hidden !== undefined) {
+            props.hidden = convertMatchersToTimeZone(props.hidden, timeZone);
+        }
+        if (props.modifiers) {
+            const nextModifiers = {};
+            Object.keys(props.modifiers).forEach((key) => {
+                nextModifiers[key] = convertMatchersToTimeZone(props.modifiers?.[key], timeZone);
+            });
+            props.modifiers = nextModifiers;
+        }
     }
     const { components, formatters, labels, dateLib, locale, classNames } = useMemo(() => {
         const locale = { ...enUS, ...props.locale };
+        const weekStartsOn = props.broadcastCalendar ? 1 : props.weekStartsOn;
+        const noonOverrides = props.noonSafe && props.timeZone
+            ? createNoonOverrides(props.timeZone, {
+                weekStartsOn,
+                locale,
+            })
+            : undefined;
+        const overrides = props.dateLib && noonOverrides
+            ? { ...noonOverrides, ...props.dateLib }
+            : (props.dateLib ?? noonOverrides);
         const dateLib = new DateLib({
             locale,
-            weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+            weekStartsOn,
             firstWeekContainsDate: props.firstWeekContainsDate,
             useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
             useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
             timeZone: props.timeZone,
             numerals: props.numerals,
-        }, props.dateLib);
+        }, overrides);
         return {
             dateLib,
             components: getComponents(props.components),
             formatters: getFormatters(props.formatters),
-            labels: { ...defaultLabels, ...props.labels },
+            labels: getLabels(props.labels, dateLib.options),
             locale,
             classNames: { ...getDefaultClassNames(), ...props.classNames },
         };
@@ -34309,11 +35035,15 @@ function DayPicker(initialProps) {
         props.timeZone,
         props.numerals,
         props.dateLib,
+        props.noonSafe,
         props.components,
         props.formatters,
         props.labels,
         props.classNames,
     ]);
+    if (!props.today) {
+        props = { ...props, today: dateLib.today() };
+    }
     const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, } = props;
     const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown, } = formatters;
     const calendar = useCalendar(props, dateLib);
@@ -34322,7 +35052,7 @@ function DayPicker(initialProps) {
     const { isSelected, select, selected: selectedValue, } = useSelection(props, dateLib) ?? {};
     const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
     const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelPrevious, labelNext, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown, } = labels;
-    const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
+    const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek, props.broadcastCalendar, props.today), [dateLib, props.ISOWeek, props.broadcastCalendar, props.today]);
     const isInteractive = mode !== undefined || onDayClick !== undefined;
     const handlePreviousClick = useCallback(() => {
         if (!previousMonth)
@@ -34340,6 +35070,9 @@ function DayPicker(initialProps) {
         e.preventDefault();
         e.stopPropagation();
         setFocused(day);
+        if (m.disabled) {
+            return;
+        }
         select?.(day.date, m, e);
         onDayClick?.(day.date, m, e);
     }, [select, onDayClick, setFocused]);
@@ -34423,7 +35156,7 @@ function DayPicker(initialProps) {
         formatters,
     };
     return (React__default.createElement(dayPickerContext.Provider, { value: contextValue },
-        React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+        React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang ?? locale.code, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
             React__default.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
                 !props.hideNavigation && !navLayout && (React__default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                 months.map((calendarMonth, displayIndex) => {
@@ -34435,10 +35168,16 @@ function DayPicker(initialProps) {
                             displayIndex === 0 && (React__default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
                             React__default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
                         React__default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React__default.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-months" ? (React__default.createElement(components.MonthsDropdown, { className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default.createElement("span", null, formatMonthDropdown(calendarMonth.date, dateLib))),
-                            captionLayout === "dropdown" ||
-                                captionLayout === "dropdown-years" ? (React__default.createElement(components.YearsDropdown, { className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default.createElement("span", null, formatYearDropdown(calendarMonth.date, dateLib))),
+                            (() => {
+                                const monthControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-months" ? (React__default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                const yearControl = captionLayout === "dropdown" ||
+                                    captionLayout === "dropdown-years" ? (React__default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                const controls = dateLib.getMonthYearOrder() === "year-first"
+                                    ? [yearControl, monthControl]
+                                    : [monthControl, yearControl];
+                                return controls;
+                            })(),
                             React__default.createElement("span", { role: "status", "aria-live": "polite", style: {
                                     border: 0,
                                     clip: "rect(0 0 0 0)",
@@ -34450,9 +35189,7 @@ function DayPicker(initialProps) {
                                     width: "1px",
                                     whiteSpace: "nowrap",
                                     wordWrap: "normal",
-                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (
-                        // biome-ignore lint/a11y/useSemanticElements: breaking change
-                        React__default.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
+                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React__default.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
                         navLayout === "around" &&
                             !props.hideNavigation &&
                             displayIndex === numberOfMonths - 1 && (React__default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
@@ -34467,9 +35204,7 @@ function DayPicker(initialProps) {
                                 weekdays.map((weekday) => (React__default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: String(weekday), style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
                             React__default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week) => {
                                 return (React__default.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
-                                    showWeekNumber && (
-                                    // biome-ignore lint/a11y/useSemanticElements: react component
-                                    React__default.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                    showWeekNumber && (React__default.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
                                             locale,
                                         }), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
                                     week.days.map((day) => {
@@ -34493,18 +35228,16 @@ function DayPicker(initialProps) {
                                         const ariaLabel = !isInteractive && !modifiers.hidden
                                             ? labelGridcell(date, modifiers, dateLib.options, dateLib)
                                             : undefined;
-                                        return (
-                                        // biome-ignore lint/a11y/useSemanticElements: react component
-                                        React__default.createElement(components.Day, { key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": dateLib.format(date, "yyyy-MM-dd"), "data-month": day.outside
-                                                ? dateLib.format(date, "yyyy-MM")
-                                                : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (React__default.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: modifiers.disabled || undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
+                                        return (React__default.createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (React__default.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
+                                                modifiers.disabled) ||
+                                                undefined, "aria-disabled": (modifiers.focused &&
+                                                modifiers.disabled) ||
+                                                undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
                                             formatDay(day.date, dateLib.options, dateLib))));
                                     })));
                             })))));
                 })),
-            props.footer && (
-            // biome-ignore lint/a11y/useSemanticElements: react component
-            React__default.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
+            props.footer && (React__default.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
 function styleInject(css, ref) {
@@ -34534,7 +35267,7 @@ function styleInject(css, ref) {
   }
 }
-var css_248z$3 = "/* Variables declaration */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n\n  --rdp-day-height: 44px; /* The height of the day cells. */\n  --rdp-day-width: 44px; /* The width of the day cells. */\n\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: 42px; /* The height of the day cells. */\n  --rdp-day_button-width: 42px; /* The width of the day cells. */\n\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    transparent 50%,\n    var(--rdp-range_middle-background-color) 50%\n  ); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n\n  --rdp-range_end-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    var(--rdp-range_middle-background-color) 50%,\n    transparent 50%\n  ); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-gradient-direction: 90deg;\n\n  --rdp-animation_duration: 0.3s;\n  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.rdp-root[dir=\"rtl\"] {\n  --rdp-gradient-direction: -90deg;\n}\n\n.rdp-root[data-broadcast-calendar=\"true\"] {\n  --rdp-outside-opacity: unset;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-dropdown:focus-visible ~ .rdp-caption_label {\n  outline: 5px auto Highlight;\n  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_next[aria-disabled=\"true\"],\n.rdp-button_previous:disabled,\n.rdp-button_previous[aria-disabled=\"true\"] {\n  cursor: revert;\n\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n.rdp-dropdown {\n  z-index: 2;\n\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=\"true\"] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month,\n.rdp-root[data-nav-layout=\"after\"] .rdp-month {\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month_caption {\n  justify-content: center;\n  margin-inline-start: var(--rdp-nav_button-width);\n  margin-inline-end: var(--rdp-nav_button-width);\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_previous {\n  position: absolute;\n  inset-inline-start: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_next {\n  position: absolute;\n  inset-inline-end: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n  justify-content: center;\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n\n  display: flex;\n  align-items: center;\n\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font-weight: 500;\n  font-size: smaller;\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font-weight: 400;\n  font-size: small;\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}\n\n@keyframes rdp-slide_in_left {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_in_right {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_out_left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes rdp-slide_out_right {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.rdp-weeks_before_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_before_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n@keyframes rdp-fade_in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes rdp-fade_out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.rdp-caption_after_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_after_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n";
+var css_248z$3 = "/* Variables declaration */\n.rdp-root {\n  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */\n\n  --rdp-day-height: 44px; /* The height of the day cells. */\n  --rdp-day-width: 44px; /* The width of the day cells. */\n\n  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */\n  --rdp-day_button-height: 42px; /* The height of the day cells. */\n  --rdp-day_button-width: 42px; /* The width of the day cells. */\n\n  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */\n  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */\n\n  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */\n\n  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */\n\n  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */\n\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-color: inherit; /* The color of the range text. */\n\n  --rdp-range_start-color: white; /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    transparent 50%,\n    var(--rdp-range_middle-background-color) 50%\n  ); /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */\n\n  --rdp-range_end-background: linear-gradient(\n    var(--rdp-gradient-direction),\n    var(--rdp-range_middle-background-color) 50%,\n    transparent 50%\n  ); /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white; /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */\n\n  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */\n\n  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */\n  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */\n\n  --rdp-gradient-direction: 90deg;\n\n  --rdp-animation_duration: 0.3s;\n  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.rdp-root[dir=\"rtl\"] {\n  --rdp-gradient-direction: -90deg;\n}\n\n.rdp-root[data-broadcast-calendar=\"true\"] {\n  --rdp-outside-opacity: unset;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative; /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-dropdown:focus-visible ~ .rdp-caption_label {\n  outline: 5px auto Highlight;\n  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_next[aria-disabled=\"true\"],\n.rdp-button_previous:disabled,\n.rdp-button_previous[aria-disabled=\"true\"] {\n  cursor: revert;\n\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n.rdp-dropdown {\n  z-index: 2;\n\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=\"true\"] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month,\n.rdp-root[data-nav-layout=\"after\"] .rdp-month {\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-month_caption {\n  justify-content: center;\n  margin-inline-start: var(--rdp-nav_button-width);\n  margin-inline-end: var(--rdp-nav_button-width);\n  position: relative;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_previous {\n  position: absolute;\n  inset-inline-start: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n}\n\n.rdp-root[data-nav-layout=\"around\"] .rdp-button_next {\n  position: absolute;\n  inset-inline-end: 0;\n  top: 0;\n  height: var(--rdp-nav-height);\n  display: inline-flex;\n  justify-content: center;\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n\n  display: flex;\n  align-items: center;\n\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font-weight: 500;\n  font-size: smaller;\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font-weight: 400;\n  font-size: small;\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font-weight: bold;\n  font-size: large;\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled:not(.rdp-selected) {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}\n\n@keyframes rdp-slide_in_left {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_in_right {\n  0% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rdp-slide_out_left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes rdp-slide_out_right {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.rdp-weeks_before_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_before_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-weeks_after_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_enter {\n  animation: rdp-slide_in_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_exit {\n  animation: rdp-slide_out_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_before_enter {\n  animation: rdp-slide_in_right var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-root[dir=\"rtl\"] .rdp-weeks_after_exit {\n  animation: rdp-slide_out_left var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n@keyframes rdp-fade_in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes rdp-fade_out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.rdp-caption_after_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_after_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_enter {\n  animation: rdp-fade_in var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n\n.rdp-caption_before_exit {\n  animation: rdp-fade_out var(--rdp-animation_duration)\n    var(--rdp-animation_timing) forwards;\n}\n";
 styleInject(css_248z$3);
 var reactInputMask = {exports: {}};
@@ -39216,11 +39949,11 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, se
     }, []);
     return (jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsx(RenderColGroup, { contentColumns: contentColumns }), jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                         return (jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                return (jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
+                                return (jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, fieldKey: fieldKey, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                         setFilterBy([...val]);
                                     }, changeOrder: (val) => {
                                         setOrderBy([...val]);
-                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: totalCount }, `header-${indexParent}-${index}`));
+                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft }, `header-${indexParent}-${index}`));
                             }) }, `header-${-indexParent}`));
                     }) }), jsxs("tbody", { className: "r-gridcontent", role: "rowgroup", children: [jsx("tr", { style: { height: offsetY } }), filteredData.slice(startIndex, endIndex).map((row) => {
                             const indexRow = row.indexRow;
@@ -39933,17 +40666,35 @@ const SettingColumn = React__default.memo((props) => {
                             }) }) })] }), jsxs("div", { style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, className: "d-flex justify-content-between align-items-center w-100 py-75 px-1", children: [jsx("div", { children: settingColumns?.updatedDate && (jsxs("p", { children: [jsxs("strong", { children: [t('Update date'), ": "] }), " ", jsx("span", { children: settingColumns.updatedDate ? formatDateTime(settingColumns.updatedDate, 'DD/MM/yyyy HH:mm') : '' }), jsxs("strong", { className: "ms-2", children: [t('Editor'), ": "] }), " ", jsx("span", { children: settingColumns.updatedByName })] })) }), jsxs("div", { children: [resetDefaultColumns && (jsx(Button$1$1, { color: "primary", onClick: () => messageBoxConfirm(t, handleResetColumns, {}, 'Do you want to reset the default settings?'), className: "me-1", children: t('Reset') })), jsx(Button$1$1, { color: "primary", onClick: handleSubmit, className: "me-1", children: t('Confirm') }), jsx(Button$1$1, { color: "secondary", onClick: handleCancel, outline: true, children: t('Close') })] })] })] }));
 });
-const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting }) => {
+const ToolbarBottom = ({ handleAdd, handleDuplicate, handleInsertBefore, handleInsertAfter, handleDeleteAll, setOpenPopupSetupColumn, focusRow, editDisable, addDisable, buttonSetting, toolbarSetting, }) => {
     const { t } = useTranslation();
-    return (jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsxs("div", { className: classNames$1('r-toolbar-item d-flex', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: [jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), !!buttonSetting?.disableAddMulti && (jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.duplicateDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
+    return (jsx("div", { id: "table_custom_bottom_toolbar", className: "r-toolbar r-toolbar-bottom", role: "toolbar", "aria-disabled": "false", "aria-haspopup": "false", "aria-orientation": "horizontal", children: jsxs("div", { className: "r-toolbar-items", children: [jsxs("div", { className: "r-toolbar-left", children: [jsxs("div", { className: classNames$1('r-toolbar-item d-flex', {
+                                'd-none': editDisable || addDisable,
+                            }), "aria-disabled": "false", children: [jsx(Button$1$1, { color: "success", outline: true, onClick: () => handleAdd(1), className: "d-flex", children: t('Add item') }), buttonSetting?.disableAddMulti === true && (jsxs(UncontrolledDropdown, { className: "nav-item", children: [jsx(DropdownToggle$1, { tag: "div", className: "me-0 d-flex", children: jsx(Button$1$1, { type: "button", color: "success", outline: true, style: { marginLeft: -1 }, className: "px-25", children: jsx("svg", { fill: "#28c76f", height: "15", width: "20", viewBox: "0 0 20 20", children: jsx("path", { d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" }) }) }) }), jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-0", children: [jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(10), children: "10 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(20), children: "20 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(30), children: "30 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(40), children: "40 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(50), children: "50 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(100), children: "100 h\u00E0ng" }), jsx(DropdownItem$1, { className: "py-25", tag: "div", onClick: () => handleAdd(1000), children: "1000 h\u00E0ng" })] })] }))] }), (focusRow ?? -1) > -1 ? (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.duplicateDisable,
+                                    }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: () => {
                                             handleDuplicate();
-                                        }, className: "d-flex", children: t('Duplicate') }) }), jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertBeforeDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || addDisable || buttonSetting?.insertAfterDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsx(Fragment$1, { children: " " })), jsx("div", { className: classNames$1('r-toolbar-item', { 'd-none': editDisable || buttonSetting?.deleteAllDisable }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
+                                        }, className: "d-flex", children: t('Duplicate') }) }), jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.insertBeforeDisable,
+                                    }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertBefore, className: "d-flex", children: t('Insert item before') }) }), jsx("div", { className: classNames$1('r-toolbar-item', {
+                                        'd-none': editDisable ||
+                                            addDisable ||
+                                            buttonSetting?.insertAfterDisable,
+                                    }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "success", outline: true, onClick: handleInsertAfter, className: "d-flex", children: t('Insert item after') }) })] })) : (jsx(Fragment$1, { children: " " })), jsx("div", { className: classNames$1('r-toolbar-item', {
+                                'd-none': editDisable || buttonSetting?.deleteAllDisable,
+                            }), "aria-disabled": "false", children: jsx(Button$1$1, { color: "primary", outline: true, onClick: handleDeleteAll, className: "d-flex", children: t('Delete all item') }) }), toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return (item.align === 'left' && (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-left-${index}`)));
                         })] }), jsx("div", { className: "r-toolbar-center", children: toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                         return (item.align === 'center' && (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-center-${index}`)));
                     }) }), jsxs("div", { className: "r-toolbar-right", children: [toolbarSetting?.toolbarBottomOptions?.map((item, index) => {
                             return (item.align === 'right' && (jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template() }, `toolbar-bottom-right-${index}`)));
-                        }), !toolbarSetting?.hiddenSetting && (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classNames$1('r-toolbar-item me-25', { 'd-none': editDisable || addDisable }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxs("ul", { className: "mb-0 pe-50", children: [jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] }))] })] }) }));
+                        }), !toolbarSetting?.hiddenSetting && (jsxs(Fragment$1, { children: [jsx("div", { className: classNames$1('r-toolbar-item me-25'), "aria-disabled": "false", children: jsx(SvgSettings, { className: "text-primary cursor-pointer", onClick: () => setOpenPopupSetupColumn(true) }) }), jsx("div", { className: classNames$1('r-toolbar-item me-25', {
+                                        'd-none': editDisable || addDisable,
+                                    }), "aria-disabled": "false", children: jsxs(UncontrolledDropdown, { className: "dropdown-user nav-item", children: [jsx(DropdownToggle$1, { tag: "div", color: "primary", onClick: (e) => e.preventDefault(), children: jsx(SvgInfo, { className: "cursor-pointer text-primary" }) }), jsx(DropdownMenu$1, { className: "formula-dropdown icon-dropdown", children: jsxs("ul", { className: "mb-0 pe-50", children: [jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + D \u0111\u1EC3 nh\u00E2n b\u1EA3n" }), jsx("li", { style: { fontSize: 13 }, children: "Ch\u1ECDn \u00F4 v\u00E0 Ctrl + V \u0111\u1EC3 d\u00E1n th\u00F4ng tin t\u1EEB excel" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + C \u0111\u1EC3 sao ch\u00E9p h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n v\u00E0o c\u1ED9t STT \u0111\u1EC3 ch\u1ECDn h\u00E0ng v\u00E0 nh\u1EA5n Ctrl + V \u0111\u1EC3 d\u00E1n h\u00E0ng" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2193 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng d\u01B0\u1EDBi" }), jsx("li", { style: { fontSize: 13 }, children: "Nh\u1EA5n Ctrl ho\u1EB7c Alt + Shift + \u2191 \u0111\u1EC3 sao ch\u00E9p d\u1EEF li\u1EC7u \u00F4 cho c\u00E1c d\u00F2ng tr\u00EAn" })] }) })] }) })] }))] })] }) }));
 };
 const RenderToolbarTop = ({ toolbarTopOption, maximize, setMaximize }) => {
@@ -68864,7 +69615,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
 };
 const RenderContentCol = React__default.memo((props) => {
-    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
+    const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, handleCellClick, fieldKey, isMulti, } = props;
     const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
     const checkOverflow = () => {
         const element = document.getElementById(cellId);
@@ -68886,10 +69637,12 @@ const RenderContentCol = React__default.memo((props) => {
     const RenderElement = () => {
         if (col.field === '#' || col.type === '#') {
             return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, onDoubleClick: (e) => {
                     e.preventDefault();
                     handleCloseContext();
@@ -68898,11 +69651,15 @@ const RenderContentCol = React__default.memo((props) => {
         }
         else if (col.type === 'checkbox' || col.field === 'checkbox') {
             return (jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
                     display: 'flex',
-                    justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
-                    alignItems: 'center'
+                    justifyContent: col.textAlign === 'center'
+                        ? 'center'
+                        : col.textAlign === 'right'
+                            ? 'flex-end'
+                            : 'flex-start',
+                    alignItems: 'center',
                 }, onClick: (e) => {
                     setSelectedRows(toggleSelect());
                     e.stopPropagation();
@@ -68912,8 +69669,12 @@ const RenderContentCol = React__default.memo((props) => {
             let value = row[col.field];
             // ✅ Format dữ liệu theo loại cột
             if (col.type === 'numeric') {
-                value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
-                if (!zeroVisiable && !col.zeroVisiable && !(row?.sortOrder < 0 || row?.sortOrder > 100000) && (value === '0' || value === 0)) {
+                value =
+                    formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                if (!zeroVisiable &&
+                    !col.zeroVisiable &&
+                    !(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
+                    (value === '0' || value === 0)) {
                     value = '';
                 }
             }
@@ -68921,31 +69682,43 @@ const RenderContentCol = React__default.memo((props) => {
                 value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
             }
             else if (col.type === 'datetime') {
-                value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                value = value
+                    ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                    : '';
             }
             if (col.template) {
                 value = col.template(row, indexRow) ?? '';
             }
             const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
-            const textColor = isNegative ? formatSetting?.colorNegative ?? 'red' : undefined;
-            const prefix = isNegative ? formatSetting?.prefixNegative ?? '-' : '';
-            const suffix = isNegative ? formatSetting?.suffixNegative ?? '' : '';
-            const displayText = isNegative ? `${prefix}${value}${suffix}` : value ?? '';
+            const textColor = isNegative
+                ? (formatSetting?.colorNegative ?? 'red')
+                : undefined;
+            const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
+            const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
+            const displayText = isNegative
+                ? `${prefix}${value}${suffix}`
+                : (value ?? '');
             return (jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
-                    'r-active-cell': isSelected
+                    'r-active-cell': isSelected,
                 }), style: {
-                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType ? 600 : 400,
-                    fontStyle: row.haveItalicType ? 'italic' : 'normal'
+                    fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
+                        ? 600
+                        : 400,
+                    fontStyle: row.haveItalicType ? 'italic' : 'normal',
                 }, children: [jsx("div", { className: "r-cell-text", style: {
                             display: 'flex',
-                            justifyContent: col.textAlign === 'center' ? 'center' : col.textAlign === 'right' ? 'flex-end' : 'flex-start',
-                            alignItems: 'center'
+                            justifyContent: col.textAlign === 'center'
+                                ? 'center'
+                                : col.textAlign === 'right'
+                                    ? 'flex-end'
+                                    : 'flex-start',
+                            alignItems: 'center',
                         }, children: jsx("div", { id: cellId, style: {
                                 color: textColor,
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'pre',
-                                maxWidth: '100%'
+                                maxWidth: '100%',
                             }, children: displayText }) }), checkOverflow() && (jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsx("div", { style: { color: textColor }, onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -68954,15 +69727,21 @@ const RenderContentCol = React__default.memo((props) => {
     };
     const clickTimerRef = useRef(null);
     return (jsx(Fragment$1, { children: col.visible !== false && col.isGroup !== true && (jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
-                'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight)
+                'fixed-last': (col.fixedType === 'left' &&
+                    indexCol === lastObjWidthFixLeft) ||
+                    (col.fixedType === 'right' &&
+                        indexCol === fisrtObjWidthFixRight),
             }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
+                right: col.fixedType === 'right'
+                    ? objWidthFixRight[indexCol]
+                    : undefined,
             }, onClick: (e) => {
                 const tag = e.target?.nodeName;
                 if (tag !== 'DIV' && tag !== 'TD') {
                     return;
                 }
+                handleCellClick?.(row, col);
                 if (clickTimerRef.current) {
                     window.clearTimeout(clickTimerRef.current);
                 }
@@ -68990,7 +69769,7 @@ const RenderContentCol = React__default.memo((props) => {
 });
 const TableElement = React__default.memo((props) => {
-    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, contextMenuItems, handleContextMenuClick, isLoading } = props;
+    const { contentColumns, dataSource, fieldKey, filterBy, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, orderBy, selectedRows, setContentColumns, setSelectedRows, formatSetting, gridRef, idTable, headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, isMulti, querySetting, searchSetting, searchTerm, columnsAggregate, haveSum, expandsAll, zeroVisiable, setFilterBy, setOrderBy, setExpandsAll, handleDoubleClick, handleCellClick, contextMenuItems, handleContextMenuClick, isLoading, } = props;
     const { t } = useTranslation();
     const [context, setContext] = useState(null);
     const virtualDivRef = useRef(null);
@@ -69036,7 +69815,10 @@ const TableElement = React__default.memo((props) => {
         if (searchTerm) {
             datas = datas.filter((row) => {
                 return searchSetting?.keyField?.some((key) => {
-                    return row[key]?.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());
+                    return row[key]
+                        ?.toString()
+                        .toLowerCase()
+                        .includes(searchTerm.trim().toLowerCase());
                 });
             });
         }
@@ -69045,7 +69827,10 @@ const TableElement = React__default.memo((props) => {
                 return filterBy.every((filter) => {
                     const { key, value, ope } = filter;
                     const rowValue = row[key];
-                    if (rowValue === undefined || rowValue === null || value === undefined || value === null) {
+                    if (rowValue === undefined ||
+                        rowValue === null ||
+                        value === undefined ||
+                        value === null) {
                         return false;
                     }
                     const valStr = String(rowValue).toLowerCase();
@@ -69111,56 +69896,72 @@ const TableElement = React__default.memo((props) => {
                     }
                     let value = row[col.field];
                     if (col.type === 'numeric') {
-                        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                        value =
+                            formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
                     }
                     else if (col.type === 'date') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat)
+                            : '';
                     }
                     else if (col.type === 'datetime') {
-                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                        value = value
+                            ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
+                            : '';
                     }
                     if (col.template) {
                         value = col.template(row, indexRow) ?? '';
                     }
                     return (jsxs(Fragment$1, { children: [jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxs("div", { className: "r-rowcell-div", children: [jsx(SvgChevronRight, { style: {
                                                         marginLeft: level * 20,
-                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)'
+                                                        transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
                                                     }, fontSize: 15, onClick: () => {
                                                         setExpand(!expand);
                                                         setExpandsAll(undefined);
                                                         row.expand = !expand;
                                                     } }), t(col.headerDisplay ?? col.headerText ?? ''), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
-                                        if (indexCol <= firstColSpan || colSum.visible === false || colSum.isGroup === true) {
+                                        if (indexCol <= firstColSpan ||
+                                            colSum.visible === false ||
+                                            colSum.isGroup === true) {
                                             return;
                                         }
                                         let sumValue = row[colSum.field];
-                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
-                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
+                                        const haveSum = row[colSum.field] !== undefined &&
+                                            row[colSum.field] !== null;
+                                        if (!haveSum &&
+                                            colSum.haveSum === true &&
+                                            colSum.type === 'numeric') {
                                             sumValue = row.children.reduce(function (accumulator, currentValue) {
-                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
+                                                return (Number(accumulator ?? 0) +
+                                                    Number(currentValue[colSum.field] ?? 0));
                                             }, 0);
                                         }
                                         if (colSum.type === 'numeric') {
                                             sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
-                                            if (!zeroVisiable && !col.zeroVisiable && (sumValue === '0' || sumValue === 0)) {
+                                            if (!zeroVisiable &&
+                                                !col.zeroVisiable &&
+                                                (sumValue === '0' || sumValue === 0)) {
                                                 sumValue = '';
                                             }
                                         }
                                         return (jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsx("div", { className: "r-rowcell-div", style: {
-                                                    justifyContent: colSum.textAlign ? colSum.textAlign : 'left'
-                                                }, children: (haveSum || colSum.haveSum === true) && Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
-                                                        color: formatSetting?.colorNegative ?? 'red'
+                                                    justifyContent: colSum.textAlign
+                                                        ? colSum.textAlign
+                                                        : 'left',
+                                                }, children: (haveSum || colSum.haveSum === true) &&
+                                                    Number(row[colSum.field] ?? '0') < 0 ? (jsxs("div", { style: {
+                                                        color: formatSetting?.colorNegative ?? 'red',
                                                     }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
-                                    })] }), expand && jsx(RenderContent, { datas: row.children, level: level + 1 })] }, `row-${level}-${indexRow}`));
+                                    })] }), expand && (jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
                 }
                 else {
                     const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
                     return (jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
-                            'r-last-row': level === 0 && indexRow === viewData.length - 1
+                            'r-last-row': level === 0 && indexRow === viewData.length - 1,
                         }), onContextMenu: (e) => {
                             e.preventDefault();
                             handleContextMenu(e, row);
-                        }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
+                        }, children: contentColumns.map((column, indexCol) => (jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick }, indexCol))) }, `row-content-${indexRow}`));
                 }
             }) }));
     });
@@ -69172,7 +69973,7 @@ const TableElement = React__default.memo((props) => {
                 x: e.clientX,
                 y: e.clientY,
                 row,
-                show: true
+                show: true,
             });
         }, 100);
     };
@@ -69196,20 +69997,28 @@ const TableElement = React__default.memo((props) => {
                                 let sumValue = item?.value;
                                 if (!item && col.haveSum === true && col.type === 'numeric') {
                                     sumValue = viewData.reduce(function (accumulator, currentValue) {
-                                        return Number(accumulator ?? 0) + Number(currentValue[col.field] ?? 0);
+                                        return (Number(accumulator ?? 0) +
+                                            Number(currentValue[col.field] ?? 0));
                                     }, 0);
                                 }
                                 if (col.type === 'numeric') {
                                     sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
                                 }
                                 return (jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
-                                        left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
-                                        right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
-                                        textAlign: col.textAlign ? col.textAlign : 'left'
-                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) && Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
-                                                color: formatSetting?.colorNegative ?? 'red'
+                                        left: col.fixedType === 'left'
+                                            ? objWidthFixLeft[indexCol]
+                                            : undefined,
+                                        right: col.fixedType === 'right'
+                                            ? objWidthFixRight[indexCol]
+                                            : undefined,
+                                        textAlign: col.textAlign ? col.textAlign : 'left',
+                                    }, children: jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
+                                            Number(item?.value ?? '0') < 0 ? (jsxs("div", { style: {
+                                                color: formatSetting?.colorNegative ?? 'red',
                                             }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
-                            }) })) })] }), jsx("div", { ref: virtualDivRef }), context && (contextMenuItems?.length ?? 0) > 0 && handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
+                            }) })) })] }), jsx("div", { ref: virtualDivRef }), context &&
+                (contextMenuItems?.length ?? 0) > 0 &&
+                handleContextMenuClick && (jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
                         return (jsxs("div", { className: "r-context-item", onClick: () => {
                                 handleCloseContext();
                                 handleContextMenuClick?.(item, context.row);
@@ -69217,7 +70026,7 @@ const TableElement = React__default.memo((props) => {
                     }) }) })), (viewData.length ?? 0) === 0 && !isLoading && (jsxs("div", { className: "r-no-data", children: [jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] }))] }));
 });
-const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
+const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, handleCellClick, contextMenuItems, headerHeight, handleContextMenuClick, }) => {
     const { t } = useTranslation();
     const gridRef = useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = useState(false);
@@ -69444,7 +70253,7 @@ const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoad
         }), children: [jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && (jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, maximize: maximize, setMaximize: setMaximize })), headerComponent && headerComponent(), jsxs("div", { ref: gridRef, className: "r-gridtable", style: {
                             height: `${heightTable ? `${heightTable}px` : 'auto'}`,
                             position: 'relative',
-                        }, children: [jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
+                        }, children: [jsx(TableElement, { idTable: idTable, gridRef: gridRef, isLoading: isLoading, dataSource: dataSource, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, fieldKey: fieldKey, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedRows: selectedRows, isMulti: isMulti, filterBy: filterBy, orderBy: orderBy, formatSetting: formatSetting, contentColumns: contentColumns, headerColumns: headerColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, searchTerm: searchTerm, searchSetting: searchSetting, columnsAggregate: columnsAggregate, haveSum: haveSum, expandsAll: expandsAll, zeroVisiable: zeroVisiable, contextMenuItems: contextMenuItems, handleContextMenuClick: handleContextMenuClick, setFilterBy: setFilterBy, setSelectedRows: setSelectedRows, setOrderBy: setOrderBy, handleDoubleClick: handleDoubleClick, handleCellClick: handleCellClick, querySetting: querySetting, setContentColumns: setContentColumns, setExpandsAll: setExpandsAll }), isLoading && (jsx("div", { className: "r-loading-overlay", children: jsxs("div", { className: "r-loading", children: [jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
                     if (saveSettingColumn) {