funuicss 3.5.0 → 3.5.2

package/css/fun.css

@@ -3630,7 +3630,7 @@ border-top: none;
 border-radius: 0 0 0.5rem 0.5rem;
 max-height: 250px;
 overflow: hidden;
-opacity: 0;
+/* opacity: 0; */
 visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -3639,7 +3639,7 @@ z-index: 1000 !important;
 }
 
 .select-dropdown.open {
-opacity: 1;
+/* opacity: 1; */
 visibility: visible;
 transform: translateY(0);
 
@@ -3774,6 +3774,467 @@ padding-right: 2.5rem;
   
 }
 
+
+/* SearchableInput.css - Matching your theme format */
+
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+}
+
+/* Main wrapper */
+.searchable-input-wrapper {
+  position: relative;
+  display: inline-block;
+  font-family: inherit;
+}
+
+.searchable-input-wrapper.full-width {
+  display: block;
+  width: 100%;
+}
+
+/* Label styles */
+.searchable-input__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+  line-height: 1.4;
+}
+
+/* Container for input and dropdown */
+.searchable-input__container {
+  position: relative;
+  display: block;
+}
+
+/* Input wrapper with icons */
+.searchable-input__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* Base input styles */
+.searchable-input {
+  width: 100%;
+  height: var(--inputHeight);
+  padding: 0.6rem 0.8rem;
+  font-size: inherit;
+  line-height: 1.5;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  border: none;
+  border-bottom: var(--inputBorder) solid var(--border-color);
+  border-radius: 0;
+  outline: none;
+  transition: 0.1s linear;
+}
+
+.searchable-input:focus {
+  border-bottom: var(--inputBorder) solid var(--primary);
+}
+
+.searchable-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* Full width modifier */
+.searchable-input.full-width {
+  width: 100%;
+}
+
+/* Status modifiers */
+.searchable-input.success-input {
+  border-bottom: var(--inputBorder) solid var(--success) !important;
+}
+
+.searchable-input.warning-input {
+  border-bottom: var(--inputBorder) solid var(--warning) !important;
+}
+
+.searchable-input.danger-input {
+  border-bottom: var(--inputBorder) solid var(--danger) !important;
+}
+
+.searchable-input.success-input:focus,
+.searchable-input.warning-input:focus,
+.searchable-input.danger-input:focus {
+  outline: none !important;
+}
+
+/* Bordered input styles */
+.searchable-input.borderedInput {
+  border: var(--border);
+  border-radius: var(--InputButtonBorderRadius);
+  transition: 0.1s linear;
+  padding: 0.6rem 0.5rem;
+}
+
+.searchable-input.borderedInput:focus {
+  outline: var(--input_outline_size) solid var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input.success-input.borderedInput {
+  border: var(--inputBorder) solid var(--success) !important;
+  outline: var(--input_outline_size) solid var(--success);
+}
+
+.searchable-input.warning-input.borderedInput {
+  border: var(--inputBorder) solid var(--warning) !important;
+  outline: var(--input_outline_size) solid var(--warning);
+}
+
+.searchable-input.danger-input.borderedInput {
+  border: var(--inputBorder) solid var(--danger) !important;
+  outline: var(--input_outline_size) solid var(--danger);
+}
+
+/* Borderless input styles */
+.searchable-input.borderless {
+  border: none !important;
+  outline: none !important;
+  background-color: var(--light);
+}
+
+.searchable-input.borderless:focus {
+  border: none !important;
+  outline: none !important;
+  background-color: rgba(var(--borderRgb), 0.3);
+}
+
+/* Flat modifier */
+.searchable-input.flat {
+  border-radius: 0;
+}
+
+/* No outline */
+.searchable-input.no-outline {
+  outline: none;
+}
+
+/* Rounded modifiers */
+.searchable-input.round,
+.searchable-input.rounded {
+  border-radius: 100rem !important;
+  padding: var(--inputRoundedPadding);
+}
+
+.searchable-input.left-rounded {
+  border-top-left-radius: 100rem !important;
+  border-bottom-left-radius: 100rem !important;
+  padding-left: var(--inputRoundedPadding);
+}
+
+.searchable-input.right-rounded {
+  border-top-right-radius: 100rem !important;
+  border-bottom-right-radius: 100rem !important;
+  padding-right: var(--inputRoundedPadding);
+}
+
+/* Icon spacing modifiers */
+.searchable-input.with-left-icon {
+  padding-left: 2.5rem;
+}
+
+.searchable-input.with-clear {
+  padding-right: 4.5rem;
+}
+
+/* Disabled state */
+.searchable-input:disabled {
+  background-color: var(--disabled-bg, var(--light));
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Left icon */
+.searchable-input__icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: var(--text-muted);
+  z-index: 1;
+}
+
+.searchable-input__icon--left {
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Right actions container */
+.searchable-input__actions {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 1;
+}
+
+/* Clear button */
+.searchable-input__clear-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: none;
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: 0.1s linear;
+}
+
+.searchable-input__clear-btn:hover {
+  color: var(--text-color);
+  background-color: rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input__clear-btn:focus {
+  outline: var(--input_outline_size) solid var(--primary);
+}
+
+/* Caret container */
+.searchable-input__caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+/* Caret icon */
+.searchable-input__caret-icon {
+  transition: transform 0.2s ease;
+}
+
+.searchable-input__caret-icon--open {
+  transform: rotate(180deg);
+}
+
+/* Loading spinner */
+.searchable-input__spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgba(var(--borderRgb), 0.3);
+  border-top: 2px solid var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Dropdown */
+.searchable-input__dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--raiseThemes);
+  backdrop-filter: var(--raiseBackdrop);
+  border: var(--border);
+  border-radius: var(--InputButtonBorderRadius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  animation: dropdown-appear 0.15s ease-out;
+}
+
+.searchable-input__dropdown--up {
+  bottom: 100%;
+  margin-bottom: 0.25rem;
+}
+
+.searchable-input__dropdown--down {
+  top: 100%;
+  margin-top: 0.25rem;
+}
+
+@keyframes dropdown-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Dropdown content */
+.searchable-input__dropdown-content {
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  max-height: 12.5rem;
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar {
+  width: 0.375rem;
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar-track {
+  background: rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar-thumb {
+  background: rgba(var(--borderRgb), 0.3);
+  border-radius: 0.1875rem;
+}
+
+.searchable-input__dropdown-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--borderRgb), 0.5);
+}
+
+/* Option item */
+.searchable-input__option {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: 0.1s linear;
+  border-bottom: 1px solid rgba(var(--borderRgb), 0.1);
+  color: var(--text-color);
+}
+
+.searchable-input__option:last-child {
+  border-bottom: none;
+}
+
+.searchable-input__option:hover {
+  background-color: rgba(var(--borderRgb), 0.1);
+}
+
+.searchable-input__option--highlighted {
+  background-color: rgba(var(--primaryRgb), 0.1);
+}
+
+.searchable-input__option--selected {
+  background-color: rgba(var(--primaryRgb), 0.2);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* Option text */
+.searchable-input__option-text {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: inherit;
+  margin-bottom: 0.125rem;
+}
+
+/* Option value (when different from text) */
+.searchable-input__option-value {
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--text-muted);
+}
+
+.searchable-input__option--selected .searchable-input__option-value {
+  color: var(--primary);
+}
+
+/* Highlight matching text */
+.searchable-input__highlight {
+  background-color: var(--warning);
+  color: var(--text-color);
+  font-weight: 600;
+  padding: 0.0625rem 0.125rem;
+  border-radius: 0.125rem;
+}
+
+/* No data message */
+.searchable-input__no-data {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+/* Extra content */
+.searchable-input__extra {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .searchable-input-wrapper {
+    width: 100%;
+  }
+  
+  .searchable-input {
+    min-height: var(--inputHeight);
+    font-size: 1rem; /* Prevents zoom on iOS */
+  }
+  
+  .searchable-input__dropdown {
+    left: -0.25rem;
+    right: -0.25rem;
+  }
+}
+
+/* Focus-visible for better accessibility */
+.searchable-input:focus-visible {
+  outline: var(--input_outline_size) solid var(--primary);
+  outline-offset: 0.125rem;
+}
+
+.searchable-input__clear-btn:focus-visible {
+  outline: var(--input_outline_size) solid var(--primary);
+  outline-offset: 0.0625rem;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .searchable-input {
+    border-width: 0.1875rem;
+  }
+  
+  .searchable-input__option--highlighted {
+    background-color: var(--text-color);
+    color: var(--background-color);
+  }
+  
+  .searchable-input__highlight {
+    background-color: var(--warning);
+    color: var(--text-color);
+    border: 1px solid var(--text-color);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .searchable-input,
+  .searchable-input__caret-icon,
+  .searchable-input__clear-btn,
+  .searchable-input__option {
+    transition: none;
+  }
+  
+  .searchable-input__dropdown {
+    animation: none;
+  }
+  
+  .searchable-input__spinner {
+    animation: none;
+  }
+}
+
+
+
 @media screen and (max-width: 800px){
   .input , input, textarea , .bubble-editor , .bubble-editor-container{
     font-size: 16px !important;
@@ -8763,4 +9224,7 @@ background-color: rgba(0, 0, 0, 0.2);
 }
 .ql-container.ql-snow {
   border: 1px solid #ccc;
-}
+}
+
+
+

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as Container } from "./ui/container/Container";
 export { default as Grid } from "./ui/grid/Grid";
 export { default as Col } from "./ui/grid/Col";
 export { default as Input } from "./ui/input/Input";
+export { default as SearchableInput } from "./ui/input/SearchableInput";
 export { default as Loader } from "./ui/loader/Loader";
 export { default as Modal } from "./ui/modal/Modal";
 export { default as Table } from "./ui/table/Table";

package/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
-exports.GoogleAnalytics = exports.FunGet = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = void 0;
+exports.View = exports.ScrollInView = exports.Accordion = exports.Flex = exports.RichText = exports.Carousel = exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.SearchableInput = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
+exports.GoogleAnalytics = exports.FunGet = exports.Cookie = exports.Select = exports.ScrollToTop = exports.FlexItem = exports.Slider = exports.Vista = exports.Calendar = exports.DatePicker = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
@@ -23,6 +23,8 @@ var Col_1 = require("./ui/grid/Col");
 Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return __importDefault(Col_1).default; } });
 var Input_1 = require("./ui/input/Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(Input_1).default; } });
+var SearchableInput_1 = require("./ui/input/SearchableInput");
+Object.defineProperty(exports, "SearchableInput", { enumerable: true, get: function () { return __importDefault(SearchableInput_1).default; } });
 var Loader_1 = require("./ui/loader/Loader");
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return __importDefault(Loader_1).default; } });
 var Modal_1 = require("./ui/modal/Modal");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0",
