@vygruppen/spor-react 11.1.2 → 11.1.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@11.1.2 build
+> @vygruppen/spor-react@11.1.4 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 448.88 KB
-CJS ⚡️ Build success in 2008ms
-ESM dist/index.mjs 429.38 KB
-ESM ⚡️ Build success in 2009ms
-DTS ⚡️ Build success in 16043ms
+CJS dist/index.js 449.60 KB
+CJS ⚡️ Build success in 1977ms
+ESM dist/index.mjs 430.10 KB
+ESM ⚡️ Build success in 1978ms
+DTS ⚡️ Build success in 15382ms
 DTS dist/index.d.ts  343.31 KB
 DTS dist/index.d.mts 343.31 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 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
+
+- edb4b4d: Disable pointer-events on input labels
+
 ## 11.1.2
 
 ### Patch Changes

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 }, 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(
@@ -1731,7 +1759,7 @@ var PasswordInput = react.forwardRef(
     const formControlProps = react.useFormControlContext();
     const autoGeneratedId = `password-input-${React86.useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-    return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React86__namespace.default.createElement(InputLeftElement2, null, leftIcon), /* @__PURE__ */ React86__namespace.default.createElement(
+    return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React86__namespace.default.createElement(InputLeftElement2, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React86__namespace.default.createElement(
       react.Input,
       {
         ...props,
@@ -1900,7 +1928,7 @@ var SearchInput = react.forwardRef(
     const autoGeneratedId = React86.useId();
     const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
     const { outerProps, innerProps } = getOuterProps(props);
-    return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React86__namespace.default.createElement(InputLeftElement2, null, /* @__PURE__ */ React86__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React86__namespace.default.createElement(
+    return /* @__PURE__ */ React86__namespace.default.createElement(react.InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React86__namespace.default.createElement(InputLeftElement2, { pointerEvents: "none" }, /* @__PURE__ */ React86__namespace.default.createElement(sporIconReact.SearchOutline24Icon, null)), /* @__PURE__ */ React86__namespace.default.createElement(
       react.Input,
       {
         paddingLeft: 7,
@@ -1992,7 +2020,15 @@ 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, { htmlFor: inputId, id: `${inputId}-label` }, label));
+  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,
+    {
+      htmlFor: inputId,
+      id: `${inputId}-label`,
+      pointerEvents: "none"
+    },
+    label
+  ));
 });
 function getSpacingProps(props) {
   const {

package/dist/index.mjs

@@ -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 }, 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(
@@ -1711,7 +1739,7 @@ var PasswordInput = forwardRef(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = `password-input-${useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React86__default.createElement(InputLeftElement2, null, leftIcon), /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React86__default.createElement(InputLeftElement2, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React86__default.createElement(
       Input$1,
       {
         ...props,
@@ -1880,7 +1908,7 @@ var SearchInput = forwardRef(
     const autoGeneratedId = useId();
     const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
     const { outerProps, innerProps } = getOuterProps(props);
-    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React86__default.createElement(InputLeftElement2, null, /* @__PURE__ */ React86__default.createElement(SearchOutline24Icon, null)), /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React86__default.createElement(InputLeftElement2, { pointerEvents: "none" }, /* @__PURE__ */ React86__default.createElement(SearchOutline24Icon, null)), /* @__PURE__ */ React86__default.createElement(
       Input$1,
       {
         paddingLeft: 7,
@@ -1972,7 +2000,15 @@ 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, { htmlFor: inputId, id: `${inputId}-label` }, label));
+  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,
+    {
+      htmlFor: inputId,
+      id: `${inputId}-label`,
+      pointerEvents: "none"
+    },
+    label
+  ));
 });
 function getSpacingProps(props) {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.1.2",
+  "version": "11.1.4",
   "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}>
+
+        <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/PasswordInput.tsx

@@ -25,7 +25,9 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
     const inputId = id ?? formControlProps?.id ?? autoGeneratedId;
     return (
       <InputGroup position="relative">
-        {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
+        {leftIcon && (
+          <InputLeftElement pointerEvents="none">{leftIcon}</InputLeftElement>
+        )}
         <ChakraInput
           {...props}
           id={inputId}

package/src/input/SearchInput.tsx

@@ -39,7 +39,7 @@ export const SearchInput = forwardRef<SearchInputProps, "input">(
 
     return (
       <InputGroup position="relative" {...outerProps}>
-        <InputLeftElement>
+        <InputLeftElement pointerEvents="none">
           <SearchOutline24Icon />
         </InputLeftElement>
         <ChakraInput

package/src/input/Textarea.tsx

@@ -35,7 +35,11 @@ export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
     <InputGroup position="relative" {...spacingProps}>
       <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
       {label && (
-        <FormLabel htmlFor={inputId} id={`${inputId}-label`}>
+        <FormLabel
+          htmlFor={inputId}
+          id={`${inputId}-label`}
+          pointerEvents="none"
+        >
           {label}
         </FormLabel>
       )}