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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/components/PhoneInput/Option.js +3 -4
  2. package/dist/cjs/components/PhoneInput/Options.js +12 -4
  3. package/dist/cjs/components/PhoneInput/Root.js +3 -1
  4. package/dist/cjs/components/PhoneInput/Trigger.js +27 -34
  5. package/dist/esm/components/PhoneInput/Option.js +3 -4
  6. package/dist/esm/components/PhoneInput/Options.js +12 -4
  7. package/dist/esm/components/PhoneInput/Root.js +3 -1
  8. package/dist/esm/components/PhoneInput/Trigger.js +27 -34
  9. package/dist/types/components/PhoneInput/Options.d.ts +3 -1
  10. package/dist/types/components/PhoneInput/Root.d.ts +1 -2
  11. package/dist/types/components/PhoneInput/index.d.ts +4 -3
  12. package/package.json +2 -2
package/dist/cjs/components/PhoneInput/Option.js CHANGED
@@ -8,14 +8,13 @@ const PhoneInputOption = ({
8
8
  disableClick = false
9
9
  }) => {
10
10
  return /* @__PURE__ */ jsxRuntime.jsxs(
11
- "div",
11
+ "button",
12
12
  {
13
13
  className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100",
14
14
  onClick: () => {
15
- if (!disableClick) {
16
- handleSelectCountry(country);
17
- }
15
+ handleSelectCountry(country);
18
16
  },
17
+ disabled: disableClick,
19
18
  children: [
20
19
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
21
20
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400 text-sm", children: [
package/dist/cjs/components/PhoneInput/Options.js CHANGED
@@ -68,20 +68,28 @@ var reactInternationalPhone = require('react-international-phone');
68
68
  const countries = reactInternationalPhone.defaultCountries.map((c) => {
69
69
  return reactInternationalPhone.parseCountry(c);
70
70
  });
71
- const PhoneInputOptions = () => {
71
+ const PhoneInputOptions = ({
72
+ hasSearch = true
73
+ }) => {
72
74
  const { country, setCountry, setIsOpen } = context.usePhoneContext();
73
75
  const [searchText, setSearchText] = React.useState("");
74
76
  const filteredCountries = React.useMemo(() => {
75
77
  return countries.filter(
76
- (c) => c.iso2 !== country?.iso2 && c.name.includes(searchText)
78
+ (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
77
79
  );
78
- }, [country]);
80
+ }, [country, searchText]);
79
81
  const handleSelect = (country2) => {
80
82
  setCountry?.(country2.iso2);
81
83
  setIsOpen?.(false);
82
84
  };
83
85
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
84
- /* @__PURE__ */ jsxRuntime.jsx(index.Input.Search, { onChange: (e) => setSearchText(e.target.value) }),
86
+ hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
87
+ index.Input.Search,
88
+ {
89
+ onChange: (e) => setSearchText(e.target.value),
90
+ variants: { className: "mx-deca my-centi outline-none" }
91
+ }
92
+ ) : null,
85
93
  country ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
86
94
  /* @__PURE__ */ jsxRuntime.jsx(
87
95
  Option.PhoneInputOption,
package/dist/cjs/components/PhoneInput/Root.js CHANGED
@@ -25,7 +25,9 @@ const PhoneInputRoot = ({
25
25
  setCountry
26
26
  } = reactInternationalPhone.usePhoneInput({
27
27
  countries: reactInternationalPhone.defaultCountries,
28
- onChange,
28
+ onChange: ({ phone: phone2, ...rest }) => {
29
+ onChange?.(phone2, { ...rest });
30
+ },
29
31
  defaultCountry,
30
32
  value
31
33
  });
package/dist/cjs/components/PhoneInput/Trigger.js CHANGED
@@ -83,40 +83,33 @@ const PhoneInputTrigger = ({
83
83
  setTriggerWidth(width);
84
84
  }
85
85
  }, [triggerRef.current, setTriggerWidth]);
86
- return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
87
- index$1.Input.Face,
88
- {
89
- variants: { className: "outline-none border-1" },
90
- ref: triggerRef,
91
- children: [
92
- /* @__PURE__ */ jsxRuntime.jsx(
93
- index$1.Input.Box,
94
- {
95
- value: inputValue,
96
- onChange: handlePhoneValueChange,
97
- placeholder: label
98
- }
99
- ),
100
- /* @__PURE__ */ jsxRuntime.jsx(index$1.Input.Right, { children: /* @__PURE__ */ jsxRuntime.jsxs(
101
- "div",
102
- {
103
- className: "flex items-center gap-1 cursor-pointer w-full",
104
- onClick: () => setIsOpen?.(true),
105
- children: [
106
- country ? /* @__PURE__ */ jsxRuntime.jsx(
107
- "img",
108
- {
109
- src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
110
- className: "w-[25px]"
111
- }
112
- ) : null,
113
- /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, { className: "h-full text-md" })
114
- ]
115
- }
116
- ) })
117
- ]
118
- }
119
- ) });
86
+ return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Input.Face, { ref: triggerRef, children: [
87
+ /* @__PURE__ */ jsxRuntime.jsx(
88
+ index$1.Input.Box,
89
+ {
90
+ value: inputValue,
91
+ onChange: handlePhoneValueChange,
92
+ label: label ?? "Insert a phone number"
93
+ }
94
+ ),
95
+ /* @__PURE__ */ jsxRuntime.jsx(index$1.Input.Right, { children: /* @__PURE__ */ jsxRuntime.jsxs(
96
+ "div",
97
+ {
98
+ className: "flex items-center gap-1 cursor-pointer w-full",
99
+ onClick: () => setIsOpen?.(true),
100
+ children: [
101
+ country ? /* @__PURE__ */ jsxRuntime.jsx(
102
+ "img",
103
+ {
104
+ src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
105
+ className: "w-[25px]"
106
+ }
107
+ ) : null,
108
+ /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, { className: "h-full text-md" })
109
+ ]
110
+ }
111
+ ) })
112
+ ] }) });
120
113
  };
