@abgov/jsonforms-components 1.25.0 → 1.25.2

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useCallback } from 'react';
+import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useCallback, useRef } from 'react';
 import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
@@ -3305,7 +3305,7 @@ const GoAInputBaseControl = props => {
   const InnerComponent = input;
   const labelToUpdate = getLabelText(uischema.scope, label || '');
   let modifiedErrors = checkFieldValidity(props);
-  if (modifiedErrors === 'should be equal to one of the allowed values') {
+  if (modifiedErrors === 'must be equal to one of the allowed values') {
     modifiedErrors = '';
   }
   const getStepStatus = (props, value) => {
@@ -4054,6 +4054,7 @@ const EnumSelect = props => {
     value: data,
     disabled: !enabled,
     relative: true,
+    width: "100%",
     filterable: autocompletion,
     testId: `${id || label}-jsonform`
   }, appliedUiSchemaOptions, {
@@ -4440,12 +4441,12 @@ let _$4 = t => t,
   _t2$2,
   _t3$2,
   _t4$1,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t10;
+  _t5$1,
+  _t6$1,
+  _t7$1,
+  _t8$1,
+  _t9$1,
+  _t10$1;
 const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
   display: flex;
   flex-direction: column;
@@ -4472,26 +4473,26 @@ const ReviewItemTitle = styled.div(_t4$1 || (_t4$1 = _$4`
   line-height: var(--lh-lg);
   font-weight: var(--fw-light);
 `));
-const Anchor = styled.div(_t5 || (_t5 = _$4`
+const Anchor = styled.div(_t5$1 || (_t5$1 = _$4`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
   cursor: pointer;
 `));
-styled.div(_t6 || (_t6 = _$4`
+styled.div(_t6$1 || (_t6$1 = _$4`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t7 || (_t7 = _$4`
+styled.div(_t7$1 || (_t7$1 = _$4`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t8 || (_t8 = _$4`
+styled.div(_t8$1 || (_t8$1 = _$4`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t9 || (_t9 = _$4`
+styled.h3(_t9$1 || (_t9$1 = _$4`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t10 || (_t10 = _$4`
+const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$4`
   display: flex;
   justify-content: flex-end;
 `));
@@ -5426,7 +5427,15 @@ let _$1 = t => t,
   _t$1,
   _t2,
   _t3,
-  _t4;
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11,
+  _t12;
 const DeleteDialogContent = styled.div(_t$1 || (_t$1 = _$1`
   margin-bottom: var(--goa-space-m);
 `));
@@ -5439,9 +5448,46 @@ const ObjectArrayTitle = styled.h2(_t3 || (_t3 = _$1`
 const TextCenter = styled.div(_t4 || (_t4 = _$1`
   text-align: center;
 `));
+const SideMenuItem = styled.div(_t5 || (_t5 = _$1`
+  &:hover {
+    background: #f1f1f1;
+  }
+`));
+const RowFlex = styled.div(_t6 || (_t6 = _$1`
+  display: flex;
+  align-items: stretch;
+`));
+const RowFlexMenu = styled.div(_t7 || (_t7 = _$1`
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #dcdcdc;
+`));
+const FlexTabs = styled.div(_t8 || (_t8 = _$1`
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto !important;
+  margin-right: 1.5rem;
+`));
+const FlexForm = styled.div(_t9 || (_t9 = _$1`
+  flex-direction: column;
+  margin: 1.5rem 0;
+  flex: 3;
+`));
+const TabName = styled.div(_t10 || (_t10 = _$1`
+  margin: 1rem 0 1rem 1rem;
+  font-weight: 700;
+`));
+const Trash = styled.div(_t11 || (_t11 = _$1`
+  margin: 0.75rem 1.25rem 0.75rem 0.75rem;
+  margin-left: auto;
+`));
+const ListContainer = styled.div(_t12 || (_t12 = _$1`
+  padding: 0 1.5rem 0 0;
+  border: 1px solid #dcdcdc;
+`));
 
 // eslint-disable-next-line
-const extractScopesFromUISchema = uischema => {
+const extractScopesFromUISchema$1 = uischema => {
   var _a;
   const scopes = [];
   if (uischema === null || uischema === void 0 ? void 0 : uischema.elements) {
@@ -5464,7 +5510,7 @@ const extractScopesFromUISchema = uischema => {
   }
   return scopes;
 };
-const GenerateRows = (Cell, schema, rowPath, enabled, cells, uischema, isInReview) => {
+const GenerateRows$1 = (Cell, schema, rowPath, enabled, cells, uischema, isInReview) => {
   if (schema.type === 'object') {
     const props = {
       schema,
@@ -5487,7 +5533,7 @@ const GenerateRows = (Cell, schema, rowPath, enabled, cells, uischema, isInRevie
     return jsx(Cell, Object.assign({}, props), rowPath);
   }
 };
-const getValidColumnProps = scopedSchema => {
+const getValidColumnProps$1 = scopedSchema => {
   if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
     return Object.keys(scopedSchema.properties).filter(prop => {
       var _a;
@@ -5497,7 +5543,7 @@ const getValidColumnProps = scopedSchema => {
   // primitives
   return [''];
 };
-const EmptyList = ({
+const EmptyList$1 = ({
   numColumns,
   translations
 }) => jsx(GoAGrid, {
@@ -5508,7 +5554,7 @@ const EmptyList = ({
     })
   })
 });
-const ctxToNonEmptyCellProps = (ctx, ownProps) => {
+const ctxToNonEmptyCellProps$1 = (ctx, ownProps) => {
   var _a;
   ownProps.rowPath + (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
   const errors = '';
@@ -5523,7 +5569,7 @@ const ctxToNonEmptyCellProps = (ctx, ownProps) => {
     renderers: ownProps.renderers || ctx.renderers
   };
 };
-const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
+const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
   var _a, _b;
   const {
     schema,
@@ -5536,11 +5582,11 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
     uischema,
     isInReview
   } = props;
-  const propNames = getValidColumnProps(schema);
+  const propNames = getValidColumnProps$1(schema);
   const propScopes = (uischema === null || uischema === void 0 ? void 0 : uischema.scope) ? propNames.map(name => {
     return `#/properties/${name}`;
   }) : [];
-  const scopesInElements = extractScopesFromUISchema(uischema);
+  const scopesInElements = extractScopesFromUISchema$1(uischema);
   const scopesNotInElements = propScopes.filter(scope => {
     return !scopesInElements.includes(scope);
   });
@@ -5596,16 +5642,16 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
     })]
   });
 });
-const NonEmptyCell = ownProps => {
+const NonEmptyCell$1 = ownProps => {
   const ctx = useJsonForms();
-  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+  const emptyCellProps = ctxToNonEmptyCellProps$1(ctx, ownProps);
   const isValid = isEmpty$1(emptyCellProps.errors);
-  return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
+  return jsx(NonEmptyCellComponent$1, Object.assign({}, emptyCellProps, {
     isInReview: ownProps === null || ownProps === void 0 ? void 0 : ownProps.isInReview,
     isValid: isValid
   }));
 };
-const NonEmptyRowComponent = ({
+const NonEmptyRowComponent$1 = ({
   childPath,
   schema,
   rowIndex,
@@ -5626,12 +5672,12 @@ const NonEmptyRowComponent = ({
           "aria-label": translations.removeAriaLabel,
           onClick: () => openDeleteDialog(childPath, rowIndex)
         })
-      }), GenerateRows(NonEmptyCell, schema, childPath, enabled, cells, uischema, isInReview)]
+      }), GenerateRows$1(NonEmptyCell$1, schema, childPath, enabled, cells, uischema, isInReview)]
     }) : null
   }, childPath);
 };
