@abgov/jsonforms-components 2.6.7 → 2.6.9

package/index.esm.js

@@ -6617,7 +6617,7 @@ const CheckboxGroup = props => {
           } else {
             newData = newData.filter(item => item !== enumValue);
           }
-          handleChange(path, newData);
+          handleChange(path, newData.length === 0 ? undefined : newData);
         }
       }));
     })
@@ -9974,14 +9974,15 @@ const ObjectArrayList = ({
   config,
   enabled,
   cells,
-  translations
+  translations,
+  currentIndex,
+  setCurrentIndex
 }) => {
   const isEmptyList = data === 0;
   const rightRef = useRef(null);
   const current = rightRef.current;
   const minHeight = 300;
   const [rightHeight, setRightHeight] = useState(minHeight);
-  const [currentTab, setCurrentTab] = useState(0);
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
       if (rightHeight !== (current === null || current === void 0 ? void 0 : current.offsetHeight) && (current === null || current === void 0 ? void 0 : current.offsetHeight)) setRightHeight((current === null || current === void 0 ? void 0 : current.offsetHeight) > minHeight ? current === null || current === void 0 ? void 0 : current.offsetHeight : minHeight);
@@ -10004,7 +10005,7 @@ const ObjectArrayList = ({
   }
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const selectCurrentTab = index => {
-    setCurrentTab(index);
+    setCurrentIndex(index);
   };
   const paddedHeight = rightHeight && rightHeight + 48;
   return jsx(ListContainer, {
@@ -10019,7 +10020,7 @@ const ObjectArrayList = ({
           return jsx(LeftTab, {
             childPath: childPath,
             rowIndex: index,
-            currentTab: currentTab,
+            currentTab: currentIndex,
             name: name,
             openDeleteDialog: openDeleteDialog,
             selectCurrentTab: selectCurrentTab,
@@ -10030,8 +10031,8 @@ const ObjectArrayList = ({
       }), jsx(FlexForm, {
         ref: rightRef,
         children: jsx(NonEmptyList, {
-          childPath: Paths.compose(path, `${currentTab}`),
-          rowIndex: currentTab,
+          childPath: Paths.compose(path, `${currentIndex}`),
+          rowIndex: currentIndex,
           schema: schema,
           openDeleteDialog: openDeleteDialog,
           showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
@@ -10040,7 +10041,7 @@ const ObjectArrayList = ({
           path: path,
           uischema: uischema,
           translations: translations
-        }, Paths.compose(path, `${currentTab}`))
+        }, Paths.compose(path, `${currentIndex}`))
       })]
     })
   });
@@ -10051,9 +10052,18 @@ class ListWithDetailControl extends React.Component {
     super(...arguments);
     // eslint-disable-next-line
     this.addItem = (path, value) => {
-      const pathIdValue = (path === null || path === void 0 ? void 0 : path.split('.')) || '';
-      if (pathIdValue.length > 1 && +this.props.data >= 0 || pathIdValue.length === 1) {
-        this.props.addItem(path, value)();
+      const {
+        data,
+        addItem,
+        setCurrentTab
+      } = this.props;
+      const isNonEmpty = data !== undefined && data !== null;
+      const newIndex = isNonEmpty ? data !== null && data !== void 0 ? data : 0 : 0;
+      if (addItem) {
+        addItem(path, value)();
+      }
+      if (typeof setCurrentTab === 'function') {
+        setCurrentTab(newIndex);
       }
     };
   }
@@ -10111,7 +10121,9 @@ class ListWithDetailControl extends React.Component {
           translations: translations,
           data: data,
           cells: cells,
-          config: config
+          config: config,
+          currentIndex: this.props.currentTab,
+          setCurrentIndex: this.props.setCurrentTab
         }, additionalProps))
       })]
     });
@@ -10128,6 +10140,7 @@ const ListWithDetailsControl = props => {
     visible,
     handleChange
   } = props;
+  const [currentTab, setCurrentTab] = useState(0);
   const openDeleteDialog = useCallback((p, rowIndex, name) => {
     setOpen(true);
     setPath(p);
@@ -10141,18 +10154,22 @@ const ListWithDetailsControl = props => {
     if (removeItems && p) {
       if (props.data === 1) {
         handleChange(p, null);
+        setCurrentTab(0);
       } else {
         removeItems(p, [rowData])();
+        setCurrentTab(prev => Math.max(0, rowData - 1)); // Safe fallback
       }
     }
     setOpen(false);
     // eslint-disable-next-line
-  }, [setOpen, path, rowData]);
+  }, [setOpen, path, rowData, rowData]);
   return jsxs(Visible, {
     visible: visible,
     children: [jsx(ListWithDetailControl, Object.assign({}, props, {
       openDeleteDialog: openDeleteDialog,
-      enabled: true
+      enabled: true,
+      currentTab: currentTab,
+      setCurrentTab: setCurrentTab
     })), jsx(DeleteDialog, {
       open: open,
       onCancel: deleteCancel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.6.7",
+  "version": "2.6.9",
   "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/ListWithDetailControl.d.ts

@@ -32,7 +32,11 @@ interface NonEmptyRowProps {
     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> {
+interface ListWithDetailControlProps extends ObjectArrayControlProps {
+    currentTab: number;
+    setCurrentTab: (index: number) => void;
+}
+export declare class ListWithDetailControl extends React.Component<ListWithDetailControlProps, any> {
     addItem: (path: string, value: any) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }