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

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

@@ -0,0 +1,32 @@
+'use strict';
+
+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 = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  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,
+      {
+        grouped: true,
+        option,
+        onSelect
+      },
+      option.value
+    ))
+  ] }, key)) });
+};
+
+exports.AutocompleteGroupedOptions = AutocompleteGroupedOptions;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const AutocompleteOption = ({
+  option,
+  onSelect,
+  grouped = false
+}) => {
+  const context$1 = React.useContext(context.AutocompleteContext);
+  if (!context$1)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { setOpen } = context$1;
+  const handleSelect = React.useCallback(
+    (option2) => {
+      setOpen(false);
+      onSelect?.(option2);
+    },
+    [onSelect, setOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      onClick: () => handleSelect(option),
+      className: cortexCore.option({
+        selected: false,
+        grouped
+      }),
+      role: "option",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: option.label })
+    }
+  );
+};
+
+exports.AutocompleteOption = AutocompleteOption;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+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 = ({
+  options,
+  onSelect,
+  children
+}) => {
+  const { options: _options, isLoading } = useAutocompleteOptions.useAutocompleteOptions({ options });
+  const defaultOptions = React.useMemo(
+    () => _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.AutocompleteOption,
+      {
+        option,
+        onSelect
+      },
+      option.value
+    )) ?? [],
+    [_options, onSelect]
+  );
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
+};
+
+exports.AutocompleteOptions = AutocompleteOptions;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@floating-ui/react');
+var index = require('../Popover/index.js');
+var context = require('./context.js');
+var clsx = require('clsx');
+
+const AutocompletePopover = ({
+  children,
+  className
+}) => {
+  const context$1 = React.useContext(context.AutocompleteContext);
+  if (!context$1)
+    throw new Error("AutocompletePopover must be used within AutocompleteRoot");
+  const { triggerWidth } = context$1;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.Popover.Content,
+    {
+      className: clsx(
+        "bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
+        className
+      ),
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      initialFocus: -1,
+      children
+    }
+  ) });
+};
+
+exports.AutocompletePopover = AutocompletePopover;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Popover/index.js');
+var context = require('./context.js');
+
+const AutocompleteRoot = ({ children }) => {
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    context.AutocompleteContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        triggerWidth,
+        setTriggerWidth
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.Popover.Root,
+        {
+          placement: "bottom-start",
+          controlled: true,
+          isOpen: open,
+          setIsOpen: setOpen,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full", children })
+        }
+      )
+    }
+  );
+};
+
+exports.AutocompleteRoot = AutocompleteRoot;

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Popover/index.js');
+var index$1 = require('../Input/index.js');
+var context = require('./context.js');
+
+const AutocompleteTrigger = ({
+  inputValue,
+  onChange,
+  label,
+  disabled,
+  placeholder
+}) => {
+  const context$1 = React.useContext(context.AutocompleteContext);
+  if (!context$1)
+    throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
+  const { setTriggerWidth, setOpen } = context$1;
+  const triggerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  const handleChange = (event) => {
+    onChange(event);
+    if (event.target.value.length > 0) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.Input.Root,
+    {
+      label: label ?? "Selecione uma op\xE7\xE3o",
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder,
+      ref: triggerRef
+    }
+  ) });
+};
+
+exports.AutocompleteTrigger = AutocompleteTrigger;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+const AutocompleteContext = React.createContext(
+  void 0
+);
+
+exports.AutocompleteContext = AutocompleteContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+var Popover = require('./Popover.js');
+var Options = require('./Options.js');
+var Option = require('./Option.js');
+var GroupedOptions = require('./GroupedOptions.js');
+
+const Autocomplete = {
+  Root: Root.AutocompleteRoot,
+  Trigger: Trigger.AutocompleteTrigger,
+  Popover: Popover.AutocompletePopover,
+  Options: Options.AutocompleteOptions,
+  Option: Option.AutocompleteOption,
+  GroupedOptions: GroupedOptions.AutocompleteGroupedOptions
+};
+
+exports.Autocomplete = Autocomplete;

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/cjs/index.js

