@vygruppen/spor-react 9.13.0 → 9.13.2

package/dist/index.d.ts

@@ -109,6 +109,7 @@ type RadioGroupContextProps = {
     onChange: (value: string) => void;
     variant?: "base" | "floating";
     defaultValue?: string;
+    value?: string;
 };
 declare const RadioCardGroupContext: React.Context<RadioGroupContextProps | null>;
 type RadioCardGroupProps = BoxProps & {
@@ -118,6 +119,7 @@ type RadioCardGroupProps = BoxProps & {
     direction?: "row" | "column";
     groupLabel?: string;
     defaultValue?: string;
+    onChange?: (value: string) => void;
 };
 declare const RadioCardGroup: React.FC<RadioCardGroupProps>;
 
@@ -1965,31 +1967,17 @@ type DrawerProps = DrawerProps$1;
 declare const Drawer: (props: DrawerProps) => React.JSX.Element;
 declare const DrawerContent: _chakra_ui_system_dist_system_types.ComponentWithAs<any, DrawerContentProps>;
 
-type DrawerPlacement = "top" | "right" | "bottom" | "left";
-type FullScreenDrawerProps = {
-    /** The content inside the drawer */
-    children: React.ReactNode;
-    /** The title in the middle of the top menu */
-    title?: String;
-    /** Determines which side the drawer slides from */
-    placement?: DrawerPlacement;
-    /** A React component that will be placed to the left in the modal header */
-    leftButton?: React.ReactNode;
-    /** A React component that will be placed to the right in the modal header */
-    rightButton?: React.ReactNode;
-    /** Determines if the drawer is open or closed */
-    isOpen: boolean;
-    /** Function that will be called when the drawer closes */
-    onClose: () => void;
+type DrawerBodyProps = {
+    id?: string;
 };
-declare const FullScreenDrawer: ({ children, title, placement, leftButton, rightButton, isOpen, onClose, }: FullScreenDrawerProps) => React.JSX.Element;
-
 type SimpleDrawerProps = {
     children: React.ReactNode;
     title?: React.ReactNode;
     placement: "top" | "right" | "bottom" | "left";
     isOpen: boolean;
     onClose: () => void;
+    /** Props for drawer body */
+    body?: DrawerBodyProps;
 };
 /** A very basic drawer component that's easy to use
  *
@@ -2001,7 +1989,28 @@ type SimpleDrawerProps = {
  *
  * For more advanced use cases, see the [Drawer](./Drawer.tsx) component.
  */
-declare const SimpleDrawer: ({ placement, children, title, ...props }: SimpleDrawerProps) => React.JSX.Element;
+declare const SimpleDrawer: ({ placement, children, title, body, ...props }: SimpleDrawerProps) => React.JSX.Element;
+
+type DrawerPlacement = "top" | "right" | "bottom" | "left";
+type FullScreenDrawerProps = {
+    /** The content inside the drawer */
+    children: React.ReactNode;
+    /** The title in the middle of the top menu */
+    title?: String;
+    /** Determines which side the drawer slides from */
+    placement?: DrawerPlacement;
+    /** A React component that will be placed to the left in the modal header */
+    leftButton?: React.ReactNode;
+    /** A React component that will be placed to the right in the modal header */
+    rightButton?: React.ReactNode;
+    /** Determines if the drawer is open or closed */
+    isOpen: boolean;
+    /** Function that will be called when the drawer closes */
+    onClose: () => void;
+    /** Props for drawer body */
+    body?: DrawerBodyProps;
+};
+declare const FullScreenDrawer: ({ children, title, placement, leftButton, rightButton, isOpen, onClose, body, }: FullScreenDrawerProps) => React.JSX.Element;
 
 type TooltipProps = PopoverProps & {
     /**
@@ -5907,6 +5916,11 @@ declare const theme: {
         RadioCard: {
             baseStyle?: ((props: any) => {
                 container: {
+                    overflow: string;
+                    fontSize: string;
+                    display: string;
+                    cursor: string;
+                    borderRadius: string;
                     transitionProperty: string;
                     transitionDuration: string;
                     _disabled: {
@@ -5924,18 +5938,6 @@ declare const theme: {
                         backgroundColor: string;
                         pointerEvents: string;
                     };
-                    _focusVisible: {
-                        outlineWidth: string;
-                        outlineColor: string;
-                        outlineStyle: string;
-                        outlineOffset: string;
-                    };
-                    border: string;
-                    overflow: string;
-                    fontSize: string;
-                    display: string;
-                    cursor: string;
-                    borderRadius: string;
                 };
                 checked: {
                     backgroundColor: string;
@@ -5951,7 +5953,7 @@ declare const theme: {
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("container" | "checked" | "radioInput")[];
+                    keys: ("container" | "checked" | "radioInput" | "focused" | "focusedChecked")[];
                 }>;
             } | undefined;
             variants?: {
@@ -5979,9 +5981,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outlineWidth: string;
                         outlineColor: string;
                         outlineStyle: string;
@@ -6011,9 +6010,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6040,12 +6036,30 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
+                    };
+                    focusedChecked: {
+                        outlineOffset: string;
+                        outlineColor: string;
+                        outline: string;
+                        outlineStyle: string;
+                    };
+                    focused: {
+                        outlineOffset: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
                             outlineOffset: string;
+                            outlineWidth: string;
                             outlineColor: string;
-                            outline: string;
                             outlineStyle: string;
+                        } | {
+                            boxShadow: string;
+                            outlineOffset: string;
+                            outline: string;
+                            outlineColor: string;
                         };
+                        outlineColor: string;
+                        outline: string;
                     };
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -6062,9 +6076,6 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
-                            outlineColor: string;
-                        };
                         outline: string;
                         outlineColor: string;
                         backgroundColor: string;
@@ -6080,12 +6091,24 @@ declare const theme: {
                             outlineColor: string;
                             backgroundColor: string;
                         };
-                        _focus: {
+                    };
+                    focusedChecked: {
+                        outlineOffset: string;
+                        outlineColor: string;
+                        outline: string;
+                        outlineStyle: string;
+                    };
+                    focused: {
+                        outlineOffset: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
                             outlineOffset: string;
-                            outlineColor: string;
                             outline: string;
-                            outlineStyle: string;
+                            outlineColor: string;
                         };
+                        outlineColor: string;
+                        outline: string;
                     };
                 };
             } | undefined;
@@ -6094,7 +6117,7 @@ declare const theme: {
                 variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("container" | "checked" | "radioInput")[];
+            parts: ("container" | "checked" | "radioInput" | "focused" | "focusedChecked")[];
         };
         Radio: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -9549,4 +9572,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
  **/
 declare function slugify(text: string | string[], maxLength?: number): string;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerBodyProps, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, TogglePride, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoDefault, VyLogoDefaultProps, VyLogoPride, VyLogoPrideProps, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, usePride, useToast, useTranslation };

package/dist/index.js

@@ -2170,6 +2170,7 @@ var init_RadioCardGroup = __esm({
       direction: direction2 = "row",
       groupLabel,
       defaultValue,
+      onChange,
       ...props
     }) => {
       const [selectedValue, setSelectedValue] = React88.useState(
@@ -2177,6 +2178,7 @@ var init_RadioCardGroup = __esm({
       );
       const handleChange = (value) => {
         setSelectedValue(value);
+        onChange && onChange(value);
       };
       return /* @__PURE__ */ React88__namespace.default.createElement(
         exports.RadioCardGroupContext.Provider,
@@ -2189,19 +2191,7 @@ var init_RadioCardGroup = __esm({
             defaultValue: defaultValue || ""
           }
         },
-        /* @__PURE__ */ React88__namespace.default.createElement(
-          react.Stack,
-          {
-            as: "fieldset",
-            direction: direction2,
-            "aria-labelledby": groupLabel || name,
-            role: "radiogroup",
-            tabIndex: 0,
-            ...props
-          },
-          groupLabel && /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { as: "legend", id: groupLabel }, groupLabel),
-          children
-        )
+        /* @__PURE__ */ React88__namespace.default.createElement(react.Stack, { as: "fieldset", direction: direction2, ...props }, groupLabel && /* @__PURE__ */ React88__namespace.default.createElement(exports.FormLabel, { as: "legend", id: groupLabel }, groupLabel), children)
       );
     };
   }
@@ -2211,7 +2201,7 @@ var init_RadioCard = __esm({
   "src/layout/RadioCard.tsx"() {
     init_RadioCardGroup();
     exports.RadioCard = react.forwardRef(
-      ({ children, value = "base", isDisabled, ...props }, ref) => {
+      ({ children, value, isDisabled, ...props }, ref) => {
         const context = React88.useContext(exports.RadioCardGroupContext);
         if (!context) {
           throw new Error(
@@ -2220,50 +2210,72 @@ var init_RadioCard = __esm({
         }
         const { name, selectedValue, onChange, variant } = context;
         const styles3 = react.useMultiStyleConfig("RadioCard", { variant });
+        const [isKeyboardUser, setKeyboardUser] = React88.useState(false);
+        const [isFocused, setFocus] = React88.useState(false);
         const isChecked = selectedValue === value;
-        const radioCardId = `radio-card-${React88.useId()}`;
         React88.useEffect(() => {
-          if (isChecked && typeof ref !== "function" && (ref == null ? void 0 : ref.current)) {
-            ref.current.focus();
-          }
-        }, [isChecked]);
-        const handleKeyDown = (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            onChange(value);
-          }
-          if (event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowUp") {
-            const nextRadioCard = event.currentTarget.nextElementSibling;
-            nextRadioCard.focus();
-          }
-        };
-        return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "label", "aria-label": String(children), onKeyDown: handleKeyDown }, /* @__PURE__ */ React88__namespace.default.createElement(
-          react.chakra.input,
-          {
-            type: "radio",
-            id: radioCardId,
-            ref,
-            value,
-            name,
-            checked: isChecked,
-            onChange: () => onChange(value),
-            disabled: isDisabled,
-            __css: styles3.radioInput
+          const handleMouseDown = () => setKeyboardUser(false);
+          const handleKeyDown = (event) => {
+            if (event.key === " ") {
+              setFocus(false);
+            } else {
+              setKeyboardUser(true);
+            }
+          };
+          window.addEventListener("mousedown", handleMouseDown);
+          window.addEventListener("keydown", handleKeyDown);
+          return () => {
+            window.removeEventListener("mousedown", handleMouseDown);
+            window.removeEventListener("keydown", handleKeyDown);
+          };
+        }, []);
+        React88.useEffect(() => {
+          if (isKeyboardUser && isChecked) {
+            setFocus(true);
+          } else {
+            setFocus(false);
           }
-        ), /* @__PURE__ */ React88__namespace.default.createElement(
+        }, [isKeyboardUser, isChecked]);
+        const inputId = `radio-card-${React88.useId()}`;
+        return /* @__PURE__ */ React88__namespace.default.createElement(
           react.Box,
           {
-            ...props,
-            tabIndex: 0,
-            ref,
-            role: "radio",
-            "aria-checked": isChecked,
-            "aria-labelledby": radioCardId,
-            __css: { ...styles3.container, ...isChecked && styles3.checked },
-            "data-checked": isChecked,
-            "data-disabled": isDisabled
+            onFocus: () => isKeyboardUser && setFocus(true),
+            onBlur: () => setFocus(false)
           },
-          children
-        ));
+          /* @__PURE__ */ React88__namespace.default.createElement(
+            react.chakra.input,
+            {
+              type: "radio",
+              id: inputId,
+              name,
+              ref,
+              checked: isChecked,
+              onChange: () => onChange(value),
+              disabled: isDisabled,
+              __css: styles3.radioInput
+            }
+          ),
+          /* @__PURE__ */ React88__namespace.default.createElement(
+            react.Box,
+            {
+              as: "label",
+              name,
+              htmlFor: inputId,
+              "aria-checked": isChecked,
+              "data-checked": isChecked,
+              "data-disabled": isDisabled,
+              ...props,
+              __css: {
+                ...styles3.container,
+                ...isChecked && styles3.checked,
+                ...isFocused && !isChecked && styles3.focused,
+                ...isChecked && isFocused && styles3.focusedChecked
+              }
+            },
+            children
+          )
+        );
       }
     );
   }
@@ -5192,7 +5204,8 @@ var init_FullScreenDrawer = __esm({
       leftButton = null,
       rightButton = /* @__PURE__ */ React88__namespace.default.createElement(DrawerCloseButton2, null),
       isOpen,
-      onClose
+      onClose,
+      body
     }) => {
       const [isContentBoxScrolled, setContentBoxScrolled] = React88.useState(false);
       const onContentScroll = (e) => {
@@ -5223,7 +5236,7 @@ var init_FullScreenDrawer = __esm({
             rightButton
           }
         ),
-        /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, { overflow: "auto", onScroll: onContentScroll }, children)
+        /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, { overflow: "auto", onScroll: onContentScroll, ...body }, children)
       ));
     };
     DrawerTopMenu = ({
@@ -5318,9 +5331,10 @@ var init_SimpleDrawer = __esm({
       placement,
       children,
       title,
+      body,
       ...props
     }) => {
-      return /* @__PURE__ */ React88__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React88__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React88__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, null, children)));
+      return /* @__PURE__ */ React88__namespace.default.createElement(exports.Drawer, { placement, ...props }, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerOverlay, null), /* @__PURE__ */ React88__namespace.default.createElement(exports.DrawerContent, null, /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerCloseButton, null), title && /* @__PURE__ */ React88__namespace.default.createElement(exports.ModalHeader, null, title), /* @__PURE__ */ React88__namespace.default.createElement(react.DrawerBody, { ...body }, children)));
     };
   }
 });
