@tecsinapse/cortex-react 2.1.0-beta.3 → 2.1.0-beta.5

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

@@ -8,14 +8,13 @@ const PhoneInputOption = ({
   disableClick = false
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    "button",
     {
       className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100",
       onClick: () => {
-        if (!disableClick) {
-          handleSelectCountry(country);
-        }
+        handleSelectCountry(country);
       },
+      disabled: disableClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400 text-sm", children: [

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

@@ -68,20 +68,28 @@ var reactInternationalPhone = require('react-international-phone');
 const countries = reactInternationalPhone.defaultCountries.map((c) => {
   return reactInternationalPhone.parseCountry(c);
 });
-const PhoneInputOptions = () => {
+const PhoneInputOptions = ({
+  hasSearch = true
+}) => {
   const { country, setCountry, setIsOpen } = context.usePhoneContext();
   const [searchText, setSearchText] = React.useState("");
   const filteredCountries = React.useMemo(() => {
     return countries.filter(
-      (c) => c.iso2 !== country?.iso2 && c.name.includes(searchText)
+      (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
     );
-  }, [country]);
+  }, [country, searchText]);
   const handleSelect = (country2) => {
     setCountry?.(country2.iso2);
     setIsOpen?.(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Input.Search, { onChange: (e) => setSearchText(e.target.value) }),
+    hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
+      index.Input.Search,
+      {
+        onChange: (e) => setSearchText(e.target.value),
+        variants: { className: "mx-deca my-centi outline-none" }
+      }
+    ) : null,
     country ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Option.PhoneInputOption,

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

@@ -10,9 +10,8 @@ var context = require('./context.js');
 const PhoneInputRoot = ({
   children,
   className,
-  defaultCountry,
-  value,
-  onChange
+  onChange,
+  ...rest
 }) => {
   const [triggerWidth, setTriggerWidth] = React.useState();
   const [isOpen, setIsOpen] = React.useState(false);
@@ -25,9 +24,10 @@ const PhoneInputRoot = ({
     setCountry
   } = reactInternationalPhone.usePhoneInput({
     countries: reactInternationalPhone.defaultCountries,
-    onChange,
-    defaultCountry,
-    value
+    onChange: ({ phone: phone2, ...rest2 }) => {
+      onChange?.(phone2, { ...rest2 });
+    },
+    ...rest
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Root,

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

@@ -67,7 +67,8 @@ require('react-international-phone');
 
 const PhoneInputTrigger = ({
   disabled = false,
-  label
+  label,
+  ...rest
 }) => {
   const {
     setIsOpen,
@@ -89,7 +90,8 @@ const PhoneInputTrigger = ({
       {
         value: inputValue,
         onChange: handlePhoneValueChange,
-        placeholder: label
+        label: label ?? "Insert a phone number",
+        ...rest
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(index$1.Input.Right, { children: /* @__PURE__ */ jsxRuntime.jsxs(

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

@@ -6,14 +6,13 @@ const PhoneInputOption = ({
   disableClick = false
 }) => {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
       className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100",
       onClick: () => {
-        if (!disableClick) {
-          handleSelectCountry(country);
-        }
+        handleSelectCountry(country);
       },
+      disabled: disableClick,
       children: [
         /* @__PURE__ */ jsx("span", { children: country?.name }),
         /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-sm", children: [

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

@@ -66,20 +66,28 @@ import { defaultCountries, parseCountry } from 'react-international-phone';
 const countries = defaultCountries.map((c) => {
   return parseCountry(c);
 });
-const PhoneInputOptions = () => {
+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.includes(searchText)
+      (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
     );
-  }, [country]);
+  }, [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: [
-    /* @__PURE__ */ jsx(Input.Search, { onChange: (e) => setSearchText(e.target.value) }),
+    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,

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

@@ -8,9 +8,8 @@ import { PhoneInputContext } from './context.js';
 const PhoneInputRoot = ({
   children,
   className,
-  defaultCountry,
-  value,
-  onChange
+  onChange,
+  ...rest
 }) => {
   const [triggerWidth, setTriggerWidth] = useState();
   const [isOpen, setIsOpen] = useState(false);
@@ -23,9 +22,10 @@ const PhoneInputRoot = ({
     setCountry
   } = usePhoneInput({
     countries: defaultCountries,
-    onChange,
-    defaultCountry,
-    value
+    onChange: ({ phone: phone2, ...rest2 }) => {
+      onChange?.(phone2, { ...rest2 });
+    },
+    ...rest
   });
   return /* @__PURE__ */ jsx(
     Popover.Root,

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

@@ -65,7 +65,8 @@ import 'react-international-phone';
 
 const PhoneInputTrigger = ({
   disabled = false,
-  label
+  label,
+  ...rest
 }) => {
   const {
     setIsOpen,
@@ -87,7 +88,8 @@ const PhoneInputTrigger = ({
       {
         value: inputValue,
         onChange: handlePhoneValueChange,
-        placeholder: label
+        label: label ?? "Insert a phone number",
+        ...rest
       }
     ),
     /* @__PURE__ */ jsx(Input.Right, { children: /* @__PURE__ */ jsxs(

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

@@ -1 +1,3 @@
-export declare const PhoneInputOptions: () => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneInputOptions: ({ hasSearch, }: {
+    hasSearch?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,2 @@
-import { ReactNode } from 'react';
-import { ParsedCountry, CountryIso2 } from 'react-international-phone';
-export declare const PhoneInputRoot: ({ children, className, defaultCountry, value, onChange, }: {
-    children: ReactNode;
-    value?: string;
-    onChange?: (data: {
-        phone: string;
-        inputValue: string;
-        country: ParsedCountry;
-    }) => void;
-    className?: string;
-    defaultCountry?: CountryIso2;
-}) => import("react/jsx-runtime").JSX.Element;
+import { PhoneInputRootProps } from './types';
+export declare const PhoneInputRoot: ({ children, className, onChange, ...rest }: PhoneInputRootProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,2 @@
-export declare const PhoneInputTrigger: ({ disabled, label, }: {
-    disabled?: boolean;
-    label?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+import { PhoneInputTriggerProps } from './types';
+export declare const PhoneInputTrigger: ({ disabled, label, ...rest }: PhoneInputTriggerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,16 @@
 export declare const PhoneInput: {
-    Root: ({ children, className, defaultCountry, value, onChange, }: {
-        children: import("react").ReactNode;
-        value?: string;
-        onChange?: (data: {
-            phone: string;
-            inputValue: string;
-            country: import("react-international-phone").ParsedCountry;
-        }) => void;
-        className?: string;
-        defaultCountry?: import("react-international-phone").CountryIso2;
-    }) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, onChange, ...rest }: import("./types").PhoneInputRootProps) => import("react/jsx-runtime").JSX.Element;
     Popover: ({ children }: {
         children: import("react").ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ disabled, label, }: {
-        disabled?: boolean;
-        label?: string;
-    }) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ disabled, label, ...rest }: import("./types").PhoneInputTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Option: ({ country, handleSelectCountry, disableClick, }: {
         country: import("react-international-phone").ParsedCountry;
         handleSelectCountry: (country: import("react-international-phone").ParsedCountry) => void;
         disableClick?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
-    Options: () => import("react/jsx-runtime").JSX.Element;
+    Options: ({ hasSearch, }: {
+        hasSearch?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
+export * from './types';

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

@@ -0,0 +1,13 @@
+import { ParsedCountry, UsePhoneInputConfig } from 'react-international-phone';
+import { InputPropsBase } from '../Input';
+import { ReactNode } from 'react';
+export interface PhoneInputTriggerProps extends React.InputHTMLAttributes<HTMLInputElement>, InputPropsBase {
+}
+export interface PhoneInputRootProps extends Omit<UsePhoneInputConfig, 'onChange'> {
+    children: ReactNode;
+    className?: string;
+    onChange?: (value: string, rest: {
+        inputValue: string;
+        country: ParsedCountry;
+    }) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.5",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -49,5 +49,5 @@
     "react-icons": ">=5.2.0",
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "8af4d198dc4eafe396d13b27b805bef0f2b59625"
+  "gitHead": "56ae580d1fcdbfec243b25fa743438398b1883d9"
 }