@abgov/jsonforms-components 2.37.0 → 2.38.1

package/index.esm.js

@@ -12,6 +12,7 @@ import ___default, { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } fro
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
+import pluralize from 'pluralize';
 import { evaluateSync, compileSync } from '@mdx-js/mdx';
 import { Parser } from 'expr-eval';
 import Ajv from 'ajv';
@@ -7084,10 +7085,10 @@ let _$6 = t => t,
   _t16$1,
   _t17$1,
   _t18$1,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
+  _t19$1,
+  _t20$1,
+  _t21$1,
+  _t22$1,
   _t23,
   _t24,
   _t25,
@@ -7228,22 +7229,22 @@ styled.div(_t17$1 || (_t17$1 = _$6`
 const PageBorder = styled.div(_t18$1 || (_t18$1 = _$6`
   padding: var(--goa-space-m) var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t19 || (_t19 = _$6`
+const TableReviewItemSection = styled.div(_t19$1 || (_t19$1 = _$6`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t20 || (_t20 = _$6`
+const TableReviewItem = styled.div(_t20$1 || (_t20$1 = _$6`
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t21 || (_t21 = _$6`
+const TableReviewPageTitleRow = styled.div(_t21$1 || (_t21$1 = _$6`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t22 || (_t22 = _$6`
+const TableReviewCategoryLabel = styled.h3(_t22$1 || (_t22$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
@@ -8748,10 +8749,12 @@ const ApplicationStatus = ({
   const completed = completedGroups;
   const badge = totalGroups === completed ? jsx(GoABadge, {
     type: "success",
-    content: "Complete"
+    content: "Complete",
+    icon: false
   }) : jsx(GoABadge, {
     type: "information",
-    content: "Incomplete"
+    content: "Incomplete",
+    icon: false
   });
   const mainHeading = 'Application Progress';
   const progressPercentageAccurate = 100 * completed / totalGroups;
@@ -8832,7 +8835,8 @@ const getCategoryStatusBadge = category => {
     jsx(GoABadge, {
       type: badgeType,
       content: status,
-      ariaLabel: status
+      ariaLabel: status,
+      icon: false
     })
     // </div>
   );
@@ -9922,97 +9926,117 @@ let _$3 = t => t,
   _t15,
   _t16,
   _t17,
-  _t18;
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
-const NonEmptyCellStyle = styled.div(_t2$2 || (_t2$2 = _$3`
+const MarginTop = styled.div(_t2$2 || (_t2$2 = _$3`
+  margin-top: var(--goa-space-l);
+`));
+const NonEmptyCellStyle = styled.div(_t3$1 || (_t3$1 = _$3`
   goa-table thead th {
     background-color: #000:
   }
 `));
-const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$3`
-  margin-bottom: var(--goa-space-l);
+const ToolBarHeader = styled.div(_t4$1 || (_t4$1 = _$3`
+  margin-bottom: var(--goa-space-s);
 `));
-const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$3`
-  margin-bottom: var(--goa-space-l);
+const ObjectArrayTitle = styled.h3(_t5$1 || (_t5$1 = _$3`
+  margin-bottom: var(--goa-space-s);
 
   span {
     color: #666666;
     font-size: var(--goa-font-size-2);
   }
 `));
-const RequiredSpan = styled.span(_t5$1 || (_t5$1 = _$3`
+const RequiredSpan = styled.span(_t6$1 || (_t6$1 = _$3`
   color: #666666;
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
 `));
-const TextCenter = styled.div(_t6$1 || (_t6$1 = _$3`
+const TextCenter = styled.div(_t7 || (_t7 = _$3`
   text-align: center;
 `));
-const SideMenuItem = styled.div(_t7 || (_t7 = _$3`
+const SideMenuItem = styled.div(_t8 || (_t8 = _$3`
   &:hover {
     background: #f1f1f1;
   }
 `));
-const RowFlex = styled.div(_t8 || (_t8 = _$3`
+const RowFlex = styled.div(_t9 || (_t9 = _$3`
   display: flex;
   align-items: stretch;
 `));
-const RowFlexMenu = styled.div(_t9 || (_t9 = _$3`
+const RowFlexMenu = styled.div(_t0 || (_t0 = _$3`
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #dcdcdc;
+  border: 1px solid #dcdcdc;
+  margin-top: 1rem;
 `));
-const FlexTabs = styled.div(_t0 || (_t0 = _$3`
+const FlexTabs = styled.div(_t1 || (_t1 = _$3`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
-  margin-right: 1.5rem;
 `));
-const FlexForm = styled.div(_t1 || (_t1 = _$3`
+const FlexForm = styled.div(_t10 || (_t10 = _$3`
   flex-direction: column;
-  margin: 1.5rem 0;
   flex: 3;
 `));
-const TabName = styled.div(_t10 || (_t10 = _$3`
+const TabData = styled.div(_t11 || (_t11 = _$3`
   margin: 1rem 0 1rem 1rem;
-  font-weight: 700;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `));
-const Trash = styled.div(_t11 || (_t11 = _$3`
-  margin: 0.75rem 1.25rem 0.75rem 0.75rem;
+const Trash = styled.div(_t12 || (_t12 = _$3`
+  margin: 0.9rem 0.4rem 0.6rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t12 || (_t12 = _$3`
+const ListContainer = styled.div(_t13 || (_t13 = _$3`
+  padding: 0 0 0 0;
+`));
+const IconPadding = styled.div(_t14 || (_t14 = _$3`
+  padding: 0.9rem 0.5rem 0 0;
+`));
+const UpdateListContainer = styled.div(_t15 || (_t15 = _$3`
+  width: 100%;
+  border: 1px solid #dcdcdc;
+  padding: var(--goa-space-xl);
+`));
+styled.div(_t16 || (_t16 = _$3`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t13 || (_t13 = _$3`
+const TableTHHeader = styled.th(_t17 || (_t17 = _$3`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t14 || (_t14 = _$3`
+const ObjectArrayWarningIconDiv = styled.div(_t18 || (_t18 = _$3`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const ListWithDetailWarningIconDiv = styled.div(_t15 || (_t15 = _$3`
+const ListWithDetailWarningIconDiv = styled.div(_t19 || (_t19 = _$3`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-3);
   color: var(--goa-color-interactive-error);
 `));
-styled.label(_t16 || (_t16 = _$3`
+styled.label(_t20 || (_t20 = _$3`
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-3);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.div(_t17 || (_t17 = _$3`
+styled.div(_t21 || (_t21 = _$3`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -10020,7 +10044,7 @@ styled.div(_t17 || (_t17 = _$3`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t18 || (_t18 = _$3`
+const HilightCellWarning = styled.div(_t22 || (_t22 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
 
@@ -10072,15 +10096,18 @@ const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
 });
 
 const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
+  data,
   label,
   path,
   addItem,
   schema,
   enabled,
   rootSchema,
-  uischema
+  uischema,
+  setCurrentListPage,
+  buttonType
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const buttonPosition = ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.addButtonPosition) || 'left';
   const buttonUIProps = ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.addButtonUIProps) || {};
   const arrayLabel = getLabelText(uischema.scope, label);
@@ -10089,16 +10116,21 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
       style: {
         textAlign: buttonPosition
       },
-      children: jsx(GoAButton, Object.assign({
-        disabled: !enabled,
-        testId: `object-array-toolbar-${label}`,
-        leadingIcon: "add",
-        "aria-label": `Add to button to ${(label === null || label === void 0 ? void 0 : label.toLowerCase()) || ''}`,
-        onClick: addItem(path, createDefaultValue(schema, rootSchema)),
-        type: (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.addButtonType) !== null && _d !== void 0 ? _d : 'secondary'
-      }, buttonUIProps, {
-        children: ((_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.addButtonText) || capitalizeFirstLetter(`Add ${arrayLabel}`)
-      }))
+      children: jsx(MarginTop, {
+        children: jsx(GoAButton, Object.assign({
+          disabled: !enabled,
+          testId: `object-array-toolbar-${label}`,
+          leadingIcon: "add",
+          "aria-label": `Add to button to ${(label === null || label === void 0 ? void 0 : label.toLowerCase()) || ''}`,
+          onClick: () => {
+            addItem(path, createDefaultValue(schema, rootSchema))();
+            setCurrentListPage === null || setCurrentListPage === void 0 ? void 0 : setCurrentListPage(data + 1);
+          },
+          type: (_e = (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.addButtonType) !== null && _d !== void 0 ? _d : buttonType) !== null && _e !== void 0 ? _e : 'secondary'
+        }, buttonUIProps, {
+          children: ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.addButtonText) || `Add ${pluralize.singular(arrayLabel.charAt(0).toLowerCase() + arrayLabel.slice(1))}`
+        }))
+      })
     })
   });
 });
@@ -11029,7 +11061,7 @@ const NonEmptyRowComponent = ({
     }) : null
   }, childPath);
 };
-const LeftTab = ({
+const MainTab = ({
   childPath,
   rowIndex,
   openDeleteDialog,
@@ -11038,41 +11070,59 @@ const LeftTab = ({
   currentTab,
   name,
   current,
-  translations
+  setCurrentListPage
 }) => {
+  var _a;
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const getDataAtPath = (data, path) => path.replace(/\[(\d+)\]/g, '.$1').split('.').reduce((acc, key) => acc ? acc[key] : undefined, data);
+  const {
+    core
+  } = useJsonForms();
+  const rowData = getDataAtPath(core === null || core === void 0 ? void 0 : core.data, childPath);
+  const rowErrors = (_a = core === null || core === void 0 ? void 0 : core.errors) === null || _a === void 0 ? void 0 : _a.filter(e => {
+    const base = `/${childPath.replace(/\./g, '/')}`;
+    return e.instancePath === base || e.instancePath.startsWith(base + '/');
+  }).map(error => error === null || error === void 0 ? void 0 : error.message);
   return jsx("div", {
-    children: jsx(SideMenuItem, {
-      style: currentTab === rowIndex ? {
-        background: '#EFF8FF'
-      } : {},
-      onClick: () => selectCurrentTab(rowIndex),
-      onKeyDown: e => {
-        if (e.key === 'ArrowRight') {
-          e.preventDefault();
-          if (current) {
-            const goa = current === null || current === void 0 ? void 0 : current.querySelector('goa-input, goa-button');
-            if (goa === null || goa === void 0 ? void 0 : goa.shadowRoot) {
-              const internal = goa.shadowRoot.querySelector('input, button');
-              internal === null || internal === void 0 ? void 0 : internal.focus();
-              selectCurrentTab(rowIndex);
+    children: jsx(GoAFormItem, {
+      error: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? rowErrors : undefined,
+      children: jsx(SideMenuItem, {
+        onClick: () => selectCurrentTab(rowIndex),
+        onKeyDown: e => {
+          if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            if (current) {
+              const goa = current === null || current === void 0 ? void 0 : current.querySelector('goa-input, goa-button');
+              if (goa === null || goa === void 0 ? void 0 : goa.shadowRoot) {
+                const internal = goa.shadowRoot.querySelector('input, button');
+                internal === null || internal === void 0 ? void 0 : internal.focus();
+                selectCurrentTab(rowIndex);
+              }
             }
           }
-        }
-      },
-      children: jsxs(RowFlexMenu, {
-        tabIndex: 0,
-        children: [jsx(TabName, {
-          children: name
-        }), enabled ? jsx(Trash, {
-          role: "trash button",
-          children: jsx(GoAIconButton, {
-            disabled: !enabled,
-            icon: "trash",
-            title: 'trash button',
-            testId: "remove the details",
-            onClick: () => openDeleteDialog(childPath, rowIndex, name)
-          })
-        }) : null]
+        },
+        children: jsxs(RowFlexMenu, {
+          tabIndex: 0,
+          children: [jsxs(TabData, {
+            children: [Object.keys(rowData !== null && rowData !== void 0 ? rowData : {}).length === 0 && 'No data', " ", Object.values(rowData).join(', ')]
+          }), enabled ? jsx(Trash, {
+            children: jsx(GoAIconButton, {
+              disabled: !enabled,
+              icon: "trash",
+              title: 'remove',
+              testId: "remove the details",
+              onClick: () => openDeleteDialog(childPath, rowIndex, name)
+            })
+          }) : null, jsx(IconPadding, {
+            children: jsx(GoAIconButton, {
+              disabled: !enabled,
+              icon: "create",
+              title: 'edit',
+              testId: "edit button",
+              onClick: () => setCurrentListPage(currentTab + 1)
+            })
+          })]
+        })
       })
     })
   }, childPath);
@@ -11089,13 +11139,17 @@ const ObjectArrayList = ({
   cells,
   translations,
   currentIndex,
-  setCurrentIndex
+  setCurrentIndex,
+  setCurrentListPage,
+  currentListPage,
+  listTitle,
+  errors
 }) => {
   var _a, _b;
   const isEmptyList = data === 0;
   const rightRef = useRef(null);
   const current = rightRef.current;
-  const minHeight = 300;
+  const minHeight = 100;
   const [rightHeight, setRightHeight] = useState(minHeight);
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -11123,18 +11177,20 @@ const ObjectArrayList = ({
   const selectCurrentTab = index => {
     setCurrentIndex(index);
   };
-  const paddedHeight = rightHeight && rightHeight + 48;
-  // const detailRef = useRef<HTMLDivElement>(null);
+  (() => {
+    const str = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel) ? `${appliedUiSchemaOptions.itemLabel}` : `${path}`;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  })();
   return jsx(ListContainer, {
     children: jsxs(RowFlex, {
-      children: [jsx(FlexTabs, {
+      children: [currentListPage === 0 && jsx(FlexTabs, {
         style: {
-          height: paddedHeight
+          height: '100%'
         },
         children: range(data).map(index => {
           const childPath = Paths.compose(path, `${index}`);
-          const name = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel) ? `${appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel} ${index + 1}` : `${path} ${index + 1}`;
-          return jsx(LeftTab, {
+          const name = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel) ? `${pluralize.singular(appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel)} ${index + 1}` : `${pluralize.singular(path)} ${index + 1}`;
+          return jsx(MainTab, {
             childPath: childPath,
             rowIndex: index,
             currentTab: currentIndex,
@@ -11143,24 +11199,35 @@ const ObjectArrayList = ({
             selectCurrentTab: selectCurrentTab,
             enabled: enabled,
             current: current,
-            translations: translations
+            setCurrentListPage: index => setCurrentListPage(index)
           }, childPath);
         })
-      }), jsx(FlexForm, {
-        ref: rightRef,
-        tabIndex: -1,
-        children: jsx(NonEmptyList, {
-          childPath: Paths.compose(path, `${currentIndex}`),
-          rowIndex: currentIndex,
-          schema: schema,
-          openDeleteDialog: openDeleteDialog,
-          showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
-          enabled: enabled,
-          cells: cells,
-          path: path,
-          uischema: uischema,
-          translations: translations
-        }, Paths.compose(path, `${currentIndex}`))
+      }), currentListPage > 0 && jsxs(UpdateListContainer, {
+        children: [jsxs(FlexForm, {
+          ref: rightRef,
+          tabIndex: -1,
+          children: [jsx(ObjectArrayTitle, {
+            children: pluralize.singular(listTitle || '')
+          }), jsx(NonEmptyList, {
+            childPath: Paths.compose(path, `${currentIndex}`),
+            rowIndex: currentIndex,
+            schema: schema,
+            openDeleteDialog: openDeleteDialog,
+            showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
+            enabled: enabled,
+            cells: cells,
+            path: path,
+            uischema: uischema,
+            translations: translations
+          }, Paths.compose(path, `${currentIndex}`))]
+        }), jsx(GoAButton, {
+          type: 'primary',
+          onClick: () => {
+            setCurrentListPage(0);
+          },
+          testId: "next-list-button",
+          children: "Continue"
+        })]
       })]
     })
   });
@@ -11170,7 +11237,8 @@ class ListWithDetailControl extends React.Component {
   constructor() {
     super(...arguments);
     this.state = {
-      maxItemsError: ''
+      maxItemsError: '',
+      currentListPage: 0
     };
     // eslint-disable-next-line
     this.addItem = (path, value) => {
@@ -11228,17 +11296,20 @@ class ListWithDetailControl extends React.Component {
       visible: visible,
       "data-testid": "jsonforms-object-list-wrapper",
       children: [jsxs(ToolBarHeader, {
-        children: [listTitle && jsxs(ObjectArrayTitle, {
-          children: [listTitle, " ", jsx("span", {
-            children: additionalProps.required && '(required)'
-          }), this.state.maxItemsError && jsx("span", {
-            style: {
-              color: 'red',
-              marginLeft: '1rem'
-            },
-            children: this.state.maxItemsError
-          })]
-        }), jsx(ObjectArrayToolBar, {
+        children: [listTitle && this.state.currentListPage === 0 && jsx(MarginTop, {
+          children: jsxs(ObjectArrayTitle, {
+            children: [listTitle, " ", jsx("span", {
+              children: additionalProps.required && '(required)'
+            }), this.state.maxItemsError && jsx("span", {
+              style: {
+                color: 'red',
+                marginLeft: '1rem'
+              },
+              children: this.state.maxItemsError
+            })]
+          })
+        }), this.state.currentListPage === 0 && data === 0 && jsx(ObjectArrayToolBar, {
+          data: data,
           errors: errors,
           label: label,
           addItem: (path, value) => () => {
@@ -11249,7 +11320,14 @@ class ListWithDetailControl extends React.Component {
           uischema: controlElement,
           schema: schema,
           rootSchema: rootSchema,
-          enabled: enabled
+          enabled: enabled,
+          setCurrentListPage: listPage => {
+            this.setState({
+              currentListPage: listPage
+            });
+          },
+          currentListPage: this.state.currentListPage,
+          buttonType: "secondary"
         })]
       }), jsx("div", {
         children: jsx(ObjectArrayList, Object.assign({
@@ -11263,8 +11341,36 @@ class ListWithDetailControl extends React.Component {
           cells: cells,
           config: config,
           currentIndex: this.props.currentTab,
-          setCurrentIndex: this.props.setCurrentTab
+          setCurrentIndex: this.props.setCurrentTab,
+          setCurrentListPage: listPage => {
+            this.setState({
+              currentListPage: listPage
+            });
+          },
+          errors: errors,
+          currentListPage: this.state.currentListPage,
+          listTitle: listTitle
         }, additionalProps))
+      }), this.state.currentListPage === 0 && data > 0 && jsx(ObjectArrayToolBar, {
+        data: data,
+        errors: errors,
+        label: label,
+        addItem: (path, value) => () => {
+          this.addItem(path, value);
+        },
+        numColumns: 0,
+        path: path,
+        uischema: controlElement,
+        schema: schema,
+        rootSchema: rootSchema,
+        enabled: enabled,
+        setCurrentListPage: listPage => {
+          this.setState({
+            currentListPage: listPage
+          });
+        },
+        currentListPage: this.state.currentListPage,
+        buttonType: "tertiary"
       })]
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.37.0",
+  "version": "2.38.1",
   "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",
@@ -13,7 +13,8 @@
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",
-    "expr-eval": "^2.0.2"
+    "expr-eval": "^2.0.2",
+    "pluralize": "^8.0.0"
   },
   "dependencies": {
     "axios": "^1.6.7",

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

@@ -31,6 +31,7 @@ interface NonEmptyRowProps {
     path: string;
     translations: ArrayTranslations;
     uischema: ControlElement;
+    listTitle?: string;
 }
 export declare const NonEmptyList: React.MemoExoticComponent<({ childPath, schema, enabled, cells, uischema, }: NonEmptyRowProps & WithDeleteDialogSupport) => import("react/jsx-runtime").JSX.Element>;
 interface ListWithDetailControlProps extends ObjectArrayControlProps {
@@ -40,6 +41,7 @@ interface ListWithDetailControlProps extends ObjectArrayControlProps {
 export declare class ListWithDetailControl extends React.Component<ListWithDetailControlProps, any> {
     state: {
         maxItemsError: string;
+        currentListPage: number;
     };
     addItem: (path: string, value: any) => void;
     render(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ControlElement, JsonSchema } from '@jsonforms/core';
 export interface ObjectArrayToolbarProps {
+    data?: any;
     numColumns: number;
     errors: string;
     label: string;
@@ -10,6 +11,9 @@ export interface ObjectArrayToolbarProps {
     rootSchema: JsonSchema;
     enabled: boolean;
     addItem(path: string, value: any): () => void;
+    setCurrentListPage?: (page: number) => void;
+    currentListPage?: number;
+    buttonType?: string;
 }
 declare const ObjectArrayToolBar: React.NamedExoticComponent<ObjectArrayToolbarProps>;
 export default ObjectArrayToolBar;

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

@@ -1,4 +1,5 @@
 export declare const DeleteDialogContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MarginTop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const NonEmptyCellStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ToolBarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ObjectArrayTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
@@ -9,9 +10,12 @@ export declare const RowFlex: import("styled-components/dist/types").IStyledComp
 export declare const RowFlexMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TabName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabData: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Trash: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UpdateListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CompleteContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableTHHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
 export declare const ObjectArrayWarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListWithDetailWarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;