mautourco-components 0.2.45 → 0.2.46

package/dist/components/atoms/Inputs/Input/Input.js

@@ -11,6 +11,6 @@ var Input = function (_a) {
         disabled: 'input-field--disabled',
     };
     var inputClasses = "".concat(baseClasses, " ").concat(variantClasses[variant], " ").concat(icon ? "input-field--with-icon input-field--icon-".concat(iconPosition) : '', " ").concat(className).trim();
-    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onChange: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
+    return (_jsxs("div", { className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim(), children: [icon && iconPosition === 'leading' && (_jsx("span", { className: "input-icon input-icon--leading", children: _jsx(Icon, { name: icon, size: "sm" }) })), _jsx("input", { id: id, type: type, className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onInput: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", { className: "input-icon input-icon--trailing", children: _jsx(Icon, { name: icon, size: "sm" }) }))] }));
 };
 export default Input;

package/dist/components/organisms/QuoteHeader/QuoteHeader.js

@@ -21,7 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -52,6 +53,34 @@ export function QuoteHeader(props) {
         search: '',
     }), currentValue = _c[0], setCurrentValue = _c[1];
     var _d = useState((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.search) !== null && _a !== void 0 ? _a : ''), searchValue = _d[0], setSearchValue = _d[1];
+    // Create a ref to store the debounced function
+    var debouncedFilterChangeRef = useRef(debounce(function (value) {
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange('search', value);
+        setCurrentValue(function (prev) { return (__assign(__assign({}, prev), { search: value })); });
+    }, 500));
+    // Update the debounced function when onFilterChange changes
+    useEffect(function () {
+        // Cancel the previous debounced function
+        debouncedFilterChangeRef.current.cancel();
+        // Create a new debounced function
+        debouncedFilterChangeRef.current = debounce(function (value) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange('search', value);
+            setCurrentValue(function (prev) { return (__assign(__assign({}, prev), { search: value })); });
+        }, 500);
+    }, [onFilterChange]);
+    // Cleanup debounced function on unmount
+    useEffect(function () {
+        return function () {
+            debouncedFilterChangeRef.current.cancel();
+        };
+    }, []);
+    var handleInputChange = useCallback(function (e) {
+        var value = e.target.value;
+        // Update input value immediately for responsive UI
+        setSearchValue(value);
+        // Debounce the filter change callback
+        debouncedFilterChangeRef.current(value);
+    }, []);
     useEffect(function () {
         if (currentFilter && Object.keys(currentFilter).length > 0) {
             var search = currentFilter.search, rest = __rest(currentFilter, ["search"]);
@@ -63,11 +92,7 @@ export function QuoteHeader(props) {
             setSearchValue('');
         }
     }, [currentFilter]);
-    return (_jsxs("div", { className: "quote-header", children: [_jsx(Heading, { level: 4, as: "h1", className: "quote-header__title", color: "accent", children: "Quotation & Booking" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Button, { variant: current === 'quotation' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('quotation'); }, children: "Quotation" }), _jsx(Button, { variant: current === 'booking' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('booking'); }, children: "Booking" })] }), _jsxs("div", { className: "quote-header__search-container", children: [_jsx(Input, { placeholder: "Search", icon: "search", iconPosition: "leading", className: "quote-header__search", value: searchValue, onChange: function (e) {
-                            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange('search', e.target.value);
-                            setCurrentValue(__assign(__assign({}, currentValue), { search: e.target.value }));
-                            setSearchValue(e.target.value);
-                        } }), _jsx(Button, { variant: "primary", leadingIcon: "plus-circle", iconSize: "md", size: "sm", onClick: onNewQuote, children: "New quote" })] }), _jsx("div", { className: "quote-header__filters", children: Object.entries(filterConfig).map(function (_a) {
+    return (_jsxs("div", { className: "quote-header", children: [_jsx(Heading, { level: 4, as: "h1", className: "quote-header__title", color: "accent", children: "Quotation & Booking" }), _jsxs("div", { className: "flex gap-4", children: [_jsx(Button, { variant: current === 'quotation' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('quotation'); }, children: "Quotation" }), _jsx(Button, { variant: current === 'booking' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('booking'); }, children: "Booking" })] }), _jsxs("div", { className: "quote-header__search-container", children: [_jsx(Input, { placeholder: "Search", icon: "search", iconPosition: "leading", className: "quote-header__search", value: searchValue, onChange: handleInputChange }), _jsx(Button, { variant: "primary", leadingIcon: "plus-circle", iconSize: "md", size: "sm", onClick: onNewQuote, children: "New quote" })] }), _jsx("div", { className: "quote-header__filters", children: Object.entries(filterConfig).map(function (_a) {
                     var key = _a[0], value = _a[1];
                     return (_jsx(DropdownInput, { placeholder: value.placeholder, options: value.options, value: currentValue[key], onSelect: function (value) {
                             var _a;

package/dist/components/organisms/Table/columns/booking-columns.js

@@ -30,14 +30,7 @@ export var bookingColumns = function (_a) {
             width: 150,
             cell: function (value) {
                 if (value === void 0) { value = ''; }
-                var currentValue = String(value);
-                var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
-                if (regex.test(currentValue)) {
-                    return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
-                                __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
-                            } }) }));
-                }
-                return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+                return (_jsx(Text, { variant: "medium", size: "sm", children: value }));
             },
         },
         {

package/dist/components/organisms/Table/columns/quotation-columns.js

@@ -32,14 +32,7 @@ export var quotationColumns = function (_a) {
             cell: function (value, _raw, _index, childIndex) {
                 if (value === void 0) { value = ''; }
                 if (childIndex === undefined) {
-                    var currentValue = String(value);
-                    var regex = new RegExp("(".concat(keywords !== null && keywords !== void 0 ? keywords : '', ")"), 'gi');
-                    if (regex.test(currentValue)) {
-                        return (_jsx(Text, { variant: "medium", size: "sm", children: _jsx("span", { dangerouslySetInnerHTML: {
-                                    __html: currentValue.replace(regex, "<span class=\"text--highlight\">$1</span>"),
-                                } }) }));
-                    }
-                    return (_jsx(Text, { variant: "medium", size: "sm", children: currentValue }));
+                    return (_jsx(Text, { variant: "medium", size: "sm", children: value }));
                 }
             },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -56,7 +56,7 @@ const Input: React.FC<InputProps> = ({
         placeholder={placeholder}
         value={value}
         disabled={disabled || variant === 'disabled'}
-        onChange={onChange}
+        onInput={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
       />

package/src/components/organisms/QuoteHeader/QuoteHeader.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -60,6 +61,40 @@ export function QuoteHeader(props: QuoteHeaderProps) {
   );
   const [searchValue, setSearchValue] = useState<string>(currentFilter?.search ?? '');
 
+  // Create a ref to store the debounced function
+  const debouncedFilterChangeRef = useRef(
+    debounce((value: string) => {
+      onFilterChange?.('search', value);
+      setCurrentValue((prev) => ({ ...prev, search: value }));
+    }, 500)
+  );
+
+  // Update the debounced function when onFilterChange changes
+  useEffect(() => {
+    // Cancel the previous debounced function
+    debouncedFilterChangeRef.current.cancel();
+    // Create a new debounced function
+    debouncedFilterChangeRef.current = debounce((value: string) => {
+      onFilterChange?.('search', value);
+      setCurrentValue((prev) => ({ ...prev, search: value }));
+    }, 500);
+  }, [onFilterChange]);
+
+  // Cleanup debounced function on unmount
+  useEffect(() => {
+    return () => {
+      debouncedFilterChangeRef.current.cancel();
+    };
+  }, []);
+
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    // Update input value immediately for responsive UI
+    setSearchValue(value);
+    // Debounce the filter change callback
+    debouncedFilterChangeRef.current(value);
+  }, []);
+
   useEffect(() => {
     if (currentFilter && Object.keys(currentFilter).length > 0) {
       const { search, ...rest } = currentFilter;
@@ -97,11 +132,7 @@ export function QuoteHeader(props: QuoteHeaderProps) {
           iconPosition="leading"
           className="quote-header__search"
           value={searchValue}
-          onChange={(e) => {
-            onFilterChange?.('search', e.target.value);
-            setCurrentValue({ ...currentValue, search: e.target.value });
-            setSearchValue(e.target.value);
-          }}
+          onChange={handleInputChange}
         />
         <Button
           variant="primary"

package/src/components/organisms/Table/columns/booking-columns.tsx

@@ -45,25 +45,9 @@ export const bookingColumns: (params: {
     key: 'agency_name',
     width: 150,
     cell: (value = '') => {
-      const currentValue = String(value as string);
-      const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
-      if (regex.test(currentValue)) {
-        return (
-          <Text variant="medium" size="sm">
-            <span
-              dangerouslySetInnerHTML={{
-                __html: currentValue.replace(
-                  regex,
-                  `<span class="text--highlight">$1</span>`
-                ),
-              }}
-            />
-          </Text>
-        );
-      }
       return (
         <Text variant="medium" size="sm">
-          {currentValue}
+          {value as string}
         </Text>
       );
     },

package/src/components/organisms/Table/columns/quotation-columns.tsx

@@ -51,25 +51,9 @@ export const quotationColumns: (params: {
     width: 150,
     cell: (value = '', _raw, _index, childIndex) => {
       if (childIndex === undefined) {
-        const currentValue = String(value as string);
-        const regex = new RegExp(`(${keywords ?? ''})`, 'gi');
-        if (regex.test(currentValue)) {
-          return (
-            <Text variant="medium" size="sm">
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: currentValue.replace(
-                    regex,
-                    `<span class="text--highlight">$1</span>`
-                  ),
-                }}
-              />
-            </Text>
-          );
-        }
         return (
           <Text variant="medium" size="sm">
-            {currentValue}
+            {value as string}
           </Text>
         );
       }