funda-ui 4.7.115 → 4.7.133

package/lib/cjs/Utils/date.d.ts

@@ -95,6 +95,16 @@ declare function getYesterdayDate(v: Date | string): string;
  * @returns {String}  yyyy-MM-dd
  */
 declare function getSpecifiedDate(v: Date | string, days: number): string;
+/**
+ * Calculates the total number of days from today going back a specified number of months.
+ *
+ * @param {number} monthsAgo - The number of months to go back (e.g., 3 means the past 3 months).
+ * @returns {number} The total number of days between the calculated past date and today.
+ *
+ * @example
+ * getDaysInLastMonths(3); // Returns number of days in the past 3 months
+ */
+declare function getDaysInLastMonths(monthsAgo?: number): number;
 /**
  * Get next month date
  * @param {Date | String} v
@@ -134,15 +144,15 @@ declare function getCurrentYear(): number;
 /**
  * Get current month
  * @param {Boolean} padZeroEnabled
- * @returns {Number}
+ * @returns {Number|String}
  */
-declare function getCurrentMonth(padZeroEnabled?: boolean): number;
+declare function getCurrentMonth(padZeroEnabled?: boolean): string | number;
 /**
  * Get current day
  * @param {Boolean} padZeroEnabled
- * @returns {Number}
+ * @returns {Number|String}
  */
-declare function getCurrentDay(padZeroEnabled?: boolean): number;
+declare function getCurrentDay(padZeroEnabled?: boolean): string | number;
 /**
  * Get first and last month day
  * @param {Number} v
@@ -214,4 +224,4 @@ declare function getWeekDatesFromSun(weekOffset: number): Date[];
  * @returns {Array<Date>}
  */
 declare function getWeekDatesFromMon(weekOffset: number): Date[];
-export { isTimeString, getNow, padZero, dateFormat, getDateDetails, isValidDate, isValidHours, isValidMinutesAndSeconds, isValidYear, isValidMonth, isValidDay, getLastDayInMonth, getFirstAndLastMonthDay, getCalendarDate, getFullTime, getTodayDate, getCurrentMonth, getCurrentYear, getCurrentDay, getCurrentDate, getTomorrowDate, getYesterdayDate, getNextMonthDate, getPrevMonthDate, getNextYearDate, getPrevYearDate, getSpecifiedDate, setDateHours, setDateMinutes, setDateDays, timestampToDate, getMonthDates, getWeekDatesFromSun, getWeekDatesFromMon };
+export { isTimeString, getNow, padZero, dateFormat, getDateDetails, isValidDate, isValidHours, isValidMinutesAndSeconds, isValidYear, isValidMonth, isValidDay, getLastDayInMonth, getFirstAndLastMonthDay, getCalendarDate, getFullTime, getTodayDate, getCurrentMonth, getCurrentYear, getCurrentDay, getCurrentDate, getTomorrowDate, getYesterdayDate, getNextMonthDate, getPrevMonthDate, getNextYearDate, getPrevYearDate, getSpecifiedDate, getDaysInLastMonths, setDateHours, setDateMinutes, setDateDays, timestampToDate, getMonthDates, getWeekDatesFromSun, getWeekDatesFromMon };

package/lib/cjs/Utils/date.js

@@ -53,6 +53,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "getCurrentMonth": () => (/* binding */ getCurrentMonth),
 /* harmony export */   "getCurrentYear": () => (/* binding */ getCurrentYear),
 /* harmony export */   "getDateDetails": () => (/* binding */ getDateDetails),
+/* harmony export */   "getDaysInLastMonths": () => (/* binding */ getDaysInLastMonths),
 /* harmony export */   "getFirstAndLastMonthDay": () => (/* binding */ getFirstAndLastMonthDay),
 /* harmony export */   "getFullTime": () => (/* binding */ getFullTime),
 /* harmony export */   "getLastDayInMonth": () => (/* binding */ getLastDayInMonth),
@@ -271,6 +272,25 @@ function getSpecifiedDate(v, days) {
   return specifiedDay;
 }
 
