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

package/dist/cjs/index.js

@@ -45,6 +45,7 @@ var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
 var index$7 = require('./components/Uploader/index.js');
 var index$8 = require('./components/Autocomplete/index.js');
+var index$9 = require('./components/PhoneInput/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -129,6 +130,7 @@ exports.Toggle = Toggle.Toggle;
 exports.Tooltip = Tooltip.Tooltip;
 exports.Uploader = index$7.Uploader;
 exports.Autocomplete = index$8.Autocomplete;
+exports.PhoneInput = index$9.PhoneInput;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/ManagerContext.js

@@ -69,6 +69,11 @@ require('react-dom');
 require('../components/Autocomplete/context.js');
 require('../components/Autocomplete/Options.js');
 require('../components/Autocomplete/GroupedOptions.js');
+require('../components/PhoneInput/Options.js');
+require('../components/PhoneInput/context.js');
+require('react-international-phone');
+require('react-icons/io5');
+require('country-flag-icons/react/3x2');
 
 const ManagerContext = React.createContext(null);
 const ManagerProvider = ({ children }) => {

package/dist/cjs/service/SnackbarSonner.js

@@ -35,6 +35,38 @@ 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/GroupedOptions.js

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
+import { useContext } from 'react';
 import { AutocompleteOption } from './Option.js';
+import { useAutocompleteGroupedOptions } from '../../hooks/useAutocompleteGroupedOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
 
 const { groupedTitle, list } = selectVariants();
 const AutocompleteGroupedOptions = ({
@@ -8,7 +12,18 @@ 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
+  });
+  const context = useContext(
+    AutocompleteContext
+  );
+  if (!context)
+    throw new Error(
+      "AutocompleteGroupedOptions must be used within AutocompleteRoot"
+    );
+  const { keyExtractor } = context;
+  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,
@@ -17,7 +32,7 @@ const AutocompleteGroupedOptions = ({
         option,
         onSelect
       },
-      option.value
+      keyExtractor(option)
     ))
   ] }, key)) });
 };

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

@@ -8,10 +8,12 @@ const AutocompleteOption = ({
   onSelect,
   grouped = false
 }) => {
-  const context = useContext(AutocompleteContext);
+  const context = useContext(
+    AutocompleteContext
+  );
   if (!context)
     throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
-  const { setOpen } = context;
+  const { setOpen, labelExtractor } = context;
   const handleSelect = useCallback(
     (option2) => {
       setOpen(false);
@@ -28,7 +30,7 @@ const AutocompleteOption = ({
         grouped
       }),
       role: "option",
-      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: option$1.label })
+      children: /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: labelExtractor(option$1) })
     }
   );
 };

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

@@ -1,7 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { selectVariants } from '@tecsinapse/cortex-core';
-import { useMemo } from 'react';
+import { useContext } from 'react';
 import { AutocompleteOption } from './Option.js';
+import { useAutocompleteOptions } from '../../hooks/useAutocompleteOptions.js';
+import { SkeletonOptions } from '../Select/SkeletonOptions.js';
+import { AutocompleteContext } from './context.js';
 
 const { list } = selectVariants();
 const AutocompleteOptions = ({
@@ -9,18 +12,23 @@ const AutocompleteOptions = ({
   onSelect,
   children
 }) => {
-  const defaultOptions = useMemo(
-    () => options?.map((option) => /* @__PURE__ */ jsx(
-      AutocompleteOption,
-      {
-        option,
-        onSelect
-      },
-      option.value
-    )) ?? [],
-    [options, onSelect]
+  const context = useContext(
+    AutocompleteContext
   );
-  return /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? defaultOptions });
+  if (!context)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { keyExtractor } = context;
+  const { options: _options, isLoading } = useAutocompleteOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsx(SkeletonOptions, {}) : /* @__PURE__ */ jsx("ul", { role: "listbox", className: list(), children: children ?? _options?.map((option) => /* @__PURE__ */ jsx(
+    AutocompleteOption,
+    {
+      option,
+      onSelect
+    },
+    keyExtractor(option)
+  )) });
 };
 
 export { AutocompleteOptions };

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

@@ -3,7 +3,11 @@ import { useState } from 'react';
 import { Popover } from '../Popover/index.js';
 import { AutocompleteContext } from './context.js';
 
-const AutocompleteRoot = ({ children }) => {
+const AutocompleteRoot = ({
+  keyExtractor,
+  labelExtractor,
+  children
+}) => {
   const [triggerWidth, setTriggerWidth] = useState();
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx(
@@ -13,7 +17,9 @@ const AutocompleteRoot = ({ children }) => {
         open,
         setOpen,
         triggerWidth,
-        setTriggerWidth
+        setTriggerWidth,
+        keyExtractor,
+        labelExtractor
       },
       children: /* @__PURE__ */ jsx(
         Popover.Root,

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

@@ -30,17 +30,16 @@ const AutocompleteTrigger = ({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsx(
     Input.Root,
     {
       label: label ?? "Selecione uma op\xE7\xE3o",
       value: inputValue,
       onChange: handleChange,
       disabled,
-      placeholder,
-      ref: triggerRef
+      placeholder
     }
-  ) });
+  ) }) });
 };
 
 export { AutocompleteTrigger };

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

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

