@vygruppen/spor-react 12.24.4 → 12.24.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.4",
+  "version": "12.24.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,8 +47,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.3.3",
-    "@vygruppen/spor-icon-react": "4.5.2",
-    "@vygruppen/spor-loader": "0.7.0"
+    "@vygruppen/spor-loader": "0.7.0",
+    "@vygruppen/spor-icon-react": "4.5.2"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/input/Autocomplete.tsx

@@ -116,7 +116,14 @@ export const Autocomplete = ({
         </Combobox.IndicatorGroup>
       </Combobox.Control>
       <Combobox.Positioner>
-        <Combobox.Content>
+        <Combobox.Content
+          onBlur={(event) => {
+            // Close if focus moves outside the content, necessary for iPhone VoiceOver
+            if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+              combobox.setOpen(false);
+            }
+          }}
+        >
           <Combobox.Empty>
             {!loading && (emptyLabel ?? t(texts.noItemsFound))}
           </Combobox.Empty>

package/src/input/Select.tsx

@@ -4,6 +4,7 @@ import type {
   CollectionItem,
   SelectLabelProps,
   SelectRootProps as ChakraSelectRootProps,
+  SystemStyleObject,
 } from "@chakra-ui/react";
 import {
   Box,
@@ -66,6 +67,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
       errorText,
       invalid,
       helperText,
+      css,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "select" });
@@ -78,6 +80,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
         helperText={helperText}
         required={props.required}
         id={rest.id}
+        css={css}
       >
         <ChakraSelect.Root
           {...rest}
@@ -91,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>
     );
@@ -127,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>
@@ -174,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>
@@ -207,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,
         },
       },
     },