@vygruppen/spor-react 2.1.2 → 2.2.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@2.1.2 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-KS4FJCVG.mjs".
+"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".
-ESM dist/index.mjs                      1.96 KB
-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
+DTS Build start
+ESM dist/index.mjs                      2.00 KB
+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,32 @@
 # @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
+
+- 5bd65c9e: Export some new transition components from Chakra
+
+  This change adds the following components:
+
+  - Fade
+  - ScaleFade
+  - Slide
+  - SldeFade
+  - Collapse
+
+### Patch Changes
+
+- Updated dependencies [fb1b899e]
+- Updated dependencies [a520757b]
+  - @vygruppen/spor-icon-react@3.1.0
+  - @vygruppen/spor-design-tokens@3.1.1
+
 ## 2.1.2
 
 ### Patch Changes

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

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

package/dist/{chunk-KS4FJCVG.mjs → chunk-JG5DQFJS.mjs}

@@ -1,5 +1,5 @@
 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';
-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';
+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';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
@@ -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-OAKJCDQJ.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.d.ts

@@ -1,5 +1,5 @@
 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';
-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';
+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';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
 export { tokens };

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"
           }
@@ -22305,6 +22309,10 @@ var init_toast2 = __esm({
     init_useToast();
   }
 });
+var init_transition = __esm({
+  "src/transition/index.ts"() {
+  }
+});
 var init_externals = __esm({
   "src/util/externals.tsx"() {
   }
@@ -22340,6 +22348,7 @@ var init_src = __esm({
     init_table();
     init_theme();
     init_toast2();
+    init_transition();
     init_typography();
     init_util();
   }
@@ -22370,6 +22379,10 @@ Object.defineProperty(exports, 'Center', {
   enumerable: true,
   get: function () { return react.Center; }
 });
+Object.defineProperty(exports, 'Collapse', {
+  enumerable: true,
+  get: function () { return react.Collapse; }
+});
 Object.defineProperty(exports, 'Container', {
   enumerable: true,
   get: function () { return react.Container; }
@@ -22394,6 +22407,10 @@ Object.defineProperty(exports, 'DrawerOverlay', {
   enumerable: true,
   get: function () { return react.DrawerOverlay; }
 });
+Object.defineProperty(exports, 'Fade', {
+  enumerable: true,
+  get: function () { return react.Fade; }
+});
 Object.defineProperty(exports, 'Flex', {
   enumerable: true,
   get: function () { return react.Flex; }
@@ -22490,10 +22507,22 @@ Object.defineProperty(exports, 'PopoverTrigger', {
   enumerable: true,
   get: function () { return react.PopoverTrigger; }
 });
+Object.defineProperty(exports, 'ScaleFade', {
+  enumerable: true,
+  get: function () { return react.ScaleFade; }
+});
 Object.defineProperty(exports, 'SimpleGrid', {
   enumerable: true,
   get: function () { return react.SimpleGrid; }
 });
+Object.defineProperty(exports, 'Slide', {
+  enumerable: true,
+  get: function () { return react.Slide; }
+});
+Object.defineProperty(exports, 'SlideFade', {
+  enumerable: true,
+  get: function () { return react.SlideFade; }
+});
 Object.defineProperty(exports, 'Spacer', {
   enumerable: true,
   get: function () { return react.Spacer; }

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-KS4FJCVG.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.1.2",
+  "version": "2.2.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/index.tsx

@@ -22,5 +22,6 @@ export * from "./tab";
 export * from "./table";
 export * from "./theme";
 export * from "./toast";
+export * from "./transition";
 export * from "./typography";
 export * from "./util";

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
         />

package/src/transition/index.ts

@@ -0,0 +1,8 @@
+export { Collapse, Fade, ScaleFade, Slide, SlideFade } from "@chakra-ui/react";
+export type {
+  CollapseProps,
+  FadeProps,
+  ScaleFadeProps,
+  SlideFadeProps,
+  SlideProps,
+} from "@chakra-ui/react";