+  "version": "3.5.2",
   "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/input/SearchableInput.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+interface SearchableOption {
+    value: string | number;
+    text: string;
+    [key: string]: any;
+}
+interface SearchableInputProps {
+    id?: string;
+    name?: string;
+    status?: 'error' | 'success' | 'warning' | 'default';
+    funcss?: string;
+    bg?: string;
+    fullWidth?: boolean;
+    flat?: boolean;
+    rounded?: boolean;
+    leftRounded?: boolean;
+    rightRounded?: boolean;
+    label?: string;
+    placeholder?: string;
+    icon?: React.ReactNode;
+    extra?: React.ReactNode;
+    value?: string;
+    data?: SearchableOption[];
+    onSelect?: (option: SearchableOption) => void;
+    onChange?: (value: string) => void;
+    onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    dropDirection?: 'up' | 'down';
+    maxHeight?: string;
+    minChars?: number;
+    clearable?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    noDataText?: string;
+    autoComplete?: boolean;
+    highlightMatch?: boolean;
+}
+declare const SearchableInput: React.FC<SearchableInputProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>>;
+export default SearchableInput;

package/ui/input/SearchableInput.js

@@ -0,0 +1,258 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+// Mock function - replace with your actual function
+var generateInputClasses = function (options) {
+    var baseClasses = 'input-base border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500';
+    var statusClasses = {
+        error: 'border-red-500 focus:ring-red-500',
+        success: 'border-green-500 focus:ring-green-500',
+        warning: 'border-yellow-500 focus:ring-yellow-500',
+        default: 'border-gray-300 focus:ring-blue-500'
+    };
+    var classes = baseClasses;
+    if (options.status) {
+        classes += ' ' + statusClasses[options.status];
+    }
+    if (options.rounded)
+        classes += ' rounded-lg';
+    if (options.leftRounded)
+        classes += ' rounded-l-lg';
+    if (options.rightRounded)
+        classes += ' rounded-r-lg';
+    if (options.flat)
+        classes += ' shadow-none';
+    if (options.fullWidth)
+        classes += ' w-full';
+    if (options.additionalClasses)
+        classes += ' ' + options.additionalClasses;
+    return classes;
+};
+var SearchableInput = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? 'searchableInput' : _b, name = _a.name, _c = _a.status, status = _c === void 0 ? 'default' : _c, funcss = _a.funcss, bg = _a.bg, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.flat, flat = _e === void 0 ? false : _e, _f = _a.rounded, rounded = _f === void 0 ? false : _f, _g = _a.leftRounded, leftRounded = _g === void 0 ? false : _g, _h = _a.rightRounded, rightRounded = _h === void 0 ? false : _h, label = _a.label, _j = _a.placeholder, placeholder = _j === void 0 ? 'Search...' : _j, icon = _a.icon, extra = _a.extra, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.data, data = _l === void 0 ? [] : _l, onSelect = _a.onSelect, onChange = _a.onChange, onInputChange = _a.onInputChange, _m = _a.dropDirection, dropDirection = _m === void 0 ? 'up' : _m, _o = _a.maxHeight, maxHeight = _o === void 0 ? '200px' : _o, _p = _a.minChars, minChars = _p === void 0 ? 1 : _p, _q = _a.clearable, clearable = _q === void 0 ? true : _q, _r = _a.disabled, disabled = _r === void 0 ? false : _r, _s = _a.loading, loading = _s === void 0 ? false : _s, _t = _a.noDataText, noDataText = _t === void 0 ? 'No results found' : _t, _u = _a.autoComplete, autoComplete = _u === void 0 ? true : _u, _v = _a.highlightMatch, highlightMatch = _v === void 0 ? true : _v, rest = __rest(_a, ["id", "name", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "label", "placeholder", "icon", "extra", "value", "data", "onSelect", "onChange", "onInputChange", "dropDirection", "maxHeight", "minChars", "clearable", "disabled", "loading", "noDataText", "autoComplete", "highlightMatch"]);
+    var _w = (0, react_1.useState)(value), inputValue = _w[0], setInputValue = _w[1];
+    var _x = (0, react_1.useState)(false), isOpen = _x[0], setIsOpen = _x[1];
+    var _y = (0, react_1.useState)(-1), highlightedIndex = _y[0], setHighlightedIndex = _y[1];
+    var _z = (0, react_1.useState)(null), selectedOption = _z[0], setSelectedOption = _z[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
+    var optionRefs = (0, react_1.useRef)([]);
+    // Filter and sort options based on input
+    var filteredOptions = (0, react_1.useMemo)(function () {
+        if (!inputValue || inputValue.length < minChars)
+            return [];
+        var filtered = data.filter(function (option) {
+            return option.text.toLowerCase().includes(inputValue.toLowerCase()) ||
+                option.value.toString().toLowerCase().includes(inputValue.toLowerCase());
+        });
+        // Sort by relevance (exact matches first, then starts with, then contains)
+        return filtered.sort(function (a, b) {
+            var aText = a.text.toLowerCase();
+            var bText = b.text.toLowerCase();
+            var query = inputValue.toLowerCase();
+            if (aText === query)
+                return -1;
+            if (bText === query)
+                return 1;
+            if (aText.startsWith(query) && !bText.startsWith(query))
+                return -1;
+            if (bText.startsWith(query) && !aText.startsWith(query))
+                return 1;
+            return 0;
+        });
+    }, [inputValue, data, minChars]);
+    // Auto-complete logic
+    (0, react_1.useEffect)(function () {
+        if (autoComplete && filteredOptions.length > 0 && inputValue) {
+            var exactMatch = filteredOptions.find(function (option) {
+                return option.text.toLowerCase() === inputValue.toLowerCase();
+            });
+            if (exactMatch) {
+                setSelectedOption(exactMatch);
+            }
+        }
+    }, [filteredOptions, inputValue, autoComplete]);
+    // Handle input change
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        setInputValue(newValue);
+        setIsOpen(newValue.length >= minChars);
+        setHighlightedIndex(-1);
+        setSelectedOption(null);
+        if (onChange)
+            onChange(newValue);
+        if (onInputChange)
+            onInputChange(e);
+    };
+    // Handle option selection
+    var handleOptionSelect = function (option) {
+        setInputValue(option.text);
+        setSelectedOption(option);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        if (onSelect)
+            onSelect(option);
+        if (onChange)
+            onChange(option.text);
+    };
+    // Handle keyboard navigation
+    var handleKeyDown = function (e) {
+        if (!isOpen || filteredOptions.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setHighlightedIndex(function (prev) {
+                    return prev < filteredOptions.length - 1 ? prev + 1 : 0;
+                });
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex(function (prev) {
+                    return prev > 0 ? prev - 1 : filteredOptions.length - 1;
+                });
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (highlightedIndex >= 0) {
+                    handleOptionSelect(filteredOptions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+                break;
+        }
+    };
+    // Scroll highlighted option into view
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
+            (_a = optionRefs.current[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+        }
+    }, [highlightedIndex]);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target) &&
+                inputRef.current && !inputRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, []);
+    // Clear input
+    var handleClear = function () {
+        var _a;
+        setInputValue('');
+        setSelectedOption(null);
+        setIsOpen(false);
+        if (onChange)
+            onChange('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    // Highlight matching text
+    var highlightText = function (text, highlight) {
+        if (!highlightMatch || !highlight)
+            return text;
+        var parts = text.split(new RegExp("(".concat(highlight, ")"), 'gi'));
+        return parts.map(function (part, index) {
+            return part.toLowerCase() === highlight.toLowerCase() ? (react_1.default.createElement("span", { key: index, className: "bg-yellow-200 font-medium" }, part)) : part;
+        });
+    };
+    var className = generateInputClasses({
+        status: status,
+        rounded: rounded,
+        bg: bg,
+        funcss: funcss,
+        flat: flat,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        bordered: true,
+        borderless: false,
+        fullWidth: fullWidth,
+        additionalClasses: 'searchableInput'
+    });
+    var containerStyle = fullWidth ? { width: '100%' } : undefined;
+    var dropdownClasses = "absolute z-50 bg-white border border-gray-300 rounded-md shadow-lg ".concat(dropDirection === 'up' ? 'bottom-full mb-1' : 'top-full mt-1', " left-0 right-0");
+    return (react_1.default.createElement("div", { className: "searchableInput-wrapper relative", style: containerStyle },
+        label && (react_1.default.createElement("label", { htmlFor: id, className: "block text-sm font-medium text-gray-700 mb-1" }, label)),
+        react_1.default.createElement("div", { className: "relative" },
+            react_1.default.createElement("div", { className: "relative flex items-center" },
+                icon && (react_1.default.createElement("div", { className: "absolute left-3 pointer-events-none text-gray-400" }, icon)),
+                react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, type: "text", className: "".concat(className, " ").concat(icon ? 'pl-10' : '', " ").concat(clearable && inputValue ? 'pr-16' : 'pr-10'), placeholder: placeholder, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: function () { return inputValue.length >= minChars && setIsOpen(true); }, disabled: disabled }, rest)),
+                react_1.default.createElement("div", { className: "absolute right-3 flex items-center space-x-1" },
+                    clearable && inputValue && !disabled && (react_1.default.createElement("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 p-1", tabIndex: -1 },
+                        react_1.default.createElement(pi_1.PiX, { size: 16 }))),
+                    react_1.default.createElement("div", { className: "text-gray-400" }, loading ? (react_1.default.createElement("div", { className: "animate-spin w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full" })) : (react_1.default.createElement(pi_1.PiCaretDown, { size: 16, className: "transition-transform ".concat(isOpen ? 'rotate-180' : '') }))))),
+            isOpen && !disabled && (react_1.default.createElement("div", { ref: dropdownRef, className: dropdownClasses, style: { maxHeight: maxHeight } },
+                react_1.default.createElement("div", { className: "py-1 overflow-y-auto", style: { maxHeight: maxHeight } }, filteredOptions.length > 0 ? (filteredOptions.map(function (option, index) { return (react_1.default.createElement("div", { key: "".concat(option.value, "-").concat(index), ref: function (el) {
+                        optionRefs.current[index] = el;
+                    }, className: "px-3 py-2 cursor-pointer hover:bg-blue-50 ".concat(index === highlightedIndex ? 'bg-blue-100' : '', " ").concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'bg-blue-50' : ''), onClick: function () { return handleOptionSelect(option); } },
+                    react_1.default.createElement("div", { className: "text-sm text-gray-900" }, highlightText(option.text, inputValue)),
+                    option.value !== option.text && (react_1.default.createElement("div", { className: "text-xs text-gray-500" }, option.value)))); })) : (react_1.default.createElement("div", { className: "px-3 py-2 text-sm text-gray-500" }, noDataText)))))),
+        extra && react_1.default.createElement("div", { className: "searchableInput-extra mt-1" }, extra)));
+};
+exports.default = SearchableInput;

