Add JSDoc for primereact.

Set `id` property in `ArrayFieldTitleTemplate`

Author: jasny

packages/primereact/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -7,6 +7,10 @@ import {
   StrictRJSFSchema,
 } from '@rjsf/utils';
 
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
+ */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,

packages/primereact/src/ArrayFieldTitleTemplate/ArrayFieldTitleTemplate.tsx

@@ -1,13 +1,24 @@
-import { ArrayFieldTitleProps, FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldTitleProps,
+  FormContextType,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+  titleId,
+} from '@rjsf/utils';
 
+/** The `ArrayFieldTitleTemplate` component renders a header for the array.
+ *
+ * @param props - The `ArrayFieldTitleProps` for the component
+ */
 export default function ArrayFieldTitleTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ title, uiSchema, required }: ArrayFieldTitleProps<T, S, F>) {
+>({ title, uiSchema, required, idSchema }: ArrayFieldTitleProps<T, S, F>) {
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   return (
-    <h5 style={{ margin: 0, fontSize: '1.5rem', marginBottom: '0.2rem' }}>
+    <h5 id={titleId(idSchema)} style={{ margin: 0, fontSize: '1.5rem', marginBottom: '0.2rem' }}>
       {uiOptions.title || title} {required ? '*' : ''}
     </h5>
   );

packages/primereact/src/AutoCompleteWidget/AutoCompleteWidget.tsx

@@ -9,6 +9,11 @@ import {
 } from '@rjsf/utils';
 import { AutoComplete, AutoCompleteCompleteEvent } from 'primereact/autocomplete';
 
+/** The `AutoCompleteWidget` is a widget for rendering a field with options.
+ *  This is used instead of the base input template if the schema has examples.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function AutoCompleteWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,

packages/primereact/src/ColorWidget/ColorWidget.tsx

@@ -9,6 +9,10 @@ import {
 } from '@rjsf/utils';
 import { ColorPicker } from 'primereact/colorpicker';
 
+/** The `ColorWidget` component renders a color picker.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
 ) {

packages/primereact/src/GridTemplate/GridTemplate.tsx

@@ -36,19 +36,31 @@ function getInitialWidth(): number {
   return typeof window !== 'undefined' ? window.innerWidth : breakpoints.xs;
 }
 
+/** Renders a `GridTemplate`, which is expecting the column size for each viewport breakpoint (xs, sm, md, lg, xl)
+ *  coming in via the extra props provided by the caller.
+ *  Uses a 12 column grid by default. This can be overridden by passing `layoutGrid` in `uiSchema`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the grid sizing details
+ */
 export default function GridTemplate(props: GridTemplateProps) {
   return props.column ? GridTemplateColumn(props) : GridTemplateRow(props);
 }
 
 function GridTemplateRow(props: GridTemplateProps) {
-  const { children, column, uiSchema, ...rest } = props;
+  const { children, column, uiSchema, style, ...rest } = props;
   const layoutGrid = uiSchema?.['ui:layoutGrid'] ?? {};
   const totalColumns = layoutGrid.columns ?? 12;
   const gap = layoutGrid.gap ?? '16px';
 
   return (
     <div
-      style={{ display: 'grid', gridTemplateColumns: `repeat(${totalColumns}, 1fr)`, alignItems: 'start', gap }}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${totalColumns}, 1fr)`,
+        alignItems: 'start',
+        gap,
+        ...(style ?? {}),
+      }}
       {...rest}
     >
       {children}
@@ -57,7 +69,7 @@ function GridTemplateRow(props: GridTemplateProps) {
 }
 
 function GridTemplateColumn(props: GridTemplateProps) {
-  const { children, column, uiSchema, xs, sm, md, lg, xl, ...rest } = props;
+  const { children, column, uiSchema, xs, sm, md, lg, xl, style, ...rest } = props;
 
   const [breakpoint, setBreakpoint] = useState<Breakpoint>(() => getBreakpoint(getInitialWidth()));
 
@@ -74,7 +86,7 @@ function GridTemplateColumn(props: GridTemplateProps) {
   const span = getResponsiveSpan(props as ResponsiveSpan, breakpoint);
 
   return (
-    <div style={{ gridColumn: `span ${span} / span ${span}` }} {...rest}>
+    <div style={{ gridColumn: `span ${span} / span ${span}`, ...(style ?? {}) }} {...rest}>
       {children}
     </div>
   );

packages/primereact/src/TitleField/TitleField.tsx

@@ -1,6 +1,10 @@
 import { Divider } from 'primereact/divider';
 import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
 
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
   title,

packages/primereact/src/UpDownWidget/UpDownWidget.tsx

@@ -8,6 +8,10 @@ import {
 } from '@rjsf/utils';
 import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
 
+/** The `UpDownWidget` renders an input component for a number.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
 export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
 ) {

packages/primereact/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -10,6 +10,11 @@ import {
 } from '@rjsf/utils';
 import { InputText } from 'primereact/inputtext';
 
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
 export default function WrapIfAdditionalTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,