@rjsf/shadcn 6.6.0 → 6.6.2

package/src/Templates/Templates.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import AddButton from '../AddButton';
 import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';

package/src/TextareaWidget/TextareaWidget.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds } from '@rjsf/utils';
 
 import { Textarea } from '../components/ui/textarea';
 
@@ -34,10 +35,10 @@ export default function TextareaWidget<
   options,
   className,
 }: CustomWidgetProps<T, S, F>) {
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   return (
     <div className='flex p-0.5'>
@@ -51,9 +52,9 @@ export default function TextareaWidget<
         required={required}
         autoFocus={autofocus}
         rows={options.rows || 5}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
         className={className}
       />

package/src/Theme/Theme.tsx

@@ -1,5 +1,5 @@
-import { ThemeProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ThemeProps } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTemplates } from '../Templates';
 import { generateWidgets } from '../Widgets';

package/src/TitleField/TitleField.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 
 import { Separator } from '../components/ui/separator';
 

package/src/Widgets/Widgets.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
 import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,12 +1,5 @@
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  buttonId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  WrapIfAdditionalTemplateProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString } from '@rjsf/utils';
 
 import { Input } from '../components/ui/input';
 import { Separator } from '../components/ui/separator';

package/src/components/ui/alert.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '../../lib/utils';

package/src/components/ui/badge.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 

package/src/components/ui/button.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 

package/src/components/ui/checkbox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Indicator, Root } from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 

package/src/components/ui/command.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
+import type { ComponentProps, ComponentPropsWithoutRef, ElementRef } from 'react';
+import { forwardRef } from 'react';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 
@@ -14,19 +15,17 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
  */
 
 const Command = forwardRef<ElementRef<typeof CommandPrimitive>, ComponentPropsWithoutRef<typeof CommandPrimitive>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <CommandPrimitive
-        ref={ref}
-        data-slot='command'
-        className={cn(
-          'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive
+      ref={ref}
+      data-slot='command'
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  ),
 );
 
 /**

package/src/components/ui/dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
 

package/src/components/ui/fancy-multi-select.tsx

@@ -1,15 +1,7 @@
 'use client';
 
-import {
-  FocusEvent,
-  FocusEventHandler,
-  KeyboardEvent,
-  ReactElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { FocusEvent, FocusEventHandler, KeyboardEvent, ReactElement } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { Command as CommandPrimitive } from 'cmdk';
 import isEqual from 'lodash/isEqual';
 import { X } from 'lucide-react';
@@ -21,7 +13,7 @@ import { Command, CommandGroup, CommandItem, CommandList } from './command';
 /**
  * Represents an item in the fancy multi-select dropdown
  */
-export type FancySelectItem = {
+export interface FancySelectItem {
   /** The value of the item */
   value: any;
   /** The display label for the item */
@@ -30,7 +22,7 @@ export type FancySelectItem = {
   index: number;
   /** Whether the item is disabled */
   disabled?: boolean;
-};
+}
 
 /**
  * Props interface for the FancyMultiSelect component
@@ -129,7 +121,7 @@ export function FancyMultiSelect({
       }
       setInputValue('');
       const newSelected = multiple ? [...selectedItems, item] : [item];
-      onValueChange?.(newSelected.map((item) => item.index));
+      onValueChange?.(newSelected.map((selectedItem) => selectedItem.index));
     },
     [multiple, selectedItems, onValueChange, disabled],
   );

package/src/components/ui/fancy-select.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { FocusEvent, FocusEventHandler, ReactElement, useEffect, useRef, useState } from 'react';
+import type { FocusEvent, FocusEventHandler, ReactElement } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Check, ChevronDown } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
@@ -9,7 +10,7 @@ import { Command, CommandGroup, CommandItem, CommandList } from './command';
 /**
  * Represents an item in the fancy select dropdown
  */
-export type FancySelectItem = {
+export interface FancySelectItem {
   /** The value of the item */
   value: any;
   /** The display label for the item */
@@ -18,7 +19,7 @@ export type FancySelectItem = {
   index: number;
   /** Whether the item is disabled */
   disabled?: boolean;
-};
+}
 
 /**
  * Props interface for the FancySelect component
@@ -101,7 +102,10 @@ export function FancySelect({
       aria-placeholder={ariaPlaceholder}
     >
       <div
+        role='button'
+        tabIndex={disabled ? -1 : 0}
         onClick={() => !disabled && setOpen(!open)}
+        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && !disabled && setOpen(!open)}
         className={cn(
           'flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           !selectedItem && required && 'border-red-500',

package/src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 import { cn } from '../../lib/utils';
 

package/src/components/ui/label.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Root } from '@radix-ui/react-label';
 
 import { cn } from '../../lib/utils';

package/src/components/ui/radio-group.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Root, Indicator, Item } from '@radix-ui/react-radio-group';
 import { CircleIcon } from 'lucide-react';
 

package/src/components/ui/separator.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { Root } from '@radix-ui/react-separator';
 
 import { cn } from '../../lib/utils';

package/src/components/ui/slider.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { ComponentProps, useMemo } from 'react';
+import type { ComponentProps } from 'react';
+import { useMemo } from 'react';
 import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
 
 import { cn } from '../../lib/utils';
@@ -14,10 +15,15 @@ import { cn } from '../../lib/utils';
  * @returns A slider input element with track and thumb
  */
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: ComponentProps<typeof Root>) {
-  const _values = useMemo(
-    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
-    [value, defaultValue, min, max],
-  );
+  const enumValues = useMemo(() => {
+    if (Array.isArray(value)) {
+      return value;
+    }
+    if (Array.isArray(defaultValue)) {
+      return defaultValue;
+    }
+    return [min, max];
+  }, [value, defaultValue, min, max]);
   return (
     <Root
       data-slot='slider'
@@ -42,7 +48,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
           className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}
         />
       </Track>
-      {Array.from({ length: _values.length }, (_, index) => (
+      {Array.from({ length: enumValues.length }, (_, index) => (
         <Thumb
           data-slot='slider-thumb'
           key={index}

package/src/components/ui/textarea.tsx

@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes, ComponentProps } from 'react';
+import type { TextareaHTMLAttributes, ComponentProps } from 'react';
 
 import { cn } from '../../lib/utils';