periplo-ui 4.2.1 → 4.3.1

package/dist/components/Combobox/hooks/useDisplayValue.d.ts

@@ -0,0 +1,11 @@
+import { ComboboxProps } from '../Combobox';
+type UseDisplayValueParams<T extends object> = {
+    props: ComboboxProps<T>;
+    localOptions: Array<T>;
+    isVirtualized: boolean;
+    resolve: (value: string) => T | undefined;
+    recordOptions: (items: Iterable<T>) => void;
+    handleRemove: (value: string) => void;
+};
+export declare function useDisplayValue<T extends object>({ props, localOptions, isVirtualized, resolve, recordOptions, handleRemove, }: UseDisplayValueParams<T>): import('react').ReactNode;
+export {};

package/dist/components/Combobox/hooks/useDisplayValue.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+
+function useDisplayValue({
+  props,
+  localOptions,
+  isVirtualized,
+  resolve,
+  recordOptions,
+  handleRemove
+}) {
+  const { options, getOptionValue, getOptionLabel, placeholder = "Select...", multiple, specialOptions } = props;
+  return useMemo(() => {
+    const available = isVirtualized ? localOptions : options;
+    const all = specialOptions ? [...specialOptions, ...available] : available;
+    recordOptions(all);
+    const lookup = (val) => all.find((option) => getOptionValue(option) === val) ?? resolve(val);
+    if (multiple) {
+      const { renderLabel: renderLabel2 } = props;
+      const value2 = Array.isArray(props.value) ? props.value : [];
+      if (value2.length === 0) return placeholder;
+      const selected2 = value2.map(lookup).filter((option) => option !== void 0);
+      return renderLabel2 ? renderLabel2(selected2, handleRemove) : selected2.map(getOptionLabel).join(", ");
+    }
+    const { value, renderLabel } = props;
+    const selected = value ? lookup(value) : void 0;
+    if (renderLabel && selected) return renderLabel(selected);
+    return selected ? getOptionLabel(selected) : placeholder;
+  }, [props, localOptions, isVirtualized, getOptionLabel, getOptionValue, placeholder, multiple, specialOptions]);
+}
+
+export { useDisplayValue };
+//# sourceMappingURL=useDisplayValue.js.map

package/dist/components/Combobox/hooks/useDisplayValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisplayValue.js","sources":["../../../../src/components/Combobox/hooks/useDisplayValue.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { ComboboxProps } from '../Combobox'\n\ntype UseDisplayValueParams<T extends object> = {\n  props: ComboboxProps<T>\n  localOptions: Array<T>\n  isVirtualized: boolean\n  resolve: (value: string) => T | undefined\n  recordOptions: (items: Iterable<T>) => void\n  handleRemove: (value: string) => void\n}\n\nexport function useDisplayValue<T extends object>({\n  props,\n  localOptions,\n  isVirtualized,\n  resolve,\n  recordOptions,\n  handleRemove,\n}: UseDisplayValueParams<T>) {\n  const { options, getOptionValue, getOptionLabel, placeholder = 'Select...', multiple, specialOptions } = props\n\n  return useMemo(() => {\n    const available = isVirtualized ? localOptions : options\n    const all = specialOptions ? [...specialOptions, ...available] : available\n    recordOptions(all)\n\n    const lookup = (val: string) => all.find((option) => getOptionValue(option) === val) ?? resolve(val)\n\n    if (multiple) {\n      const { renderLabel } = props\n      const value = Array.isArray(props.value) ? props.value : []\n      if (value.length === 0) return placeholder\n\n      const selected = value.map(lookup).filter((option): option is T => option !== undefined)\n\n      return renderLabel ? renderLabel(selected, handleRemove) : selected.map(getOptionLabel).join(', ')\n    }\n\n    const { value, renderLabel } = props\n    const selected = value ? lookup(value) : undefined\n    if (renderLabel && selected) return renderLabel(selected)\n    return selected ? getOptionLabel(selected) : placeholder\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props, localOptions, isVirtualized, getOptionLabel, getOptionValue, placeholder, multiple, specialOptions])\n}\n"],"names":["renderLabel","value","selected"],"mappings":";;AAaO,SAAS,eAAA,CAAkC;AAAA,EAChD,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAA,MAAM,EAAE,SAAS,cAAA,EAAgB,cAAA,EAAgB,cAAc,WAAA,EAAa,QAAA,EAAU,gBAAe,GAAI,KAAA;AAEzG,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,SAAA,GAAY,gBAAgB,YAAA,GAAe,OAAA;AACjD,IAAA,MAAM,MAAM,cAAA,GAAiB,CAAC,GAAG,cAAA,EAAgB,GAAG,SAAS,CAAA,GAAI,SAAA;AACjE,IAAA,aAAA,CAAc,GAAG,CAAA;AAEjB,IAAA,MAAM,MAAA,GAAS,CAAC,GAAA,KAAgB,GAAA,CAAI,IAAA,CAAK,CAAC,MAAA,KAAW,cAAA,CAAe,MAAM,CAAA,KAAM,GAAG,CAAA,IAAK,QAAQ,GAAG,CAAA;AAEnG,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,MAAM,EAAE,WAAA,EAAAA,YAAAA,EAAY,GAAI,KAAA;AACxB,MAAA,MAAMC,MAAAA,GAAQ,MAAM,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA,GAAI,KAAA,CAAM,QAAQ,EAAC;AAC1D,MAAA,IAAIA,MAAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,WAAA;AAE/B,MAAA,MAAMC,SAAAA,GAAWD,OAAM,GAAA,CAAI,MAAM,EAAE,MAAA,CAAO,CAAC,MAAA,KAAwB,MAAA,KAAW,MAAS,CAAA;AAEvF,MAAA,OAAOD,YAAAA,GAAcA,YAAAA,CAAYE,SAAAA,EAAU,YAAY,CAAA,GAAIA,UAAS,GAAA,CAAI,cAAc,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAAA,IACnG;AAEA,IAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAY,GAAI,KAAA;AAC/B,IAAA,MAAM,QAAA,GAAW,KAAA,GAAQ,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AACzC,IAAA,IAAI,WAAA,IAAe,QAAA,EAAU,OAAO,WAAA,CAAY,QAAQ,CAAA;AACxD,IAAA,OAAO,QAAA,GAAW,cAAA,CAAe,QAAQ,CAAA,GAAI,WAAA;AAAA,EAE/C,CAAA,EAAG,CAAC,KAAA,EAAO,YAAA,EAAc,aAAA,EAAe,gBAAgB,cAAA,EAAgB,WAAA,EAAa,QAAA,EAAU,cAAc,CAAC,CAAA;AAChH;;;;"}