121
114
 
122
115
  exports.PhoneInputTrigger = PhoneInputTrigger;
package/dist/esm/components/PhoneInput/Option.js CHANGED
@@ -6,14 +6,13 @@ const PhoneInputOption = ({
6
6
  disableClick = false
7
7
  }) => {
8
8
  return /* @__PURE__ */ jsxs(
9
- "div",
9
+ "button",
10
10
  {
11
11
  className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100",
12
12
  onClick: () => {
13
- if (!disableClick) {
14
- handleSelectCountry(country);
15
- }
13
+ handleSelectCountry(country);
16
14
  },
15
+ disabled: disableClick,
17
16
  children: [
18
17
  /* @__PURE__ */ jsx("span", { children: country?.name }),
19
18
  /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-sm", children: [
package/dist/esm/components/PhoneInput/Options.js CHANGED
@@ -66,20 +66,28 @@ import { defaultCountries, parseCountry } from 'react-international-phone';
66
66
  const countries = defaultCountries.map((c) => {
67
67
  return parseCountry(c);
68
68
  });
69
- const PhoneInputOptions = () => {
69
+ const PhoneInputOptions = ({
70
+ hasSearch = true
71
+ }) => {
70
72
  const { country, setCountry, setIsOpen } = usePhoneContext();
71
73
  const [searchText, setSearchText] = useState("");
72
74
  const filteredCountries = useMemo(() => {
73
75
  return countries.filter(
74
- (c) => c.iso2 !== country?.iso2 && c.name.includes(searchText)
76
+ (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
75
77
  );
76
- }, [country]);
78
+ }, [country, searchText]);
77
79
  const handleSelect = (country2) => {
78
80
  setCountry?.(country2.iso2);
79
81
  setIsOpen?.(false);
80
82
  };
81
83
  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
82
- /* @__PURE__ */ jsx(Input.Search, { onChange: (e) => setSearchText(e.target.value) }),
84
+ hasSearch ? /* @__PURE__ */ jsx(
85
+ Input.Search,
86
+ {
87
+ onChange: (e) => setSearchText(e.target.value),
88
+ variants: { className: "mx-deca my-centi outline-none" }
89
+ }
90
+ ) : null,
83
91
  country ? /* @__PURE__ */ jsxs(Fragment, { children: [
84
92
  /* @__PURE__ */ jsx(
85
93
  PhoneInputOption,
package/dist/esm/components/PhoneInput/Root.js CHANGED
@@ -23,7 +23,9 @@ const PhoneInputRoot = ({
23
23
  setCountry
24
24
  } = usePhoneInput({
25
25
  countries: defaultCountries,
26
- onChange,
26
+ onChange: ({ phone: phone2, ...rest }) => {
27
+ onChange?.(phone2, { ...rest });
28
+ },
27
29
  defaultCountry,
28
30
  value
29
31
  });
package/dist/esm/components/PhoneInput/Trigger.js CHANGED
@@ -81,40 +81,33 @@ const PhoneInputTrigger = ({
81
81
  setTriggerWidth(width);
82
82
  }
83
83
  }, [triggerRef.current, setTriggerWidth]);
84
- return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs(
85
- Input.Face,
86
- {
87
- variants: { className: "outline-none border-1" },
88
- ref: triggerRef,
89
- children: [
90
- /* @__PURE__ */ jsx(
91
- Input.Box,
92
- {
93
- value: inputValue,
94
- onChange: handlePhoneValueChange,
95
- placeholder: label
96
- }
97
- ),
98
- /* @__PURE__ */ jsx(Input.Right, { children: /* @__PURE__ */ jsxs(
99
- "div",
100
- {
101
- className: "flex items-center gap-1 cursor-pointer w-full",
102
- onClick: () => setIsOpen?.(true),
103
- children: [
104
- country ? /* @__PURE__ */ jsx(
105
- "img",
106
- {
107
- src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
108
- className: "w-[25px]"
109
- }
110
- ) : null,
111
- /* @__PURE__ */ jsx(IoChevronDown, { className: "h-full text-md" })
112
- ]
113
- }
114
- ) })
115
- ]
116
- }
117
- ) });
84
+ return /* @__PURE__ */ jsx(Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxs(Input.Face, { ref: triggerRef, children: [
85
+ /* @__PURE__ */ jsx(
86
+ Input.Box,
87
+ {
88
+ value: inputValue,
89
+ onChange: handlePhoneValueChange,
90
+ label: label ?? "Insert a phone number"
91
+ }
92
+ ),
93
+ /* @__PURE__ */ jsx(Input.Right, { children: /* @__PURE__ */ jsxs(
94
+ "div",
95
+ {
96
+ className: "flex items-center gap-1 cursor-pointer w-full",
97
+ onClick: () => setIsOpen?.(true),
98
+ children: [
99
+ country ? /* @__PURE__ */ jsx(
100
+ "img",
101
+ {
102
+ src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
103
+ className: "w-[25px]"
104
+ }
105
+ ) : null,
106
+ /* @__PURE__ */ jsx(IoChevronDown, { className: "h-full text-md" })
107
+ ]
108
+ }
109
+ ) })
110
+ ] }) });
118
111
  };
119
112
 
120
113
  export { PhoneInputTrigger };
package/dist/types/components/PhoneInput/Options.d.ts CHANGED
@@ -1 +1,3 @@
1
- export declare const PhoneInputOptions: () => import("react/jsx-runtime").JSX.Element;
1
+ export declare const PhoneInputOptions: ({ hasSearch, }: {
2
+ hasSearch?: boolean;
3
+ }) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/PhoneInput/Root.d.ts CHANGED
@@ -3,8 +3,7 @@ import { ParsedCountry, CountryIso2 } from 'react-international-phone';
3
3
  export declare const PhoneInputRoot: ({ children, className, defaultCountry, value, onChange, }: {
4
4
  children: ReactNode;
5
5
  value?: string;
6
- onChange?: (data: {
7
- phone: string;
6
+ onChange?: (value: string, rest: {
8
7
  inputValue: string;
9
8
  country: ParsedCountry;
10
9
  }) => void;
package/dist/types/components/PhoneInput/index.d.ts CHANGED
@@ -2,8 +2,7 @@ export declare const PhoneInput: {
2
2
  Root: ({ children, className, defaultCountry, value, onChange, }: {
3
3
  children: import("react").ReactNode;
4
4
  value?: string;
5
- onChange?: (data: {
6
- phone: string;
5
+ onChange?: (value: string, rest: {
7
6
  inputValue: string;
8
7
  country: import("react-international-phone").ParsedCountry;
9
8
  }) => void;
@@ -22,5 +21,7 @@ export declare const PhoneInput: {
22
21
  handleSelectCountry: (country: import("react-international-phone").ParsedCountry) => void;
23
22
  disableClick?: boolean;
24
23
  }) => import("react/jsx-runtime").JSX.Element;
25
- Options: () => import("react/jsx-runtime").JSX.Element;
24
+ Options: ({ hasSearch, }: {
25
+ hasSearch?: boolean;
26
+ }) => import("react/jsx-runtime").JSX.Element;
26
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tecsinapse/cortex-react",
3
- "version": "2.1.0-beta.2",
3
+ "version": "2.1.0-beta.4",
4
4
  "description": "React components based in @tecsinapse/cortex-core",
5
5
  "license": "MIT",
6
6
  "main": "dist/esm/index.js",
@@ -49,5 +49,5 @@
49
49
  "react-icons": ">=5.2.0",
50
50
  "tailwindcss": "^4.1.16"
51
51
  },
52
- "gitHead": "36974495059d2d5bba9fdaf2ef46a82eb44bfeb4"
52
+ "gitHead": "a72a848da442227f7e1149ebad300d5e015c4ca5"
53
53
  }