lkd-web-kit 0.5.18 → 0.6.0

package/dist/components/InfinityLoader/index.cjs

@@ -28,6 +28,11 @@ const InfinityLoader = ({
     const hasScroll = el?.scrollHeight > el?.clientHeight;
     if (!hasScroll) infinity.fetchNextPage();
   }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  const showLoader = infinity.isLoading || infinity.isFetchingNextPage;
+  const showEndMessage = infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage;
+  if (!showLoader && !showEndMessage) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Center,
     {
@@ -38,7 +43,7 @@ const InfinityLoader = ({
         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
+      children: showLoader ? /* @__PURE__ */ jsxRuntime.jsx(core.Loader, { ...loaderProps }) : showEndMessage ? endMessage : null
     }
   );
 };

package/dist/components/InfinityLoader/index.js

@@ -24,6 +24,11 @@ const InfinityLoader = ({
     const hasScroll = el?.scrollHeight > el?.clientHeight;
     if (!hasScroll) infinity.fetchNextPage();
   }, [entry?.isIntersecting, infinity.data?.pages.length]);
+  const showLoader = infinity.isLoading || infinity.isFetchingNextPage;
+  const showEndMessage = infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage;
+  if (!showLoader && !showEndMessage) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     Center,
     {
@@ -34,7 +39,7 @@ const InfinityLoader = ({
         fontSize: "14px",
         ...props.style
       },
-      children: infinity.isLoading || infinity.isFetchingNextPage ? /* @__PURE__ */ jsx(Loader, { ...loaderProps }) : infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage ? endMessage : null
+      children: showLoader ? /* @__PURE__ */ jsx(Loader, { ...loaderProps }) : showEndMessage ? endMessage : null
     }
   );
 };

package/dist/components/SelectInfinity/index.cjs

