diff --git a/CHANGELOG.md b/CHANGELOG.md index 263f735b65..9f3e39d206 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,8 +18,53 @@ should change the heading of the (upcoming) version to include a major version b # 6.1.3 +## @rjsf/antd + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/chakra-ui + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/core + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/daisyui + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/fluent-ui + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/mantine + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/mui + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/primereact + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/react-bootstrap + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/semantic-ui + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + +## @rjsf/shadcn + +- Updated `BaseInputTemplate` to support the `allowClear` feature for input fields + ## @rjsf/utils +- Fixed issue by adding new `allowClear` option to `UIOptionsBaseType` type, fixing [#4671](https://github.com/rjsf-team/react-jsonschema-form/issues/4671) - Fixed issue with default value not being prefilled when object with if/then is nested inside another object, fixing [#4222](https://github.com/rjsf-team/react-jsonschema-form/issues/4222) - Fixed issue with schema array with nested dependent fixed-length, fixing [#3754](https://github.com/rjsf-team/react-jsonschema-form/issues/3754) diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 2ce6d91489..d0de7f26ed 100644 --- a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -13,6 +13,7 @@ import { import { Field } from '../components/ui/field'; import { getChakra } from '../utils'; +import { X } from 'lucide-react'; export default function BaseInputTemplate< T = any, @@ -72,6 +73,25 @@ export default function BaseInputTemplate< list={schema.examples ? examplesId(id) : undefined} aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> + {options.allowClear && !readonly && !disabled && value && ( + + )} {Array.isArray(schema.examples) ? ( {(schema.examples as string[]) diff --git a/packages/core/src/components/templates/BaseInputTemplate.tsx b/packages/core/src/components/templates/BaseInputTemplate.tsx index f827a3cdfe..691c8b8e6a 100644 --- a/packages/core/src/components/templates/BaseInputTemplate.tsx +++ b/packages/core/src/components/templates/BaseInputTemplate.tsx @@ -9,6 +9,8 @@ import { StrictRJSFSchema, } from '@rjsf/utils'; +import { X } from 'lucide-react'; + /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. * It is used as the template for rendering many of the based widgets that differ by `type` and callbacks only. * It can be customized/overridden for other themes or individual implementations as needed. @@ -91,6 +93,25 @@ export default function BaseInputTemplate< onFocus={_onFocus} aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> + {options.allowClear && !readonly && !disabled && inputValue && ( + + )} {Array.isArray(schema.examples) && ( {(schema.examples as string[]) diff --git a/packages/daisyui/src/templates/BaseInputTemplate/BaseInputTemplate.tsx b/packages/daisyui/src/templates/BaseInputTemplate/BaseInputTemplate.tsx index 884bd978fc..d4b0680199 100644 --- a/packages/daisyui/src/templates/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/daisyui/src/templates/BaseInputTemplate/BaseInputTemplate.tsx @@ -8,6 +8,7 @@ import { ariaDescribedByIds, examplesId, } from '@rjsf/utils'; +import { X } from 'lucide-react'; /** The `BaseInputTemplate` component is a template for rendering basic input elements * with DaisyUI styling. It's used as the foundation for various input types in forms. @@ -80,23 +81,45 @@ export default function BaseInputTemplate< - +
+ + {options.allowClear && !readonly && !disabled && value && ( + + )} +
{Array.isArray(schema.examples) && ( diff --git a/packages/daisyui/test/__snapshots__/Array.test.tsx.snap b/packages/daisyui/test/__snapshots__/Array.test.tsx.snap index b44a207bbf..bd49fd254f 100644 --- a/packages/daisyui/test/__snapshots__/Array.test.tsx.snap +++ b/packages/daisyui/test/__snapshots__/Array.test.tsx.snap @@ -137,16 +137,20 @@ exports[`array fields array icons 1`] = ` class="label-text" /> - +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- -
-
+ +
+ +
    - +
    + +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
- +
+ +
+ {options.allowClear && !readonly && !disabled && value && ( + + )} {Array.isArray(schema.examples) && ( {(schema.examples as string[]) diff --git a/packages/mantine/src/templates/BaseInputTemplate.tsx b/packages/mantine/src/templates/BaseInputTemplate.tsx index b947600405..860a09aaa5 100644 --- a/packages/mantine/src/templates/BaseInputTemplate.tsx +++ b/packages/mantine/src/templates/BaseInputTemplate.tsx @@ -12,6 +12,7 @@ import { import { TextInput, NumberInput } from '@mantine/core'; import { cleanupOptions } from '../utils'; +import { X } from 'lucide-react'; /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. * It is used as the template for rendering many of the based widgets that differ by `type` and callbacks only. @@ -117,6 +118,25 @@ export default function BaseInputTemplate< return ( <> {input} + {options.allowClear && !readonly && !disabled && value && ( + + )} {children} {Array.isArray(schema.examples) && ( diff --git a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx index e80ab890d5..ebac49a4af 100644 --- a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -10,6 +10,7 @@ import { RJSFSchema, StrictRJSFSchema, } from '@rjsf/utils'; +import { X } from 'lucide-react'; const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time']; @@ -86,6 +87,25 @@ export default function BaseInputTemplate< {...(textFieldProps as TextFieldProps)} aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> + {options.allowClear && !readonly && !disabled && value && ( + + )} {Array.isArray(schema.examples) && ( {(schema.examples as string[]) diff --git a/packages/primereact/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/primereact/src/BaseInputTemplate/BaseInputTemplate.tsx index f094e5a078..d311d30710 100644 --- a/packages/primereact/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/primereact/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -9,6 +9,7 @@ import { StrictRJSFSchema, } from '@rjsf/utils'; import { InputText } from 'primereact/inputtext'; +import { X } from 'lucide-react'; /** The `BaseInputTemplate` is the template the fallback if no widget is specified. */ @@ -51,22 +52,43 @@ export default function BaseInputTemplate< const _onFocus = () => onFocus && onFocus(id, value); return ( - 0} - onChange={onChangeOverride || _onChange} - onBlur={_onBlur} - onFocus={_onFocus} - aria-describedby={ariaDescribedByIds(id, !!schema.examples)} - /> + <> + 0} + onChange={onChangeOverride || _onChange} + onBlur={_onBlur} + onFocus={_onFocus} + aria-describedby={ariaDescribedByIds(id, !!schema.examples)} + /> + {options.allowClear && !readonly && !disabled && value && ( + + )} + ); } diff --git a/packages/react-bootstrap/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/react-bootstrap/src/BaseInputTemplate/BaseInputTemplate.tsx index aa2ec42947..d179714078 100644 --- a/packages/react-bootstrap/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/react-bootstrap/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -9,6 +9,7 @@ import { RJSFSchema, StrictRJSFSchema, } from '@rjsf/utils'; +import { X } from 'lucide-react'; export default function BaseInputTemplate< T = any, @@ -63,6 +64,25 @@ export default function BaseInputTemplate< onFocus={_onFocus} aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> + {options.allowClear && !readonly && !disabled && value && ( + + )} {children} {Array.isArray(schema.examples) ? ( diff --git a/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index dea5cf3a71..5d496be6d1 100644 --- a/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -11,6 +11,7 @@ import { RJSFSchema, StrictRJSFSchema, } from '@rjsf/utils'; +import { X } from 'lucide-react'; /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. * It is used as the template for rendering many of the based widgets that differ by `type` and callbacks only. @@ -77,6 +78,25 @@ export default function BaseInputTemplate< onFocus={_onFocus} aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> + {options.allowClear && !readonly && !disabled && value && ( + + )} {Array.isArray(schema.examples) && ( {(schema.examples as string[]) diff --git a/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx index ffba2e7bb4..8b2f8738f0 100644 --- a/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -11,6 +11,7 @@ import { ChangeEvent, FocusEvent } from 'react'; import { Input } from '../components/ui/input'; import { cn } from '../lib/utils'; +import { X } from 'lucide-react'; /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. * It is used as the template for rendering many of the based widgets that differ by `type` and callbacks only. @@ -72,6 +73,25 @@ export default function BaseInputTemplate< onFocus={_onFocus} aria-describedby={ariaDescribedByIds(id, !!schema.examples)} /> + {options.allowClear && !readonly && !disabled && value && ( + + )} {children} {Array.isArray(schema.examples) ? ( diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts index acd353cae5..53b5994dd7 100644 --- a/packages/utils/src/types.ts +++ b/packages/utils/src/types.ts @@ -1083,6 +1083,8 @@ type UIOptionsBaseType