@abgov/jsonforms-components 2.55.1 → 2.55.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.esm.js CHANGED
@@ -3055,6 +3055,17 @@ const sinTitle = 'Social insurance number';
3055
3055
  const invalidSin = 'Social insurance number is invalid';
3056
3056
  const DEFAULT_MAX_ITEMS = 50;
3057
3057
  const REQUIRED_PROPERTY_ERROR = 'is a required property';
3058
+ const ADDRESS_LOOKUP_LABELS = {
3059
+ addressLine1: 'Address line 1',
3060
+ addressLine2: 'Address line 2',
3061
+ municipality: 'City',
3062
+ postalCode: 'Postal code',
3063
+ subdivisionCode: 'Province',
3064
+ country: 'Country'
3065
+ };
3066
+ const getAddressLookupFieldLabel = fieldName => {
3067
+ return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
3068
+ };
3058
3069
 
3059
3070
  /**
3060
3071
  * Sets the first word to be capitalized so that it is sentence cased.
@@ -3246,23 +3257,6 @@ const convertToReadableFormat = input => {
3246
3257
  }
3247
3258
  return input.replace(/([a-z])([A-Z])/g, '$1 $2').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
3248
3259
  };
3249
- /**
3250
- * Converts a input to sentence case (eg: incomeThresholdExample or IncomeThresholdExample)
3251
- * to 'Income threshold example' with the first letter in the sentence capitalized.
3252
- *
3253
- * @param input - The camelCase or PascalCase string (e.g., "incomeThresholdExample").
3254
- * @returns A formatted string with spaces and capitalization (e.g., "Income threshold example").
3255
- */
3256
- const convertToSentenceCase = input => {
3257
- if (!input) {
3258
- return input;
3259
- }
3260
- const convertedInput = convertToReadableFormat(input);
3261
- if (!convertedInput) return convertedInput;
3262
- const firstWord = convertedInput.split(' ').splice(0, 1);
3263
- const newWords = convertedInput.split(' ').splice(1).map(word => word.charAt(0).toLowerCase() + word.slice(1).toLowerCase()).join(' ');
3264
- return firstWord.concat(newWords).join(' ');
3265
- };
3266
3260
 
3267
3261
  var $$y = _export;
3268
3262
  var call$e = functionCall;
@@ -8696,6 +8690,7 @@ const SideMenuItem = styled.div(_t8$1 || (_t8$1 = _$7`
8696
8690
  `));
8697
8691
  const RowFlex = styled.div(_t9$1 || (_t9$1 = _$7`
8698
8692
  display: flex;
8693
+ margin: 1.5rem 0 1.5rem 0;
8699
8694
 
8700
8695
  align-items: flex-start;
8701
8696
  `));
