@rjsf/antd 6.6.0 → 6.6.2

package/src/templates/IconButton/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
 import {
   ArrowDownOutlined,
   ArrowUpOutlined,
@@ -7,15 +7,10 @@ import {
   PlusCircleOutlined,
   CloseOutlined,
 } from '@ant-design/icons';
-import {
-  getUiOptions,
-  FormContextType,
-  IconButtonProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-} from '@rjsf/utils';
-import { Button, ButtonProps } from 'antd';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getUiOptions, TranslatableString } from '@rjsf/utils';
+import type { ButtonProps } from 'antd';
+import { Button } from 'antd';
 
 export type AntdIconButtonProps<
   T = any,

package/src/templates/MultiSchemaFieldTemplate/index.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 export default function MultiSchemaFieldTemplate<
   T = any,

package/src/templates/ObjectFieldTemplate/index.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import {
+import type {
   FormContextType,
   GenericObjectType,
   ObjectFieldTemplateProps,
@@ -7,12 +7,8 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   UiSchema,
-  canExpand,
-  getTemplate,
-  getUiOptions,
-  titleId,
-  buttonId,
 } from '@rjsf/utils';
+import { canExpand, getTemplate, getUiOptions, titleId, buttonId } from '@rjsf/utils';
 import { Col, Row, ConfigProvider } from 'antd';
 import classNames from 'classnames';
 import isNumber from 'lodash/isNumber';

package/src/templates/OptionalDataControlsTemplate/index.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { AddButton, RemoveButton } from '../IconButton';
 
@@ -29,7 +29,8 @@ export default function OptionalDataControlsTemplate<
         block={false}
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <RemoveButton
         id={id}

package/src/templates/SubmitButton/index.tsx

@@ -1,5 +1,7 @@
-import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
-import { Button, ButtonProps } from 'antd';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
+import type { ButtonProps } from 'antd';
+import { Button } from 'antd';
 
 type ButtonType = NonNullable<ButtonProps['type']>;
 

package/src/templates/TitleField/index.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Col, Divider, Row, ConfigProvider } from 'antd';
 import classNames from 'classnames';
 
@@ -39,11 +39,15 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
     [`${prefixCls}-item-required`]: required,
     [`${prefixCls}-item-no-colon`]: !colon,
   });
+  // The antd theme, for some reason, made its labels cause the associated field to get the focus when clicked (which
+  // kinda breaks a11y), but since it's built that way we will honor it until we decided to break it in a major release
+  // oxlint-disable jsx-a11y/no-noninteractive-element-interactions -- <label> is interactive; oxlint incorrectly flags it
   let heading = title ? (
     <label
       className={labelClassName}
       htmlFor={id}
       onClick={handleLabelClick}
+      onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleLabelClick()}
       title={typeof title === 'string' ? title : ''}
     >
       {labelChildren}

package/src/templates/WrapIfAdditionalTemplate/index.tsx

@@ -1,13 +1,5 @@
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  UI_OPTIONS_KEY,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  WrapIfAdditionalTemplateProps,
-  buttonId,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, UI_OPTIONS_KEY, TranslatableString, buttonId } from '@rjsf/utils';
 import { Col, Row, Form, Input } from 'antd';
 
 const VERTICAL_LABEL_COL = { span: 24 };

package/src/templates/index.ts

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

package/src/widgets/AltDateTimeWidget/index.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 export default function AltDateTimeWidget<
   T = any,

package/src/widgets/AltDateWidget/index.tsx

@@ -1,13 +1,5 @@
-import {
-  DateElement,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  useAltDateWidgetProps,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { DateElement, TranslatableString, useAltDateWidgetProps } from '@rjsf/utils';
 import { Row, Col, Button } from 'antd';
 
 export default function AltDateWidget<

package/src/widgets/CheckboxWidget/index.tsx

@@ -1,14 +1,8 @@
-import { FocusEvent } from 'react';
-import {
-  ariaDescribedByIds,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  GenericObjectType,
-} from '@rjsf/utils';
-import { Checkbox, CheckboxProps } from 'antd';
+import type { FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, GenericObjectType } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue } from '@rjsf/utils';
+import type { CheckboxProps } from 'antd';
+import { Checkbox } from 'antd';
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.

package/src/widgets/CheckboxesWidget/index.tsx

