lkd-web-kit 0.4.0 → 0.4.2

package/dist/components/InfinityLoader/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const core = require('@mantine/core');
 const hooks = require('@mantine/hooks');
-const react = require('react');
+const React = require('react');
 
 const InfinityLoader = ({
   root,
@@ -19,10 +19,10 @@ const InfinityLoader = ({
     root: root?.current,
     rootMargin
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
   }, [entry?.isIntersecting]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!entry?.isIntersecting) return;
     const el = root?.current ?? document.documentElement;
     const hasScroll = el?.scrollHeight > el?.clientHeight;

package/dist/components/SelectInfinity/index.cjs

@@ -4,45 +4,74 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const core = require('@mantine/core');
-const react = require('react');
-const useFetchNextPageOnScroll = require('../../hooks/useFetchNextPageOnScroll.cjs');
-const index = require('../InfinityLoader/index.cjs');
+const hooks = require('@mantine/hooks');
+const index = require('../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs');
+const virtualStyles = require('../../utils/virtual-styles.cjs');
+const index$1 = require('../../dist/components/InfinityLoader/index.cjs');
 
-function SelectInfinity({
+function InfinitySelect({
   value,
-  onChange,
-  data = [],
   searchValue,
+  defaultSearchValue,
+  nothingFoundMessage,
+  infinity,
+  defaultValue,
+  onChange,
   onSearchChange,
   renderOption,
   onOptionSubmit,
-  nothingFoundMessage,
-  infinity,
-  placeholder,
+  getOptionLabel,
+  getOptionValue,
+  onSelectedOptionChange,
+  selectedOption,
+  comboboxProps,
   ...props
 }) {
-  const combobox = core.useCombobox({
-    onDropdownClose: () => {
-      combobox.resetSelectedOption();
-      combobox.focusTarget();
-      onSearchChange?.("");
-    },
-    onDropdownOpen: () => {
-      combobox.focusSearchInput();
+  const combobox = core.useCombobox();
+  const [_selectedOption, handleSelectedOption] = hooks.useUncontrolled({
+    defaultValue: null,
+    value: selectedOption,
+    onChange: onSelectedOptionChange
+  });
+  const [_value, handleValue] = hooks.useUncontrolled({
+    defaultValue,
+    value,
+    onChange
+  });
+  const [_search, handleSearch] = hooks.useUncontrolled({
+    defaultValue: defaultSearchValue,
+    value: searchValue,
+    onChange: onSearchChange
+  });
+  const [searchHasChanged, setSearchHasChanged] = React.useState(false);
+  const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
+  const _reset = () => {
+    handleSearch("");
+    handleValue(null);
+    handleSelectedOption(null);
+  };
+  const setSearchAndValue = (option) => {
+    if (option === null) _reset();
+    else {
+      handleSearch(getOptionLabel(option));
+      handleValue(getOptionValue(option));
     }
+  };
+  React.useEffect(() => {
+    setSearchAndValue(_selectedOption);
+  }, [_selectedOption]);
+  const virtualizer = index.useVirtualizer({
+    count: data.length,
+    estimateSize: () => 40,
+    overscan: 7,
+    getScrollElement: () => scrollRef.current
   });
-  const options = data.map((i) => /* @__PURE__ */ jsxRuntime.jsx(
-    core.Combobox.Option,
-    {
-      value: i.value,
-      children: renderOption ? renderOption({ option: i }) : i.label
-    },
-    i.value
-  ));
-  const selectedOption = data.find((i) => i.value === value);
-  const scrollRef = react.useRef(null);
-  useFetchNextPageOnScroll.useFetchNextPageOnScroll({ infinity, scrollRef });
+  const openDropdown = () => {
+    if (searchHasChanged || _search === "" || !_value) combobox.openDropdown();
+  };
+  const scrollRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.Combobox,
     {
@@ -53,66 +82,81 @@ function SelectInfinity({
         }
       },
       onOptionSubmit: (val) => {
-        onChange?.(val);
-        onOptionSubmit?.(val);
+        const selectedOption2 = data.find((i) => getOptionValue(i) === val);
+        if (selectedOption2) {
+          setSearchAndValue(selectedOption2);
+          handleSelectedOption(selectedOption2);
+          onOptionSubmit?.(val, selectedOption2);
+        }
         combobox.closeDropdown();
       },
+      ...comboboxProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
           core.InputBase,
           {
-            component: "button",
-            type: "button",
-            pointer: true,
-            rightSection: /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Chevron, {}),
-            onClick: () => combobox.toggleDropdown(),
-            rightSectionPointerEvents: "none",
+            rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsxRuntime.jsx(core.Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Chevron, {}),
+            rightSectionPointerEvents: value ? void 0 : "none",
+            onClick: openDropdown,
+            onFocus: openDropdown,
+            value: _search,
+            onChange: (event) => {
+              if (event.currentTarget.value) combobox.openDropdown();
+              else combobox.closeDropdown();
+              setSearchHasChanged(true);
+              handleSearch(event.currentTarget.value);
+            },
             ...props,
-            children: selectedOption?.label || /* @__PURE__ */ jsxRuntime.jsx(core.Input.Placeholder, { children: placeholder })
+            variant: props.readOnly ? "filled" : "default",
+            onBlur: (e) => {
+              if (_selectedOption) setSearchAndValue(_selectedOption);
+              combobox.closeDropdown();
+              props.onBlur?.(e);
+              setSearchHasChanged(false);
+            }
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(core.Combobox.Dropdown, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            core.Combobox.Search,
-            {
-              value: searchValue,
-              onChange: (event) => onSearchChange?.(event.currentTarget.value),
-              placeholder: "Escribe para buscar"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Options, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-            core.ScrollArea.Autosize,
-            {
-              mah: 200,
-              type: "scroll",
-              viewportRef: scrollRef,
-              children: [
-                options.length > 0 ? options : !infinity.isFetching ? /* @__PURE__ */ jsxRuntime.jsx(
-                  core.Combobox.Empty,
-                  {
-                    onClick: () => combobox.closeDropdown(),
-                    className: "min-h-6",
-                    children: nothingFoundMessage ?? "Sin resultados"
-                  }
-                ) : null,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  index.InfinityLoader,
+        /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          core.Combobox.Options,
+          {
+            mah: 200,
+            className: "overflow-y-auto",
+            ref: scrollRef,
+            children: [
+              data.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { ...virtualStyles.getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
+                const option = data[virtualItem.index];
+                const virtualItemProps = virtualStyles.getVirtualItemProps(virtualItem, virtualizer);
+                return /* @__PURE__ */ React.createElement(
+                  core.Combobox.Option,
                   {
-                    className: "text-sm",
-                    infinity,
-                    loaderProps: {
-                      size: "sm",
-                      className: "mt-1 mb-2"
+                    value: getOptionValue(option),
+                    ...virtualItemProps,
+                    key: virtualItemProps.key,
+                    style: {
+                      ...virtualItemProps.style,
+                      fontWeight: 400
                     }
+                  },
+                  renderOption ? renderOption({ option }) : getOptionLabel(option)
+                );
+              }) }) : !infinity.isFetching ? /* @__PURE__ */ jsxRuntime.jsx(core.Combobox.Empty, { className: "min-h-6", children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                index$1.InfinityLoader,
+                {
+                  root: scrollRef,
+                  infinity,
+                  loaderProps: {
+                    size: "sm",
+                    className: "mt-1 mb-2"
                   }
-                )
-              ]
-            }
-          ) })
-        ] })
+                }
+              )
+            ]
+          }
+        ) })
       ]
     }
   );
 }
 