@@ -44,7 +44,7 @@ var TimeFieldInput = require('./components/TimePicker/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
 var index$7 = require('./components/Uploader/index.js');
-var Autocomplete = require('./components/Autocomplete/Autocomplete.js');
+var index$8 = require('./components/Autocomplete/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -128,7 +128,7 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$7.Uploader;
-exports.Autocomplete = Autocomplete.Autocomplete;
+exports.Autocomplete = index$8.Autocomplete;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/ManagerContext.js

@@ -66,6 +66,9 @@ require('../components/Tooltip.js');
 require('react-icons/hi2');
 require('react-icons/fa6');
 require('react-dom');
+require('../components/Autocomplete/context.js');
+require('../components/Autocomplete/Options.js');
+require('../components/Autocomplete/GroupedOptions.js');
 
 const ManagerContext = React.createContext(null);
 const ManagerProvider = ({ children }) => {

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

@@ -0,0 +1,30 @@
+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 = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  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,
+      {
+        grouped: true,
+        option,
+        onSelect
+      },
+      option.value
+    ))
+  ] }, key)) });
+};
+
+export { AutocompleteGroupedOptions };

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

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { option } from '@tecsinapse/cortex-core';
+import { useContext, useCallback } from 'react';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteOption = ({
+  option: option$1,
+  onSelect,
+  grouped = false
+}) => {
+  const context = useContext(AutocompleteContext);
+  if (!context)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { setOpen } = context;
+  const handleSelect = useCallback(
+    (option2) => {
+      setOpen(false);
+      onSelect?.(option2);
+    },
+    [onSelect, setOpen]
+  );
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      onClick: () => handleSelect(option$1),
+      className: option({
+        selected: false,
+        grouped
+      }),
+      role: "option",
+      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option$1.label })
+    }
+  );
+};
+
+export { AutocompleteOption };

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

@@ -0,0 +1,29 @@
+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 = ({
+  options,
+  onSelect,
+  children
+}) => {
+  const { options: _options, isLoading } = useAutocompleteOptions({ options });
+  const defaultOptions = useMemo(
+    () => _options?.map((option) => /* @__PURE__ */ jsx(
+      AutocompleteOption,
+      {
+        option,
+        onSelect
+      },
+      option.value
+    )) ?? [],
+    [_options, onSelect]
+  );
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
+};
+
+export { AutocompleteOptions };

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { Popover } from '../Popover/index.js';
+import { AutocompleteContext } from './context.js';
+import clsx from 'clsx';
+
+const AutocompletePopover = ({
+  children,
+  className
+}) => {
+  const context = useContext(AutocompleteContext);
+  if (!context)
+    throw new Error("AutocompletePopover must be used within AutocompleteRoot");
+  const { triggerWidth } = context;
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      className: clsx(
+        "bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
+        className
+      ),
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      initialFocus: -1,
+      children
+    }
+  ) });
+};
+
+export { AutocompletePopover };

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteRoot = ({ children }) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    AutocompleteContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        triggerWidth,
+        setTriggerWidth
+      },
+      children: /* @__PURE__ */ jsx(
+        Popover.Root,
+        {
+          placement: "bottom-start",
+          controlled: true,
+          isOpen: open,
+          setIsOpen: setOpen,
+          children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full", children })
+        }
+      )
+    }
+  );
+};
+
+export { AutocompleteRoot };

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

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useRef, useEffect } from 'react';
+import { Popover } from '../Popover/index.js';
+import { Input } from '../Input/index.js';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteTrigger = ({
+  inputValue,
+  onChange,
+  label,
+  disabled,
+  placeholder
+}) => {
+  const context = useContext(AutocompleteContext);
+  if (!context)
+    throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
+  const { setTriggerWidth, setOpen } = context;
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  const handleChange = (event) => {
+    onChange(event);
+    if (event.target.value.length > 0) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+    Input.Root,
+    {
+      label: label ?? "Selecione uma op\xE7\xE3o",
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder,
+      ref: triggerRef
+    }
+  ) });
+};
+
+export { AutocompleteTrigger };

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

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const AutocompleteContext = createContext(
+  void 0
+);
+
+export { AutocompleteContext };

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

@@ -0,0 +1,17 @@
+import { AutocompleteRoot } from './Root.js';
+import { AutocompleteTrigger } from './Trigger.js';
+import { AutocompletePopover } from './Popover.js';
+import { AutocompleteOptions } from './Options.js';
+import { AutocompleteOption } from './Option.js';
+import { AutocompleteGroupedOptions } from './GroupedOptions.js';
+
+const Autocomplete = {
+  Root: AutocompleteRoot,
+  Trigger: AutocompleteTrigger,
+  Popover: AutocompletePopover,
+  Options: AutocompleteOptions,
+  Option: AutocompleteOption,
+  GroupedOptions: AutocompleteGroupedOptions
+};
+
+export { Autocomplete };

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/esm/index.js