package/dist/components/Combobox/hooks/usePaginatedOptions.d.ts

@@ -0,0 +1,24 @@
+type FetchPageResult<T> = {
+    items: Array<T>;
+    hasNextPage: boolean;
+    nextPage: number;
+};
+type FetchPage<T> = (params: {
+    page: number;
+    search?: string;
+}) => Promise<FetchPageResult<T>>;
+type UsePaginatedOptionsParams<T> = {
+    fetchPage?: FetchPage<T>;
+    debouncedSearchTerm: string;
+    open: boolean;
+    prefetch?: boolean;
+    loading: boolean;
+    onItemsLoaded: (items: Array<T>) => void;
+};
+export declare function usePaginatedOptions<T>({ fetchPage, debouncedSearchTerm, open, prefetch, loading, onItemsLoaded, }: UsePaginatedOptionsParams<T>): {
+    localOptions: T[];
+    hasNextPage: boolean;
+    loadingMore: boolean;
+    loadNextPage: () => Promise<void>;
+};
+export {};

package/dist/components/Combobox/hooks/usePaginatedOptions.js

@@ -0,0 +1,54 @@
+import { useState, useRef, useEffect } from 'react';
+
+function usePaginatedOptions({
+  fetchPage,
+  debouncedSearchTerm,
+  open,
+  prefetch,
+  loading,
+  onItemsLoaded
+}) {
+  const enabled = !!fetchPage;
+  const [page, setPage] = useState(1);
+  const [localOptions, setLocalOptions] = useState([]);
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const loadStateRef = useRef({ token: 0, inFlight: false });
+  useEffect(() => {
+    if (!enabled) return;
+    loadStateRef.current.token++;
+    loadStateRef.current.inFlight = false;
+    setPage(1);
+    setLocalOptions([]);
+    setHasNextPage(true);
+    setLoadingMore(false);
+  }, [debouncedSearchTerm, enabled]);
+  const loadNextPage = async () => {
+    if (!fetchPage || loadStateRef.current.inFlight || !hasNextPage || loading) return;
+    loadStateRef.current.inFlight = true;
+    const token = loadStateRef.current.token;
+    setLoadingMore(true);
+    try {
+      const result = await fetchPage({ page, search: debouncedSearchTerm || void 0 });
+      if (token !== loadStateRef.current.token) return;
+      onItemsLoaded(result.items);
+      setLocalOptions((prev) => [...prev, ...result.items]);
+      setPage(result.nextPage);
+      setHasNextPage(result.hasNextPage);
+    } finally {
+      if (token === loadStateRef.current.token) {
+        loadStateRef.current.inFlight = false;
+        setLoadingMore(false);
+      }
+    }
+  };
+  useEffect(() => {
+    if (enabled && (open || prefetch) && localOptions.length === 0 && !loading && !loadingMore) {
+      loadNextPage();
+    }
+  }, [enabled, open, prefetch, localOptions.length, loading, loadingMore, debouncedSearchTerm]);
+  return { localOptions, hasNextPage, loadingMore, loadNextPage };
+}
+
+export { usePaginatedOptions };
+//# sourceMappingURL=usePaginatedOptions.js.map

