@abgov/jsonforms-components 1.44.1 → 1.44.3

package/index.esm.js

@@ -2767,6 +2767,23 @@ const convertToReadableFormat = input => {
   }
   return input.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
 };
+/**
+ * Converts a input to sentence case (eg: incomeThresholdExample or IncomeThresholdExample)
+ * to 'Income threshold example' with the first letter in the sentence capitalized.
+ *
+ * @param input - The camelCase or PascalCase string (e.g., "incomeThresholdExample").
+ * @returns A formatted string with spaces and capitalization (e.g., "Income threshold example").
+ */
+const convertToSentenceCase = input => {
+  if (!input) {
+    return input;
+  }
+  const convertedInput = convertToReadableFormat(input);
+  if (!convertedInput) return convertedInput;
+  const firstWord = convertedInput.split(' ').splice(0, 1);
+  const newWords = convertedInput.split(' ').splice(1).map(word => word.charAt(0).toLowerCase() + word.slice(1).toLowerCase()).join(' ');
+  return firstWord.concat(newWords).join(' ');
+};
 
 const StepperContext = /*#__PURE__*/createContext({
   updateStatus: status => {},
@@ -5333,8 +5350,8 @@ let _$5 = t => t,
   _t2$3,
   _t3$3,
   _t4$2,
-  _t5$1,
-  _t6$1,
+  _t5$2,
+  _t6$2,
   _t7$1,
   _t8$1,
   _t9$1,
@@ -5369,7 +5386,7 @@ const ReviewItemTitle = styled.div(_t4$2 || (_t4$2 = _$5`
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-const Anchor = styled.div(_t5$1 || (_t5$1 = _$5`
+const Anchor = styled.div(_t5$2 || (_t5$2 = _$5`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -5380,7 +5397,7 @@ const Anchor = styled.div(_t5$1 || (_t5$1 = _$5`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t6$1 || (_t6$1 = _$5`
+styled.div(_t6$2 || (_t6$2 = _$5`
   margin-left: var(--goa-space-m);
 `));
 styled.div(_t7$1 || (_t7$1 = _$5`
@@ -6392,15 +6409,16 @@ let _$2 = t => t,
   _t2$1,
   _t3$1,
   _t4$1,
-  _t5,
-  _t6,
+  _t5$1,
+  _t6$1,
   _t7,
   _t8,
   _t9,
   _t10,
   _t11,
   _t12,
-  _t13;
+  _t13,
+  _t14;
 const DeleteDialogContent = styled.div(_t$2 || (_t$2 = _$2`
   margin-bottom: var(--goa-space-m);
 `));
@@ -6415,10 +6433,10 @@ const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
 const ObjectArrayTitle = styled.h2(_t4$1 || (_t4$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
-const TextCenter = styled.div(_t5 || (_t5 = _$2`
+const TextCenter = styled.div(_t5$1 || (_t5$1 = _$2`
   text-align: center;
 `));
-const SideMenuItem = styled.div(_t6 || (_t6 = _$2`
+const SideMenuItem = styled.div(_t6$1 || (_t6$1 = _$2`
   &:hover {
     background: #f1f1f1;
   }
@@ -6455,6 +6473,9 @@ const ListContainer = styled.div(_t13 || (_t13 = _$2`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
+const TableTHHeader = styled.th(_t14 || (_t14 = _$2`
+  background-color: var(--goa-color-greyscale-100) !important;
+`));
 
 const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
   open,
@@ -6783,9 +6804,16 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
       children: [jsx("thead", {
         children: jsxs("tr", {
           children: [Object.keys(properties).map((key, index) => {
-            return jsx("th", {
+            if (!isInReview) {
+              return jsx("th", {
+                children: jsx("p", {
+                  children: convertToSentenceCase(key)
+                })
+              }, index);
+            }
+            return jsx(TableTHHeader, {
               children: jsx("p", {
-                children: key
+                children: convertToSentenceCase(key)
               })
             }, index);
           }), isInReview !== true && jsx("th", {
@@ -7546,7 +7574,9 @@ let _$1 = t => t,
   _t$1,
   _t2,
   _t3,
-  _t4;
+  _t4,
+  _t5,
+  _t6;
 const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
   position: relative;
 
@@ -7592,13 +7622,23 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
 `));
 const AddressIndent = styled.div(_t2 || (_t2 = _$1`
   margin: 1em 1.5em 0 1.5em;
+  textwrap: 'wrap';
+  wordbreak: 'break-word';
+`));
+const TextWrap = styled.p(_t3 || (_t3 = _$1`
+  text-wrap: auto;
+  word-break: break-word;
 `));
-const LabelDiv = styled.div(_t3 || (_t3 = _$1`
+const TextWrapDiv = styled.div(_t4 || (_t4 = _$1`
+  text-wrap: auto;
+  word-break: break-word;
+`));
+const LabelDiv = styled.div(_t5 || (_t5 = _$1`
   font-size: var(--goa-font-size-2);
   padding-bottom: var(--goa-space-l);
 `));
 /* istanbul ignore next */
-const ListItem = styled.li(_t4 || (_t4 = _$1`
+const ListItem = styled.li(_t6 || (_t6 = _$1`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
@@ -8295,12 +8335,12 @@ const AddressViews = ({
         children: [jsx(GoAFormItem, {
           label: "Address line 1",
           error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
-          children: jsx("p", {
+          children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.addressLine1
           })
         }), (data === null || data === void 0 ? void 0 : data.addressLine2) && jsx(GoAFormItem, {
           label: "Address line 2",
-          children: jsx("p", {
+          children: jsx(TextWrap, {
             children: data.addressLine2
           })
         })]
@@ -8310,13 +8350,13 @@ const AddressViews = ({
         children: [jsx(GoAFormItem, {
           error: ((_b = data === null || data === void 0 ? void 0 : data.municipality) === null || _b === void 0 ? void 0 : _b.length) === 0 ? 'city is required' : '',
           label: "City",
-          children: jsx("p", {
+          children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.municipality
           })
         }), jsx(GoAFormItem, {
           error: ((_c = data === null || data === void 0 ? void 0 : data.postalCode) === null || _c === void 0 ? void 0 : _c.length) === 0 ? 'postalCode is required' : '',
           label: "Postal Code",
-          children: jsx("p", {
+          children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.postalCode
           })
         })]
@@ -8488,23 +8528,29 @@ const FullNameReviewControl = props => {
       label: "First Name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
       error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
-      children: jsx("div", {
-        "data-testid": `firstName-control-${props.id}`,
-        children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `firstName-control-${props.id}`,
+          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
+        })
       })
     }), jsx(GoAFormItem, {
       label: "Middle Name",
-      children: jsx("div", {
-        "data-testid": `middleName-control-${props.id}`,
-        children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `middleName-control-${props.id}`,
+          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
+        })
       })
     }), jsx(GoAFormItem, {
       label: "Last Name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
       error: (_d = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _d !== void 0 ? _d : '',
-      children: jsx("div", {
-        "data-testid": `lastName-control-${props.id}`,
-        children: (_e = props.data) === null || _e === void 0 ? void 0 : _e.lastName
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `lastName-control-${props.id}`,
+          children: (_e = props.data) === null || _e === void 0 ? void 0 : _e.lastName
+        })
       })
     })]
   });
@@ -8730,15 +8776,19 @@ const FullNameDobReviewControl = props => {
         label: "First name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
         error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
-        children: jsx("div", {
-          "data-testid": `firstName-control-${props.id}`,
-          children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
+        children: jsx(TextWrapDiv, {
+          children: jsx("div", {
+            "data-testid": `firstName-control-${props.id}`,
+            children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.firstName
+          })
         })
       }), jsx(GoAFormItem, {
         label: "Middle name",
-        children: jsx("div", {
-          "data-testid": `middleName-control-${props.id}`,
-          children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
+        children: jsx(TextWrapDiv, {
+          children: jsx("div", {
+            "data-testid": `middleName-control-${props.id}`,
+            children: (_c = props.data) === null || _c === void 0 ? void 0 : _c.middleName
+          })
         })
       }), jsx(GoAFormItem, {
         label: "Last name",
@@ -8756,9 +8806,11 @@ const FullNameDobReviewControl = props => {
         label: "Date of birth",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) ? 'required' : undefined,
         error: (_f = errors === null || errors === void 0 ? void 0 : errors['dateOfBirth']) !== null && _f !== void 0 ? _f : '',
-        children: jsx("div", {
-          "data-testid": `dob-control-${props.id}`,
-          children: (_g = props.data) === null || _g === void 0 ? void 0 : _g.dateOfBirth
+        children: jsx(TextWrapDiv, {
+          children: jsx("div", {
+            "data-testid": `dob-control-${props.id}`,
+            children: (_g = props.data) === null || _g === void 0 ? void 0 : _g.dateOfBirth
+          })
         })
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.44.1",
+  "version": "1.44.3",
   "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/AddressLookup/styled-components.d.ts

@@ -5,6 +5,8 @@ interface ListItemProps {
 }
 export declare const SearchBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const AddressIndent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const TextWrapDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LabelDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListItemProps>> & string;
 export {};

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

@@ -12,3 +12,4 @@ 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 TableTHHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;

package/src/lib/util/stringUtils.d.ts

@@ -48,3 +48,11 @@ export declare const getLastSegmentFromPointer: (pointer: string) => string;
  * @returns A formatted string with spaces and capitalization (e.g., "Income Threshold Example").
  */
 export declare const convertToReadableFormat: (input: string) => string;
+/**
+ * Converts a input to sentence case (eg: incomeThresholdExample or IncomeThresholdExample)
+ * to 'Income threshold example' with the first letter in the sentence capitalized.
+ *
+ * @param input - The camelCase or PascalCase string (e.g., "incomeThresholdExample").
+ * @returns A formatted string with spaces and capitalization (e.g., "Income threshold example").
+ */
+export declare const convertToSentenceCase: (input: string) => string;