@tecsinapse/cortex-react 2.2.0-beta.5 → 2.2.0-beta.6

package/dist/cjs/components/Autocomplete/GroupedOptions.js

@@ -3,6 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var Option = require('./Option.js');
+var useAutocompleteGroupedOptions = require('../../hooks/useAutocompleteGroupedOptions.js');
+var SkeletonOptions = require('../Select/SkeletonOptions.js');
 
 const { groupedTitle, list } = cortexCore.selectVariants();
 const AutocompleteGroupedOptions = ({
@@ -10,7 +12,10 @@ const AutocompleteGroupedOptions = ({
   groupedLabelExtractor,
   options
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: [...options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  const { options: _options, isLoading } = useAutocompleteGroupedOptions.useAutocompleteGroupedOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
     value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
       Option.AutocompleteOption,

package/dist/cjs/components/Autocomplete/Options.js

@@ -4,6 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var Option = require('./Option.js');
+var useAutocompleteOptions = require('../../hooks/useAutocompleteOptions.js');
+var SkeletonOptions = require('../Select/SkeletonOptions.js');
 
 const { list } = cortexCore.selectVariants();
 const AutocompleteOptions = ({
@@ -11,8 +13,9 @@ const AutocompleteOptions = ({
   onSelect,
   children
 }) => {
+  const { options: _options, isLoading } = useAutocompleteOptions.useAutocompleteOptions({ options });
   const defaultOptions = React.useMemo(
-    () => options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    () => _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
       Option.AutocompleteOption,
       {
         option,
@@ -20,9 +23,9 @@ const AutocompleteOptions = ({
       },
       option.value
     )) ?? [],
-    [options, onSelect]
+    [_options, onSelect]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
 };
 
 exports.AutocompleteOptions = AutocompleteOptions;

package/dist/cjs/hooks/useAutocompleteGroupedOptions.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useAutocompleteGroupedOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = React.useState();
+  const [isLoading, setIsLoading] = React.useState();
+  const [error, setError] = React.useState();
+  const initData = async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  React.useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+exports.useAutocompleteGroupedOptions = useAutocompleteGroupedOptions;

package/dist/cjs/hooks/useAutocompleteOptions.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useAutocompleteOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = React.useState();
+  const [isLoading, setIsLoading] = React.useState();
+  const [error, setError] = React.useState();
+  const initData = React.useCallback(async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+exports.useAutocompleteOptions = useAutocompleteOptions;

package/dist/esm/components/Autocomplete/GroupedOptions.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
 import { AutocompleteOption } from './Option.js';
+import { useAutocompleteGroupedOptions } from '../../hooks/useAutocompleteGroupedOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
 
 const { groupedTitle, list } = selectVariants();
 const AutocompleteGroupedOptions = ({
@@ -8,7 +10,10 @@ const AutocompleteGroupedOptions = ({
   groupedLabelExtractor,
   options
 }) => {
-  return /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: [...options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+  const { options: _options, isLoading } = useAutocompleteGroupedOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
     value.map((option) => /* @__PURE__ */ jsx(
       AutocompleteOption,

package/dist/esm/components/Autocomplete/Options.js

@@ -2,6 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
 import { useMemo } from 'react';
 import { AutocompleteOption } from './Option.js';
+import { useAutocompleteOptions } from '../../hooks/useAutocompleteOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
 
 const { list } = selectVariants();
 const AutocompleteOptions = ({
@@ -9,8 +11,9 @@ const AutocompleteOptions = ({
   onSelect,
   children
 }) => {
+  const { options: _options, isLoading } = useAutocompleteOptions({ options });
   const defaultOptions = useMemo(
-    () => options?.map((option) => /* @__PURE__ */ jsx(
+    () => _options?.map((option) => /* @__PURE__ */ jsx(
       AutocompleteOption,
       {
         option,
@@ -18,9 +21,9 @@ const AutocompleteOptions = ({
       },
       option.value
     )) ?? [],
-    [options, onSelect]
+    [_options, onSelect]
   );
-  return /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
 };
 
 export { AutocompleteOptions };

package/dist/esm/hooks/useAutocompleteGroupedOptions.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+const useAutocompleteGroupedOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = useState();
+  const [isLoading, setIsLoading] = useState();
+  const [error, setError] = useState();
+  const initData = async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+export { useAutocompleteGroupedOptions };

package/dist/esm/hooks/useAutocompleteOptions.js

@@ -0,0 +1,33 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const useAutocompleteOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = useState();
+  const [isLoading, setIsLoading] = useState();
+  const [error, setError] = useState();
+  const initData = useCallback(async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+export { useAutocompleteOptions };

package/dist/types/components/Autocomplete/types.d.ts

@@ -20,12 +20,12 @@ export interface AutocompletePopoverProps {
     className?: string;
 }
 export interface AutocompleteOptionsProps {
-    options?: Option[];
+    options?: Option[] | (() => Promise<Option[]>);
     onSelect?: (option: Option) => void;
     children?: ReactNode;
 }
 export interface AutocompleteGroupedOptionsProps {
-    options?: Map<string, Option[]>;
+    options?: Map<string, Option[]> | (() => Promise<Map<string, Option[]>>);
     groupedLabelExtractor: (value: string) => string;
     onSelect?: (option: Option) => void;
 }
@@ -34,11 +34,11 @@ export interface AutocompleteOptionProps {
     onSelect?: (option: Option) => void;
     grouped?: boolean;
 }
-export interface AutocompleteProps<T> {
+export interface AutocompleteProps {
     inputValue: string;
     setInputValue: React.Dispatch<React.SetStateAction<string>>;
     onChange: ChangeEventHandler<HTMLInputElement>;
-    options: Option[];
+    options: Option[] | (() => Promise<Option[]>);
     onSelect?: (option: Option) => void;
     label?: string;
     placeholder?: string;

package/dist/types/hooks/useAutocompleteGroupedOptions.d.ts

@@ -0,0 +1,10 @@
+import { Option } from '../components/Autocomplete/types';
+interface useAutocompleteGroupedOptionsProps {
+    options?: Map<string, Option[]> | (() => Promise<Map<string, Option[]>>);
+}
+export declare const useAutocompleteGroupedOptions: ({ options: _options, }: useAutocompleteGroupedOptionsProps) => {
+    isLoading: boolean | undefined;
+    options: Map<string, Option[]> | undefined;
+    error: string | undefined;
+};
+export {};

package/dist/types/hooks/useAutocompleteOptions.d.ts

@@ -0,0 +1,10 @@
+import { Option } from '../components/Autocomplete/types';
+interface useAutocompleteOptionsProps {
+    options?: Option[] | (() => Promise<Option[]>);
+}
+export declare const useAutocompleteOptions: ({ options: _options, }: useAutocompleteOptionsProps) => {
+    isLoading: boolean | undefined;
+    options: Option[] | undefined;
+    error: string | undefined;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.2.0-beta.5",
+  "version": "2.2.0-beta.6",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-icons": ">=5.2.0",
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "bd4d4157b201d85cbbbe653fb1e080ca1034cebc"
+  "gitHead": "dc4acfa02813924f4707075b33eec14db030b521"
 }