lkd-web-kit 0.4.0 → 0.4.1

package/dist/dist/hocs/withForm.cjs

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHookForm = require('react-hook-form');
+const zodValidator = require('../form/utils/zodValidator.cjs');
+
+const withForm = (WrappedComponent, getControllerProps) => {
+  const FormField = (props) => {
+    const { validate, name = "", placeholder, label, description, ...withFormRestProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        name,
+        defaultValue: "",
+        rules: {
+          validate: validate && !props.disabled ? zodValidator.zodValidator(validate) : void 0
+        },
+        disabled: props.disabled,
+        ...getControllerProps?.(props),
+        render: (renderProps) => {
+          const {
+            fieldState: { error }
+          } = renderProps;
+          const fieldProps = {
+            ...renderProps,
+            props: {
+              ...props,
+              validate: void 0
+            },
+            field: {
+              ...renderProps.field,
+              label,
+              placeholder,
+              description,
+              error: error?.message
+            },
+            ...withFormRestProps
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(WrappedComponent, { ...fieldProps });
+        }
+      }
+    );
+  };
+  FormField.displayName = `WithForm(${WrappedComponent.displayName})`;
+  return FormField;
+};
+
+exports.withForm = withForm;

package/dist/dist/hocs/withForm.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import { zodValidator } from '../form/utils/zodValidator.js';
+
+const withForm = (WrappedComponent, getControllerProps) => {
+  const FormField = (props) => {
+    const { validate, name = "", placeholder, label, description, ...withFormRestProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        defaultValue: "",
+        rules: {
+          validate: validate && !props.disabled ? zodValidator(validate) : void 0
+        },
+        disabled: props.disabled,
+        ...getControllerProps?.(props),
+        render: (renderProps) => {
+          const {
+            fieldState: { error }
+          } = renderProps;
+          const fieldProps = {
+            ...renderProps,
+            props: {
+              ...props,
+              validate: void 0
+            },
+            field: {
+              ...renderProps.field,
+              label,
+              placeholder,
+              description,
+              error: error?.message
+            },
+            ...withFormRestProps
+          };
+          return /* @__PURE__ */ jsx(WrappedComponent, { ...fieldProps });
+        }
+      }
+    );
+  };
+  FormField.displayName = `WithForm(${WrappedComponent.displayName})`;
+  return FormField;
+};
+
+export { withForm };

package/dist/form/base/FormSelectInfinity.cjs

@@ -3,15 +3,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const withForm = require('../../dist/hocs/withForm.cjs');
 const index = require('../../components/SelectInfinity/index.cjs');
-const withForm = require('../../hocs/withForm.cjs');
 
