@abgov/jsonforms-components 2.42.4 → 2.43.1

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useContext, useReducer, useMemo, useEffect, useCallback, useState, useRef } from 'react';
+import React, { createContext, useContext, useReducer, useMemo, useEffect, useCallback, useState, useRef, useLayoutEffect } from 'react';
 import { GoabFormItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabGrid, GoabFormStepper, GoabFormStep, GoabPages, GoabButton, GoabModal, GoabButtonGroup, GoabBadge, GoabText, GoabTable, GoabIconButton, GoabFileUploadInput, GoabCircularProgress, GoabContainer, GoabDropdown, GoabDropdownItem, GoabDetails, GoabSpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
@@ -8172,7 +8172,7 @@ let _$6 = t => t,
   _t23$1,
   _t24$1,
   _t25$1,
-  _t26,
+  _t26$1,
   _t27,
   _t28;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
@@ -8358,7 +8358,7 @@ const PageStepperRow = styled.tr(_t25$1 || (_t25$1 = _$6`
             outline: 3px solid var(--goa-color-interactive-focus);
           }
         `);
-const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$6`
+const SectionHeaderRowTr = styled.tr(_t26$1 || (_t26$1 = _$6`
   & > td {
     border: 0 !important;
     padding-top: var(--goa-space-l);
@@ -9361,6 +9361,7 @@ const RenderPages = props => {
   const saveFormFunction = enumerators === null || enumerators === void 0 ? void 0 : enumerators.saveFunction.get('save-form');
   const saveForm = saveFormFunction && saveFormFunction();
   const [isOpen, setIsOpen] = useState(false);
+  const topElementRef = useRef(null);
   const handleSubmit = () => {
     if (submitForm) {
       submitForm(data);
@@ -9378,6 +9379,7 @@ const RenderPages = props => {
   };
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
+    ref: topElementRef,
     children: [jsx(Visible, {
       visible: visible,
       children: jsx("div", {
@@ -9429,6 +9431,9 @@ const RenderPages = props => {
                             prevId = prevId - 1;
                           }
                           if (prevId >= 0) {
+                            if (topElementRef.current) {
+                              topElementRef.current.scrollIntoView();
+                            }
                             goToPage(prevId);
                           }
                         },
@@ -9446,6 +9451,9 @@ const RenderPages = props => {
                             nextId = nextId + 1;
                           }
                           if (!(currentStep === totalSteps && hideSummary)) {
+                            if (topElementRef.current) {
+                              topElementRef.current.scrollIntoView();
+                            }
                             goToPage(nextId);
                           }
                         },
@@ -10106,7 +10114,8 @@ let _$3 = t => t,
   _t22,
   _t23,
   _t24,
-  _t25;
+  _t25,
+  _t26;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
@@ -10144,7 +10153,8 @@ const SideMenuItem = styled.div(_t8 || (_t8 = _$3`
 `));
 const RowFlex = styled.div(_t9 || (_t9 = _$3`
   display: flex;
-  align-items: stretch;
+
+  align-items: flex-start;
 `));
 const RowFlexMenu = styled.div(_t0 || (_t0 = _$3`
   display: flex;
@@ -10157,65 +10167,76 @@ const FlexTabs = styled.div(_t1 || (_t1 = _$3`
   flex: 1;
   overflow-y: auto !important;
 `));
-const FlexForm = styled.div(_t10 || (_t10 = _$3`
+const FlexTabsWithMargin = styled.div(_t10 || (_t10 = _$3`
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto !important;
+  margin-right: 1.5rem;
+
+  flex-shrink: 1;
+  // max-height: 500px;
+`));
+const FlexForm = styled.div(_t11 || (_t11 = _$3`
   flex-direction: column;
   flex: 3;
+  flex-shrink: 0;
+  overflow-y: auto;
 `));
-const TabName = styled.div(_t11 || (_t11 = _$3`
+const TabName = styled.div(_t12 || (_t12 = _$3`
   margin: 1rem 0 1rem 1rem;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `));
-const Trash = styled.div(_t12 || (_t12 = _$3`
+const Trash = styled.div(_t13 || (_t13 = _$3`
   margin: 0.9rem 0.4rem 0.6rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t13 || (_t13 = _$3`
+const ListContainer = styled.div(_t14 || (_t14 = _$3`
   padding: 0 0 0 0;
 `));
-styled.div(_t14 || (_t14 = _$3`
+styled.div(_t15 || (_t15 = _$3`
   padding: 0 0 var(--goa-space-l) 0;
 `));
-const IconPadding = styled.div(_t15 || (_t15 = _$3`
+const IconPadding = styled.div(_t16 || (_t16 = _$3`
   padding: 0.9rem 0.5rem 0 0;
 `));
-const UpdateListContainer = styled.div(_t16 || (_t16 = _$3`
+const UpdateListContainer = styled.div(_t17 || (_t17 = _$3`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
 `));
-styled.div(_t17 || (_t17 = _$3`
+styled.div(_t18 || (_t18 = _$3`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t18 || (_t18 = _$3`
+const TableTHHeader = styled.th(_t19 || (_t19 = _$3`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t19 || (_t19 = _$3`
+const ObjectArrayWarningIconDiv = styled.div(_t20 || (_t20 = _$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(_t20 || (_t20 = _$3`
+const ListWithDetailWarningIconDiv = styled.div(_t21 || (_t21 = _$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(_t21 || (_t21 = _$3`
+styled.label(_t22 || (_t22 = _$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(_t22 || (_t22 = _$3`
+styled.div(_t23 || (_t23 = _$3`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -10223,10 +10244,10 @@ styled.div(_t22 || (_t22 = _$3`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t23 || (_t23 = _$3`
+const HilightCellWarning = styled.div(_t24 || (_t24 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
-const FixTableHeaderAlignment = styled.div(_t24 || (_t24 = _$3`
+const FixTableHeaderAlignment = styled.div(_t25 || (_t25 = _$3`
   table thead th:nth-child(3) {
     text-align: center;
   }
@@ -10235,7 +10256,7 @@ const FixTableHeaderAlignment = styled.div(_t24 || (_t24 = _$3`
     text-align: center;
   }
 `));
-const ListWithDetailsReviewCellDiv = styled.div(_t25 || (_t25 = _$3`
+const ListWithDetailsReviewCellDiv = styled.div(_t26 || (_t26 = _$3`
   display: 'flex';
   flex-direction: 'column';
   text-align: 'start';
@@ -11528,6 +11549,53 @@ function humanizeAjvError(error, schema, uischema) {
       return `${label} ${(_a = error.message) !== null && _a !== void 0 ? _a : ''}`.trim();
   }
 }
+const LeftTab = ({
+  childPath,
+  rowIndex,
+  openDeleteDialog,
+  selectCurrentTab,
+  enabled,
+  currentTab,
+  name,
+  current
+}) => {
+  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: jsxs(RowFlexMenu, {
+        tabIndex: 0,
+        children: [jsx(TabName, {
+          children: name
+        }), enabled ? jsx(Trash, {
+          role: "trash button",
+          children: jsx(GoabIconButton, {
+            disabled: !enabled,
+            icon: "trash",
+            title: 'trash button',
+            testId: "remove the details",
+            onClick: () => openDeleteDialog(childPath, rowIndex, name)
+          })
+        }) : null]
+      })
+    })
+  }, childPath);
+};
 const MainTab = ({
   childPath,
   rowIndex,
@@ -11607,26 +11675,21 @@ const ObjectArrayList = ({
   listTitle,
   errors
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const isEmptyList = data === 0;
-  const rightRef = useRef(null);
-  const current = rightRef.current;
   const minHeight = 100;
-  const [rightHeight, setRightHeight] = useState(minHeight);
-  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);
-    });
-    if (current) {
-      resizeObserver.observe(current);
+  const totalContentRef = useRef(null);
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const current = totalContentRef.current;
+  useLayoutEffect(() => {
+    var _a;
+    if (!leftRef.current || !rightRef.current) return;
+    const height = (_a = rightRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+    if (height && height > minHeight) {
+      leftRef.current.style.height = `${height}px`;
     }
-    return () => {
-      if (current) {
-        resizeObserver.unobserve(current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [current, rightHeight, rightRef]);
+  }, [setCurrentListPage]);
   if (isEmptyList) {
     const noDataMessge = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.noDataMessage) !== null && _b !== void 0 ? _b : 'No data';
     return jsx(EmptyList, {
@@ -11640,34 +11703,34 @@ const ObjectArrayList = ({
     setCurrentIndex(index);
   };
   const continueButtonTitle = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.listWithDetailsContinueButtonTitle;
+  const withLeftTab = (_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps) === null || _f === void 0 ? void 0 : _f.withLeftTab;
   return jsx(ListContainer, {
-    children: jsxs(RowFlex, {
-      children: [currentListPage === 0 && jsx(FlexTabs, {
-        style: {
-          height: '100%'
-        },
-        children: range(data).map(index => {
-          const childPath = Paths.compose(path, `${index}`);
-          return jsx(MainTab, {
-            childPath: childPath,
-            rowIndex: index,
-            currentTab: currentIndex,
-            openDeleteDialog: openDeleteDialog,
-            selectCurrentTab: selectCurrentTab,
-            enabled: enabled,
-            current: current,
-            setCurrentListPage: index => setCurrentListPage(index),
-            uischema: uischema,
-            schema: schema
-          }, childPath);
-        })
-      }), currentListPage > 0 && jsxs(UpdateListContainer, {
-        children: [jsxs(FlexForm, {
-          ref: rightRef,
+    children: jsx("div", {
+      children: withLeftTab ? jsxs(RowFlex, {
+        ref: totalContentRef,
+        children: [jsx(FlexTabsWithMargin, {
+          ref: leftRef,
+          children: jsx("div", {
+            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, {
+                childPath: childPath,
+                rowIndex: index,
+                currentTab: currentIndex,
+                name: name,
+                openDeleteDialog: openDeleteDialog,
+                selectCurrentTab: selectCurrentTab,
+                enabled: enabled,
+                current: current,
+                translations: translations
+              }, childPath);
+            })
+          })
+        }), jsx(FlexForm, {
           tabIndex: -1,
-          children: [jsx(ObjectArrayTitle, {
-            children: listTitle
-          }), jsx(NonEmptyList, {
+          ref: rightRef,
+          children: jsx(NonEmptyList, {
             childPath: Paths.compose(path, `${currentIndex}`),
             rowIndex: currentIndex,
             schema: schema,
@@ -11678,16 +11741,55 @@ const ObjectArrayList = ({
             path: path,
             uischema: uischema,
             translations: translations
-          }, Paths.compose(path, `${currentIndex}`))]
-        }), jsx(GoabButton, {
-          type: 'primary',
-          onClick: () => {
-            setCurrentListPage(0);
+          }, Paths.compose(path, `${currentIndex}`))
+        })]
+      }) : jsxs(RowFlex, {
+        children: [currentListPage === 0 && jsx(FlexTabs, {
+          style: {
+            height: '100%'
           },
-          testId: "next-list-button",
-          children: continueButtonTitle ? continueButtonTitle : 'Continue'
+          children: range(data).map(index => {
+            const childPath = Paths.compose(path, `${index}`);
+            return jsx(MainTab, {
+              childPath: childPath,
+              rowIndex: index,
+              currentTab: currentIndex,
+              openDeleteDialog: openDeleteDialog,
+              selectCurrentTab: selectCurrentTab,
+              enabled: enabled,
+              current: current,
+              setCurrentListPage: index => setCurrentListPage(index),
+              uischema: uischema,
+              schema: schema
+            }, childPath);
+          })
+        }), currentListPage > 0 && jsxs(UpdateListContainer, {
+          children: [jsxs(FlexForm, {
+            tabIndex: -1,
+            children: [jsx(ObjectArrayTitle, {
+              children: 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(GoabButton, {
+            type: 'primary',
+            onClick: () => {
+              setCurrentListPage(0);
+            },
+            testId: "next-list-button",
+            children: continueButtonTitle ? continueButtonTitle : 'Continue'
+          })]
         })]
-      })]
+      })
     })
   });
 };
@@ -11731,7 +11833,7 @@ class ListWithDetailControl extends React.Component {
     };
   }
   render() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const _this$props = this.props,
       {
         label,
@@ -11751,11 +11853,15 @@ class ListWithDetailControl extends React.Component {
     const controlElement = uischema;
     // eslint-disable-next-line
     const listTitle = (_e = (_d = (_c = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.label) !== null && _a !== void 0 ? _a : (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : getItemsTitle(schema)) !== null && _d !== void 0 ? _d : schema === null || schema === void 0 ? void 0 : schema.title) !== null && _e !== void 0 ? _e : label;
+    const withLeftTab = (_g = (_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.componentProps) === null || _g === void 0 ? void 0 : _g.withLeftTab;
+    const noLeftTabBlankButton = this.state.currentListPage === 0 && data === 0;
+    const showMainItems = withLeftTab || this.state.currentListPage === 0;
+    const showSecondaryButton = withLeftTab || noLeftTabBlankButton;
     return jsxs(Visible, {
       visible: visible,
       "data-testid": "jsonforms-object-list-wrapper",
       children: [jsxs(ToolBarHeader, {
-        children: [listTitle && this.state.currentListPage === 0 && jsx(MarginTop, {
+        children: [listTitle && showMainItems && jsx(MarginTop, {
           children: jsxs(ObjectArrayTitle, {
             children: [listTitle, " ", jsx("span", {
               children: additionalProps.required && '(required)'
@@ -11767,7 +11873,7 @@ class ListWithDetailControl extends React.Component {
               children: this.state.maxItemsError
             })]
           })
-        }), this.state.currentListPage === 0 && data === 0 && jsx(ObjectArrayToolBar, {
+        }), showSecondaryButton && jsx(ObjectArrayToolBar, {
           data: data,
           errors: errors,
           label: label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.42.4",
+  "version": "2.43.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",

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

@@ -9,6 +9,7 @@ export declare const SideMenuItem: import("styled-components/dist/types").IStyle
 export declare const RowFlex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 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 FlexTabsWithMargin: 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 Trash: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;