+/**
+ * Calculates the total number of days from today going back a specified number of months.
+ *
+ * @param {number} monthsAgo - The number of months to go back (e.g., 3 means the past 3 months).
+ * @returns {number} The total number of days between the calculated past date and today.
+ *
+ * @example
+ * getDaysInLastMonths(3); // Returns number of days in the past 3 months
+ */
+function getDaysInLastMonths() {
+  var monthsAgo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
+  var today = new Date();
+  var pastDate = new Date();
+  pastDate.setMonth(today.getMonth() - monthsAgo);
+  var diffInMs = today.getTime() - pastDate.getTime();
+  var diffInDays = Math.round(diffInMs / (1000 * 60 * 60 * 24));
+  return diffInDays;
+}
+
 /**
  * Get next month date
  * @param {Date | String} v 
@@ -351,7 +371,7 @@ function getCurrentYear() {
 /**
  * Get current month
  * @param {Boolean} padZeroEnabled 
- * @returns {Number}
+ * @returns {Number|String}
  */
 function getCurrentMonth() {
   var padZeroEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -362,7 +382,7 @@ function getCurrentMonth() {
 /**
  * Get current day
  * @param {Boolean} padZeroEnabled 
- * @returns {Number}
+ * @returns {Number|String}
  */
 function getCurrentDay() {
   var padZeroEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

package/lib/cjs/Utils/time.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Get timeslots from starting and ending time
+ * @param  {string} startTime  -  start time in format "HH:mm"
+ * @param  {string} endTime  -  end time in format "HH:mm"
+ * @param  {number} timeInterval  -  time interval in minutes
+ * @param  {boolean} formatRange  -  if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
+ * @returns {string[]} Array of time slots
+ * @example
+
+console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
+console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+*/
+declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean): string[];
+/**
+ * Get minutes between two dates
+ * @param  {Date} startDate  -  start date
+ * @param  {Date} endDate  -  ebd date
+ * @returns Number
+ */
+declare function getMinutesBetweenDates(startDate: any, endDate: any): number;
+/**
+ * Get minutes between two time
+ * @param  {String} startTime  -  start time
+ * @param  {String} endTime  -  ebd time
+ * @returns Number
+ */
+declare function getMinutesBetweenTime(startTime: any, endTime: any): string;
+/**
+ * Convert HH:MM:SS into minute
+ * @param  {String} timeStr  -  time string
+ * @returns Number
+ */
+declare function convertTimeToMin(timeStr: any): number;
+export { getTimeslots, getMinutesBetweenDates, getMinutesBetweenTime, convertTimeToMin };

package/lib/cjs/Utils/time.js

@@ -0,0 +1,162 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["RPB"] = factory();
+	else
+		root["RPB"] = factory();
+})(this, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "convertTimeToMin": () => (/* binding */ convertTimeToMin),
+/* harmony export */   "getMinutesBetweenDates": () => (/* binding */ getMinutesBetweenDates),
+/* harmony export */   "getMinutesBetweenTime": () => (/* binding */ getMinutesBetweenTime),
+/* harmony export */   "getTimeslots": () => (/* binding */ getTimeslots)
+/* harmony export */ });
+/**
+ * Get timeslots from starting and ending time
+ * @param  {string} startTime  -  start time in format "HH:mm"
+ * @param  {string} endTime  -  end time in format "HH:mm"
+ * @param  {number} timeInterval  -  time interval in minutes
+ * @param  {boolean} formatRange  -  if true returns ranges like "10:00 - 11:00", if false returns single times like "10:00"
+ * @returns {string[]} Array of time slots
+ * @example
+
+console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
+console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+*/
+
+function getTimeslots(startTime, endTime, timeInterval) {
+  var formatRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var parseTime = function parseTime(s) {
+    var c = s.split(':');
+    return parseInt(c[0]) * 60 + parseInt(c[1]);
+  };
+  var convertHours = function convertHours(mins) {
+    var hour = Math.floor(mins / 60);
+    mins = Math.trunc(mins % 60);
+    var converted = pad(hour, 2) + ':' + pad(mins, 2);
+    return converted;
+  };
+  var pad = function pad(str, max) {
+    str = str.toString();
+    return str.length < max ? pad("0" + str, max) : str;
+  };
+
+  // calculate time slot
+  var calculateTimeSlot = function calculateTimeSlot(_startTime, _endTime, _timeInterval) {
+    var timeSlots = [];
+    // Round start and end times to next 30 min interval
+    _startTime = Math.ceil(_startTime / 30) * 30;
+    _endTime = Math.ceil(_endTime / 30) * 30;
+
+    // Start and end of interval in the loop
+    var currentTime = _startTime;
+    while (currentTime < _endTime) {
+      if (formatRange) {
+        var t = convertHours(currentTime) + ' - ' + convertHours(currentTime + _timeInterval);
+        timeSlots.push(t);
+      } else {
+        timeSlots.push(convertHours(currentTime));
+      }
+      currentTime += _timeInterval;
+    }
+    return timeSlots;
+  };
+  var inputEndTime = parseTime(endTime);
+  var inputStartTime = parseTime(startTime);
+  var timeSegment = calculateTimeSlot(inputStartTime, inputEndTime, timeInterval);
+  return timeSegment;
+}
+
+/**
+ * Get minutes between two dates
+ * @param  {Date} startDate  -  start date
+ * @param  {Date} endDate  -  ebd date
+ * @returns Number
+ */
+function getMinutesBetweenDates(startDate, endDate) {
+  var diff = endDate.getTime() - startDate.getTime();
+  return diff / 60000;
+}
+
+/**
+ * Get minutes between two time
+ * @param  {String} startTime  -  start time
+ * @param  {String} endTime  -  ebd time
+ * @returns Number
+ */
+function getMinutesBetweenTime(startTime, endTime) {
+  var pad = function pad(num) {
+    return ("0" + num).slice(-2);
+  };
+  var s = startTime.split(":"),
+    sMin = +s[1] + s[0] * 60,
+    e = endTime.split(":"),
+    eMin = +e[1] + e[0] * 60,
+    diff = eMin - sMin;
+  if (diff < 0) {
+    sMin -= 12 * 60;
+    diff = eMin - sMin;
+  }
+  var h = Math.floor(diff / 60),
+    m = diff % 60;
+  return "" + pad(h) + ":" + pad(m);
+}
+
+/**
+ * Convert HH:MM:SS into minute
+ * @param  {String} timeStr  -  time string
+ * @returns Number
+ */
+function convertTimeToMin(timeStr) {
+  var _time = timeStr.split(':').length === 3 ? "".concat(timeStr) : "".concat(timeStr, ":00");
+  var res = _time.split(':'); // split it at the colons
+
+  // Hours are worth 60 minutes.
+  var minutes = +res[0] * 60 + +res[1];
+  return minutes;
+}
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/lib/cjs/Utils/useIsMobile.js