@@ -28,11 +28,12 @@ function InfinitySelect({
   selectedOption,
   comboboxProps,
   searchable = true,
+  defaultSelectedOption,
   ...props
 }) {
   const combobox = core.useCombobox();
   const [_selectedOption, handleSelectedOption] = hooks.useUncontrolled({
-    defaultValue: null,
+    defaultValue: defaultSelectedOption,
     value: selectedOption,
     onChange: onSelectedOptionChange
   });

package/dist/components/SelectInfinity/index.js

@@ -24,11 +24,12 @@ function InfinitySelect({
   selectedOption,
   comboboxProps,
   searchable = true,
+  defaultSelectedOption,
   ...props
 }) {
   const combobox = useCombobox();
   const [_selectedOption, handleSelectedOption] = useUncontrolled({
-    defaultValue: null,
+    defaultValue: defaultSelectedOption,
     value: selectedOption,
     onChange: onSelectedOptionChange
   });

package/dist/hocs/withController.cjs

@@ -32,6 +32,10 @@ const withController = (WrappedComponent, getControllerProps) => {
             },
             field: {
               ...renderProps.field,
+              onChange: (...value) => {
+                renderProps.field.onChange(...value);
+                props.onValueChange?.(...value);
+              },
               label,
               placeholder,
               description,

package/dist/hocs/withController.js

@@ -28,6 +28,10 @@ const withController = (WrappedComponent, getControllerProps) => {
             },
             field: {
               ...renderProps.field,
+              onChange: (...value) => {
+                renderProps.field.onChange(...value);
+                props.onValueChange?.(...value);
+              },
               label,
               placeholder,
               description,

package/dist/index.d.ts

@@ -2,7 +2,9 @@ import { BeforeErrorHook } from 'ky';
 import { BoxProps } from '@mantine/core';
 import { ButtonProps } from '@mantine/core';
 import { CenterProps } from '@mantine/core';
+import { ChangeEventHandler } from 'react';
 import { CheckboxProps } from '@mantine/core';
+import { ComboboxItem } from '@mantine/core';
 import { ComboboxProps } from '@mantine/core';
 import { ComboboxStore } from '@mantine/core';
 import { ComponentProps } from 'react';
@@ -10,6 +12,8 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ControllerProps } from 'react-hook-form';
 import { DateInputProps } from '@mantine/dates';
 import { DatePickerInputProps } from '@mantine/dates';
+import { DatesRangeValue } from '@mantine/dates';
+import { DateStringValue } from '@mantine/dates';
 import { DateTimePickerProps } from '@mantine/dates';
 import { default as default_2 } from 'react';
 import { DefaultMantineColor } from '@mantine/core';
@@ -115,19 +119,27 @@ export declare interface FormButtonSubmitProps extends ButtonProps, ElementProps
     disabledWhenSuccess?: boolean;
 }
 
-export declare const FormCheckbox: FC<CheckboxProps & WithControllerProps>;
+export declare const FormCheckbox: FC<CheckboxProps & WithControllerProps & {
+onValueChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+}>;
 
 export declare type FormCheckboxProps = CheckboxProps & WithControllerProps;
 
-export declare const FormDateInput: FC<WithControllerProps & MyDateInputProps>;
+export declare const FormDateInput: FC<WithControllerProps & MyDateInputProps & {
+onValueChange?: ((value: DateStringValue | null) => void) | undefined;
+}>;
 
 export declare type FormDateInputProps = WithControllerProps & MyDateInputProps;
 
-export declare const FormDatePickerInput: FC<WithControllerProps & MyDatePickerInputProps>;
+export declare const FormDatePickerInput: FC<WithControllerProps & MyDatePickerInputProps & {
+onValueChange?: ((value: string | string[] | DatesRangeValue<string> | null) => void) | undefined;
+}>;
 
 export declare type FormDatePickerInputProps = WithControllerProps & MyDatePickerInputProps;
 
-export declare const FormDateTimePicker: FC<DateTimePickerProps & WithControllerProps>;
+export declare const FormDateTimePicker: FC<DateTimePickerProps & WithControllerProps & {
+onValueChange?: ((value: DateStringValue | null) => void) | undefined;
+}>;
 
 export declare type FormDateTimePickerProps = WithControllerProps & MyDateTimePickerProps;
 
@@ -145,15 +157,21 @@ export declare const FormInfinitySelect: <T>(props: FormInfinitySelectProps<T>)
 
 export declare type FormInfinitySelectProps<T = unknown> = InfinitySelectProps<T> & WithControllerProps;
 
-export declare const FormMonthPickerInput: FC<MyMonthPickerInputProps & WithControllerProps>;
+export declare const FormMonthPickerInput: FC<MyMonthPickerInputProps & WithControllerProps & {
+onValueChange?: ((value: string | string[] | DatesRangeValue<string> | null) => void) | undefined;
+}>;
 
 export declare type FormMonthPickerInputProps = WithControllerProps & MyMonthPickerInputProps;
 
-export declare const FormMultiSelect: FC<MyMultiSelectProps & WithControllerProps>;
+export declare const FormMultiSelect: FC<MyMultiSelectProps & WithControllerProps & {
+onValueChange?: ((value: string[]) => void) | undefined;
+}>;
 
 export declare type FormMultiSelectProps = MyMultiSelectProps & WithControllerProps;
 
-export declare const FormNumberInput: FC<MyNumberInputProps & WithControllerProps>;
+export declare const FormNumberInput: FC<MyNumberInputProps & WithControllerProps & {
+onValueChange?: ((value: number | string) => void) | undefined;
+}>;
 
 export declare type FormNumberInputProps = MyNumberInputProps & WithControllerProps;
 
@@ -163,25 +181,35 @@ declare interface FormProps<T extends FieldValues, TContext = any, TT extends T
     onSubmitError?: SubmitErrorHandler<T>;
 }
 
-export declare const FormRadioGroup: FC<MyRadioGroupProps & WithControllerProps>;
+export declare const FormRadioGroup: FC<MyRadioGroupProps & WithControllerProps & {
+onValueChange?: ((value: string) => void) | undefined;
+}>;
 
 export declare type FormRadioGroupProps = MyRadioGroupProps & WithControllerProps;
 
-export declare const FormSelect: FC<MySelectProps & WithControllerProps>;
+export declare const FormSelect: FC<MySelectProps & WithControllerProps & {
+onValueChange?: ((value: string | null, option: ComboboxItem) => void) | undefined;
+}>;
 
 export declare type FormSelectProps = MySelectProps & WithControllerProps;
 
-export declare const FormTextarea: FC<TextareaProps & WithControllerProps>;
+export declare const FormTextarea: FC<TextareaProps & WithControllerProps & {
+onValueChange?: ChangeEventHandler<HTMLTextAreaElement> | undefined;
+}>;
 
 export declare type FormTextareaProps = MyTextareaProps & WithControllerProps;
 
-export declare const FormTextInput: FC<WithControllerProps & MyTextInputProps>;
+export declare const FormTextInput: FC<WithControllerProps & MyTextInputProps & {
+onValueChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+}>;
 
 export declare type FormTextInputProps = WithControllerProps & MyTextInputProps;
 
 export declare type FormTimeInput = MyTimeInputProps & WithControllerProps;
 
-export declare const FormTimeInput: FC<TimeInputProps & WithControllerProps>;
+export declare const FormTimeInput: FC<TimeInputProps & WithControllerProps & {
+onValueChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+}>;
 
 export declare const getVirtualContainerProps: (virtualizer: {
     getTotalSize: () => number;
@@ -287,7 +315,7 @@ export declare function indexBy<T, K, C extends string>(arr: T[], getKey: (item:
 
 export declare type IndexByResult<T> = Record<string, T | undefined>;
 
-export declare const InfinityLoader: ({ root, infinity, rootMargin, endMessage, loaderProps, ...props }: InfinityLoaderProps) => JSX.Element;
+export declare const InfinityLoader: ({ root, infinity, rootMargin, endMessage, loaderProps, ...props }: InfinityLoaderProps) => JSX.Element | null;
 
 export declare interface InfinityLoaderProps extends CenterProps {
     infinity: InfiniteQueryHookResult<InfiniteData<{
@@ -299,7 +327,7 @@ 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, searchable, ...props }: InfinitySelectProps<T>): JSX.Element;
+export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, defaultSelectedOption, ...props }: InfinitySelectProps<T>): JSX.Element;
 
 export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<'input', keyof InputBaseProps | 'value' | 'onChange'> {
     value?: string | null;
@@ -312,6 +340,7 @@ export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps
     infinity: InfiniteQueryHookResult<InfiniteData<{
         data: T[];
     }, number>, Error>;
+    defaultSelectedOption?: T | null;
     selectedOption?: T | null;
     onSelectedOptionChange?: (option: T | null) => void;
     onSearchChange?: (value: string) => void;
@@ -576,7 +605,11 @@ export declare const useUpdateSearchParams: () => {
 
 export declare const useZodConfig: () => void;
 
-export declare const withController: <P extends unknown>(WrappedComponent: React.ComponentType<FormFieldProps<P>>, getControllerProps?: (fieldProps: P) => Omit<Partial<ControllerProps>, "render">) => FC<P & WithControllerProps>;
+export declare const withController: <P extends {
+    onChange?: any;
+}>(WrappedComponent: React.ComponentType<FormFieldProps<P>>, getControllerProps?: (fieldProps: P) => Omit<Partial<ControllerProps>, "render">) => FC<P & WithControllerProps & {
+onValueChange?: P["onChange"];
+}>;
 
 export declare interface WithControllerProps {
     name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.5.18",
+  "version": "0.6.0",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -28,27 +28,27 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.15.33",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.35.0",
-    "@typescript-eslint/parser": "^8.35.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@types/node": "^22.17.2",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.40.0",
+    "@typescript-eslint/parser": "^8.40.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.29.0",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^26.1.0",
-    "prettier": "^3.6.1",
+    "prettier": "^3.6.2",
     "rollup-preserve-directives": "^1.1.3",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },