diff --git a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js index 452a0b22bff..386ff0c1c6c 100644 --- a/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js +++ b/packages/forms/src/UIForm/fieldsets/CollapsibleFieldset/CollapsibleFieldset.component.js @@ -71,7 +71,8 @@ export function defaultTitle(formData, schema, options) { * @param {function} title the function called by the component to compute the title * @return {function} CollapsibleFieldset react component */ -export default function createCollapsibleFieldset(title = defaultTitle) { +// eslint-disable-next-line @typescript-eslint/default-param-last +export default function createCollapsibleFieldset(title = defaultTitle, managed) { function CollapsibleFieldset(props) { function toggle(event) { // event.stopPropagation(); @@ -98,7 +99,7 @@ export default function createCollapsibleFieldset(title = defaultTitle) { onToggleExpanded={toggle} onToggle={toggle} index={index} - managed + managed={!!managed} expanded={!value.isClosed} action={ actions?.[0] && { @@ -143,6 +144,7 @@ export default function createCollapsibleFieldset(title = defaultTitle) { }).isRequired, value: PropTypes.object, actions: PropTypes.array, + managed: PropTypes.bool, }; } diff --git a/packages/forms/stories/SchemaFieldsets.stories.tsx b/packages/forms/stories/SchemaFieldsets.stories.tsx index 0eb5518003f..a5210c59db4 100644 --- a/packages/forms/stories/SchemaFieldsets.stories.tsx +++ b/packages/forms/stories/SchemaFieldsets.stories.tsx @@ -54,6 +54,16 @@ export const CoreCollapsibleFieldset = { data: fieldsets.coreCollapsibleFieldset, }, }; +export const CoreArraysCollapsibleFieldset = { + parameters: { + formStoryDisplayMode: { + doc: 'ArraysCollapsibleFieldset/README.md', + }, + }, + args: { + data: fieldsets.coreArraysCollapsibleFieldset, + }, +}; export const CoreColumns = { parameters: { formStoryDisplayMode: { diff --git a/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json b/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json new file mode 100644 index 00000000000..9eae372ed4d --- /dev/null +++ b/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json @@ -0,0 +1,88 @@ +{ + "jsonSchema": { + "type": "object", + "title": "Comment", + "required": ["comments"], + "properties": { + "groupBy": { + "type": "array", + "minItems": 1, + "maxItems": 5, + "items": { + "type": "object", + "properties": { + "fieldName": { + "type": "string", + "enum": ["First Field", "Second Field", "Third Field"] + } + } + } + }, + "operations": { + "type": "array", + "minItems": 1, + "maxItems": 5, + "items": { + "type": "object", + "properties": { + "fieldName": { + "type": "string", + "enum": ["First Field", "Second Field", "Third Field"] + }, + "operation": { + "type": "string", + "enum": ["First Operation", "Second Operation", "Third Operation"] + } + } + } + } + } + }, + "uiSchema": [ + { + "key": "operations", + "title": "Operations", + "itemWidget": "collapsibleFieldset", + "items": [ + { + "key": "operations[].fieldName", + "title": "Field" + }, + { + "key": "operations[].operation", + "title": "Operation" + } + ] + }, + { + "key": "groupBy", + "title": "Group by", + "items": [ + { + "key": "groupBy[].fieldName", + "title": "Field" + } + ] + } + ], + "properties": { + "groupBy": [ + { + "fieldName": "First Field" + }, + { + "fieldName": "Second Field" + } + ], + "operations": [ + { + "fieldName": "First Field", + "operation": "First Operation" + }, + { + "fieldName": "Second Field", + "operation": "First Operation" + } + ] + } +} diff --git a/packages/forms/stories/json/fieldsets/index.ts b/packages/forms/stories/json/fieldsets/index.ts index fec5e66d191..74927719732 100644 --- a/packages/forms/stories/json/fieldsets/index.ts +++ b/packages/forms/stories/json/fieldsets/index.ts @@ -2,6 +2,7 @@ export { default as coreArraysComplex } from './core-arrays-complex.json'; export { default as coreArraysWithCustomOptions } from './core-arrays-with-custom-options.json'; export { default as coreArrays } from './core-arrays.json'; export { default as coreCollapsibleFieldset } from './core-collapsibleFieldset.json'; +export { default as coreArraysCollapsibleFieldset } from './core-arrays-collapsible.json'; export { default as coreColumns } from './core-columns.json'; export { default as coreFieldset } from './core-fieldset.json'; export { default as coreTabs } from './core-tabs.json';