@form-eng/react-aria 1.5.0

package/README.md

@@ -0,0 +1,63 @@
+# @form-eng/react-aria
+
+React Aria Components adapter for `@form-eng/core`. Provides accessible field components using [React Aria Components](https://react-spectrum.adobe.com/react-aria/) for best-in-class ARIA patterns.
+
+## Installation
+
+```bash
+npm install @form-eng/react-aria @form-eng/core react react-dom react-hook-form react-aria-components
+```
+
+## Quick Start
+
+```tsx
+import { FormEngine, RulesEngineProvider, InjectedFieldProvider } from "@form-eng/core";
+import { createReactAriaFieldRegistry } from "@form-eng/react-aria";
+
+const fields = createReactAriaFieldRegistry();
+
+function App() {
+  return (
+    <RulesEngineProvider>
+      <InjectedFieldProvider fields={fields}>
+        <FormEngine config={formConfig} entityData={data} />
+      </InjectedFieldProvider>
+    </RulesEngineProvider>
+  );
+}
+```
+
+## Field Implementations
+
+| Field | Implementation |
+|-------|---------------|
+| Textbox | React Aria `TextField` + `Input` |
+| Number | React Aria `NumberField` + `Input` |
+| Toggle | React Aria `Switch` |
+| Dropdown | React Aria `Select` + `ListBox` + `Popover` |
+| SimpleDropdown | React Aria `Select` + `ListBox` + `Popover` |
+| MultiSelect | `<select multiple>` (semantic HTML) |
+| DateControl | `<input type="date">` (semantic HTML) |
+| Slider | React Aria `Slider` + `SliderTrack` + `SliderThumb` |
+| RadioGroup | React Aria `RadioGroup` + `Radio` |
+| CheckboxGroup | React Aria `CheckboxGroup` + `Checkbox` |
+| Textarea | React Aria `TextField` + `TextArea` (inline) + native `<dialog>` (modal) |
+| DynamicFragment | `<input type="hidden">` |
+| ReadOnly | `<span>` |
+
+## Styling
+
+This adapter ships with **no styles**. React Aria Components expose `data-*` render props and CSS class names for custom styling. All fields emit `data-field-type` and `data-field-state` attributes:
+
+```css
+[data-field-type="Toggle"] { /* ... */ }
+[data-field-state="error"] { /* ... */ }
+```
+
+## Accessibility
+
+React Aria Components provide built-in accessibility features including keyboard navigation, focus management, and ARIA attributes. This adapter has the highest native Tier 1 coverage (10/13 fields use React Aria components natively).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IFieldProps, Dictionary } from '@form-eng/core';
+import React from 'react';
+import { FieldError } from 'react-hook-form';
+export { GetFieldDataTestId, formatDateTime, getFieldState } from '@form-eng/core/adapter-utils';
+
+interface ITextboxProps {
+    ellipsifyTextCharacters?: number;
+    placeHolder?: string;
+    multiline?: boolean;
+}
+declare const Textbox: (props: IFieldProps<ITextboxProps>) => react_jsx_runtime.JSX.Element;
+
+declare const NumberFieldComponent: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const Toggle: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IDropdownProps {
+    placeHolder?: string;
+    setDefaultKeyIfOnlyOneOption?: boolean;
+}
+declare const Dropdown: (props: IFieldProps<IDropdownProps>) => react_jsx_runtime.JSX.Element;
+
+declare const MultiSelect: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const DateControl: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface ISliderProps {
+    max?: number;
+    min?: number;
+    step?: number;
+}
+declare const Slider: (props: IFieldProps<ISliderProps>) => react_jsx_runtime.JSX.Element;
+
+declare const DynamicFragment: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface ISimpleDropdownProps {
+    dropdownOptions?: string[];
+    placeHolder?: string;
+}
+declare const SimpleDropdown: (props: IFieldProps<ISimpleDropdownProps>) => react_jsx_runtime.JSX.Element;
+
+interface ITextareaProps {
+    autoAdjustHeight?: boolean;
+    numberOfRows?: number;
+    ellipsifyTextCharacters?: number;
+    additionalInfo?: string;
+    maxLimit?: number;
+    saveCallback?: () => void;
+    renderExtraModalFooter?: () => React.ReactNode;
+}
+declare const Textarea: (props: IFieldProps<ITextareaProps>) => react_jsx_runtime.JSX.Element;
+
+declare const RadioGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IReadOnlyFieldProps {
+    readonly value?: string;
+    readonly fieldName?: string;
+    readonly labelClassName?: string;
+    readonly valueClassName?: string;
+    readonly showControlOnSide?: boolean;
+    readonly containerClassName?: string;
+    readonly ellipsifyTextCharacters?: number;
+}
+declare const ReadOnlyText: React.FunctionComponent<IReadOnlyFieldProps>;
+
+declare const ReadOnly: (props: IFieldProps<IReadOnlyFieldProps>) => react_jsx_runtime.JSX.Element;
+
+interface IStatusMessageProps {
+    id?: string;
+    readonly error?: FieldError;
+    readonly errorCount?: number;
+    readonly savePending?: boolean;
+    readonly saving?: boolean;
+}
+declare const StatusMessage: React.FunctionComponent<IStatusMessageProps>;
+
+interface IFormLoadingProps {
+    loadingShimmerCount?: number;
+    loadingFieldShimmerHeight?: number;
+    inPanel?: boolean;
+    hideTitleShimmer?: boolean;
+}
+declare const FormLoading: (props: IFormLoadingProps) => react_jsx_runtime.JSX.Element;
+
+/** Creates the default React Aria Components field registry for use with InjectedFieldProvider */
+declare function createReactAriaFieldRegistry(): Dictionary<React.JSX.Element>;
+
+export { CheckboxGroup, DateControl, Dropdown, DynamicFragment, FormLoading, type IReadOnlyFieldProps, MultiSelect, NumberFieldComponent as Number, RadioGroup, ReadOnly, ReadOnlyText, SimpleDropdown, Slider, StatusMessage, Textarea, Textbox, Toggle, createReactAriaFieldRegistry };

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IFieldProps, Dictionary } from '@form-eng/core';
+import React from 'react';
+import { FieldError } from 'react-hook-form';
+export { GetFieldDataTestId, formatDateTime, getFieldState } from '@form-eng/core/adapter-utils';
+
+interface ITextboxProps {
+    ellipsifyTextCharacters?: number;
+    placeHolder?: string;
+    multiline?: boolean;
+}
+declare const Textbox: (props: IFieldProps<ITextboxProps>) => react_jsx_runtime.JSX.Element;
+
+declare const NumberFieldComponent: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const Toggle: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IDropdownProps {
+    placeHolder?: string;
+    setDefaultKeyIfOnlyOneOption?: boolean;
+}
+declare const Dropdown: (props: IFieldProps<IDropdownProps>) => react_jsx_runtime.JSX.Element;
+
+declare const MultiSelect: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const DateControl: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface ISliderProps {
+    max?: number;
+    min?: number;
+    step?: number;
+}
+declare const Slider: (props: IFieldProps<ISliderProps>) => react_jsx_runtime.JSX.Element;
+
+declare const DynamicFragment: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface ISimpleDropdownProps {
+    dropdownOptions?: string[];
+    placeHolder?: string;
+}
+declare const SimpleDropdown: (props: IFieldProps<ISimpleDropdownProps>) => react_jsx_runtime.JSX.Element;
+
+interface ITextareaProps {
+    autoAdjustHeight?: boolean;
+    numberOfRows?: number;
+    ellipsifyTextCharacters?: number;
+    additionalInfo?: string;
+    maxLimit?: number;
+    saveCallback?: () => void;
+    renderExtraModalFooter?: () => React.ReactNode;
+}
+declare const Textarea: (props: IFieldProps<ITextareaProps>) => react_jsx_runtime.JSX.Element;
+
+declare const RadioGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+declare const CheckboxGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
+
+interface IReadOnlyFieldProps {
+    readonly value?: string;
+    readonly fieldName?: string;
+    readonly labelClassName?: string;
+    readonly valueClassName?: string;
+    readonly showControlOnSide?: boolean;
+    readonly containerClassName?: string;
+    readonly ellipsifyTextCharacters?: number;
+}
+declare const ReadOnlyText: React.FunctionComponent<IReadOnlyFieldProps>;
+
+declare const ReadOnly: (props: IFieldProps<IReadOnlyFieldProps>) => react_jsx_runtime.JSX.Element;
+
+interface IStatusMessageProps {
+    id?: string;
+    readonly error?: FieldError;
+    readonly errorCount?: number;
+    readonly savePending?: boolean;
+    readonly saving?: boolean;
+}
+declare const StatusMessage: React.FunctionComponent<IStatusMessageProps>;
+
+interface IFormLoadingProps {
+    loadingShimmerCount?: number;
+    loadingFieldShimmerHeight?: number;
+    inPanel?: boolean;
+    hideTitleShimmer?: boolean;
+}
+declare const FormLoading: (props: IFormLoadingProps) => react_jsx_runtime.JSX.Element;
+
+/** Creates the default React Aria Components field registry for use with InjectedFieldProvider */
+declare function createReactAriaFieldRegistry(): Dictionary<React.JSX.Element>;
+
+export { CheckboxGroup, DateControl, Dropdown, DynamicFragment, FormLoading, type IReadOnlyFieldProps, MultiSelect, NumberFieldComponent as Number, RadioGroup, ReadOnly, ReadOnlyText, SimpleDropdown, Slider, StatusMessage, Textarea, Textbox, Toggle, createReactAriaFieldRegistry };