@vygruppen/spor-react 2.1.1 → 2.1.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.1.1 build
+> @vygruppen/spor-react@2.1.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-5HQ3SCBT.mjs".
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-KS4FJCVG.mjs".
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
 ESM dist/index.mjs                      1.96 KB
-ESM dist/CountryCodeSelect-EO6T7EEK.mjs 351.43 KB
-ESM dist/chunk-5HQ3SCBT.mjs             400.22 KB
-ESM ⚡️ Build success in 4766ms
-CJS dist/index.js 876.65 KB
-CJS ⚡️ Build success in 4768ms
-DTS ⚡️ Build success in 17306ms
+ESM dist/CountryCodeSelect-OAKJCDQJ.mjs 351.63 KB
+ESM dist/chunk-KS4FJCVG.mjs             400.24 KB
+ESM ⚡️ Build success in 4709ms
+CJS dist/index.js 876.93 KB
+CJS ⚡️ Build success in 4716ms
+DTS ⚡️ Build success in 17721ms
 DTS dist/index.d.ts 251.13 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 2.1.2
+
+### Patch Changes
+
+- e405193d: Address some feedback from real life usage
+
 ## 2.1.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-EO6T7EEK.mjs → CountryCodeSelect-OAKJCDQJ.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5HQ3SCBT.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-KS4FJCVG.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs
@@ -6598,11 +6598,18 @@ var {
 } = index;
 
 // src/input/CountryCodeSelect.tsx
-var callingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+var prioritizedCountryCodes = [
+  { key: "+47", value: "+47" },
+  { key: "+46", value: "+46" },
+  { key: "+45", value: "+45" }
+];
+var sortedCallingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
   key: `+${code}`,
   value: `+${code}`
