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

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

@@ -25,7 +25,9 @@ const PhoneInputRoot = ({
     setCountry
   } = reactInternationalPhone.usePhoneInput({
     countries: reactInternationalPhone.defaultCountries,
-    onChange,
+    onChange: ({ phone: phone2, ...rest }) => {
+      onChange?.(phone2, { ...rest });
+    },
     defaultCountry,
     value
   });

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

@@ -89,7 +89,7 @@ const PhoneInputTrigger = ({
       {
         value: inputValue,
         onChange: handlePhoneValueChange,
-        placeholder: label
+        label: label ?? "Insert a phone number"
       }
     ),
     /* @__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

@@ -23,7 +23,9 @@ const PhoneInputRoot = ({
     setCountry
   } = usePhoneInput({
     countries: defaultCountries,
-    onChange,
+    onChange: ({ phone: phone2, ...rest }) => {
+      onChange?.(phone2, { ...rest });
+    },
     defaultCountry,
     value
   });

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

@@ -87,7 +87,7 @@ const PhoneInputTrigger = ({
       {
         value: inputValue,
         onChange: handlePhoneValueChange,
-        placeholder: label
+        label: label ?? "Insert a phone number"
       }
     ),
     /* @__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

@@ -3,8 +3,7 @@ import { ParsedCountry, CountryIso2 } from 'react-international-phone';
 export declare const PhoneInputRoot: ({ children, className, defaultCountry, value, onChange, }: {
     children: ReactNode;
     value?: string;
-    onChange?: (data: {
-        phone: string;
+    onChange?: (value: string, rest: {
         inputValue: string;
         country: ParsedCountry;
     }) => void;

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

@@ -2,8 +2,7 @@ export declare const PhoneInput: {
     Root: ({ children, className, defaultCountry, value, onChange, }: {
         children: import("react").ReactNode;
         value?: string;
-        onChange?: (data: {
-            phone: string;
+        onChange?: (value: string, rest: {
             inputValue: string;
             country: import("react-international-phone").ParsedCountry;
         }) => void;
@@ -22,5 +21,7 @@ export declare const PhoneInput: {
         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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.4",
   "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": "a72a848da442227f7e1149ebad300d5e015c4ca5"
 }