@vygruppen/spor-react 3.3.1 → 3.3.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.3.1 build
+> @vygruppen/spor-react@3.3.3 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
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-5JEY3QEF.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-HUBPEIHF.mjs".
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-A2JYYB5S.mjs 350.82 KB
-ESM dist/chunk-5JEY3QEF.mjs             419.69 KB
-ESM ⚡️ Build success in 4776ms
-CJS dist/index.js 902.43 KB
-CJS ⚡️ Build success in 4777ms
-DTS ⚡️ Build success in 16972ms
-DTS dist/index.d.ts 252.16 KB
+ESM dist/CountryCodeSelect-X3MPRW2E.mjs 350.82 KB
+ESM dist/chunk-HUBPEIHF.mjs             420.27 KB
+ESM ⚡️ Build success in 5772ms
+CJS dist/index.js 903.03 KB
+CJS ⚡️ Build success in 5772ms
+DTS ⚡️ Build success in 21778ms
+DTS dist/index.d.ts 252.30 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 3.3.3
+
+### Patch Changes
+
+- 3a95bedd: Accordion: Make the text size responsive
+
+## 3.3.2
+
+### Patch Changes
+
+- 1209e991: Add workaround for click throughs on mobile devices in CalendarCell and ListBox
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-A2JYYB5S.mjs → CountryCodeSelect-X3MPRW2E.mjs}

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

package/dist/{chunk-5JEY3QEF.mjs → chunk-HUBPEIHF.mjs}

