@vygruppen/spor-react 11.1.3 → 11.1.5

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@11.1.3 build
+> @vygruppen/spor-react@11.1.5 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,10 +9,10 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 449.00 KB
-CJS ⚡️ Build success in 1957ms
-ESM dist/index.mjs 429.50 KB
-ESM ⚡️ Build success in 1959ms
-DTS ⚡️ Build success in 16234ms
-DTS dist/index.d.ts  343.31 KB
-DTS dist/index.d.mts 343.31 KB
+CJS dist/index.js 450.58 KB
+CJS ⚡️ Build success in 2008ms
+ESM dist/index.mjs 431.05 KB
+ESM ⚡️ Build success in 2008ms
+DTS ⚡️ Build success in 16836ms
+DTS dist/index.d.ts  343.30 KB
+DTS dist/index.d.mts 343.30 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 11.1.5
+
+### Patch Changes
+
+- 7c47e93: Fix(TextArea): Overlapping of label and text
+
+## 11.1.4
+
+### Patch Changes
+
+- cd49b43: Set correct position of label for input elements that caused the dance during hydration step
+
 ## 11.1.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -6822,10 +6822,10 @@ declare const theme: {
                 minHeight: string;
                 verticalAlign: string;
                 appearance: string;
-                paddingTop: number;
+                borderTop: string;
                 "&:not(:placeholder-shown)": {
                     "&:has(+ label)": {
-                        paddingTop: number;
+                        borderTop: string;
                     };
                     "& + label": {
                         transform: string;

package/dist/index.d.ts

@@ -6822,10 +6822,10 @@ declare const theme: {
                 minHeight: string;
                 verticalAlign: string;
                 appearance: string;
-                paddingTop: number;
+                borderTop: string;
                 "&:not(:placeholder-shown)": {
                     "&:has(+ label)": {
-                        paddingTop: number;
+                        borderTop: string;
                     };
                     "& + label": {
                         transform: string;

package/dist/index.js

@@ -1503,9 +1503,37 @@ var Input = react.forwardRef(
         "aria-labelledby": labelId,
         ref,
         overflow: "hidden",
-        placeholder: " "
+        placeholder: " ",
+        css: {
+          "&::-webkit-search-cancel-button": {
+            WebkitAppearance: "none"
+          }
+        }
       }
-    ), /* @__PURE__ */ React86__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, id: labelId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React86__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
+    ), /* @__PURE__ */ React86__namespace.default.createElement(
+      react.FormLabel,
+      {
+        htmlFor: inputId,
+        id: labelId,
+        pointerEvents: "none",
+        sx: {
+          position: "absolute",
+          left: "2.6rem",
+          top: "26.9%",
+          fontSize: "1.13rem",
+          pointerEvents: "none",
+          margin: 0,
+          zIndex: 2,
+          "input:focus + &, input[data-has-value] + &": {
+            color: "var(--chakra-colors-gray-600)"
+          },
+          "input[data-has-value] + &": {
+            transform: "translateY(-40%) scale(0.9)"
+          }
+        }
+      },
+      label
+    ), rightIcon && /* @__PURE__ */ React86__namespace.default.createElement(react.InputRightElement, { pointerEvents: "none" }, rightIcon));
   }
 );
 var InputLeftElement2 = react.forwardRef(
@@ -1984,6 +2012,28 @@ var Switch = react.forwardRef(
     return /* @__PURE__ */ React86__namespace.default.createElement(react.Switch, { as, size: size2, ...props, ref });
   }
 );