-const NonEmptyList = /*#__PURE__*/React.memo(NonEmptyRowComponent);
-const ObjectArrayList = ({
+const NonEmptyList$1 = /*#__PURE__*/React.memo(NonEmptyRowComponent$1);
+const ObjectArrayList$1 = ({
   data,
   path,
   schema,
@@ -5645,8 +5691,8 @@ const ObjectArrayList = ({
 }) => {
   const isEmptyList = data === 0;
   if (isEmptyList) {
-    return jsx(EmptyList, {
-      numColumns: getValidColumnProps(schema).length + 1,
+    return jsx(EmptyList$1, {
+      numColumns: getValidColumnProps$1(schema).length + 1,
       translations: translations
     });
   }
@@ -5654,7 +5700,7 @@ const ObjectArrayList = ({
   return jsx(Fragment, {
     children: range(data).map(index => {
       const childPath = Paths.compose(path, `${index}`);
-      return jsx(NonEmptyList, {
+      return jsx(NonEmptyList$1, {
         childPath: childPath,
         rowIndex: index,
         schema: schema,
@@ -5722,7 +5768,7 @@ class ObjectArrayControl extends React.Component {
           translations: translations
         })]
       }), jsx("div", {
-        children: jsx(ObjectArrayList, Object.assign({
+        children: jsx(ObjectArrayList$1, Object.assign({
           path: path,
           schema: schema,
           uischema: uischema,
@@ -5764,6 +5810,7 @@ const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
         children: "Cancel"
       }), jsx(GoAButton, {
         type: "primary",
+        variant: "destructive",
         testId: "object-array-confirm-button",
         onClick: () => {
           onConfirm();
@@ -5825,6 +5872,392 @@ const ArrayBaseReviewControl = props => {
 const GoAArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
 const GoAArrayControlRenderer = withJsonFormsArrayLayoutProps(ArrayControl);
 const GoAArrayControlReviewRenderer = withJsonFormsArrayLayoutProps(ArrayBaseReviewControl);
+
+// eslint-disable-next-line
+const extractScopesFromUISchema = uischema => {
+  var _a;
+  const scopes = [];
+  if (uischema === null || uischema === void 0 ? void 0 : uischema.elements) {
+    // eslint-disable-next-line
+    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.forEach(element => {
+      var _a;
+      if (element === null || element === void 0 ? void 0 : element.elements) {
+        // eslint-disable-next-line
+        (_a = element === null || element === void 0 ? void 0 : element.elements) === null || _a === void 0 ? void 0 : _a.forEach(internalElement => {
+          if (internalElement === null || internalElement === void 0 ? void 0 : internalElement.scope) {
+            scopes.push(internalElement === null || internalElement === void 0 ? void 0 : internalElement.scope);
+          }
+        });
+      } else {
+        if (element === null || element === void 0 ? void 0 : element.scope) {
+          scopes.push(element === null || element === void 0 ? void 0 : element.scope);
+        }
+      }
+    });
+  }
+  return scopes;
+};
+const GenerateRows = (Cell, schema, rowPath, enabled, cells, uischema) => {
+  if (schema.type === 'object') {
+    const props = {
+      schema,
+      rowPath,
+      enabled,
+      cells,
+      uischema
+    };
+    return jsx(Cell, Object.assign({}, props));
+  } else {
+    // primitives
+    const props = {
+      schema,
+      rowPath,
+      cellPath: rowPath,
+      enabled
+    };
+    return jsx(Cell, Object.assign({}, props), rowPath);
+  }
+};
+const getValidColumnProps = scopedSchema => {
+  if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
+    return Object.keys(scopedSchema.properties).filter(prop => {
+      var _a;
+      return ((_a = scopedSchema.properties) === null || _a === void 0 ? void 0 : _a[prop].type) !== 'array';
+    });
+  }
+  // primitives
+  return [''];
+};
+const EmptyList = ({
+  numColumns,
+  translations
+}) => jsx(GoAGrid, {
+  minChildWidth: "60ch",
+  children: jsx(TextCenter, {
+    children: jsx("b", {
+      children: translations.noDataMessage
+    })
+  })
+});
+const ctxToNonEmptyCellProps = (ctx, ownProps) => {
+  var _a;
+  ownProps.rowPath + (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
+  const errors = '';
+  return {
+    uischema: ownProps.uischema,
+    rowPath: ownProps.rowPath,
+    schema: ownProps.schema,
+    rootSchema: (_a = ctx.core) === null || _a === void 0 ? void 0 : _a.schema,
+    errors,
+    enabled: ownProps.enabled,
+    cells: ownProps.cells || ctx.cells,
+    renderers: ownProps.renderers || ctx.renderers
+  };
+};
+const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
+  var _a, _b;
+  const {
+    schema,
+    errors,
+    enabled,
+    renderers,
+    cells,
+    rowPath,
+    isValid,
+    uischema
+  } = props;
+  const propNames = getValidColumnProps(schema);
+  const propScopes = (uischema === null || uischema === void 0 ? void 0 : uischema.scope) ? propNames.map(name => {
+    return `#/properties/${name}`;
+  }) : [];
+  const scopesInElements = extractScopesFromUISchema(uischema);
+  const scopesNotInElements = propScopes.filter(scope => {
+    return !scopesInElements.includes(scope);
+  });
+  /**
+   * Get the first layout type in the elements for the object array and used it
+   * as the default type, if none is provided.
+   * @returns layout type
+   */
+  const getFirstLayoutType = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    let defaultType = 'VerticalLayout';
+    if ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.defaultType) return (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.defaultType;
+    if (((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.detail) && ((_f = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.detail) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.length) > 0) {
+      defaultType = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.detail) === null || _h === void 0 ? void 0 : _h.elements.at(0).type;
+    }
+    return defaultType;
+  };
+  /* Create default elements for scope not defined in the uischema
+   * future work: merge the options
+   */
+  const uiSchemaElementsForNotDefined = {
+    type: getFirstLayoutType(),
+    elements: scopesNotInElements.map(scope => {
+      return {
+        type: 'Control',
+        scope
+      };
+    })
+  };
+  return jsxs(Fragment, {
+    children: [
+    // eslint-disable-next-line
+    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map(element => {
+      return jsx(JsonFormsDispatch, {
+        "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
+        schema: schema,
+        uischema: element,
+        path: rowPath,
+        enabled: enabled,
+        renderers: renderers,
+        cells: cells
+      }, rowPath);
+    }), ((_b = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _b === void 0 ? void 0 : _b.length) > 0 && jsx(JsonFormsDispatch, {
+      schema: schema,
+      uischema: uiSchemaElementsForNotDefined,
+      path: rowPath,
+      enabled: enabled,
+      renderers: renderers,
+      cells: cells
+    })]
+  });
+});
+const NonEmptyCell = ownProps => {
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+  const isValid = isEmpty$1(emptyCellProps.errors);
+  return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
+    isValid: isValid
+  }));
+};
+const NonEmptyRowComponent = ({
+  childPath,
+  schema,
+  enabled,
+  cells,
+  uischema
+}) => {
+  return jsx("div", {
+    children: enabled ? jsx(GoAGrid, {
+      minChildWidth: "30ch",
+      children: GenerateRows(NonEmptyCell, schema, childPath, enabled, cells, uischema)
+    }) : null
+  }, childPath);
+};
+const LeftTab = ({
+  childPath,
+  rowIndex,
+  openDeleteDialog,
+  selectCurrentTab,
+  enabled,
+  currentTab,
+  name,
+  translations
+}) => {
+  return jsx("div", {
+    children: enabled ? jsx(SideMenuItem, {
+      style: currentTab === rowIndex ? {
+        background: '#EFF8FF'
+      } : {},
+      onClick: () => selectCurrentTab(rowIndex),
+      children: jsxs(RowFlexMenu, {
+        children: [jsx(TabName, {
+          children: name
+        }), jsx(Trash, {
+          children: jsx(GoAIconButton, {
+            icon: "trash",
+            "aria-label": translations.removeAriaLabel,
+            onClick: () => openDeleteDialog(childPath, rowIndex, name)
+          })
+        })]
+      })
+    }) : null
+  }, childPath);
+};
+const NonEmptyList = /*#__PURE__*/React.memo(NonEmptyRowComponent);
+const ObjectArrayList = ({
+  data,
+  path,
+  schema,
+  openDeleteDialog,
+  uischema,
+  config,
+  enabled,
+  cells,
+  translations
+}) => {
+  const isEmptyList = data === 0;
+  const rightRef = useRef(null);
+  const current = rightRef.current;
+  const [rightHeight, setRightHeight] = useState(0);
+  const [currentTab, setCurrentTab] = useState(0);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      if (rightHeight !== (current === null || current === void 0 ? void 0 : current.offsetHeight)) setRightHeight(current === null || current === void 0 ? void 0 : current.offsetHeight);
+    });
+    if (current) {
+      resizeObserver.observe(current);
+    }
+    return () => {
+      if (current) {
+        resizeObserver.unobserve(current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current]);
+  if (isEmptyList) {
+    return jsx(EmptyList, {
+      numColumns: getValidColumnProps(schema).length + 1,
+      translations: translations
+    });
+  }
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const selectCurrentTab = index => {
+    setCurrentTab(index);
+  };
+  const paddedHeight = rightHeight && rightHeight + 48;
+  return jsx(ListContainer, {
+    children: jsxs(RowFlex, {
+      children: [jsx(FlexTabs, {
+        style: {
+          height: paddedHeight
+        },
+        children: range(data).map(index => {
+          const childPath = Paths.compose(path, `${index}`);
+          const name = `${index}: ${path}`;
+          return jsx(LeftTab, {
+            childPath: childPath,
+            rowIndex: index,
+            currentTab: currentTab,
+            name: name,
+            openDeleteDialog: openDeleteDialog,
+            selectCurrentTab: selectCurrentTab,
+            enabled: enabled,
+            translations: translations
+          }, childPath);
+        })
+      }), jsx(FlexForm, {
+        ref: rightRef,
+        children: jsx(NonEmptyList, {
+          childPath: Paths.compose(path, `${currentTab}`),
+          rowIndex: currentTab,
+          schema: schema,
+          openDeleteDialog: openDeleteDialog,
+          showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
+          enabled: enabled,
+          cells: cells,
+          path: path,
+          uischema: uischema,
+          translations: translations
+        }, Paths.compose(path, `${currentTab}`))
+      })]
+    })
+  });
+};
+// eslint-disable-next-line
+class ListWithDetailControl extends React.Component {
+  constructor() {
+    super(...arguments);
+    // eslint-disable-next-line
+    this.addItem = (path, value) => this.props.addItem(path, value);
+  }
+  render() {
+    var _a;
+    const _b = this.props,
+      {
+        label,
+        path,
+        schema,
+        rootSchema,
+        uischema,
+        errors,
+        openDeleteDialog,
+        visible,
+        enabled,
+        cells,
+        translations,
+        data,
+        config
+      } = _b,
+      additionalProps = __rest(_b, ["label", "path", "schema", "rootSchema", "uischema", "errors", "openDeleteDialog", "visible", "enabled", "cells", "translations", "data", "config"]);
+    const controlElement = uischema;
+    // eslint-disable-next-line
+    const listTitle = label || ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.title);
+    return jsxs(Visible, {
+      visible: visible,
+      "data-testid": "jsonforms-object-list-wrapper",
+      children: [jsxs(ToolBarHeader, {
+        children: [listTitle && jsx(ObjectArrayTitle, {
+          children: listTitle
+        }), jsx(ObjectArrayToolBar, {
+          errors: errors,
+          label: label,
+          addItem: this.addItem,
+          numColumns: 0,
+          path: path,
+          uischema: controlElement,
+          schema: schema,
+          rootSchema: rootSchema,
+          enabled: enabled,
+          translations: translations
+        })]
+      }), jsx("div", {
+        children: jsx(ObjectArrayList, Object.assign({
+          path: path,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          openDeleteDialog: openDeleteDialog,
+          translations: translations,
+          data: data,
+          cells: cells,
+          config: config
+        }, additionalProps))
+      })]
+    });
+  }
+}
+
+const ListWithDetailsControl = props => {
+  const [open, setOpen] = useState(false);
+  const [path, setPath] = useState();
+  const [name, setName] = useState();
+  const [rowData, setRowData] = useState(0);
+  const {
+    removeItems,
+    visible
+  } = props;
+  const openDeleteDialog = useCallback((p, rowIndex, name) => {
+    setOpen(true);
+    setPath(p);
+    setName(name);
+    setRowData(rowIndex);
+  }, [setOpen, setPath, setRowData]);
+  const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
+  // eslint-disable-next-line
+  const deleteConfirm = useCallback(() => {
+    const p = path === null || path === void 0 ? void 0 : path.substring(0, path.lastIndexOf('.'));
+    if (removeItems && p) {
+      removeItems(p, [rowData])();
+    }
+    setOpen(false);
+    // eslint-disable-next-line
+  }, [setOpen, path, rowData]);
+  return jsxs(Visible, {
+    visible: visible,
+    children: [jsx(ListWithDetailControl, Object.assign({}, props, {
+      openDeleteDialog: openDeleteDialog
+    })), jsx(DeleteDialog, {
+      open: open,
+      onCancel: deleteCancel,
+      onConfirm: deleteConfirm,
+      title: props.translations.deleteDialogTitle || '',
+      message: `Are you sure you wish to delete ${name} `
+    })]
+  });
+};
+const GoAListWithDetailsControlRenderer = withJsonFormsArrayLayoutProps(ListWithDetailsControl);
 const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 
 const GoATextCell = props => jsx(GoAInputText, Object.assign({}, props));
@@ -6384,7 +6817,7 @@ const GoABaseRenderers = [
   renderer: GoAArrayControlRenderer
 }, {
   tester: GoAListWithDetailsTester,
-  renderer: GoAArrayControlRenderer
+  renderer: GoAListWithDetailsControlRenderer
 },
 // layouts
 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.25.0",
+  "version": "1.25.2",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/ObjectArray/DeleteDialog.d.ts

@@ -7,6 +7,6 @@ export interface DeleteDialogProps {
     message: string;
 }
 export interface WithDeleteDialogSupport {
-    openDeleteDialog(path: string, data: number): void;
+    openDeleteDialog(path: string, data: number, name?: string): void;
 }
 export declare const DeleteDialog: React.NamedExoticComponent<DeleteDialogProps>;

package/src/lib/Controls/ObjectArray/ListWithDetailControl.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, Layout } from '@jsonforms/core';
+import { WithDeleteDialogSupport } from './DeleteDialog';
+export type ObjectArrayControlProps = ArrayLayoutProps & WithDeleteDialogSupport;
+export interface EmptyListProps {
+    numColumns: number;
+    translations: ArrayTranslations;
+}
+interface NonEmptyRowComponentProps {
+    propName?: string;
+    schema: JsonSchema;
+    rootSchema?: JsonSchema;
+    rowPath: string;
+    errors: string;
+    enabled: boolean;
+    renderers?: JsonFormsRendererRegistryEntry[];
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    isValid: boolean;
+    uischema?: ControlElement | Layout;
+}
+export declare const NonEmptyCellComponent: React.NamedExoticComponent<NonEmptyRowComponentProps>;
+interface NonEmptyRowProps {
+    childPath: string;
+    schema: JsonSchema;
+    rowIndex: number;
+    showSortButtons: boolean;
+    enabled: boolean;
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    path: string;
+    translations: ArrayTranslations;
+    uischema: ControlElement;
+}
+export declare const NonEmptyList: React.MemoExoticComponent<({ childPath, schema, enabled, cells, uischema, }: NonEmptyRowProps & WithDeleteDialogSupport) => import("react/jsx-runtime").JSX.Element>;
+export declare class ListWithDetailControl extends React.Component<ObjectArrayControlProps, any> {
+    addItem: (path: string, value: any) => () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/src/lib/Controls/ObjectArray/ObjectArray.d.ts

@@ -5,4 +5,3 @@ export declare const ArrayBaseReviewControl: (props: ArrayLayoutProps) => import
 export declare const GoAArrayControlTester: RankedTester;
 export declare const GoAArrayControlRenderer: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export declare const GoAArrayControlReviewRenderer: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export declare const GoAListWithDetailsTester: RankedTester;

package/src/lib/Controls/ObjectArray/index.d.ts

@@ -1 +1,2 @@
 export * from './ObjectArray';
+export * from './listWithDetails';

package/src/lib/Controls/ObjectArray/listWithDetails.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
+export declare const ListWithDetailsControl: (props: ArrayLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GoAListWithDetailsControlRenderer: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const GoAListWithDetailsTester: RankedTester;

package/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -2,3 +2,11 @@ export declare const DeleteDialogContent: import("styled-components").StyledComp
 export declare const ToolBarHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ObjectArrayTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
 export declare const TextCenter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RowFlex: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RowFlexMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlexTabs: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FlexForm: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TabName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Trash: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;