@vygruppen/spor-react 12.10.1 → 12.10.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.10.1",
+  "version": "12.10.3",
   "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": "1.2.1",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.2.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/alert/ServiceAlert.tsx

@@ -128,10 +128,10 @@ export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
           </Accordion.ItemTrigger>
 
           <Accordion.ItemContent asChild>
-            <Stack flexDirection="row" justifyContent="center" width="100%">
+            <Stack flexDirection="row" width="100%">
               <Accordion.ItemBody
                 as={Stack}
-                maxWidth={contentWidth}
+                width={contentWidth}
                 css={styles.itemBody}
               >
                 {children}

package/src/datepicker/DateField.tsx

@@ -1,11 +1,13 @@
 "use client";
-import { Box, Flex, useSlotRecipe } from "@chakra-ui/react";
+import { Box, Field, Flex, useSlotRecipe } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
 import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateSegment, useDateFieldState } from "react-stately";
 
+import { Label } from "@/input/Label";
+
 import { createTexts, useTranslation } from "../i18n";
 import { DatePickerVariantProps } from "./DatePicker";
 import { DateTimeSegment } from "./DateTimeSegment";
@@ -61,7 +63,9 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             position="absolute"
             paddingTop="2px"
           >
-            <label {...props.labelProps}>{props.label}</label>
+            <Label padding="0" fontSize="2xs" {...props.labelProps}>
+              {props.label} <Field.RequiredIndicator />
+            </Label>
           </Box>
         )}
         <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">

package/src/datepicker/TimeField.tsx

@@ -30,20 +30,23 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         style={{
           marginBottom: 0,
           fontSize: "mobile.xs",
+          top: 0,
           cursor: "text",
+          left: "50%",
+          transform: "translateX(-50%)",
           position: "absolute",
           paddingTop: "2px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          maxWidth: "80%",
         }}
       >
         {props.label}
       </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
