funda-ui 4.7.133 → 4.7.152

package/lib/cjs/SplitterPanel/index.js

@@ -459,10 +459,10 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             // Set the mounted state to true after the component has mounted
             setIsMounted(true);
             var handleResize = function handleResize() {
-              if (window) {
+              if (typeof window !== 'undefined') {
                 var detectDeviceType = function detectDeviceType() {
                   // 1. First check if window and navigator are available (SSR compatibility)
-                  if (typeof window === 'undefined' || !navigator) {
+                  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
                     return 'desktop'; // Default to desktop
                   }
 
@@ -470,7 +470,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                   var ua = navigator.userAgent.toLowerCase();
 
                   // 3. Get platform info
-                  var platform = navigator.platform.toLowerCase();
+                  var platform = navigator.platform ? navigator.platform.toLowerCase() : '';
 
                   // 4. Check screen characteristics using window.matchMedia
                   var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

package/lib/cjs/Switch/index.js

@@ -533,7 +533,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
   var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
   var idRes = id || uniqueID;
   var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)( false || false),
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     val = _useState2[0],
     setVal = _useState2[1]; // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
@@ -569,7 +569,9 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    setVal(checked);
+    if (typeof checked === 'boolean') {
+      setVal(checked);
+    }
   }, [checked]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),

package/lib/cjs/Utils/format-string.d.ts

@@ -32,13 +32,14 @@ declare function trimAll(input: string): string;
  */
 declare function multiSpacesToSingle(input: string): string;
 /**
- * Convert HTML text to plain text
+ * Convert HTML text to plain text (Remove html tag content)
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */
 declare function htmlToPlain(input: string): string;
 /**
  * Strip HTML tags and their content
+ * !!!Important: It will remove nested tags
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */

package/lib/cjs/Utils/format-string.js

@@ -67,7 +67,7 @@ __webpack_require__.r(__webpack_exports__);
  * @returns {string} The processed string
  */
 function rmSpec(input) {
-  return input.replace(/[^a-zA-Z0-9 \u4E00-\u9FFF]/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/[^a-zA-Z0-9 \u4E00-\u9FFF]/g, "");
 }
 
 /**
@@ -76,7 +76,7 @@ function rmSpec(input) {
  * @returns {string} The processed string
  */
 function onlyNumAndLetter(input) {
-  return input.replace(/[^a-zA-Z0-9 ]/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/[^a-zA-Z0-9 ]/g, "");
 }
 
 /**
@@ -85,7 +85,7 @@ function onlyNumAndLetter(input) {
  * @returns {string} The processed string
  */
 function rmAllSpace(input) {
-  return input.replace(/\s/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/\s/g, "");
 }
 
 /**
@@ -94,7 +94,7 @@ function rmAllSpace(input) {
  * @returns {string} The processed string
  */
 function trimAll(input) {
-  return input.replace(/(^\s+)|(\s+$)/g, "");
+  return input === null || input === void 0 ? void 0 : input.replace(/(^\s+)|(\s+$)/g, "");
 }
 
 /**
@@ -103,25 +103,35 @@ function trimAll(input) {
  * @returns {string} The processed string
  */
 function multiSpacesToSingle(input) {
-  return input.replace(/\s+(\W)/g, ' ');
+  return input === null || input === void 0 ? void 0 : input.replace(/\s+(\W)/g, ' ');
 }
 
 /**
- * Convert HTML text to plain text
+ * Convert HTML text to plain text (Remove html tag content)
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */
+/*
+Examples:
+console.log(htmlToPlain("<p>Hello <b>World</b></p>"));   // Hello World
+*/
 function htmlToPlain(input) {
-  return input.replace(/(<([^>]+)>)/ig, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/(<([^>]+)>)/ig, '');
 }
 
 /**
- * Strip HTML tags and their content
+ * Strip HTML tags and their content 
+ * !!!Important: It will remove nested tags
  * @param {string} input - The input string to process
  * @returns {string} The processed string
  */
+/*
+Examples:
+console.log(stripTagsAndContent("<p>Hello <b>World</b></p>"));  // World
+console.log(stripTagsAndContent("Hello <b>World</b>"));  // Hello
+*/
 function stripTagsAndContent(input) {
-  return input.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/<\/?[^>]+(>|$)(.*?)<\/?[^>]+(>|$)/ig, '');
 }
 
 /**
@@ -130,7 +140,7 @@ function stripTagsAndContent(input) {
  * @returns {string} The processed URL
  */
 function removeFirstLastSlash(input) {
-  return input.replace(/^\/|\/$/g, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/^\/|\/$/g, '');
 }
 
 /**
@@ -139,7 +149,7 @@ function removeFirstLastSlash(input) {
  * @returns {string} The processed URL
  */
 function removeTrailingSlash(input) {
-  return input.replace(/\/+$/, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/\/+$/, '');
 }
 
 /**
@@ -148,7 +158,7 @@ function removeTrailingSlash(input) {
  * @returns {string} The processed URL
  */
 function removeFirstSlash(input) {
-  return input.replace(/\//, '');
+  return input === null || input === void 0 ? void 0 : input.replace(/\//, '');
 }
 
 /******/ 	return __webpack_exports__;

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

@@ -17,18 +17,18 @@ declare function getTimeslots(startTime: string, endTime: string, timeInterval:
  * @param  {Date} endDate  -  ebd date
  * @returns Number
  */
-declare function getMinutesBetweenDates(startDate: any, endDate: any): number;
+declare function getMinutesBetweenDates(startDate: Date, endDate: Date): 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;
+declare function getMinutesBetweenTime(startTime: string, endTime: string): string;
 /**
  * Convert HH:MM:SS into minute
  * @param  {String} timeStr  -  time string
  * @returns Number
  */
-declare function convertTimeToMin(timeStr: any): number;
+declare function convertTimeToMin(timeStr: string): number;
 export { getTimeslots, getMinutesBetweenDates, getMinutesBetweenTime, convertTimeToMin };

package/lib/cjs/Utils/useIsMobile.js

@@ -140,10 +140,10 @@ var useIsMobile = function useIsMobile() {
     // Set the mounted state to true after the component has mounted
     setIsMounted(true);
     var handleResize = function handleResize() {
-      if (window) {
+      if (typeof window !== 'undefined') {
         var detectDeviceType = function detectDeviceType() {
           // 1. First check if window and navigator are available (SSR compatibility)
-          if (typeof window === 'undefined' || !navigator) {
+          if (typeof window === 'undefined' || typeof navigator === 'undefined') {
             return 'desktop'; // Default to desktop
           }
 
@@ -151,7 +151,7 @@ var useIsMobile = function useIsMobile() {
           var ua = navigator.userAgent.toLowerCase();
 
           // 3. Get platform info
-          var platform = navigator.platform.toLowerCase();
+          var platform = navigator.platform ? navigator.platform.toLowerCase() : '';
 
           // 4. Check screen characteristics using window.matchMedia
           var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

package/lib/css/CascadingSelect/index.css

@@ -89,10 +89,11 @@
   --cas-select-items-li-border-color: #eee;
   --cas-select-loader-color: #000000;
   --cas-select-clean-btn-color: #b5b5b5;
+  --cas-select-searchbox-border-color: #ddd;
   box-shadow: var(--cas-select-items-box-shadow);
   position: absolute;
   left: auto;
-  max-height: 350px;
+  max-height: 300px;
   border: 1px solid var(--cas-select-items-border-color);
   background: var(--cas-select-items-bg);
   padding: 10px;
@@ -106,6 +107,7 @@
   display: none;
   z-index: 1055; /* --bs-modal-zindex */
   /* each item */
+  /* Searchbox */
   /* Options */
 }
 .cas-select__items-wrapper.active {
@@ -124,19 +126,22 @@
   top: 0;
   margin-left: 5px;
   z-index: 1;
-  z-index: 1;
   width: 12px;
   height: 12px;
   text-align: center;
-  transform-origin: bottom;
+  transform-origin: center;
+  transform: translate(2px, 5px) rotate(0);
   animation: 1s linear infinite cas-select__spinner;
 }
+.cas-select__items-wrapper .cas-select__items-loader svg {
+  vertical-align: top;
+}
 .cas-select__items-wrapper .cas-select__items-loader svg path {
   fill: var(--cas-select-loader-color);
 }
 @keyframes cas-select__spinner {
   to {
-    transform: rotate(-360deg);
+    transform: translate(2px, 5px) rotate(-360deg);
   }
 }
 .cas-select__items-wrapper .cas-select__close svg {
@@ -167,6 +172,12 @@
   margin-right: 0;
   border-right: none;
 }
+.cas-select__items-wrapper .cas-select__items-col-searchbox input {
+  border: 1px solid var(--cas-select-searchbox-border-color);
+  border-radius: 0.35rem;
+  background: transparent;
+  font-size: 0.75rem;
+}
 .cas-select__items-wrapper .cas-select__opt {
   padding: var(--cas-select-opt-padding-y) var(--cas-select-opt-padding-x);
   font-size: var(--cas-select-opt-font-size);

package/lib/css/CascadingSelectE2E/index.css

@@ -89,10 +89,11 @@
   --cas-select-e2e-items-li-border-color: #eee;
   --cas-select-e2e-loader-color: #000000;
   --cas-select-e2e-clean-btn-color: #b5b5b5;
+  --cas-select-e2e-searchbox-border-color: #ddd;
   box-shadow: var(--cas-select-e2e-items-box-shadow);
   position: absolute;
   left: auto;
-  max-height: 350px;
+  max-height: 300px;
   border: 1px solid var(--cas-select-e2e-items-border-color);
   background: var(--cas-select-e2e-items-bg);
   padding: 10px;
@@ -106,6 +107,7 @@
   display: none;
   z-index: 1055; /* --bs-modal-zindex */
   /* each item */
+  /* Searchbox */
   /* Options */
 }
 .cas-select-e2e__items-wrapper.active {
@@ -124,19 +126,22 @@
   top: 0;
   margin-left: 5px;
   z-index: 1;
-  z-index: 1;
   width: 12px;
   height: 12px;
   text-align: center;
-  transform-origin: bottom;
+  transform-origin: center;
+  transform: translate(2px, 5px) rotate(0);
   animation: 1s linear infinite cas-select-e2e__spinner;
 }
+.cas-select-e2e__items-wrapper .cas-select-e2e__items-loader svg {
+  vertical-align: top;
+}
 .cas-select-e2e__items-wrapper .cas-select-e2e__items-loader svg path {
   fill: var(--cas-select-e2e-loader-color);
 }
 @keyframes cas-select-e2e__spinner {
   to {
-    transform: rotate(-360deg);
+    transform: translate(2px, 5px) rotate(-360deg);
   }
 }
 .cas-select-e2e__items-wrapper .cas-select-e2e__close svg {
@@ -167,6 +172,12 @@
   margin-right: 0;
   border-right: none;
 }
+.cas-select-e2e__items-wrapper .cas-select-e2e__items-col-searchbox input {
+  border: 1px solid var(--cas-select-e2e-searchbox-border-color);
+  border-radius: 0.35rem;
+  background: transparent;
+  font-size: 0.75rem;
+}
 .cas-select-e2e__items-wrapper .cas-select-e2e__opt {
   padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);
   font-size: var(--cas-select-e2e-opt-font-size);

package/lib/css/Select/index.css

@@ -56,6 +56,8 @@
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor {
   display: inline-block;
   color: var(--cus-sel-placeholder-color);
+  width: 100%;
+  /* Text preview */
 }
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.animated {
   animation: 1s mf-sel-blink step-end infinite;
@@ -63,6 +65,13 @@
 .custom-select__wrapper .custom-select-multi__control-blinking-cursor.control-placeholder {
   color: var(--cus-sel-input-placeholder-color);
 }
+.custom-select__wrapper .custom-select-multi__control-blinking-cursor > span {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
 .custom-select__wrapper .custom-select-multi__control-blinking-following-cursor {
   position: absolute;
   top: 0.375rem;
@@ -269,9 +278,12 @@
   --cus-sel-listgroup-content-scrollbar-w: 10px;
   --cus-sel-listgroup-grouptitle-color: #a2a2a2;
   --cus-sel-listgroup-groupborder-color: #d8d8d8;
+  --cus-sel-loader-color: #000000;
   display: none;
   min-width: var(--cus-sel-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */
+  /*------ Loader ------*/
+  /*------ Options ------*/
   /*------ Multiple selection ------*/
   /*------ Group ------*/
   /*------ Extended buttons of Multiple selection ------*/
@@ -280,6 +292,27 @@
 .custom-select__options-wrapper.active {
   display: block !important;
 }
+.custom-select__options-wrapper .cus-select-loader {
+  pointer-events: none;
+  z-index: 1;
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  transform-origin: center;
+  transform: translate(-5px, 0) rotate(0);
+  animation: 1s linear infinite cus-select__spinner;
+}
+.custom-select__options-wrapper .cus-select-loader svg {
+  vertical-align: top;
+}
+.custom-select__options-wrapper .cus-select-loader svg path {
+  fill: var(--cus-sel-loader-color);
+}
+@keyframes cus-select__spinner {
+  to {
+    transform: translate(-5px, 0) rotate(-360deg);
+  }
+}
 .custom-select__options-wrapper .custom-select__options-contentlist {
   overflow: hidden;
   overflow-y: auto;

package/lib/esm/CascadingSelect/index.scss

@@ -125,11 +125,13 @@
     --cas-select-loader-color: #000000;
     --cas-select-clean-btn-color: #b5b5b5;
     
+    --cas-select-searchbox-border-color: #ddd;
+    
 
     box-shadow: var(--cas-select-items-box-shadow);
     position: absolute;
     left: auto;
-    max-height: 350px;
+    max-height: 300px;
     border: 1px solid var(--cas-select-items-border-color);
     background: var(--cas-select-items-bg);
     padding: 10px;
@@ -165,21 +167,25 @@
         top: 0;
         margin-left: 5px;
         z-index: 1;
-        z-index: 1;
         width: 12px;
         height: 12px;
         text-align: center;
-        transform-origin: bottom;
+        transform-origin: center;
+        transform: translate(2px, 5px) rotate(0);
         animation: 1s linear infinite cas-select__spinner;
 
-        svg path {
-            fill: var(--cas-select-loader-color);
+        svg {
+            vertical-align: top;
+            
+            path {
+                fill: var(--cas-select-loader-color);
+            }
         }
     }
 
     @keyframes cas-select__spinner {
         to {
-            transform: rotate(-360deg);
+            transform: translate(2px, 5px) rotate(-360deg);
         }
     }
 
@@ -224,7 +230,16 @@
     }
 
 
-
+    /* Searchbox */
+    .cas-select__items-col-searchbox {
+        input {
+            border: 1px solid var(--cas-select-searchbox-border-color);
+            border-radius: 0.35rem;
+            background: transparent;
+            font-size: 0.75rem;
+        }
+    }
+    
     /* Options */
     .cas-select__opt {
         padding: var(--cas-select-opt-padding-y) var(--cas-select-opt-padding-x);

package/lib/esm/CascadingSelect/index.tsx

@@ -15,6 +15,9 @@ import {
 import {
     getAbsolutePositionOfStage
 } from 'funda-utils/dist/cjs/getElementProperty';
+import {
+    htmlToPlain
+} from 'funda-utils/dist/cjs/format-string';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
@@ -29,6 +32,8 @@ export type CascadingSelectProps = {
     wrapperClassName?: string;
     controlClassName?: string;
     controlExClassName?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
     perColumnHeadersShow?: boolean;
     exceededSidePosOffset?: number;
     value?: string;
@@ -89,6 +94,8 @@ const CascadingSelect = (props: CascadingSelectProps) => {
         wrapperClassName,
         controlClassName,
         controlExClassName,
+        searchable = false,
+        searchPlaceholder = '',
         perColumnHeadersShow = true,
         exceededSidePosOffset,
         disabled,
@@ -135,6 +142,8 @@ const CascadingSelect = (props: CascadingSelectProps) => {
     const valRef = useRef<any>(null);
     const listRef = useRef<any>(null);
 
+    // searchable
+    const [columnSearchKeywords, setColumnSearchKeywords] = useState<string[]>([]);
 
     // exposes the following methods
     useImperativeHandle(
@@ -1079,6 +1088,16 @@ const CascadingSelect = (props: CascadingSelectProps) => {
 
     }, [value]);
 
+    // Automatically complete and truncate column Search Keywords each time the number of columns changes
+    useEffect(() => {
+        if (listData.current.length !== columnSearchKeywords.length) {
+            setColumnSearchKeywords(
+                Array(listData.current.length).fill('').map((v, i) => columnSearchKeywords[i] || '')
+            );
+        }
+    }, [listData.current.length]);
+
+
     return (
         <>
 
@@ -1115,13 +1134,42 @@ const CascadingSelect = (props: CascadingSelectProps) => {
                                 {listData.current.map((item: any, level: number) => {
 
                                     if (item.length > 0) {
+
+                                        // filter data
+                                        let filteredItem = item;
+                                        if (searchable && columnSearchKeywords[level]) {
+                                            const keyword = columnSearchKeywords[level].toLowerCase();
+                                            filteredItem = item.filter((opt: any) =>
+                                                (htmlToPlain(opt.name) || '').toLowerCase().includes(keyword)
+                                            );
+                                        }
+
+
                                         return (
                                             <li key={level} data-col={level} className="cas-select__items-col">
+               
+                                                {/* SEARCH BOX */}
+                                                {searchable && (
+                                                    <div className="cas-select__items-col-searchbox">
+                                                        <input
+                                                            type="text"
+                                                            placeholder={searchPlaceholder}
+                                                            value={columnSearchKeywords[level] || ''}
+                                                            onChange={e => {
+                                                                const newKeywords = [...columnSearchKeywords];
+                                                                newKeywords[level] = e.target.value;
+                                                                setColumnSearchKeywords(newKeywords);
+                                                            }}
+                                                        />
+                                                    </div>
+                                                )}
+                                                {/* /SEARCH BOX */}
+
                                                 <Group
                                                     perColumnHeadersShow={perColumnHeadersShow}
                                                     level={level}
                                                     columnTitle={columnTitleData}
-                                                    data={item}
+                                                    data={filteredItem}  // filter result
                                                     cleanNodeBtnClassName={cleanNodeBtnClassName}
                                                     cleanNodeBtnContent={cleanNodeBtnContent}
                                                     selectEv={(e, value, index, ) => handleClickItem(e, value, index, level, listData.current)}

package/lib/esm/CascadingSelectE2E/Group.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
 export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
 
 export type GroupProps = {

package/lib/esm/CascadingSelectE2E/index.scss

@@ -127,11 +127,12 @@
     --cas-select-e2e-loader-color: #000000;
     --cas-select-e2e-clean-btn-color: #b5b5b5;
     
+    --cas-select-e2e-searchbox-border-color: #ddd;
 
     box-shadow: var(--cas-select-e2e-items-box-shadow);
     position: absolute;
     left: auto;
-    max-height: 350px;
+    max-height: 300px;
     border: 1px solid var(--cas-select-e2e-items-border-color);
     background: var(--cas-select-e2e-items-bg);
     padding: 10px;
@@ -160,6 +161,7 @@
         padding: 0;
     }
 
+
     .cas-select-e2e__items-loader {
         position: absolute;
         pointer-events: none;
@@ -167,21 +169,25 @@
         top: 0;
         margin-left: 5px;
         z-index: 1;
-        z-index: 1;
         width: 12px;
         height: 12px;
         text-align: center;
-        transform-origin: bottom;
+        transform-origin: center;
+        transform: translate(2px, 5px) rotate(0);
         animation: 1s linear infinite cas-select-e2e__spinner;
 
-        svg path {
-            fill: var(--cas-select-e2e-loader-color);
+        svg {
+            vertical-align: top;
+            
+            path {
+                fill: var(--cas-select-e2e-loader-color);
+            }
         }
     }
 
     @keyframes cas-select-e2e__spinner {
         to {
-            transform: rotate(-360deg);
+            transform: translate(2px, 5px) rotate(-360deg);
         }
     }
 
@@ -227,6 +233,17 @@
 
 
 
+    /* Searchbox */
+    .cas-select-e2e__items-col-searchbox {
+        input {
+            border: 1px solid var(--cas-select-e2e-searchbox-border-color);
+            border-radius: 0.35rem;
+            background: transparent;
+            font-size: 0.75rem;
+        }
+    }
+    
+
     /* Options */
     .cas-select-e2e__opt {
         padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);