@vygruppen/spor-react 12.24.10 → 12.24.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.10",
+  "version": "12.24.12",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -48,7 +48,7 @@
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-icon-react": "4.5.2"
+    "@vygruppen/spor-icon-react": "4.5.3"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/accordion/Accordion.tsx

@@ -55,14 +55,14 @@ import {
 
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   (props, ref) => {
-    const { variant = "core", children, gap = 2, ...rest } = props;
+    const { variant = "core", children, gap = 2, css, ...rest } = props;
     const recipe = useSlotRecipe({ key: "accordion" });
     const styles = recipe({ variant });
     return (
       <ChakraAccordion.Root
         {...rest}
         ref={ref}
-        css={styles.root}
+        css={{ ...styles.root, ...css }}
         variant={variant}
       >
         <Stack gap={gap}>{children}</Stack>
@@ -79,6 +79,7 @@ export const AccordionItemTrigger = forwardRef<
     startElement,
     children,
     headingLevel,
+    css,
     showChevron = true,
     ...rest
   } = props;
@@ -87,7 +88,11 @@ export const AccordionItemTrigger = forwardRef<
   const styles = recipe();
   return (
     <Box as={headingLevel}>
-      <ChakraAccordion.ItemTrigger {...rest} ref={ref} css={styles.itemTrigger}>
+      <ChakraAccordion.ItemTrigger
+        {...rest}
+        ref={ref}
+        css={{ ...styles.itemTrigger, ...css }}
+      >
         <HStack flex="1" gap={1} textAlign="start" width="full">
           {startElement && startElement}
           {children}
@@ -106,14 +111,24 @@ export const AccordionItemContent = forwardRef<
   HTMLDivElement,
   AccordionItemContentProps
 >(function AccordionItemContent(props, ref) {
-  const { children } = props;
+  const {
+    children,
+    css,
+    "aria-labelledby": ariaLabelledBy,
+    ...otherProps
+  } = props;
 
   const recipe = useSlotRecipe({ key: "accordion" });
   const styles = recipe();
 
+  // We need to be able to override aria-labelledby here to prevent an issue on voiceover on iPhone where the related AccordionItemTrigger
+  // is announced after announcing the ItemContent. This issue occurs because the default aria-labelledby is set to the id of the AccordionItemTrigger.
   return (
-    <ChakraAccordion.ItemContent css={styles.itemContent}>
-      <ChakraAccordion.ItemBody {...props} ref={ref}>
+    <ChakraAccordion.ItemContent
+      css={{ ...styles.itemContent, ...css }}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <ChakraAccordion.ItemBody {...otherProps} ref={ref}>
         {children}
       </ChakraAccordion.ItemBody>
     </ChakraAccordion.ItemContent>

package/src/alert/Alert.tsx

@@ -66,7 +66,10 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
   if (!open) return null;
   return (
     <ChakraAlert.Root ref={ref} {...props}>
-      <ChakraAlert.Content flexDirection={title ? "column" : "row"}>
+      <ChakraAlert.Content
+        flexDirection={title ? "column" : "row"}
+        data-part="content"
+      >
         <HStack gap="1" alignItems="flex-start">
           {showIndicator && (
             <ChakraAlert.Indicator asChild>
@@ -74,7 +77,10 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
             </ChakraAlert.Indicator>
           )}
           {title && (
-            <ChakraAlert.Title paddingRight={closable ? 6 : 0}>
+            <ChakraAlert.Title
+              paddingRight={closable ? 6 : 0}
+              data-part="title"
+            >
               {title}
             </ChakraAlert.Title>
           )}
@@ -84,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
             width="100%"
             paddingLeft={title ? 0.5 : 0}
             paddingRight={closable ? 6 : 0}
+            data-part="description"
           >
             {children}
           </ChakraAlert.Description>
@@ -91,6 +98,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       </ChakraAlert.Content>
       {closable && (
         <CloseButton
+          data-part="close-button"
           size="xs"
           position="absolute"
           top="1.5"

package/src/breadcrumb/Breadcrumb.tsx

@@ -21,21 +21,26 @@ import React, { forwardRef } from "react";
  * ```
  */
 export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
-  ({ children, ...props }, ref) => {
+  ({ children, css, ...props }, ref) => {
     const validChildren = React.Children.toArray(children).filter((element) =>
       React.isValidElement(element),
     );
 
     return (
-      <ChakraBreadcrumb.Root ref={ref} {...props}>
-        <ChakraBreadcrumb.List>
+      <ChakraBreadcrumb.Root ref={ref} {...props} css={css}>
+        <ChakraBreadcrumb.List data-part="list">
           {validChildren.map((child, index) => {
             const isLast = index === validChildren.length - 1;
             return (
               <React.Fragment key={index}>
-                <ChakraBreadcrumb.Item>{child}</ChakraBreadcrumb.Item>
+                <ChakraBreadcrumb.Item data-part="item">
+                  {child}
+                </ChakraBreadcrumb.Item>
                 {!isLast && (
-                  <ChakraBreadcrumb.Separator aria-hidden="true">
+                  <ChakraBreadcrumb.Separator
+                    aria-hidden="true"
+                    data-part="separator"
+                  >
                     <DropdownRightFill18Icon />
                   </ChakraBreadcrumb.Separator>
                 )}

package/src/calendar/Calendar.tsx

@@ -1,3 +1,5 @@
+import { SystemStyleObject } from "@chakra-ui/react";
+
 import { useCalendar } from "@/calendar/CalendarContext";
 import { CalendarGrid } from "@/calendar/CalendarGrid";
 import { CalendarHeader } from "@/calendar/CalendarHeader";
@@ -8,17 +10,24 @@ type Props = {
    * Show two months side by side
    */
   dualView?: boolean;
+  css?: SystemStyleObject;
 };
 
 /**
  * Calendar component that displays a grid of days for a specific month.
  * Standard view with pagination, with the option to show dual months side by side.
  */
-export function Calendar({ dualView }: Props) {
+export function Calendar({ dualView, css }: Props) {
   const { calendarProps, ref } = useCalendar();
 
   return (
-    <Box width="fit-content" ref={ref} {...calendarProps}>
+    <Box
+      width="fit-content"
+      ref={ref}
+      {...calendarProps}
+      css={css}
+      data-part="root"
+    >
       <CalendarHeader dualView={dualView} />
 
       <Flex alignItems="flex-start">

package/src/calendar/CalendarCell.tsx

@@ -50,6 +50,7 @@ export function CalendarCell({ date, currentMonth }: Props) {
         padding={0.5}
       >
         <Box
+          data-part="calendar-cell"
           width="100%"
           height="100%"
           display="flex"

package/src/calendar/CalendarGrid.tsx

@@ -41,7 +41,7 @@ export function CalendarGrid({ offset = {} }: Props) {
   const weeksInMonth = getWeeksInMonth(startDate, locale);
 
   return (
-    <table {...gridProps} cellPadding="0">
+    <table {...gridProps} cellPadding="0" data-part="calendar-grid">
       <thead {...headerProps}>
         <tr>
           {weekDays[language].map((day, index) => (
@@ -61,6 +61,7 @@ export function CalendarGrid({ offset = {} }: Props) {
                 paddingTop={0.5}
                 textAlign="center"
                 fontWeight="bold"
+                data-part="calendar-table-heading"
               >
                 {day}
               </Text>

package/src/calendar/CalendarHeader.tsx

@@ -32,7 +32,12 @@ export function CalendarHeader({ dualView }: Props) {
   }
 
   return (
-    <Flex flex={1} alignItems="center" paddingBottom={4}>
+    <Flex
+      flex={1}
+      alignItems="center"
+      paddingBottom={4}
+      data-part="calendar-header"
+    >
       {/* Add a screen reader only description of the entire visible range rather than
        * a separate heading above each month grid. This is placed first in the DOM order
        * so that it is the first thing a touch screen reader user encounters.

package/src/datepicker/Calendar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, useSlotRecipe } from "@chakra-ui/react";
+import { Box, SystemStyleObject, useSlotRecipe } from "@chakra-ui/react";
 import { createCalendar } from "@internationalized/date";
 import {
   CalendarProps as ReactAriaCalendarProps,
@@ -18,10 +18,13 @@ import { useCurrentLocale } from "./utils";
 type CalendarProps = ReactAriaCalendarProps<DateValue> &
   CalendarVariants & {
     showYearNavigation?: boolean;
+  } & {
+    css?: SystemStyleObject;
   };
 export function Calendar({
   showYearNavigation,
   variant,
+  css,
   ...props
 }: CalendarProps) {
   const { t } = useTranslation();
@@ -43,7 +46,11 @@ export function Calendar({
     t(texts.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
 
   return (
-    <Box {...calendarProps} aria-label={ariaLabel} css={styles.box}>
+    <Box
+      {...calendarProps}
+      aria-label={ariaLabel}
+      css={{ ...styles.box, ...css }}
+    >
       <CalendarHeader state={state} showYearNavigation={showYearNavigation} />
       <CalendarGrid variant={variant} state={state} />
     </Box>

package/src/datepicker/CalendarCell.tsx

@@ -83,6 +83,7 @@ export function CalendarCell({
         ref={ref}
         css={styles.dateCell}
         hidden={isOutsideVisibleRange}
+        data-part="calendar-cell"
       >
         {date.day}
       </spor.button>

package/src/datepicker/CalendarGrid.tsx

@@ -52,9 +52,9 @@ export function CalendarGrid({
   const styles = recipe({ variant });
 
   return (
-    <Box as="table" {...gridProps} css={styles.box}>
+    <Box as="table" {...gridProps} css={styles.box} data-part="calendar-grid">
       <thead {...headerProps}>
-        <tr>
+        <tr data-part="calendar-table-heading">
           {weekDays[language].map((day, index) => {
             return (
               <Text

package/src/datepicker/CalendarHeader.tsx

@@ -42,7 +42,12 @@ export function CalendarHeader({
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
 
   return (
-    <Flex alignItems="center" paddingBottom="4" justifyContent="space-between">
+    <Flex
+      alignItems="center"
+      paddingBottom="4"
+      justifyContent="space-between"
+      data-part="calendar-header"
+    >
       <CalendarNavigator
         title={title || (isYearPickerVisible ? monthTitle : monthAndYearTitle)}
         unit="month"

package/src/datepicker/DatePicker.tsx

@@ -7,6 +7,7 @@ import {
   PopoverRootProps,
   Portal,
   RecipeVariantProps,
+  SystemStyleObject,
   useFieldContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
@@ -47,7 +48,9 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
     overrideBorderColor?: string;
     isActive?: boolean;
     onClick?: () => void;
-  } & FieldBaseProps;
+  } & FieldBaseProps & {
+    css?: SystemStyleObject;
+  };
 
 /**
  * A date picker component.
@@ -71,6 +74,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       invalid = false,
       helperText,
       positioning,
+      css,
       ...props
     },
     externalRef,
@@ -121,6 +125,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               {...calendarProps}
               variant={variant}
               showYearNavigation={showYearNavigation}
+              css={css}
             />
           </ChakraPopover.Body>
         </ChakraPopover.Content>
@@ -134,6 +139,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           display="inline-flex"
           flexDirection="column"
           width={width}
+          css={css}
         >
           <ChakraPopover.Root {...dialogProps} positioning={positioning}>
             <Field

package/src/input/Autocomplete.tsx

@@ -73,7 +73,7 @@ export const Autocomplete = ({
 
   const combobox = useCombobox({
     collection,
-    openOnClick,
+    openOnClick: filteredChildren.length > 0 ? openOnClick : false,
     onInputValueChange: (event) => {
       if (!filteredExternally) {
         filter(event.inputValue);
@@ -107,7 +107,8 @@ export const Autocomplete = ({
             required={required}
             onFocus={(event) => {
               onFocus?.(event);
-              if (openOnFocus) combobox.setOpen(true);
+              if (openOnFocus && filteredChildren.length > 0)
+                combobox.setOpen(true);
             }}
           />
         </Combobox.Input>
@@ -119,14 +120,12 @@ export const Autocomplete = ({
       </Combobox.Control>
       <Combobox.Positioner>
         <Combobox.Content>
-          <Combobox.Empty>
-            {!loading && (emptyLabel ?? t(texts.noItemsFound))}
-          </Combobox.Empty>
-          {loading ? (
-            <ColorSpinner width="1.5rem" p="2" />
-          ) : (
-            <>{filteredChildren}</>
+          {!loading && (
+            <Combobox.Empty>
+              {emptyLabel ?? t(texts.noItemsFound)}
+            </Combobox.Empty>
           )}
+          {loading ? <ColorSpinner width="1.5rem" p="2" /> : filteredChildren}
         </Combobox.Content>
       </Combobox.Positioner>
     </Combobox.RootProvider>

package/src/input/Switch.tsx

@@ -54,6 +54,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       invalid,
       errorText,
       helperText,
+      css,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "switch" });
@@ -67,6 +68,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
         helperText={helperText}
         required={props.required}
         id={rest.id}
+        css={css}
       >
         <ChakraSwitch.Root
           ref={rootRef}

package/src/layout/RadioCard.tsx

@@ -4,7 +4,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import React, { forwardRef, useId } from "react";
 
 import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
@@ -41,12 +41,24 @@ type RadioCardItemProps = Exclude<
 export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
   (props, ref) => {
     const { inputProps, children } = props;
+    const uniqueId = useId();
+    const itemControlId = `radio-card-item-control-${uniqueId}`;
+
+    const inputHasAriaLabel =
+      inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
 
     return (
       <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput ref={ref} {...inputProps} />
-
-        <ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
+        <ChakraRadioCard.ItemHiddenInput
+          aria-labelledby={
+            inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
+          }
+          ref={ref}
+          {...inputProps}
+        />
+        <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
+          {children}
+        </ChakraRadioCard.ItemControl>
       </ChakraRadioCard.Item>
     );
   },

package/src/loader/ProgressBar.tsx

@@ -84,6 +84,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
       isActive = true,
       showValueText = false,
       height = "0.5rem",
+      css,
       ...rest
     },
     ref,
@@ -96,7 +97,12 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     });
 
     return (
-      <Progress.Root css={styles.container} ref={ref} value={value} {...rest}>
+      <Progress.Root
+        css={{ ...styles.container, ...css }}
+        ref={ref}
+        value={value}
+        {...rest}
+      >
         <Progress.Track
           height={height}
           css={isActive ? styles.background : styles.disabledBackground}

package/src/progress-indicator/ProgressIndicator.tsx

@@ -1,5 +1,10 @@
 "use client";
-import { BoxProps, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
+import {
+  BoxProps,
+  RecipeVariantProps,
+  SystemStyleObject,
+  useSlotRecipe,
+} from "@chakra-ui/react";
 import React, { forwardRef, PropsWithChildren } from "react";
 
 import { Box, createTexts, useTranslation } from "..";
@@ -16,6 +21,7 @@ export type ProgressIndicatorProps = BoxProps &
     numberOfSteps: number;
     activeStep: number;
     colorPalette?: string;
+    css?: SystemStyleObject;
   };
 
 /**
@@ -35,7 +41,7 @@ export type ProgressIndicatorProps = BoxProps &
 export const ProgressIndicator = forwardRef<
   HTMLDivElement,
   ProgressIndicatorProps
->(({ numberOfSteps, activeStep }, ref) => {
+>(({ numberOfSteps, activeStep, css }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator",
@@ -45,7 +51,7 @@ export const ProgressIndicator = forwardRef<
 
   return (
     <Box
-      css={styles.root}
+      css={{ ...styles.root, ...css }}
       role="progressbar"
       aria-valuemin={1}
       aria-valuemax={numberOfSteps}
@@ -53,13 +59,17 @@ export const ProgressIndicator = forwardRef<
       aria-valuetext={t(texts.stepsOf(activeStep, numberOfSteps))}
       ref={ref}
     >
-      <Box css={styles.container}>
+      <Box css={{ ...styles.container, ...css }}>
         {Array.from({ length: numberOfSteps }, (_, index) => (
-          <ProgressDot
+          <Box
             key={index}
-            aria-valuenow={index + 1}
-            isActive={activeStep === index + 1}
-          />
+            data-part={activeStep === index + 1 ? "current-step" : "step"}
+          >
+            <ProgressDot
+              aria-valuenow={index + 1}
+              isActive={activeStep === index + 1}
+            />
+          </Box>
         ))}
       </Box>
     </Box>

package/src/stepper/Stepper.tsx

@@ -1,5 +1,10 @@
 "use client";
-import { Flex, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
+import {
+  Flex,
+  RecipeVariantProps,
+  SystemStyleObject,
+  useSlotRecipe,
+} from "@chakra-ui/react";
 import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
 import { forwardRef, PropsWithChildren } from "react";
 
@@ -36,6 +41,7 @@ type StepperProps = PropsWithChildren<StepperVariantProps> & {
   variant: "core" | "accent";
   /** Disables all clicks */
   disabled?: boolean;
+  css?: SystemStyleObject;
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -63,6 +69,7 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
       headingLevel,
       variant,
       disabled,
+      css,
     } = props;
     const recipe = useSlotRecipe({ key: "stepper" });
     const style = recipe({ variant });
@@ -72,14 +79,14 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
     const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
 
     return (
-      <Box css={style.root} ref={ref}>
+      <Box css={{ ...style.root, ...css }} ref={ref}>
         <StepperProvider
           onClick={onClick}
           activeStep={activeStep}
           variant={variant}
           numberOfSteps={numberOfSteps}
         >
-          <Box css={style.container}>
+          <Box css={style.container} data-part="root">
             <Box css={style.innerContainer}>
               <Flex
                 justifyContent="space-between"
@@ -102,11 +109,16 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
                   }}
                 />
                 {heading && (
-                  <Text variant="sm" as={headingLevel} css={style.title}>
+                  <Text
+                    variant="sm"
+                    as={headingLevel}
+                    css={style.title}
+                    data-part="title"
+                  >
                     {heading}
                   </Text>
                 )}
-                <Box css={style.stepCounter}>
+                <Box css={style.stepCounter} data-part="step-counter">
                   {t(texts.stepsOf(activeStep, numberOfSteps))}
                 </Box>
               </Flex>

package/src/stepper/StepperStep.tsx

@@ -33,7 +33,7 @@ export const StepperStep = ({
     (state !== "active" && disabledOverride) || state === "disabled";
 
   return (
-    <Box css={style.stepContainer}>
+    <Box css={style.stepContainer} data-part="step-container">
       {stepNumber > 1 && (
         <DropdownRightFill18Icon
           marginX={5}
@@ -67,6 +67,7 @@ export const StepperStep = ({
               : style.stepButton
           }
           fontWeight={state === "active" ? "bold" : undefined}
+          data-part="step-button"
         >
           {children}
         </Button>