-        {state.segments.map((segment: DateSegment) => (
-          <DateTimeSegment
-            key={JSON.stringify(segment)}
-            segment={segment}
-            state={state}
-          />
+        {state.segments.map((segment: DateSegment, index) => (
+          <DateTimeSegment key={index} segment={segment} state={state} />
         ))}
       </Flex>
       <input

package/src/datepicker/TimePicker.tsx

@@ -146,6 +146,7 @@ export const TimePicker = ({
         aria-disabled={isDisabled}
         aria-live="assertive"
         aria-label={ariaLabel}
+        position="relative"
         {...boxProps}
       >
         <IconButton
@@ -158,6 +159,7 @@ export const TimePicker = ({
           onClick={handleBackwardsClick}
           disabled={isDisabled}
           style={isDisabled ? { backgroundColor: "transparent" } : {}}
+          zIndex={1}
         />
         <TimeField label={label} state={state} name={name} />
         <IconButton
@@ -170,6 +172,7 @@ export const TimePicker = ({
           onClick={handleForwardClick}
           disabled={isDisabled}
           style={isDisabled ? { backgroundColor: "transparent" } : {}}
+          zIndex={1}
         />
       </StyledField>
     </Field>

package/src/dialog/Drawer.tsx

@@ -145,7 +145,7 @@ export const DrawerFullScreenHeader = forwardRef<
   HTMLDivElement,
   DrawerFullScreenHeaderProps
 >((props, ref) => {
-  const { backTrigger = true, title } = props;
+  const { backTrigger = true, closeTrigger = true, title } = props;
   return (
     <ChakraDrawer.Header {...props} ref={ref} asChild>
       <Grid templateColumns="1fr auto 1fr" height="auto" paddingX="8">
@@ -155,9 +155,11 @@ export const DrawerFullScreenHeader = forwardRef<
         <GridItem width="full" alignSelf="end" asChild>
           {title && <DrawerTitle>{title}</DrawerTitle>}
         </GridItem>
-        <GridItem width="full" alignSelf="end">
-          <DrawerCloseTrigger justifySelf="end" top="0" />
-        </GridItem>
+        {closeTrigger && (
+          <GridItem width="full" alignSelf="end">
+            <DrawerCloseTrigger justifySelf="end" top="0" />
+          </GridItem>
+        )}
       </Grid>
     </ChakraDrawer.Header>
   );

package/src/dialog/types.ts

@@ -23,5 +23,6 @@ export type DrawerProps = Omit<
 
 export type DrawerFullScreenHeaderProps = ChakraDrawer.HeaderProps & {
   backTrigger?: boolean;
+  closeTrigger?: boolean;
   title?: string;
 };

package/src/input/ListBox.tsx

@@ -90,6 +90,7 @@ export const ListBox = (props: ListBoxProps<object>) => {
       css={styles.root}
       aria-busy={loading}
       maxWidth={maxWidth}
+      padding="1"
     >
       {state.collection.size === 0 && props.emptyContent}
       {[...state.collection].map((item) =>
@@ -181,7 +182,14 @@ function Option({ item, state }: OptionProps) {
   }, []);
   return (
     <OptionContext.Provider value={{ labelProps, descriptionProps }}>
-      <ListItem {...optionProps} {...dataFields} ref={ref} css={styles.item}>
+      <ListItem
+        {...optionProps}
+        {...dataFields}
+        ref={ref}
+        css={styles.item}
+        padding="1"
+        marginX="0"
+      >
         {item.rendered}
       </ListItem>
     </OptionContext.Provider>
@@ -217,14 +225,19 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
 
   return (
     <List>
-      <ListItem {...itemProps} listStyleType={"none"}>
+      <ListItem
+        {...itemProps}
+        listStyleType={"none"}
+        marginLeft="0"
+        paddingX="1"
+      >
         {section.rendered && (
           <Box
             fontSize="mobile.xs"
             color={titleColor}
-            paddingX={3}
             paddingTop={1}
             marginTop={isFirstSection ? 0 : 2}
+            marginLeft="1"
             textTransform="uppercase"
             fontWeight="bold"
             {...headingProps}

package/src/input/PhoneNumberInput.tsx

@@ -80,46 +80,37 @@ export const PhoneNumberInput = forwardRef<
   };
 
   return (
-    <AttachedInputs
-      border={invalid ? "1px solid" : "none"}
-      borderColor={invalid ? "outline.error" : "none"}
-      outline={invalid ? "1px solid" : "none"}
-      outlineColor={invalid ? "outline.error" : "none"}
-      borderRadius={invalid ? "sm" : "none"}
-      display="grid"
-      gridTemplateColumns="1fr 10fr"
-    >
-      <>
-        <CountryCodeSelect
-          value={[value.countryCode]}
-          onValueChange={handleCountryCodeChange}
-          height="100%"
-          width="6.25rem"
-          variant={variant}
-          allowedCountryCodes={allowedCountryCodes}
-          data-state="on"
-        />
-        <Input
-          ref={ref}
-          type="tel"
-          {...props}
-          value={value.nationalNumber}
-          invalid={invalid}
-          errorText={errorText}
-          onChange={(e) => {
-            const target = e.target as HTMLInputElement;
-            // Removes everything but numbers, spaces and dashes
-            const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
-            onChange({
-              countryCode: value.countryCode,
-              nationalNumber: strippedValue,
-            });
-          }}
-          variant={variant}
-          data-state="on"
-          label={label}
-        />
-      </>
+    <AttachedInputs display="grid" gridTemplateColumns="1fr 10fr">
+      <CountryCodeSelect
+        value={[value.countryCode]}
+        onValueChange={handleCountryCodeChange}
+        height="100%"
+        width="6.25rem"
+        variant={variant}
+        allowedCountryCodes={allowedCountryCodes}
+        data-state="on"
+        invalid={invalid}
+      />
+      <Input
+        ref={ref}
+        type="tel"
+        {...props}
+        value={value.nationalNumber}
+        invalid={invalid}
+        errorText={errorText}
+        onChange={(e) => {
+          const target = e.target as HTMLInputElement;
+          // Removes everything but numbers, spaces and dashes
+          const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue,
+          });
+        }}
+        variant={variant}
+        data-state="on"
+        label={label}
+      />
     </AttachedInputs>
   );
 });

package/src/input/Switch.tsx

@@ -74,11 +74,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           checked={props.checked}
           css={styles.root}
         >
-          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
           <ChakraSwitch.HiddenInput ref={ref} />
           <ChakraSwitch.Control css={styles.control}>
             <ChakraSwitch.Thumb />
           </ChakraSwitch.Control>
+          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
         </ChakraSwitch.Root>
       </Field>
     );

package/src/layout/RadioCard.tsx

@@ -40,15 +40,11 @@ type RadioCardItemProps = Exclude<
 
 export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
   (props, ref) => {
-    const { inputProps, children, value, ariaLabel } = props;
+    const { inputProps, children } = props;
 
     return (
       <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput
-          aria-label={ariaLabel ?? value}
-          ref={ref}
-          {...inputProps}
-        />
+        <ChakraRadioCard.ItemHiddenInput ref={ref} {...inputProps} />
 
         <ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
       </ChakraRadioCard.Item>

package/src/link/TextLink.tsx

@@ -59,7 +59,15 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
     // If asChild is true, we need to clone the children and add the external icon
     if (props.asChild && isValidElement(children)) {
       return (
-        <ChakraLink href={href} {...props} ref={ref}>
+        <ChakraLink
+          href={href}
+          {...props}
+          ref={ref}
+          {...(isExternal && {
+            target: "_blank",
+            rel: "noopener noreferrer",
+          })}
+        >
           {cloneElement(children as React.ReactElement, {
             ...children.props,
             children: (
@@ -76,7 +84,15 @@ export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
     }
 
     return (
-      <ChakraLink href={href} {...props} ref={ref}>
+      <ChakraLink
+        href={href}
+        {...props}
+        ref={ref}
+        {...(isExternal && {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        })}
+      >
         {children}
         {isExternal && <ExternalIcon label={externalLabel} size={props.size} />}
       </ChakraLink>

package/src/theme/slot-recipes/alert-service.ts

@@ -47,13 +47,13 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       textWrap: "nowrap",
     },
     itemBody: {
-      paddingInline: 2,
+      marginX: "auto",
+      padding: "0 !important",
       paddingBottom: ["0.5", null, null, "1"],
       color: "text.inverted",
       "& > p": {
         gap: 2,
         width: "full",
-        justifyContent: "center",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
         paddingBottom: "3",

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

@@ -45,7 +45,7 @@ export const drawerSlotRecipe = defineSlotRecipe({
       maxHeight: "100dvh",
       color: "inherit",
       boxShadow: "lg",
-      minHeight: ["50vh", null, null, "auto"],
+      minHeight: ["10rem", null, null, "auto"],
       _open: {
         animationDuration: "slowest",
         animationTimingFunction: "ease-in-smooth",
@@ -59,16 +59,16 @@ export const drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: "5",
+      paddingX: ["3", null, null, "5"],
       paddingBottom: "1",
     },
     body: {
-      paddingX: "5",
+      paddingX: ["3", null, null, "5"],
       paddingY: ["1", null, null, "2"],
       flex: "1",
       overflow: "auto",
       fontSize: ["xs", null, null, "sm"],
-      minHeight: ["12", null, null, "auto"],
+      minHeight: ["2", null, null, "auto"],
     },
     footer: {
       display: "flex",
@@ -85,8 +85,8 @@ export const drawerSlotRecipe = defineSlotRecipe({
     },
     closeTrigger: {
       position: "absolute",
-      top: "2",
-      insetEnd: "2",
+      top: "0",
+      right: "0",
     },
   },
   variants: {

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

@@ -201,29 +201,20 @@ export const selectSlotRecipe = defineSlotRecipe({
       },
       floating: {
         control: {
-          backgroundColor: {
-            _light: "bg",
-            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-          },
           outline: "1px solid",
           outlineColor: "floating.outline",
           _hover: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.hover",
-            backgroundColor: {
-              _light: "floating.surface.hover",
-              _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-            },
+            outline: "2px solid",
+            outlineColor: "floating.outline",
           },
           _active: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.active",
-            backgroundColor: "floating.surface.active",
+            backgroundColor: "brand.surface.active",
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "text.disabled",
+            backgroundColor: "surface.disabled",
           },
-        },
-        selectContent: {
-          outline: "1px solid",
-          outlineColor: "floating.outline",
         },
       },
     },

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

@@ -9,7 +9,7 @@ export const switchSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: "inline-flex",
-      gap: "2.5",
+      gap: "2",
       alignItems: "center",
       position: "relative",
       verticalAlign: "middle",