@vygruppen/spor-react 2.1.2 → 2.2.1
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.
- package/.turbo/turbo-build.log +11 -11
- package/CHANGELOG.md +27 -0
- package/dist/{CountryCodeSelect-OAKJCDQJ.mjs → CountryCodeSelect-GRUCXLDJ.mjs} +1 -1
- package/dist/{chunk-KS4FJCVG.mjs → chunk-JG5DQFJS.mjs} +10 -6
- package/dist/index.d.ts +1 -1
- package/dist/index.js +33 -4
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.tsx +1 -0
- package/src/input/PhoneNumberInput.tsx +7 -4
- package/src/transition/index.ts +8 -0
package/.turbo/turbo-build.log
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
> @vygruppen/spor-react@2.1
|
2
|
+
> @vygruppen/spor-react@2.2.1 build
|
3
3
|
> tsup src/index.tsx --dts --treeshake --format cjs,esm
|
4
4
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
@@ -8,14 +8,14 @@
|
|
8
8
|
[34mCLI[39m Target: node14
|
9
9
|
[34mCJS[39m Build start
|
10
10
|
[34mESM[39m Build start
|
11
|
-
|
12
|
-
"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-KS4FJCVG.mjs".
|
11
|
+
"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-JG5DQFJS.mjs".
|
13
12
|
"toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
|
14
|
-
[
|
15
|
-
[32mESM[39m [1mdist/
|
16
|
-
[32mESM[39m [1mdist/
|
17
|
-
[32mESM[39m
|
18
|
-
[
|
19
|
-
[32mCJS[39m
|
20
|
-
[
|
21
|
-
[32mDTS[39m
|
13
|
+
[34mDTS[39m Build start
|
14
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m2.00 KB[39m
|
15
|
+
[32mESM[39m [1mdist/CountryCodeSelect-GRUCXLDJ.mjs [22m[32m351.63 KB[39m
|
16
|
+
[32mESM[39m [1mdist/chunk-JG5DQFJS.mjs [22m[32m400.40 KB[39m
|
17
|
+
[32mESM[39m ⚡️ Build success in 4359ms
|
18
|
+
[32mCJS[39m [1mdist/index.js [22m[32m877.70 KB[39m
|
19
|
+
[32mCJS[39m ⚡️ Build success in 4362ms
|
20
|
+
[32mDTS[39m ⚡️ Build success in 16872ms
|
21
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m251.24 KB[39m
|
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,32 @@
|
|
1
1
|
# @vygruppen/spor-react
|
2
2
|
|
3
|
+
## 2.2.1
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- 84f2911d: Improve the phone number input by only allowing digits, spaces and hyphens
|
8
|
+
|
9
|
+
## 2.2.0
|
10
|
+
|
11
|
+
### Minor Changes
|
12
|
+
|
13
|
+
- 5bd65c9e: Export some new transition components from Chakra
|
14
|
+
|
15
|
+
This change adds the following components:
|
16
|
+
|
17
|
+
- Fade
|
18
|
+
- ScaleFade
|
19
|
+
- Slide
|
20
|
+
- SldeFade
|
21
|
+
- Collapse
|
22
|
+
|
23
|
+
### Patch Changes
|
24
|
+
|
25
|
+
- Updated dependencies [fb1b899e]
|
26
|
+
- Updated dependencies [a520757b]
|
27
|
+
- @vygruppen/spor-icon-react@3.1.0
|
28
|
+
- @vygruppen/spor-design-tokens@3.1.1
|
29
|
+
|
3
30
|
## 2.1.2
|
4
31
|
|
5
32
|
### Patch Changes
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, useFormControlProps, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
|
2
|
-
export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, SimpleGrid, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
|
2
|
+
export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
|
3
3
|
import tokens10__default from '@vygruppen/spor-design-tokens';
|
4
4
|
import * as tokens10 from '@vygruppen/spor-design-tokens';
|
5
5
|
export { tokens10 as tokens };
|
@@ -4477,13 +4477,17 @@ var PhoneNumberInput = forwardRef(
|
|
4477
4477
|
Input,
|
4478
4478
|
{
|
4479
4479
|
ref,
|
4480
|
+
type: "tel",
|
4480
4481
|
label: t2(texts12.phoneNumber),
|
4481
4482
|
value: value.nationalNumber,
|
4482
4483
|
name: name ? `${name}-phone-number` : "phone-number",
|
4483
|
-
onChange: (e) =>
|
4484
|
-
|
4485
|
-
|
4486
|
-
|
4484
|
+
onChange: (e) => {
|
4485
|
+
const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
|
4486
|
+
onChange({
|
4487
|
+
countryCode: value.countryCode,
|
4488
|
+
nationalNumber: strippedValue
|
4489
|
+
});
|
4490
|
+
},
|
4487
4491
|
position: "relative",
|
4488
4492
|
left: "-1px"
|
4489
4493
|
}
|
@@ -4498,7 +4502,7 @@ var texts12 = createTexts({
|
|
4498
4502
|
sv: "Telefonnummer"
|
4499
4503
|
}
|
4500
4504
|
});
|
4501
|
-
var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-
|
4505
|
+
var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-GRUCXLDJ.mjs'));
|
4502
4506
|
var Radio = forwardRef((props, ref) => {
|
4503
4507
|
return /* @__PURE__ */ React48__default.createElement(Radio$1, { ...props, ref });
|
4504
4508
|
});
|
package/dist/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { AccordionProps as AccordionProps$1, AccordionItemProps, BoxProps, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, As, StackProps as StackProps$1, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
|
2
|
-
export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
|
2
|
+
export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
|
3
3
|
import tokens__default from '@vygruppen/spor-design-tokens';
|
4
4
|
import * as tokens from '@vygruppen/spor-design-tokens';
|
5
5
|
export { tokens };
|
package/dist/index.js
CHANGED
@@ -11687,13 +11687,17 @@ var init_PhoneNumberInput = __esm({
|
|
11687
11687
|
exports.Input,
|
11688
11688
|
{
|
11689
11689
|
ref,
|
11690
|
+
type: "tel",
|
11690
11691
|
label: t2(texts13.phoneNumber),
|
11691
11692
|
value: value.nationalNumber,
|
11692
11693
|
name: name ? `${name}-phone-number` : "phone-number",
|
11693
|
-
onChange: (e) =>
|
11694
|
-
|
11695
|
-
|
11696
|
-
|
11694
|
+
onChange: (e) => {
|
11695
|
+
const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
|
11696
|
+
onChange({
|
11697
|
+
countryCode: value.countryCode,
|
11698
|
+
nationalNumber: strippedValue
|
11699
|
+
});
|
11700
|
+
},
|
11697
11701
|
position: "relative",
|
11698
11702
|
left: "-1px"
|
11699
11703
|
}
|
@@ -22305,6 +22309,10 @@ var init_toast2 = __esm({
|
|
22305
22309
|
init_useToast();
|
22306
22310
|
}
|
22307
22311
|
});
|
22312
|
+
var init_transition = __esm({
|
22313
|
+
"src/transition/index.ts"() {
|
22314
|
+
}
|
22315
|
+
});
|
22308
22316
|
var init_externals = __esm({
|
22309
22317
|
"src/util/externals.tsx"() {
|
22310
22318
|
}
|
@@ -22340,6 +22348,7 @@ var init_src = __esm({
|
|
22340
22348
|
init_table();
|
22341
22349
|
init_theme();
|
22342
22350
|
init_toast2();
|
22351
|
+
init_transition();
|
22343
22352
|
init_typography();
|
22344
22353
|
init_util();
|
22345
22354
|
}
|
@@ -22370,6 +22379,10 @@ Object.defineProperty(exports, 'Center', {
|
|
22370
22379
|
enumerable: true,
|
22371
22380
|
get: function () { return react.Center; }
|
22372
22381
|
});
|
22382
|
+
Object.defineProperty(exports, 'Collapse', {
|
22383
|
+
enumerable: true,
|
22384
|
+
get: function () { return react.Collapse; }
|
22385
|
+
});
|
22373
22386
|
Object.defineProperty(exports, 'Container', {
|
22374
22387
|
enumerable: true,
|
22375
22388
|
get: function () { return react.Container; }
|
@@ -22394,6 +22407,10 @@ Object.defineProperty(exports, 'DrawerOverlay', {
|
|
22394
22407
|
enumerable: true,
|
22395
22408
|
get: function () { return react.DrawerOverlay; }
|
22396
22409
|
});
|
22410
|
+
Object.defineProperty(exports, 'Fade', {
|
22411
|
+
enumerable: true,
|
22412
|
+
get: function () { return react.Fade; }
|
22413
|
+
});
|
22397
22414
|
Object.defineProperty(exports, 'Flex', {
|
22398
22415
|
enumerable: true,
|
22399
22416
|
get: function () { return react.Flex; }
|
@@ -22490,10 +22507,22 @@ Object.defineProperty(exports, 'PopoverTrigger', {
|
|
22490
22507
|
enumerable: true,
|
22491
22508
|
get: function () { return react.PopoverTrigger; }
|
22492
22509
|
});
|
22510
|
+
Object.defineProperty(exports, 'ScaleFade', {
|
22511
|
+
enumerable: true,
|
22512
|
+
get: function () { return react.ScaleFade; }
|
22513
|
+
});
|
22493
22514
|
Object.defineProperty(exports, 'SimpleGrid', {
|
22494
22515
|
enumerable: true,
|
22495
22516
|
get: function () { return react.SimpleGrid; }
|
22496
22517
|
});
|
22518
|
+
Object.defineProperty(exports, 'Slide', {
|
22519
|
+
enumerable: true,
|
22520
|
+
get: function () { return react.Slide; }
|
22521
|
+
});
|
22522
|
+
Object.defineProperty(exports, 'SlideFade', {
|
22523
|
+
enumerable: true,
|
22524
|
+
get: function () { return react.SlideFade; }
|
22525
|
+
});
|
22497
22526
|
Object.defineProperty(exports, 'Spacer', {
|
22498
22527
|
enumerable: true,
|
22499
22528
|
get: function () { return react.Spacer; }
|
package/dist/index.mjs
CHANGED
@@ -1 +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-
|
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-JG5DQFJS.mjs';
|
package/package.json
CHANGED
package/src/index.tsx
CHANGED
@@ -84,15 +84,18 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
|
|
84
84
|
</Suspense>
|
85
85
|
<Input
|
86
86
|
ref={ref}
|
87
|
+
type="tel"
|
87
88
|
label={t(texts.phoneNumber)}
|
88
89
|
value={value.nationalNumber}
|
89
90
|
name={name ? `${name}-phone-number` : "phone-number"}
|
90
|
-
onChange={(e) =>
|
91
|
+
onChange={(e) => {
|
92
|
+
// Removes everything but numbers, spaces and dashes
|
93
|
+
const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
|
91
94
|
onChange({
|
92
95
|
countryCode: value.countryCode,
|
93
|
-
nationalNumber:
|
94
|
-
})
|
95
|
-
}
|
96
|
+
nationalNumber: strippedValue,
|
97
|
+
});
|
98
|
+
}}
|
96
99
|
position="relative"
|
97
100
|
left="-1px" // Makes the borders overlap
|
98
101
|
/>
|