@@ -1,4 +1,5 @@
-import { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
+import type { FormContextType, WidgetProps, RJSFSchema, StrictRJSFSchema, GenericObjectType } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
@@ -6,11 +7,6 @@ import {
   enumOptionValueEncoder,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  WidgetProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  GenericObjectType,
 } from '@rjsf/utils';
 import { Checkbox } from 'antd';
 
@@ -62,31 +58,30 @@ export default function CheckboxesWidget<
   const selectValue = enumOptionSelectedValue<S>(value, enumOptions, true, optionValueFormat, []) as string[];
 
   return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
-    <>
-      <Checkbox.Group
-        disabled={disabled || (readonlyAsDisabled && readonly)}
-        name={htmlName || id}
-        onChange={!readonly ? handleChange : undefined}
-        value={selectValue}
-        {...extraProps}
-        aria-describedby={ariaDescribedByIds(id)}
-      >
-        {Array.isArray(enumOptions) &&
-          enumOptions.map((option, i) => (
-            <span key={i}>
-              <Checkbox
-                id={optionId(id, i)}
-                name={htmlName || id}
-                autoFocus={i === 0 ? autofocus : false}
-                disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
-                value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
-              >
-                {option.label}
-              </Checkbox>
-              {!inline && <br />}
-            </span>
-          ))}
-      </Checkbox.Group>
-    </>
+    <Checkbox.Group
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      name={htmlName || id}
+      onChange={!readonly ? handleChange : undefined}
+      value={selectValue}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds(id)}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, i) => (
+          // oxlint-disable-next-line react/no-array-index-key
+          <span key={i}>
+            <Checkbox
+              id={optionId(id, i)}
+              name={htmlName || id}
+              autoFocus={i === 0 ? autofocus : false}
+              disabled={Array.isArray(enumDisabled) && enumDisabled.includes(option.value)}
+              value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
+            >
+              {option.label}
+            </Checkbox>
+            {!inline && <br />}
+          </span>
+        ))}
+    </Checkbox.Group>
   ) : null;
 }

package/src/widgets/DateTimeWidget/index.tsx

@@ -1,20 +1,9 @@
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
-const DATE_PICKER_STYLE = {
-  width: '100%',
-};
+import DateWidget from '../DateWidget';
 
-/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
- * the value to/from utc using the appropriate utility functions.
+/** The `DateTimeWidget` component uses the `DateWidget` with `showTime` enabled, transforming
+ * the value to/from ISO string format.
  *
  * @param props - The `WidgetProps` for this component
  */
@@ -23,32 +12,5 @@ export default function DateTimeWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
-  const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
-  const { formContext } = registry;
-  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
-
-  const handleChange = (nextValue: any) => onChange(nextValue && nextValue.toISOString());
-
-  const handleBlur = () => onBlur(id, value);
-
-  const handleFocus = () => onFocus(id, value);
-
-  const getPopupContainer = (node: any) => node.parentNode;
-
-  return (
-    <DatePicker
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      getPopupContainer={getPopupContainer}
-      id={id}
-      name={id}
-      onBlur={!readonly ? handleBlur : undefined}
-      onChange={!readonly ? handleChange : undefined}
-      onFocus={!readonly ? handleFocus : undefined}
-      placeholder={placeholder}
-      showTime
-      style={DATE_PICKER_STYLE}
-      value={value && dayjs(value)}
-      aria-describedby={ariaDescribedByIds(id)}
-    />
-  );
+  return <DateWidget showTime {...props} />;
 }

package/src/widgets/DateWidget/index.tsx

@@ -1,11 +1,5 @@
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  GenericObjectType,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, GenericObjectType } from '@rjsf/utils';
+import { ariaDescribedByIds } from '@rjsf/utils';
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 
@@ -13,25 +7,38 @@ const DATE_PICKER_STYLE = {
   width: '100%',
 };
 
+type DateWidgetProps<T, S extends StrictRJSFSchema, F extends FormContextType> = WidgetProps<T, S, F> & {
+  showTime?: boolean;
+};
+
 /** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
  * the value to undefined when it is falsy during the `onChange` handling.
  *
  * @param props - The `WidgetProps` for this component
  */
-export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>,
-) {
-  const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  disabled,
+  registry,
+  id,
+  onBlur,
+  onChange,
+  onFocus,
+  placeholder,
+  readonly,
+  value,
+  showTime = false,
+}: DateWidgetProps<T, S, F>) {
   const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
-  const handleChange = (nextValue: any) => onChange(nextValue && nextValue.format('YYYY-MM-DD'));
+  const handleChange = (nextValue: any) =>
+    onChange(nextValue && (showTime ? nextValue.toISOString() : nextValue.format('YYYY-MM-DD')));
 
   const handleBlur = () => onBlur(id, value);
 
   const handleFocus = () => onFocus(id, value);
 
-  const getPopupContainer = (node: any) => node.parentNode;
+  const getPopupContainer = DateWidget.getPopupContainerCallback();
 
   return (
     <DatePicker
@@ -43,10 +50,16 @@ export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSch
       onChange={!readonly ? handleChange : undefined}
       onFocus={!readonly ? handleFocus : undefined}
       placeholder={placeholder}
-      showTime={false}
+      showTime={showTime}
       style={DATE_PICKER_STYLE}
       value={value && dayjs(value)}
       aria-describedby={ariaDescribedByIds(id)}
     />
   );
 }