package/dist/components/Combobox/hooks/usePaginatedOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginatedOptions.js","sources":["../../../../src/components/Combobox/hooks/usePaginatedOptions.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\ntype FetchPageResult<T> = { items: Array<T>; hasNextPage: boolean; nextPage: number }\n\ntype FetchPage<T> = (params: { page: number; search?: string }) => Promise<FetchPageResult<T>>\n\ntype UsePaginatedOptionsParams<T> = {\n  fetchPage?: FetchPage<T>\n  debouncedSearchTerm: string\n  open: boolean\n  prefetch?: boolean\n  loading: boolean\n  onItemsLoaded: (items: Array<T>) => void\n}\n\nexport function usePaginatedOptions<T>({\n  fetchPage,\n  debouncedSearchTerm,\n  open,\n  prefetch,\n  loading,\n  onItemsLoaded,\n}: UsePaginatedOptionsParams<T>) {\n  const enabled = !!fetchPage\n  const [page, setPage] = useState(1)\n  const [localOptions, setLocalOptions] = useState<Array<T>>([])\n  const [hasNextPage, setHasNextPage] = useState(true)\n  const [loadingMore, setLoadingMore] = useState(false)\n  const loadStateRef = useRef({ token: 0, inFlight: false })\n\n  useEffect(() => {\n    if (!enabled) return\n    loadStateRef.current.token++\n    loadStateRef.current.inFlight = false\n    setPage(1)\n    setLocalOptions([])\n    setHasNextPage(true)\n    setLoadingMore(false)\n  }, [debouncedSearchTerm, enabled])\n\n  const loadNextPage = async () => {\n    if (!fetchPage || loadStateRef.current.inFlight || !hasNextPage || loading) return\n\n    loadStateRef.current.inFlight = true\n    const token = loadStateRef.current.token\n    setLoadingMore(true)\n    try {\n      const result = await fetchPage({ page, search: debouncedSearchTerm || undefined })\n      if (token !== loadStateRef.current.token) return\n      onItemsLoaded(result.items)\n      setLocalOptions((prev) => [...prev, ...result.items])\n      setPage(result.nextPage)\n      setHasNextPage(result.hasNextPage)\n    } finally {\n      if (token === loadStateRef.current.token) {\n        loadStateRef.current.inFlight = false\n        setLoadingMore(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (enabled && (open || prefetch) && localOptions.length === 0 && !loading && !loadingMore) {\n      loadNextPage()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [enabled, open, prefetch, localOptions.length, loading, loadingMore, debouncedSearchTerm])\n\n  return { localOptions, hasNextPage, loadingMore, loadNextPage }\n}\n"],"names":[],"mappings":";;AAeO,SAAS,mBAAA,CAAuB;AAAA,EACrC,SAAA;AAAA,EACA,mBAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAiC;AAC/B,EAAA,MAAM,OAAA,GAAU,CAAC,CAAC,SAAA;AAClB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAA,CAAmB,EAAE,CAAA;AAC7D,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,eAAe,MAAA,CAAO,EAAE,OAAO,CAAA,EAAG,QAAA,EAAU,OAAO,CAAA;AAEzD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AACd,IAAA,YAAA,CAAa,OAAA,CAAQ,KAAA,EAAA;AACrB,IAAA,YAAA,CAAa,QAAQ,QAAA,GAAW,KAAA;AAChC,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,eAAA,CAAgB,EAAE,CAAA;AAClB,IAAA,cAAA,CAAe,IAAI,CAAA;AACnB,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,mBAAA,EAAqB,OAAO,CAAC,CAAA;AAEjC,EAAA,MAAM,eAAe,YAAY;AAC/B,IAAA,IAAI,CAAC,SAAA,IAAa,YAAA,CAAa,QAAQ,QAAA,IAAY,CAAC,eAAe,OAAA,EAAS;AAE5E,IAAA,YAAA,CAAa,QAAQ,QAAA,GAAW,IAAA;AAChC,IAAA,MAAM,KAAA,GAAQ,aAAa,OAAA,CAAQ,KAAA;AACnC,IAAA,cAAA,CAAe,IAAI,CAAA;AACnB,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,MAAM,SAAA,CAAU,EAAE,MAAM,MAAA,EAAQ,mBAAA,IAAuB,QAAW,CAAA;AACjF,MAAA,IAAI,KAAA,KAAU,YAAA,CAAa,OAAA,CAAQ,KAAA,EAAO;AAC1C,MAAA,aAAA,CAAc,OAAO,KAAK,CAAA;AAC1B,MAAA,eAAA,CAAgB,CAAC,SAAS,CAAC,GAAG,MAAM,GAAG,MAAA,CAAO,KAAK,CAAC,CAAA;AACpD,MAAA,OAAA,CAAQ,OAAO,QAAQ,CAAA;AACvB,MAAA,cAAA,CAAe,OAAO,WAAW,CAAA;AAAA,IACnC,CAAA,SAAE;AACA,MAAA,IAAI,KAAA,KAAU,YAAA,CAAa,OAAA,CAAQ,KAAA,EAAO;AACxC,QAAA,YAAA,CAAa,QAAQ,QAAA,GAAW,KAAA;AAChC,QAAA,cAAA,CAAe,KAAK,CAAA;AAAA,MACtB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,OAAA,KAAY,QAAQ,QAAA,CAAA,IAAa,YAAA,CAAa,WAAW,CAAA,IAAK,CAAC,OAAA,IAAW,CAAC,WAAA,EAAa;AAC1F,MAAA,YAAA,EAAa;AAAA,IACf;AAAA,EAEF,CAAA,EAAG,CAAC,OAAA,EAAS,IAAA,EAAM,QAAA,EAAU,aAAa,MAAA,EAAQ,OAAA,EAAS,WAAA,EAAa,mBAAmB,CAAC,CAAA;AAE5F,EAAA,OAAO,EAAE,YAAA,EAAc,WAAA,EAAa,WAAA,EAAa,YAAA,EAAa;AAChE;;;;"}

package/dist/components/Combobox/hooks/useSelectedCache.d.ts

@@ -0,0 +1,4 @@
+export declare function useSelectedCache<T>(getOptionValue: (option: T) => string): {
+    record: (items: Iterable<T>) => void;
+    resolve: (value: string) => T | undefined;
+};

package/dist/components/Combobox/hooks/useSelectedCache.js

@@ -0,0 +1,17 @@
+import { useRef, useCallback } from 'react';
+
+function useSelectedCache(getOptionValue) {
+  const cacheRef = useRef(/* @__PURE__ */ new Map());
+  const getValueRef = useRef(getOptionValue);
+  getValueRef.current = getOptionValue;
+  const record = useCallback((items) => {
+    for (const item of items) {
+      cacheRef.current.set(getValueRef.current(item), item);
+    }
+  }, []);
+  const resolve = useCallback((value) => cacheRef.current.get(value), []);
+  return { record, resolve };
+}
+
+export { useSelectedCache };
+//# sourceMappingURL=useSelectedCache.js.map

package/dist/components/Combobox/hooks/useSelectedCache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedCache.js","sources":["../../../../src/components/Combobox/hooks/useSelectedCache.ts"],"sourcesContent":["import { useCallback, useRef } from 'react'\n\nexport function useSelectedCache<T>(getOptionValue: (option: T) => string) {\n  const cacheRef = useRef<Map<string, T>>(new Map())\n  const getValueRef = useRef(getOptionValue)\n  getValueRef.current = getOptionValue\n\n  const record = useCallback((items: Iterable<T>) => {\n    for (const item of items) {\n      cacheRef.current.set(getValueRef.current(item), item)\n    }\n  }, [])\n\n  const resolve = useCallback((value: string) => cacheRef.current.get(value), [])\n\n  return { record, resolve }\n}\n"],"names":[],"mappings":";;AAEO,SAAS,iBAAoB,cAAA,EAAuC;AACzE,EAAA,MAAM,QAAA,GAAW,MAAA,iBAAuB,IAAI,GAAA,EAAK,CAAA;AACjD,EAAA,MAAM,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,WAAA,CAAY,OAAA,GAAU,cAAA;AAEtB,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,CAAC,KAAA,KAAuB;AACjD,IAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,MAAA,QAAA,CAAS,QAAQ,GAAA,CAAI,WAAA,CAAY,OAAA,CAAQ,IAAI,GAAG,IAAI,CAAA;AAAA,IACtD;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,OAAA,GAAU,WAAA,CAAY,CAAC,KAAA,KAAkB,QAAA,CAAS,QAAQ,GAAA,CAAI,KAAK,CAAA,EAAG,EAAE,CAAA;AAE9E,EAAA,OAAO,EAAE,QAAQ,OAAA,EAAQ;AAC3B;;;;"}

package/dist/components/Combobox/useCombobox.d.ts

@@ -1,9 +1,9 @@
 import { ComboboxProps } from './Combobox';
 export declare const useCombobox: <T extends object>(props: ComboboxProps<T>) => {
     open: boolean;
-    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    setOpen: (next: boolean) => void;
     searchTerm: string;
-    setSearchTerm: import('react').Dispatch<import('react').SetStateAction<string>>;
+    setSearchTerm: (next: string) => void;
     isHovered: boolean;
     setIsHovered: import('react').Dispatch<import('react').SetStateAction<boolean>>;
     localOptions: T[];
@@ -12,7 +12,7 @@ export declare const useCombobox: <T extends object>(props: ComboboxProps<T>) =>
     isVirtualized: boolean;
     filteredOptions: T[];
     displayValue: import('react').ReactNode;
-    hasValue: boolean | undefined;
+    hasValue: boolean;
     showClearButton: boolean | undefined;
     handleSelect: (currentValue: string) => void;
     handleRemove: (valueToRemove: string) => void;

package/dist/components/Combobox/useCombobox.js

@@ -1,173 +1,42 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { useComboboxOpenState } from './hooks/useComboboxOpenState.js';
+import { useComboboxSelection } from './hooks/useComboboxSelection.js';
+import { useDisplayValue } from './hooks/useDisplayValue.js';
+import { usePaginatedOptions } from './hooks/usePaginatedOptions.js';
+import { useSelectedCache } from './hooks/useSelectedCache.js';
 
 const useCombobox = (props) => {
-  const {
-    options,
-    getOptionValue,
-    getOptionLabel,
-    placeholder = "Select...",
-    loading = false,
-    filterOptions,
-    multiple,
-    clearable = true,
-    onClear,
-    fetchPage,
-    specialOptions
-  } = props;
-  const [open, setOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
-  const [isHovered, setIsHovered] = useState(false);
-  const [page, setPage] = useState(1);
-  const [localOptions, setLocalOptions] = useState(options);
-  const [hasNextPage, setHasNextPage] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const debounceTimerRef = useRef(void 0);
-  const closeOnSelect = props.closeOnSelect ?? !props.multiple;
+  const { options, getOptionValue, getOptionLabel, loading = false, filterOptions, fetchPage, onClear, clearable = true } = props;
+  const { open, setOpen, searchTerm, debouncedSearchTerm, setSearchTerm } = useComboboxOpenState();
   const isVirtualized = !!fetchPage;
-  useEffect(() => {
-    if (!isVirtualized) return;
-    clearTimeout(debounceTimerRef.current);
-    debounceTimerRef.current = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm);
-    }, 300);
-    return () => {
-      clearTimeout(debounceTimerRef.current);
-    };
-  }, [searchTerm, isVirtualized]);
-  useEffect(() => {
-    if (isVirtualized) {
-      setPage(1);
-      setLocalOptions([]);
-      setHasNextPage(true);
-      setLoadingMore(false);
-    }
-  }, [debouncedSearchTerm, isVirtualized]);
-  const loadNextPage = useCallback(async () => {
-    if (!fetchPage || loadingMore || !hasNextPage || loading) return;
-    setLoadingMore(true);
-    try {
-      const result = await fetchPage({ page, search: debouncedSearchTerm || void 0 });
-      setLocalOptions((prev) => [...prev, ...result.items]);
-      setPage(result.nextPage);
-      setHasNextPage(result.hasNextPage);
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [fetchPage, loadingMore, hasNextPage, loading, page, debouncedSearchTerm]);
-  useEffect(() => {
-    if (isVirtualized && open && localOptions.length === 0 && !loading && !loadingMore) {
-      loadNextPage();
-    }
-  }, [isVirtualized, open, localOptions.length, loading, loadingMore, loadNextPage]);
+  const cache = useSelectedCache(getOptionValue);
+  const { localOptions, hasNextPage, loadingMore, loadNextPage } = usePaginatedOptions({
+    fetchPage,
+    debouncedSearchTerm,
+    open,
+    prefetch: props.prefetch,
+    loading,
+    onItemsLoaded: cache.record
+  });
   const filteredOptions = useMemo(() => {
-    if (isVirtualized) {
-      return localOptions;
-    }
+    if (isVirtualized) return localOptions;
     if (!filterOptions) {
       return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()));
     }
     return searchTerm ? filterOptions(options, searchTerm) : options;
   }, [isVirtualized, localOptions, filterOptions, options, searchTerm, getOptionLabel]);
-  const handleSelect = useCallback(
-    (currentValue) => {
-      if (multiple) {
-        const { value = [], onChange } = props;
-        const isRemoving = value.includes(currentValue);
-        if (specialOptions && specialOptions.length > 0) {
-          if (isRemoving) {
-            onChange([]);
-          } else {
-            onChange([currentValue]);
-          }
-        } else {
-          if (isRemoving && !clearable && value.length === 1) {
-            return;
-          }
-          const newValues = isRemoving ? value.filter((val) => val !== currentValue) : [...value, currentValue];
-          onChange(newValues);
-        }
-      } else {
-        const { value, onChange } = props;
-        const newValue = clearable && currentValue === value ? "" : currentValue;
-        onChange(newValue);
-      }
-      if (closeOnSelect) {
-        setOpen(false);
-      }
-    },
-    [multiple, clearable, closeOnSelect, props, specialOptions]
-  );
-  const handleRemove = useCallback(
-    (valueToRemove) => {
-      if (props.multiple) {
-        const { value = [], onChange } = props;
-        if (!clearable && value.length === 1) {
-          return;
-        }
-        const newValues = value.filter((val) => val !== valueToRemove);
-        onChange(newValues);
-      }
-    },
-    [props, clearable]
-  );
-  const handleClear = useCallback(
-    (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (multiple) {
-        const { onChange } = props;
-        if (clearable) {
-          onChange([]);
-        }
-      } else {
-        const { onChange } = props;
-        onChange("");
-      }
-      if (typeof onClear === "function") {
-        onClear();
-      }
-    },
-    [multiple, clearable, onClear, props]
-  );
-  const displayValue = useMemo(() => {
-    const availableOptions = isVirtualized ? localOptions : options;
-    const allAvailableOptions = specialOptions ? [...specialOptions, ...availableOptions] : availableOptions;
-    if (multiple) {
-      const { value: value2 = [], renderLabel: renderLabel2 } = props;
-      if (value2.length === 0) return placeholder;
-      const selectedOptions = allAvailableOptions.filter((option) => value2.includes(getOptionValue(option)));
-      if (renderLabel2) {
-        return renderLabel2(selectedOptions, handleRemove);
-      }
-      return selectedOptions.map(getOptionLabel).join(", ");
-    }
-    const { value, renderLabel } = props;
-    const selectedOption = allAvailableOptions.find((option) => getOptionValue(option) === value);
-    if (renderLabel && selectedOption) {
-      return renderLabel(selectedOption);
-    }
-    return selectedOption ? getOptionLabel(selectedOption) : placeholder;
-  }, [
+  const { handleSelect, handleRemove, handleClear, hasValue } = useComboboxSelection(props, setOpen);
+  const [isHovered, setIsHovered] = useState(false);
+  const displayValue = useDisplayValue({
     props,
-    getOptionLabel,
-    getOptionValue,
-    options,
     localOptions,
     isVirtualized,
-    placeholder,
-    multiple,
-    specialOptions
-  ]);
-  const hasValue = useMemo(() => {
-    if (multiple) {
-      return props.value && props.value.length > 0;
-    }
-    return !!props.value;
-  }, [props.value, multiple]);
+    resolve: cache.resolve,
+    recordOptions: cache.record,
+    handleRemove
+  });
   const showClearButton = onClear && hasValue && isHovered && clearable;
   return {
-    // State
     open,
     setOpen,
     searchTerm,
@@ -177,13 +46,11 @@ const useCombobox = (props) => {
     localOptions,
     hasNextPage,
     loadingMore,
-    // Computed values
     isVirtualized,
     filteredOptions,
     displayValue,
     hasValue,
     showClearButton,
-    // Handlers
     handleSelect,
     handleRemove,
     handleClear,

package/dist/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ComboboxProps } from './Combobox'\n\nexport const useCombobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    options,\n    getOptionValue,\n    getOptionLabel,\n    placeholder = 'Select...',\n    loading = false,\n    filterOptions,\n    multiple,\n    clearable = true,\n    onClear,\n    fetchPage,\n    specialOptions,\n  } = props\n\n  const [open, setOpen] = useState(false)\n  const [searchTerm, setSearchTerm] = useState('')\n  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')\n  const [isHovered, setIsHovered] = useState(false)\n\n  const [page, setPage] = useState(1)\n  const [localOptions, setLocalOptions] = useState<Array<T>>(options)\n  const [hasNextPage, setHasNextPage] = useState(true)\n  const [loadingMore, setLoadingMore] = useState(false)\n\n  const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined)\n\n  const closeOnSelect = props.closeOnSelect ?? !props.multiple\n  const isVirtualized = !!fetchPage\n\n  useEffect(() => {\n    if (!isVirtualized) return\n\n    clearTimeout(debounceTimerRef.current)\n\n    debounceTimerRef.current = setTimeout(() => {\n      setDebouncedSearchTerm(searchTerm)\n    }, 300)\n\n    return () => {\n      clearTimeout(debounceTimerRef.current)\n    }\n  }, [searchTerm, isVirtualized])\n\n  useEffect(() => {\n    if (isVirtualized) {\n      setPage(1)\n      setLocalOptions([])\n      setHasNextPage(true)\n      setLoadingMore(false)\n    }\n  }, [debouncedSearchTerm, isVirtualized])\n\n  const loadNextPage = useCallback(async () => {\n    if (!fetchPage || loadingMore || !hasNextPage || loading) return\n\n    setLoadingMore(true)\n    try {\n      const result = await fetchPage({ page, search: debouncedSearchTerm || undefined })\n      setLocalOptions((prev) => [...prev, ...result.items])\n      setPage(result.nextPage)\n      setHasNextPage(result.hasNextPage)\n    } finally {\n      setLoadingMore(false)\n    }\n  }, [fetchPage, loadingMore, hasNextPage, loading, page, debouncedSearchTerm])\n\n  // Load initial page when combobox opens\n  useEffect(() => {\n    if (isVirtualized && open && localOptions.length === 0 && !loading && !loadingMore) {\n      loadNextPage()\n    }\n  }, [isVirtualized, open, localOptions.length, loading, loadingMore, loadNextPage])\n\n  const filteredOptions = useMemo(() => {\n    if (isVirtualized) {\n      return localOptions\n    }\n\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [isVirtualized, localOptions, filterOptions, options, searchTerm, getOptionLabel])\n\n  const handleSelect = useCallback(\n    (currentValue: string) => {\n      if (multiple) {\n        const { value = [], onChange } = props\n        const isRemoving = value.includes(currentValue)\n\n        if (specialOptions && specialOptions.length > 0) {\n          if (isRemoving) {\n            onChange([])\n          } else {\n            onChange([currentValue])\n          }\n        } else {\n          if (isRemoving && !clearable && value.length === 1) {\n            return\n          }\n\n          const newValues = isRemoving ? value.filter((val) => val !== currentValue) : [...value, currentValue]\n          onChange(newValues)\n        }\n      } else {\n        const { value, onChange } = props\n        const newValue = clearable && currentValue === value ? '' : currentValue\n        onChange(newValue)\n      }\n\n      if (closeOnSelect) {\n        setOpen(false)\n      }\n    },\n    [multiple, clearable, closeOnSelect, props, specialOptions],\n  )\n\n  const handleRemove = useCallback(\n    (valueToRemove: string) => {\n      if (props.multiple) {\n        const { value = [], onChange } = props\n\n        if (!clearable && value.length === 1) {\n          return\n        }\n\n        const newValues = value.filter((val) => val !== valueToRemove)\n        onChange(newValues)\n      }\n    },\n    [props, clearable],\n  )\n\n  const handleClear = useCallback(\n    (event: React.MouseEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (multiple) {\n        const { onChange } = props\n\n        if (clearable) {\n          onChange([])\n        }\n      } else {\n        const { onChange } = props\n        onChange('')\n      }\n\n      if (typeof onClear === 'function') {\n        onClear()\n      }\n    },\n    [multiple, clearable, onClear, props],\n  )\n\n  const displayValue = useMemo(() => {\n    const availableOptions = isVirtualized ? localOptions : options\n    const allAvailableOptions = specialOptions ? [...specialOptions, ...availableOptions] : availableOptions\n\n    if (multiple) {\n      const { value = [], renderLabel } = props\n      if (value.length === 0) return placeholder\n\n      const selectedOptions = allAvailableOptions.filter((option) => value.includes(getOptionValue(option)))\n\n      if (renderLabel) {\n        return renderLabel(selectedOptions, handleRemove)\n      }\n\n      return selectedOptions.map(getOptionLabel).join(', ')\n    }\n\n    const { value, renderLabel } = props\n    const selectedOption = allAvailableOptions.find((option) => getOptionValue(option) === value)\n    if (renderLabel && selectedOption) {\n      return renderLabel(selectedOption)\n    }\n    return selectedOption ? getOptionLabel(selectedOption) : placeholder\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    props,\n    getOptionLabel,\n    getOptionValue,\n    options,\n    localOptions,\n    isVirtualized,\n    placeholder,\n    multiple,\n    specialOptions,\n  ])\n\n  const hasValue = useMemo(() => {\n    if (multiple) {\n      return props.value && props.value.length > 0\n    }\n    return !!props.value\n  }, [props.value, multiple])\n\n  const showClearButton = onClear && hasValue && isHovered && clearable\n\n  return {\n    // State\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    isHovered,\n    setIsHovered,\n    localOptions,\n    hasNextPage,\n    loadingMore,\n\n    // Computed values\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n\n    // Handlers\n    handleSelect,\n    handleRemove,\n    handleClear,\n    loadNextPage,\n  }\n}\n"],"names":["value","renderLabel"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../../src/components/Combobox/useCombobox.ts"],"sourcesContent":["import { useMemo, useState } from 'react'\n\nimport type { ComboboxProps } from './Combobox'\nimport {\n  useComboboxOpenState,\n  useComboboxSelection,\n  useDisplayValue,\n  usePaginatedOptions,\n  useSelectedCache,\n} from './hooks'\n\nexport const useCombobox = <T extends object>(props: ComboboxProps<T>) => {\n  const { options, getOptionValue, getOptionLabel, loading = false, filterOptions, fetchPage, onClear, clearable = true } = props\n\n  const { open, setOpen, searchTerm, debouncedSearchTerm, setSearchTerm } = useComboboxOpenState()\n  const isVirtualized = !!fetchPage\n\n  const cache = useSelectedCache<T>(getOptionValue)\n\n  const { localOptions, hasNextPage, loadingMore, loadNextPage } = usePaginatedOptions<T>({\n    fetchPage,\n    debouncedSearchTerm,\n    open,\n    prefetch: props.prefetch,\n    loading,\n    onItemsLoaded: cache.record,\n  })\n\n  const filteredOptions = useMemo(() => {\n    if (isVirtualized) return localOptions\n\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [isVirtualized, localOptions, filterOptions, options, searchTerm, getOptionLabel])\n\n  const { handleSelect, handleRemove, handleClear, hasValue } = useComboboxSelection(props, setOpen)\n\n  const [isHovered, setIsHovered] = useState(false)\n\n  const displayValue = useDisplayValue<T>({\n    props,\n    localOptions,\n    isVirtualized,\n    resolve: cache.resolve,\n    recordOptions: cache.record,\n    handleRemove,\n  })\n\n  const showClearButton = onClear && hasValue && isHovered && clearable\n\n  return {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    isHovered,\n    setIsHovered,\n    localOptions,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleRemove,\n    handleClear,\n    loadNextPage,\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA4B;AACxE,EAAA,MAAM,EAAE,OAAA,EAAS,cAAA,EAAgB,cAAA,EAAgB,OAAA,GAAU,KAAA,EAAO,aAAA,EAAe,SAAA,EAAW,OAAA,EAAS,SAAA,GAAY,IAAA,EAAK,GAAI,KAAA;AAE1H,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,YAAY,mBAAA,EAAqB,aAAA,KAAkB,oBAAA,EAAqB;AAC/F,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAC,SAAA;AAExB,EAAA,MAAM,KAAA,GAAQ,iBAAoB,cAAc,CAAA;AAEhD,EAAA,MAAM,EAAE,YAAA,EAAc,WAAA,EAAa,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAuB;AAAA,IACtF,SAAA;AAAA,IACA,mBAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,OAAA;AAAA,IACA,eAAe,KAAA,CAAM;AAAA,GACtB,CAAA;AAED,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,IAAA,IAAI,eAAe,OAAO,YAAA;AAE1B,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,CAAC,MAAA,KAAW,cAAA,CAAe,MAAM,CAAA,CAAE,WAAA,EAAY,CAAE,QAAA,CAAS,UAAA,CAAW,WAAA,EAAa,CAAC,CAAA;AAAA,IAC3G;AAEA,IAAA,OAAO,UAAA,GAAa,aAAA,CAAc,OAAA,EAAS,UAAU,CAAA,GAAI,OAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,aAAA,EAAe,YAAA,EAAc,eAAe,OAAA,EAAS,UAAA,EAAY,cAAc,CAAC,CAAA;AAEpF,EAAA,MAAM,EAAE,cAAc,YAAA,EAAc,WAAA,EAAa,UAAS,GAAI,oBAAA,CAAqB,OAAO,OAAO,CAAA;AAEjG,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,eAAe,eAAA,CAAmB;AAAA,IACtC,KAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAS,KAAA,CAAM,OAAA;AAAA,IACf,eAAe,KAAA,CAAM,MAAA;AAAA,IACrB;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAA,GAAkB,OAAA,IAAW,QAAA,IAAY,SAAA,IAAa,SAAA;AAE5D,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -15,8 +15,14 @@ declare const TooltipRoot: React.FC<TooltipPrimitive.TooltipProps>;
  * Wrap with asChild to use custom components as triggers.
  */
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     arrow?: boolean;
+    /**
+     * Container for the portal. When provided, the tooltip is portaled into this element instead of `document.body`.
+     * Pass `null` to disable portaling and render inline (legacy behavior).
+     */
+    container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>["container"] | null;
 } & React.RefAttributes<HTMLDivElement>>;
 export type TooltipProps = {
     /**
@@ -99,4 +105,4 @@ export declare function Tooltip({ triggerElement, children, side, className, del
  *   </TooltipRoot>
  * </TooltipProvider>
  */
-export { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger };
+export { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger };

package/dist/components/Tooltip/Tooltip.js

@@ -8,29 +8,36 @@ import { cn } from '../../lib/utils.js';
 const TooltipProvider = TooltipPrimitive.Provider;
 const TooltipRoot = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, arrow, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 rounded-lg bg-white px-3 py-1.5 text-sm",
-      "shadow-tooltip",
-      "animate-in fade-in-0 zoom-in-95",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "data-[side=bottom]:slide-in-from-top-2",
-      "data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2",
-      "data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      arrow && /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { fill: "white" })
-    ]
+const TooltipPortal = TooltipPrimitive.Portal;
+const TooltipContent = React.forwardRef(
+  ({ className, sideOffset = 4, arrow, container, children, ...props }, ref) => {
+    const content = /* @__PURE__ */ jsxs(
+      TooltipPrimitive.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "z-50 rounded-lg bg-white px-3 py-1.5 text-sm",
+          "shadow-tooltip",
+          "animate-in fade-in-0 zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          arrow && /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { fill: "white" })
+        ]
+      }
+    );
+    if (container === null) return content;
+    return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: content });
   }