package/dist/esm/components/PhoneInput/FlagIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Flags from 'country-flag-icons/react/3x2';
+
+const FlagIcon = ({
+  countryCode,
+  className = "w-[25px]",
+  title
+}) => {
+  if (!countryCode) return null;
+  const upperCode = countryCode.toUpperCase();
+  const FlagComponent = Flags[upperCode];
+  if (!FlagComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    FlagComponent,
+    {
+      className,
+      title: title || upperCode,
+      "aria-label": `Flag of ${upperCode}`
+    }
+  );
+};
+
+export { FlagIcon };

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

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const PhoneInputOption = ({
+  country,
+  handleSelectCountry,
+  disableClick = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
+      onClick: () => {
+        handleSelectCountry(country);
+      },
+      disabled: disableClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: country?.name }),
+        /* @__PURE__ */ jsxs("span", { className: "text-secondary-light text-sm", children: [
+          "+",
+          country?.dialCode
+        ] })
+      ]
+    }
+  );
+};
+
+export { PhoneInputOption };

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

@@ -0,0 +1,119 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Divider } from '../Divider.js';
+import { usePhoneContext } from './context.js';
+import { PhoneInputOption } from './Option.js';
+import 'clsx';
+import '../Accordion/context.js';
+import 'react-icons/lia';
+import '@internationalized/date';
+import '../Badge.js';
+import 'react-icons/md';
+import '@tecsinapse/cortex-core';
+import 'react-aria';
+import 'react-stately';
+import '../../provider/MenubarContext.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/CalendarProvider.js';
+import '../../provider/ManagerContext.js';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import '../Calendar/CalendarCell.js';
+import 'react-icons/fa';
+import 'react-icons/io';
+import 'embla-carousel-react';
+import 'embla-carousel-autoplay';
+import '../ColorPicker.js';
+import '../DatePicker/DateSegment.js';
+import '../DatePicker/DatePickerInputBase.js';
+import '../GroupButton.js';
+import { Input } from '../Input/index.js';
+import '../Menubar/Left.js';
+import '../../styles/menubar.js';
+import '../Menubar/Right.js';
+import '../Menubar/Dropdown.js';
+import '../Menubar/MostUsed.js';
+import '../Menubar/MostUsedItem.js';
+import '../Menubar/Header.js';
+import '../Menubar/Item.js';
+import '../../provider/CategoriesContext.js';
+import '../Menubar/SubItem.js';
+import '../ProgressBar/Progress.js';
+import '../RadioButton.js';
+import '../Select/GroupedOptions.js';
+import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
+import '../Select/Trigger.js';
+import '../../styles/stepNodeVariants.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
+import '../TimePicker/TimeFieldInput.js';
+import '../Tooltip.js';
+import 'react-icons/hi2';
+import 'react-icons/fa6';
+import 'react-dom';
+import 'react-icons/io5';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
+import { defaultCountries, parseCountry } from 'react-international-phone';
+import 'country-flag-icons/react/3x2';
+
+const countries = defaultCountries.map((c) => {
+  return parseCountry(c);
+});
+const PhoneInputOptions = ({
+  hasSearch = true
+}) => {
+  const { country, setCountry, setIsOpen } = usePhoneContext();
+  const [searchText, setSearchText] = useState("");
+  const filteredCountries = useMemo(() => {
+    return countries.filter(
+      (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
+    );
+  }, [country, searchText]);
+  const handleSelect = (country2) => {
+    setCountry?.(country2.iso2);
+    setIsOpen?.(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
+    hasSearch ? /* @__PURE__ */ jsx(
+      Input.Search,
+      {
+        onChange: (e) => setSearchText(e.target.value),
+        variants: { className: "mx-deca my-centi outline-none" }
+      }
+    ) : null,
+    country ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        PhoneInputOption,
+        {
+          country,
+          handleSelectCountry: handleSelect,
+          disableClick: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }) : null,
+    filteredCountries.map((country2) => {
+      return /* @__PURE__ */ jsx(
+        PhoneInputOption,
+        {
+          country: country2,
+          handleSelectCountry: handleSelect
+        },
+        `${country2.dialCode} ${country2.iso2}`
+      );
+    })
+  ] });
+};
+
+export { PhoneInputOptions };

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

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { FloatingPortal } from '@floating-ui/react';
+import { Popover } from '../Popover/index.js';
+import { usePhoneContext } from './context.js';
+
+const PhoneInputPopover = ({ children }) => {
+  const { triggerWidth } = usePhoneContext();
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      children
+    }
+  ) });
+};
+
+export { PhoneInputPopover };

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

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Popover } from '../Popover/index.js';
+import clsx from 'clsx';
+import { usePhoneInput, defaultCountries } from 'react-international-phone';
+import { PhoneInputContext } from './context.js';
+
+const PhoneInputRoot = ({
+  children,
+  className,
+  onChange,
+  ...rest
+}) => {
+  const [triggerWidth, setTriggerWidth] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    country,
+    handlePhoneValueChange,
+    inputRef,
+    inputValue,
+    phone,
+    setCountry
+  } = usePhoneInput({
+    countries: defaultCountries,
+    onChange: ({ phone: phone2, ...rest2 }) => {
+      onChange?.(phone2, { ...rest2 });
+    },
+    ...rest
+  });
+  return /* @__PURE__ */ jsx(
+    Popover.Root,
+    {
+      placement: "bottom-start",
+      controlled: true,
+      isOpen,
+      setIsOpen,
+      children: /* @__PURE__ */ jsx(
+        PhoneInputContext.Provider,
+        {
+          value: {
+            triggerWidth,
+            setTriggerWidth,
+            isOpen,
+            setIsOpen,
+            country,
+            setCountry,
+            handlePhoneValueChange,
+            inputValue,
+            phone,
+            inputRef
+          },
+          children: /* @__PURE__ */ jsx("div", { className: clsx("relative w-full h-full", className), children })
+        }
+      )
+    }
+  );
+};
+
+export { PhoneInputRoot };

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

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { IoChevronDown } from 'react-icons/io5';
+import 'clsx';
+import { useRef, useEffect } from 'react';
+import '../Accordion/context.js';
+import 'react-icons/lia';
+import '@internationalized/date';
+import '../Badge.js';
+import 'react-icons/md';
+import '@tecsinapse/cortex-core';
+import 'react-aria';
+import 'react-stately';
+import '../../provider/MenubarContext.js';
+import '../../provider/SnackbarProvider.js';
+import '../../provider/CalendarProvider.js';
+import '../../provider/ManagerContext.js';
+import '../Popover/Context.js';
+import 'react-dropzone';
+import 'uuid';
+import '@floating-ui/react';
+import 'currency.js';
+import '../Calendar/CalendarCell.js';
+import 'react-icons/fa';
+import 'react-icons/io';
+import 'embla-carousel-react';
+import 'embla-carousel-autoplay';
+import '../ColorPicker.js';
+import '../DatePicker/DateSegment.js';
+import { Popover } from '../Popover/index.js';
+import '../DatePicker/DatePickerInputBase.js';
+import '../GroupButton.js';
+import { Input } from '../Input/index.js';
+import '../Menubar/Left.js';
+import '../../styles/menubar.js';
+import '../Menubar/Right.js';
+import '../Menubar/Dropdown.js';
+import '../Menubar/MostUsed.js';
+import '../Menubar/MostUsedItem.js';
+import '../Menubar/Header.js';
+import '../Menubar/Item.js';
+import '../../provider/CategoriesContext.js';
+import '../Menubar/SubItem.js';
+import '../ProgressBar/Progress.js';
+import '../RadioButton.js';
+import '../Select/GroupedOptions.js';
+import '../Select/context.js';
+import '../Select/MultiGroupedOptions.js';
+import '../Select/MultiOptions.js';
+import '../Select/Options.js';
+import '../Select/Trigger.js';
+import '../../styles/stepNodeVariants.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
+import '../TimePicker/TimeFieldInput.js';
+import '../Tooltip.js';
+import 'react-icons/hi2';
+import 'react-icons/fa6';
+import 'react-dom';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
+import './Options.js';
+import { usePhoneContext } from './context.js';
+import 'react-international-phone';
+import { FlagIcon } from './FlagIcon.js';
+
+const PhoneInputTrigger = ({
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  const {
+    setIsOpen,
+    setTriggerWidth,
+    country,
+    handlePhoneValueChange,
+    inputValue
+  } = usePhoneContext();
+  const triggerRef = useRef(null);
+  useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs(Input.Face, { ref: triggerRef, children: [
+    /* @__PURE__ */ jsx(
+      Input.Box,
+      {
+        value: inputValue,
+        onChange: handlePhoneValueChange,
+        label: label ?? "Insert a phone number",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(Input.Right, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-1 cursor-pointer w-full",
+        onClick: () => setIsOpen?.(true),
+        children: [
+          country ? /* @__PURE__ */ jsx(FlagIcon, { countryCode: country.iso2, className: "w-[25px]" }) : null,
+          /* @__PURE__ */ jsx(IoChevronDown, { className: "h-full text-md" })
+        ]
+      }
+    ) })
+  ] }) });
+};
+
+export { PhoneInputTrigger };

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

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+const PhoneInputContext = createContext(
+  null
+);
+const usePhoneContext = () => {
+  const context = useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error(
+      "usePhoneInputContext must be used within a usePhoneInputProvider"
+    );
+  }
+  return context;
+};
+
+export { PhoneInputContext, usePhoneContext };

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

@@ -0,0 +1,15 @@
+import { PhoneInputOption } from './Option.js';
+import { PhoneInputOptions } from './Options.js';
+import { PhoneInputPopover } from './Popover.js';
+import { PhoneInputRoot } from './Root.js';
+import { PhoneInputTrigger } from './Trigger.js';
+
+const PhoneInput = {
+  Root: PhoneInputRoot,
+  Popover: PhoneInputPopover,
+  Trigger: PhoneInputTrigger,
+  Option: PhoneInputOption,
+  Options: PhoneInputOptions
+};
+
+export { PhoneInput };

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 };