-exports.SelectInfinity = SelectInfinity;
+exports.InfinitySelect = InfinitySelect;

package/dist/components/SelectInfinity/index.js

@@ -1,44 +1,73 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCombobox, Combobox, InputBase, Input, ScrollArea } from '@mantine/core';
-import { useRef } from 'react';
-import { useFetchNextPageOnScroll } from '../../hooks/useFetchNextPageOnScroll.js';
-import { InfinityLoader } from '../InfinityLoader/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, createElement } from 'react';
+import { useCombobox, Combobox, InputBase, Input } from '@mantine/core';
+import { useUncontrolled } from '@mantine/hooks';
+import { useVirtualizer } from '../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
+import { getVirtualContainerProps, getVirtualItemProps } from '../../utils/virtual-styles.js';
+import { InfinityLoader } from '../../dist/components/InfinityLoader/index.js';
 
-function SelectInfinity({
+function InfinitySelect({
   value,
-  onChange,
-  data = [],
   searchValue,
+  defaultSearchValue,
+  nothingFoundMessage,
+  infinity,
+  defaultValue,
+  onChange,
   onSearchChange,
   renderOption,
   onOptionSubmit,
-  nothingFoundMessage,
-  infinity,
-  placeholder,
+  getOptionLabel,
+  getOptionValue,
+  onSelectedOptionChange,
+  selectedOption,
+  comboboxProps,
   ...props
 }) {
-  const combobox = useCombobox({
-    onDropdownClose: () => {
-      combobox.resetSelectedOption();
-      combobox.focusTarget();
-      onSearchChange?.("");
-    },
-    onDropdownOpen: () => {
-      combobox.focusSearchInput();
+  const combobox = useCombobox();
+  const [_selectedOption, handleSelectedOption] = useUncontrolled({
+    defaultValue: null,
+    value: selectedOption,
+    onChange: onSelectedOptionChange
+  });
+  const [_value, handleValue] = useUncontrolled({
+    defaultValue,
+    value,
+    onChange
+  });
+  const [_search, handleSearch] = useUncontrolled({
+    defaultValue: defaultSearchValue,
+    value: searchValue,
+    onChange: onSearchChange
+  });
+  const [searchHasChanged, setSearchHasChanged] = useState(false);
+  const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
+  const _reset = () => {
+    handleSearch("");
+    handleValue(null);
+    handleSelectedOption(null);
+  };
+  const setSearchAndValue = (option) => {
+    if (option === null) _reset();
+    else {
+      handleSearch(getOptionLabel(option));
+      handleValue(getOptionValue(option));
     }
+  };
+  useEffect(() => {
+    setSearchAndValue(_selectedOption);
+  }, [_selectedOption]);
+  const virtualizer = useVirtualizer({
+    count: data.length,
+    estimateSize: () => 40,
+    overscan: 7,
+    getScrollElement: () => scrollRef.current
   });
-  const options = data.map((i) => /* @__PURE__ */ jsx(
-    Combobox.Option,
-    {
-      value: i.value,
-      children: renderOption ? renderOption({ option: i }) : i.label
-    },
-    i.value
-  ));
-  const selectedOption = data.find((i) => i.value === value);
+  const openDropdown = () => {
+    if (searchHasChanged || _search === "" || !_value) combobox.openDropdown();
+  };
   const scrollRef = useRef(null);
-  useFetchNextPageOnScroll({ infinity, scrollRef });
   return /* @__PURE__ */ jsxs(
     Combobox,
     {
@@ -49,66 +78,81 @@ function SelectInfinity({
         }
       },
       onOptionSubmit: (val) => {
-        onChange?.(val);
-        onOptionSubmit?.(val);
+        const selectedOption2 = data.find((i) => getOptionValue(i) === val);
+        if (selectedOption2) {
+          setSearchAndValue(selectedOption2);
+          handleSelectedOption(selectedOption2);
+          onOptionSubmit?.(val, selectedOption2);
+        }
         combobox.closeDropdown();
       },
+      ...comboboxProps,
       children: [
         /* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(
           InputBase,
           {
-            component: "button",
-            type: "button",
-            pointer: true,
-            rightSection: /* @__PURE__ */ jsx(Combobox.Chevron, {}),
-            onClick: () => combobox.toggleDropdown(),
-            rightSectionPointerEvents: "none",
+            rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsx(Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
+            rightSectionPointerEvents: value ? void 0 : "none",
+            onClick: openDropdown,
+            onFocus: openDropdown,
+            value: _search,
+            onChange: (event) => {
+              if (event.currentTarget.value) combobox.openDropdown();
+              else combobox.closeDropdown();
+              setSearchHasChanged(true);
+              handleSearch(event.currentTarget.value);
+            },
             ...props,
-            children: selectedOption?.label || /* @__PURE__ */ jsx(Input.Placeholder, { children: placeholder })
+            variant: props.readOnly ? "filled" : "default",
+            onBlur: (e) => {
+              if (_selectedOption) setSearchAndValue(_selectedOption);
+              combobox.closeDropdown();
+              props.onBlur?.(e);
+              setSearchHasChanged(false);
+            }
           }
         ) }),
-        /* @__PURE__ */ jsxs(Combobox.Dropdown, { children: [
-          /* @__PURE__ */ jsx(
-            Combobox.Search,
-            {
-              value: searchValue,
-              onChange: (event) => onSearchChange?.(event.currentTarget.value),
-              placeholder: "Escribe para buscar"
-            }
-          ),
-          /* @__PURE__ */ jsx(Combobox.Options, { children: /* @__PURE__ */ jsxs(
-            ScrollArea.Autosize,
-            {
-              mah: 200,
-              type: "scroll",
-              viewportRef: scrollRef,
-              children: [
-                options.length > 0 ? options : !infinity.isFetching ? /* @__PURE__ */ jsx(
-                  Combobox.Empty,
-                  {
-                    onClick: () => combobox.closeDropdown(),
-                    className: "min-h-6",
-                    children: nothingFoundMessage ?? "Sin resultados"
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx(
-                  InfinityLoader,
+        /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsxs(
+          Combobox.Options,
+          {
+            mah: 200,
+            className: "overflow-y-auto",
+            ref: scrollRef,
+            children: [
+              data.length > 0 ? /* @__PURE__ */ jsx("div", { ...getVirtualContainerProps(virtualizer), children: virtualizer.getVirtualItems().map((virtualItem) => {
+                const option = data[virtualItem.index];
+                const virtualItemProps = getVirtualItemProps(virtualItem, virtualizer);
+                return /* @__PURE__ */ createElement(
+                  Combobox.Option,
                   {
-                    className: "text-sm",
-                    infinity,
-                    loaderProps: {
-                      size: "sm",
-                      className: "mt-1 mb-2"
+                    value: getOptionValue(option),
+                    ...virtualItemProps,
+                    key: virtualItemProps.key,
+                    style: {
+                      ...virtualItemProps.style,
+                      fontWeight: 400
                     }
+                  },
+                  renderOption ? renderOption({ option }) : getOptionLabel(option)
+                );
+              }) }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, { className: "min-h-6", children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
+              /* @__PURE__ */ jsx(
+                InfinityLoader,
+                {
+                  root: scrollRef,
+                  infinity,
+                  loaderProps: {
+                    size: "sm",
+                    className: "mt-1 mb-2"
                   }
-                )
-              ]
-            }
-          ) })
-        ] })
+                }
+              )
+            ]
+          }
+        ) })
       ]
     }
   );
 }
 
-export { SelectInfinity };
+export { InfinitySelect };

package/dist/contexts/NavigationHistoryContext/index.cjs

@@ -5,14 +5,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const navigation = require('next/navigation');
-const react = require('react');
+const React = require('react');
 
-const NavigationHistoryContext = react.createContext(null);
+const NavigationHistoryContext = React.createContext(null);
 function NavigationHistoryProvider({ children }) {
   const pathname = navigation.usePathname();
   const searchParams = navigation.useSearchParams();
-  const [history, setHistory] = react.useState([]);
-  react.useEffect(() => {
+  const [history, setHistory] = React.useState([]);
+  React.useEffect(() => {
     const fullPath = searchParams?.size ? `${pathname}?${searchParams.toString()}` : pathname;
     if (fullPath) {
       setHistory((prev) => {
@@ -27,7 +27,7 @@ function NavigationHistoryProvider({ children }) {
 }
 const QP_BACK_URL_NAME = "backUrl";
 function useNavigationHistory() {
-  const context = react.useContext(NavigationHistoryContext);
+  const context = React.useContext(NavigationHistoryContext);
   const router = navigation.useRouter();
   if (!context) {
     throw new Error("useNavigationHistory debe usarse dentro de un NavigationHistoryProvider");

package/dist/contexts/PageDataContext/index.cjs

@@ -4,15 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
+const React = require('react');
 
-const PageData = react.createContext(void 0);
+const PageData = React.createContext(void 0);
 const PageDataProvider = ({
   value,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(PageData.Provider, { value, children });
 const usePageData = () => {
-  const data = react.useContext(PageData);
+  const data = React.useContext(PageData);
   if (data === void 0) throw new Error("Out of context: usePageData");
   return data;
 };

package/dist/dist/components/InfinityLoader/index.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@mantine/core');
+const hooks = require('@mantine/hooks');
+const React = require('react');
+
+const InfinityLoader = ({
+  root,
+  infinity,
+  rootMargin = "0px 0px 0px 0px",
+  endMessage = "No hay más resultados",
+  loaderProps,
+  ...props
+}) => {
+  const { entry, ref } = hooks.useIntersection({
+    root: root?.current,
+    rootMargin
+  });
+  React.useEffect(() => {
+    if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
+  }, [entry?.isIntersecting]);
+  React.useEffect(() => {
+    if (!entry?.isIntersecting) return;
+    const el = root?.current ?? document.documentElement;
+    const hasScroll = el?.scrollHeight > el?.clientHeight;
+    if (!hasScroll) infinity.fetchNextPage();
+  }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Center,
+    {
+      ref,
+      ...props,
+      style: {
+        minHeight: "1rem",
+        fontSize: "14px",
+        ...props.style
+      },
+      children: infinity.isLoading || infinity.isFetchingNextPage ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { ...loaderProps }) : infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage ? endMessage : null
+    }
+  );
+};
+
+exports.InfinityLoader = InfinityLoader;

package/dist/dist/components/InfinityLoader/index.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { Center, Loader } from '@mantine/core';
+import { useIntersection } from '@mantine/hooks';
+import { useEffect } from 'react';
+
+const InfinityLoader = ({
+  root,
+  infinity,
+  rootMargin = "0px 0px 0px 0px",
+  endMessage = "No hay más resultados",
+  loaderProps,
+  ...props
+}) => {
+  const { entry, ref } = useIntersection({
+    root: root?.current,
+    rootMargin
+  });
+  useEffect(() => {
+    if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
+  }, [entry?.isIntersecting]);
+  useEffect(() => {
+    if (!entry?.isIntersecting) return;
+    const el = root?.current ?? document.documentElement;
+    const hasScroll = el?.scrollHeight > el?.clientHeight;
+    if (!hasScroll) infinity.fetchNextPage();
+  }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  return /* @__PURE__ */ jsx(
+    Center,
+    {
+      ref,
+      ...props,
+      style: {
+        minHeight: "1rem",
+        fontSize: "14px",
+        ...props.style
+      },
+      children: infinity.isLoading || infinity.isFetchingNextPage ? /* @__PURE__ */ jsx(Loader, { ...loaderProps }) : infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage ? endMessage : null
+    }
+  );
+};
+
+export { InfinityLoader };

package/dist/dist/form/utils/zodValidator.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const zodValidator = (schema) => {
+  return (values) => {
+    const result = schema.safeParse(values);
+    if (result.success) return;
+    const { error } = result;
+    const firstError = error.issues[0];
+    return firstError?.message;
+  };
+};
+
+exports.zodValidator = zodValidator;

package/dist/dist/form/utils/zodValidator.js

@@ -0,0 +1,11 @@
+const zodValidator = (schema) => {
+  return (values) => {
+    const result = schema.safeParse(values);
+    if (result.success) return;
+    const { error } = result;
+    const firstError = error.issues[0];
+    return firstError?.message;
+  };
+};
+
+export { zodValidator };