@vygruppen/spor-react 12.10.2 → 12.10.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.10.2",
+  "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.3",
-    "@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/datepicker/TimeField.tsx

@@ -30,9 +30,16 @@ 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}

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/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/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: {