Fix infinite loop on crud pagination and add className in all components

src/components/RLAutocomplete/RLAutocomplete.tsx

@@ -9,6 +9,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLAutocomplete = forwardRef<RLAutocompleteRef, RLAutocompleteProps>(
   (
     {
+      className,
       value,
       onChange,
       options = [],
@@ -137,7 +138,7 @@ export const RLAutocomplete = forwardRef<RLAutocompleteRef, RLAutocompleteProps>
     )}
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <label
           className={`block mb-[2px] ${errorMessage ? 'error' : ''} ${labelClassName || ''}`}
           style={errorMessage ? { color: 'var(--sl-color-danger-500)' } : undefined}

src/components/RLAutocomplete/types.ts

@@ -2,6 +2,7 @@ import type { RLSelectOptionType } from '../RLSelect'
 import type { RLInputRuleType, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from '../utils/types'
 
 export interface RLAutocompleteProps {
+  className?: string
   value?: string
   onChange?: (value: string) => void
   options?: RLSelectOptionType[]

src/components/RLCheckbox/RLCheckbox.tsx

@@ -8,6 +8,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLCheckbox = forwardRef<RLCheckboxRef, RLCheckboxProps>(
   (
     {
+      className,
       checked,
       onChange,
       name,
@@ -90,7 +91,7 @@ export const RLCheckbox = forwardRef<RLCheckboxRef, RLCheckboxProps>(
     const combinedClassName = `flex items-center ${errorMessage ? 'error' : ''}`
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlCheckbox
           ref={checkboxRef}
           className={combinedClassName}

src/components/RLCheckbox/types.ts

@@ -8,6 +8,7 @@ import type {
 } from '../utils/types'
 
 export interface RLCheckboxProps {
+  className?: string
   checked?: boolean
   onChange?: (checked: boolean) => void
   name?: string

src/components/RLCrud/RLCrud.tsx

@@ -17,6 +17,7 @@ export const RLCrud = forwardRef<RLCrudRef, RLCrudProps>(
   (
     {
       id,
+      className,
       primary_key,
       singular_label,
       headers,
@@ -128,7 +129,6 @@ export const RLCrud = forwardRef<RLCrudRef, RLCrudProps>(
         }
 
         setItems(response.result as Record<string, unknown>[])
-        setCurrentPage(response.page.currentPage)
         setTotalRows(response.page.totalRows)
       } catch (e) {
         // eslint-disable-next-line no-console
@@ -291,7 +291,7 @@ export const RLCrud = forwardRef<RLCrudRef, RLCrudProps>(
     }))
 
     return (
-      <div>
+      <div className={className}>
         <RLCrudFilters
           ref={filtersRef}
           className="w-full"

src/components/RLCrud/types.ts

@@ -39,6 +39,7 @@ export interface RLCrudProps {
   id: string
   primary_key: string
   singular_label: string
+  className?: string
   headers: RLCrudHeaderType[]
   filters: Omit<RLCrudFilterType, 'label'>[]
   filters_title?: string

src/components/RLCrudAction/RLCrudAction.tsx

@@ -3,20 +3,23 @@ import { RLTooltip } from '../RLTooltip'
 import { RLIcon } from '../RLIcon'
 
 export const RLCrudAction = ({
+  className,
   icon,
   tooltip = '',
   placement = 'top',
   distance = 4,
   onClick
 }: RLCrudActionProps) => {
   return (
-    <RLTooltip placement={placement} content={tooltip} distance={distance}>
-      <RLIcon
-        className="text-2xl cursor-pointer hover:opacity-40"
-        name={icon}
-        onClick={onClick}
-      />
-    </RLTooltip>
+    <span className={className}>
+      <RLTooltip placement={placement} content={tooltip} distance={distance}>
+        <RLIcon
+          className="text-2xl cursor-pointer hover:opacity-40"
+          name={icon}
+          onClick={onClick}
+        />
+      </RLTooltip>
+    </span>
   )
 }
 

src/components/RLCrudAction/types.ts

@@ -1,4 +1,5 @@
 export interface RLCrudActionProps {
+  className?: string
   icon: string
   tooltip?: string
   placement?: 'top' | 'bottom' | 'left' | 'right'

src/components/RLCrudForm/RLCrudForm.tsx

@@ -8,6 +8,7 @@ import type { RLInputRuleType } from '../utils/types'
 export const RLCrudForm = forwardRef<RLCrudFormRef, RLCrudFormProps>(
   (
     {
+      className,
       value,
       type,
       fields: initialFields,
@@ -150,7 +151,7 @@ export const RLCrudForm = forwardRef<RLCrudFormRef, RLCrudFormProps>(
         <div slot="label">{title}</div>
         <form
           name={`${type}-crud-form`}
-          className="flex flex-col gap-8"
+          className={`flex flex-col gap-8 ${className ?? ''}`}
           onSubmit={handleConfirm}
         >
           {Object.values(fields).map((field) => (

src/components/RLCrudForm/types.ts

@@ -32,6 +32,7 @@ export interface RLCrudFormFieldType {
 }
 
 export interface RLCrudFormProps {
+  className?: string
   value?: { [key: string]: RLCrudInputValueType }
   type: 'add' | 'edit'
   fields: RLCrudFormFieldType[]

src/components/RLCrudInput/RLCrudInput.tsx

@@ -26,6 +26,7 @@ type InputRefType =
 export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
   (
     {
+      className,
       inputName,
       label,
       type,
@@ -56,6 +57,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLInput
             ref={inputRef as React.Ref<RLInputRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string}
@@ -71,6 +73,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLTextArea
             ref={inputRef as React.Ref<RLTextAreaRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string}
@@ -86,6 +89,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLNumberInput
             ref={inputRef as React.Ref<RLNumberInputRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as number | null}
@@ -101,6 +105,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLCheckbox
             ref={inputRef as React.Ref<RLCheckboxRef>}
+            className={className}
             name={inputName}
             label={label}
             checked={value as boolean}
@@ -115,6 +120,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLSelect
             ref={inputRef as React.Ref<RLSelectRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string | string[] | null}
@@ -131,6 +137,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
       case 'color':
         return (
           <RLColorPicker
+            className={className}
             name={inputName}
             label={label}
             value={value as string}
@@ -144,6 +151,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLImageUpload
             ref={inputRef as React.Ref<RLImageUploadRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string | null}
@@ -161,6 +169,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLAutocomplete
             ref={inputRef as React.Ref<RLAutocompleteRef>}
+            className={className}
             label={label}
             value={value as string}
             onChange={(v) => onChange?.(v)}
@@ -177,6 +186,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLDropdown
             ref={inputRef as React.Ref<RLDropdownRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as string | string[] | null}
@@ -195,6 +205,7 @@ export const RLCrudInput = forwardRef<RLCrudInputRef, RLCrudInputProps>(
         return (
           <RLDatePicker
             ref={inputRef as React.Ref<RLDatePickerRef>}
+            className={className}
             name={inputName}
             label={label}
             value={value as Date | Date[] | null}

src/components/RLCrudInput/types.ts

@@ -18,6 +18,7 @@ export type RLCrudInputFieldType =
   | 'textarea'
 
 export interface RLCrudInputProps {
+  className?: string
   inputName: string
   label: string
   type: RLCrudInputFieldType

src/components/RLDatePicker/RLDatePicker.tsx

@@ -11,6 +11,7 @@ import { RLInput } from '../RLInput'
 export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -114,7 +115,7 @@ export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
     }, [])
 
     return (
-      <SlDropdown open={isDropdownOpen || undefined} hoist onSlShow={handleShow} onSlHide={handleHide}>
+      <SlDropdown className={className} open={isDropdownOpen || undefined} hoist onSlShow={handleShow} onSlHide={handleHide}>
         <div className="relative" slot="trigger">
           <RLInput
             className={`date-input ${errorMessage ? 'error' : ''}`}

src/components/RLDatePicker/types.ts

@@ -1,6 +1,7 @@
 import type { RLInputRuleType } from '../utils/types'
 
 export interface RLDatePickerProps {
+  className?: string
   value?: Date | Date[] | null
   onChange?: (value: Date | Date[] | null) => void
   name?: string

src/components/RLDropdown/RLDropdown.tsx

@@ -17,6 +17,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLDropdown = forwardRef<RLDropdownRef, RLDropdownProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -189,7 +190,7 @@ export const RLDropdown = forwardRef<RLDropdownRef, RLDropdownProps>(
     }
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         {label && (
           <label
             htmlFor={name}

src/components/RLDropdown/types.ts

@@ -2,6 +2,7 @@ import type { RLInputRuleType } from '../utils/types'
 import type { RLSelectOptionType } from '../RLSelect'
 
 export interface RLDropdownProps {
+  className?: string
   value?: string | string[] | null
   onChange?: (value: string | string[] | null) => void
   name: string

src/components/RLFileInput/RLFileInput.tsx

@@ -17,6 +17,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLFileInput = forwardRef<RLFileInputRef, RLFileInputProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -154,7 +155,7 @@ export const RLFileInput = forwardRef<RLFileInputRef, RLFileInputProps>(
     )
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <label
           htmlFor={name}
           className={`pb-4 ${errorMessage ? 'error' : ''}`}

src/components/RLFileInput/types.ts

@@ -10,6 +10,7 @@ export interface RLFileInputErrorEvent {
 }
 
 export interface RLFileInputProps {
+  className?: string
   value?: File | File[] | null
   onChange?: (files: File | File[] | null) => void
   name?: string

src/components/RLNumberInput/RLNumberInput.tsx

@@ -8,6 +8,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLNumberInput = forwardRef<RLNumberInputRef, RLNumberInputProps>(
   (
     {
+      className,
       value,
       onChange,
       name,
@@ -124,7 +125,7 @@ export const RLNumberInput = forwardRef<RLNumberInputRef, RLNumberInputProps>(
     )
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlInput
           className={errorMessage ? 'error' : undefined}
           type="number"

src/components/RLNumberInput/types.ts

@@ -10,6 +10,7 @@ import type {
 } from '../utils/types'
 
 export interface RLNumberInputProps {
+  className?: string
   value?: number | null
   onChange?: (value: number | null) => void
   name?: string

src/components/RLPaginator/RLPaginator.tsx

@@ -7,6 +7,7 @@ import { RLSelect } from '../RLSelect'
 export const RLPaginator = forwardRef<HTMLDivElement, RLPaginatorProps>(
   (
     {
+      className,
       page = 1,
       onPageChange,
       totalRows,
@@ -72,7 +73,7 @@ export const RLPaginator = forwardRef<HTMLDivElement, RLPaginatorProps>(
     )
 
     return (
-      <div ref={ref} className="flex items-center gap-4">
+      <div ref={ref} className={`flex items-center gap-4 ${className ?? ''}`}>
         <RLButton onClick={firstPage} disabled={page === 1}>
           <RLIcon name="pageFirst" />
         </RLButton>

src/components/RLPaginator/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 
 export interface RLPaginatorProps {
+  className?: string
   page?: number
   onPageChange?: (page: number) => void
   totalRows: number

src/components/RLRadioGroup/RLRadioGroup.tsx

@@ -9,6 +9,7 @@ import { useValidation } from '../../hooks/useValidation'
 export const RLRadioGroup = forwardRef<RLRadioGroupRef, RLRadioGroupProps>(
   (
     {
+      className,
       value,
       onChange,
       label,
@@ -68,7 +69,7 @@ export const RLRadioGroup = forwardRef<RLRadioGroupRef, RLRadioGroupProps>(
     const combinedClassName = errorMessage ? 'error' : undefined
 
     return (
-      <div className="relative">
+      <div className={`relative ${className ?? ''}`}>
         <SlRadioGroup
           className={combinedClassName}
           value={value}

src/components/RLRadioGroup/types.ts

@@ -8,6 +8,7 @@ export interface RadioOption {
 }
 
 export interface RLRadioGroupProps {
+  className?: string
   value?: string
   onChange?: (value: string) => void
   label?: string