@vygruppen/spor-react 3.3.1 → 3.3.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.3.1 build
+> @vygruppen/spor-react@3.3.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
-"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-U4A5DVNS.mjs".
+CJS dist/index.js 902.94 KB
+CJS ⚡️ Build success in 4694ms
 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
+ESM dist/CountryCodeSelect-R5RS2HYK.mjs 350.82 KB
+ESM dist/chunk-U4A5DVNS.mjs             420.18 KB
+ESM ⚡️ Build success in 4694ms
+DTS ⚡️ Build success in 16906ms
 DTS dist/index.d.ts 252.16 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 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-R5RS2HYK.mjs}

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

package/dist/{chunk-5JEY3QEF.mjs → chunk-U4A5DVNS.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-R5RS2HYK.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });

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",

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-U4A5DVNS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "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",
   },
-});
+});