@abgov/jsonforms-components 2.48.0 → 2.48.1

package/index.esm.js

@@ -1,11 +1,11 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { GoabFormItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabModal, GoabButtonGroup, GoabTable, GoabContainer, GoabDropdown, GoabDropdownItem, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
+import { GoabFormItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabTable, GoabModal, GoabButtonGroup, GoabContainer, GoabDropdown, GoabDropdownItem, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, isBooleanControl, createDefaultValue, Paths, toDataPath, Resolve, schemaMatches, getAjv, or, isObjectArrayControl, isPrimitiveArrayControl, composePaths, schemaTypeIs, formatIs, hasType, isCategorization, isLayout } from '@jsonforms/core';
+import { isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, toDataPath, schemaMatches, getAjv, or, isObjectArrayControl, isPrimitiveArrayControl, composePaths, schemaTypeIs, formatIs, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import * as _$c from 'lodash';
 import ___default, { isEqual, isObject as isObject$i, isEmpty as isEmpty$1 } from 'lodash';
 import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsArrayLayoutProps, withJsonFormsLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
@@ -8698,7 +8698,9 @@ let _$7 = t => t,
   _t23$1,
   _t24$1,
   _t25$1,
-  _t26$1;
+  _t26$1,
+  _t27$1,
+  _t28$1;
 const DeleteDialogContent = styled.div(_t$8 || (_t$8 = _$7`
   margin-bottom: var(--goa-space-m);
 `));
@@ -8730,9 +8732,7 @@ const TextCenter = styled.div(_t7$1 || (_t7$1 = _$7`
   text-align: center;
 `));
 const SideMenuItem = styled.div(_t8$1 || (_t8$1 = _$7`
-  &:hover {
-    background: #f1f1f1;
-  }
+  margin-top: 1rem;
 `));
 const RowFlex = styled.div(_t9$1 || (_t9$1 = _$7`
   display: flex;
@@ -8741,9 +8741,20 @@ const RowFlex = styled.div(_t9$1 || (_t9$1 = _$7`
 `));
 const RowFlexMenu = styled.div(_t0$1 || (_t0$1 = _$7`
   display: flex;
-  flex-direction: row;
-  border: 1px solid #dcdcdc;
-  margin-top: 1rem;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--goa-color-greyscale-300);
+  border-radius: var(--goa-border-radius-m);
+  margin-top: var(--goa-space-xs);
+  background-color: var(--goa-color-greyscale-white);
+  padding: 0;
+  gap: 0;
+  position: relative;
+  overflow: visible;
+
+  &:hover {
+    border-color: var(--goa-color-greyscale-400);
+  }
 `));
 const FlexTabs = styled.div(_t1$1 || (_t1$1 = _$7`
   flex-direction: column;
@@ -8782,44 +8793,41 @@ const ListContainer = styled.div(_t14$1 || (_t14$1 = _$7`
 styled.div(_t15$1 || (_t15$1 = _$7`
   padding: 0 0 var(--goa-space-l) 0;
 `));
-const IconPadding = styled.div(_t16$1 || (_t16$1 = _$7`
-  padding: 0.9rem 0.5rem 0 0;
-`));
-const UpdateListContainer = styled.div(_t17$1 || (_t17$1 = _$7`
+const UpdateListContainer = styled.div(_t16$1 || (_t16$1 = _$7`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
 `));
-styled.div(_t18$1 || (_t18$1 = _$7`
+styled.div(_t17$1 || (_t17$1 = _$7`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t19$1 || (_t19$1 = _$7`
+const TableTHHeader = styled.th(_t18$1 || (_t18$1 = _$7`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t20$1 || (_t20$1 = _$7`
+const ObjectArrayWarningIconDiv = styled.div(_t19$1 || (_t19$1 = _$7`
   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(_t21$1 || (_t21$1 = _$7`
+const ListWithDetailWarningIconDiv = styled.div(_t20$1 || (_t20$1 = _$7`
   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(_t22$1 || (_t22$1 = _$7`
+styled.label(_t21$1 || (_t21$1 = _$7`
   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(_t23$1 || (_t23$1 = _$7`
+styled.div(_t22$1 || (_t22$1 = _$7`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -8827,10 +8835,10 @@ styled.div(_t23$1 || (_t23$1 = _$7`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t24$1 || (_t24$1 = _$7`
+const HilightCellWarning = styled.div(_t23$1 || (_t23$1 = _$7`
   background-color: var(--goa-color-warning-default);
 `));
-const FixTableHeaderAlignment = styled.div(_t25$1 || (_t25$1 = _$7`
+const FixTableHeaderAlignment = styled.div(_t24$1 || (_t24$1 = _$7`
   table thead th:nth-child(3) {
     text-align: center;
   }
@@ -8839,11 +8847,31 @@ const FixTableHeaderAlignment = styled.div(_t25$1 || (_t25$1 = _$7`
     text-align: center;
   }
 `));
-const ListWithDetailsReviewCellDiv = styled.div(_t26$1 || (_t26$1 = _$7`
+const ListWithDetailsReviewCellDiv = styled.div(_t25$1 || (_t25$1 = _$7`
   display: 'flex';
   flex-direction: 'column';
   text-align: 'start';
 `));
+const IconsContainer = styled.div(_t26$1 || (_t26$1 = _$7`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--goa-space-xs);
+  padding-bottom: var(--goa-space-xs);
+`));
+const TableContentContainer = styled.div(_t27$1 || (_t27$1 = _$7`
+  padding: var(--goa-space-l);
+`));
+const NoDataMessage = styled.div(_t28$1 || (_t28$1 = _$7`
+  padding: var(--goa-space-xl) var(--goa-space-l);
+  color: var(--goa-color-greyscale-700);
+  font: var(--goa-typography-body-m);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+`));
 
 const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
   data,
@@ -9125,6 +9153,134 @@ const NonEmptyRowComponent$1 = ({
     }) : null
   }, childPath);
 };
+function isControlElement(element) {
+  return element.type === 'Control';
+}
+function isLayoutElement(element) {
+  return 'elements' in element;
+}
+function extractPaths(uiSchema) {
+  if (!uiSchema) {
+    return [];
+  }
+  if (isControlElement(uiSchema)) {
+    return uiSchema.scope ? [toDataPath(uiSchema.scope)] : [];
+  }
+  if (isLayoutElement(uiSchema)) {
+    return uiSchema.elements.flatMap(extractPaths);
+  }
+  return [];
+}
+function getValue(obj, path) {
+  return path.replace(/^\./, '').split('.').reduce((acc, part) => {
+    if (acc && typeof acc === 'object' && part in acc) {
+      return acc[part];
+    }
+    return undefined;
+  }, obj);
+}
+function findLabelForPath(path, uiSchema, schema) {
+  if (!uiSchema) {
+    return path;
+  }
+  if (isControlElement(uiSchema)) {
+    const controlPath = uiSchema.scope ? toDataPath(uiSchema.scope) : '';
+    if (controlPath === path) {
+      const label = uiSchema.label;
+      if (typeof label === 'string') {
+        return label;
+      } else if (typeof label === 'object' && label !== null && 'text' in label) {
+        return label.text || path;
+      }
+      return path;
+    }
+  }
+  if (isLayoutElement(uiSchema)) {
+    for (const element of uiSchema.elements) {
+      const label = findLabelForPath(path, element, schema);
+      if (label !== path) {
+        return label;
+      }
+    }
+  }
+  if (schema != null && schema.properties) {
+    const propertyKey = path.split('.').pop();
+    if (propertyKey && schema.properties[propertyKey]) {
+      const property = schema.properties[propertyKey];
+      if (typeof property === 'object' && 'title' in property) {
+        return String(property.title) || path;
+      }
+    }
+  }
+  return path;
+}
+function generateSummaryPairs(rowData, detailUiSchema, schema) {
+  const paths = extractPaths(detailUiSchema);
+  if (paths.length === 0) {
+    return Object.entries(rowData).filter(([, value]) => value !== undefined && value !== null && value !== '').map(([key, value]) => ({
+      label: findLabelForPath(key, detailUiSchema, schema),
+      value
+    }));
+  }
+  return paths.map(path => {
+    const value = getValue(rowData, path);
+    const label = findLabelForPath(path, detailUiSchema, schema);
+    return {
+      label,
+      value
+    };
+  }).filter(({
+    value
+  }) => value !== undefined && value !== null && value !== '');
+}
+const SummaryDisplay = ({
+  rowData,
+  uischema,
+  schema
+}) => {
+  var _uischema$options10;
+  if (!rowData || Object.keys(rowData).length === 0) {
+    return jsx(NoDataMessage, {
+      children: "No data"
+    });
+  }
+  const pairs = generateSummaryPairs(rowData, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.detail, schema);
+  if (pairs.length === 0) {
+    return jsx(NoDataMessage, {
+      children: "No data"
+    });
+  }
+  return jsx(GoabTable, {
+    width: "100%",
+    mb: "none",
+    variant: "relaxed",
+    children: jsx("tbody", {
+      children: pairs.map((pair, index) => jsxs("tr", {
+        style: {
+          borderBottom: 'none'
+        },
+        children: [jsx("td", {
+          style: {
+            width: '50%',
+            fontWeight: '600',
+            border: 'none',
+            paddingTop: 'var(--goa-space-xs)',
+            paddingBottom: 'var(--goa-space-xs)'
+          },
+          children: pair.label
+        }), jsx("td", {
+          style: {
+            width: '50%',
+            border: 'none',
+            paddingTop: 'var(--goa-space-xs)',
+            paddingBottom: 'var(--goa-space-xs)'
+          },
+          children: String(pair.value)
+        })]
+      }, `${pair.label}-${index}`))
+    })
+  });
+};
 const MainItemComponent = ({
   childPath,
   rowIndex,
@@ -9134,10 +9290,12 @@ const MainItemComponent = ({
   currentTab,
   current,
   setCurrentListPage,
-  rowData
+  rowData,
+  uischema,
+  schema
 }) => {
   const displayName = Object.keys(rowData != null ? rowData : {}).length === 0 ? 'No data' : Object.values(rowData || {}).join(', ');
-  return jsx(SideMenuItem, {
+  return jsxs(SideMenuItem, {
     onClick: () => selectCurrentTab(rowIndex),
     onKeyDown: e => {
       if (e.key === 'ArrowRight') {
@@ -9152,62 +9310,32 @@ const MainItemComponent = ({
         }
       }
     },
-    children: jsxs(RowFlexMenu, {
+    children: [jsxs(IconsContainer, {
+      children: [jsx(GoabIconButton, {
+        disabled: !enabled,
+        icon: "create",
+        title: 'Edit',
+        testId: "edit button",
+        onClick: () => setCurrentListPage(currentTab + 1)
+      }), enabled ? jsx(GoabIconButton, {
+        disabled: !enabled,
+        icon: "trash",
+        title: 'Delete',
+        testId: "delete button",
+        onClick: () => openDeleteDialog(childPath, rowIndex, displayName)
+      }) : null]
+    }), jsx(RowFlexMenu, {
       tabIndex: 0,
-      children: [jsx(TabName, {
-        children: displayName
-      }), enabled ? jsx(Trash, {
-        children: jsx(GoabIconButton, {
-          disabled: !enabled,
-          icon: "trash",
-          title: 'remove',
-          testId: "remove the details",
-          onClick: () => openDeleteDialog(childPath, rowIndex, displayName)
-        })
-      }) : null, jsx(IconPadding, {
-        children: jsx(GoabIconButton, {
-          disabled: !enabled,
-          icon: "create",
-          title: 'edit',
-          testId: "edit button",
-          onClick: () => setCurrentListPage(currentTab + 1)
+      children: jsx(TableContentContainer, {
+        children: jsx(SummaryDisplay, {
+          rowData: rowData,
+          uischema: uischema,
+          schema: schema
         })
-      })]
-    })
+      })
+    })]
   });
 };
-function isControlElement(element) {
-  return element.type === 'Control';
-}
-function isLayoutElement(element) {
-  return 'elements' in element;
-}
-function extractPaths(uiSchema) {
-  if (!uiSchema) {
-    return [];
-  }
-  if (isControlElement(uiSchema)) {
-    return uiSchema.scope ? [toDataPath(uiSchema.scope)] : [];
-  }
-  if (isLayoutElement(uiSchema)) {
-    return uiSchema.elements.flatMap(extractPaths);
-  }
-  return [];
-}
-function getValue(obj, path) {
-  return path.split('.').reduce((acc, key) => acc && typeof acc === 'object' ? acc[key] : undefined, obj);
-}
-function orderRowData(rowData, detailUiSchema) {
-  const orderedPaths = extractPaths(detailUiSchema);
-  const ordered = {};
-  for (const path of orderedPaths) {
-    const value = getValue(rowData, path);
-    if (value !== undefined) {
-      ordered[path] = value;
-    }
-  }
-  return ordered;
-}
 function getEffectiveInstancePath(error) {
   var _error$params;
   if (error.keyword === 'required' && (_error$params = error.params) != null && _error$params.missingProperty) {
@@ -9350,16 +9478,16 @@ const MainTab = ({
   currentTab,
   current,
   setCurrentListPage,
-  uischema
+  uischema,
+  schema
 }) => {
-  var _uischema$options10, _core$errors;
+  var _core$errors;
   /* 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 ? void 0 : core.data, childPath);
-  const orderedRowData = orderRowData(rowData, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.detail);
   function resolveField(e) {
     var _e$params;
     if (e.keyword === 'required') {
@@ -9436,7 +9564,7 @@ const MainTab = ({
     children: errorText ? jsx(GoabFormItem, {
       error: errorText,
       children: jsx(MainItemComponent, {
-        rowData: orderedRowData,
+        rowData: rowData,
         childPath: childPath,
         rowIndex: rowIndex,
         openDeleteDialog: openDeleteDialog,
@@ -9444,10 +9572,12 @@ const MainTab = ({
         enabled: enabled,
         currentTab: currentTab,
         current: current,
-        setCurrentListPage: setCurrentListPage
+        setCurrentListPage: setCurrentListPage,
+        uischema: uischema,
+        schema: schema
       })
     }) : jsx(MainItemComponent, {
-      rowData: orderedRowData,
+      rowData: rowData,
       childPath: childPath,
       rowIndex: rowIndex,
       openDeleteDialog: openDeleteDialog,
@@ -9455,7 +9585,9 @@ const MainTab = ({
       enabled: enabled,
       currentTab: currentTab,
       current: current,
-      setCurrentListPage: setCurrentListPage
+      setCurrentListPage: setCurrentListPage,
+      uischema: uischema,
+      schema: schema
     })
   }, childPath);
 };

package/package.json

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

@@ -15,7 +15,6 @@ export declare const TabName: import("styled-components/dist/types").IStyledComp
 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;
 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;
@@ -26,3 +25,6 @@ export declare const HasErrorLabel: import("styled-components/dist/types").IStyl
 export declare const HilightCellWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FixTableHeaderAlignment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListWithDetailsReviewCellDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NoDataMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;