package/ui/select/Select.d.ts

@@ -22,6 +22,7 @@ interface CustomSelectProps {
     status?: 'success' | 'warning' | 'danger' | '';
     className?: string;
     funcss?: string;
+    label?: string;
     searchAutoFocus?: boolean;
     style?: React.CSSProperties;
 }

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 ? 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, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.label, label = _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, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
     var _r = (0, react_1.useState)(false), isOpen = _r[0], setIsOpen = _r[1];
     var _s = (0, react_1.useState)(null), selectedOption = _s[0], setSelectedOption = _s[1];
     var _t = (0, react_1.useState)(''), searchQuery = _t[0], setSearchQuery = _t[1];
@@ -179,7 +179,7 @@ var Select = function (_a) {
     };
     return (react_1.default.createElement("div", { ref: containerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', " ").concat(getContainerClasses()), style: style },
         react_1.default.createElement("div", { ref: triggerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', "  ").concat(getTriggerClasses()), onClick: openDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "button", "aria-expanded": isOpen, "aria-haspopup": "listbox" },
-            react_1.default.createElement("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : placeholder),
+            react_1.default.createElement("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : label),
             react_1.default.createElement("div", { className: "select-arrow ".concat(isOpen ? 'open' : '') },
                 react_1.default.createElement("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                     react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })))),

package/ui/table/Query.d.ts

@@ -1,7 +1,8 @@
 interface DataConfig {
     fields: string[];
+    priorityFields?: string[];
 }
 type GetNestedValueFunction = (obj: any, path: string) => any;
-export declare const getAdvancedFilteredData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction) => T[];
-export declare const getFilteredAndPaginatedData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, startIndex?: number, endIndex?: number) => T[];
+export declare const getAdvancedFilteredData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, priorityFields?: string[]) => T[];
+export declare const getFilteredAndPaginatedData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, startIndex?: number, endIndex?: number, priorityFields?: string[]) => T[];
 export {};

package/ui/table/Query.js

@@ -1,6 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilteredAndPaginatedData = exports.getAdvancedFilteredData = void 0;
+// Helper function to check if a nested field exists
+var fieldExists = function (obj, path, getNestedValue) {
+    try {
+        var value = getNestedValue(obj, path);
+        return value !== null && value !== undefined;
+    }
+    catch (error) {
+        return false;
+    }
+};
 // Simple Levenshtein distance function for fuzzy matching
 var levenshteinDistance = function (str1, str2) {
     var matrix = Array(str2.length + 1).fill(null).map(function () {
@@ -92,8 +102,9 @@ var searchStrategies = [
         });
     },
 ];
-// MAIN FUNCTION: Direct replacement for your original code
-var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNestedValue) {
+// MAIN FUNCTION: Enhanced with priority fields support
+var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNestedValue, priorityFields // New optional parameter for priority fields
+) {
     return filteredData.filter(function (mdoc, index) {
         if (searchQuery) {
             // Convert search query to lowercase for case-insensitive search
@@ -102,27 +113,68 @@ var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNest
                 return true; // If empty query after trim, show all
             // Split query into multiple terms for multi-term search
             var queryTerms_1 = query_1.split(/\s+/).filter(function (term) { return term.length > 0; });
-            // Search through all fields defined in data.fields
-            return data.fields.some(function (field) {
+            // Determine which fields to search and in what order
+            var fieldsToSearch = [];
+            if (priorityFields && priorityFields.length > 0) {
+                // First add priority fields that exist in the data config and in the object
+                var validPriorityFields = priorityFields.filter(function (field) {
+                    return data.fields.includes(field) && fieldExists(mdoc, field, getNestedValue);
+                });
+                fieldsToSearch.push.apply(fieldsToSearch, validPriorityFields);
+                // Then add remaining fields from data.fields that aren't in priority and exist in the object
+                var remainingFields = data.fields.filter(function (field) {
+                    return !priorityFields.includes(field) && fieldExists(mdoc, field, getNestedValue);
+                });
+                fieldsToSearch.push.apply(fieldsToSearch, remainingFields);
+            }
+            else {
+                // Use data.priorityFields if available, otherwise use data.fields
+                var priorityFromConfig_1 = data.priorityFields || [];
+                if (priorityFromConfig_1.length > 0) {
+                    var validPriorityFields = priorityFromConfig_1.filter(function (field) {
+                        return data.fields.includes(field) && fieldExists(mdoc, field, getNestedValue);
+                    });
+                    fieldsToSearch.push.apply(fieldsToSearch, validPriorityFields);
+                    var remainingFields = data.fields.filter(function (field) {
+                        return !priorityFromConfig_1.includes(field) && fieldExists(mdoc, field, getNestedValue);
+                    });
+                    fieldsToSearch.push.apply(fieldsToSearch, remainingFields);
+                }
+                else {
+                    // Just use fields that exist in the object
+                    fieldsToSearch = data.fields.filter(function (field) { return fieldExists(mdoc, field, getNestedValue); });
+                }
+            }
+            var _loop_1 = function (field) {
                 try {
                     // Get the value using the same getNestedValue function used for display
                     var value = getNestedValue(mdoc, field);
                     // Convert value to string and search
                     if (value !== null && value !== undefined) {
                         var stringValue_1 = String(value).toLowerCase();
-                        // Use advanced search strategies instead of just includes
-                        return searchStrategies.some(function (strategy) {
+                        // Use advanced search strategies
+                        var foundMatch = searchStrategies.some(function (strategy) {
                             return strategy(stringValue_1, query_1, queryTerms_1);
                         });
+                        if (foundMatch) {
+                            return { value: true };
+                        }
                     }
-                    return false;
                 }
                 catch (error) {
                     // Handle any errors in accessing nested values
                     console.warn("Error accessing field ".concat(field, ":"), error);
-                    return false;
+                    return "continue";
                 }
-            });
+            };
+            // Search through fields in priority order - return true on first match
+            for (var _i = 0, fieldsToSearch_1 = fieldsToSearch; _i < fieldsToSearch_1.length; _i++) {
+                var field = fieldsToSearch_1[_i];
+                var state_1 = _loop_1(field);
+                if (typeof state_1 === "object")
+                    return state_1.value;
+            }
+            return false; // No matches found in any field
         }
         else {
             return true; // If no search query, return all items
@@ -131,9 +183,10 @@ var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNest
 };
 exports.getAdvancedFilteredData = getAdvancedFilteredData;
 // Optional: Simplified version with pagination built-in
-var getFilteredAndPaginatedData = function (filteredData, searchQuery, data, getNestedValue, startIndex, endIndex) {
+var getFilteredAndPaginatedData = function (filteredData, searchQuery, data, getNestedValue, startIndex, endIndex, priorityFields // Added priority fields parameter
+) {
     if (startIndex === void 0) { startIndex = 0; }
-    var filtered = (0, exports.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue);
+    var filtered = (0, exports.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, priorityFields);
     return endIndex !== undefined ? filtered.slice(startIndex, endIndex) : filtered.slice(startIndex);
 };
 exports.getFilteredAndPaginatedData = getFilteredAndPaginatedData;

package/ui/table/Table.d.ts

@@ -18,6 +18,7 @@ type TableProps = {
         "funcss": string[];
     };
     filterOnchange?: (filter?: any, value?: any, totals?: number) => {};
+    clearSearch?: boolean;
     head?: React.ReactNode;
     right?: React.ReactNode;
     body?: React.ReactNode;
@@ -34,8 +35,9 @@ type TableProps = {
         onClick?: (data: any) => void;
     }[];
     filterableFields?: string[];
+    prioritizeSearchFields?: string[];
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-emptyResponse, filterOnchange, ...rest }: TableProps): React.JSX.Element;
+emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, ...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -95,20 +95,25 @@ 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,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
-    var _g = (0, react_1.useState)(''), search = _g[0], setSearch = _g[1];
-    var _h = (0, react_1.useState)(1), currentPage = _h[0], setCurrentPage = _h[1];
+    var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
+    var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
     // Determine the total number of pages based on data length and page size
     var totalPages = data ? Math.ceil((((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.length) || 0) / pageSize) : 0;
     // Calculate start and end indices for data pagination
     var startIndex = data ? (currentPage - 1) * pageSize : 0;
     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)(true), showSearch = _l[0], setshowSearch = _l[1];
-    var _m = (0, react_1.useState)(""), searchQuery = _m[0], setsearchQuery = _m[1];
+    var _k = (0, react_1.useState)(null), selectedField = _k[0], setSelectedField = _k[1];
+    var _l = (0, react_1.useState)(null), selectedValue = _l[0], setSelectedValue = _l[1];
+    var _m = (0, react_1.useState)(true), showSearch = _m[0], setshowSearch = _m[1];
+    var _o = (0, react_1.useState)(""), searchQuery = _o[0], setsearchQuery = _o[1];
+    React.useEffect(function () {
+        if (clearSearch) {
+            setsearchQuery("");
+        }
+    }, [clearSearch]);
     // Enhanced filter logic:
     var normalize = function (val) { return val === null || val === void 0 ? void 0 : val.toString().toLowerCase().trim(); };
     var matchesSearch = function (item) {
@@ -269,41 +274,20 @@ function Table(_a) {
                 head && React.createElement(Head_1.default, null, head),
                 body && React.createElement(Body_1.default, null, body),
                 data &&
-                    // filteredData.filter((mdoc, index) => {
-                    //   if(searchQuery){
-                    //     // Convert search query to lowercase for case-insensitive search
-                    //     const query = searchQuery.toLowerCase().trim();
-                    //     if (!query) return true; // If empty query after trim, show all
-                    //     // Search through all fields defined in data.fields
-                    //     return data.fields.some(field => {
-                    //       try {
-                    //         // Get the value using the same getNestedValue function used for display
-                    //         const value = getNestedValue(mdoc, field);
-                    //         // Convert value to string and search
-                    //         if (value !== null && value !== undefined) {
-                    //           const stringValue = String(value).toLowerCase();
-                    //           return stringValue.includes(query);
-                    //         }
-                    //         return false;
-                    //       } catch (error) {
-                    //         // Handle any errors in accessing nested values
-                    //         console.warn(`Error accessing field ${field}:`, error);
-                    //         return false;
-                    //       }
-                    //     });
-                    //   } else {
-                    //     return true; // If no search query, return all items
-                    //   }
-                    // })
-                    (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue).slice(startIndex, endIndex).map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
-                        data.fields.map(function (fdoc, findex) {
-                            var _a;
-                            return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));
-                        }),
-                        customColumns ?
-                            customColumns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex },
-                                column.render && column.render(mdoc),
-                                column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); }) : "")); }),
+                    (function () {
+                        var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
+                        var shouldSlice = !searchQuery || results.length > 10;
+                        return (shouldSlice ? results.slice(startIndex, endIndex) : results)
+                            .map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
+                            data.fields.map(function (fdoc, findex) {
+                                var _a;
+                                return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));
+                            }),
+                            customColumns ?
+                                customColumns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex },
+                                    column.render && column.render(mdoc),
+                                    column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); }) : "")); });
+                    })(),
                 isLoading &&
                     [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function () { return (React.createElement(Row_1.default, { funcss: 'skeleton' })); }),
                 children ? children : ''),