@vygruppen/spor-react 12.22.1 → 12.22.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.22.1",
+  "version": "12.22.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
+    "@vygruppen/spor-design-tokens": "4.3.2",
     "@vygruppen/spor-icon-react": "4.5.1",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-design-tokens": "4.3.2"
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
@@ -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/alert/AlertIcon.tsx

@@ -13,6 +13,7 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import { forwardRef } from "react";
+import { VisuallyHidden } from "react-aria";
 
 import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
@@ -30,7 +31,10 @@ export const AlertIcon = forwardRef<SVGSVGElement, AlertIconProps>(
     const { t } = useTranslation();
 
     return (
-      <Box ref={ref} aria-label={t(texts[variant as keyof typeof texts])}>
+      <Box ref={ref}>
+        <VisuallyHidden>
+          {t(texts[variant as keyof typeof texts])}
+        </VisuallyHidden>
         {CustomAlertIcon ? (
           <CustomAlertIcon color={`alert.${variant}.icon`} />
         ) : (

package/src/input/AttachedInputs.tsx

@@ -90,7 +90,7 @@ const SwitchButton = chakra(
   defineRecipe({
     base: {
       position: "absolute !important",
-      zIndex: "docked !important",
+      zIndex: "101 !important",
       // eslint-disable-next-line spor/use-semantic-tokens
       bg: "bg !important",
       outlineWidth: "1px !important",
@@ -107,7 +107,7 @@ const SwitchButton = chakra(
         },
         vertical: {
           top: "calc(50% - 15px)",
-          right: "12px",
+          right: "3rem",
           transform: "rotate(90deg)",
         },
       },

package/src/input/Autocomplete.tsx

@@ -2,6 +2,7 @@ import {
   Combobox,
   ComboboxItemProps,
   ComboboxRootProps,
+  useCombobox,
   useComboboxContext,
   useFilter,
   useListCollection,
@@ -24,6 +25,8 @@ type Props = {
   leftIcon?: React.ReactNode;
   filteredExternally?: boolean;
   loading?: boolean;
+  emptyLabel?: React.ReactNode;
+  openOnFocus?: boolean;
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 
@@ -40,6 +43,9 @@ export const Autocomplete = ({
   filteredExternally,
   loading,
   disabled,
+  emptyLabel,
+  openOnClick = true,
+  openOnFocus = true,
   ...rest
 }: Props) => {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -64,26 +70,29 @@ export const Autocomplete = ({
     [children, collection.items],
   );
 
+  const combobox = useCombobox({
+    collection,
+    openOnClick,
+    onInputValueChange: (event) => {
+      if (!filteredExternally) {
+        filter(event.inputValue);
+      }
+      onInputValueChange?.(event);
+    },
+    positioning: {
+      placement: "bottom",
+      offset: {
+        mainAxis: 3,
+        crossAxis: -1,
+      },
+      flip: false,
+    },
+    disabled,
+    ...rest,
+  });
+
   return (
-    <Combobox.Root
-      {...rest}
-      collection={collection}
-      onInputValueChange={(event) => {
-        if (!filteredExternally) {
-          filter(event.inputValue);
-        }
-        onInputValueChange?.(event);
-      }}
-      positioning={{
-        placement: "bottom",
-        offset: {
-          mainAxis: 3,
-          crossAxis: -1,
-        },
-        flip: false,
-      }}
-      disabled={disabled}
-    >
+    <Combobox.RootProvider value={combobox}>
       <Combobox.Control>
         <Combobox.Input asChild>
           <Input
@@ -95,17 +104,22 @@ export const Autocomplete = ({
             helperText={helperText}
             errorText={errorText}
             required={required}
+            onFocus={() => {
+              if (openOnFocus) combobox.setOpen(true);
+            }}
           />
         </Combobox.Input>
         <Combobox.IndicatorGroup>
-          <Combobox.ClearTrigger asChild>
+          <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
             <CloseButton size="xs" />
           </Combobox.ClearTrigger>
         </Combobox.IndicatorGroup>
       </Combobox.Control>
       <Combobox.Positioner>
         <Combobox.Content>
-          <Combobox.Empty>{!loading && t(texts.noItemsFound)}</Combobox.Empty>
+          <Combobox.Empty>
+            {!loading && (emptyLabel ?? t(texts.noItemsFound))}
+          </Combobox.Empty>
           {loading ? (
             <ColorSpinner width="1.5rem" p="2" />
           ) : (
@@ -113,7 +127,7 @@ export const Autocomplete = ({
           )}
         </Combobox.Content>
       </Combobox.Positioner>
-    </Combobox.Root>
+    </Combobox.RootProvider>
   );
 };
 
@@ -206,4 +220,10 @@ const texts = createTexts({
     sv: "Inga resultat",
     en: "No results found",
   },
+  clearValue: {
+    nb: "Tøm verdi",
+    nn: "Tøm verdi",
+    sv: "Rensa värde",
+    en: "Clear value",
+  },
 });

package/src/input/Field.tsx

@@ -129,7 +129,9 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
             </FloatingLabel>
           )}
           {errorText && (
-            <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+            <ChakraField.ErrorText aria-live="polite">
+              {errorText}
+            </ChakraField.ErrorText>
           )}
         </ChakraField.Root>
         {helperText && (

package/src/input/FloatingLabel.tsx

@@ -19,14 +19,14 @@ const floatingLabelStyles = defineStyle({
   },
 
   pos: "absolute",
-  transition: "position",
+  transition: "top 160ms ease, font-size 160ms ease",
 
   top: "0.9rem",
   color: "text",
   fontSize: ["mobile.sm", "desktop.sm"],
 
   "&[data-float]": {
-    fontSize: ["mobile.xs", "desktop.xs"],
+    fontSize: ["mobile.2xs", "desktop.2xs"],
     color: "text",
     top: "0.3rem",
   },

package/src/input/Input.tsx

@@ -107,7 +107,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         id={props.id}
         labelAsChild={labelAsChild}
         label={
-          <Flex fontSize={fontSize ?? "mobile.md"}>
+          <Flex>
             <Box visibility="hidden">{startElement}</Box>
             {label}
           </Flex>
@@ -119,6 +119,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           <InputElement
             pointerEvents="none"
             paddingX={2}
+            aria-hidden="true"
             fontSize={fontSize ?? "mobile.md"}
           >
             {startElement}

package/src/input/NumericStepper.tsx

@@ -107,7 +107,6 @@ export const NumericStepper = React.forwardRef<
     <Field
       css={styles.root}
       width="auto"
-      id={idProperty}
       ref={ref}
       label={label}
       helperText={helperText}
@@ -133,7 +132,6 @@ export const NumericStepper = React.forwardRef<
           }
         }}
         disabled={disabled || value <= minValue}
-        id={value <= minValue ? undefined : idProperty}
       />
       {withInput ? (
         <Input
@@ -142,7 +140,7 @@ export const NumericStepper = React.forwardRef<
           name={nameProperty}
           value={value}
           disabled={disabled}
-          id={value === 0 ? undefined : idProperty}
+          id={idProperty}
           css={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
           aria-live="assertive"
@@ -189,7 +187,6 @@ export const NumericStepper = React.forwardRef<
         )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         disabled={disabled || value >= maxValue}
-        id={value >= maxValue ? undefined : idProperty}
       />
     </Field>
   );

package/src/theme/recipes/attached-inputs.ts

@@ -8,12 +8,13 @@ export const attachedInputsRecipe = defineRecipe({
     "& select": {
       borderEndRadius: 0,
     },
+
     "& > *": {
       position: "relative",
-      zIndex: 0,
+      zIndex: 100,
     },
     "& > *:focus-within": {
-      zIndex: 1,
+      zIndex: 101,
     },
   },
   variants: {

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

@@ -16,7 +16,6 @@ export const comboboxSlotRecipe = defineSlotRecipe({
     label: {
       fontWeight: "medium",
       userSelect: "none",
-      textStyle: "sm",
     },
 
     input: {

package/src/theme/tokens/text-styles.ts

@@ -6,8 +6,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.xxl["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.xxl["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.xxl["font-family"],
@@ -18,8 +16,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["xl-display"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["xl-display"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["xl-display"]["font-family"],
@@ -30,8 +26,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["xl-sans"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["xl-sans"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["xl-sans"]["font-family"],
@@ -42,8 +36,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.lg["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.lg["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.lg["font-family"],
@@ -54,8 +46,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["md-lg"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["md-lg"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["md-lg"]["font-family"],
@@ -66,8 +56,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.md["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.md["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.md["font-family"],
@@ -78,8 +66,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.sm["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.sm["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.sm["font-family"],
@@ -90,8 +76,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.xs["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.xs["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.xs["font-family"],
@@ -102,8 +86,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["2xs"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["2xs"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["2xs"]["font-family"],