@tecsinapse/cortex-react 2.1.1-beta.3 → 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/cjs/service/SnackbarSonner.js

@@ -35,38 +35,6 @@ class SnackbarSonner {
       { ...this._options, ...options }
     );
   }
-  async promise(promise, config) {
-    const { loading, success, error } = config;
-    const id = this.show(loading.type ?? "info", loading.message, {
-      ...loading.options,
-      duration: loading.options?.duration ?? Infinity
-    });
-    try {
-      await promise;
-      if (!success) {
-        sonner.toast.dismiss(id);
-      } else {
-        const msg = success?.message ?? "Opera\xE7\xE3o conclu\xEDda com sucesso.";
-        this.show(success?.type ?? "success", msg, {
-          ...success?.options,
-          id,
-          duration: success?.options?.duration ?? this._options?.duration ?? 5e3
-        });
-      }
-    } catch (err) {
-      if (!error) {
-        sonner.toast.dismiss(id);
-      } else {
-        const msg = error?.message ?? "Ocorreu um erro inesperado.";
-        this.show(error?.type ?? "error", msg, {
-          ...error?.options,
-          id,
-          duration: error?.options?.duration ?? this._options?.duration ?? 5e3
-        });
-      }
-    }
-    return promise;
-  }
 }
 
 exports.SnackbarSonner = SnackbarSonner;

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

@@ -33,38 +33,6 @@ class SnackbarSonner {
       { ...this._options, ...options }
     );
   }
-  async promise(promise, config) {
-    const { loading, success, error } = config;
-    const id = this.show(loading.type ?? "info", loading.message, {
-      ...loading.options,
-      duration: loading.options?.duration ?? Infinity
-    });
-    try {
-      await promise;
-      if (!success) {
-        toast.dismiss(id);
-      } else {
-        const msg = success?.message ?? "Opera\xE7\xE3o conclu\xEDda com sucesso.";
-        this.show(success?.type ?? "success", msg, {
-          ...success?.options,
-          id,
-          duration: success?.options?.duration ?? this._options?.duration ?? 5e3
-        });
-      }
-    } catch (err) {
-      if (!error) {
-        toast.dismiss(id);
-      } else {
-        const msg = error?.message ?? "Ocorreu um erro inesperado.";
-        this.show(error?.type ?? "error", msg, {
-          ...error?.options,
-          id,
-          duration: error?.options?.duration ?? this._options?.duration ?? 5e3
-        });
-      }
-    }
-    return promise;
-  }
 }
 
 export { SnackbarSonner };

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/service/SnackbarSonner.d.ts

@@ -2,28 +2,9 @@ import React from 'react';
 import { ExternalToast } from 'sonner';
 import { ISnackbar, TypeSnack } from './ISnackbar';
 import { IExternalToast } from './IExternalToast';
-interface PromiseSnackConfig<T = unknown> {
-    loading: {
-        message: string;
-        type?: TypeSnack;
-        options?: Omit<IExternalToast, 'className' | 'style'>;
-    };
-    success?: {
-        message?: string;
-        type?: TypeSnack;
-        options?: Omit<IExternalToast, 'className' | 'style'>;
-    };
-    error?: {
-        message?: string;
-        type?: TypeSnack;
-        options?: Omit<IExternalToast, 'className' | 'style'>;
-    };
-}
 export declare class SnackbarSonner implements ISnackbar<IExternalToast> {
     _options?: IExternalToast;
     constructor(options?: IExternalToast);
     custom(Component: React.ReactElement, options?: ExternalToast): string | number;
     show(type: TypeSnack, message: string, options?: Omit<IExternalToast, 'className' | 'style'>): string | number;
-    promise<T>(promise: Promise<T>, config: PromiseSnackConfig<T>): Promise<T>;
 }
-export {};

package/package.json

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