@abgov/jsonforms-components 1.44.2 → 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 => {},
@@ -6400,7 +6417,8 @@ let _$2 = t => t,
   _t10,
   _t11,
   _t12,
-  _t13;
+  _t13,
+  _t14;
 const DeleteDialogContent = styled.div(_t$2 || (_t$2 = _$2`
   margin-bottom: var(--goa-space-m);
 `));
@@ -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", {

package/package.json

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