-));
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 function Tooltip({
   triggerElement,
@@ -60,9 +67,9 @@ function Tooltip({
     }
   ) : /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: triggerElement }),
-    /* @__PURE__ */ jsx(TooltipContent, { side, className, arrow, children })
+    /* @__PURE__ */ jsx(TooltipContent, { side, className, arrow, container, children })
   ] }) });
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger };
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { Popover } from '../Popover/Popover'\n\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\n/**\n * Provider component that wraps all tooltip instances.\n * Controls the delay duration and positioning of tooltips app-wide.\n */\nconst TooltipProvider = TooltipPrimitive.Provider\n\n/**\n * The root component that wraps the trigger and content.\n * Manages the open state and hover interactions.\n */\nconst TooltipRoot = TooltipPrimitive.Root\n\n/**\n * The element that triggers the tooltip when hovered or focused.\n * Wrap with asChild to use custom components as triggers.\n */\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { arrow?: boolean }\n>(({ className, sideOffset = 4, arrow, children, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      'z-50 rounded-lg bg-white px-3 py-1.5 text-sm',\n      'shadow-tooltip',\n      'animate-in fade-in-0 zoom-in-95',\n      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n      'data-[side=bottom]:slide-in-from-top-2',\n      'data-[side=left]:slide-in-from-right-2',\n      'data-[side=right]:slide-in-from-left-2',\n      'data-[side=top]:slide-in-from-bottom-2',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    {arrow && <TooltipPrimitive.Arrow fill=\"white\" />}\n  </TooltipPrimitive.Content>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport type TooltipProps = {\n  /**\n   * The content to be displayed inside the tooltip\n   */\n  children: React.ReactElement | string\n\n  /**\n   * The element that triggers the tooltip on hover\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * The preferred side of the trigger to render the tooltip\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Optional custom className for additional styling\n   */\n  className?: string\n\n  /**\n   * Delay duration for showing the tooltip in milliseconds\n   * @default 700\n   */\n  delayDuration?: number\n\n  /**\n   * Whether to show an arrow pointer on the tooltip\n   * @default false\n   */\n  arrow?: boolean\n\n  /**\n   * The preferred side of the trigger to render the mobile\n   */\n  mobileSide?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * The preferred alignment of the mobile\n   */\n  mobileAlign?: 'start' | 'center' | 'end'\n\n  /**\n   * The preferred side offset of the mobile\n   */\n  mobileSideOffset?: number\n\n  /**\n   * The container to position the mobile\n   */\n  container?: HTMLElement\n}\n\n/**\n * A versatile tooltip component that shows additional information on hover.\n * Built on top of Radix UI's tooltip primitives with custom styling and animations.\n *\n * @example\n * // Basic usage\n * <Tooltip triggerElement={<button>Hover me</button>} side=\"top\">\n *   Helpful information\n * </Tooltip>\n *\n * @example\n * // With custom delay and className\n * <Tooltip\n *   triggerElement={<Icon />}\n *   side=\"right\"\n *   delayDuration={300}\n *   className=\"custom-tooltip\"\n * >\n *   Icon description\n * </Tooltip>\n */\nexport function Tooltip({\n  triggerElement,\n  children,\n  side = 'top',\n  className,\n  delayDuration = 700,\n  arrow = false,\n  mobileSide,\n  mobileAlign,\n  mobileSideOffset,\n  container,\n  ...props\n}: Readonly<TooltipProps>) {\n  const isMobile = useIsMobile()\n\n  return isMobile ? (\n    <Popover\n      side={mobileSide}\n      className={className}\n      align={mobileAlign}\n      sideOffset={mobileSideOffset}\n      triggerElement={triggerElement}\n      container={container}\n      {...props}\n    >\n      {children}\n    </Popover>\n  ) : (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={delayDuration}>\n        <TooltipTrigger asChild>{triggerElement}</TooltipTrigger>\n        <TooltipContent side={side} className={className} arrow={arrow}>\n          {children}\n        </TooltipContent>\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n\n/**\n * Export primitive components for custom tooltip implementations.\n * Use these when you need more control over the tooltip behavior and styling.\n *\n * @example\n * // Custom implementation using primitives\n * <TooltipProvider>\n *   <TooltipRoot>\n *     <TooltipTrigger asChild>\n *       <button>Hover</button>\n *     </TooltipTrigger>\n *     <TooltipContent>Custom tooltip</TooltipContent>\n *   </TooltipRoot>\n * </TooltipProvider>\n */\nexport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger }\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,kBAAkB,gBAAA,CAAiB;AAMzC,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAExC,MAAM,cAAA,GAAiB,KAAA,CAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,KAAA,EAAO,QAAA,EAAU,GAAG,KAAA,IAAS,GAAA,qBAC3D,IAAA;AAAA,EAAC,gBAAA,CAAiB,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,8CAAA;AAAA,MACA,gBAAA;AAAA,MACA,iCAAA;AAAA,MACA,gGAAA;AAAA,MACA,wCAAA;AAAA,MACA,wCAAA;AAAA,MACA,wCAAA;AAAA,MACA,wCAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,yBAAS,GAAA,CAAC,gBAAA,CAAiB,KAAA,EAAjB,EAAuB,MAAK,OAAA,EAAQ;AAAA;AAAA;AACjD,CACD;AACD,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AA6E/C,SAAS,OAAA,CAAQ;AAAA,EACtB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB,KAAA,GAAQ,KAAA;AAAA,EACR,UAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,OAAO,QAAA,mBACL,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,UAAA;AAAA,MACN,SAAA;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACP,UAAA,EAAY,gBAAA;AAAA,MACZ,cAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,mBAEA,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,eAAY,aAAA,EACX,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,oBACxC,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,SAAA,EAAsB,OAC/C,QAAA,EACH;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { Popover } from '../Popover/Popover'\n\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\n/**\n * Provider component that wraps all tooltip instances.\n * Controls the delay duration and positioning of tooltips app-wide.\n */\nconst TooltipProvider = TooltipPrimitive.Provider\n\n/**\n * The root component that wraps the trigger and content.\n * Manages the open state and hover interactions.\n */\nconst TooltipRoot = TooltipPrimitive.Root\n\n/**\n * The element that triggers the tooltip when hovered or focused.\n * Wrap with asChild to use custom components as triggers.\n */\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipPortal = TooltipPrimitive.Portal\n\ntype TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\n  arrow?: boolean\n  /**\n   * Container for the portal. When provided, the tooltip is portaled into this element instead of `document.body`.\n   * Pass `null` to disable portaling and render inline (legacy behavior).\n   */\n  container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>['container'] | null\n}\n\nconst TooltipContent = React.forwardRef<React.ComponentRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(\n  ({ className, sideOffset = 4, arrow, container, children, ...props }, ref) => {\n    const content = (\n      <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn(\n          'z-50 rounded-lg bg-white px-3 py-1.5 text-sm',\n          'shadow-tooltip',\n          'animate-in fade-in-0 zoom-in-95',\n          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n          'data-[side=bottom]:slide-in-from-top-2',\n          'data-[side=left]:slide-in-from-right-2',\n          'data-[side=right]:slide-in-from-left-2',\n          'data-[side=top]:slide-in-from-bottom-2',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {arrow && <TooltipPrimitive.Arrow fill=\"white\" />}\n      </TooltipPrimitive.Content>\n    )\n\n    if (container === null) return content\n    return <TooltipPrimitive.Portal container={container ?? undefined}>{content}</TooltipPrimitive.Portal>\n  },\n)\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport type TooltipProps = {\n  /**\n   * The content to be displayed inside the tooltip\n   */\n  children: React.ReactElement | string\n\n  /**\n   * The element that triggers the tooltip on hover\n   */\n  triggerElement: React.ReactElement | string\n\n  /**\n   * The preferred side of the trigger to render the tooltip\n   */\n  side?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * Optional custom className for additional styling\n   */\n  className?: string\n\n  /**\n   * Delay duration for showing the tooltip in milliseconds\n   * @default 700\n   */\n  delayDuration?: number\n\n  /**\n   * Whether to show an arrow pointer on the tooltip\n   * @default false\n   */\n  arrow?: boolean\n\n  /**\n   * The preferred side of the trigger to render the mobile\n   */\n  mobileSide?: 'top' | 'right' | 'bottom' | 'left'\n\n  /**\n   * The preferred alignment of the mobile\n   */\n  mobileAlign?: 'start' | 'center' | 'end'\n\n  /**\n   * The preferred side offset of the mobile\n   */\n  mobileSideOffset?: number\n\n  /**\n   * The container to position the mobile\n   */\n  container?: HTMLElement\n}\n\n/**\n * A versatile tooltip component that shows additional information on hover.\n * Built on top of Radix UI's tooltip primitives with custom styling and animations.\n *\n * @example\n * // Basic usage\n * <Tooltip triggerElement={<button>Hover me</button>} side=\"top\">\n *   Helpful information\n * </Tooltip>\n *\n * @example\n * // With custom delay and className\n * <Tooltip\n *   triggerElement={<Icon />}\n *   side=\"right\"\n *   delayDuration={300}\n *   className=\"custom-tooltip\"\n * >\n *   Icon description\n * </Tooltip>\n */\nexport function Tooltip({\n  triggerElement,\n  children,\n  side = 'top',\n  className,\n  delayDuration = 700,\n  arrow = false,\n  mobileSide,\n  mobileAlign,\n  mobileSideOffset,\n  container,\n  ...props\n}: Readonly<TooltipProps>) {\n  const isMobile = useIsMobile()\n\n  return isMobile ? (\n    <Popover\n      side={mobileSide}\n      className={className}\n      align={mobileAlign}\n      sideOffset={mobileSideOffset}\n      triggerElement={triggerElement}\n      container={container}\n      {...props}\n    >\n      {children}\n    </Popover>\n  ) : (\n    <TooltipProvider>\n      <TooltipRoot delayDuration={delayDuration}>\n        <TooltipTrigger asChild>{triggerElement}</TooltipTrigger>\n        <TooltipContent side={side} className={className} arrow={arrow} container={container}>\n          {children}\n        </TooltipContent>\n      </TooltipRoot>\n    </TooltipProvider>\n  )\n}\n\n/**\n * Export primitive components for custom tooltip implementations.\n * Use these when you need more control over the tooltip behavior and styling.\n *\n * @example\n * // Custom implementation using primitives\n * <TooltipProvider>\n *   <TooltipRoot>\n *     <TooltipTrigger asChild>\n *       <button>Hover</button>\n *     </TooltipTrigger>\n *     <TooltipContent>Custom tooltip</TooltipContent>\n *   </TooltipRoot>\n * </TooltipProvider>\n */\nexport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger }\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,kBAAkB,gBAAA,CAAiB;AAMzC,MAAM,cAAc,gBAAA,CAAiB;AAMrC,MAAM,iBAAiB,gBAAA,CAAiB;AAExC,MAAM,gBAAgB,gBAAA,CAAiB;AAWvC,MAAM,iBAAiB,KAAA,CAAM,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5E,IAAA,MAAM,OAAA,mBACJ,IAAA;AAAA,MAAC,gBAAA,CAAiB,OAAA;AAAA,MAAjB;AAAA,QACC,GAAA;AAAA,QACA,UAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,8CAAA;AAAA,UACA,gBAAA;AAAA,UACA,iCAAA;AAAA,UACA,gGAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA,wCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,yBAAS,GAAA,CAAC,gBAAA,CAAiB,KAAA,EAAjB,EAAuB,MAAK,OAAA,EAAQ;AAAA;AAAA;AAAA,KACjD;AAGF,IAAA,IAAI,SAAA,KAAc,MAAM,OAAO,OAAA;AAC/B,IAAA,2BAAQ,gBAAA,CAAiB,MAAA,EAAjB,EAAwB,SAAA,EAAW,SAAA,IAAa,QAAY,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,EAC9E;AACF;AACA,cAAA,CAAe,WAAA,GAAc,iBAAiB,OAAA,CAAQ,WAAA;AA6E/C,SAAS,OAAA,CAAQ;AAAA,EACtB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA;AAAA,EACA,aAAA,GAAgB,GAAA;AAAA,EAChB,KAAA,GAAQ,KAAA;AAAA,EACR,UAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,OAAO,QAAA,mBACL,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,UAAA;AAAA,MACN,SAAA;AAAA,MACA,KAAA,EAAO,WAAA;AAAA,MACP,UAAA,EAAY,gBAAA;AAAA,MACZ,cAAA;AAAA,MACA,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH,mBAEA,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,eAAY,aAAA,EACX,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,cAAA,EAAe,CAAA;AAAA,wBACvC,cAAA,EAAA,EAAe,IAAA,EAAY,SAAA,EAAsB,KAAA,EAAc,WAC7D,QAAA,EACH;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Tooltip/index.js

@@ -1,2 +1,2 @@
-export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from './Tooltip.js';
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from './Tooltip.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js

@@ -42,7 +42,7 @@ export { Textarea } from './components/Textarea/Textarea.js';
 export { Toaster, toast } from './components/Toaster/Toaster.js';
 export { Toggle, toggleVariants } from './components/Toggle/Toggle.js';
 export { ToggleGroup, ToggleGroupItem } from './components/ToggleGroup/ToggleGroup.js';
-export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from './components/Tooltip/Tooltip.js';
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from './components/Tooltip/Tooltip.js';
 export { TruncatedTypographyWithTooltip } from './components/TruncatedTypographyWithTooltip/TruncatedTypographyWithTooltip.js';
 export { Typography, typographyVariants } from './components/Typography/Typography.js';
 export { InputDate } from './components/InputDate/InputDate.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.2.1",
+  "version": "4.3.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",