erp-pos-ecommerce-shared 0.2.11 → 0.2.12

package/dist/components.d.ts

@@ -1,8 +1,8 @@
 import React$1, { ReactNode } from 'react';
-import { e as IField, b as IButton } from './form.interface-D72rc8aa.js';
+import { e as IField, b as IButton } from './form.interface-91Dz2oFr.js';
 import { ReactFormExtendedApi, FormValidateOrFn, FormAsyncValidateOrFn } from '@tanstack/react-form';
 import { UseMutationResult, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
-import { v as TblProductsImage, r as ITableFilterConfig, j as IFilterSelectOption } from './filters.interface-C9rkI_yn.js';
+import { v as TblProductsImage, r as ITableFilterConfig, j as IFilterSelectOption } from './filters.interface-BwMi9FRP.js';
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, useReactTable, Row } from '@tanstack/react-table';
@@ -215,8 +215,10 @@ interface FilterSelectProps {
     placeholder?: string;
     /** Icon to show in the button */
     Icon?: React.ElementType;
+    /** Enable search input inside dropdown */
+    searchable?: boolean;
 }
-declare const FilterSelect: ({ columnId, options, onChange, placeholder, Icon, }: FilterSelectProps) => react_jsx_runtime.JSX.Element;
+declare const FilterSelect: ({ columnId, options, onChange, placeholder, Icon, searchable, }: FilterSelectProps) => react_jsx_runtime.JSX.Element;
 
 interface SearchInputProps {
     value: string;

package/dist/components.js

@@ -1747,10 +1747,19 @@ var FilterSelect = ({
   options,
   onChange,
   placeholder = "Todos",
-  Icon = ListFilter
+  Icon = ListFilter,
+  searchable = false
 }) => {
   const [open, setOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(null);
+  const [search, setSearch] = useState("");
+  const searchRef = useRef(null);
+  const filteredOptions = useMemo(
+    () => searchable && search ? options.filter(
+      (o) => o.label.toLowerCase().includes(search.toLowerCase())
+    ) : options,
+    [options, search, searchable]
+  );
   const handleClear = () => {
     setSelectedOption(null);
     onChange(columnId, null);
@@ -1768,7 +1777,15 @@ var FilterSelect = ({
     Menu,
     {
       opened: open,
-      onChange: setOpen,
+      onChange: (opened) => {
+        setOpen(opened);
+        if (!opened) {
+          setSearch("");
+        }
+      },
+      onOpen: () => {
+        setTimeout(() => searchRef.current?.focus(), 50);
+      },
       styles: {
         dropdown: {
           minWidth: 180
@@ -1807,17 +1824,31 @@ var FilterSelect = ({
             children: selectedOption ? selectedOption.label : placeholder
           }
         ) }),
-        /* @__PURE__ */ jsx(Menu.Dropdown, { children: options.map((option) => /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            leftSection: selectedOption?.value === option.value ? /* @__PURE__ */ jsx(Check, { size: 12 }) : null,
-            onClick: () => {
-              handleSelect(option);
+        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+          searchable && /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: searchRef,
+              variant: "unstyled",
+              placeholder: "Buscar...",
+              leftSection: /* @__PURE__ */ jsx(Search, { size: 14 }),
+              value: search,
+              onChange: (e) => setSearch(e.currentTarget.value)
+            }
+          ),
+          filteredOptions.map((option) => /* @__PURE__ */ jsx(
+            Menu.Item,
+            {
+              leftSection: selectedOption?.value === option.value ? /* @__PURE__ */ jsx(Check, { size: 12 }) : null,
+              onClick: () => {
+                handleSelect(option);
+              },
+              children: option.label
             },
-            children: option.label
-          },
-          option.value
-        )) })
+            option.value
+          )),
+          searchable && filteredOptions.length === 0 && /* @__PURE__ */ jsx(Menu.Item, { disabled: true, children: "Sin resultados" })
+        ] })
       ]
     }
   );
@@ -1982,7 +2013,8 @@ var DataTable = ({
               columnId: f.columnId,
               options: f.options ?? [],
               onChange: setColumnFilter,
-              placeholder: f.placeholder ?? "Todos"
+              placeholder: f.placeholder ?? "Todos",
+              searchable: f.searchable
             },
             f.columnId
           )