@abgov/jsonforms-components 2.38.3 → 2.38.5

package/index.esm.js

@@ -7090,7 +7090,7 @@ let _$6 = t => t,
   _t21$1,
   _t22$1,
   _t23$1,
-  _t24,
+  _t24$1,
   _t25,
   _t26,
   _t27,
@@ -7253,7 +7253,7 @@ const CategoryStatus = styled.td(_t23$1 || (_t23$1 = _$6`
   padding-right: var(--goa-space-xl);
   align-content: center;
 `));
-const Center = styled.div(_t24 || (_t24 = _$6`
+const Center = styled.div(_t24$1 || (_t24$1 = _$6`
   padding-top: 5px;
 `));
 const PageStepperRow = styled.tr(_t25 || (_t25 = _$6`
@@ -9931,7 +9931,8 @@ let _$3 = t => t,
   _t20,
   _t21,
   _t22,
-  _t23;
+  _t23,
+  _t24;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
@@ -9986,7 +9987,7 @@ const FlexForm = styled.div(_t10 || (_t10 = _$3`
   flex-direction: column;
   flex: 3;
 `));
-const TabData = styled.div(_t11 || (_t11 = _$3`
+const TabName = styled.div(_t11 || (_t11 = _$3`
   margin: 1rem 0 1rem 1rem;
   font-weight: 400;
   white-space: nowrap;
@@ -10057,6 +10058,11 @@ const FixTableHeaderAlignment = styled.div(_t23 || (_t23 = _$3`
     text-align: center;
   }
 `));
+const ListWithDetailsReviewCellDiv = styled.div(_t24 || (_t24 = _$3`
+  display: 'flex';
+  flex-direction: 'column';
+  text-align: 'start';
+`));
 
 const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
   open,
@@ -10276,11 +10282,7 @@ const GenerateRows$1 = (Cell, schema, rowPath, enabled, openDeleteDialog, handle
       handleChange,
       errors
     };
-    return jsx("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column'
-      },
+    return jsx(ListWithDetailsReviewCellDiv, {
       children: jsx(Cell, Object.assign({}, props, {
         count: count || 0
       }))
@@ -11076,6 +11078,57 @@ const NonEmptyRowComponent = ({
     }) : null
   }, childPath);
 };
+const MainItemComponent = ({
+  childPath,
+  rowIndex,
+  openDeleteDialog,
+  selectCurrentTab,
+  enabled,
+  currentTab,
+  current,
+  setCurrentListPage,
+  rowData
+}) => {
+  const displayName = Object.keys(rowData !== null && rowData !== void 0 ? rowData : {}).length === 0 ? 'No data' : Object.values(rowData || {}).join(', ');
+  return 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: displayName
+      }), enabled ? jsx(Trash, {
+        children: jsx(GoAIconButton, {
+          disabled: !enabled,
+          icon: "trash",
+          title: 'remove',
+          testId: "remove the details",
+          onClick: () => openDeleteDialog(childPath, rowIndex, displayName)
+        })
+      }) : null, jsx(IconPadding, {
+        children: jsx(GoAIconButton, {
+          disabled: !enabled,
+          icon: "create",
+          title: 'edit',
+          testId: "edit button",
+          onClick: () => setCurrentListPage(currentTab + 1)
+        })
+      })]
+    })
+  });
+};
 const MainTab = ({
   childPath,
   rowIndex,
@@ -11083,7 +11136,6 @@ const MainTab = ({
   selectCurrentTab,
   enabled,
   currentTab,
-  name,
   current,
   setCurrentListPage
 }) => {
@@ -11097,48 +11149,35 @@ const MainTab = ({
   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);
+  }).map(e => {
+    var _a, _b;
+    return ((_b = (_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
+  }).filter(msg => msg.length > 0).map((msg, index, arr) => `${msg}${index < arr.length - 1 ? ', ' : ''}`);
   return jsx("div", {
-    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: [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)
-            })
-          })]
-        })
+    "data-testid": `object-array-main-item-${rowIndex}`,
+    children: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? jsx(GoAFormItem, {
+      error: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? rowErrors : null,
+      children: jsx(MainItemComponent, {
+        rowData: rowData,
+        childPath: childPath,
+        rowIndex: rowIndex,
+        openDeleteDialog: openDeleteDialog,
+        selectCurrentTab: selectCurrentTab,
+        enabled: enabled,
+        currentTab: currentTab,
+        current: current,
+        setCurrentListPage: setCurrentListPage
       })
+    }) : jsx(MainItemComponent, {
+      rowData: rowData,
+      childPath: childPath,
+      rowIndex: rowIndex,
+      openDeleteDialog: openDeleteDialog,
+      selectCurrentTab: selectCurrentTab,
+      enabled: enabled,
+      currentTab: currentTab,
+      current: current,
+      setCurrentListPage: setCurrentListPage
     })
   }, childPath);
 };