@@ -8723,7 +8718,6 @@ const RowFlexMenuLeft = styled.div(_t1$1 || (_t1$1 = _$7`
8723
8718
  border: 1px solid var(--goa-color-greyscale-300);
8724
8719
  border-radius: var(--goa-border-radius-m);
8725
8720
  margin-top: var(--goa-space-xs);
8726
- background-color: var(--goa-color-greyscale-white);
8727
8721
  padding: 0;
8728
8722
  gap: 0;
8729
8723
  position: relative;
@@ -9775,14 +9769,13 @@ class ListWithDetailControl extends React.Component {
9775
9769
  // eslint-disable-next-line
9776
9770
  const listTitle = (_ref = (_ref2 = (_ref3 = (_uischema$label = uischema == null ? void 0 : uischema.label) != null ? _uischema$label : uischema == null || (_uischema$options15 = uischema.options) == null ? void 0 : _uischema$options15.title) != null ? _ref3 : getItemsTitle(schema)) != null ? _ref2 : schema == null ? void 0 : schema.title) != null ? _ref : label;
9777
9771
  const withLeftTab = uischema == null || (_uischema$options16 = uischema.options) == null || (_uischema$options16 = _uischema$options16.componentProps) == null ? void 0 : _uischema$options16.withLeftTab;
9778
- const noLeftTabBlankButton = this.state.currentListPage === 0 && data === 0;
9779
- const showMainItems = withLeftTab || this.state.currentListPage === 0;
9780
- const showSecondaryButton = withLeftTab || noLeftTabBlankButton;
9772
+ this.state.currentListPage === 0 && data === 0;
9773
+ const editMode = this.state.currentListPage !== 0 && !withLeftTab;
9781
9774
  return jsxs(Visible, {
9782
9775
  visible: visible,
9783
9776
  "data-testid": "jsonforms-object-list-wrapper",
9784
9777
  children: [jsxs(ToolBarHeader, {
9785
- children: [listTitle && showMainItems && jsx(MarginTop, {
9778
+ children: [listTitle && jsx(MarginTop, {
9786
9779
  children: jsxs(ObjectArrayTitle, {
9787
9780
  children: [listTitle, " ", jsx("span", {
9788
9781
  children: additionalProps.required && '(required)'
@@ -9794,7 +9787,7 @@ class ListWithDetailControl extends React.Component {
9794
9787
  children: this.state.maxItemsError
9795
9788
  })]
9796
9789
  })
9797
- }), showSecondaryButton && jsx(ObjectArrayToolBar, {
9790
+ }), jsx(ObjectArrayToolBar, {
9798
9791
  data: data,
9799
9792
  errors: errors,
9800
9793
  label: label,
@@ -9806,7 +9799,7 @@ class ListWithDetailControl extends React.Component {
9806
9799
  uischema: controlElement,
9807
9800
  schema: schema,
9808
9801
  rootSchema: rootSchema,
9809
- enabled: enabled,
9802
+ enabled: enabled && !editMode,
9810
9803
  setCurrentListPage: listPage => {
9811
9804
  this.setState({
9812
9805
  currentListPage: listPage
@@ -9837,33 +9830,13 @@ class ListWithDetailControl extends React.Component {
9837
9830
  currentListPage: this.state.currentListPage,
9838
9831
  listTitle: listTitle
9839
9832
  }, additionalProps))
9840
- }), !showSecondaryButton && jsx(ObjectArrayToolBar, {
9841
- data: data,
9842
- errors: errors,
9843
- label: label,
9844
- addItem: (path, value) => () => {
9845
- this.addItem(path, value);
9846
- },
9847
- numColumns: 0,
9848
- path: path,
9849
- uischema: controlElement,
9850
- schema: schema,
9851
- rootSchema: rootSchema,
9852
- enabled: enabled,
9853
- setCurrentListPage: listPage => {
9854
- this.setState({
9855
- currentListPage: listPage
9856
- });
9857
- },
9858
- currentListPage: this.state.currentListPage,
9859
- buttonType: "tertiary"
9860
9833
  })]
9861
9834
  });
9862
9835
  }
9863
9836
  }
9864
9837
 
9865
9838
  const GoAInputBaseTableReview = props => {
9866
- var _uischema$options, _jsonForms$core, _uischema$options4;
9839
+ var _uischema$options, _uischema$scope, _jsonForms$core, _uischema$options4;
9867
9840
  const {
9868
9841
  data,
9869
9842
  uischema,
@@ -9877,10 +9850,16 @@ const GoAInputBaseTableReview = props => {
9877
9850
  } = props;
9878
9851
  const context = useContext(JsonFormsStepperContext);
9879
9852
  const jsonForms = useJsonForms();
9880
- let labelToUpdate = (_uischema$options = uischema.options) != null && _uischema$options.reviewLabel ? uischema.options.reviewLabel : convertToSentenceCase(getLabelText(uischema.scope, label || ''));
9881
- if (labelToUpdate === '') {
9853
+ const reviewLabel = typeof ((_uischema$options = uischema.options) == null ? void 0 : _uischema$options.reviewLabel) === 'string' ? uischema.options.reviewLabel : '';
9854
+ const propLabel = typeof label === 'string' ? label : '';
9855
+ let labelToUpdate = '';
9856
+ if (reviewLabel.trim() !== '') {
9857
+ labelToUpdate = reviewLabel;
9858
+ } else if (propLabel.trim() !== '') {
9859
+ labelToUpdate = propLabel;
9860
+ } else if ((_uischema$scope = uischema.scope) != null && _uischema$scope.startsWith('#/')) {
9882
9861
  const scopeName = uischema.scope ? getLastSegmentFromPointer(uischema.scope) : '';
9883
- labelToUpdate = convertToSentenceCase(scopeName);
9862
+ labelToUpdate = convertToReadableFormat(scopeName);
9884
9863
  }
9885
9864
  let reviewText = data;
9886
9865
  const isBoolean = typeof data === 'boolean';
@@ -9909,7 +9888,7 @@ const GoAInputBaseTableReview = props => {
9909
9888
  checkboxLabel = uischema.options.text.trim();
9910
9889
  } else if (uischema.scope && uischema.scope.startsWith('#/')) {
9911
9890
  const fallbackLabel = getLastSegmentFromPointer(uischema.scope);
9912
- checkboxLabel = fallbackLabel.charAt(0).toUpperCase() + fallbackLabel.slice(1);
9891
+ checkboxLabel = convertToReadableFormat(fallbackLabel);
9913
9892
  }
9914
9893
  if (((_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.radio) === true) {
9915
9894
  reviewText = data ? `Yes` : `No`;
@@ -9971,13 +9950,13 @@ const GoAInputBaseTableReview = props => {
9971
9950
  // Fallback: try to extract missing property name and create a friendly message
9972
9951
  if (matchedError.keyword === 'required' && (_matchedError$params = matchedError.params) != null && _matchedError$params.missingProperty) {
9973
9952
  const missing = matchedError.params.missingProperty;
9974
- const missingPropertyLabel = convertToSentenceCase(missing);
9953
+ const missingPropertyLabel = convertToReadableFormat(missing);
9975
9954
  activeError = `${missingPropertyLabel} is required`;
9976
9955
  } else {
9977
9956
  var _matchedError$message;
9978
9957
  const propertyMatch = (_matchedError$message = matchedError.message) == null ? void 0 : _matchedError$message.match(/'([^']+)'/);
9979
9958
  if (propertyMatch && propertyMatch[1]) {
9980
- const missingPropertyLabel = convertToSentenceCase(propertyMatch[1]);
9959
+ const missingPropertyLabel = convertToReadableFormat(propertyMatch[1]);
9981
9960
  activeError = `${missingPropertyLabel} is required`;
9982
9961
  } else {
9983
9962
  activeError = matchedError.message;
@@ -12262,9 +12241,6 @@ const AddressLoopUpControlTableReview = props => {
12262
12241
  label: 'Yukon'
12263
12242
  }];
12264
12243
  const provinceLabel = isAlbertaAddress ? 'Alberta' : ((_provinces$find = provinces.find(p => p.value === (data == null ? void 0 : data.subdivisionCode))) == null ? void 0 : _provinces$find.label) || (data == null ? void 0 : data.subdivisionCode);
12265
- function prettify(prop) {
12266
- return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
12267
- }
12268
12244
  const getError = propName => {
12269
12245
  var _jsonForms$core;
12270
12246
  const normalizePath = p => p.replace(/\[(\d+)\]/g, '.$1').replace(/^\./, '').replace(/\//g, '.');
@@ -12303,7 +12279,7 @@ const AddressLoopUpControlTableReview = props => {
12303
12279
  if (raw != null && raw.includes('must have required property') || raw != null && raw.includes(REQUIRED_PROPERTY_ERROR)) {
12304
12280
  const propertyMatch = raw.match(/'([^']+)'/);
12305
12281
  if (propertyMatch && propertyMatch[1]) {
12306
- return prettify(propertyMatch[1]) + ' is required';
12282
+ return `${getAddressLookupFieldLabel(propertyMatch[1])} is required`;
12307
12283
  }
12308
12284
  }
12309
12285
  return raw;
@@ -12363,7 +12339,7 @@ const AddressLoopUpControlTableReview = props => {
12363
12339
  })]
12364
12340
  })
12365
12341
  })
12366
- }), renderRow('Address line 1', data == null ? void 0 : data.addressLine1, 'addressLine1', false), (data == null ? void 0 : data.addressLine2) && renderRow('Address line 2', data.addressLine2, 'addressLine2', false), renderRow('City', data == null ? void 0 : data.municipality, 'municipality', false), renderRow('Postal Code', data == null ? void 0 : data.postalCode, 'postalCode', false), renderRow('Province', provinceLabel, 'subdivisionCode', false), renderRow('Country', 'Canada', 'country', false)]
12342
+ }), renderRow(getAddressLookupFieldLabel('addressLine1'), data == null ? void 0 : data.addressLine1, 'addressLine1', false), (data == null ? void 0 : data.addressLine2) && renderRow(getAddressLookupFieldLabel('addressLine2'), data.addressLine2, 'addressLine2', false), renderRow(getAddressLookupFieldLabel('municipality'), data == null ? void 0 : data.municipality, 'municipality', false), renderRow(getAddressLookupFieldLabel('postalCode'), data == null ? void 0 : data.postalCode, 'postalCode', false), renderRow(getAddressLookupFieldLabel('subdivisionCode'), provinceLabel, 'subdivisionCode', false), renderRow(getAddressLookupFieldLabel('country'), 'Canada', 'country', false)]
12367
12343
  });
12368
12344
  };
12369
12345
 
@@ -16656,7 +16632,7 @@ const AddressLookUpControl = props => {
16656
16632
  const handleRequiredFieldBlur = name => {
16657
16633
  const err = Object.assign({}, errors);
16658
16634
  if (!(data != null && data[name]) || data[name] === '' || (data == null ? void 0 : data[name]) === undefined) {
16659
- err[name] = name === 'municipality' ? 'city is required' : `${name} is required`;
16635
+ err[name] = `${getAddressLookupFieldLabel(name)} is required`;
16660
16636
  setErrors(err);
16661
16637
  } else {
16662
16638
  delete errors[name];
@@ -16715,8 +16691,7 @@ const AddressLookUpControl = props => {
16715
16691
  try {
16716
16692
  const response = await fetchAddressSuggestions(formUrl, q, isAlbertaAddress, {
16717
16693
  signal: controller.signal
16718
- } //update util to accept signal
16719
- );
16694
+ });
16720
16695
  const filtered = filterSuggestionsWithoutAddressCount(response);
16721
16696
  const finalList = isAlbertaAddress ? filterAlbertaAddresses(filtered) : filtered;
16722
16697
  cacheRef.current.set(q, finalList);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/jsonforms-components",
3
- "version": "2.55.1",
3
+ "version": "2.55.2",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
6
6
  "repository": "https://github.com/GovAlta/adsp-monorepo",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
- "generatedAt": "2026-03-16T20:36:57.025Z",
4
- "sourceCommit": "e0ba3a1eada96011e94c8b3964d421fc77539775",
3
+ "generatedAt": "2026-03-17T21:52:22.881Z",
4
+ "sourceCommit": "f73629414bf1125cb5192c06f4b0aafd1cdbdc45",
5
5
  "sourcePath": "libs/jsonforms-components/src/index.ts",
6
6
  "rendererCount": 32,
7
7
  "renderers": [
@@ -2,3 +2,12 @@ export declare const sinTitle = "Social insurance number";
2
2
  export declare const invalidSin = "Social insurance number is invalid";
3
3
  export declare const DEFAULT_MAX_ITEMS = 50;
4
4
  export declare const REQUIRED_PROPERTY_ERROR = "is a required property";
5
+ export declare const ADDRESS_LOOKUP_LABELS: {
6
+ readonly addressLine1: "Address line 1";
7
+ readonly addressLine2: "Address line 2";
8
+ readonly municipality: "City";
9
+ readonly postalCode: "Postal code";
10
+ readonly subdivisionCode: "Province";
11
+ readonly country: "Country";
12
+ };
13
+ export declare const getAddressLookupFieldLabel: (fieldName: string) => string;