funuicss 3.4.3 → 3.4.5

package/css/fun.css

@@ -2456,6 +2456,7 @@ h6, .h6 {
 }
 
 
+
 /*buttons*/
 .button {
   border: none;
@@ -3519,12 +3520,10 @@ background-color: rgba(var(--borderRgb), 0.3);
 }
 
 
-.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius); isolation: isolate;}
+.custom-select {position: relative; width: 100%; border-radius: var(--InputButtonBorderRadius); }
 
 .custom-select.fullWidth {max-width: none;}
 
-
-
 .select-trigger {
 display: flex;
 align-items: center;
@@ -3631,18 +3630,19 @@ border-top: none;
 border-radius: 0 0 0.5rem 0.5rem;
 max-height: 250px;
 overflow: hidden;
- z-index: 9999;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: var(--card);
+z-index: 1000 !important;
 }
 
 .select-dropdown.open {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
+
 }
 
 .select-dropdown.rounded {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.4.3",
+  "version": "3.4.5",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/select/Select.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var Select = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p;
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p;
     var _q = (0, react_1.useState)(false), isOpen = _q[0], setIsOpen = _q[1];
     var _r = (0, react_1.useState)(null), selectedOption = _r[0], setSelectedOption = _r[1];
     var _s = (0, react_1.useState)(''), searchQuery = _s[0], setSearchQuery = _s[1];

package/ui/table/Table.js

@@ -89,6 +89,7 @@ var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
 var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
 var ci_1 = require("react-icons/ci");
+var io5_1 = require("react-icons/io5");
 function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
@@ -105,7 +106,7 @@ function Table(_a) {
     var endIndex = data ? Math.min(startIndex + pageSize, ((_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.length) || 0) : 0;
     var _j = (0, react_1.useState)(null), selectedField = _j[0], setSelectedField = _j[1];
     var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
-    var _l = (0, react_1.useState)(false), showSearch = _l[0], setshowSearch = _l[1];
+    var _l = (0, react_1.useState)(true), showSearch = _l[0], setshowSearch = _l[1];
     var _m = (0, react_1.useState)(""), searchQuery = _m[0], setsearchQuery = _m[1];
     // Enhanced filter logic:
     var normalize = function (val) { return val === null || val === void 0 ? void 0 : val.toString().toLowerCase().trim(); };
@@ -197,10 +198,10 @@ function Table(_a) {
                                 React.createElement("div", null,
                                     React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
                                     React.createElement(Text_1.default, { text: filteredData.length, weight: 600, color: 'primary' }))),
-                    data && filterableFields ?
+                    data ?
                         React.createElement("div", null,
                             React.createElement(Flex_1.default, { width: '100%', wrap: 'nowrap', alignItems: 'center', gap: 0.7 },
-                                !selectedField && !showSearch &&
+                                !selectedField && !showSearch && filterableFields &&
                                     React.createElement("div", { className: '' },
                                         React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                                 { text: '🔍 Filter', value: '' },
@@ -209,7 +210,7 @@ function Table(_a) {
                                                 text: field,
                                                 value: field
                                             }); }), true) })),
-                                selectedField && !showSearch && (React.createElement("div", { className: '' },
+                                selectedField && !showSearch && filterableFields && (React.createElement("div", { className: '' },
                                     React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full', fullWidth: true, value: selectedValue || '', onChange: function (e) {
                                             if (e === 'clear_all') {
                                                 setSelectedField('');
@@ -235,8 +236,10 @@ function Table(_a) {
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement("div", { onClick: function () { return setshowSearch(false); } },
                                                 React.createElement(ToolTip_1.default, null,
-                                                    React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
-                                                    React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Close Search" })))))
+                                                    filterableFields ? React.createElement(io5_1.IoFilterOutline, null)
+                                                        :
+                                                            React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
+                                                    React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
                                     :
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement(ToolTip_1.default, null,