@vygruppen/spor-react 11.3.6 → 11.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.3.6",
+  "version": "11.3.8",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -31,9 +31,9 @@
     "react-aria": "^3.33.1",
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
-    "@vygruppen/spor-icon-react": "3.13.0",
-    "@vygruppen/spor-loader": "0.5.0",
-    "@vygruppen/spor-design-tokens": "3.10.0"
+    "@vygruppen/spor-design-tokens": "3.10.0",
+    "@vygruppen/spor-icon-react": "3.14.0",
+    "@vygruppen/spor-loader": "0.5.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/PhoneNumberInput.tsx

@@ -5,18 +5,23 @@ import { AttachedInputs } from "./AttachedInputs";
 import { CountryCodeSelect } from "./CountryCodeSelect";
 import { As } from "@chakra-ui/system";
 
-type CountryCodeAndPhoneNumber = {
+export type CountryCodeAndPhoneNumber = {
   countryCode: string;
   nationalNumber: string;
 };
-type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
+export type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   /** The label. Defaults to a localized version of "Phone number" */
   label?: string;
   /** The root name.
    *
-   * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
+   * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number` unless a name is provided for both countryCode and nationalNumber.
    */
-  name?: string;
+  name?:
+    | string
+    | {
+        countryCode: string;
+        nationalNumber: string;
+      };
   /** Callback for when the country code or phone number changes */
   onChange?: (change: CountryCodeAndPhoneNumber) => void;
   /** The optional value of the country code and phone number */
@@ -31,7 +36,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
  * <PhoneNumberInput name="phone" />
  * ```
  *
- * > Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
+ * > Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number` unless a name is provided for both countryCode and nationalNumber.
  *
  * The field can be controlled as well:
  * ```tsx
@@ -76,7 +81,13 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
               nationalNumber: value.nationalNumber,
             })
           }
-          name={name ? `${name}-country-code` : "country-code"}
+          name={
+            name
+              ? typeof name !== "string" && name.countryCode
+                ? name.countryCode
+                : `${name}-country-code`
+              : "country-code"
+          }
           height="100%"
           width="6.25rem"
           variant={variant}
@@ -86,7 +97,13 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
           type="tel"
           label={label}
           value={value.nationalNumber}
-          name={name ? `${name}-phone-number` : "phone-number"}
+          name={
+            name
+              ? typeof name !== "string" && name.nationalNumber
+                ? name.nationalNumber
+                : `${name}-phone-number`
+              : "phone-number"
+          }
           onChange={(e) => {
             // Removes everything but numbers, spaces and dashes
             const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");