@abgov/jsonforms-components 2.42.0 → 2.42.1

package/index.esm.js

@@ -7138,7 +7138,7 @@ let _$6 = t => t,
   _t22$1,
   _t23$1,
   _t24$1,
-  _t25,
+  _t25$1,
   _t26,
   _t27,
   _t28;
@@ -7303,7 +7303,7 @@ const CategoryStatus = styled.td(_t23$1 || (_t23$1 = _$6`
 const Center = styled.div(_t24$1 || (_t24$1 = _$6`
   padding-top: 5px;
 `));
-const PageStepperRow = styled.tr(_t25 || (_t25 = _$6`
+const PageStepperRow = styled.tr(_t25$1 || (_t25$1 = _$6`
   ${0}
 `), ({
   disabled
@@ -10084,7 +10084,8 @@ let _$3 = t => t,
   _t21,
   _t22,
   _t23,
-  _t24;
+  _t24,
+  _t25;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
@@ -10153,44 +10154,47 @@ const Trash = styled.div(_t12 || (_t12 = _$3`
 const ListContainer = styled.div(_t13 || (_t13 = _$3`
   padding: 0 0 0 0;
 `));
-const IconPadding = styled.div(_t14 || (_t14 = _$3`
+const DetailMargin = styled.div(_t14 || (_t14 = _$3`
+  padding: 0 0 var(--goa-space-l) 0;
+`));
+const IconPadding = styled.div(_t15 || (_t15 = _$3`
   padding: 0.9rem 0.5rem 0 0;
 `));
-const UpdateListContainer = styled.div(_t15 || (_t15 = _$3`
+const UpdateListContainer = styled.div(_t16 || (_t16 = _$3`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
 `));
-styled.div(_t16 || (_t16 = _$3`
+styled.div(_t17 || (_t17 = _$3`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t17 || (_t17 = _$3`
+const TableTHHeader = styled.th(_t18 || (_t18 = _$3`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t18 || (_t18 = _$3`
+const ObjectArrayWarningIconDiv = styled.div(_t19 || (_t19 = _$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(_t19 || (_t19 = _$3`
+const ListWithDetailWarningIconDiv = styled.div(_t20 || (_t20 = _$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(_t20 || (_t20 = _$3`
+styled.label(_t21 || (_t21 = _$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(_t21 || (_t21 = _$3`
+styled.div(_t22 || (_t22 = _$3`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -10198,10 +10202,10 @@ styled.div(_t21 || (_t21 = _$3`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t22 || (_t22 = _$3`
+const HilightCellWarning = styled.div(_t23 || (_t23 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
-const FixTableHeaderAlignment = styled.div(_t23 || (_t23 = _$3`
+const FixTableHeaderAlignment = styled.div(_t24 || (_t24 = _$3`
   table thead th:nth-child(3) {
     text-align: center;
   }
@@ -10210,7 +10214,7 @@ const FixTableHeaderAlignment = styled.div(_t23 || (_t23 = _$3`
     text-align: center;
   }
 `));
-const ListWithDetailsReviewCellDiv = styled.div(_t24 || (_t24 = _$3`
+const ListWithDetailsReviewCellDiv = styled.div(_t25 || (_t25 = _$3`
   display: 'flex';
   flex-direction: 'column';
   text-align: 'start';
@@ -11717,23 +11721,67 @@ 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;
-    return jsxs(Visible, {
+    return jsx(Visible, {
       visible: visible,
       "data-testid": "jsonforms-object-list-wrapper",
-      children: [jsxs(ToolBarHeader, {
-        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, {
+      children: jsxs(DetailMargin, {
+        children: [jsxs(ToolBarHeader, {
+          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) => () => {
+              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: "secondary"
+          })]
+        }), jsx("div", {
+          children: jsx(ObjectArrayList, Object.assign({
+            path: path,
+            schema: schema,
+            uischema: uischema,
+            enabled: enabled,
+            openDeleteDialog: openDeleteDialog,
+            translations: {},
+            data: data,
+            cells: cells,
+            config: config,
+            currentIndex: this.props.currentTab,
+            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,
@@ -11752,51 +11800,9 @@ class ListWithDetailControl extends React.Component {
             });
           },
           currentListPage: this.state.currentListPage,
-          buttonType: "secondary"
+          buttonType: "tertiary"
         })]
-      }), jsx("div", {
-        children: jsx(ObjectArrayList, Object.assign({
-          path: path,
-          schema: schema,
-          uischema: uischema,
-          enabled: enabled,
-          openDeleteDialog: openDeleteDialog,
-          translations: {},
-          data: data,
-          cells: cells,
-          config: config,
-          currentIndex: this.props.currentTab,
-          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.42.0",
+  "version": "2.42.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

@@ -13,6 +13,7 @@ export declare const FlexForm: import("styled-components/dist/types").IStyledCom
 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;
 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 DetailMargin: 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;