@@ -11192,10 +11231,6 @@ const ObjectArrayList = ({
   const selectCurrentTab = index => {
     setCurrentIndex(index);
   };
-  (() => {
-    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: [currentListPage === 0 && jsx(FlexTabs, {
@@ -11204,12 +11239,10 @@ const ObjectArrayList = ({
         },
         children: range(data).map(index => {
           const childPath = Paths.compose(path, `${index}`);
-          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,
-            name: name,
             openDeleteDialog: openDeleteDialog,
             selectCurrentTab: selectCurrentTab,
             enabled: enabled,
@@ -13135,32 +13168,42 @@ const PhoneNumberWithTypeReviewControl = props => {
 };
 const GoAInputBasePhoneNumberWithTypeReviewControl = withJsonFormsAllOfProps(PhoneNumberWithTypeReviewControl);
 
+/**
+ * Escape for use in RegExp
+ */
 function escapeRegExp(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
+/**
+ * Resolve a JSON Pointer–style scope like "#/properties/x" or "#/properties/arr/c3"
+ */
 function resolveScope(scope, data) {
   if (!scope || typeof scope !== 'string') return undefined;
+  // normalize: strip "#/" and optional "properties/"
   const cleaned = scope.replace(/^#\/(properties\/)?/, '');
   const parts = cleaned.split('/').filter(Boolean);
   let cur = data;
-  for (const part of parts) {
-    if (cur == null) return undefined;
-    if (Array.isArray(cur) && /^\d+$/.test(part)) {
-      cur = cur[Number(part)];
-    } else if (typeof cur === 'object') {
-      if (part === 'properties') continue;
-      cur = cur[part];
-    } else {
-      return undefined;
-    }
+  for (const p of parts) {
+    if (cur == null || typeof cur !== 'object') return undefined;
+    cur = cur[p];
   }
   return cur;
 }
-function evaluateSum(scope, data) {
+/**
+ * SUM(#/properties/arr/c3) helper
+ */
+function evaluateSum(scope, data, opts) {
   if (!scope || typeof scope !== 'string') {
     return {
       value: undefined,
-      error: 'SUM() requires a JSON pointer argument.'
+      error: 'SUM requires a scope argument.'
+    };
+  }
+  const normalized = scope.replace(/^#\/(properties\/)?/, '#/properties/');
+  if ((opts === null || opts === void 0 ? void 0 : opts.knownScopes) && !opts.knownScopes.includes(normalized)) {
+    return {
+      value: undefined,
+      error: `Invalid scope(s): ${normalized}`
     };
   }
   const cleaned = scope.replace(/^#\/(properties\/)?/, '');
@@ -13168,83 +13211,62 @@ function evaluateSum(scope, data) {
   if (parts.length < 2) {
     return {
       value: undefined,
-      error: `SUM() pointer "${scope}" must include an array and field name.`
+      error: 'SUM requires array/column path like #/properties/arr/c3'
     };
   }
-  const fieldKey = parts[parts.length - 1];
+  const colKey = parts[parts.length - 1];
   const arrPath = parts.slice(0, -1);
   let cur = data;
-  for (const segment of arrPath) {
-    if (cur == null) {
-      cur = undefined;
-      break;
-    }
-    if (Array.isArray(cur) && /^\d+$/.test(segment)) {
-      cur = cur[Number(segment)];
-    } else if (typeof cur === 'object') {
-      if (segment === 'properties') continue;
-      cur = cur[segment];
-    } else {
+  for (const p of arrPath) {
+    if (cur == null || typeof cur !== 'object') {
       cur = undefined;
       break;
     }
+    cur = cur[p];
   }
-  if (cur == null) {
+  if (cur === undefined) {
     return {
       value: undefined,
-      error: `Please provide values for: ${scope}`
+      error: undefined
     };
   }
   if (!Array.isArray(cur)) {
     return {
       value: undefined,
-      error: `SUM() pointer "${scope}" does not resolve to an array.`
+      error: `Expected an array at "#/properties/${arrPath.join('/')}"`
     };
   }
-  const missingIndices = [];
-  const invalidIndices = [];
   let sum = 0;
-  for (let i = 0; i < cur.length; i++) {
-    const row = cur[i];
-    if (row == null || typeof row !== 'object') {
-      missingIndices.push(i);
-      continue;
-    }
-    const v = row[fieldKey];
-    if (v === undefined || v === null || v === '') {
-      missingIndices.push(i);
-    } else if (typeof v !== 'number' || Number.isNaN(v)) {
-      invalidIndices.push(i);
-    } else {
+  let anyValue = false;
+  let anyMissing = false;
+  for (const row of cur) {
+    if (row == null || typeof row !== 'object') continue;
+    const v = row[colKey];
+    if (typeof v === 'number' && Number.isFinite(v)) {
+      anyValue = true;
       sum += v;
+    } else if (v !== undefined && v !== null) {
+      anyMissing = true;
     }
   }
-  if (invalidIndices.length > 0) {
+  if (!anyValue && !anyMissing) {
     return {
       value: undefined,
-      error: `Expected numeric values for: ${scope} at rows [${invalidIndices.join(', ')}]`
+      error: undefined
     };
   }
-  if (missingIndices.length === cur.length) {
+  if (anyMissing) {
     return {
       value: undefined,
-      error: `Please provide values for: ${scope}`
+      error: `Please provide values for: ${normalized}`
     };
   }
   return {
     value: sum,
-    error: missingIndices.length ? `Some rows are missing values for: ${scope}` : undefined
+    error: undefined
   };
 }
-/**
- * General expression evaluation.
- * - Supports SUM(#/properties/arr/c3)
- * - Supports arithmetic with JSON pointers:
- *   "#/properties/x * #/properties/y + #/properties/z"
- *
- * Returns { value, error } and NEVER throws.
- */
-function evaluateExpression(expression, data) {
+function evaluateExpression(expression, data, opts) {
   if (!expression || typeof expression !== 'string') {
     return {
       value: undefined,
@@ -13252,66 +13274,63 @@ function evaluateExpression(expression, data) {
     };
   }
   const trimmed = expression.trim();
-  if (!trimmed) return {
-    value: undefined,
-    error: undefined
-  };
+  if (!trimmed) {
+    return {
+      value: undefined,
+      error: undefined
+    };
+  }
   const sumMatch = trimmed.match(/^SUM\(\s*['"]?(.+?)['"]?\s*\)$/i);
   if (sumMatch) {
-    const pointer = sumMatch[1];
-    return evaluateSum(pointer, data);
+    const sumScope = sumMatch[1];
+    return evaluateSum(sumScope, data, opts);
   }
-  const scopeRegex = /#\/(?:properties\/)?[^\s"')]+/g;
+  const scopeRegex = /#\/(?:properties\/)?[^\s"'()]+/g;
   const matches = trimmed.match(scopeRegex) || [];
   const uniqueScopes = Array.from(new Set(matches));
-  let exprForParse = trimmed;
-  const scopeToVar = new Map();
-  uniqueScopes.forEach((scope, index) => {
-    const varName = `v${index}`;
-    scopeToVar.set(scope, varName);
-    const pattern = new RegExp(`['"]?${escapeRegExp(scope)}['"]?`, 'g');
-    exprForParse = exprForParse.replace(pattern, varName);
-  });
-  let parsed;
-  try {
-    const parser = new Parser();
-    parsed = parser.parse(exprForParse);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } catch (e) {
-    return {
-      value: undefined,
-      error: 'Invalid expression syntax'
-    };
+  const normalizedScopes = uniqueScopes.map(s => s.replace(/^#\/(properties\/)?/, '#/properties/'));
+  if ((opts === null || opts === void 0 ? void 0 : opts.knownScopes) && opts.knownScopes.length) {
+    const invalidScopes = normalizedScopes.filter(s => !opts.knownScopes.includes(s));
+    if (invalidScopes.length > 0) {
+      return {
+        value: undefined,
+        error: `Invalid scope(s): ${invalidScopes.join(', ')}`
+      };
+    }
   }
   const vars = {};
+  let expr = trimmed;
   const missingScopes = [];
-  const invalidTypeScopes = [];
-  for (const scope of uniqueScopes) {
+  let anyValuePresent = false;
+  uniqueScopes.forEach((scope, idx) => {
+    const normalized = scope.replace(/^#\/(properties\/)?/, '#/properties/');
     const val = resolveScope(scope, data);
-    if (val === undefined || val === null || val === '') {
-      missingScopes.push(scope);
-      continue;
-    }
-    if (typeof val !== 'number' || Number.isNaN(val)) {
-      invalidTypeScopes.push(scope);
-      continue;
+    if (typeof val === 'number' && Number.isFinite(val)) {
+      anyValuePresent = true;
+      const varName = `v${idx}`;
+      vars[varName] = val;
+      const pattern = new RegExp(`['"]?${escapeRegExp(scope)}['"]?`, 'g');
+      expr = expr.replace(pattern, varName);
+    } else {
+      missingScopes.push(normalized);
     }
-    const varName = scopeToVar.get(scope);
-    vars[varName] = val;
-  }
-  if (invalidTypeScopes.length > 0) {
+  });
+  if (!anyValuePresent && missingScopes.length === normalizedScopes.length) {
     return {
       value: undefined,
-      error: `Expected numeric values for: ${invalidTypeScopes.join(', ')}`
+      error: undefined
     };
   }
   if (missingScopes.length > 0) {
+    const uniqMissing = Array.from(new Set(missingScopes));
     return {
       value: undefined,
-      error: `Please provide values for: ${missingScopes.join(', ')}`
+      error: `Please provide values for: ${uniqMissing.join(', ')}`
     };
   }
   try {
+    const parser = new Parser();
+    const parsed = parser.parse(expr);
     const result = parsed.evaluate(vars);
     if (typeof result === 'number' && Number.isFinite(result)) {
       return {
@@ -13321,15 +13340,30 @@ function evaluateExpression(expression, data) {
     }
     return {
       value: undefined,
-      error: 'Expression did not produce a numeric result'
+      error: 'Invalid expression result (not a finite number).'
     };
   } catch (_a) {
     return {
       value: undefined,
-      error: 'Error while evaluating expression'
+      error: 'Invalid expression syntax'
     };
   }
 }
+function collectScopes(schema, base = '#') {
+  if (!schema || typeof schema !== 'object') return [];
+  const scopes = [];
+  if (schema.type === 'object' && schema.properties && typeof schema.properties === 'object') {
+    Object.entries(schema.properties).forEach(([key, subschema]) => {
+      const here = base === '#' ? `#/properties/${key}` : `${base}/${key}`;
+      scopes.push(here);
+      scopes.push(...collectScopes(subschema, here));
+    });
+  }
+  if (schema.type === 'array' && schema.items) {
+    scopes.push(...collectScopes(schema.items, base));
+  }
+  return Array.from(new Set(scopes));
+}
 
 const GoACalculation = props => {
   var _a;
@@ -13341,33 +13375,36 @@ const GoACalculation = props => {
     visible,
     handleChange
   } = props;
-  const label = typeof (uischema === null || uischema === void 0 ? void 0 : uischema.label) === 'string' ? uischema.label : undefined;
-  const expression = schema === null || schema === void 0 ? void 0 : schema.description;
   const {
     core
   } = useJsonForms();
+  const rootSchema = core === null || core === void 0 ? void 0 : core.schema;
   const rootData = (_a = core === null || core === void 0 ? void 0 : core.data) !== null && _a !== void 0 ? _a : {};
+  const label = typeof (uischema === null || uischema === void 0 ? void 0 : uischema.label) === 'string' ? uischema.label : undefined;
+  const expression = schema === null || schema === void 0 ? void 0 : schema.description;
+  const knownScopes = useMemo(() => collectScopes(rootSchema), [rootSchema]);
   const [hasInteracted, setHasInteracted] = useState(false);
-  const prevDataRef = useRef(rootData);
-  useEffect(() => {
-    setHasInteracted(was => was ? true : true);
-  }, [rootData]);
+  const initialSnapshot = useRef(JSON.stringify(rootData));
   useEffect(() => {
-    if (prevDataRef.current !== rootData) {
+    if (hasInteracted) return;
+    const now = JSON.stringify(rootData);
+    if (now !== initialSnapshot.current) {
       setHasInteracted(true);
-      prevDataRef.current = rootData;
     }
-  }, [rootData]);
+  }, [rootData, hasInteracted]);
   const {
     value: computedValue,
     error
-  } = evaluateExpression(expression, rootData);
+  } = evaluateExpression(expression, rootData, {
+    knownScopes
+  });
   useEffect(() => {
     if (computedValue !== undefined && typeof handleChange === 'function' && path) {
       handleChange(path, computedValue);
     }
   }, [computedValue, handleChange, path]);
-  const showError = hasInteracted && !!error;
+  const isConfigError = !!error && (error.toLowerCase().includes('invalid scope') || error.toLowerCase().includes('expression syntax'));
+  const showError = !!error && (isConfigError || hasInteracted);
   return jsx(Visible, {
     visible: visible,
     children: jsx(GoAFormItem, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.38.3",
+  "version": "2.38.5",
   "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/Calculation/CalculationEngine.d.ts

@@ -1,15 +1,19 @@
-export interface EvaluationResult {
+import { JsonSchema } from '@jsonforms/core';
+export interface EvalResult {
     value?: number;
     error?: string;
 }
+/**
+ * Resolve a JSON Pointer–style scope like "#/properties/x" or "#/properties/arr/c3"
+ */
 export declare function resolveScope(scope: string, data: unknown): unknown;
-export declare function evaluateSum(scope: string | undefined, data: unknown): EvaluationResult;
 /**
- * General expression evaluation.
- * - Supports SUM(#/properties/arr/c3)
- * - Supports arithmetic with JSON pointers:
- *   "#/properties/x * #/properties/y + #/properties/z"
- *
- * Returns { value, error } and NEVER throws.
+ * SUM(#/properties/arr/c3) helper
  */
-export declare function evaluateExpression(expression: string | undefined, data: unknown): EvaluationResult;
+export declare function evaluateSum(scope: string, data: unknown, opts?: {
+    knownScopes?: string[];
+}): EvalResult;
+export declare function evaluateExpression(expression: string | undefined, data: unknown, opts?: {
+    knownScopes?: string[];
+}): EvalResult;
+export declare function collectScopes(schema: JsonSchema | undefined, base?: string): string[];

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

@@ -10,7 +10,7 @@ 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 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 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 IconPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -23,3 +23,4 @@ export declare const ObjectArrayRequiredTextLabel: import("styled-components/dis
 export declare const HasErrorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 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;