@gympass/yoga 7.127.4 → 7.128.0

package/cjs/Input/web/Phone.js

@@ -97,6 +97,7 @@ const Phone = import_react.default.forwardRef(
       label = "",
       placeholder = "+55 (11) 999999999",
       value = "",
+      countries = phoneBaseSettings.onlyCountries,
       onChange = noop,
       cleanable = true
     } = _b, rest = __objRest(_b, [
@@ -109,6 +110,7 @@ const Phone = import_react.default.forwardRef(
       "label",
       "placeholder",
       "value",
+      "countries",
       "onChange",
       "cleanable"
     ]);
@@ -120,6 +122,9 @@ const Phone = import_react.default.forwardRef(
         currentCountry.current = countryCode;
       }
     }, []);
+    const availableCountries = {
+      onlyCountries: (countries == null ? void 0 : countries.length) > 0 ? countries : phoneBaseSettings.onlyCountries
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Input.default,
       __spreadProps(__spreadValues({}, __spreadValues({
@@ -136,7 +141,7 @@ const Phone = import_react.default.forwardRef(
         onClean: (phoneNumber) => onChange(phoneNumber),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(S.Container, { error, disabled, full, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_react_phone_input_2.default,
-          __spreadProps(__spreadValues({}, phoneBaseSettings), {
+          __spreadProps(__spreadValues({}, availableCountries), {
             ref: (phoneRef) => {
               inputRef.current = phoneRef == null ? void 0 : phoneRef.numberInputRef;
             },
@@ -180,6 +185,8 @@ Phone.propTypes = {
   /** callback invoked when value changes, either by typing of selecting a country */
   onChange: import_prop_types.func,
   /** placeholder to show when the input is cleared */
-  placeholder: import_prop_types.string
+  placeholder: import_prop_types.string,
+  /** countries for mask field and dropdown, make sure to use ISO 3166-1 alpha-2 lowercase */
+  countries: import_prop_types.default.arrayOf(import_prop_types.string)
 };
 var Phone_default = Phone;

package/cjs/Input/web/Phone.test.js

@@ -98,6 +98,21 @@ describe("<Input.Phone />", () => {
         expect(getByDisplayValue(spec.expected)).toBeInTheDocument();
       });
     });
+    it(`Should only format and show countries numbers when props is given`, () => {
+      const USPhone = numbersFormats[1];
+      const { queryByDisplayValue } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Phone, { countries: ["br", "pt"], value: USPhone.base }) })
+      );
+      expect(queryByDisplayValue(USPhone.expected)).not.toBeInTheDocument();
+    });
+    it(`Should return all countries validation if countries equals to empty array`, () => {
+      const USPhone = numbersFormats[1];
+      const { getAllByRole } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Phone, { countries: [], value: USPhone.base }) })
+      );
+      import_react2.fireEvent.click(getAllByRole("button")[0]);
+      expect(getAllByRole("option").length).toBe(12);
+    });
     it("should prefix the phone number with newly selected country dial code", () => __async(exports, null, function* () {
       const { getByRole, getByText, getByDisplayValue } = (0, import_react2.render)(
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Phone, { defaultCountry: "us" }) })

package/esm/Input/web/Phone.js

@@ -66,6 +66,7 @@ const Phone = React.forwardRef(
       label = "",
       placeholder = "+55 (11) 999999999",
       value = "",
+      countries = phoneBaseSettings.onlyCountries,
       onChange = noop,
       cleanable = true
     } = _b, rest = __objRest(_b, [
@@ -78,6 +79,7 @@ const Phone = React.forwardRef(
       "label",
       "placeholder",
       "value",
+      "countries",
       "onChange",
       "cleanable"
     ]);
@@ -89,6 +91,9 @@ const Phone = React.forwardRef(
         currentCountry.current = countryCode;
       }
     }, []);
+    const availableCountries = {
+      onlyCountries: (countries == null ? void 0 : countries.length) > 0 ? countries : phoneBaseSettings.onlyCountries
+    };
     return /* @__PURE__ */ jsx(
       Input,
       __spreadProps(__spreadValues({}, __spreadValues({
@@ -105,7 +110,7 @@ const Phone = React.forwardRef(
         onClean: (phoneNumber) => onChange(phoneNumber),
         children: /* @__PURE__ */ jsx(S.Container, { error, disabled, full, children: /* @__PURE__ */ jsx(
           BasePhoneInput,
-          __spreadProps(__spreadValues({}, phoneBaseSettings), {
+          __spreadProps(__spreadValues({}, availableCountries), {
             ref: (phoneRef) => {
               inputRef.current = phoneRef == null ? void 0 : phoneRef.numberInputRef;
             },
@@ -149,7 +154,9 @@ Phone.propTypes = {
   /** callback invoked when value changes, either by typing of selecting a country */
   onChange: func,
   /** placeholder to show when the input is cleared */
-  placeholder: string
+  placeholder: string,
+  /** countries for mask field and dropdown, make sure to use ISO 3166-1 alpha-2 lowercase */
+  countries: PropTypes.arrayOf(string)
 };
 var Phone_default = Phone;
 export {

package/esm/Input/web/Phone.test.js

@@ -81,6 +81,21 @@ var require_Phone_test = __commonJS({
             expect(getByDisplayValue(spec.expected)).toBeInTheDocument();
           });
         });
+        it(`Should only format and show countries numbers when props is given`, () => {
+          const USPhone = numbersFormats[1];
+          const { queryByDisplayValue } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Phone, { countries: ["br", "pt"], value: USPhone.base }) })
+          );
+          expect(queryByDisplayValue(USPhone.expected)).not.toBeInTheDocument();
+        });
+        it(`Should return all countries validation if countries equals to empty array`, () => {
+          const USPhone = numbersFormats[1];
+          const { getAllByRole } = render(
+            /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Phone, { countries: [], value: USPhone.base }) })
+          );
+          fireEvent.click(getAllByRole("button")[0]);
+          expect(getAllByRole("option").length).toBe(12);
+        });
         it("should prefix the phone number with newly selected country dial code", () => __async(exports, null, function* () {
           const { getByRole, getByText, getByDisplayValue } = render(
             /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Phone, { defaultCountry: "us" }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.127.4",
+  "version": "7.128.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -58,7 +58,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "3bb60c107e1ad8945f71e3e0a73dc1622af9dd11",
+  "gitHead": "d3904daa0d594a33c0687a0f6ad8baa3df9d156b",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"