Refactor RLInput and RLDatePicker components to use Shoelace inputs and update event handling

src/components/RLDatePicker/RLDatePicker.tsx

@@ -1,20 +1,12 @@
 import { forwardRef, useImperativeHandle, useCallback, useState, useMemo, useEffect } from 'react'
 import { Calendar } from 'primereact/calendar'
+import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown/index.js'
+import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button/index.js'
 import type { RLDatePickerProps, RLDatePickerRef } from './types'
 import { ErrorMessage } from '../utils/ErrorMessage'
 import { useValidation } from '../../hooks/useValidation'
 import { RLIcon } from '../RLIcon'
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'sl-icon-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-        library?: string
-        name?: string
-      }
-    }
-  }
-}
+import { RLInput } from '../RLInput'
 
 export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
   (
@@ -111,40 +103,40 @@ export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
       [disabled]
     )
 
-    const handleShow = useCallback((event: Event) => {
+    const handleShow = useCallback((event: CustomEvent) => {
       event.stopPropagation()
       setIsDropdownOpen(true)
     }, [])
 
-    const handleHide = useCallback((event: Event) => {
+    const handleHide = useCallback((event: CustomEvent) => {
       event.stopPropagation()
       setIsDropdownOpen(false)
     }, [])
 
     return (
-      <sl-dropdown open={isDropdownOpen || undefined} hoist onsl-show={handleShow} onsl-hide={handleHide}>
+      <SlDropdown open={isDropdownOpen || undefined} hoist onSlShow={handleShow} onSlHide={handleHide}>
         <div className="relative" slot="trigger">
-          <sl-input
-            class={`date-input ${errorMessage ? 'error' : ''}`}
+          <RLInput
+            className={`date-input ${errorMessage ? 'error' : ''}`}
             onClick={handleInputClick}
             value={formattedValue}
-            name={name || undefined}
-            label={label || undefined}
-            disabled={disabled || undefined}
-            required={required || undefined}
-            placeholder={placeholder || undefined}
+            name={name}
+            label={label}
+            disabled={disabled}
+            required={required}
+            placeholder={placeholder}
             readonly
           >
             <div
               slot="suffix"
               className={`flex items-center justify-end gap-2 ${disabled ? 'cursor-not-allowed' : ''}`}
             >
               {clearable && value && (
-                <sl-icon-button library="system" name="windowClose" onClick={handleClear} />
+                <SlIconButton library="system" name="windowClose" onClick={handleClear} />
               )}
               <RLIcon name="calendar" />
             </div>
-          </sl-input>
+          </RLInput>
           {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
         </div>
         <Calendar
@@ -158,7 +150,7 @@ export const RLDatePicker = forwardRef<RLDatePickerRef, RLDatePickerProps>(
           showTime={withTime}
           panelClassName="min-w-min !inline"
         />
-      </sl-dropdown>
+      </SlDropdown>
     )
   }
 )

src/components/RLInput/RLInput.tsx

@@ -1,45 +1,10 @@
 import { forwardRef, useImperativeHandle, useCallback, useEffect } from 'react'
+import SlInput from '@shoelace-style/shoelace/dist/react/input/index.js'
+import type SlInputElement from '@shoelace-style/shoelace/dist/components/input/input.js'
 import type { RLInputProps, RLInputRef } from './types'
-import type { SlChangeEvent } from '../utils/types'
 import { ErrorMessage } from '../utils/ErrorMessage'
 import { useValidation } from '../../hooks/useValidation'
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'sl-input': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-        type?: string
-        name?: string
-        value?: string
-        defaultValue?: string
-        size?: string
-        filled?: boolean
-        pill?: boolean
-        label?: string
-        'help-text'?: string
-        clearable?: boolean
-        disabled?: boolean
-        placeholder?: string
-        readonly?: boolean
-        'password-toggle'?: boolean
-        form?: string
-        required?: boolean
-        autocapitalize?: string
-        autocomplete?: string
-        autocorrect?: string
-        autofocus?: boolean
-        spellcheck?: boolean
-        inputmode?: string
-        min?: number
-        max?: number
-        step?: number | 'any'
-        title?: string
-        class?: string
-      }
-    }
-  }
-}
-
 export const RLInput = forwardRef<RLInputRef, RLInputProps>(
   (
     {
@@ -58,6 +23,7 @@ export const RLInput = forwardRef<RLInputRef, RLInputProps>(
       placeholder,
       readonly,
       passwordToggle,
+      noSpinButtons,
       form,
       required,
       autocapitalize = 'off',
@@ -66,9 +32,14 @@ export const RLInput = forwardRef<RLInputRef, RLInputProps>(
       autofocus,
       spellcheck,
       inputmode = 'text',
+      min,
+      max,
+      step,
       rules = [],
       error,
       title,
+      className,
+      onClick,
       onFocus,
       onBlur,
       onInput,
@@ -93,87 +64,96 @@ export const RLInput = forwardRef<RLInputRef, RLInputProps>(
     }))
 
     const handleChange = useCallback(
-      (event: Event) => {
-        const evt = event as unknown as SlChangeEvent
-        const target = evt.target as HTMLInputElement
+      (event: CustomEvent) => {
+        const target = event.target as SlInputElement
         const newValue = target?.value ?? ''
+        validate(newValue)
         onChange?.(newValue)
-        onSlChange?.(evt)
+        onSlChange?.(event)
       },
-      [onChange, onSlChange]
+      [onChange, onSlChange, validate]
     )
 
     const handleBlur = useCallback(
-      (event: Event) => {
-        onBlur?.(event as unknown as Parameters<NonNullable<typeof onBlur>>[0])
+      (event: CustomEvent) => {
+        onBlur?.(event)
       },
       [onBlur]
     )
 
     const handleFocus = useCallback(
-      (event: Event) => {
-        onFocus?.(event as unknown as Parameters<NonNullable<typeof onFocus>>[0])
+      (event: CustomEvent) => {
+        onFocus?.(event)
       },
       [onFocus]
     )
 
     const handleInput = useCallback(
-      (event: Event) => {
-        onInput?.(event as unknown as Parameters<NonNullable<typeof onInput>>[0])
+      (event: CustomEvent) => {
+        onInput?.(event)
       },
       [onInput]
     )
 
     const handleClear = useCallback(
-      (event: Event) => {
-        onClear?.(event as unknown as Parameters<NonNullable<typeof onClear>>[0])
+      (event: CustomEvent) => {
+        onClear?.(event)
       },
       [onClear]
     )
 
     const handleInvalid = useCallback(
-      (event: Event) => {
-        onInvalid?.(event as unknown as Parameters<NonNullable<typeof onInvalid>>[0])
+      (event: CustomEvent) => {
+        onInvalid?.(event)
       },
       [onInvalid]
     )
 
+    const combinedClassName = [className, errorMessage ? 'error' : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined
+
     return (
       <div className="relative">
-        <sl-input
-          class={errorMessage ? 'error' : undefined}
-          value={value}
+        <SlInput
+          className={combinedClassName}
+          value={value ?? ''}
           type={type}
-          name={name || undefined}
-          defaultValue={defaultValue || undefined}
+          name={name}
+          defaultValue={defaultValue}
           size={size}
-          filled={filled || undefined}
-          pill={pill || undefined}
-          label={label || undefined}
-          help-text={helpText || undefined}
-          clearable={clearable || undefined}
-          disabled={disabled || undefined}
-          placeholder={placeholder || undefined}
-          readonly={readonly || undefined}
-          password-toggle={passwordToggle || undefined}
+          filled={filled}
+          pill={pill}
+          label={label}
+          helpText={helpText}
+          clearable={clearable}
+          disabled={disabled}
+          placeholder={placeholder}
+          readonly={readonly}
+          passwordToggle={passwordToggle}
+          noSpinButtons={noSpinButtons}
           form={form}
-          required={required || undefined}
-          autocapitalize={autocapitalize}
+          required={required}
+          autoCapitalize={autocapitalize}
           autocomplete={autocomplete}
-          autocorrect={autocorrect}
-          autofocus={autofocus || undefined}
-          spellcheck={spellcheck}
+          autoCorrect={autocorrect}
+          autoFocus={autofocus}
+          spellCheck={spellcheck}
           inputmode={inputmode}
+          min={min}
+          max={max}
+          step={step}
           title={title}
-          onsl-change={handleChange}
-          onsl-blur={handleBlur}
-          onsl-focus={handleFocus}
-          onsl-input={handleInput}
-          onsl-clear={handleClear}
-          onsl-invalid={handleInvalid}
+          onClick={onClick}
+          onSlChange={handleChange}
+          onSlBlur={handleBlur}
+          onSlFocus={handleFocus}
+          onSlInput={handleInput}
+          onSlClear={handleClear}
+          onSlInvalid={handleInvalid}
         >
           {children}
-        </sl-input>
+        </SlInput>
         {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
       </div>
     )

src/components/RLInput/types.ts

@@ -12,30 +12,36 @@ import type {
 export interface RLInputProps {
   value?: string
   onChange?: (value: string) => void
-  type?: 'password' | 'text' | 'email'
+  type?: 'password' | 'text' | 'email' | 'number'
   name?: string
   defaultValue?: string
   size?: 'small' | 'medium' | 'large'
   filled?: boolean
   pill?: boolean
-  label: string
+  label?: string
   helpText?: string
   clearable?: boolean
   disabled?: boolean
   placeholder?: string
   readonly?: boolean
   passwordToggle?: boolean
+  noSpinButtons?: boolean
   form?: string
   required?: boolean
   autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
   autocomplete?: string
   autocorrect?: 'off' | 'on'
   autofocus?: boolean
   spellcheck?: boolean
-  inputmode?: 'none' | 'text' | 'email'
+  inputmode?: 'none' | 'text' | 'email' | 'numeric' | 'decimal'
+  min?: number
+  max?: number
+  step?: number | 'any'
   rules?: RLInputRuleType[]
   error?: string
   title?: string
+  className?: string
+  onClick?: (e: React.MouseEvent) => void
   onFocus?: (e: SlFocusEvent) => void
   onBlur?: (e: SlBlurEvent) => void
   onInput?: (e: SlInputEvent) => void