@tecsinapse/cortex-react 2.1.2-beta.1 → 2.2.0-beta.1

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

@@ -0,0 +1,103 @@
+'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 selectOptions = [
+  { label: "Brasil", value: "brasil" },
+  { label: "Alemanha", value: "alemanha" },
+  { label: "Jap\xE3o", value: "japao" },
+  { label: "Canad\xE1", value: "canada" },
+  { label: "Austr\xE1lia", value: "australia" },
+  { label: "Fran\xE7a", value: "franca" },
+  { label: "It\xE1lia", value: "italia" },
+  { label: "M\xE9xico", value: "mexico" },
+  { label: "Portugal", value: "portugal" },
+  { label: "Argentina", value: "argentina" }
+];
+const Autocomplete = ({
+  inputValue,
+  setInputValue,
+  label,
+  onChange,
+  disabled
+}) => {
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [selectedValue, setSelectedValue] = React.useState({
+    label: "",
+    value: ""
+  });
+  const [open, setOpen] = React.useState(true);
+  const filteredOptions = React.useMemo(() => {
+    const optionsList = (selectOptions ?? []).filter(
+      (op) => op.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+    return optionsList;
+  }, [selectOptions, inputValue]);
+  const handleSelect = (option) => {
+    if (!(selectedValue.value === option.value)) {
+      setSelectedValue(option);
+    }
+    setInputValue("");
+    setOpen(false);
+  };
+  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: filteredOptions.map((op) => /* @__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(op),
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base truncate", children: op.label })
+              }
+            )) })
+          }
+        ) })
+      ] })
+    }
+  );
+};
+
+exports.Autocomplete = Autocomplete;

package/dist/cjs/index.js

@@ -44,6 +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 useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -127,6 +128,7 @@ exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$7.Uploader;
+exports.Autocomplete = Autocomplete.Autocomplete;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

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

@@ -0,0 +1,101 @@
+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 selectOptions = [
+  { label: "Brasil", value: "brasil" },
+  { label: "Alemanha", value: "alemanha" },
+  { label: "Jap\xE3o", value: "japao" },
+  { label: "Canad\xE1", value: "canada" },
+  { label: "Austr\xE1lia", value: "australia" },
+  { label: "Fran\xE7a", value: "franca" },
+  { label: "It\xE1lia", value: "italia" },
+  { label: "M\xE9xico", value: "mexico" },
+  { label: "Portugal", value: "portugal" },
+  { label: "Argentina", value: "argentina" }
+];
+const Autocomplete = ({
+  inputValue,
+  setInputValue,
+  label,
+  onChange,
+  disabled
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [selectedValue, setSelectedValue] = useState({
+    label: "",
+    value: ""
+  });
+  const [open, setOpen] = useState(true);
+  const filteredOptions = useMemo(() => {
+    const optionsList = (selectOptions ?? []).filter(
+      (op) => op.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+    return optionsList;
+  }, [selectOptions, inputValue]);
+  const handleSelect = (option) => {
+    if (!(selectedValue.value === option.value)) {
+      setSelectedValue(option);
+    }
+    setInputValue("");
+    setOpen(false);
+  };
+  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: filteredOptions.map((op) => /* @__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(op),
+                children: /* @__PURE__ */ jsx("span", { className: "text-base truncate", children: op.label })
+              }
+            )) })
+          }
+        ) })
+      ] })
+    }
+  );
+};
+
+export { Autocomplete };

package/dist/esm/index.js

@@ -42,6 +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 { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

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

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

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

@@ -0,0 +1 @@
+export * from './Autocomplete';

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

@@ -32,3 +32,4 @@ export * from './TimePicker';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './Uploader';
+export * from './Autocomplete';

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

@@ -1,6 +1,6 @@
 import { type DropEvent, type FileRejection } from 'react-dropzone';
 import { AcceptSpecificMap, UseDropzoneProps, type FileUpload } from '../components/Uploader/types';
-interface UseFileUploadOptions<T> {
+interface UseFileUploadOptions {
     accept?: {
         IMAGE?: (typeof AcceptSpecificMap.IMAGE)[number][];
         APPLICATION?: (typeof AcceptSpecificMap.APPLICATION)[number][];
@@ -8,7 +8,7 @@ interface UseFileUploadOptions<T> {
         VIDEO?: (typeof AcceptSpecificMap.VIDEO)[number][];
         TEXT?: (typeof AcceptSpecificMap.TEXT)[number][];
     };
-    onAccept?: (files: FileUpload<T>[]) => Promise<FileUpload<T>[]>;
+    onAccept?: (files: FileUpload<unknown>[]) => Promise<FileUpload<unknown>[]>;
     onOpenManager?: () => void;
     onFileRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
     maxSize?: number;
@@ -22,7 +22,7 @@ interface UseFileUploadOptions<T> {
     noClick?: boolean;
     ignoreRejections?: boolean;
 }
-export declare const useFileUpload: <T>({ accept, onAccept, onOpenManager, onFileRejected, maxSize, allowMultiple, preventDuplicates, onDuplicate, hasManager, isFolder, noClick, ignoreRejections, uploadProgressText, uploadSuccessText, }: UseFileUploadOptions<T>) => {
+export declare const useFileUpload: <T>({ accept, onAccept, onOpenManager, onFileRejected, maxSize, allowMultiple, preventDuplicates, onDuplicate, hasManager, isFolder, noClick, ignoreRejections, uploadProgressText, uploadSuccessText, }: UseFileUploadOptions) => {
     onOpen: () => void;
     onClose: () => void;
     onDelete: (index: number) => void;
@@ -31,7 +31,7 @@ export declare const useFileUpload: <T>({ accept, onAccept, onOpenManager, onFil
     openManager: () => void;
     closeManager: () => void;
     isManagerOpen: boolean;
-    files: FileUpload<any>[];
+    files: FileUpload<unknown>[];
     duplicates: File[];
     onClearFiles: () => void;
 };

package/dist/types/provider/ManagerContext.d.ts

@@ -16,5 +16,5 @@ interface ManagerContextProps<T> {
 export declare const ManagerProvider: ({ children }: {
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const useManager: () => ManagerContextProps<any>;
+export declare const useManager: () => ManagerContextProps<unknown>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.1.2-beta.1",
+  "version": "2.2.0-beta.1",
   "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": "ab8ab8f2a28965b382ecae07d997f401af35a65d"
+  "gitHead": "80ce93ff1ec0f76af43695b205dd2d2db73e1792"
 }