npm - @yamada-ui/react - Versions diffs - 2.1.2 → 2.1.3-dev-20260312041045 - Mend

@yamada-ui/react 2.1.2 → 2.1.3-dev-20260312041045

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_ref = require('../../utils/ref.cjs');
-require('../../utils/index.cjs');
+const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
@@ -30,7 +30,7 @@ const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: fini
 		resetRef,
 		reverse,
 		rootMargin,
-		rootRef: rootRefProp ?? rootRef,
+		rootRef: (0, require_utils_index.utils_exports.isNull)(rootRefProp) ? null : rootRefProp ?? rootRef,
 		startIndex,
 		threshold,
 		onLoad

package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infinite-scroll-area.cjs","names":["createSlotComponent","infiniteScrollAreaStyle","useInfiniteScroll","useValue","styled","mergeRefs"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n extends\n Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n Omit<UseInfiniteScrollProps, \"orientation\">,\n ThemeProps<InfiniteScrollAreaStyle> {\n /*\n The infinite scroll area finish to use.\n /\n finish?: ReactNode\n /\n The infinite scroll area loading to use.\n /\n loading?: ReactNode\n /\n Props for infinite scroll area trigger component.\n /\n triggerProps?: HTMLStyledProps\n}\n\nconst {\n PropsContext: InfiniteScrollAreaPropsContext,\n usePropsContext: useInfiniteScrollAreaPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n \"infinite-scroll-area\",\n infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/\n `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n \n @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n \"div\",\n InfiniteScrollAreaProps,\n \"orientation\"\n>(\n ({\n ref,\n children,\n disabled,\n finish: finishProp,\n indexRef,\n initialLoad,\n loading,\n orientation: orientationProp,\n resetRef,\n reverse,\n rootMargin,\n rootRef: rootRefProp,\n startIndex,\n threshold,\n triggerProps,\n onLoad,\n ...rest\n }) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const orientation = useValue(orientationProp)\n const { ref: triggerRef, finish } = useInfiniteScroll({\n disabled,\n indexRef,\n initialLoad,\n orientation,\n resetRef,\n reverse,\n rootMargin,\n rootRef: rootRefProp ?? rootRef,\n startIndex,\n threshold,\n onLoad,\n })\n const hasFinish = !!finishProp\n const showTrigger = !disabled && (hasFinish \|\| !finish)\n\n return (\n <styled.div\n ref={mergeRefs(rootRef, ref)}\n aria-busy=\"false\"\n role=\"feed\"\n {...rest}\n >\n {reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n\n {children}\n\n {!reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n </styled.div>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n \"div\",\n \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACEA,6CACF,wBACAC,2DACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,4BAAiC,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAWC,8CAAkB;EACpD;EACA;EACA;EACA,aALkBC,uCAAS,gBAAgB;EAM3C;EACA;EACA;EACA,~~SAAS~~,eAAe;~~EACxB~~;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,4CAACC,uBAAO;EACN,KAAKC,sBAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}
1	+ {"version":3,"file":"infinite-scroll-area.cjs","names":["createSlotComponent","infiniteScrollAreaStyle","useInfiniteScroll","useValue","styled","mergeRefs"],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n extends\n Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n Omit<UseInfiniteScrollProps, \"orientation\">,\n ThemeProps<InfiniteScrollAreaStyle> {\n /*\n The infinite scroll area finish to use.\n /\n finish?: ReactNode\n /\n The infinite scroll area loading to use.\n /\n loading?: ReactNode\n /\n Props for infinite scroll area trigger component.\n /\n triggerProps?: HTMLStyledProps\n}\n\nconst {\n PropsContext: InfiniteScrollAreaPropsContext,\n usePropsContext: useInfiniteScrollAreaPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n \"infinite-scroll-area\",\n infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/\n `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n \n @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n \"div\",\n InfiniteScrollAreaProps,\n \"orientation\"\n>(\n ({\n ref,\n children,\n disabled,\n finish: finishProp,\n indexRef,\n initialLoad,\n loading,\n orientation: orientationProp,\n resetRef,\n reverse,\n rootMargin,\n rootRef: rootRefProp,\n startIndex,\n threshold,\n triggerProps,\n onLoad,\n ...rest\n }) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const orientation = useValue(orientationProp)\n const { ref: triggerRef, finish } = useInfiniteScroll({\n disabled,\n indexRef,\n initialLoad,\n orientation,\n resetRef,\n reverse,\n rootMargin,\n rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n startIndex,\n threshold,\n onLoad,\n })\n const hasFinish = !!finishProp\n const showTrigger = !disabled && (hasFinish \|\| !finish)\n\n return (\n <styled.div\n ref={mergeRefs(rootRef, ref)}\n aria-busy=\"false\"\n role=\"feed\"\n {...rest}\n >\n {reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n\n {children}\n\n {!reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n </styled.div>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n \"div\",\n \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACEA,6CACF,wBACAC,2DACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,4BAAiC,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAWC,8CAAkB;EACpD;EACA;EACA;EACA,aALkBC,uCAAS,gBAAgB;EAM3C;EACA;EACA;EACA,uDAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,4CAACC,uBAAO;EACN,KAAKC,sBAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,2CAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

package/dist/cjs/components/infinite-scroll-area/use-infinite-scroll.cjs CHANGED Viewed

@@ -41,17 +41,6 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 	const onLoad = require_ref.useCallbackRef(onLoadProp);
 	const vertical = orientation === "vertical";
 	const direction = vertical ? "top" : "left";
-	const options = (0, react.useMemo)(() => {
-		return {
-			root: rootRef?.current,
-			rootMargin,
-			threshold
-		};
-	}, [
-		rootMargin,
-		rootRef,
-		threshold
-	]);
 	const onReset = (0, react.useCallback)((index = 1, runScroll = true) => {
 		indexRef.current = index;
 		setFinish(false);
@@ -91,10 +80,11 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 		setFinish(true);
 	}, []);
 	const createObserver = (0, react.useCallback)(() => {
+		const root = rootRef?.current ?? null;
 		return new IntersectionObserver(async ([entry]) => {
-			const root = rootRef?.current;
+			const root$1 = rootRef?.current;
 			const body = getDocument()?.body;
-			const el = root && isScrollable(root, vertical) ? root : body;
+			const el = root$1 && isScrollable(root$1, vertical) ? root$1 : body;
 			if (!entry?.isIntersecting || processingRef.current || !el) return;
 			const props = {
 				entry,
@@ -102,7 +92,7 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 				index: indexRef.current
 			};
 			processingRef.current = true;
-			if (root) root.ariaBusy = "true";
+			if (root$1) root$1.ariaBusy = "true";
 			let prevScrollPosition = 0;
 			if (reverse) prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth;
 			await onLoad(props);
@@ -113,11 +103,16 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 			});
 			indexRef.current += 1;
 			processingRef.current = false;
-			if (root) root.ariaBusy = "false";
-		}, options);
+			if (root$1) root$1.ariaBusy = "false";
+		}, {
+			root,
+			rootMargin,
+			threshold
+		});
 	}, [
-		options,
 		rootRef,
+		rootMargin,
+		threshold,
 		getDocument,
 		vertical,
 		onFinish,

package/dist/cjs/components/infinite-scroll-area/use-infinite-scroll.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-infinite-scroll.cjs","names":["useEnvironment","useCallbackRef","options: IntersectionObserverInit","root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n const style = getComputedStyle(el)\n\n if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n if (vertical) {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n } else {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n IntersectionObserverInit,\n \"root\"\n> {\n /*\n Determines whether scrolling is instant or animates smoothly.\n /\n behavior?: ScrollBehavior\n /\n If `true`, the infinite scroll is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n Ref to a reset index function.\n /\n indexRef?: RefObject<(index: number) => void>\n /\n If `true`, invoke `onLoad` function for the first time.\n \n @default false\n /\n initialLoad?: boolean\n /\n The orientation of the infinite scroll.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n Ref to a reset function.\n /\n resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n /\n If `true`, reverse direction.\n \n @default false\n /\n reverse?: boolean\n /\n Margin around the root. Can have values similar to the CSS margin property,\n * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n /\n rootMargin?: string\n /\n The element that is used as the viewport for checking visibility of the target.\n * Defaults to the browser viewport if not specified or if `null`.\n /\n rootRef?: RefObject<HTMLElement \| null>\n /\n If set the `onLoad` function will start from the given index.\n * If `initialLoad` is `true`, index starts from `0`.\n \n @default 1\n /\n startIndex?: number\n /\n Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n /\n threshold?: number \| number[]\n /\n The callback invoked when trigger is intersect.\n /\n onLoad?: ({\n entry,\n finish,\n index,\n }: {\n index: number\n finish: () => void\n entry?: IntersectionObserverEntry\n }) => Promise<void> \| void\n}\n\n/\n `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n \n @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n behavior,\n disabled = false,\n indexRef: indexRefProp,\n initialLoad = false,\n orientation = \"vertical\",\n resetRef,\n reverse = false,\n rootMargin,\n rootRef,\n startIndex = initialLoad ? 0 : 1,\n threshold,\n onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n const ref = useRef<Y>(null)\n const { getDocument, getWindow } = useEnvironment()\n const indexRef = useRef<number>(startIndex)\n const processingRef = useRef<boolean>(false)\n const observerRef = useRef<IntersectionObserver \| undefined>(undefined)\n const [finish, setFinish] = useState<boolean>(false)\n const onLoad = useCallbackRef(onLoadProp)\n const vertical = orientation === \"vertical\"\n const direction = vertical ? \"top\" : \"left\"\n const options: IntersectionObserverInit = useMemo(() => {\n const root = rootRef?.current\n\n return { root, rootMargin, threshold }\n }, [rootMargin, rootRef, threshold])\n\n const onReset = useCallback(\n (index = 1, runScroll = true) => {\n indexRef.current = index\n\n setFinish(false)\n\n if (runScroll) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = reverse\n ? vertical\n ? el.scrollHeight\n : el.scrollWidth\n : 0\n\n target?.scrollTo({ behavior, [direction]: position })\n }\n }\n\n if (disabled) return\n\n setTimeout(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.observe(el)\n })\n },\n [\n disabled,\n rootRef,\n getDocument,\n vertical,\n getWindow,\n reverse,\n behavior,\n direction,\n ],\n )\n\n const onFinish = useCallback(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.unobserve(el)\n\n setFinish(true)\n }, [])\n\n const createObserver = useCallback(() => {\n const observer = new IntersectionObserver(async ([entry]) => {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (!entry?.isIntersecting \|\| processingRef.current \|\| !el) return\n\n const props = { entry, finish: onFinish, index: indexRef.current }\n\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n let prevScrollPosition = 0\n\n if (reverse)\n prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n await onLoad(props)\n\n if (reverse)\n setTimeout(() => {\n const target = el === body ? getWindow() : el\n const position =\n (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n target?.scrollTo({ [direction]: position })\n })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n }, options)\n\n return observer\n }, [\n options,\n rootRef,\n getDocument,\n vertical,\n onFinish,\n reverse,\n onLoad,\n getWindow,\n direction,\n ])\n\n useEffect(() => {\n const setTabIndexAttribute = () => {\n const root = rootRef?.current\n if (\n root &&\n isScrollable(root, vertical) &&\n !root.hasAttribute(\"tabindex\")\n ) {\n root.setAttribute(\"tabindex\", \"0\")\n }\n }\n\n const setupObserver = async () => {\n const el = ref.current\n const index = indexRef.current\n const root = rootRef?.current\n\n if (initialLoad) {\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n await onLoad({ finish: onFinish, index })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n }\n\n if (disabled) return\n\n observerRef.current = createObserver()\n\n const observer = observerRef.current\n\n if (reverse) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = vertical ? el.scrollHeight : el.scrollWidth\n\n target?.scrollTo({ [direction]: position })\n }\n }\n\n setTimeout(() => {\n if (el) observer.observe(el)\n })\n\n return () => {\n if (el) observer.unobserve(el)\n }\n }\n\n setTabIndexAttribute()\n setupObserver()\n }, [\n createObserver,\n initialLoad,\n disabled,\n reverse,\n vertical,\n onFinish,\n onLoad,\n rootRef,\n getDocument,\n getWindow,\n direction,\n ])\n\n assignRef(resetRef, onReset)\n assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n return { ref, finish }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-infinite-scroll.cjs","names":["useEnvironment","useCallbackRef","root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n const style = getComputedStyle(el)\n\n if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n if (vertical) {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n } else {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n IntersectionObserverInit,\n \"root\"\n> {\n /*\n Determines whether scrolling is instant or animates smoothly.\n /\n behavior?: ScrollBehavior\n /\n If `true`, the infinite scroll is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n Ref to a reset index function.\n /\n indexRef?: RefObject<(index: number) => void>\n /\n If `true`, invoke `onLoad` function for the first time.\n \n @default false\n /\n initialLoad?: boolean\n /\n The orientation of the infinite scroll.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n Ref to a reset function.\n /\n resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n /\n If `true`, reverse direction.\n \n @default false\n /\n reverse?: boolean\n /\n Margin around the root. Can have values similar to the CSS margin property,\n * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n /\n rootMargin?: string\n /\n The element that is used as the viewport for checking visibility of the target.\n * Defaults to the browser viewport if not specified or if `null`.\n /\n rootRef?: null \| RefObject<HTMLElement \| null>\n /\n If set the `onLoad` function will start from the given index.\n * If `initialLoad` is `true`, index starts from `0`.\n \n @default 1\n /\n startIndex?: number\n /\n Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n /\n threshold?: number \| number[]\n /\n The callback invoked when trigger is intersect.\n /\n onLoad?: ({\n entry,\n finish,\n index,\n }: {\n index: number\n finish: () => void\n entry?: IntersectionObserverEntry\n }) => Promise<void> \| void\n}\n\n/\n `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n \n @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n behavior,\n disabled = false,\n indexRef: indexRefProp,\n initialLoad = false,\n orientation = \"vertical\",\n resetRef,\n reverse = false,\n rootMargin,\n rootRef,\n startIndex = initialLoad ? 0 : 1,\n threshold,\n onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n const ref = useRef<Y>(null)\n const { getDocument, getWindow } = useEnvironment()\n const indexRef = useRef<number>(startIndex)\n const processingRef = useRef<boolean>(false)\n const observerRef = useRef<IntersectionObserver \| undefined>(undefined)\n const [finish, setFinish] = useState<boolean>(false)\n const onLoad = useCallbackRef(onLoadProp)\n const vertical = orientation === \"vertical\"\n const direction = vertical ? \"top\" : \"left\"\n\n const onReset = useCallback(\n (index = 1, runScroll = true) => {\n indexRef.current = index\n\n setFinish(false)\n\n if (runScroll) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = reverse\n ? vertical\n ? el.scrollHeight\n : el.scrollWidth\n : 0\n\n target?.scrollTo({ behavior, [direction]: position })\n }\n }\n\n if (disabled) return\n\n setTimeout(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.observe(el)\n })\n },\n [\n disabled,\n rootRef,\n getDocument,\n vertical,\n getWindow,\n reverse,\n behavior,\n direction,\n ],\n )\n\n const onFinish = useCallback(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.unobserve(el)\n\n setFinish(true)\n }, [])\n\n const createObserver = useCallback(() => {\n const root = rootRef?.current ?? null\n\n const observer = new IntersectionObserver(\n async ([entry]) => {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (!entry?.isIntersecting \|\| processingRef.current \|\| !el) return\n\n const props = { entry, finish: onFinish, index: indexRef.current }\n\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n let prevScrollPosition = 0\n\n if (reverse)\n prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n await onLoad(props)\n\n if (reverse)\n setTimeout(() => {\n const target = el === body ? getWindow() : el\n const position =\n (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n target?.scrollTo({ [direction]: position })\n })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n },\n { root, rootMargin, threshold },\n )\n\n return observer\n }, [\n rootRef,\n rootMargin,\n threshold,\n getDocument,\n vertical,\n onFinish,\n reverse,\n onLoad,\n getWindow,\n direction,\n ])\n\n useEffect(() => {\n const setTabIndexAttribute = () => {\n const root = rootRef?.current\n if (\n root &&\n isScrollable(root, vertical) &&\n !root.hasAttribute(\"tabindex\")\n ) {\n root.setAttribute(\"tabindex\", \"0\")\n }\n }\n\n const setupObserver = async () => {\n const el = ref.current\n const index = indexRef.current\n const root = rootRef?.current\n\n if (initialLoad) {\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n await onLoad({ finish: onFinish, index })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n }\n\n if (disabled) return\n\n observerRef.current = createObserver()\n\n const observer = observerRef.current\n\n if (reverse) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = vertical ? el.scrollHeight : el.scrollWidth\n\n target?.scrollTo({ [direction]: position })\n }\n }\n\n setTimeout(() => {\n if (el) observer.observe(el)\n })\n\n return () => {\n if (el) observer.unobserve(el)\n }\n }\n\n setTabIndexAttribute()\n setupObserver()\n }, [\n createObserver,\n initialLoad,\n disabled,\n reverse,\n vertical,\n onFinish,\n onLoad,\n rootRef,\n getDocument,\n getWindow,\n direction,\n ])\n\n assignRef(resetRef, onReset)\n assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n return { ref, finish }\n}\n"],"mappings":"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"}

package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { mergeRefs } from "../../utils/ref.js";
-import "../../utils/index.js";
+import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
@@ -29,7 +29,7 @@ const InfiniteScrollArea = withProvider(({ ref, children, disabled, finish: fini
 		resetRef,
 		reverse,
 		rootMargin,
-		rootRef: rootRefProp ?? rootRef,
+		rootRef: (0, utils_exports.isNull)(rootRefProp) ? null : rootRefProp ?? rootRef,
 		startIndex,
 		threshold,
 		onLoad

package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"infinite-scroll-area.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n extends\n Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n Omit<UseInfiniteScrollProps, \"orientation\">,\n ThemeProps<InfiniteScrollAreaStyle> {\n /*\n The infinite scroll area finish to use.\n /\n finish?: ReactNode\n /\n The infinite scroll area loading to use.\n /\n loading?: ReactNode\n /\n Props for infinite scroll area trigger component.\n /\n triggerProps?: HTMLStyledProps\n}\n\nconst {\n PropsContext: InfiniteScrollAreaPropsContext,\n usePropsContext: useInfiniteScrollAreaPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n \"infinite-scroll-area\",\n infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/\n `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n \n @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n \"div\",\n InfiniteScrollAreaProps,\n \"orientation\"\n>(\n ({\n ref,\n children,\n disabled,\n finish: finishProp,\n indexRef,\n initialLoad,\n loading,\n orientation: orientationProp,\n resetRef,\n reverse,\n rootMargin,\n rootRef: rootRefProp,\n startIndex,\n threshold,\n triggerProps,\n onLoad,\n ...rest\n }) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const orientation = useValue(orientationProp)\n const { ref: triggerRef, finish } = useInfiniteScroll({\n disabled,\n indexRef,\n initialLoad,\n orientation,\n resetRef,\n reverse,\n rootMargin,\n rootRef: rootRefProp ?? rootRef,\n startIndex,\n threshold,\n onLoad,\n })\n const hasFinish = !!finishProp\n const showTrigger = !disabled && (hasFinish \|\| !finish)\n\n return (\n <styled.div\n ref={mergeRefs(rootRef, ref)}\n aria-busy=\"false\"\n role=\"feed\"\n {...rest}\n >\n {reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n\n {children}\n\n {!reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n </styled.div>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n \"div\",\n \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACE,oBACF,wBACA,wBACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAW,kBAAkB;EACpD;EACA;EACA;EACA,aALkB,SAAS,gBAAgB;EAM3C;EACA;EACA;EACA,~~SAAS~~,eAAe;~~EACxB~~;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,qBAAC,OAAO;EACN,KAAK,UAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}
1	+ {"version":3,"file":"infinite-scroll-area.js","names":[],"sources":["../../../../src/components/infinite-scroll-area/infinite-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { InfiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport type { UseInfiniteScrollProps } from \"./use-infinite-scroll\"\nimport { useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, mergeRefs } from \"../../utils\"\nimport { infiniteScrollAreaStyle } from \"./infinite-scroll-area.style\"\nimport { useInfiniteScroll } from \"./use-infinite-scroll\"\n\nexport interface InfiniteScrollAreaProps\n extends\n Omit<HTMLStyledProps, keyof UseInfiniteScrollProps>,\n Omit<UseInfiniteScrollProps, \"orientation\">,\n ThemeProps<InfiniteScrollAreaStyle> {\n /*\n The infinite scroll area finish to use.\n /\n finish?: ReactNode\n /\n The infinite scroll area loading to use.\n /\n loading?: ReactNode\n /\n Props for infinite scroll area trigger component.\n /\n triggerProps?: HTMLStyledProps\n}\n\nconst {\n PropsContext: InfiniteScrollAreaPropsContext,\n usePropsContext: useInfiniteScrollAreaPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<InfiniteScrollAreaProps, InfiniteScrollAreaStyle>(\n \"infinite-scroll-area\",\n infiniteScrollAreaStyle,\n)\n\nexport { InfiniteScrollAreaPropsContext, useInfiniteScrollAreaPropsContext }\n\n/\n `InfiniteScrollArea` is for providing infinite scroll functionality.\n * This feature provides a smooth scrolling experience by automatically loading and displaying the next dataset when the user reaches the end of the page.\n \n @see https://yamada-ui.com/docs/components/infinite-scroll-area\n */\nexport const InfiniteScrollArea = withProvider<\n \"div\",\n InfiniteScrollAreaProps,\n \"orientation\"\n>(\n ({\n ref,\n children,\n disabled,\n finish: finishProp,\n indexRef,\n initialLoad,\n loading,\n orientation: orientationProp,\n resetRef,\n reverse,\n rootMargin,\n rootRef: rootRefProp,\n startIndex,\n threshold,\n triggerProps,\n onLoad,\n ...rest\n }) => {\n const rootRef = useRef<HTMLDivElement>(null)\n const orientation = useValue(orientationProp)\n const { ref: triggerRef, finish } = useInfiniteScroll({\n disabled,\n indexRef,\n initialLoad,\n orientation,\n resetRef,\n reverse,\n rootMargin,\n rootRef: isNull(rootRefProp) ? null : (rootRefProp ?? rootRef),\n startIndex,\n threshold,\n onLoad,\n })\n const hasFinish = !!finishProp\n const showTrigger = !disabled && (hasFinish \|\| !finish)\n\n return (\n <styled.div\n ref={mergeRefs(rootRef, ref)}\n aria-busy=\"false\"\n role=\"feed\"\n {...rest}\n >\n {reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n\n {children}\n\n {!reverse && showTrigger ? (\n <InfiniteScrollTrigger ref={triggerRef} {...triggerProps}>\n {finish ? finishProp : loading}\n </InfiniteScrollTrigger>\n ) : null}\n </styled.div>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\ninterface InfiniteScrollTriggerProps extends HTMLStyledProps {}\n\nconst InfiniteScrollTrigger = withContext<\"div\", InfiniteScrollTriggerProps>(\n \"div\",\n \"trigger\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,EACJ,cAAc,gCACd,iBAAiB,mCACjB,aACA,iBACE,oBACF,wBACA,wBACD;;;;;;;AAUD,MAAa,qBAAqB,cAK/B,EACC,KACA,UACA,UACA,QAAQ,YACR,UACA,aACA,SACA,aAAa,iBACb,UACA,SACA,YACA,SAAS,aACT,YACA,WACA,cACA,QACA,GAAG,WACC;CACJ,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,EAAE,KAAK,YAAY,WAAW,kBAAkB;EACpD;EACA;EACA;EACA,aALkB,SAAS,gBAAgB;EAM3C;EACA;EACA;EACA,mCAAgB,YAAY,GAAG,OAAQ,eAAe;EACtD;EACA;EACA;EACD,CAAC;CAEF,MAAM,cAAc,CAAC,aADH,CAAC,CAAC,cAC2B,CAAC;AAEhD,QACE,qBAAC,OAAO;EACN,KAAK,UAAU,SAAS,IAAI;EAC5B,aAAU;EACV,MAAK;EACL,GAAI;;GAEH,WAAW,cACV,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;GAEH;GAEA,CAAC,WAAW,cACX,oBAAC;IAAsB,KAAK;IAAY,GAAI;cACzC,SAAS,aAAa;KACD,GACtB;;GACO;GAGjB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAIH,MAAM,wBAAwB,YAC5B,OACA,UACD,EAAE"}

package/dist/esm/components/infinite-scroll-area/use-infinite-scroll.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { assignRef, useCallbackRef } from "../../utils/ref.js";
 import "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
 import "../../core/index.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/components/infinite-scroll-area/use-infinite-scroll.ts
 const isScrollable = (el, vertical) => {
@@ -40,17 +40,6 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 	const onLoad = useCallbackRef(onLoadProp);
 	const vertical = orientation === "vertical";
 	const direction = vertical ? "top" : "left";
-	const options = useMemo(() => {
-		return {
-			root: rootRef?.current,
-			rootMargin,
-			threshold
-		};
-	}, [
-		rootMargin,
-		rootRef,
-		threshold
-	]);
 	const onReset = useCallback((index = 1, runScroll = true) => {
 		indexRef.current = index;
 		setFinish(false);
@@ -90,10 +79,11 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 		setFinish(true);
 	}, []);
 	const createObserver = useCallback(() => {
+		const root = rootRef?.current ?? null;
 		return new IntersectionObserver(async ([entry]) => {
-			const root = rootRef?.current;
+			const root$1 = rootRef?.current;
 			const body = getDocument()?.body;
-			const el = root && isScrollable(root, vertical) ? root : body;
+			const el = root$1 && isScrollable(root$1, vertical) ? root$1 : body;
 			if (!entry?.isIntersecting || processingRef.current || !el) return;
 			const props = {
 				entry,
@@ -101,7 +91,7 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 				index: indexRef.current
 			};
 			processingRef.current = true;
-			if (root) root.ariaBusy = "true";
+			if (root$1) root$1.ariaBusy = "true";
 			let prevScrollPosition = 0;
 			if (reverse) prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth;
 			await onLoad(props);
@@ -112,11 +102,16 @@ const useInfiniteScroll = ({ behavior, disabled = false, indexRef: indexRefProp,
 			});
 			indexRef.current += 1;
 			processingRef.current = false;
-			if (root) root.ariaBusy = "false";
-		}, options);
+			if (root$1) root$1.ariaBusy = "false";
+		}, {
+			root,
+			rootMargin,
+			threshold
+		});
 	}, [
-		options,
 		rootRef,
+		rootMargin,
+		threshold,
 		getDocument,
 		vertical,
 		onFinish,

package/dist/esm/components/infinite-scroll-area/use-infinite-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-infinite-scroll.js","names":["options: IntersectionObserverInit","root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n const style = getComputedStyle(el)\n\n if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n if (vertical) {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n } else {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n IntersectionObserverInit,\n \"root\"\n> {\n /*\n Determines whether scrolling is instant or animates smoothly.\n /\n behavior?: ScrollBehavior\n /\n If `true`, the infinite scroll is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n Ref to a reset index function.\n /\n indexRef?: RefObject<(index: number) => void>\n /\n If `true`, invoke `onLoad` function for the first time.\n \n @default false\n /\n initialLoad?: boolean\n /\n The orientation of the infinite scroll.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n Ref to a reset function.\n /\n resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n /\n If `true`, reverse direction.\n \n @default false\n /\n reverse?: boolean\n /\n Margin around the root. Can have values similar to the CSS margin property,\n * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n /\n rootMargin?: string\n /\n The element that is used as the viewport for checking visibility of the target.\n * Defaults to the browser viewport if not specified or if `null`.\n /\n rootRef?: RefObject<HTMLElement \| null>\n /\n If set the `onLoad` function will start from the given index.\n * If `initialLoad` is `true`, index starts from `0`.\n \n @default 1\n /\n startIndex?: number\n /\n Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n /\n threshold?: number \| number[]\n /\n The callback invoked when trigger is intersect.\n /\n onLoad?: ({\n entry,\n finish,\n index,\n }: {\n index: number\n finish: () => void\n entry?: IntersectionObserverEntry\n }) => Promise<void> \| void\n}\n\n/\n `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n \n @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n behavior,\n disabled = false,\n indexRef: indexRefProp,\n initialLoad = false,\n orientation = \"vertical\",\n resetRef,\n reverse = false,\n rootMargin,\n rootRef,\n startIndex = initialLoad ? 0 : 1,\n threshold,\n onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n const ref = useRef<Y>(null)\n const { getDocument, getWindow } = useEnvironment()\n const indexRef = useRef<number>(startIndex)\n const processingRef = useRef<boolean>(false)\n const observerRef = useRef<IntersectionObserver \| undefined>(undefined)\n const [finish, setFinish] = useState<boolean>(false)\n const onLoad = useCallbackRef(onLoadProp)\n const vertical = orientation === \"vertical\"\n const direction = vertical ? \"top\" : \"left\"\n const options: IntersectionObserverInit = useMemo(() => {\n const root = rootRef?.current\n\n return { root, rootMargin, threshold }\n }, [rootMargin, rootRef, threshold])\n\n const onReset = useCallback(\n (index = 1, runScroll = true) => {\n indexRef.current = index\n\n setFinish(false)\n\n if (runScroll) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = reverse\n ? vertical\n ? el.scrollHeight\n : el.scrollWidth\n : 0\n\n target?.scrollTo({ behavior, [direction]: position })\n }\n }\n\n if (disabled) return\n\n setTimeout(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.observe(el)\n })\n },\n [\n disabled,\n rootRef,\n getDocument,\n vertical,\n getWindow,\n reverse,\n behavior,\n direction,\n ],\n )\n\n const onFinish = useCallback(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.unobserve(el)\n\n setFinish(true)\n }, [])\n\n const createObserver = useCallback(() => {\n const observer = new IntersectionObserver(async ([entry]) => {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (!entry?.isIntersecting \|\| processingRef.current \|\| !el) return\n\n const props = { entry, finish: onFinish, index: indexRef.current }\n\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n let prevScrollPosition = 0\n\n if (reverse)\n prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n await onLoad(props)\n\n if (reverse)\n setTimeout(() => {\n const target = el === body ? getWindow() : el\n const position =\n (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n target?.scrollTo({ [direction]: position })\n })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n }, options)\n\n return observer\n }, [\n options,\n rootRef,\n getDocument,\n vertical,\n onFinish,\n reverse,\n onLoad,\n getWindow,\n direction,\n ])\n\n useEffect(() => {\n const setTabIndexAttribute = () => {\n const root = rootRef?.current\n if (\n root &&\n isScrollable(root, vertical) &&\n !root.hasAttribute(\"tabindex\")\n ) {\n root.setAttribute(\"tabindex\", \"0\")\n }\n }\n\n const setupObserver = async () => {\n const el = ref.current\n const index = indexRef.current\n const root = rootRef?.current\n\n if (initialLoad) {\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n await onLoad({ finish: onFinish, index })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n }\n\n if (disabled) return\n\n observerRef.current = createObserver()\n\n const observer = observerRef.current\n\n if (reverse) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = vertical ? el.scrollHeight : el.scrollWidth\n\n target?.scrollTo({ [direction]: position })\n }\n }\n\n setTimeout(() => {\n if (el) observer.observe(el)\n })\n\n return () => {\n if (el) observer.unobserve(el)\n }\n }\n\n setTabIndexAttribute()\n setupObserver()\n }, [\n createObserver,\n initialLoad,\n disabled,\n reverse,\n vertical,\n onFinish,\n onLoad,\n rootRef,\n getDocument,\n getWindow,\n direction,\n ])\n\n assignRef(resetRef, onReset)\n assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n return { ref, finish }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-infinite-scroll.js","names":["root","el"],"sources":["../../../../src/components/infinite-scroll-area/use-infinite-scroll.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { Orientation } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { assignRef, useCallbackRef } from \"../../utils\"\n\nconst isScrollable = (el: HTMLElement, vertical: boolean) => {\n const style = getComputedStyle(el)\n\n if ([\"auto\", \"overlay\", \"scroll\"].includes(style.overflow)) return true\n\n if (vertical) {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowY)\n } else {\n return [\"auto\", \"overlay\", \"scroll\"].includes(style.overflowX)\n }\n}\n\nexport interface UseInfiniteScrollProps extends Omit<\n IntersectionObserverInit,\n \"root\"\n> {\n /*\n Determines whether scrolling is instant or animates smoothly.\n /\n behavior?: ScrollBehavior\n /\n If `true`, the infinite scroll is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n Ref to a reset index function.\n /\n indexRef?: RefObject<(index: number) => void>\n /\n If `true`, invoke `onLoad` function for the first time.\n \n @default false\n /\n initialLoad?: boolean\n /\n The orientation of the infinite scroll.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n Ref to a reset function.\n /\n resetRef?: RefObject<(index?: number, runScroll?: boolean) => void>\n /\n If `true`, reverse direction.\n \n @default false\n /\n reverse?: boolean\n /\n Margin around the root. Can have values similar to the CSS margin property,\n * e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n /\n rootMargin?: string\n /\n The element that is used as the viewport for checking visibility of the target.\n * Defaults to the browser viewport if not specified or if `null`.\n /\n rootRef?: null \| RefObject<HTMLElement \| null>\n /\n If set the `onLoad` function will start from the given index.\n * If `initialLoad` is `true`, index starts from `0`.\n \n @default 1\n /\n startIndex?: number\n /\n Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.\n /\n threshold?: number \| number[]\n /\n The callback invoked when trigger is intersect.\n /\n onLoad?: ({\n entry,\n finish,\n index,\n }: {\n index: number\n finish: () => void\n entry?: IntersectionObserverEntry\n }) => Promise<void> \| void\n}\n\n/\n `useInfiniteScroll` is a custom hook for providing infinite scroll functionality.\n \n @see https://yamada-ui.com/docs/hooks/use-infinite-scroll\n */\nexport const useInfiniteScroll = <Y extends HTMLElement = HTMLDivElement>({\n behavior,\n disabled = false,\n indexRef: indexRefProp,\n initialLoad = false,\n orientation = \"vertical\",\n resetRef,\n reverse = false,\n rootMargin,\n rootRef,\n startIndex = initialLoad ? 0 : 1,\n threshold,\n onLoad: onLoadProp,\n}: UseInfiniteScrollProps = {}) => {\n const ref = useRef<Y>(null)\n const { getDocument, getWindow } = useEnvironment()\n const indexRef = useRef<number>(startIndex)\n const processingRef = useRef<boolean>(false)\n const observerRef = useRef<IntersectionObserver \| undefined>(undefined)\n const [finish, setFinish] = useState<boolean>(false)\n const onLoad = useCallbackRef(onLoadProp)\n const vertical = orientation === \"vertical\"\n const direction = vertical ? \"top\" : \"left\"\n\n const onReset = useCallback(\n (index = 1, runScroll = true) => {\n indexRef.current = index\n\n setFinish(false)\n\n if (runScroll) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = reverse\n ? vertical\n ? el.scrollHeight\n : el.scrollWidth\n : 0\n\n target?.scrollTo({ behavior, [direction]: position })\n }\n }\n\n if (disabled) return\n\n setTimeout(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.observe(el)\n })\n },\n [\n disabled,\n rootRef,\n getDocument,\n vertical,\n getWindow,\n reverse,\n behavior,\n direction,\n ],\n )\n\n const onFinish = useCallback(() => {\n const observer = observerRef.current\n const el = ref.current\n\n if (el) observer?.unobserve(el)\n\n setFinish(true)\n }, [])\n\n const createObserver = useCallback(() => {\n const root = rootRef?.current ?? null\n\n const observer = new IntersectionObserver(\n async ([entry]) => {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (!entry?.isIntersecting \|\| processingRef.current \|\| !el) return\n\n const props = { entry, finish: onFinish, index: indexRef.current }\n\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n let prevScrollPosition = 0\n\n if (reverse)\n prevScrollPosition = vertical ? el.scrollHeight : el.scrollWidth\n\n await onLoad(props)\n\n if (reverse)\n setTimeout(() => {\n const target = el === body ? getWindow() : el\n const position =\n (vertical ? el.scrollHeight : el.scrollWidth) - prevScrollPosition\n\n target?.scrollTo({ [direction]: position })\n })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n },\n { root, rootMargin, threshold },\n )\n\n return observer\n }, [\n rootRef,\n rootMargin,\n threshold,\n getDocument,\n vertical,\n onFinish,\n reverse,\n onLoad,\n getWindow,\n direction,\n ])\n\n useEffect(() => {\n const setTabIndexAttribute = () => {\n const root = rootRef?.current\n if (\n root &&\n isScrollable(root, vertical) &&\n !root.hasAttribute(\"tabindex\")\n ) {\n root.setAttribute(\"tabindex\", \"0\")\n }\n }\n\n const setupObserver = async () => {\n const el = ref.current\n const index = indexRef.current\n const root = rootRef?.current\n\n if (initialLoad) {\n processingRef.current = true\n\n if (root) root.ariaBusy = \"true\"\n\n await onLoad({ finish: onFinish, index })\n\n indexRef.current += 1\n processingRef.current = false\n\n if (root) root.ariaBusy = \"false\"\n }\n\n if (disabled) return\n\n observerRef.current = createObserver()\n\n const observer = observerRef.current\n\n if (reverse) {\n const root = rootRef?.current\n const body = getDocument()?.body\n const el = root && isScrollable(root, vertical) ? root : body\n\n if (el) {\n const target = el === body ? getWindow() : el\n const position = vertical ? el.scrollHeight : el.scrollWidth\n\n target?.scrollTo({ [direction]: position })\n }\n }\n\n setTimeout(() => {\n if (el) observer.observe(el)\n })\n\n return () => {\n if (el) observer.unobserve(el)\n }\n }\n\n setTabIndexAttribute()\n setupObserver()\n }, [\n createObserver,\n initialLoad,\n disabled,\n reverse,\n vertical,\n onFinish,\n onLoad,\n rootRef,\n getDocument,\n getWindow,\n direction,\n ])\n\n assignRef(resetRef, onReset)\n assignRef(indexRefProp, (index) => (indexRef.current = index))\n\n return { ref, finish }\n}\n"],"mappings":"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"}

package/dist/types/components/accordion/accordion.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react885 from "react";
+import * as react225 from "react";
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react885.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react225.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/accordion.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/accordion/use-accordion.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react886 from "react";
+import * as react213 from "react";
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react886.Context<{
+declare const AccordionDescendantsContext: react213.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react886.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react886.RefCallback<HTMLButtonElement>;
+    } | undefined) => react213.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react886.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react886.RefCallback<HTMLButtonElement>;
+      } | undefined) => react213.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: () => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react886.RefCallback<HTMLButtonElement>;
+    register: react213.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react886.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react886.RefCallback<HTMLButtonElement>;
+    } | undefined) => react213.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react886.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react213.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react886.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react213.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react886.RefCallback<HTMLButtonElement>;
+    } | undefined) => react213.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react886.Dispatch<react886.SetStateAction<number>>;
-  setIndex: react886.Dispatch<react886.SetStateAction<number | number[]>>;
+  setFocusedIndex: react213.Dispatch<react213.SetStateAction<number>>;
+  setIndex: react213.Dispatch<react213.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/airy/airy.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { AiryStyle } from "./airy.style.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import "../../index.js";
-import * as react884 from "react";
+import * as react212 from "react";
 import { ReactNode } from "react";
 //#region src/components/airy/airy.d.ts
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react884.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react212.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