@@ -15034,20 +15048,23 @@ var init_radio_card = __esm({
   "src/theme/components/radio-card.ts"() {
     init_base_utils();
     init_floating_utils();
-    init_focus_utils();
     init_outline_utils();
-    parts17 = themeTools.anatomy("radio-card").parts("container", "checked", "radioInput");
+    parts17 = themeTools.anatomy("radio-card").parts(
+      "container",
+      "checked",
+      "radioInput",
+      "focused",
+      "focusedChecked"
+    );
     helpers24 = react.createMultiStyleConfigHelpers(parts17.keys);
     config33 = helpers24.defineMultiStyleConfig({
       baseStyle: (props) => ({
         container: {
-          border: "none",
           overflow: "hidden",
           fontSize: "inherit",
           display: "block",
           cursor: "pointer",
           borderRadius: "sm",
-          ...focusVisibleStyles(props),
           transitionProperty: "common",
           transitionDuration: "fast",
           _disabled: {
@@ -15082,9 +15099,6 @@ var init_radio_card = __esm({
             _active: {
               ...baseBackground("active", props),
               ...baseBorder("active", props)
-            },
-            _focus: {
-              ...outlineBorder("focus", props)
             }
           },
           checked: {
@@ -15094,12 +15108,23 @@ var init_radio_card = __esm({
             _active: {
               ...baseBackground("active", props),
               ...baseBorder("active", props)
-            },
-            _focus: {
-              outline: "4px solid",
-              outlineStyle: "double",
-              ...outlineBorder("focus", props),
-              outlineOffset: "-1px"
+            }
+          },
+          focusedChecked: {
+            outline: "4px solid",
+            outlineStyle: "double",
+            ...outlineBorder("focus", props),
+            outlineOffset: "-1px"
+          },
+          focused: {
+            outline: "2px solid",
+            ...outlineBorder("focus", props),
+            outlineOffset: "1px",
+            boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.40)`,
+            _hover: {
+              ...baseBorder("hover", props),
+              boxShadow: "none",
+              outlineOffset: "0px"
             }
           }
         }),
@@ -15116,9 +15141,6 @@ var init_radio_card = __esm({
             _active: {
               ...floatingBackground("active", props),
               ...floatingBorder("active", props)
-            },
-            _focus: {
-              ...outlineBorder("focus", props)
             }
           },
           checked: {
@@ -15129,12 +15151,23 @@ var init_radio_card = __esm({
             _active: {
               ...floatingBackground("active", props),
               ...floatingBorder("active", props)
-            },
-            _focus: {
-              outline: "4px solid",
-              outlineStyle: "double",
-              ...outlineBorder("focus", props),
-              outlineOffset: "-1px"
+            }
+          },
+          focusedChecked: {
+            outline: "4px solid",
+            outlineStyle: "double",
+            ...outlineBorder("focus", props),
+            outlineOffset: "-1px"
+          },
+          focused: {
+            outline: "2px solid",
+            ...outlineBorder("focus", props),
+            outlineOffset: "1px",
+            boxShadow: `inset 0 0 0 1px rgba(0, 0, 0, 0.10)`,
+            _hover: {
+              ...floatingBorder("hover", props),
+              boxShadow: "md",
+              outlineOffset: "0px"
             }
           }
         })

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, 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, FullScreenDrawer, 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, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-KJYJYQBK.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, 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, FullScreenDrawer, 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, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UOSLFTBE.mjs';

package/package.json

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

package/src/layout/RadioCard.tsx

@@ -5,7 +5,7 @@ import {
   forwardRef,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useId } from "react";
+import React, { useContext, useEffect, useId, useState } from "react";
 import { RadioCardGroupContext } from "./RadioCardGroup";
 
 /**
@@ -38,7 +38,7 @@ export type RadioCardProps = BoxProps & {
 };
 
 export const RadioCard = forwardRef(
-  ({ children, value = "base", isDisabled, ...props }: RadioCardProps, ref) => {
+  ({ children, value, isDisabled, ...props }: RadioCardProps, ref) => {
     const context = useContext(RadioCardGroupContext);
 
     if (!context) {
@@ -51,55 +51,69 @@ export const RadioCard = forwardRef(
 
     const styles = useMultiStyleConfig("RadioCard", { variant });
 
+    const [isKeyboardUser, setKeyboardUser] = useState(false);
+    const [isFocused, setFocus] = useState(false);
+
     const isChecked = selectedValue === value;
 
-    const radioCardId = `radio-card-${useId()}`;
+    useEffect(() => {
+      const handleMouseDown = () => setKeyboardUser(false);
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === " ") {
+          setFocus(false);
+        } else {
+          setKeyboardUser(true);
+        }
+      };
+
+      window.addEventListener("mousedown", handleMouseDown);
+      window.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        window.removeEventListener("mousedown", handleMouseDown);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, []);
 
     useEffect(() => {
-      if (isChecked && typeof ref !== "function" && ref?.current) {
-        ref.current.focus();
+      if (isKeyboardUser && isChecked) {
+        setFocus(true);
+      } else {
+        setFocus(false);
       }
-    }, [isChecked]);
+    }, [isKeyboardUser, isChecked]);
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "Enter" || event.key === " ") {
-        onChange(value);
-      }
-      if (
-        event.key === "ArrowRight" ||
-        event.key === "ArrowDown" ||
-        event.key === "ArrowLeft" ||
-        event.key === "ArrowUp"
-      ) {
-        const nextRadioCard = event.currentTarget
-          .nextElementSibling as HTMLElement;
-        nextRadioCard.focus();
-      }
-    };
+    const inputId = `radio-card-${useId()}`;
 
     return (
-      <Box as="label" aria-label={String(children)} onKeyDown={handleKeyDown}>
+      <Box
+        onFocus={() => isKeyboardUser && setFocus(true)}
+        onBlur={() => setFocus(false)}
+      >
         <chakra.input
           type="radio"
-          id={radioCardId}
-          ref={ref}
-          value={value}
+          id={inputId}
           name={name}
+          ref={ref}
           checked={isChecked}
           onChange={() => onChange(value)}
           disabled={isDisabled}
           __css={styles.radioInput}
         />
         <Box
-          {...props}
-          tabIndex={0}
-          ref={ref}
-          role="radio"
+          as="label"
+          name={name}
+          htmlFor={inputId}
           aria-checked={isChecked}
-          aria-labelledby={radioCardId}
-          __css={{ ...styles.container, ...(isChecked && styles.checked) }}
           data-checked={isChecked}
           data-disabled={isDisabled}
+          {...props}
+          __css={{
+            ...styles.container,
+            ...(isChecked && styles.checked),
+            ...(isFocused && !isChecked && styles.focused),
+            ...(isChecked && isFocused && styles.focusedChecked),
+          }}
         >
           {children}
         </Box>