@@ -42,7 +42,7 @@ export { TimeFieldInput } from './components/TimePicker/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
 export { Uploader } from './components/Uploader/index.js';
-export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
+export { Autocomplete } from './components/Autocomplete/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/provider/ManagerContext.js

@@ -64,6 +64,9 @@ import '../components/Tooltip.js';
 import 'react-icons/hi2';
 import 'react-icons/fa6';
 import 'react-dom';
+import '../components/Autocomplete/context.js';
+import '../components/Autocomplete/Options.js';
+import '../components/Autocomplete/GroupedOptions.js';
 
 const ManagerContext = createContext(null);
 const ManagerProvider = ({ children }) => {

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

@@ -0,0 +1,2 @@
+import { AutocompleteGroupedOptionsProps } from './types';
+export declare const AutocompleteGroupedOptions: ({ onSelect, groupedLabelExtractor, options, }: AutocompleteGroupedOptionsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { AutocompleteOptionProps } from './types';
+export declare const AutocompleteOption: ({ option, onSelect, grouped, }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { AutocompleteOptionsProps } from './types';
+export declare const AutocompleteOptions: ({ options, onSelect, children, }: AutocompleteOptionsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { AutocompletePopoverProps } from './types';
+export declare const AutocompletePopover: ({ children, className, }: AutocompletePopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { AutocompleteRootProps } from './types';
+export declare const AutocompleteRoot: ({ children }: AutocompleteRootProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { AutocompleteTriggerProps } from './types';
+export declare const AutocompleteTrigger: ({ inputValue, onChange, label, disabled, placeholder, }: AutocompleteTriggerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+interface AutocompleteContextType {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    triggerWidth: number | undefined;
+    setTriggerWidth: Dispatch<SetStateAction<number | undefined>>;
+}
+export declare const AutocompleteContext: import("react").Context<AutocompleteContextType | undefined>;
+export {};

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

@@ -1 +1,9 @@
-export * from './Autocomplete';
+export declare const Autocomplete: {
+    Root: ({ children }: import("./types").AutocompleteRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ inputValue, onChange, label, disabled, placeholder, }: import("./types").AutocompleteTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Popover: ({ children, className, }: import("./types").AutocompletePopoverProps) => import("react/jsx-runtime").JSX.Element;
+    Options: ({ options, onSelect, children, }: import("./types").AutocompleteOptionsProps) => import("react/jsx-runtime").JSX.Element;
+    Option: ({ option, onSelect, grouped, }: import("./types").AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element;
+    GroupedOptions: ({ onSelect, groupedLabelExtractor, options, }: import("./types").AutocompleteGroupedOptionsProps) => import("react/jsx-runtime").JSX.Element;
+};
+export * from './types';

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

@@ -0,0 +1,46 @@
+import React, { ChangeEventHandler, ReactNode } from 'react';
+export interface Option {
+    label: string;
+    value: string;
+}
+export interface AutocompleteRootProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface AutocompleteTriggerProps {
+    inputValue: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface AutocompletePopoverProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface AutocompleteOptionsProps {
+    options?: Option[] | (() => Promise<Option[]>);
+    onSelect?: (option: Option) => void;
+    children?: ReactNode;
+}
+export interface AutocompleteGroupedOptionsProps {
+    options?: Map<string, Option[]> | (() => Promise<Map<string, Option[]>>);
+    groupedLabelExtractor: (value: string) => string;
+    onSelect?: (option: Option) => void;
+}
+export interface AutocompleteOptionProps {
+    option: Option;
+    onSelect?: (option: Option) => void;
+    grouped?: boolean;
+}
+export interface AutocompleteProps {
+    inputValue: string;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    options: Option[] | (() => Promise<Option[]>);
+    onSelect?: (option: Option) => void;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}

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.4",
+  "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": "69afce08c648a4bd087d25e7009b9a4182f66083"
+  "gitHead": "dc4acfa02813924f4707075b33eec14db030b521"
 }

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

@@ -1,85 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('../Popover/index.js');
-var index$1 = require('../Input/index.js');
-var react = require('@floating-ui/react');
-
-const Autocomplete = ({
-  inputValue,
-  label,
-  onChange,
-  onSelect,
-  disabled,
-  options
-}) => {
-  const [triggerWidth, setTriggerWidth] = React.useState();
-  const [open, setOpen] = React.useState(true);
-  const filteredOptions = React.useMemo(() => {
-    const optionsList = (options ?? []).filter(
-      (op) => op.label.toLowerCase().includes(inputValue.toLowerCase())
-    );
-    return optionsList;
-  }, [options, inputValue]);
-  const handleSelect = (option) => {
-    setOpen(false);
-    onSelect?.(option);
-  };
-  const handleChange = (event) => {
-    onChange(event);
-    if (event.target.value.length > 0) {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-  };
-  const triggerRef = React.useRef(void 0);
-  React.useEffect(() => {
-    if (triggerRef.current && setTriggerWidth) {
-      const width = triggerRef.current.getBoundingClientRect().width;
-      setTriggerWidth(width);
-    }
-  }, [triggerRef.current, setTriggerWidth]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    index.Popover.Root,
-    {
-      placement: "bottom-start",
-      controlled: true,
-      isOpen: open,
-      setIsOpen: setOpen,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          index$1.Input.Root,
-          {
-            label: label ?? "Selecione uma op\xE7\xE3o",
-            value: inputValue,
-            onChange: handleChange,
-            disabled,
-            ref: triggerRef
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          index.Popover.Content,
-          {
-            className: "w-full bg-white shadow-md rounded-md overflow-hidden max-h-[30vh] outline-none z-9999",
-            style: {
-              width: triggerWidth ? `${triggerWidth}px` : "auto"
-            },
-            initialFocus: -1,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col overflow-y-auto", children: (options ?? filteredOptions ?? []).map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "flex w-full h-[3rem] items-center gap-centi p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
-                onClick: () => handleSelect(option),
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base truncate", children: option.label })
-              }
-            )) })
-          }
-        ) })
-      ] })
-    }
-  );
-};
-
-exports.Autocomplete = Autocomplete;

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