-})).filter((code) => code.key !== "+47");
-callingCodes.unshift({ key: "+47", value: "+47" });
+})).filter(
+  (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+);
+var callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
 var CountryCodeSelect = (props) => {
   const { t } = useTranslation();
   return /* @__PURE__ */ React.createElement(

package/dist/{chunk-5HQ3SCBT.mjs → chunk-KS4FJCVG.mjs}

@@ -4442,7 +4442,7 @@ var PhoneNumberInput = forwardRef(
       onChange: externalOnChange,
       defaultValue: {
         countryCode: "+47",
-        phoneNumber: ""
+        nationalNumber: ""
       }
     });
     return /* @__PURE__ */ React48__default.createElement(AttachedInputs, { ...boxProps }, /* @__PURE__ */ React48__default.createElement(
@@ -4466,7 +4466,7 @@ var PhoneNumberInput = forwardRef(
           value: value.countryCode,
           onChange: (countryCode) => onChange({
             countryCode,
-            phoneNumber: value.phoneNumber
+            nationalNumber: value.nationalNumber
           }),
           name: name ? `${name}-country-code` : "country-code",
           height: "100%",
@@ -4478,11 +4478,11 @@ var PhoneNumberInput = forwardRef(
       {
         ref,
         label: t2(texts12.phoneNumber),
-        value: value.phoneNumber,
+        value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
         onChange: (e) => onChange({
           countryCode: value.countryCode,
-          phoneNumber: e.target.value
+          nationalNumber: e.target.value
         }),
         position: "relative",
         left: "-1px"
@@ -4498,7 +4498,7 @@ var texts12 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-EO6T7EEK.mjs'));
+var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-OAKJCDQJ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React48__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -962,7 +962,7 @@ declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs
 
 type CountryCodeAndPhoneNumber = {
     countryCode: string;
-    phoneNumber: string;
+    nationalNumber: string;
 };
 type PhoneNumberInputProps = BoxProps & {
     /** The root name.

package/dist/index.js

@@ -11598,16 +11598,23 @@ __export(CountryCodeSelect_exports, {
   CountryCodeSelect: () => CountryCodeSelect,
   default: () => CountryCodeSelect_default
 });
-var callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts12;
+var prioritizedCountryCodes, sortedCallingCodes, callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts12;
 var init_CountryCodeSelect = __esm({
   "src/input/CountryCodeSelect.tsx"() {
     init_src();
     init_index_esm();
-    callingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
+    prioritizedCountryCodes = [
+      { key: "+47", value: "+47" },
+      { key: "+46", value: "+46" },
+      { key: "+45", value: "+45" }
+    ];
+    sortedCallingCodes = getSupportedCallingCodes().sort((a, b) => Number(a) - Number(b)).map((code) => ({
       key: `+${code}`,
       value: `+${code}`
-    })).filter((code) => code.key !== "+47");
-    callingCodes.unshift({ key: "+47", value: "+47" });
+    })).filter(
+      (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+    );
+    callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
     CountryCodeSelect = (props) => {
       const { t: t2 } = exports.useTranslation();
       return /* @__PURE__ */ React48__namespace.default.createElement(
@@ -11645,7 +11652,7 @@ var init_PhoneNumberInput = __esm({
           onChange: externalOnChange,
           defaultValue: {
             countryCode: "+47",
-            phoneNumber: ""
+            nationalNumber: ""
           }
         });
         return /* @__PURE__ */ React48__namespace.default.createElement(exports.AttachedInputs, { ...boxProps }, /* @__PURE__ */ React48__namespace.default.createElement(
@@ -11669,7 +11676,7 @@ var init_PhoneNumberInput = __esm({
               value: value.countryCode,
               onChange: (countryCode) => onChange({
                 countryCode,
-                phoneNumber: value.phoneNumber
+                nationalNumber: value.nationalNumber
               }),
               name: name ? `${name}-country-code` : "country-code",
               height: "100%",
@@ -11681,11 +11688,11 @@ var init_PhoneNumberInput = __esm({
           {
             ref,
             label: t2(texts13.phoneNumber),
-            value: value.phoneNumber,
+            value: value.nationalNumber,
             name: name ? `${name}-phone-number` : "phone-number",
             onChange: (e) => onChange({
               countryCode: value.countryCode,
-              phoneNumber: e.target.value
+              nationalNumber: e.target.value
             }),
             position: "relative",
             left: "-1px"

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-5HQ3SCBT.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-KS4FJCVG.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/CountryCodeSelect.tsx

@@ -9,14 +9,22 @@ import {
 
 import { getSupportedCallingCodes } from "awesome-phonenumber";
 
-const callingCodes = getSupportedCallingCodes()
+const prioritizedCountryCodes = [
+  { key: "+47", value: "+47" },
+  { key: "+46", value: "+46" },
+  { key: "+45", value: "+45" },
+];
+
+const sortedCallingCodes = getSupportedCallingCodes()
   .sort((a, b) => Number(a) - Number(b))
   .map((code) => ({
     key: `+${code}`,
     value: `+${code}`,
   }))
-  .filter((code) => code.key !== "+47"); // We're adding Norway to the top
-callingCodes.unshift({ key: "+47", value: "+47" }); // Norway
+  .filter(
+    (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key)
+  );
+const callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
 
 type CountryCodeSelectProps = {
   value: string;

package/src/input/PhoneNumberInput.tsx

@@ -10,7 +10,7 @@ import { AttachedInputs } from "./AttachedInputs";
 
 type CountryCodeAndPhoneNumber = {
   countryCode: string;
-  phoneNumber: string;
+  nationalNumber: string;
 };
 type PhoneNumberInputProps = BoxProps & {
   /** The root name.
@@ -51,7 +51,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       onChange: externalOnChange,
       defaultValue: {
         countryCode: "+47",
-        phoneNumber: "",
+        nationalNumber: "",
       },
     });
     return (
@@ -74,7 +74,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
             onChange={(countryCode) =>
               onChange({
                 countryCode: countryCode as string,
-                phoneNumber: value.phoneNumber,
+                nationalNumber: value.nationalNumber,
               })
             }
             name={name ? `${name}-country-code` : "country-code"}
@@ -85,12 +85,12 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
         <Input
           ref={ref}
           label={t(texts.phoneNumber)}
-          value={value.phoneNumber}
+          value={value.nationalNumber}
           name={name ? `${name}-phone-number` : "phone-number"}
           onChange={(e) =>
             onChange({
               countryCode: value.countryCode,
-              phoneNumber: e.target.value,
+              nationalNumber: e.target.value,
             })
           }
           position="relative"