@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/DragAndDrop.tsx

@@ -4,28 +4,22 @@
  * Compatibility target: react-aria-components DragAndDrop exports.
  */
 
-import {
-  type JSX,
-  type Accessor,
-  createContext,
-  createMemo,
-  useContext,
-} from 'solid-js';
+import { type JSX, type Accessor, createContext, createMemo, useContext } from "solid-js";
 import type {
   DragTypes,
   DropOperation,
   DropTarget,
   ItemDropTarget,
   Key,
-} from '@proyecto-viviana/solid-stately';
-import type { DragAndDropHooks } from './useDragAndDrop';
+} from "@proyecto-viviana/solid-stately";
+import type { DragAndDropHooks } from "./useDragAndDrop";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
   useRenderProps,
   dataAttr,
-} from './utils';
+} from "./utils";
 
 export interface DragAndDropContextValue {
   dragAndDropHooks?: DragAndDropHooks<unknown>;
@@ -67,11 +61,11 @@ function DefaultDropIndicator(props: DropIndicatorProps): JSX.Element {
       children: props.children,
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-DropIndicator',
+      defaultClassName: "solidaria-DropIndicator",
     },
     () => ({
       isDropTarget: isDropTarget(),
-    })
+    }),
   );
 
   return (
@@ -95,32 +89,34 @@ export function DropIndicator(props: DropIndicatorProps): JSX.Element {
 
 export function useRenderDropIndicator(
   hooksOrDropState?:
-    | Pick<DragAndDropHooks<unknown>, 'renderDropIndicator' | 'isVirtualDragging' | 'useDropIndicator'>
+    | Pick<
+        DragAndDropHooks<unknown>,
+        "renderDropIndicator" | "isVirtualDragging" | "useDropIndicator"
+      >
     | {
-      target?: DropTarget | null;
-      isDropTarget?: ((target: DropTarget) => boolean) | boolean;
-    },
+        target?: DropTarget | null;
+        isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+      },
   maybeDropState?: {
     target?: DropTarget | null;
     isDropTarget?: ((target: DropTarget) => boolean) | boolean;
-  }
+  },
 ): ((target: ItemDropTarget) => JSX.Element | undefined) | undefined {
   const looksLikeDropState = (
-    value: unknown
+    value: unknown,
   ): value is {
     target?: DropTarget | null;
     isDropTarget?: ((target: DropTarget) => boolean) | boolean;
   } => {
     return Boolean(
       value &&
-      typeof value === 'object' &&
-      ('isDropTarget' in (value as Record<string, unknown>) || 'target' in (value as Record<string, unknown>))
+      typeof value === "object" &&
+      ("isDropTarget" in (value as Record<string, unknown>) ||
+        "target" in (value as Record<string, unknown>)),
     );
   };
 
-  const dragAndDropHooks = looksLikeDropState(hooksOrDropState)
-    ? undefined
-    : hooksOrDropState;
+  const dragAndDropHooks = looksLikeDropState(hooksOrDropState) ? undefined : hooksOrDropState;
   const dropState = looksLikeDropState(hooksOrDropState) ? hooksOrDropState : maybeDropState;
 
   // RAC only renders collection indicators when drop hooks are present.
@@ -130,23 +126,26 @@ export function useRenderDropIndicator(
   const targetsEqual = (a: DropTarget | null | undefined, b: DropTarget): boolean => {
     if (!a) return false;
     if (a.type !== b.type) return false;
-    if (a.type === 'root' && b.type === 'root') return true;
-    if (a.type !== 'item' || b.type !== 'item') return false;
+    if (a.type === "root" && b.type === "root") return true;
+    if (a.type !== "item" || b.type !== "item") return false;
     return a.key === b.key && a.dropPosition === b.dropPosition;
   };
 
   return (target: ItemDropTarget) => {
     const stateIsDropTarget = dropState?.isDropTarget;
-    const isTarget = typeof stateIsDropTarget === 'function'
-      ? stateIsDropTarget(target)
-      : stateIsDropTarget === true
-        ? targetsEqual(dropState?.target, target)
-        : false;
+    const isTarget =
+      typeof stateIsDropTarget === "function"
+        ? stateIsDropTarget(target)
+        : stateIsDropTarget === true
+          ? targetsEqual(dropState?.target, target)
+          : false;
     const isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.() ?? false;
     if (!isTarget && !isVirtualDragging) return undefined;
-    return dragAndDropHooks?.renderDropIndicator
-      ? dragAndDropHooks.renderDropIndicator(target)
-      : <DropIndicator target={target} />;
+    return dragAndDropHooks?.renderDropIndicator ? (
+      dragAndDropHooks.renderDropIndicator(target)
+    ) : (
+      <DropIndicator target={target} />
+    );
   };
 }
 
@@ -177,17 +176,14 @@ export interface LayoutInfoProviderLike {
 }
 
 function resolveKey(value: KeyAccessor): Key | null | undefined {
-  if (typeof value === 'function') {
+  if (typeof value === "function") {
     return (value as Accessor<Key | null | undefined>)();
   }
   return value;
 }
 
-function getAfterDropNormalizedKey(
-  target: ItemDropTarget,
-  collection?: CollectionLike
-): Key {
-  if (target.dropPosition !== 'after' || !collection) return target.key;
+function getAfterDropNormalizedKey(target: ItemDropTarget, collection?: CollectionLike): Key {
+  if (target.dropPosition !== "after" || !collection) return target.key;
 
   let nextKey = collection.getKeyAfter(target.key);
   let lastDescendantKey: Key | null = null;
@@ -197,7 +193,7 @@ function getAfterDropNormalizedKey(
     while (nextKey != null) {
       const node = collection.getItem(nextKey);
       if (!node) break;
-      if (node.type && node.type !== 'item') {
+      if (node.type && node.type !== "item") {
         nextKey = collection.getKeyAfter(nextKey);
         continue;
       }
@@ -212,23 +208,23 @@ function getAfterDropNormalizedKey(
 
 export function getNormalizedDropTargetKey(
   target: DropTarget | null | undefined,
-  collection?: CollectionLike
+  collection?: CollectionLike,
 ): Key | null {
-  if (!target || target.type !== 'item') return null;
+  if (!target || target.type !== "item") return null;
   return getAfterDropNormalizedKey(target, collection);
 }
 
 export function useDndPersistedKeys(
   selectionManager: SelectionManagerLike | null | undefined,
-  dragAndDropHooks?: Pick<DragAndDropHooks<unknown>, 'isVirtualDragging'>,
+  dragAndDropHooks?: Pick<DragAndDropHooks<unknown>, "isVirtualDragging">,
   dropState?: DroppableCollectionStateLike,
-  collection?: CollectionLike
+  collection?: CollectionLike,
 ): Accessor<Set<Key>> {
   return createMemo(() => {
     const focusedKey = resolveKey(selectionManager?.focusedKey);
     let dropTargetKey: Key | null | undefined;
 
-    if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === 'item') {
+    if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === "item") {
       dropTargetKey = getNormalizedDropTargetKey(dropState.target, collection) ?? undefined;
     }
 
@@ -249,13 +245,15 @@ export function mergePersistedKeysIntoVirtualRange(
     forceIncludeIndexes?: number[];
     forceIncludeMaxSpan?: number;
     fallbackToForcedWindow?: boolean;
-  }
+  },
 ): VirtualRangeLike {
   const validPersistedIndexes = Array.from(
-    new Set(persistedIndexes.filter((index) => index >= 0 && index < itemCount))
+    new Set(persistedIndexes.filter((index) => index >= 0 && index < itemCount)),
   ).sort((a, b) => a - b);
   const forceIndexes = Array.from(
-    new Set((options?.forceIncludeIndexes ?? []).filter((index) => index >= 0 && index < itemCount))
+    new Set(
+      (options?.forceIncludeIndexes ?? []).filter((index) => index >= 0 && index < itemCount),
+    ),
   );
 
   if (itemCount <= 0) return baseRange;
@@ -273,7 +271,9 @@ export function mergePersistedKeysIntoVirtualRange(
     return 0;
   };
 
-  for (const index of validPersistedIndexes.sort((a, b) => distanceToBaseRange(a) - distanceToBaseRange(b))) {
+  for (const index of validPersistedIndexes.sort(
+    (a, b) => distanceToBaseRange(a) - distanceToBaseRange(b),
+  )) {
     const nextStart = Math.min(start, index);
     const nextEnd = Math.max(end, index + 1);
     if (nextEnd - nextStart <= maxSpan) {
@@ -297,9 +297,15 @@ export function mergePersistedKeysIntoVirtualRange(
       const missingForced = forceIndexes.filter((index) => index < start || index >= end);
       if (missingForced.length > 0) {
         const nearestForced = missingForced[0];
-        const forceMaxSpan = Math.max(maxSpan, options?.forceIncludeMaxSpan ?? Math.max(maxSpan, 300));
+        const forceMaxSpan = Math.max(
+          maxSpan,
+          options?.forceIncludeMaxSpan ?? Math.max(maxSpan, 300),
+        );
         const windowSpan = Math.min(itemCount, Math.max(baseSpan, forceMaxSpan));
-        const centeredStart = Math.max(0, Math.min(itemCount - windowSpan, nearestForced - Math.floor(windowSpan / 2)));
+        const centeredStart = Math.max(
+          0,
+          Math.min(itemCount - windowSpan, nearestForced - Math.floor(windowSpan / 2)),
+        );
         start = centeredStart;
         end = Math.min(itemCount, centeredStart + windowSpan);
       }
@@ -316,7 +322,7 @@ export function mergePersistedKeysIntoVirtualRange(
     start,
     end,
     offsetTop: Math.max(0, startRect.y),
-    offsetBottom: Math.max(0, (lastRect.y + lastRect.height) - (endRect.y + endRect.height)),
+    offsetBottom: Math.max(0, lastRect.y + lastRect.height - (endRect.y + endRect.height)),
   };
 }
 
@@ -324,11 +330,11 @@ export type DropTargetDelegate = {
   getDropTargetFromPoint: (
     x: number,
     y: number,
-    isValidDropTarget: (target: DropTarget) => boolean
+    isValidDropTarget: (target: DropTarget) => boolean,
   ) => DropTarget | null;
   getDropOperation: (
     target: DropTarget,
     types: DragTypes,
-    allowedOperations: DropOperation[]
+    allowedOperations: DropOperation[],
   ) => DropOperation;
 };

package/src/DragPreview.tsx

@@ -1,17 +1,19 @@
-import { onCleanup, type JSX } from 'solid-js';
-import type { DragItem, DragPreviewRenderer } from '@proyecto-viviana/solid-stately';
+import { onCleanup, type JSX } from "solid-js";
+import type { DragItem, DragPreviewRenderer } from "@proyecto-viviana/solid-stately";
 
 export interface DragPreviewProps {
   ref?: { current: DragPreviewRenderer | null };
-  children: (items: DragItem[]) => JSX.Element | { element: JSX.Element; x?: number; y?: number } | null | undefined;
+  children: (
+    items: DragItem[],
+  ) => JSX.Element | { element: JSX.Element; x?: number; y?: number } | null | undefined;
 }
 
 export function DragPreview(props: DragPreviewProps): JSX.Element {
-  const hasDom = typeof HTMLElement !== 'undefined';
+  const hasDom = typeof HTMLElement !== "undefined";
   const isElementNode = (value: unknown): value is HTMLElement => {
     if (!value) return false;
     if (hasDom && value instanceof HTMLElement) return true;
-    return typeof value === 'object' && (value as { nodeType?: number }).nodeType === 1;
+    return typeof value === "object" && (value as { nodeType?: number }).nodeType === 1;
   };
 
   if (props.ref) {
@@ -21,13 +23,13 @@ export function DragPreview(props: DragPreviewProps): JSX.Element {
         callback(null);
         return;
       }
-      if (
-        typeof rendered === 'object' &&
-        rendered !== null &&
-        'element' in rendered
-      ) {
+      if (typeof rendered === "object" && rendered !== null && "element" in rendered) {
         const previewValue = rendered as { element: unknown; x?: number; y?: number };
-        callback(isElementNode(previewValue.element) ? previewValue.element : null, previewValue.x, previewValue.y);
+        callback(
+          isElementNode(previewValue.element) ? previewValue.element : null,
+          previewValue.x,
+          previewValue.y,
+        );
         return;
       }
       callback(isElementNode(rendered) ? rendered : null);

package/src/DropZone.tsx

@@ -5,7 +5,15 @@
  * Parity target: react-aria-components/src/DropZone.tsx
  */
 
-import { type JSX, createContext, createMemo, createSignal, splitProps } from 'solid-js';
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  createSignal,
+  mergeProps,
+  splitProps,
+  useContext,
+} from "solid-js";
 import {
   createDrop,
   createFocusRing,
@@ -13,7 +21,7 @@ import {
   readFromDataTransfer,
   type HoverEvents,
   type AriaDropOptions,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -21,8 +29,8 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-import { VisuallyHidden } from './VisuallyHidden';
+} from "./utils";
+import { VisuallyHidden } from "./VisuallyHidden";
 
 export interface DropZoneRenderProps {
   isHovered: boolean;
@@ -33,8 +41,9 @@ export interface DropZoneRenderProps {
 }
 
 export interface DropZoneProps
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'onDrop'>,
-    Omit<AriaDropOptions, 'hasDropButton'>,
+  extends
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class" | "style" | "onDrop">,
+    Omit<AriaDropOptions, "hasDropButton">,
     HoverEvents,
     SlotProps {
   children?: RenderChildren<DropZoneRenderProps>;
@@ -43,16 +52,16 @@ export interface DropZoneProps
 }
 
 export const DropZoneContext = createContext<DropZoneProps | null>(null);
-const DEFAULT_DROPZONE_LABEL = 'Drop files';
+const DEFAULT_DROPZONE_LABEL = "Drop files";
 const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
+  "a[href]",
+  "button:not([disabled])",
   'input:not([disabled]):not([type="hidden"])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])',
   '[contenteditable="true"]',
-].join(',');
+].join(",");
 
 function isFocusableElement(target: Element): boolean {
   return target instanceof HTMLElement && target.matches(FOCUSABLE_SELECTOR);
@@ -62,11 +71,22 @@ function isFocusableElement(target: Element): boolean {
  * A drop zone is an area into which one or multiple objects can be dropped.
  */
 export function DropZone(props: DropZoneProps): JSX.Element {
+  const contextProps = useContext(DropZoneContext);
+  const mergedProps = mergeProps(contextProps ?? {}, props);
   const [local, dropProps, hoverEventProps, domProps] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot', 'aria-label', 'aria-labelledby'],
-    ['getDropOperation', 'getDropOperationForPoint', 'onDropEnter', 'onDropMove', 'onDropActivate', 'onDropExit', 'onDrop', 'isDisabled'],
-    ['onHoverStart', 'onHoverEnd', 'onHoverChange']
+    mergedProps,
+    ["children", "class", "style", "slot", "aria-label", "aria-labelledby"],
+    [
+      "getDropOperation",
+      "getDropOperationForPoint",
+      "onDropEnter",
+      "onDropMove",
+      "onDropActivate",
+      "onDropExit",
+      "onDrop",
+      "isDisabled",
+    ],
+    ["onHoverStart", "onHoverEnd", "onHoverChange"],
   );
 
   const [dropZoneRef, setDropZoneRef] = createSignal<HTMLDivElement | null>(null);
@@ -105,9 +125,9 @@ export function DropZone(props: DropZoneProps): JSX.Element {
       children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-DropZone',
+      defaultClassName: "solidaria-DropZone",
     },
-    renderValues
+    renderValues,
   );
 
   const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
@@ -169,16 +189,16 @@ export function DropZone(props: DropZoneProps): JSX.Element {
 
     e.preventDefault();
     dropProps.onDrop?.({
-      type: 'drop',
+      type: "drop",
       x: 0,
       y: 0,
       items,
-      dropOperation: 'copy',
+      dropOperation: "copy",
     });
   };
 
   const dropButtonAriaLabel = createMemo(
-    () => local['aria-label'] ?? (!local['aria-labelledby'] ? DEFAULT_DROPZONE_LABEL : undefined)
+    () => local["aria-label"] ?? (!local["aria-labelledby"] ? DEFAULT_DROPZONE_LABEL : undefined),
   );
 
   return (
@@ -203,7 +223,7 @@ export function DropZone(props: DropZoneProps): JSX.Element {
           {...cleanDropButtonProps()}
           {...cleanFocusProps()}
           aria-label={dropButtonAriaLabel()}
-          aria-labelledby={local['aria-labelledby']}
+          aria-labelledby={local["aria-labelledby"]}
           onPaste={onHiddenButtonPaste}
         />
       </VisuallyHidden>

package/src/FieldError.tsx

@@ -5,8 +5,8 @@
  * Port direction: react-aria-components/src/FieldError.tsx
  */
 
-import { type JSX, createContext, createMemo, splitProps, useContext } from 'solid-js';
-import type { ValidationResult } from '@proyecto-viviana/solid-stately';
+import { type JSX, Show, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { DEFAULT_VALIDATION_RESULT, type ValidationResult } from "@proyecto-viviana/solid-stately";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -14,13 +14,17 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
 
 export type FieldErrorRenderProps = ValidationResult;
 
+export interface FieldErrorContextValue {
+  validation: ValidationResult | null;
+  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;
+}
+
 export interface FieldErrorProps
-  extends Omit<JSX.HTMLAttributes<HTMLElement>, 'children' | 'class' | 'style'>,
-    SlotProps {
+  extends Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class" | "style">, SlotProps {
   /** Validation result. Falls back to context when omitted. */
   validation?: ValidationResult | null;
   /** The children of the component. */
@@ -31,37 +35,55 @@ export interface FieldErrorProps
   style?: StyleOrFunction<FieldErrorRenderProps>;
 }
 
-export const FieldErrorContext = createContext<ValidationResult | null>(null);
+export const FieldErrorContext = createContext<ValidationResult | FieldErrorContextValue | null>(
+  null,
+);
 
 export function FieldError(props: FieldErrorProps): JSX.Element | null {
-  const contextValidation = useContext(FieldErrorContext);
-  const [local, domProps] = splitProps(props, ['validation', 'children', 'class', 'style', 'slot']);
+  const contextValue = useContext(FieldErrorContext);
+  const contextValidation = () => {
+    if (contextValue && "validation" in contextValue) {
+      return contextValue.validation;
+    }
+    return contextValue;
+  };
+  const contextErrorMessageProps = () => {
+    if (contextValue && "validation" in contextValue) {
+      return contextValue.errorMessageProps ?? {};
+    }
+    return {};
+  };
+  const [local, domProps] = splitProps(props, ["validation", "children", "class", "style", "slot"]);
 
-  const validation = createMemo<ValidationResult | null>(() => local.validation ?? contextValidation);
-  if (!validation()?.isInvalid) return null;
+  const validation = createMemo<ValidationResult | null>(
+    () => local.validation ?? contextValidation(),
+  );
 
   const renderProps = useRenderProps(
     {
-      children: local.children ?? validation()!.validationErrors.join(' '),
+      children:
+        local.children ?? ((currentValidation) => currentValidation.validationErrors.join(" ")),
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-FieldError',
+      defaultClassName: "solidaria-FieldError",
     },
-    () => validation()!
+    () => validation() ?? DEFAULT_VALIDATION_RESULT,
   );
 
-  if (renderProps.renderChildren() == null) return null;
-
   const filteredDomProps = filterDOMProps(domProps, { global: true });
+  const children = () => renderProps.renderChildren();
 
   return (
-    <div
-      {...filteredDomProps}
-      slot={local.slot ?? 'errorMessage'}
-      class={renderProps.class()}
-      style={renderProps.style()}
-    >
-      {renderProps.renderChildren()}
-    </div>
+    <Show when={validation()?.isInvalid && children()}>
+      <div
+        {...(contextErrorMessageProps() as unknown as JSX.HTMLAttributes<HTMLDivElement>)}
+        {...(filteredDomProps as JSX.HTMLAttributes<HTMLDivElement>)}
+        slot={local.slot ?? "errorMessage"}
+        class={renderProps.class()}
+        style={renderProps.style()}
+      >
+        {children()}
+      </div>
+    </Show>
   );
 }

package/src/FileTrigger.tsx

@@ -5,17 +5,19 @@
  * Parity target: react-aria-components/src/FileTrigger.tsx
  */
 
-import { type JSX, createSignal, splitProps } from 'solid-js';
-import { createPress, type PressEvent } from '@proyecto-viviana/solidaria';
+import { type JSX, createSignal, splitProps } from "solid-js";
+import { createPress, type PressEvent } from "@proyecto-viviana/solidaria";
 
-export interface FileTriggerProps
-  extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'children' | 'onSelect'> {
+export interface FileTriggerProps extends Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "type" | "onChange" | "children" | "onSelect"
+> {
   /** Mime types accepted by the file picker. */
   acceptedFileTypes?: ReadonlyArray<string>;
   /** Whether multiple files can be selected. */
   allowsMultiple?: boolean;
   /** Default camera capture mode for mobile devices. */
-  defaultCamera?: 'user' | 'environment';
+  defaultCamera?: "user" | "environment";
   /** Enables directory selection in supported browsers. */
   acceptDirectory?: boolean;
   /** Called when user selection changes. */
@@ -29,13 +31,13 @@ export interface FileTriggerProps
  */
 export function FileTrigger(props: FileTriggerProps): JSX.Element {
   const [local, inputProps] = splitProps(props, [
-    'acceptedFileTypes',
-    'allowsMultiple',
-    'defaultCamera',
-    'acceptDirectory',
-    'onSelect',
-    'children',
-    'disabled',
+    "acceptedFileTypes",
+    "allowsMultiple",
+    "defaultCamera",
+    "acceptDirectory",
+    "onSelect",
+    "children",
+    "disabled",
   ]);
 
   const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);
@@ -43,7 +45,7 @@ export function FileTrigger(props: FileTriggerProps): JSX.Element {
   const openFilePicker = () => {
     const input = inputRef();
     if (!input) return;
-    if (input.value) input.value = '';
+    if (input.value) input.value = "";
     input.click();
   };
 
@@ -62,20 +64,18 @@ export function FileTrigger(props: FileTriggerProps): JSX.Element {
 
   return (
     <>
-      <span {...pressProps}>
-        {local.children}
-      </span>
+      <span {...pressProps}>{local.children}</span>
       <input
         {...inputProps}
         ref={setInputRef}
         type="file"
-        style={{ display: 'none' }}
-        accept={local.acceptedFileTypes?.join(',')}
+        style={{ display: "none" }}
+        accept={local.acceptedFileTypes?.join(",")}
         multiple={local.allowsMultiple}
         capture={local.defaultCamera}
         disabled={local.disabled}
         // @ts-expect-error Non-standard attribute supported by WebKit browsers.
-        webkitdirectory={local.acceptDirectory ? '' : undefined}
+        webkitdirectory={local.acceptDirectory ? "" : undefined}
         onChange={onInputChange}
       />
     </>