@abgov/jsonforms-components 1.44.2 → 1.44.4

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 => {},
@@ -5090,7 +5107,7 @@ const BooleanComponent = ({
   errors,
   schema
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const errorsFormInput = checkFieldValidity({
     data,
     uischema,
@@ -5099,7 +5116,7 @@ const BooleanComponent = ({
     errors,
     schema
   });
-  const text = `${(schema === null || schema === void 0 ? void 0 : schema.title) || (schema === null || schema === void 0 ? void 0 : schema.description) ? (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : schema === null || schema === void 0 ? void 0 : schema.description : (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text}${required ? ' (required)' : ''}`;
+  const text = `${((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text) ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.text : (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : schema === null || schema === void 0 ? void 0 : schema.description}${required ? ' (required)' : ''}`;
   return jsx(GoACheckbox, Object.assign({
     error: errorsFormInput.length > 0,
     testId: `${path}-checkbox-test-id`,
@@ -5110,7 +5127,7 @@ const BooleanComponent = ({
     onChange: (_, checked) => {
       handleChange(path, checked);
     }
-  }, (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.componentProps, {
+  }, (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps, {
     mb: "none"
   }));
 };
@@ -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", {
@@ -7565,10 +7593,10 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
     box-shadow: 0 8px 8px rgb(0 0 0 / 20%), 0 4px 4px rgb(0 0 0 / 10%);
     z-index: 99;
     overflow: hidden auto;
+    padding-left: 0.5rem;
   }
   .suggestions li {
-    padding: var(--goa-space-xs) var(--goa-space-2xs) var(--goa-space-xs) 2px;
-    color: var(--color-gray-900);
+
   }
   .suggestion-active,
   .suggestions li:hover {
@@ -7614,6 +7642,7 @@ const ListItem = styled.li(_t6 || (_t6 = _$1`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
+  padding: var(--goa-space-xs) var(--goa-space-2xs) var(--goa-space-xs);
 `), ({
   selectedIndex,
   index

package/package.json

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