@vygruppen/spor-react 2.2.0 → 2.2.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.2.0 build
+> @vygruppen/spor-react@2.2.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,14 +8,14 @@
 CLI Target: node14
 CJS Build start
 ESM Build start
-DTS Build start
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-JG5DQFJS.mjs".
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-2KP5MQG7.mjs".
-CJS dist/index.js 877.57 KB
-CJS ⚡️ Build success in 4302ms
+DTS Build start
 ESM dist/index.mjs                      2.00 KB
-ESM dist/CountryCodeSelect-MBBIVGTV.mjs 351.63 KB
-ESM dist/chunk-2KP5MQG7.mjs             400.28 KB
-ESM ⚡️ Build success in 4306ms
-DTS ⚡️ Build success in 16837ms
+ESM dist/CountryCodeSelect-GRUCXLDJ.mjs 351.63 KB
+ESM dist/chunk-JG5DQFJS.mjs             400.40 KB
+ESM ⚡️ Build success in 4359ms
+CJS dist/index.js 877.70 KB
+CJS ⚡️ Build success in 4362ms
+DTS ⚡️ Build success in 16872ms
 DTS dist/index.d.ts 251.24 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 2.2.1
+
+### Patch Changes
+
+- 84f2911d: Improve the phone number input by only allowing digits, spaces and hyphens
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-MBBIVGTV.mjs → CountryCodeSelect-GRUCXLDJ.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-2KP5MQG7.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-JG5DQFJS.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-2KP5MQG7.mjs → chunk-JG5DQFJS.mjs}

@@ -4477,13 +4477,17 @@ var PhoneNumberInput = forwardRef(
       Input,
       {
         ref,
+        type: "tel",
         label: t2(texts12.phoneNumber),
         value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
-        onChange: (e) => onChange({
-          countryCode: value.countryCode,
-          nationalNumber: e.target.value
-        }),
+        onChange: (e) => {
+          const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue
+          });
+        },
         position: "relative",
         left: "-1px"
       }
@@ -4498,7 +4502,7 @@ var texts12 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-MBBIVGTV.mjs'));
+var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-GRUCXLDJ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React48__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.js

@@ -11687,13 +11687,17 @@ var init_PhoneNumberInput = __esm({
           exports.Input,
           {
             ref,
+            type: "tel",
             label: t2(texts13.phoneNumber),
             value: value.nationalNumber,
             name: name ? `${name}-phone-number` : "phone-number",
-            onChange: (e) => onChange({
-              countryCode: value.countryCode,
-              nationalNumber: e.target.value
-            }),
+            onChange: (e) => {
+              const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
+              onChange({
+                countryCode: value.countryCode,
+                nationalNumber: strippedValue
+              });
+            },
             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, Collapse, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, 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, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, 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-2KP5MQG7.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, 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, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, 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-JG5DQFJS.mjs';

package/package.json

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

package/src/input/PhoneNumberInput.tsx

@@ -84,15 +84,18 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
         </Suspense>
         <Input
           ref={ref}
+          type="tel"
           label={t(texts.phoneNumber)}
           value={value.nationalNumber}
           name={name ? `${name}-phone-number` : "phone-number"}
-          onChange={(e) =>
+          onChange={(e) => {
+            // Removes everything but numbers, spaces and dashes
+            const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
             onChange({
               countryCode: value.countryCode,
-              nationalNumber: e.target.value,
-            })
-          }
+              nationalNumber: strippedValue,
+            });
+          }}
           position="relative"
           left="-1px" // Makes the borders overlap
         />