@vygruppen/spor-react 12.24.5 → 12.24.7

package/package.json

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

package/src/datepicker/CalendarTriggerButton.tsx

@@ -33,7 +33,7 @@ export const CalendarTriggerButton = forwardRef<
   const styles = recipe({ variant });
 
   return (
-    <PopoverAnchor {...buttonProps} ref={ref}>
+    <PopoverAnchor {...buttonProps} ref={ref} asChild>
       <IconButton
         icon={<CalendarOutline24Icon />}
         aria-label={t(texts.openCalendar)}

package/src/datepicker/DateTimeSegment.tsx

@@ -51,7 +51,7 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
         borderRadius="xs"
         fontSize={["mobile.sm", "desktop.sm"]}
         css={styles.dateTimeSegment}
-        aria-description={ariaDescription}
+        aria-label={ariaDescription}
         aria-labelledby={ariaLabel}
       >
         {isPaddable(segment.type)

package/src/input/Autocomplete.tsx

@@ -44,6 +44,7 @@ export const Autocomplete = ({
   loading,
   disabled,
   emptyLabel,
+  onFocus,
   openOnClick = true,
   openOnFocus = true,
   ...rest
@@ -104,7 +105,8 @@ export const Autocomplete = ({
             helperText={helperText}
             errorText={errorText}
             required={required}
-            onFocus={() => {
+            onFocus={(event) => {
+              onFocus?.(event);
               if (openOnFocus) combobox.setOpen(true);
             }}
           />

package/src/input/Select.tsx

@@ -4,6 +4,7 @@ import type {
   CollectionItem,
   SelectLabelProps,
   SelectRootProps as ChakraSelectRootProps,
+  SystemStyleObject,
 } from "@chakra-ui/react";
 import {
   Box,
@@ -93,7 +94,9 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
             <SelectValueText withPlaceholder={label ? true : false} />
           </SelectTrigger>
           {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
-          <SelectContent css={styles.selectContent}>{children}</SelectContent>
+          <SelectContent css={styles.selectContent} baseStyle={css}>
+            {children}
+          </SelectContent>
         </ChakraSelect.Root>
       </Field>
     );
@@ -129,7 +132,11 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
           <ChakraSelect.ItemText display="flex">
             {children}
           </ChakraSelect.ItemText>
-          {description && <Box css={styles.itemDescription}>{description}</Box>}
+          {description && (
+            <Box data-part="item-description" css={styles.itemDescription}>
+              {description}
+            </Box>
+          )}
         </Box>
 
         <ChakraSelect.ItemIndicator>
@@ -176,9 +183,12 @@ export const SelectTrigger = React.forwardRef<
       <ChakraSelect.Trigger ref={ref} css={styles.trigger}>
         {children}
       </ChakraSelect.Trigger>
-      <ChakraSelect.IndicatorGroup css={styles.indicatorGroup}>
+      <ChakraSelect.IndicatorGroup
+        css={styles.indicatorGroup}
+        data-part="indicator-group"
+      >
         {clearable && <SelectClearTrigger />}
-        <Box css={styles.indicator}>
+        <Box css={styles.indicator} data-part="indicator">
           <DropdownDownFill24Icon />
         </Box>
       </ChakraSelect.IndicatorGroup>
@@ -209,16 +219,18 @@ const SelectClearTrigger = React.forwardRef<
 type SelectContentProps = ChakraSelect.ContentProps & {
   portalled?: boolean;
   portalRef?: React.RefObject<HTMLElement>;
+  baseStyle?: SystemStyleObject;
 };
 
 export const SelectContent = React.forwardRef<
   HTMLDivElement,
   SelectContentProps
 >(function SelectContent(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props;
+  const { portalled = true, portalRef, baseStyle, ...rest } = props;
+
   return (
     <Portal disabled={!portalled} container={portalRef}>
-      <ChakraSelect.Positioner>
+      <ChakraSelect.Positioner css={baseStyle}>
         <ChakraSelect.Content {...rest} ref={ref} />
       </ChakraSelect.Positioner>
     </Portal>

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

@@ -1,5 +1,4 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
-import tokens from "@vygruppen/spor-design-tokens";
 
 import { switchAnatomy } from "./anatomy";
 
@@ -57,7 +56,6 @@ export const switchSlotRecipe = defineSlotRecipe({
     control: {
       boxSizing: "content-box",
       padding: 0.5,
-
       display: "inline-flex",
       gap: 1.5,
       flexShrink: 0,
@@ -69,7 +67,8 @@ export const switchSlotRecipe = defineSlotRecipe({
       height: "var(--switch-height)",
       transitionProperty: "common",
       transitionDuration: "fast",
-      outline: "2px solid",
+      outline: "1px solid",
+      outlineOffset: "-1px",
       outlineColor: "core.outline",
       _hover: {
         outline: "2px solid",
@@ -83,14 +82,17 @@ export const switchSlotRecipe = defineSlotRecipe({
       _focusVisible: {
         outlineWidth: "2px",
         outlineColor: "outline.focus",
-        outlineStyle: "solid",
+        outlineStyle: "double",
       },
 
       _checked: {
         backgroundColor: "brand.surface",
+        outline: "none",
         _focusVisible: {
-          outlineStyle: "double",
-          outlineWidth: `calc(3 * ${tokens.size.stroke.md})`, // space for double outline
+          outlineOffset: "1px",
+          outlineStyle: "solid",
+          outlineColor: "outline.focus",
+          outlineWidth: "2px",
         },
       },
       _disabled: {
@@ -113,32 +115,29 @@ export const switchSlotRecipe = defineSlotRecipe({
     size: {
       sm: {
         root: {
-          "--switch-width": "3.3rem",
-          "--switch-height": "1.5rem",
+          "--switch-width": "3rem",
+          "--switch-height": "1.125rem",
         },
         control: {
           borderRadius: "lg",
-          padding: "0.12rem",
         },
       },
       md: {
         root: {
-          "--switch-width": "4.1rem",
-          "--switch-height": "1.8rem",
+          "--switch-width": "3.75rem",
+          "--switch-height": "1.5rem",
         },
         control: {
           borderRadius: "xl",
-          padding: 0.5,
         },
       },
       lg: {
         root: {
-          "--switch-width": "4.8rem",
-          "--switch-height": "2.25rem",
+          "--switch-width": "4.5rem",
+          "--switch-height": "1.875rem",
         },
         control: {
           borderRadius: "2xl",
-          padding: 0.5,
         },
       },
     },