@carlonicora/nextjs-jsonapi 1.36.1 → 1.38.0

package/src/components/forms/PasswordInput.tsx

@@ -7,31 +7,32 @@ import { cn } from "../../utils";
 
 export interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(({ className, type, ...props }, ref) => {
-  const [showPassword, setShowPassword] = React.useState(false);
-  const disabled = props.value === "" || props.value === undefined || props.disabled;
-  const t = useTranslations();
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, type: _type, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    const disabled = props.value === "" || props.value === undefined || props.disabled;
+    const t = useTranslations();
 
-  return (
-    <div className="relative">
-      <Input type={showPassword ? "text" : "password"} className={cn("", className)} ref={ref} {...props} />
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-        onClick={() => setShowPassword((prev) => !prev)}
-        disabled={disabled}
-      >
-        {showPassword && !disabled ? (
-          <EyeIcon className="h-4 w-4" aria-hidden="true" />
-        ) : (
-          <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
-        )}
-        <span className="sr-only">{showPassword ? t(`common.hide_password`) : t(`common.show_password`)}</span>
-      </Button>
+    return (
+      <div className="relative">
+        <Input type={showPassword ? "text" : "password"} className={cn("", className)} ref={ref} {...props} />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+          onClick={() => setShowPassword((prev) => !prev)}
+          disabled={disabled}
+        >
+          {showPassword && !disabled ? (
+            <EyeIcon className="h-4 w-4" aria-hidden="true" />
+          ) : (
+            <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+          )}
+          <span className="sr-only">{showPassword ? t(`common.hide_password`) : t(`common.show_password`)}</span>
+        </Button>
 
-      <style>{`
+        <style>{`
 					.hide-password-toggle::-ms-reveal,
 					.hide-password-toggle::-ms-clear {
 						visibility: hidden;
@@ -39,9 +40,10 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(({
 						display: none;
 					}
 				`}</style>
-    </div>
-  );
-});
+      </div>
+    );
+  },
+);
 PasswordInput.displayName = "PasswordInput";
 
 export { PasswordInput };

package/src/components/forms/__tests__/FormCheckbox.test.tsx

@@ -36,7 +36,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Active")).toBeInTheDocument();
@@ -47,7 +47,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" isRequired={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("*")).toBeInTheDocument();
@@ -57,7 +57,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: true }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const checkbox = screen.getByRole("checkbox");
@@ -68,7 +68,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const checkbox = screen.getByRole("checkbox");
@@ -81,7 +81,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const container = screen.getByRole("checkbox").parentElement;
@@ -96,7 +96,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" labelBefore={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const container = screen.getByRole("checkbox").parentElement;
@@ -111,7 +111,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const label = screen.getByText("Active");
@@ -122,7 +122,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" labelBefore={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const label = screen.getByText("Active");
@@ -137,7 +137,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const checkbox = screen.getByRole("checkbox");
@@ -154,7 +154,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: true }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const checkbox = screen.getByRole("checkbox");
@@ -171,7 +171,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const label = screen.getByText("Active");
@@ -190,7 +190,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" isRequired={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const label = screen.getByText("Active");
@@ -206,10 +206,8 @@ describe.skip("FormCheckbox", () => {
     it("should render required indicator after label when labelBefore is true", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
-          {(form) => (
-            <FormCheckbox form={form} id="active" name="Active" isRequired={true} labelBefore={true} />
-          )}
-        </FormWrapper>
+          {(form) => <FormCheckbox form={form} id="active" name="Active" isRequired={true} labelBefore={true} />}
+        </FormWrapper>,
       );
 
       expect(screen.getByText("*")).toBeInTheDocument();
@@ -221,7 +219,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const label = screen.getByText("Active");
@@ -232,7 +230,7 @@ describe.skip("FormCheckbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const checkbox = screen.getByRole("checkbox");

package/src/components/forms/__tests__/FormDate.test.tsx

@@ -35,9 +35,7 @@ describe.skip("FormDate", () => {
   describe("rendering", () => {
     it("should render date input without label", () => {
       render(
-        <FormWrapper defaultValues={{ date: undefined }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: undefined }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       expect(screen.getByRole("textbox")).toBeInTheDocument();
@@ -47,7 +45,7 @@ describe.skip("FormDate", () => {
       render(
         <FormWrapper defaultValues={{ date: undefined }}>
           {(form) => <FormDate form={form} id="date" name="Date" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Date")).toBeInTheDocument();
@@ -58,7 +56,7 @@ describe.skip("FormDate", () => {
       render(
         <FormWrapper defaultValues={{ date: undefined }}>
           {(form) => <FormDate form={form} id="date" name="Date" isRequired={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("*")).toBeInTheDocument();
@@ -66,9 +64,7 @@ describe.skip("FormDate", () => {
 
     it("should render calendar icon button", () => {
       render(
-        <FormWrapper defaultValues={{ date: undefined }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: undefined }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       // Look for the calendar icon button
@@ -80,9 +76,7 @@ describe.skip("FormDate", () => {
       const testDate = new Date(2024, 0, 15); // January 15, 2024
 
       render(
-        <FormWrapper defaultValues={{ date: testDate }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: testDate }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -92,9 +86,7 @@ describe.skip("FormDate", () => {
 
     it("should show placeholder based on locale format", () => {
       render(
-        <FormWrapper defaultValues={{ date: undefined }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: undefined }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -108,9 +100,7 @@ describe.skip("FormDate", () => {
       const testDate = new Date(2024, 0, 15);
 
       render(
-        <FormWrapper defaultValues={{ date: testDate }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: testDate }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       // Should have at least 2 buttons (calendar + clear)
@@ -120,9 +110,7 @@ describe.skip("FormDate", () => {
 
     it("should not show clear button when value is empty", () => {
       render(
-        <FormWrapper defaultValues={{ date: undefined }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: undefined }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       // Should only have calendar button
@@ -134,9 +122,7 @@ describe.skip("FormDate", () => {
   describe("text input", () => {
     it("should accept text input", () => {
       render(
-        <FormWrapper defaultValues={{ date: undefined }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: undefined }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -149,9 +135,7 @@ describe.skip("FormDate", () => {
       const testDate = new Date(2024, 0, 15);
 
       render(
-        <FormWrapper defaultValues={{ date: testDate }}>
-          {(form) => <FormDate form={form} id="date" />}
-        </FormWrapper>
+        <FormWrapper defaultValues={{ date: testDate }}>{(form) => <FormDate form={form} id="date" />}</FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -168,7 +152,7 @@ describe.skip("FormDate", () => {
       render(
         <FormWrapper defaultValues={{ date: undefined }}>
           {(form) => <FormDate form={form} id="date" minDate={minDate} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       // Component should render without errors
@@ -183,7 +167,7 @@ describe.skip("FormDate", () => {
       render(
         <FormWrapper defaultValues={{ birthDate: testDate }}>
           {(form) => <FormDate form={form} id="birthDate" name="Birth Date" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -196,7 +180,7 @@ describe.skip("FormDate", () => {
       render(
         <FormWrapper defaultValues={{ date: undefined }}>
           {(form) => <FormDate form={form} id="date" name="Date" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -207,7 +191,7 @@ describe.skip("FormDate", () => {
       render(
         <FormWrapper defaultValues={{ date: undefined }}>
           {(form) => <FormDate form={form} id="date" name="Appointment Date" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Appointment Date")).toBeInTheDocument();

package/src/components/forms/__tests__/FormInput.test.tsx

@@ -28,11 +28,7 @@ describe("FormInput", () => {
 
   describe("rendering", () => {
     it("should render input without label", () => {
-      render(
-        <FormWrapper defaultValues={{ title: "" }}>
-          {(form) => <FormInput form={form} id="title" />}
-        </FormWrapper>
-      );
+      render(<FormWrapper defaultValues={{ title: "" }}>{(form) => <FormInput form={form} id="title" />}</FormWrapper>);
 
       expect(screen.getByRole("textbox")).toBeInTheDocument();
     });
@@ -41,7 +37,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" name="Title" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Title")).toBeInTheDocument();
@@ -52,7 +48,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" name="Title" isRequired={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("*")).toBeInTheDocument();
@@ -62,7 +58,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" placeholder="Enter title" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByPlaceholderText("Enter title")).toBeInTheDocument();
@@ -72,7 +68,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" testId="title-input" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByTestId("title-input")).toBeInTheDocument();
@@ -81,11 +77,7 @@ describe("FormInput", () => {
 
   describe("input types", () => {
     it("should render text input by default", () => {
-      render(
-        <FormWrapper defaultValues={{ title: "" }}>
-          {(form) => <FormInput form={form} id="title" />}
-        </FormWrapper>
-      );
+      render(<FormWrapper defaultValues={{ title: "" }}>{(form) => <FormInput form={form} id="title" />}</FormWrapper>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("type", "text");
@@ -95,7 +87,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ count: 0 }}>
           {(form) => <FormInput form={form} id="count" type="number" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("spinbutton");
@@ -106,7 +98,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ price: 0 }}>
           {(form) => <FormInput form={form} id="price" type="currency" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("€")).toBeInTheDocument();
@@ -118,7 +110,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ password: "" }}>
           {(form) => <FormInput form={form} id="password" type="password" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = document.querySelector('input[type="password"]');
@@ -129,7 +121,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ url: "" }}>
           {(form) => <FormInput form={form} id="url" type="link" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -139,11 +131,7 @@ describe("FormInput", () => {
 
   describe("user interaction", () => {
     it("should update value on change for text input", () => {
-      render(
-        <FormWrapper defaultValues={{ title: "" }}>
-          {(form) => <FormInput form={form} id="title" />}
-        </FormWrapper>
-      );
+      render(<FormWrapper defaultValues={{ title: "" }}>{(form) => <FormInput form={form} id="title" />}</FormWrapper>);
 
       const input = screen.getByRole("textbox");
       fireEvent.change(input, { target: { value: "New Title" } });
@@ -155,7 +143,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ count: 0 }}>
           {(form) => <FormInput form={form} id="count" type="number" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("spinbutton");
@@ -170,7 +158,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" onChange={onChange} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -184,7 +172,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" onBlur={onBlur} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -201,7 +189,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" onKeyDown={onKeyDown} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -216,7 +204,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" disabled={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -224,11 +212,7 @@ describe("FormInput", () => {
     });
 
     it("should not be disabled by default", () => {
-      render(
-        <FormWrapper defaultValues={{ title: "" }}>
-          {(form) => <FormInput form={form} id="title" />}
-        </FormWrapper>
-      );
+      render(<FormWrapper defaultValues={{ title: "" }}>{(form) => <FormInput form={form} id="title" />}</FormWrapper>);
 
       const input = screen.getByRole("textbox");
       expect(input).not.toBeDisabled();
@@ -240,7 +224,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ url: "" }}>
           {(form) => <FormInput form={form} id="url" type="link" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -254,7 +238,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ url: "" }}>
           {(form) => <FormInput form={form} id="url" type="link" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -268,7 +252,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ url: "" }}>
           {(form) => <FormInput form={form} id="url" type="link" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");
@@ -284,7 +268,7 @@ describe("FormInput", () => {
       render(
         <FormWrapper defaultValues={{ title: "" }}>
           {(form) => <FormInput form={form} id="title" autoFocus={true} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const input = screen.getByRole("textbox");

package/src/components/forms/__tests__/FormSelect.test.tsx

@@ -36,7 +36,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -46,7 +46,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" name="Status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Status")).toBeInTheDocument();
@@ -56,10 +56,8 @@ describe.skip("FormSelect", () => {
     it("should render placeholder", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
-          {(form) => (
-            <FormSelect form={form} id="status" values={mockValues} placeholder="Select an option" />
-          )}
-        </FormWrapper>
+          {(form) => <FormSelect form={form} id="status" values={mockValues} placeholder="Select an option" />}
+        </FormWrapper>,
       );
 
       expect(screen.getByText("Select an option")).toBeInTheDocument();
@@ -69,7 +67,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "option2" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toHaveTextContent("Option 2");
@@ -81,10 +79,8 @@ describe.skip("FormSelect", () => {
       // Just verify it renders without error with useRows
       render(
         <FormWrapper defaultValues={{ status: "" }}>
-          {(form) => (
-            <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />
-          )}
-        </FormWrapper>
+          {(form) => <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />}
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -94,10 +90,8 @@ describe.skip("FormSelect", () => {
     it("should render label with row layout styling when useRows is true", () => {
       const { container } = render(
         <FormWrapper defaultValues={{ status: "" }}>
-          {(form) => (
-            <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />
-          )}
-        </FormWrapper>
+          {(form) => <FormSelect form={form} id="status" name="Status" values={mockValues} useRows={true} />}
+        </FormWrapper>,
       );
 
       // The label should have min-w-28 class when useRows is true
@@ -111,7 +105,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const trigger = screen.getByRole("combobox");
@@ -124,7 +118,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={[]} placeholder="Select" />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -134,7 +128,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const combobox = screen.getByRole("combobox");
@@ -145,7 +139,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "option1" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toHaveTextContent("Option 1");
@@ -155,7 +149,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "option3" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       expect(screen.getByRole("combobox")).toHaveTextContent("Option 3");
@@ -167,7 +161,7 @@ describe.skip("FormSelect", () => {
       render(
         <FormWrapper defaultValues={{ status: "" }}>
           {(form) => <FormSelect form={form} id="status" values={mockValues} />}
-        </FormWrapper>
+        </FormWrapper>,
       );
 
       const combobox = screen.getByRole("combobox");

package/src/components/tables/ContentListTable.tsx

@@ -33,7 +33,7 @@ type ContentListTableProps = {
 };
 
 export const ContentListTable = memo(function ContentListTable(props: ContentListTableProps) {
-  const { data, fields, checkedIds, toggleId, allowSearch, filters } = props;
+  const { data, fields, checkedIds, toggleId, allowSearch, filters: _filters } = props;
 
   const { data: tableData, columns: tableColumns } = useTableGenerator(props.tableGeneratorType, {
     data: data?.data ?? EMPTY_ARRAY,