@@ -127,7 +127,7 @@ const App = () => {
  */
 
 var useIsMobile = function useIsMobile() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 768;
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 600;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMobile = _useState2[0],
@@ -141,7 +141,71 @@ var useIsMobile = function useIsMobile() {
     setIsMounted(true);
     var handleResize = function handleResize() {
       if (window) {
-        setIsMobile(window.innerWidth <= breakpoint);
+        var detectDeviceType = function detectDeviceType() {
+          // 1. First check if window and navigator are available (SSR compatibility)
+          if (typeof window === 'undefined' || !navigator) {
+            return 'desktop'; // Default to desktop
+          }
+
+          // 2. Get user agent string
+          var ua = navigator.userAgent.toLowerCase();
+
+          // 3. Get platform info
+          var platform = navigator.platform.toLowerCase();
+
+          // 4. Check screen characteristics using window.matchMedia
+          var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+          var isPortrait = window.matchMedia('(orientation: portrait)').matches;
+          var isLandscape = window.matchMedia('(orientation: landscape)').matches;
+
+          // 5. Get screen dimensions
+          var screenWidth = window.screen.width;
+          var screenHeight = window.screen.height;
+          var minScreenSize = Math.min(screenWidth, screenHeight);
+          var maxScreenSize = Math.max(screenWidth, screenHeight);
+
+          // Define device characteristics
+          var isTablet =
+          // Traditional UA detection
+          /ipad/.test(ua) || /android/.test(ua) && !/mobile/.test(ua) || /tablet/.test(ua) || /playbook/.test(ua) || /nexus (7|9|10)/.test(ua) || /sm-t/.test(ua) || /huawei(.*)mediapad/.test(ua) ||
+          // Special detection for iPad Pro and newer iPads
+          navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ||
+          // Screen size characteristics (tablets typically fall within this range)
+          minScreenSize >= breakpoint && maxScreenSize <= 1366 && isTouch ||
+          // Specific device detection
+          /kindle|silk|kftt|kfot|kfjwa|kfjwi|kfsowi|kfthwa|kfthwi|kfapwa|kfapwi/i.test(ua);
+          var isMobile = !isTablet && (
+          // Prevent tablets from being detected as phones
+          // Traditional mobile device detection
+          /iphone|ipod|android.*mobile|windows phone|mobi/.test(ua) ||
+          // Screen size characteristics (phones typically smaller than 600px)
+          minScreenSize < breakpoint && isTouch ||
+          // Additional mobile device detection
+          /blackberry|\bbb\d+|meego|webos|palm|phone|pocket|mobile|mini|iemobile/i.test(ua));
+
+          // 6. Comprehensive decision logic
+          if (isMobile) {
+            // Additional check for small tablets
+            if (maxScreenSize >= 1024 && isTouch) {
+              return 'tablet';
+            }
+            return 'mobile';
+          }
+          if (isTablet) {
+            // Additional check for touch-enabled laptops
+            if (maxScreenSize > 1366 && /windows/.test(ua)) {
+              return 'desktop';
+            }
+            return 'tablet';
+          }
+
+          // 7. Check for touch-enabled laptops
+          if (isTouch && /windows/.test(ua) && maxScreenSize > 1366) {
+            return 'desktop';
+          }
+          return 'desktop';
+        };
+        setIsMobile(detectDeviceType() === 'mobile');
       }
     };
 

package/lib/cjs/index.d.ts

@@ -29,12 +29,14 @@ export const NumberInput: any;
 export const Pagination: any;
 export const Radio: any;
 export const RangeSlider: any;
+export const Refresher: any;
 export const RootPortal: any;
 export const ScrollReveal: any;
 export const Scrollbar: any;
 export const SearchBar: any;
 export const Select: any;
 export const ShowMoreLess: any;
+export const SplitterPanel: any;
 export const Stepper: any;
 export const Switch: any;
 export const Table: any;

package/lib/cjs/index.js

@@ -31,12 +31,14 @@ exports.NumberInput = _interopRequireDefault(require("./NumberInput")).default;
 exports.Pagination = _interopRequireDefault(require("./Pagination")).default;
 exports.Radio = _interopRequireDefault(require("./Radio")).default;
 exports.RangeSlider = _interopRequireDefault(require("./RangeSlider")).default;
+exports.Refresher = _interopRequireDefault(require("./Refresher")).default;
 exports.RootPortal = _interopRequireDefault(require("./RootPortal")).default;
 exports.ScrollReveal = _interopRequireDefault(require("./ScrollReveal")).default;
 exports.Scrollbar = _interopRequireDefault(require("./Scrollbar")).default;
 exports.SearchBar = _interopRequireDefault(require("./SearchBar")).default;
 exports.Select = _interopRequireDefault(require("./Select")).default;
 exports.ShowMoreLess = _interopRequireDefault(require("./ShowMoreLess")).default;
+exports.SplitterPanel = _interopRequireDefault(require("./SplitterPanel")).default;
 exports.Stepper = _interopRequireDefault(require("./Stepper")).default;
 exports.Switch = _interopRequireDefault(require("./Switch")).default;
 exports.Table = _interopRequireDefault(require("./Table")).default;

package/lib/css/SplitterPanel/index.css

@@ -0,0 +1,63 @@
+/* ======================================================
+    <!-- Splitter Panel -->
+/* ====================================================== */
+.splitter-panel {
+  --splitter-panel-divider-color: rgba(0, 0, 0, 0.15);
+  --splitter-panel-divider-hover-color: rgba(210, 253, 253, .86);
+  display: flex;
+  position: relative;
+}
+.splitter-panel .splitter-panel-left {
+  width: var(--splitter-panel-left-w, 0);
+}
+.splitter-panel .splitter-panel-divider {
+  position: relative;
+  width: 1px;
+  cursor: col-resize;
+  padding: 0 2px;
+  transition: all 0.25s;
+  z-index: 1;
+}
+.splitter-panel .splitter-panel-divider::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background: var(--splitter-panel-divider-color);
+}
+.splitter-panel .splitter-panel-divider::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -2px;
+  width: 5px;
+  height: 100%;
+}
+.splitter-panel .splitter-panel-divider:hover::after {
+  background: var(--splitter-panel-divider-hover-color);
+}
+.splitter-panel .splitter-panel-right {
+  flex: 1;
+}
+
+.splitter-panel-vertical {
+  display: flex;
+  flex-direction: column;
+}
+.splitter-panel-vertical .splitter-panel-top,
+.splitter-panel-vertical .splitter-panel-bottom {
+  min-height: 50px;
+}
+
+@media (max-width: 767px) {
+  .splitter-panel {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .splitter-panel-vertical {
+    display: none !important;
+  }
+}

package/lib/esm/CascadingSelect/Group.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+import { combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
 
 export type GroupProps = {
+    perColumnHeadersShow?: boolean;
     level: number;
     columnTitle: any[];
     data?: any[any];
@@ -17,6 +18,7 @@ export type GroupProps = {
 export default function Group(props: GroupProps) {
 
     const {
+        perColumnHeadersShow,
         level,
         columnTitle,
         data,
@@ -48,7 +50,7 @@ export default function Group(props: GroupProps) {
                         onClick={(e) => selectEv?.(e, item, index)} 
                     ></div>
                 } else {
-                    return columnTitle[level] === '' ? null : <h3 
+                    return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3 
                     key={index} 
                     className="cas-select__opt-header" 
                     >

package/lib/esm/CascadingSelect/index.tsx

@@ -29,6 +29,7 @@ export type CascadingSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
     label?: React.ReactNode | string;
@@ -88,6 +89,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
         required,
@@ -1116,6 +1118,7 @@ const CascadingSelect = (props: CascadingSelectProps) => {
                                         return (
                                             <li key={level} data-col={level} className="cas-select__items-col">
                                                 <Group
+                                                    perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
                                                     data={item}

package/lib/esm/CascadingSelectE2E/Group.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+import { combinedCls } from 'funda-utils/dist/cjs/cls';
 
 export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
 
 export type GroupProps = {
+    perColumnHeadersShow?: boolean;
     level: number;
     columnTitle: any[];
     data?: any[any];
@@ -16,6 +17,7 @@ export type GroupProps = {
 export default function Group(props: GroupProps) {
 
     const {
+        perColumnHeadersShow,
         level,
         columnTitle,
         data,
@@ -48,7 +50,7 @@ export default function Group(props: GroupProps) {
                         onClick={(e) => selectEv?.(e, item, index)} 
                     ></div>
                 } else {
-                    return columnTitle[level] === '' ? null : <h3 
+                    return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3 
                     key={index} 
                     className="cas-select-e2e__opt-header"
                     >

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -45,6 +45,7 @@ export type CascadingSelectE2EProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
     label?: React.ReactNode | string;
@@ -106,6 +107,7 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
         required,
@@ -1373,6 +1375,7 @@ const CascadingSelectE2E = (props: CascadingSelectE2EProps) => {
                                         return (
                                             <li key={level} data-col={level} className="cas-select-e2e__items-col">
                                                 <Group
+                                                    perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
                                                     data={item}