package/dist/types/components/alert/alert.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
 import "../status/index.js";
 import "../../index.js";
-import * as react1043 from "react";
+import * as react194 from "react";
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1043.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react194.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alpha-slider/alpha-slider.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
 import "../hue-slider/index.js";
 import "../../index.js";
-import * as react883 from "react";
+import * as react193 from "react";
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react883.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react193.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react882 from "react";
+import * as react192 from "react";
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react882.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react192.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

package/dist/types/components/autocomplete/autocomplete.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
 import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react881 from "react";
+import * as react190 from "react";
 import { ReactElement, ReactNode } from "react";
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -67,7 +67,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react881.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react190.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

package/dist/types/components/autocomplete/autocomplete.style.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import { UsePopoverProps } from "../popover/use-popover.js";
 import "../popover/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react875 from "react";
+import * as react184 from "react";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -29,7 +29,7 @@ interface AutocompleteMatcher {
   (input: string, target?: string): boolean;
 }
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react875.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react184.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -157,7 +157,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: () => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react875.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react184.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: () => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -167,8 +167,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react875.Dispatch<react875.SetStateAction<string>>;
-  setValue: react875.Dispatch<react875.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react184.Dispatch<react184.SetStateAction<string>>;
+  setValue: react184.Dispatch<react184.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;