@vygruppen/spor-react 12.8.5 → 12.8.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.5",
+  "version": "12.8.7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -67,8 +67,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.1.1",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/datepicker/CalendarTriggerButton.tsx

@@ -18,12 +18,13 @@ type CalendarTriggerButtonProps = AriaButtonProps<"button"> &
   BoxProps &
   CalendarVariants & {
     disabled?: boolean;
-    ariaLabelledby?: string;
   };
 export const CalendarTriggerButton = forwardRef<
   HTMLDivElement,
   CalendarTriggerButtonProps
->(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+  // onPress is extracted because it is not supported by chakra.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({ variant, disabled, onPress: _, ...buttonProps }, ref) => {
   const { t } = useTranslation();
 
   const recipe = useSlotRecipe({
@@ -39,7 +40,6 @@ export const CalendarTriggerButton = forwardRef<
         css={styles.calendarTriggerButton}
         variant="ghost"
         disabled={disabled}
-        aria-labelledby={ariaLabelledby}
       />
     </PopoverAnchor>
   );

package/src/datepicker/DateField.tsx

@@ -27,10 +27,9 @@ type DateFieldProps = AriaDateFieldProps<DateValue> &
     label?: React.ReactNode;
     labelProps?: DOMAttributes<FocusableElement>;
     name?: string;
-    labelId?: string;
   };
 export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
-  ({ labelId, ...props }, externalRef) => {
+  (props, externalRef) => {
     const locale = useCurrentLocale();
 
     const recipe = useSlotRecipe({
@@ -57,13 +56,12 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
       <Box minWidth="6rem" width="100%">
         {props.label && (
           <Box
-            as="label"
+            asChild
             css={styles.inputLabel}
             position="absolute"
             paddingTop="2px"
-            id={labelId}
           >
-            {props.label}
+            <label {...props.labelProps}>{props.label}</label>
           </Box>
         )}
         <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
@@ -72,7 +70,6 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
               key={i}
               segment={segment}
               ariaDescription={t(getAriaLabel(segment.type))}
-              ariaLabel={labelId}
               state={state}
             />
           ))}
@@ -81,6 +78,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
           type="hidden"
           value={state.value?.toString() ?? ""}
           name={props.name}
+          id={props.id}
         />
       </Box>
     );

package/src/datepicker/DatePicker.tsx

@@ -88,7 +88,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         ref as React.MutableRefObject<HTMLDivElement>,
       );
 
-    const labelId = `label-${useId()}`;
     const inputGroupId = `input-group-${useId()}`;
 
     const recipe = useSlotRecipe({
@@ -128,7 +127,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             <Field
               display="inline-flex"
               id={inputGroupId}
-              aria-labelledby={labelId}
               errorText={errorText}
               invalid={invalid}
               helperText={helperText}
@@ -140,7 +138,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   paddingX={3}
                   minHeight={minHeight}
                   isDisabled={props.isDisabled}
-                  ariaLabelledby={labelId}
                 >
                   <ChakraPopover.Trigger asChild>
                     <CalendarTriggerButton
@@ -154,7 +151,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   <DateField
                     label={props.label}
                     labelProps={labelProps}
-                    labelId={labelId}
                     name={props.name}
                     {...fieldProps}
                   />

package/src/datepicker/StyledField.tsx

@@ -14,12 +14,10 @@ type StyledFieldProps = BoxProps &
   PropsWithChildren<DatePickerVariantProps> &
   CalendarVariants & {
     isDisabled?: boolean;
-    ariaLabelledby?: string;
   };
 export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
   function StyledField(props, ref) {
-    const { children, variant, isDisabled, ariaLabelledby, ...otherProps } =
-      props;
+    const { children, variant, isDisabled, ...otherProps } = props;
     const { invalid } = useFieldContext() ?? {
       isInvalid: false,
     };
@@ -36,7 +34,6 @@ export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
         ref={ref}
         aria-invalid={invalid}
         aria-disabled={isDisabled}
-        aria-labelledby={ariaLabelledby}
       >
         {children}
       </Box>

package/src/datepicker/TimeField.tsx

@@ -39,7 +39,11 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
       </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
         {state.segments.map((segment: DateSegment) => (
-          <DateTimeSegment key={segment.type} segment={segment} state={state} />
+          <DateTimeSegment
+            key={JSON.stringify(segment)}
+            segment={segment}
+            state={state}
+          />
         ))}
       </Flex>
       <input

package/src/link/TextLink.tsx

@@ -37,9 +37,9 @@ const ExternalIcon = ({
 }) => (
   <>
     {size === "lg" || size === "md" ? (
-      <LinkOutOutline24Icon aria-hidden />
+      <LinkOutOutline24Icon aria-hidden display="inline" />
     ) : (
-      <LinkOutOutline18Icon aria-hidden />
+      <LinkOutOutline18Icon aria-hidden display="inline" />
     )}
     {/* Visually hidden text for screen readers */}
     <VisuallyHidden>{label}</VisuallyHidden>

package/src/theme/recipes/link.ts

@@ -2,34 +2,25 @@ import { defineRecipe } from "@chakra-ui/react";
 
 export const linkRecipe = defineRecipe({
   base: {
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    transitionTimingFunction: "ease-out",
-    cursor: "pointer",
-    backgroundImage: "linear-gradient(currentColor, currentColor)",
-    backgroundSize: "100% 1px",
-    backgroundPosition: "0 100%",
-    backgroundRepeat: "no-repeat",
-    borderRadius: "none",
-    paddingX: "2px",
-    paddingY: "0",
+    display: "inline",
     color: "inherit",
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "0",
-    position: "relative",
-    boxDecorationBreak: "clone",
-    textUnderlineOffset: "0",
+    cursor: "pointer",
+    textDecorationLine: "underline",
+    textDecorationSkipInk: "none",
+    textUnderlineOffset: "auto",
+    textUnderlinePosition: "from-font",
+
+    gap: "0.5",
+    borderRadius: "xs",
+    paddingX: "0.5",
+    whiteSpace: "normal",
+    wordBreak: "break-word",
 
-    "&:focus, &:focus-visible, &:active, &:hover": {
-      backgroundImage: "none",
-      backgroundSize: "100%",
-      outline: "none",
-      borderRadius: "xs",
+    _hover: {
+      textDecoration: "none",
     },
 
     "& svg": {
-      display: "inline-block",
       width: "1.125em",
       height: "1.125em",
       position: "relative",

package/src/theme/slot-recipes/checkbox.ts

@@ -8,6 +8,8 @@ export const checkboxSlotRecipe = defineSlotRecipe({
   slots: checkboxAnatomy.keys(),
   base: {
     root: {
+      whiteSpace: "normal",
+      wordBreak: "break-word",
       display: "flex",
       gap: 1.5,
       _hover: {
@@ -35,6 +37,7 @@ export const checkboxSlotRecipe = defineSlotRecipe({
     control: {
       width: 4,
       height: 4,
+      flexShrink: 0,
       transitionProperty: "background, border-color",
       transitionDuration: "moderate",
       border: "2px solid",
@@ -77,7 +80,6 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       },
     },
     label: {
-      userSelect: "none",
       _disabled: { opacity: 0.4 },
     },
   },