lkd-web-kit 0.8.4 → 0.9.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 Rayyamhk
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 Rayyamhk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,30 +1,30 @@
-# LKD WebKit
-
-## Features
-
-- React: A JavaScript library for web and native user interfaces.
-- TypeScript: A strongly typed superset of JavaScript.
-<!-- - Storybook: A frontend workshop for building UI components and pages in isolation. -->
-- Vite: A next generation frontend tooling that runs and builds your library incredibly fast.
-- Vitest: A next generation testing framework.
-- ESLint: A tool that finds and fixes problems in your code.
-- Prettier: A code formatter.
-
-## Get Started
-
-1. Clone this repository
-2. Install dependencies using `npm i`
-
-## Scripts
-
-<!-- - `dev`: Starts the local Storybook server, use this to develop and preview your components. -->
-
-- `test`: Runs all your tests with vitest.
-- `test:watch`: Runs tests in watch mode.
-- `build`: Builds your component library with Vite.
-- `lint`: Runs ESLint.
-- `format`: Formats your code with Prettier.
-
-## License
-
-MIT
+# LKD WebKit
+
+## Features
+
+- React: A JavaScript library for web and native user interfaces.
+- TypeScript: A strongly typed superset of JavaScript.
+<!-- - Storybook: A frontend workshop for building UI components and pages in isolation. -->
+- Vite: A next generation frontend tooling that runs and builds your library incredibly fast.
+- Vitest: A next generation testing framework.
+- ESLint: A tool that finds and fixes problems in your code.
+- Prettier: A code formatter.
+
+## Get Started
+
+1. Clone this repository
+2. Install dependencies using `npm i`
+
+## Scripts
+
+<!-- - `dev`: Starts the local Storybook server, use this to develop and preview your components. -->
+
+- `test`: Runs all your tests with vitest.
+- `test:watch`: Runs tests in watch mode.
+- `build`: Builds your component library with Vite.
+- `lint`: Runs ESLint.
+- `format`: Formats your code with Prettier.
+
+## License
+
+MIT

package/dist/components/EmptyState/index.cjs

