@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/src/hooks/usePosition.test.tsx

@@ -22,7 +22,7 @@ import userEvent from "@testing-library/user-event";
 interface ConfigObjectWithoutRefs
   extends Omit<ConfigObject, "relativeElement" | "elementToBePositioned"> {}
 
-const createUsePositionComponent = (
+const createUsePositionComponent = async (
   params?: (defaultParams: ConfigObjectWithoutRefs) => ConfigObjectWithoutRefs
 ) => {
   const Component = () => {
@@ -94,20 +94,20 @@ const createUsePositionComponent = (
   Object.defineProperty(document.body, "innerWidth", { configurable: true, value: 1000 });
   /** Make it stop pls */
 
-  userEvent.click(button);
+  await userEvent.click(button);
 
   return { ...queries, button, popover };
 };
 
 describe("returns proper values for default transformOrigin", () => {
   it("returns the correct values for left top placement", async () => {
-    const { popover } = createUsePositionComponent();
+    const { popover } = await createUsePositionComponent();
 
     await waitFor(() => expect(popover).toHaveStyle({ top: "250px", left: "250px" }));
   });
 
   it("returns the correct values for left bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" }
     }));
@@ -116,7 +116,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for left center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" }
     }));
@@ -125,7 +125,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for center top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" }
     }));
@@ -134,7 +134,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for center center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" }
     }));
@@ -143,7 +143,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for center bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" }
     }));
@@ -152,7 +152,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for right top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" }
     }));
@@ -161,7 +161,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for right center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" }
     }));
@@ -170,7 +170,7 @@ describe("returns proper values for default transformOrigin", () => {
   });
 
   it("returns the correct values for right bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" }
     }));
@@ -181,7 +181,7 @@ describe("returns proper values for default transformOrigin", () => {
 
 describe("it returns proper values for centered transformOrigin", () => {
   it("returns the correct values for left top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "center", vertical: "center" }
     }));
@@ -190,7 +190,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for left bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -200,7 +200,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for left center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -210,7 +210,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for center top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -220,7 +220,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for center center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -230,7 +230,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for center bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -240,7 +240,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for right top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -250,7 +250,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for right center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -260,7 +260,7 @@ describe("it returns proper values for centered transformOrigin", () => {
   });
 
   it("returns the correct values for right bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" },
       transformOrigin: { horizontal: "center", vertical: "center" }
@@ -272,7 +272,7 @@ describe("it returns proper values for centered transformOrigin", () => {
 
 describe("it returns proper values for right top transformOrigin", () => {
   it("returns the correct values for left top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "right", vertical: "top" }
     }));
@@ -281,7 +281,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for left bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -291,7 +291,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for left center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -301,7 +301,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for center top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -311,7 +311,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for center center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -321,7 +321,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for center bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -331,7 +331,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for right top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -341,7 +341,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for right center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -351,7 +351,7 @@ describe("it returns proper values for right top transformOrigin", () => {
   });
 
   it("returns the correct values for right bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" },
       transformOrigin: { horizontal: "right", vertical: "top" }
@@ -363,7 +363,7 @@ describe("it returns proper values for right top transformOrigin", () => {
 
 describe("it returns proper values for left bottom transformOrigin", () => {
   it("returns the correct values for left top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
@@ -372,7 +372,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for left bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -382,7 +382,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for left center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "left", vertical: "center" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -392,7 +392,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for center top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "top" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -402,7 +402,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for center center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "center" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -412,7 +412,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for center bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "center", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -422,7 +422,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for right top placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "top" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -432,7 +432,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for right center placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "center" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -442,7 +442,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
   });
 
   it("returns the correct values for right bottom placement", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       placement: { horizontal: "right", vertical: "bottom" },
       transformOrigin: { horizontal: "left", vertical: "bottom" }
@@ -454,7 +454,7 @@ describe("it returns proper values for left bottom transformOrigin", () => {
 
 describe("setting offsets work in different direction", () => {
   it("has proper top offset", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 50, right: 0, bottom: 0, left: 0 }
     }));
@@ -463,7 +463,7 @@ describe("setting offsets work in different direction", () => {
   });
 
   it("has proper right offset", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 0, right: 50, bottom: 0, left: 0 }
     }));
@@ -472,7 +472,7 @@ describe("setting offsets work in different direction", () => {
   });
 
   it("has proper bottom offset", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 0, right: 0, bottom: 50, left: 0 }
     }));
@@ -481,7 +481,7 @@ describe("setting offsets work in different direction", () => {
   });
 
   it("has proper left offset", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 0, right: 0, bottom: 0, left: 50 }
     }));
