@abgov/jsonforms-components 2.30.0 → 2.30.2

package/index.esm.js

@@ -7104,6 +7104,8 @@ let _$6 = t => t,
   _t7$1,
   _t8$1,
   _t9$1,
+  _t0$1,
+  _t1$1,
   _t10$1,
   _t11$1,
   _t12$1,
@@ -7113,11 +7115,9 @@ let _$6 = t => t,
   _t16$1,
   _t17$1,
   _t18$1,
-  _t19$1,
-  _t20$1,
-  _t21,
-  _t22,
-  _t23;
+  _t19,
+  _t20,
+  _t21;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -7170,7 +7170,7 @@ styled.div(_t8$1 || (_t8$1 = _$6`
 styled.h3(_t9$1 || (_t9$1 = _$6`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
+const RightAlignmentDiv = styled.div(_t0$1 || (_t0$1 = _$6`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -7180,62 +7180,71 @@ const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$6`
+const FormStepperSummaryH3 = styled.h3(_t1$1 || (_t1$1 = _$6`
   flex: 1;
   margin-bottom: var(--goa-space-m);
   font-size: var(--goa-font-size-7);
   line-height: var(--goa-line-height-4);
   font-weight: var(--goa-font-weight-regular);
 `));
-const PageRenderPadding = styled.div(_t12$1 || (_t12$1 = _$6`
+const PageRenderPadding = styled.div(_t10$1 || (_t10$1 = _$6`
   margin-top: var(--goa-space-2xl);
 `));
-styled.div(_t13$1 || (_t13$1 = _$6`
+styled.div(_t11$1 || (_t11$1 = _$6`
   margin-bottom: var(--goa-space-2xl);
 `));
-const PageBorder = styled.div(_t14$1 || (_t14$1 = _$6`
+const PageBorder = styled.div(_t12$1 || (_t12$1 = _$6`
   padding: var(--goa-space-m) var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t15$1 || (_t15$1 = _$6`
+const TableReviewItemSection = styled.div(_t13$1 || (_t13$1 = _$6`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t16$1 || (_t16$1 = _$6`
+const TableReviewItem = styled.div(_t14$1 || (_t14$1 = _$6`
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t17$1 || (_t17$1 = _$6`
+const TableReviewPageTitleRow = styled.div(_t15$1 || (_t15$1 = _$6`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t18$1 || (_t18$1 = _$6`
+const TableReviewCategoryLabel = styled.h3(_t16$1 || (_t16$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t19$1 || (_t19$1 = _$6`
+const CategoryStatus = styled.td(_t17$1 || (_t17$1 = _$6`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
   align-content: center;
 `));
-const CompletionStatus = styled.div(_t20$1 || (_t20$1 = _$6`
+const CompletionStatus = styled.div(_t18$1 || (_t18$1 = _$6`
   padding: 0;
   margin: 0;
   margin-bottom: 0 !important;
 `));
-const PageStepperRow = styled.tr(_t21 || (_t21 = _$6`
+const PageStepperRow = styled.tr(_t19 || (_t19 = _$6`
   ${0}
 `), ({
   disabled
 }) => disabled ? `
-           pointer-events: none;
-           opacity: 0.5;
-         ` : `
-           cursor: pointer;
-         `);
-const SectionHeaderRowTr = styled.tr(_t22 || (_t22 = _$6`
+          pointer-events: none;
+          opacity: 0.5;
+          cursor: not-allowed;
+        ` : `
+          cursor: pointer;
+
+          &:hover td {
+            background-color: var(--goa-color-greyscale-100);
+          }
+
+          td {
+            transition: background-color 0.2s ease-in-out;
+          }
+        `);
+const SectionHeaderRowTr = styled.tr(_t20 || (_t20 = _$6`
   & > td {
     border: 0 !important;
     padding-top: var(--goa-space-l);
@@ -7247,7 +7256,7 @@ const SectionHeaderRowTr = styled.tr(_t22 || (_t22 = _$6`
     border-top: none !important;
   }
 `));
-const SummaryRowLink = styled.a(_t23 || (_t23 = _$6`
+const SummaryRowLink = styled.a(_t21 || (_t21 = _$6`
   position: relative;
   top: var(--goa-space-xs);
 `));
@@ -8387,16 +8396,16 @@ const CategoryRow = ({
 }) => {
   return category.visible ? jsxs(PageStepperRow, {
     disabled: !(category === null || category === void 0 ? void 0 : category.isEnabled),
+    role: "button",
+    tabIndex: 0,
+    onClick: e => {
+      e.preventDefault();
+      if (category === null || category === void 0 ? void 0 : category.isEnabled) onClick(index);
+    },
+    onKeyDown: e => e.key === 'Enter' && onClick(index),
+    "data-testid": `page-ref-${index}`,
     children: [jsx("td", {
-      children: jsx("a", {
-        "data-testid": `page-ref-${index}`,
-        href: "#",
-        onClick: e => {
-          e.preventDefault();
-          onClick(index);
-        },
-        children: category.label
-      })
+      children: category.label
     }), jsx(CategoryStatus, {
       children: getCategoryStatusBadge(category)
     })]
@@ -9352,6 +9361,8 @@ let _$3 = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -9360,9 +9371,7 @@ let _$3 = t => t,
   _t15,
   _t16,
   _t17,
-  _t18,
-  _t19,
-  _t20;
+  _t18;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
@@ -9404,55 +9413,55 @@ const RowFlexMenu = styled.div(_t9 || (_t9 = _$3`
   flex-direction: row;
   border-bottom: 1px solid #dcdcdc;
 `));
-const FlexTabs = styled.div(_t10 || (_t10 = _$3`
+const FlexTabs = styled.div(_t0 || (_t0 = _$3`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
   margin-right: 1.5rem;
 `));
-const FlexForm = styled.div(_t11 || (_t11 = _$3`
+const FlexForm = styled.div(_t1 || (_t1 = _$3`
   flex-direction: column;
   margin: 1.5rem 0;
   flex: 3;
 `));
-const TabName = styled.div(_t12 || (_t12 = _$3`
+const TabName = styled.div(_t10 || (_t10 = _$3`
   margin: 1rem 0 1rem 1rem;
   font-weight: 700;
 `));
-const Trash = styled.div(_t13 || (_t13 = _$3`
+const Trash = styled.div(_t11 || (_t11 = _$3`
   margin: 0.75rem 1.25rem 0.75rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t14 || (_t14 = _$3`
+const ListContainer = styled.div(_t12 || (_t12 = _$3`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t15 || (_t15 = _$3`
+const TableTHHeader = styled.th(_t13 || (_t13 = _$3`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t16 || (_t16 = _$3`
+const ObjectArrayWarningIconDiv = styled.div(_t14 || (_t14 = _$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(_t17 || (_t17 = _$3`
+const ListWithDetailWarningIconDiv = styled.div(_t15 || (_t15 = _$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(_t18 || (_t18 = _$3`
+styled.label(_t16 || (_t16 = _$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(_t19 || (_t19 = _$3`
+styled.div(_t17 || (_t17 = _$3`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -9460,7 +9469,7 @@ styled.div(_t19 || (_t19 = _$3`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t20 || (_t20 = _$3`
+const HilightCellWarning = styled.div(_t18 || (_t18 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
 
@@ -9517,7 +9526,6 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
   addItem,
   schema,
   enabled,
-  translations,
   rootSchema,
   uischema
 }) {
@@ -9660,7 +9668,7 @@ const renderCellColumn = ({
   return null;
 };
 
-const _excluded$2 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "visible", "enabled", "cells", "translations", "data", "config", "isStepperReview", "handleChange", "removeItems"];
+const _excluded$2 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "visible", "enabled", "cells", "data", "config", "isStepperReview", "handleChange", "removeItems"];
 const GenerateRows$1 = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data, errors) => {
   if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'object') {
     const props = {
@@ -9998,7 +10006,6 @@ const ObjectArrayControl = props => {
       visible,
       enabled,
       cells,
-      translations,
       data,
       config,
       isStepperReview
@@ -10157,8 +10164,7 @@ const ObjectArrayControl = props => {
         uischema: controlElement,
         schema: schema,
         rootSchema: rootSchema,
-        enabled: enabled,
-        translations: translations
+        enabled: enabled
       })]
     }), jsxs("div", {
       children: [jsx(ObjectArrayList$1, Object.assign({
@@ -10167,7 +10173,7 @@ const ObjectArrayControl = props => {
         uischema: uischema,
         enabled: enabled,
         openDeleteDialog: openDeleteDialog,
-        translations: translations,
+        translations: {},
         count: ((_b = registers.categories[path]) === null || _b === void 0 ? void 0 : _b.count) || Object.keys(data || []).length,
         data: data || ((_c = registers.categories[path]) === null || _c === void 0 ? void 0 : _c.data),
         cells: cells,
@@ -10204,9 +10210,10 @@ const ArrayControlBase = props => {
   } = props;
   return jsx(Visible, {
     visible: visible,
-    children: jsx(ArrayControl, Object.assign({}, props, {
-      addItem: () => () => {},
-      translations: {}
+    children: jsx(ArrayControl, Object.assign({
+      arraySchema: {}
+    }, props, {
+      addItem: () => () => {}
     }))
   });
 };
@@ -10216,9 +10223,10 @@ const ArrayControlReview = props => {
   } = props;
   return jsx(Visible, {
     visible: visible,
-    children: jsx(ObjectArrayControl, Object.assign({}, props, {
+    children: jsx(ObjectArrayControl, Object.assign({
+      arraySchema: {}
+    }, props, {
       addItem: () => () => {},
-      translations: {},
       isStepperReview: true,
       enabled: true
     }))
@@ -10227,7 +10235,7 @@ const ArrayControlReview = props => {
 const GoAArrayControlRenderer = withJsonFormsControlProps(ArrayControlBase);
 const GoAArrayControlReviewRenderer = withJsonFormsControlProps(ArrayControlReview);
 
-const _excluded$1 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "openDeleteDialog", "visible", "enabled", "cells", "translations", "data", "config"];
+const _excluded$1 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "openDeleteDialog", "visible", "enabled", "cells", "data", "config"];
 // eslint-disable-next-line
 const extractScopesFromUISchema = uischema => {
   var _a, _b, _c, _d, _e, _f;
@@ -10628,7 +10636,6 @@ class ListWithDetailControl extends React.Component {
         visible,
         enabled,
         cells,
-        translations,
         data,
         config
       } = _this$props,
@@ -10661,8 +10668,7 @@ class ListWithDetailControl extends React.Component {
           uischema: controlElement,
           schema: schema,
           rootSchema: rootSchema,
-          enabled: enabled,
-          translations: translations
+          enabled: enabled
         })]
       }), jsx("div", {
         children: jsx(ObjectArrayList, Object.assign({
@@ -10671,7 +10677,7 @@ class ListWithDetailControl extends React.Component {
           uischema: uischema,
           enabled: enabled,
           openDeleteDialog: openDeleteDialog,
-          translations: translations,
+          translations: {},
           data: data,
           cells: cells,
           config: config,

package/package.json

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ControlElement, JsonSchema, ArrayTranslations } from '@jsonforms/core';
+import { ControlElement, JsonSchema } from '@jsonforms/core';
 export interface ObjectArrayToolbarProps {
     numColumns: number;
     errors: string;
@@ -9,7 +9,6 @@ export interface ObjectArrayToolbarProps {
     schema: JsonSchema;
     rootSchema: JsonSchema;
     enabled: boolean;
-    translations: ArrayTranslations;
     addItem(path: string, value: any): () => void;
 }
 declare const ObjectArrayToolBar: React.NamedExoticComponent<ObjectArrayToolbarProps>;