@@ -1,7 +1,7 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_Icon = require("../Icon.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/EmptyState/index.tsx
 var pxBySize = {
 	sm: 48,

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactNode } from 'react';
+import { IconFC } from '../Icon';
+export interface EmptyProps extends ComponentProps<'div'> {
+    label: ReactNode;
+    action?: ReactNode;
+    icon?: IconFC;
+    size?: keyof typeof pxBySize;
+}
+declare const pxBySize: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const EmptyState: ({ label, action, icon, size, ...props }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,MAAM,EAAE,MAAM,SAAS,CAAA;AAEtC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,KAAK,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAA;CAC7B;AAED,QAAA,MAAM,QAAQ;;;;CAIb,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,yCAAgD,UAAU,4CAkCpF,CAAA"}

package/dist/components/EmptyState/index.js

@@ -1,6 +1,6 @@
 import { Icon } from "../Icon.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Text, useMantineTheme } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/EmptyState/index.tsx
 var pxBySize = {
 	sm: 48,

package/dist/components/Icon.d.ts

@@ -0,0 +1,43 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+export type IconFC = React.FC<ComponentPropsWithoutRef<'svg'>>;
+export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
+    i: IconFC;
+    /**
+     * @property xs: 16px
+     * @property sm: 20px
+     * @property md: 24px
+     * @property lg: 28px
+     * @property xl: 32px
+     * @property 2xl: 40px
+     */
+    size?: keyof typeof stylesBySize | number;
+}
+export declare const Icon: ({ i: I, size, style, rotate, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const stylesBySize: {
+    xs: {
+        height: number;
+        width: number;
+    };
+    sm: {
+        height: number;
+        width: number;
+    };
+    md: {
+        height: number;
+        width: number;
+    };
+    lg: {
+        height: number;
+        width: number;
+    };
+    xl: {
+        height: number;
+        width: number;
+    };
+    "2xl": {
+        height: number;
+        width: number;
+    };
+};
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEvD,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;AAC9D,MAAM,WAAW,SAAU,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAChE,CAAC,EAAE,MAAM,CAAA;IACT;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,GAAG,MAAM,CAAA;CAC1C;AAED,eAAO,MAAM,IAAI,GAAI,wCAA+C,SAAS,4CAkB5E,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;CAyBjB,CAAA"}

package/dist/components/InfinityLoadMoreButton/index.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let _mantine_core = require("@mantine/core");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _mantine_core = require("@mantine/core");
 let _mantine_hooks = require("@mantine/hooks");
 let clsx = require("clsx");
 clsx = require_runtime.__toESM(clsx, 1);

package/dist/components/InfinityLoadMoreButton/index.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from '@mantine/core';
+import { InfiniteData } from '@tanstack/react-query';
+import { RefObject } from 'react';
+import { InfiniteQueryHookResult } from 'react-query-kit';
+export interface InfinityLoadMoreButtonProps<T> extends ButtonProps {
+    infinity: InfiniteQueryHookResult<InfiniteData<{
+        data?: T[];
+    }, number>, Error>;
+    parentRef?: RefObject<HTMLElement | null>;
+    loader?: React.ReactNode;
+    labels?: {
+        loadMore?: string;
+        end?: string;
+    };
+}
+export declare const InfinityLoadMoreButton: <T>({ infinity, labels, parentRef, loader, ...props }: InfinityLoadMoreButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InfinityLoadMoreButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InfinityLoadMoreButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAExD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AAE9D,MAAM,WAAW,2BAA2B,CAAC,CAAC,CAAE,SAAQ,WAAW;IACjE,QAAQ,EAAE,uBAAuB,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAA;KAAE,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,CAAA;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,GAAG,CAAC,EAAE,MAAM,CAAA;KACb,CAAA;CACF;AAED,eAAO,MAAM,sBAAsB,GAAI,CAAC,EAAG,mDAMxC,2BAA2B,CAAC,CAAC,CAAC,4CA8BhC,CAAA"}

package/dist/components/InfinityLoadMoreButton/index.js

@@ -1,6 +1,6 @@
+import { Button } from "@mantine/core";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Button } from "@mantine/core";
 import { useIntersection } from "@mantine/hooks";
 import clsx from "clsx";
 //#region src/components/InfinityLoadMoreButton/index.tsx

package/dist/components/InfinitySelect/index.cjs

@@ -2,14 +2,15 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../InfinityLoadMoreButton/index.cjs");
 const require_virtual_styles = require("../../utils/virtual-styles.cjs");
+let _mantine_core = require("@mantine/core");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _mantine_core = require("@mantine/core");
 let _mantine_hooks = require("@mantine/hooks");
 let _tanstack_react_virtual = require("@tanstack/react-virtual");
 //#region src/components/InfinitySelect/index.tsx
-function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable = true, defaultSelectedOption = null, loadMoreButtonProps, ...props }) {
-	const combobox = (0, _mantine_core.useCombobox)();
+var OPTION_HEIGHT = 40;
+function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable = true, defaultSelectedOption = null, loadMoreButtonProps, resetPageParam, readOnly, ...props }) {
+	const isReadOnly = !searchable || readOnly;
 	const [_selectedOption, handleSelectedOption] = (0, _mantine_hooks.useUncontrolled)({
 		defaultValue: defaultSelectedOption,
 		value: selectedOption,
@@ -25,14 +26,23 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 		value: searchValue,
 		onChange: onSearchChange
 	});
-	const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
-	const _reset = () => {
+	const data = (0, react.useMemo)(() => infinity.data?.pages.flatMap((page) => page.data ?? []) ?? [], [infinity.data]);
+	const scrollRef = (0, react.useRef)(null);
+	const [selectedOptionIndex, setSelectedOptionIndex] = (0, react.useState)(-1);
+	const [activeOptionIndex, setActiveOptionIndex] = (0, react.useState)(-1);
+	const resetSelection = (options) => {
 		handleSearch("");
 		handleValue(null);
 		handleSelectedOption(null);
+		setActiveOptionIndex(-1);
+		setSelectedOptionIndex(-1);
+		if (options?.resetPage) resetPageParam?.();
+	};
+	const _reset = () => {
+		resetSelection({ resetPage: true });
 	};
 	const setSearchAndValue = (option) => {
-		if (option === null) _reset();
+		if (option === null) resetSelection();
 		else {
 			handleSearch(getOptionLabel(option));
 			handleValue(getOptionValue(option));
@@ -43,42 +53,85 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 	}, [_selectedOption]);
 	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
 		count: data.length,
-		estimateSize: () => 40,
+		estimateSize: () => OPTION_HEIGHT,
+		getItemKey: (index) => getOptionValue(data[index]),
 		overscan: 7,
 		getScrollElement: () => scrollRef.current
 	});
-	const scrollRef = (0, react.useRef)(null);
+	const combobox = (0, _mantine_core.useVirtualizedCombobox)({
+		onDropdownOpen: () => {
+			if (activeOptionIndex >= 0 && activeOptionIndex < data.length) {
+				setSelectedOptionIndex(activeOptionIndex);
+				requestAnimationFrame(() => {
+					virtualizer.scrollToIndex(activeOptionIndex, { align: "auto" });
+				});
+			} else setSelectedOptionIndex(-1);
+		},
+		onDropdownClose: () => setSelectedOptionIndex(-1),
+		totalOptionsCount: data.length,
+		isOptionDisabled: (index) => index < 0 || index >= data.length,
+		getOptionId: (index) => {
+			return index >= 0 && index < data.length ? getOptionValue(data[index]) : null;
+		},
+		selectedOptionIndex,
+		activeOptionIndex,
+		setSelectedOptionIndex: (index) => {
+			setSelectedOptionIndex(index);
+			if (index !== -1) virtualizer.scrollToIndex(index, { align: "auto" });
+		},
+		onSelectedOptionSubmit: handleOptionSubmit
+	});
+	(0, react.useEffect)(() => {
+		setActiveOptionIndex(_value ? data.findIndex((option) => getOptionValue(option) === _value) : -1);
+	}, [
+		_value,
+		data,
+		getOptionValue
+	]);
+	(0, react.useEffect)(() => {
+		setSelectedOptionIndex(-1);
+		scrollRef.current?.scrollTo({ top: 0 });
+	}, [_search]);
+	(0, react.useEffect)(() => {
+		if (selectedOptionIndex >= data.length) setSelectedOptionIndex(-1);
+	}, [selectedOptionIndex, data.length]);
+	function handleOptionSubmit(index) {
+		if (index < 0 || index >= data.length) return;
+		const selectedOption = data[index];
+		const selectedValue = getOptionValue(selectedOption);
+		setSearchAndValue(selectedOption);
+		handleSelectedOption(selectedOption);
+		setActiveOptionIndex(index);
+		onOptionSubmit?.(selectedValue, selectedOption);
+		combobox.closeDropdown();
+		combobox.resetSelectedOption();
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Combobox, {
 		store: combobox,
 		middlewares: { shift: { crossAxis: true } },
-		onOptionSubmit: (val) => {
-			const selectedOption = data.find((i) => i && getOptionValue(i) === val);
-			if (selectedOption) {
-				setSearchAndValue(selectedOption);
-				handleSelectedOption(selectedOption);
-				onOptionSubmit?.(val, selectedOption);
-			}
-			combobox.closeDropdown();
-		},
+		resetSelectionOnOptionHover: false,
+		keepMounted: true,
 		...comboboxProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.InputBase, {
-			rightSection: props.readOnly ? null : value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Chevron, {}),
+			rightSection: readOnly ? null : _value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Chevron, {}),
 			component: "input",
-			rightSectionPointerEvents: value ? void 0 : "none",
-			readOnly: !searchable || props.readOnly,
+			rightSectionPointerEvents: _value ? void 0 : "none",
+			readOnly: isReadOnly,
 			pointer: !searchable,
 			value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
 			onChange: searchable ? (event) => {
 				if (event.currentTarget.value) combobox.openDropdown();
 				else combobox.closeDropdown();
+				setSelectedOptionIndex(-1);
 				handleSearch(event.currentTarget.value);
+				resetPageParam?.();
 			} : void 0,
 			onClick: (event) => {
-				if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
+				if (!readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
 				props.onClick?.(event);
 			},
 			onFocus: (event) => {
-				if (!props.readOnly && searchable) combobox.openDropdown();
+				if (!readOnly && searchable) combobox.openDropdown();
 				props.onFocus?.(event);
 			},
 			onBlur: (event) => {
@@ -87,7 +140,7 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 				props.onBlur?.(event);
 			},
 			...props,
-			variant: props.readOnly ? "filled" : "default"
+			variant: readOnly ? "filled" : "default"
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Dropdown, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Combobox.Options, {
 			mih: 50,
 			mah: 200,
@@ -98,10 +151,12 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 				children: virtualizer.getVirtualItems().map((virtualItem) => {
 					const option = data[virtualItem.index];
 					const virtualItemProps = require_virtual_styles.getVirtualItemProps(virtualItem, virtualizer);
-					if (!option) return null;
 					return /* @__PURE__ */ (0, react.createElement)(_mantine_core.Combobox.Option, {
 						value: getOptionValue(option),
 						...virtualItemProps,
+						active: virtualItem.index === activeOptionIndex,
+						selected: virtualItem.index === selectedOptionIndex,
+						onClick: () => handleOptionSubmit(virtualItem.index),
 						key: virtualItemProps.key,
 						style: {
 							...virtualItemProps.style,

package/dist/components/InfinitySelect/index.d.ts

@@ -0,0 +1,35 @@
+import { ComboboxProps, ComboboxStore, ElementProps, InputBaseProps } from '@mantine/core';
+import { InfiniteData } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { InfiniteQueryHookResult } from 'react-query-kit';
+import { InfinityLoadMoreButtonProps } from '../InfinityLoadMoreButton';
+export 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>;
+    defaultSelectedOption?: T | null;
+    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;
+    resetPageParam?: () => Promise<void>;
+    comboboxProps?: ComboboxProps;
+    searchable?: boolean;
+    ref?: React.Ref<HTMLInputElement>;
+    loadMoreButtonProps?: Partial<InfinityLoadMoreButtonProps<T>>;
+}
+export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, defaultSelectedOption, loadMoreButtonProps, resetPageParam, readOnly, ...props }: InfinitySelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InfinitySelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InfinitySelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,YAAY,EAGjB,KAAK,cAAc,EAEpB,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAA;AAC5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AAE9D,OAAO,EAA0B,KAAK,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAIpG,MAAM,WAAW,mBAAmB,CAAC,CAAC,GAAG,OAAO,CAC9C,SAAQ,cAAc,EACpB,YAAY,CAAC,OAAO,EAAE,MAAM,cAAc,GAAG,OAAO,GAAG,UAAU,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,mBAAmB,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,aAAa,CAAA;KAAE,KAAK,SAAS,CAAC,CAAA;IACpF,QAAQ,EAAE,uBAAuB,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAA;KAAE,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,CAAA;IAC9E,qBAAqB,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IAChC,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAA;IACrC,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAA;IACrC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACpC,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,CAAA;CAC9D;AAED,wBAAgB,cAAc,CAAC,CAAC,GAAG,OAAO,EAAE,EAC1C,KAAK,EACL,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,cAAc,EACd,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,UAAiB,EACjB,qBAA4B,EAC5B,mBAAmB,EACnB,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA8OxB"}

package/dist/components/InfinitySelect/index.js

@@ -1,14 +1,15 @@
 "use client";
 import { InfinityLoadMoreButton } from "../InfinityLoadMoreButton/index.js";
 import { getVirtualContainerProps, getVirtualItemProps } from "../../utils/virtual-styles.js";
-import { createElement, useEffect, useRef } from "react";
+import { Center, Combobox, Input, InputBase, useVirtualizedCombobox } from "@mantine/core";
+import { createElement, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Center, Combobox, Input, InputBase, useCombobox } from "@mantine/core";
 import { useUncontrolled } from "@mantine/hooks";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/InfinitySelect/index.tsx
-function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable = true, defaultSelectedOption = null, loadMoreButtonProps, ...props }) {
-	const combobox = useCombobox();
+var OPTION_HEIGHT = 40;
+function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable = true, defaultSelectedOption = null, loadMoreButtonProps, resetPageParam, readOnly, ...props }) {
+	const isReadOnly = !searchable || readOnly;
 	const [_selectedOption, handleSelectedOption] = useUncontrolled({
 		defaultValue: defaultSelectedOption,
 		value: selectedOption,
@@ -24,14 +25,23 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 		value: searchValue,
 		onChange: onSearchChange
 	});
-	const data = infinity.data?.pages.flatMap((page) => page.data) ?? [];
-	const _reset = () => {
+	const data = useMemo(() => infinity.data?.pages.flatMap((page) => page.data ?? []) ?? [], [infinity.data]);
+	const scrollRef = useRef(null);
+	const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);
+	const [activeOptionIndex, setActiveOptionIndex] = useState(-1);
+	const resetSelection = (options) => {
 		handleSearch("");
 		handleValue(null);
 		handleSelectedOption(null);
+		setActiveOptionIndex(-1);
+		setSelectedOptionIndex(-1);
+		if (options?.resetPage) resetPageParam?.();
+	};
+	const _reset = () => {
+		resetSelection({ resetPage: true });
 	};
 	const setSearchAndValue = (option) => {
-		if (option === null) _reset();
+		if (option === null) resetSelection();
 		else {
 			handleSearch(getOptionLabel(option));
 			handleValue(getOptionValue(option));
@@ -42,42 +52,85 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 	}, [_selectedOption]);
 	const virtualizer = useVirtualizer({
 		count: data.length,
-		estimateSize: () => 40,
+		estimateSize: () => OPTION_HEIGHT,
+		getItemKey: (index) => getOptionValue(data[index]),
 		overscan: 7,
 		getScrollElement: () => scrollRef.current
 	});
-	const scrollRef = useRef(null);
+	const combobox = useVirtualizedCombobox({
+		onDropdownOpen: () => {
+			if (activeOptionIndex >= 0 && activeOptionIndex < data.length) {
+				setSelectedOptionIndex(activeOptionIndex);
+				requestAnimationFrame(() => {
+					virtualizer.scrollToIndex(activeOptionIndex, { align: "auto" });
+				});
+			} else setSelectedOptionIndex(-1);
+		},
+		onDropdownClose: () => setSelectedOptionIndex(-1),
+		totalOptionsCount: data.length,
+		isOptionDisabled: (index) => index < 0 || index >= data.length,
+		getOptionId: (index) => {
+			return index >= 0 && index < data.length ? getOptionValue(data[index]) : null;
+		},
+		selectedOptionIndex,
+		activeOptionIndex,
+		setSelectedOptionIndex: (index) => {
+			setSelectedOptionIndex(index);
+			if (index !== -1) virtualizer.scrollToIndex(index, { align: "auto" });
+		},
+		onSelectedOptionSubmit: handleOptionSubmit
+	});
+	useEffect(() => {
+		setActiveOptionIndex(_value ? data.findIndex((option) => getOptionValue(option) === _value) : -1);
+	}, [
+		_value,
+		data,
+		getOptionValue
+	]);
+	useEffect(() => {
+		setSelectedOptionIndex(-1);
+		scrollRef.current?.scrollTo({ top: 0 });
+	}, [_search]);
+	useEffect(() => {
+		if (selectedOptionIndex >= data.length) setSelectedOptionIndex(-1);
+	}, [selectedOptionIndex, data.length]);
+	function handleOptionSubmit(index) {
+		if (index < 0 || index >= data.length) return;
+		const selectedOption = data[index];
+		const selectedValue = getOptionValue(selectedOption);
+		setSearchAndValue(selectedOption);
+		handleSelectedOption(selectedOption);
+		setActiveOptionIndex(index);
+		onOptionSubmit?.(selectedValue, selectedOption);
+		combobox.closeDropdown();
+		combobox.resetSelectedOption();
+	}
 	return /* @__PURE__ */ jsxs(Combobox, {
 		store: combobox,
 		middlewares: { shift: { crossAxis: true } },
-		onOptionSubmit: (val) => {
-			const selectedOption = data.find((i) => i && getOptionValue(i) === val);
-			if (selectedOption) {
-				setSearchAndValue(selectedOption);
-				handleSelectedOption(selectedOption);
-				onOptionSubmit?.(val, selectedOption);
-			}
-			combobox.closeDropdown();
-		},
+		resetSelectionOnOptionHover: false,
+		keepMounted: true,
 		...comboboxProps,
 		children: [/* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(InputBase, {
-			rightSection: props.readOnly ? null : value ? /* @__PURE__ */ jsx(Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
+			rightSection: readOnly ? null : _value ? /* @__PURE__ */ jsx(Input.ClearButton, { onClick: _reset }) : /* @__PURE__ */ jsx(Combobox.Chevron, {}),
 			component: "input",
-			rightSectionPointerEvents: value ? void 0 : "none",
-			readOnly: !searchable || props.readOnly,
+			rightSectionPointerEvents: _value ? void 0 : "none",
+			readOnly: isReadOnly,
 			pointer: !searchable,
 			value: searchable ? _search : _selectedOption ? getOptionLabel(_selectedOption) : "",
 			onChange: searchable ? (event) => {
 				if (event.currentTarget.value) combobox.openDropdown();
 				else combobox.closeDropdown();
+				setSelectedOptionIndex(-1);
 				handleSearch(event.currentTarget.value);
+				resetPageParam?.();
 			} : void 0,
 			onClick: (event) => {
-				if (!props.readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
+				if (!readOnly) searchable ? combobox.openDropdown() : combobox.toggleDropdown();
 				props.onClick?.(event);
 			},
 			onFocus: (event) => {
-				if (!props.readOnly && searchable) combobox.openDropdown();
+				if (!readOnly && searchable) combobox.openDropdown();
 				props.onFocus?.(event);
 			},
 			onBlur: (event) => {
@@ -86,7 +139,7 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 				props.onBlur?.(event);
 			},
 			...props,
-			variant: props.readOnly ? "filled" : "default"
+			variant: readOnly ? "filled" : "default"
 		}) }), /* @__PURE__ */ jsx(Combobox.Dropdown, { children: /* @__PURE__ */ jsx(Combobox.Options, {
 			mih: 50,
 			mah: 200,
@@ -97,10 +150,12 @@ function InfinitySelect({ value, searchValue, defaultSearchValue, nothingFoundMe
 				children: virtualizer.getVirtualItems().map((virtualItem) => {
 					const option = data[virtualItem.index];
 					const virtualItemProps = getVirtualItemProps(virtualItem, virtualizer);
-					if (!option) return null;
 					return /* @__PURE__ */ createElement(Combobox.Option, {
 						value: getOptionValue(option),
 						...virtualItemProps,
+						active: virtualItem.index === activeOptionIndex,
+						selected: virtualItem.index === selectedOptionIndex,
+						onClick: () => handleOptionSubmit(virtualItem.index),
 						key: virtualItemProps.key,
 						style: {
 							...virtualItemProps.style,

package/dist/components/InfinitySelect/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/components/InfinitySelect/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/components/InfinitySelect/index.test.tsx"],"names":[],"mappings":""}

package/dist/components/MyCheckboxGroup/index.cjs

@@ -1,6 +1,6 @@
 require("../../_virtual/_rolldown/runtime.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/MyCheckboxGroup/index.tsx
 var MyCheckboxGroup = ({ options, orientation = "horizontal", gap = "md", ...checkboxGroupProps }) => {
 	const Container = orientation === "horizontal" ? _mantine_core.Group : _mantine_core.Stack;

package/dist/components/MyCheckboxGroup/index.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxGroupProps, CheckboxProps, MantineSpacing } from '@mantine/core';
+export interface MyCheckboxGroupProps extends Omit<CheckboxGroupProps, 'children'> {
+    options: CheckboxProps[];
+    orientation?: 'horizontal' | 'vertical';
+    gap?: MantineSpacing;
+    disabled?: boolean;
+}
+export declare const MyCheckboxGroup: ({ options, orientation, gap, ...checkboxGroupProps }: MyCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MyCheckboxGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MyCheckboxGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,kBAAkB,EAClB,aAAa,EAEb,cAAc,EAIf,MAAM,eAAe,CAAA;AAEtB,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAChF,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,eAAe,GAAI,sDAK7B,oBAAoB,4CAWtB,CAAA"}