@@ -1,83 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo, useRef, useEffect } from 'react';
-import { Popover } from '../Popover/index.js';
-import { Input } from '../Input/index.js';
-import { FloatingPortal } from '@floating-ui/react';
-
-const Autocomplete = ({
-  inputValue,
-  label,
-  onChange,
-  onSelect,
-  disabled,
-  options
-}) => {
-  const [triggerWidth, setTriggerWidth] = useState();
-  const [open, setOpen] = useState(true);
-  const filteredOptions = useMemo(() => {
-    const optionsList = (options ?? []).filter(
-      (op) => op.label.toLowerCase().includes(inputValue.toLowerCase())
-    );
-    return optionsList;
-  }, [options, inputValue]);
-  const handleSelect = (option) => {
-    setOpen(false);
-    onSelect?.(option);
-  };
-  const handleChange = (event) => {
-    onChange(event);
-    if (event.target.value.length > 0) {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-  };
-  const triggerRef = useRef(void 0);
-  useEffect(() => {
-    if (triggerRef.current && setTriggerWidth) {
-      const width = triggerRef.current.getBoundingClientRect().width;
-      setTriggerWidth(width);
-    }
-  }, [triggerRef.current, setTriggerWidth]);
-  return /* @__PURE__ */ jsx(
-    Popover.Root,
-    {
-      placement: "bottom-start",
-      controlled: true,
-      isOpen: open,
-      setIsOpen: setOpen,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
-        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
-          Input.Root,
-          {
-            label: label ?? "Selecione uma op\xE7\xE3o",
-            value: inputValue,
-            onChange: handleChange,
-            disabled,
-            ref: triggerRef
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
-          Popover.Content,
-          {
-            className: "w-full bg-white shadow-md rounded-md overflow-hidden max-h-[30vh] outline-none z-9999",
-            style: {
-              width: triggerWidth ? `${triggerWidth}px` : "auto"
-            },
-            initialFocus: -1,
-            children: /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col overflow-y-auto", children: (options ?? filteredOptions ?? []).map((option) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "flex w-full h-[3rem] items-center gap-centi p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
-                onClick: () => handleSelect(option),
-                children: /* @__PURE__ */ jsx("span", { className: "text-base truncate", children: option.label })
-              }
-            )) })
-          }
-        ) })
-      ] })
-    }
-  );
-};
-
-export { Autocomplete };

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

@@ -1,17 +0,0 @@
-import React, { ChangeEventHandler } from 'react';
-interface AutocompleteProps {
-    inputValue: string;
-    setInputValue: React.Dispatch<React.SetStateAction<string>>;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    options: Option[];
-    onSelect?: (option: Option) => void;
-    label?: string;
-    placeholder?: string;
-    disabled?: boolean;
-}
-interface Option {
-    label: string;
-    value: string;
-}
-export declare const Autocomplete: ({ inputValue, label, onChange, onSelect, disabled, options, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;
-export {};