+
+/** Give the playground a place to hook into the `getPopupContainer` callback generation function so that it can be
+ * disabled while in the playground. Since the callback is a simple function, it can be returned by this static
+ * "generator" function.
+ */
+DateWidget.getPopupContainerCallback = () => (node: any) => node.parentNode;

package/src/widgets/PasswordWidget/index.tsx

@@ -1,12 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  GenericObjectType,
-} from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, GenericObjectType } from '@rjsf/utils';
+import { ariaDescribedByIds } from '@rjsf/utils';
 import { Input } from 'antd';
 
 /** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.

package/src/widgets/RadioWidget/index.tsx

@@ -1,4 +1,5 @@
-import { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
@@ -6,13 +7,9 @@ import {
   enumOptionValueEncoder,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
-import { Radio, RadioChangeEvent } from 'antd';
+import type { RadioChangeEvent } from 'antd';
+import { Radio } from 'antd';
 
 /** The `RadioWidget` is a widget for rendering a radio group.
  *  It is typically used with a string property constrained with enum options.
@@ -66,8 +63,8 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
             id={optionId(id, i)}
             name={htmlName || id}
             autoFocus={i === 0 ? autofocus : false}
-            disabled={disabled || (Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1)}
-            key={i}
+            disabled={disabled || (Array.isArray(enumDisabled) && enumDisabled.includes(option.value))}
+            key={String(option.value)}
             value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
           >
             {option.label}

package/src/widgets/RangeWidget/index.tsx

@@ -1,12 +1,5 @@
-import {
-  ariaDescribedByIds,
-  rangeSpec,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  GenericObjectType,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, GenericObjectType } from '@rjsf/utils';
+import { ariaDescribedByIds, rangeSpec } from '@rjsf/utils';
 import { Slider } from 'antd';
 
 /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result

package/src/widgets/SelectWidget/index.tsx

@@ -1,18 +1,15 @@
 import { useMemo, useState } from 'react';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
-import { Select, SelectProps } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
+import type { SelectProps } from 'antd';
+import { Select } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
 import isString from 'lodash/isString';
 
 const SELECT_STYLE = {
@@ -61,7 +58,7 @@ export default function SelectWidget<
   const filterOption: SelectProps['filterOption'] = (input, option) => {
     if (option && isString(option.label)) {
       // labels are strings in this context
-      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+      return option.label.toLowerCase().includes(input.toLowerCase());
     }
     return false;
   };
@@ -80,17 +77,19 @@ export default function SelectWidget<
 
   const selectOptions: DefaultOptionType[] | undefined = useMemo(() => {
     if (Array.isArray(enumOptions)) {
-      const options: DefaultOptionType[] = enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({
-        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
-        key: String(index),
-        value: enumOptionValueEncoder(optionValue, index, optionValueFormat),
-        label: optionLabel,
-      }));
+      const enumOptionsList: DefaultOptionType[] = enumOptions.map(
+        ({ value: optionValue, label: optionLabel }, index) => ({
+          disabled: Array.isArray(enumDisabled) && enumDisabled.includes(optionValue),
+          key: String(index),
+          value: enumOptionValueEncoder(optionValue, index, optionValueFormat),
+          label: optionLabel,
+        }),
+      );
 
       if (showPlaceholderOption) {
-        options.unshift({ value: '', label: placeholder || '' });
+        enumOptionsList.unshift({ value: '', label: placeholder || '' });
       }
-      return options;
+      return enumOptionsList;
     }
     return undefined;
   }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption, optionValueFormat]);
@@ -112,7 +111,7 @@ export default function SelectWidget<
       {...extraProps}
       // When the open change is called, set the open state, needed so that the select opens properly in the playground
       onOpenChange={setOpen}
-      filterOption={filterOption}
+      showSearch={{ filterOption }}
       aria-describedby={ariaDescribedByIds(id)}
       options={selectOptions}
     />

package/src/widgets/TextareaWidget/index.tsx

@@ -1,12 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds } from '@rjsf/utils';
 import { Input } from 'antd';
 
 const INPUT_STYLE = {

package/src/widgets/index.ts

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