@@ -3314,6 +3314,16 @@ function CalendarCell({ state: state2, date, currentMonth }) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
+  useEffect(() => {
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
+      "touchend",
+      (event) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
   return /* @__PURE__ */ React49__default.createElement(
     Box,
     {
@@ -4540,6 +4550,16 @@ function Option({ item, state: state2 }) {
   if (isFocused) {
     dataFields["data-focus"] = true;
   }
+  useEffect(() => {
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
+      "touchend",
+      (event) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
   return /* @__PURE__ */ React49__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React49__default.createElement(ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
 }
 var OptionContext = React49__default.createContext({
@@ -4822,7 +4842,7 @@ function NumericStepper({
     {
       fontSize: "sm",
       fontWeight: "bold",
-      width: "3ch",
+      width: "4ch",
       marginX: 1,
       paddingX: 1,
       textAlign: "center",
@@ -5045,7 +5065,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-A2JYYB5S.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-X3MPRW2E.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -11010,34 +11030,34 @@ var config3 = helpers.defineMultiStyleConfig({
   sizes: {
     sm: {
       button: {
-        fontSize: "desktop.xs",
+        fontSize: ["mobile.xs", "desktop.xs"],
         paddingX: 2,
         paddingY: 1
       },
       panel: {
-        fontSize: "desktop.xs",
+        fontSize: ["mobile.xs", "desktop.xs"],
         paddingX: 2
       }
     },
     md: {
       button: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3,
         paddingY: 1
       },
       panel: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3
       }
     },
     lg: {
       button: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3,
         paddingY: 2
       },
       panel: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3
       }
     }

package/dist/index.d.ts

@@ -1966,34 +1966,34 @@ declare const theme: {
             sizes?: {
                 sm: {
                     button: {
-                        fontSize: string;
+                        fontSize: ("mobile.xs" | "desktop.xs")[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: string;
+                        fontSize: ("mobile.xs" | "desktop.xs")[];
                         paddingX: number;
                     };
                 };
                 md: {
                     button: {
-                        fontSize: string;
+                        fontSize: ("mobile.sm" | "desktop.sm")[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: string;
+                        fontSize: ("mobile.sm" | "desktop.sm")[];
                         paddingX: number;
                     };
                 };
                 lg: {
                     button: {
-                        fontSize: string;
+                        fontSize: ("mobile.sm" | "desktop.sm")[];
                         paddingX: number;
                         paddingY: number;
                     };
                     panel: {
-                        fontSize: string;
+                        fontSize: ("mobile.sm" | "desktop.sm")[];
                         paddingX: number;
                     };
                 };

package/dist/index.js

@@ -2931,6 +2931,16 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
+  React49.useEffect(() => {
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
+      "touchend",
+      (event) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
   return /* @__PURE__ */ React49__namespace.default.createElement(
     react.Box,
     {
@@ -5077,6 +5087,16 @@ function Option({ item, state: state2 }) {
   if (isFocused) {
     dataFields["data-focus"] = true;
   }
+  React49.useEffect(() => {
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
+      "touchend",
+      (event) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
   return /* @__PURE__ */ React49__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React49__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
 }
 function ListBoxSection({ section, state: state2 }) {
@@ -5406,7 +5426,7 @@ function NumericStepper({
     {
       fontSize: "sm",
       fontWeight: "bold",
-      width: "3ch",
+      width: "4ch",
       marginX: 1,
       paddingX: 1,
       textAlign: "center",
@@ -19006,34 +19026,34 @@ var init_accordion2 = __esm({
       sizes: {
         sm: {
           button: {
-            fontSize: "desktop.xs",
+            fontSize: ["mobile.xs", "desktop.xs"],
             paddingX: 2,
             paddingY: 1
           },
           panel: {
-            fontSize: "desktop.xs",
+            fontSize: ["mobile.xs", "desktop.xs"],
             paddingX: 2
           }
         },
         md: {
           button: {
-            fontSize: "desktop.sm",
+            fontSize: ["mobile.sm", "desktop.sm"],
             paddingX: 3,
             paddingY: 1
           },
           panel: {
-            fontSize: "desktop.sm",
+            fontSize: ["mobile.sm", "desktop.sm"],
             paddingX: 3
           }
         },
         lg: {
           button: {
-            fontSize: "desktop.sm",
+            fontSize: ["mobile.sm", "desktop.sm"],
             paddingX: 3,
             paddingY: 2
           },
           panel: {
-            fontSize: "desktop.sm",
+            fontSize: ["mobile.sm", "desktop.sm"],
             paddingX: 3
           }
         }

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, Combobox, 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, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, 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-5JEY3QEF.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, 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, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, 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-HUBPEIHF.mjs';

package/package.json

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

package/src/datepicker/CalendarCell.tsx

@@ -5,7 +5,7 @@ import {
   isSameMonth,
   isToday,
 } from "@internationalized/date";
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
@@ -41,7 +41,22 @@ export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
-  
+
+  /* 
+  Workaround to fix click througs on mobile devices
+  Related to https://github.com/adobe/react-spectrum/issues/4970
+  TODO: Follow up with react-spectrum to see if they can solve it on their end
+  */
+  useEffect(() => {
+    (ref as any)?.current?.addEventListener(
+      "touchend",
+      (event: TouchEvent) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
+
   return (
     <Box
       as="td"

package/src/input/ListBox.tsx

@@ -7,7 +7,7 @@ import {
   type BoxProps,
 } from "@chakra-ui/react";
 import type { Node } from "@react-types/shared";
-import React, { useContext, useRef } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import {
   AriaListBoxProps,
   useListBox,
@@ -152,6 +152,21 @@ function Option({ item, state }: OptionProps) {
     dataFields["data-focus"] = true;
   }
 
+  /* 
+  Workaround to fix click througs on mobile devices
+  Related to https://github.com/adobe/react-spectrum/issues/4970
+  TODO: Follow up with react-spectrum to see if they can solve it on their end
+  */
+  useEffect(() => {
+    (ref as any)?.current?.addEventListener(
+      "touchend",
+      (event: TouchEvent) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
+
   return (
     <OptionContext.Provider value={{ labelProps, descriptionProps }}>
       <ListItem {...optionProps} {...dataFields} ref={ref} sx={styles.item}>

package/src/input/NumericStepper.tsx

@@ -143,7 +143,7 @@ export function NumericStepper({
         <chakra.text
           fontSize="sm"
           fontWeight="bold"
-          width="3ch"
+          width="4ch"
           marginX={1}
           paddingX={1}
           textAlign="center"
@@ -262,4 +262,4 @@ const texts = createTexts({
     nn: "Legg til 1",
     sv: "Lägg till 1",
   },
-});
+});

package/src/theme/components/accordion.ts

@@ -107,34 +107,34 @@ const config = helpers.defineMultiStyleConfig({
   sizes: {
     sm: {
       button: {
-        fontSize: "desktop.xs",
+        fontSize: ["mobile.xs", "desktop.xs"],
         paddingX: 2,
         paddingY: 1,
       },
       panel: {
-        fontSize: "desktop.xs",
+        fontSize: ["mobile.xs", "desktop.xs"],
         paddingX: 2,
       },
     },
     md: {
       button: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3,
         paddingY: 1,
       },
       panel: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3,
       },
     },
     lg: {
       button: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3,
         paddingY: 2,
       },
       panel: {
-        fontSize: "desktop.sm",
+        fontSize: ["mobile.sm", "desktop.sm"],
         paddingX: 3,
       },
     },