+var useLabelHeight = (label) => {
+  const labelRef = React86.useRef(null);
+  const [labelHeight, setLabelHeight] = React86.useState(0);
+  React86.useLayoutEffect(() => {
+    const updateLabelHeight = () => {
+      if (labelRef.current) {
+        setLabelHeight(labelRef.current.offsetHeight);
+      }
+    };
+    const observer = new ResizeObserver(updateLabelHeight);
+    if (labelRef.current) {
+      observer.observe(labelRef.current);
+    }
+    setTimeout(updateLabelHeight, 0);
+    return () => {
+      if (labelRef.current) {
+        observer.unobserve(labelRef.current);
+      }
+    };
+  }, [label]);
+  return { labelRef, labelHeight };
+};
 var Textarea = react.forwardRef((props, ref) => {
   const {
     spacingProps,
@@ -1992,15 +2042,26 @@ var Textarea = react.forwardRef((props, ref) => {
   const formControlProps = react.useFormControlContext();
   const fallbackId = `textarea-${React86.useId()}`;
   const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-  return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React86__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React86__namespace.default.createElement(
-    react.FormLabel,
+  const { labelRef, labelHeight } = useLabelHeight(label);
+  return /* @__PURE__ */ React86__namespace.default.createElement(
+    react.InputGroup,
     {
-      htmlFor: inputId,
-      id: `${inputId}-label`,
-      pointerEvents: "none"
+      position: "relative",
+      ...spacingProps,
+      style: { "--label-height": `${labelHeight}px` }
     },
-    label
-  ));
+    /* @__PURE__ */ React86__namespace.default.createElement(react.Textarea, { ...rest, id: inputId, ref, placeholder: " " }),
+    label && /* @__PURE__ */ React86__namespace.default.createElement(
+      react.FormLabel,
+      {
+        ref: labelRef,
+        htmlFor: inputId,
+        id: `${inputId}-label`,
+        pointerEvents: "none"
+      },
+      label
+    )
+  );
 });
 function getSpacingProps(props) {
   const {
@@ -14463,13 +14524,14 @@ var tabs_default = config40;
 var config41 = react.defineStyleConfig({
   baseStyle: (props) => ({
     ...inputBaseStyle(props).field,
-    minHeight: "5rem",
+    minHeight: "calc(var(--label-height) + 4rem)",
     verticalAlign: "top",
     appearance: "none",
-    paddingTop: 2,
+    borderTop: "0.8rem solid transparent",
     "&:not(:placeholder-shown)": {
       "&:has(+ label)": {
-        paddingTop: 4
+        borderTop: "var(--label-height) solid transparent"
+        // use border in stead of padding to avoid problems with scrolling
       },
       "& + label": {
         transform: "scale(0.825) translateY(-10px)"

package/dist/index.mjs

@@ -4,7 +4,7 @@ export { tokens12 as tokens };
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React86 from 'react';
-import React86__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
+import React86__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, useContext, createContext, useLayoutEffect, useCallback, useMemo } from 'react';
 import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ServiceFill24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useDateSegment, useDateField, useDatePicker, I18nProvider, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useProgressBar, useCalendar, useDateRangePicker, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { useOverlayTriggerState, useDateFieldState, useDatePickerState, useComboBoxState, useSelectState, Item, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
@@ -1483,9 +1483,37 @@ var Input = forwardRef(
         "aria-labelledby": labelId,
         ref,
         overflow: "hidden",
-        placeholder: " "
+        placeholder: " ",
+        css: {
+          "&::-webkit-search-cancel-button": {
+            WebkitAppearance: "none"
+          }
+        }
       }
-    ), /* @__PURE__ */ React86__default.createElement(FormLabel$1, { htmlFor: inputId, id: labelId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React86__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
+    ), /* @__PURE__ */ React86__default.createElement(
+      FormLabel$1,
+      {
+        htmlFor: inputId,
+        id: labelId,
+        pointerEvents: "none",
+        sx: {
+          position: "absolute",
+          left: "2.6rem",
+          top: "26.9%",
+          fontSize: "1.13rem",
+          pointerEvents: "none",
+          margin: 0,
+          zIndex: 2,
+          "input:focus + &, input[data-has-value] + &": {
+            color: "var(--chakra-colors-gray-600)"
+          },
+          "input[data-has-value] + &": {
+            transform: "translateY(-40%) scale(0.9)"
+          }
+        }
+      },
+      label
+    ), rightIcon && /* @__PURE__ */ React86__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
   }
 );
 var InputLeftElement2 = forwardRef(
@@ -1964,6 +1992,28 @@ var Switch = forwardRef(
     return /* @__PURE__ */ React86__default.createElement(Switch$1, { as, size: size2, ...props, ref });
   }
 );
+var useLabelHeight = (label) => {
+  const labelRef = useRef(null);
+  const [labelHeight, setLabelHeight] = useState(0);
+  useLayoutEffect(() => {
+    const updateLabelHeight = () => {
+      if (labelRef.current) {
+        setLabelHeight(labelRef.current.offsetHeight);
+      }
+    };
+    const observer = new ResizeObserver(updateLabelHeight);
+    if (labelRef.current) {
+      observer.observe(labelRef.current);
+    }
+    setTimeout(updateLabelHeight, 0);
+    return () => {
+      if (labelRef.current) {
+        observer.unobserve(labelRef.current);
+      }
+    };
+  }, [label]);
+  return { labelRef, labelHeight };
+};
 var Textarea = forwardRef((props, ref) => {
   const {
     spacingProps,
@@ -1972,15 +2022,26 @@ var Textarea = forwardRef((props, ref) => {
   const formControlProps = useFormControlContext();
   const fallbackId = `textarea-${useId()}`;
   const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-  return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React86__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React86__default.createElement(
-    FormLabel$1,
+  const { labelRef, labelHeight } = useLabelHeight(label);
+  return /* @__PURE__ */ React86__default.createElement(
+    InputGroup,
     {
-      htmlFor: inputId,
-      id: `${inputId}-label`,
-      pointerEvents: "none"
+      position: "relative",
+      ...spacingProps,
+      style: { "--label-height": `${labelHeight}px` }
     },
-    label
-  ));
+    /* @__PURE__ */ React86__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }),
+    label && /* @__PURE__ */ React86__default.createElement(
+      FormLabel$1,
+      {
+        ref: labelRef,
+        htmlFor: inputId,
+        id: `${inputId}-label`,
+        pointerEvents: "none"
+      },
+      label
+    )
+  );
 });
 function getSpacingProps(props) {
   const {
@@ -14443,13 +14504,14 @@ var tabs_default = config40;
 var config41 = defineStyleConfig$1({
   baseStyle: (props) => ({
     ...inputBaseStyle(props).field,
-    minHeight: "5rem",
+    minHeight: "calc(var(--label-height) + 4rem)",
     verticalAlign: "top",
     appearance: "none",
-    paddingTop: 2,
+    borderTop: "0.8rem solid transparent",
     "&:not(:placeholder-shown)": {
       "&:has(+ label)": {
-        paddingTop: 4
+        borderTop: "var(--label-height) solid transparent"
+        // use border in stead of padding to avoid problems with scrolling
       },
       "& + label": {
         transform: "scale(0.825) translateY(-10px)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.1.3",
+  "version": "11.1.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/Input.tsx

@@ -60,8 +60,33 @@ export const Input = forwardRef<InputProps, "input">(
           ref={ref}
           overflow="hidden"
           placeholder=" " // This is needed to make the label work as expected
+          css={{
+            "&::-webkit-search-cancel-button": {
+              WebkitAppearance: "none",
+            },
+          }}
         />
-        <FormLabel htmlFor={inputId} id={labelId} pointerEvents="none">
+
+        <FormLabel
+          htmlFor={inputId}
+          id={labelId}
+          pointerEvents="none"
+          sx={{
+            position: "absolute",
+            left: "2.6rem",
+            top: "26.9%",
+            fontSize: "1.13rem",
+            pointerEvents: "none",
+            margin: 0,
+            zIndex: 2,
+            "input:focus + &, input[data-has-value] + &": {
+              color: "var(--chakra-colors-gray-600)",
+            },
+            "input[data-has-value] + &": {
+              transform: "translateY(-40%) scale(0.9)",
+            },
+          }}
+        >
           {label}
         </FormLabel>
         {rightIcon && (

package/src/input/Textarea.tsx

@@ -6,11 +6,44 @@ import {
   useFormControlContext,
   InputGroup,
 } from "@chakra-ui/react";
-import React, { useId } from "react";
+import React, { useId, useLayoutEffect, useRef, useState } from "react";
 
 export type TextareaProps = Exclude<ChakraTextareaProps, "size"> & {
   label?: string;
 };
+
+/**
+ * Hook to calculate the height of the label element to adjust spacing for the input for floating label.
+ */
+const useLabelHeight = (label: string | undefined) => {
+  const labelRef = useRef<HTMLLabelElement>(null);
+  const [labelHeight, setLabelHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const updateLabelHeight = () => {
+      if (labelRef.current) {
+        setLabelHeight(labelRef.current.offsetHeight);
+      }
+    };
+
+    const observer = new ResizeObserver(updateLabelHeight);
+    if (labelRef.current) {
+      observer.observe(labelRef.current);
+    }
+
+    // Initial calculation with a slight delay to ensure CSS is applied
+    setTimeout(updateLabelHeight, 0);
+
+    return () => {
+      if (labelRef.current) {
+        observer.unobserve(labelRef.current);
+      }
+    };
+  }, [label]);
+
+  return { labelRef, labelHeight };
+};
+
 /**
  * Text area that works with the `FormControl` component.
  *
@@ -31,11 +64,18 @@ export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
   const fallbackId = `textarea-${useId()}`;
   const inputId = props.id ?? formControlProps?.id ?? fallbackId;
 
+  const { labelRef, labelHeight } = useLabelHeight(label);
+
   return (
-    <InputGroup position="relative" {...spacingProps}>
+    <InputGroup
+      position="relative"
+      {...spacingProps}
+      style={{ "--label-height": `${labelHeight}px` } as React.CSSProperties}
+    >
       <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
       {label && (
         <FormLabel
+          ref={labelRef}
           htmlFor={inputId}
           id={`${inputId}-label`}
           pointerEvents="none"

package/src/theme/components/textarea.ts

@@ -4,13 +4,13 @@ import { inputBaseStyle, inputVariant } from "../utils/input-utils";
 const config = defineStyleConfig({
   baseStyle: (props) => ({
     ...inputBaseStyle(props).field,
-    minHeight: "5rem",
+    minHeight: "calc(var(--label-height) + 4rem)",
     verticalAlign: "top",
     appearance: "none",
-    paddingTop: 2,
+    borderTop: "0.8rem solid transparent",
     "&:not(:placeholder-shown)": {
       "&:has(+ label)": {
-        paddingTop: 4,
+        borderTop: "var(--label-height) solid transparent", // use border in stead of padding to avoid problems with scrolling
       },
       "& + label": {
         transform: "scale(0.825) translateY(-10px)",