-const FormSelectInfinity = withForm.withForm(({ field, props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  index.SelectInfinity,
-  {
-    ...field,
-    ...props
-  }
-));
+const FormInfinitySelect = withForm.withForm(({ field, props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.InfinitySelect,
+    {
+      ...field,
+      ...props,
+      onChange: (e) => {
+        field.onChange(e);
+        props.onChange?.(e);
+      }
+    }
+  );
+});
 
-exports.FormSelectInfinity = FormSelectInfinity;
+exports.FormInfinitySelect = FormInfinitySelect;

package/dist/form/base/FormSelectInfinity.js

@@ -1,13 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
-import { SelectInfinity } from '../../components/SelectInfinity/index.js';
-import { withForm } from '../../hocs/withForm.js';
+import { withForm } from '../../dist/hocs/withForm.js';
+import { InfinitySelect } from '../../components/SelectInfinity/index.js';
 
-const FormSelectInfinity = withForm(({ field, props }) => /* @__PURE__ */ jsx(
-  SelectInfinity,
-  {
-    ...field,
-    ...props
-  }
-));
+const FormInfinitySelect = withForm(({ field, props }) => {
+  return /* @__PURE__ */ jsx(
+    InfinitySelect,
+    {
+      ...field,
+      ...props,
+      onChange: (e) => {
+        field.onChange(e);
+        props.onChange?.(e);
+      }
+    }
+  );
+});
 
-export { FormSelectInfinity };
+export { FormInfinitySelect };

package/dist/hocs/withModalManager.cjs

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('react');
+const React = require('react');
 
 const withModalManager = (WrappedComponent) => {
   const Component = ({
@@ -12,13 +12,13 @@ const withModalManager = (WrappedComponent) => {
     opened,
     ...props
   }) => {
-    const [isOpen, setIsOpen] = react.useState(false);
+    const [isOpen, setIsOpen] = React.useState(false);
     const onClose = () => {
       setIsOpen(false);
       setTimeout(() => removeModal(), 200);
       props.onClose?.();
     };
-    react.useEffect(() => {
+    React.useEffect(() => {
       if (opened) setTimeout(() => setIsOpen(true), 0);
       else onClose();
     }, [opened]);

package/dist/hooks/useOnScrollProgress.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react = require('react');
+const React = require('react');
 
 const useOnScrollProgress = ({
   triggerPercentage,
@@ -13,7 +13,7 @@ const useOnScrollProgress = ({
 }) => {
   if (triggerPercentage < 0 || triggerPercentage > 1)
     throw new Error("El porcentaje debe estar entre 0 y 1");
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (disabled || scrollRef && scrollRef.current === null) return;
     let hasTriggered = false;
     const handleScroll = () => {

package/dist/index.cjs

@@ -55,6 +55,7 @@ const shuffleArray = require('./utils/array/shuffleArray.cjs');
 const isInfinityEmpty = require('./utils/isInfinityEmpty.cjs');
 const queryStringify = require('./utils/query-stringify.cjs');
 const newRoute = require('./utils/new-route.cjs');
+const virtualStyles = require('./utils/virtual-styles.cjs');
 
 
 
@@ -70,7 +71,7 @@ exports.MySelect = index$6.MySelect;
 exports.MyTextarea = index$7.MyTextarea;
 exports.MyTextInput = index$8.MyTextInput;
 exports.MyTimeInput = index$9.MyTimeInput;
-exports.SelectInfinity = index$a.SelectInfinity;
+exports.InfinitySelect = index$a.InfinitySelect;
 exports.MyMultiSelect = index$b.MyMultiSelect;
 exports.MyMonthPickerInput = index$c.MyMonthPickerInput;
 exports.HttpStatus = httpStatus.HttpStatus;
@@ -91,7 +92,7 @@ exports.FormDateTimePicker = FormDateTimePicker.FormDateTimePicker;
 exports.FormNumberInput = FormNumberInput.FormNumberInput;
 exports.FormRadioGroup = FormRadioGroup.FormRadioGroup;
 exports.FormSelect = FormSelect.FormSelect;
-exports.FormSelectInfinity = FormSelectInfinity.FormSelectInfinity;
+exports.FormInfinitySelect = FormSelectInfinity.FormInfinitySelect;
 exports.FormTextarea = FormTextarea.FormTextarea;
 exports.FormTextInput = FormTextInput.FormTextInput;
 exports.FormTimeInput = FormTimeInput.FormTimeInput;
@@ -118,3 +119,5 @@ exports.isInfinityEmpty = isInfinityEmpty.isInfinityEmpty;
 exports.queryStringify = queryStringify.queryStringify;
 exports.createNewRoute = newRoute.createNewRoute;
 exports.newRoute = newRoute.newRoute;
+exports.getVirtualContainerProps = virtualStyles.getVirtualContainerProps;
+exports.getVirtualItemProps = virtualStyles.getVirtualItemProps;

package/dist/index.d.ts

@@ -3,7 +3,8 @@ import { BoxProps } from '@mantine/core';
 import { ButtonProps } from '@mantine/core';
 import { CenterProps } from '@mantine/core';
 import { CheckboxProps } from '@mantine/core';
-import { ComboboxItem } from '@mantine/core';
+import { ComboboxProps } from '@mantine/core';
+import { ComboboxStore } from '@mantine/core';
 import { ComponentProps } from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 import { ControllerProps } from 'react-hook-form';
@@ -43,6 +44,7 @@ import { TextareaProps } from '@mantine/core';
 import { TextInputProps } from '@mantine/core';
 import { TimeInputProps } from '@mantine/dates';
 import { UseFormReturn } from 'react-hook-form';
+import { VirtualItem } from '@tanstack/react-virtual';
 import { z } from 'zod';
 import { ZodTypeAny } from 'zod';
 
@@ -131,6 +133,10 @@ export declare type FormFieldProps<T = unknown> = Parameters<ControllerProps['re
     };
 };
 
+export declare const FormInfinitySelect: <T>(props: FormInfinitySelectProps<T>) => ReactNode;
+
+export declare type FormInfinitySelectProps<T = unknown> = InfinitySelectProps<T> & WithFormProps;
+
 export declare const FormMonthPickerInput: FC<MyMonthPickerInputProps & WithFormProps>;
 
 export declare type FormMonthPickerInputProps = WithFormProps & MyMonthPickerInputProps;
@@ -155,10 +161,6 @@ export declare type FormRadioGroupProps = RadioGroupProps & WithFormProps;
 
 export declare const FormSelect: FC<MySelectProps & WithFormProps>;
 
-export declare const FormSelectInfinity: FC<SelectInfinityProps & WithFormProps>;
-
-export declare type FormSelectInfinityProps = SelectInfinityProps & WithFormProps;
-
 export declare type FormSelectProps = MySelectProps & WithFormProps;
 
 export declare const FormTextarea: FC<TextareaProps & WithFormProps>;
@@ -173,6 +175,19 @@ export declare type FormTimeInput = MyTimeInputProps & WithFormProps;
 
 export declare const FormTimeInput: FC<TimeInputProps & WithFormProps>;
 
+export declare const getVirtualContainerProps: (virtualizer: {
+    getTotalSize: () => number;
+}) => ComponentProps<"div">;
+
+export declare const getVirtualItemProps: (item: VirtualItem, virtualizer: {
+    options: {
+        scrollMargin: number;
+    };
+    measureElement: (element: Element | null) => void;
+}) => ComponentProps<"div"> & {
+    ["data-index"]: number;
+};
+
 export declare const groupBy: <T extends any>(arr: T[], getKey: (item: T) => string | string[] | null) => Record<string, T[] | undefined>;
 
 export declare type GroupByResult<T> = Record<string, T[] | undefined>;
@@ -276,6 +291,32 @@ export declare interface InfinityLoaderProps extends CenterProps {
     loaderProps?: LoaderProps;
 }
 
+export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, ...props }: InfinitySelectProps<T>): JSX.Element;
+
+export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<'input', keyof InputBaseProps | 'value' | 'onChange'> {
+    value?: string | null;
+    defaultValue?: string;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    nothingFoundMessage?: ReactNode | ((data: {
+        combobox: ComboboxStore;
+    }) => ReactNode);
+    infinity: InfiniteQueryHookResult<InfiniteData<{
+        data: T[];
+    }, number>, Error>;
+    selectedOption?: T | null;
+    onSelectedOptionChange?: (option: T | null) => void;
+    onSearchChange?: (value: string) => void;
+    onChange?: (value: string | null) => void;
+    renderOption?: (args: {
+        option: T;
+    }) => React.ReactNode;
+    onOptionSubmit?: (value: string, option: T) => void;
+    getOptionLabel: (option: T) => string;
+    getOptionValue: (option: T) => string;
+    comboboxProps?: ComboboxProps;
+}
+
 export declare const isInfinityEmpty: (data: InfiniteData<{
     data: unknown[];
 }> | undefined) => boolean;
@@ -447,25 +488,6 @@ declare type RouteOptions<Query, PathParams> = {
     pathBuilder?: (params: PathParams) => string;
 };
 
-export declare function SelectInfinity({ value, onChange, data, searchValue, onSearchChange, renderOption, onOptionSubmit, nothingFoundMessage, infinity, placeholder, ...props }: SelectInfinityProps): JSX.Element;
-
-export declare interface SelectInfinityProps extends InputBaseProps, ElementProps<'button', keyof InputBaseProps | 'value' | 'onChange'> {
-    value?: string | null;
-    onChange?: (value: string | null) => void;
-    data?: ComboboxItem[];
-    searchValue?: string;
-    onSearchChange?: (value: string) => void;
-    renderOption?: (args: {
-        option: ComboboxItem;
-    }) => React.ReactNode;
-    onOptionSubmit?: (value: string) => void;
-    nothingFoundMessage?: ReactNode;
-    infinity: InfiniteQueryHookResult<InfiniteData<{
-        data: unknown[];
-    }, number>, Error>;
-    placeholder?: string;
-}
-
 export declare type Setter<T> = Dispatch<SetStateAction<T>>;
 
 export declare const shuffleArray: <T>(array: T[]) => T[];

package/dist/index.js

@@ -10,7 +10,7 @@ export { MySelect } from './components/MySelect/index.js';
 export { MyTextarea } from './components/MyTextarea/index.js';
 export { MyTextInput } from './components/MyTextInput/index.js';
 export { MyTimeInput } from './components/MyTimeInput/index.js';
-export { SelectInfinity } from './components/SelectInfinity/index.js';
+export { InfinitySelect } from './components/SelectInfinity/index.js';
 export { MyMultiSelect } from './components/MyMultiSelect/index.js';
 export { MyMonthPickerInput } from './components/MyMonthPickerInput/index.js';
 export { HttpStatus } from './consts/http-status.js';
@@ -28,7 +28,7 @@ export { FormDateTimePicker } from './form/base/FormDateTimePicker.js';
 export { FormNumberInput } from './form/base/FormNumberInput.js';
 export { FormRadioGroup } from './form/base/FormRadioGroup.js';
 export { FormSelect } from './form/base/FormSelect.js';
-export { FormSelectInfinity } from './form/base/FormSelectInfinity.js';
+export { FormInfinitySelect } from './form/base/FormSelectInfinity.js';
 export { FormTextarea } from './form/base/FormTextarea.js';
 export { FormTextInput } from './form/base/FormTextInput.js';
 export { FormTimeInput, numberToTimeInput, timeInputToNumber } from './form/base/FormTimeInput.js';
@@ -51,3 +51,4 @@ export { shuffleArray } from './utils/array/shuffleArray.js';
 export { isInfinityEmpty } from './utils/isInfinityEmpty.js';
 export { queryStringify } from './utils/query-stringify.js';
 export { createNewRoute, newRoute } from './utils/new-route.js';
+export { getVirtualContainerProps, getVirtualItemProps } from './utils/virtual-styles.js';

package/dist/node_modules/@tanstack/react-virtual/dist/esm/index.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const reactDom = require('react-dom');
+const index = require('../../../virtual-core/dist/esm/index.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function useVirtualizerBase(options) {
+  const rerender = React__namespace.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: (instance2, sync) => {
+      var _a;
+      if (sync) {
+        reactDom.flushSync(rerender);
+      } else {
+        rerender();
+      }
+      (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
+    }
+  };
+  const [instance] = React__namespace.useState(
+    () => new index.Virtualizer(resolvedOptions)
+  );
+  instance.setOptions(resolvedOptions);
+  useIsomorphicLayoutEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect: index.observeElementRect,
+    observeElementOffset: index.observeElementOffset,
+    scrollToFn: index.elementScroll,
+    ...options
+  });
+}
+
+exports.Virtualizer = index.Virtualizer;
+exports.defaultKeyExtractor = index.defaultKeyExtractor;
+exports.defaultRangeExtractor = index.defaultRangeExtractor;
+exports.elementScroll = index.elementScroll;
+exports.measureElement = index.measureElement;
+exports.observeElementOffset = index.observeElementOffset;
+exports.observeElementRect = index.observeElementRect;
+exports.useVirtualizer = useVirtualizer;

package/dist/node_modules/@tanstack/react-virtual/dist/esm/index.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from '../../../virtual-core/dist/esm/index.js';
+export { defaultKeyExtractor, defaultRangeExtractor, measureElement } from '../../../virtual-core/dist/esm/index.js';
+
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function useVirtualizerBase(options) {
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = {
+    ...options,
+    onChange: (instance2, sync) => {
+      var _a;
+      if (sync) {
+        flushSync(rerender);
+      } else {
+        rerender();
+      }
+      (_a = options.onChange) == null ? void 0 : _a.call(options, instance2, sync);
+    }
+  };
+  const [instance] = React.useState(
+    () => new Virtualizer(resolvedOptions)
+  );
+  instance.setOptions(resolvedOptions);
+  useIsomorphicLayoutEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
+}
+
+export { Virtualizer, elementScroll, observeElementOffset, observeElementRect, useVirtualizer };