@@ -490,7 +490,7 @@ describe("setting offsets work in different direction", () => {
   });
 
   it("can handle multiple values", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       offset: { top: 50, right: 25, bottom: 25, left: 50 }
     }));
@@ -499,7 +499,7 @@ describe("setting offsets work in different direction", () => {
   });
 
   it("works with transformOrigin from bottom right as well", async () => {
-    const { popover } = createUsePositionComponent(defaultParams => ({
+    const { popover } = await createUsePositionComponent(defaultParams => ({
       ...defaultParams,
       transformOrigin: { horizontal: "right", vertical: "bottom" },
       offset: { top: 50, right: 25, bottom: 25, left: 50 }

package/src/hooks/usePosition.ts

@@ -356,7 +356,7 @@ export const usePosition = (providedConfigObject: ConfigObject = defaultConfigOb
 
     _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "horizontal");
     _calculatePlacement(clonedRelEl, elementToBePositionedDimensions, "vertical");
-  }, configObject.debounceAmount || 20);
+  }, configObject.debounceAmount ?? 20);
 
   return {
     top: position.top,

package/src/hooks/useRepeater.test.tsx

@@ -17,7 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useRepeater } from "./useRepeater";
 import { render } from "@testing-library/react";
-import { InputWrapper } from "../Form/Wrapper/InputWrapper/InputWrapper";
+import { InputWrapper } from "../components/Form/Wrapper/InputWrapper/InputWrapper";
 import { generateID } from "../util/helper";
 import userEvent from "@testing-library/user-event";
 
@@ -35,7 +35,7 @@ const ComponentToRepeat = ({ onChange, identifier }: RepeatedComponentProps) =>
   });
 
   useEffect(() => {
-    onChange && onChange(inputState);
+    onChange?.(inputState);
   }, [inputState]);
 
   return (
@@ -47,8 +47,8 @@ const ComponentToRepeat = ({ onChange, identifier }: RepeatedComponentProps) =>
       error={inputState.error}
       value={inputState.value}
       label="Label for this inputfield"
-      onChange={event => {
-        setInputState(prevState => ({ ...prevState, value: event.target.value }));
+      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+        setInputState(prevState => ({ ...prevState, value: event.target?.value }));
       }}
     />
   );
@@ -111,7 +111,7 @@ describe("useRepeater should render", () => {
     expect(inputWrappers.length).toBe(2);
   });
 
-  it("should repeat 3 items and remove the first index", () => {
+  it("should repeat 3 items and remove the first index", async () => {
     const onChangeHandler = jest.fn();
 
     const App = () => {
@@ -146,7 +146,7 @@ describe("useRepeater should render", () => {
 
     const removeButton = renderedItems.container.querySelector("#remove_input_1");
 
-    userEvent.click(removeButton!);
+    await userEvent.click(removeButton!);
 
     expect(renderedItems.container.querySelector(`#${secondInputID}`)).toBeFalsy();
     const inputWrappers = renderedItems.container.querySelectorAll(".wrapper.input-wrapper");

package/src/hooks/useRepeater.ts

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, JSX } from "react";
 import { generateID } from "../util/helper";
 
 interface Arguments {

package/src/hooks/useUploadFile.test.ts

@@ -1,7 +1,7 @@
 import { useUploadFile } from "./useUploadFile";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { waitFor } from "@testing-library/react";
-import { FileType } from "../Form/FileUpload/FileUpload";
+import { FileType } from "../components/Form/FileUpload/FileUpload";
 
 const DONE = 4;
 

package/src/hooks/useUploadFile.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import { FileType } from "../Form/FileUpload/FileUpload";
+import { FileType } from "../components/Form/FileUpload/FileUpload";
 import { useEffect, useState } from "react";
 import { getValueByPath, isJsonString } from "../util/helper";
 
@@ -42,7 +42,7 @@ export const useUploadFile = (
 ) => {
   const { url, headers, withCredentials, networkErrorText, responseErrorPath } = request;
 
-  const { onComplete, onProgress } = callbacks || {};
+  const { onComplete, onProgress } = callbacks ?? {};
 
   const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);
   const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);
@@ -67,7 +67,7 @@ export const useUploadFile = (
     const progress = (e.loaded / e.total) * 100;
     const updatedData = getUpdatedList(fileName, "uploading", progress);
     setUpdatedFiles(updatedData);
-    onProgress && onProgress(fileName, progress);
+    onProgress?.(fileName, progress);
   };
 
   const getFileStatus = (
@@ -82,7 +82,7 @@ export const useUploadFile = (
     } else if (requestStatus === 0) {
       fileStatus = "retry";
       error =
-        networkErrorText || "Network error. Check internet connection and retry uploading the file";
+        networkErrorText ?? "Network error. Check internet connection and retry uploading the file";
     } else if (requestStatus >= 400 && requestStatus < 500) {
       fileStatus = "error";
       error =
@@ -105,7 +105,7 @@ export const useUploadFile = (
       setUpdatedFiles(updatedList);
       const response = { fileList: updatedList, status };
       setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));
-      onComplete && onComplete(response);
+      onComplete?.(response);
     }
   };
 
@@ -113,7 +113,7 @@ export const useUploadFile = (
     const xhr = new XMLHttpRequest();
     xhr.upload.addEventListener("progress", e => recordProgress(e, file.name));
     xhr.addEventListener("readystatechange", () => handleOnComplete(xhr, file.name));
-    headers && headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+    headers?.forEach((value, key) => xhr.setRequestHeader(key, value));
     withCredentials && (xhr.withCredentials = true);
     xhr.open("POST", url, true);
     const formData = new FormData();

package/src/hooks/useWrapper.test.ts

@@ -14,52 +14,15 @@
  *    limitations under the License.
  */
 
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { useWrapper } from "./useWrapper";
 
 describe("it should give the correct results based on no value, no placeholder and default text input", () => {
   it("should execute correctly", () => {
-    const { result } = renderHook(() => useWrapper("", undefined, "text"));
+    const { result } = renderHook(() => useWrapper());
 
     expect(result.current.helperId).toHaveLength(20);
     expect(result.current.errorId).toHaveLength(20);
     expect(result.current.labelId).toHaveLength(20);
-    expect(result.current.floatingLabelActive).toBe(false);
-
-    act(() => {
-      result.current.setFloatingLabelActive(true);
-    });
-
-    expect(result.current.floatingLabelActive).toBe(true);
-
-    act(() => {
-      result.current.setFloatingLabelActive(false);
-    });
-
-    expect(result.current.floatingLabelActive).toBe(false);
-
-    act(() => {
-      result.current.setHasFocus(true);
-    });
-
-    expect(result.current.floatingLabelActive).toBe(true);
-  });
-});
-
-describe("it should have floating label active because of the value", () => {
-  it("should have active floating label state", () => {
-    const { result } = renderHook(() => useWrapper("value", undefined, "text"));
-
-    expect(result.current.floatingLabelActive).toBe(true);
-  });
-  it("should have floating label active because input type is datetime-local", () => {
-    const { result } = renderHook(() => useWrapper("", undefined, "datetime-local"));
-
-    expect(result.current.floatingLabelActive).toBe(true);
-  });
-  it("should have floating label active because of placeholder", () => {
-    const { result } = renderHook(() => useWrapper("", "placeholder", "text"));
-
-    expect(result.current.floatingLabelActive).toBe(true);
   });
 });

package/src/hooks/useWrapper.ts

@@ -14,49 +14,19 @@
  *    limitations under the License.
  */
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { generateID } from "../util/helper";
-import { Type as InputTypes } from "../Form/Input/Input";
 
-export const useWrapper = (value?: string, placeholder?: string, type?: InputTypes) => {
+export const useWrapper = () => {
   const [helperId] = useState(generateID(20));
   const [errorId] = useState(generateID(20));
   const [labelId] = useState(generateID(20));
-  const [floatingLabelActive, setFloatingLabelActive] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
 
-  useEffect(() => {
-    if (
-      (value?.length && value.length > 0) ||
-      placeholder ||
-      type === "datetime-local" ||
-      type === "time" ||
-      type === "date"
-    ) {
-      setFloatingLabelActive(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    if ((value?.length && value.length > 0) || hasFocus) {
-      setFloatingLabelActive(true);
-    } else if (
-      !placeholder &&
-      !hasFocus &&
-      type !== "datetime-local" &&
-      type !== "time" &&
-      type !== "date"
-    ) {
-      setFloatingLabelActive(false);
-    }
-  }, [value, placeholder, type, hasFocus]);
-
   return {
     helperId,
     errorId,
     labelId,
-    floatingLabelActive,
-    setFloatingLabelActive,
     hasFocus,
     setHasFocus
   };