@abgov/jsonforms-components 1.10.0 → 1.10.1

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
@@ -4,7 +4,7 @@ import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputD
4
4
  import styled from 'styled-components';
5
5
  import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
6
6
  import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
7
- import React, { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
7
+ import React, { createContext, useEffect, useContext, useState, useMemo, useCallback } from 'react';
8
8
  import merge from 'lodash/merge';
9
9
  import axios from 'axios';
10
10
  import isEmpty from 'lodash/isEmpty';
@@ -3277,14 +3277,16 @@ function addDataByOptions(key, url, location, type, values) {
3277
3277
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
3278
3278
  const enumValues = new Map();
3279
3279
  const enumFunctions = new Map();
3280
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
3281
+ const enumSubmitFunctions = new Map();
3280
3282
  const baseEnumerator = {
3281
3283
  data: enumValues,
3282
- functions: enumFunctions
3284
+ functions: enumFunctions,
3285
+ submitFunction: enumSubmitFunctions
3283
3286
  };
3284
3287
  const JsonFormContext = /*#__PURE__*/createContext(baseEnumerator);
3285
3288
  function ContextProvider(props) {
3286
3289
  var _a;
3287
- React.useContext(JsonFormContext);
3288
3290
  if (props.fileManagement) {
3289
3291
  const {
3290
3292
  fileList,
@@ -3301,6 +3303,13 @@ function ContextProvider(props) {
3301
3303
  enumFunctions.set('download-file', () => downloadFileFunction);
3302
3304
  enumFunctions.set('delete-file', () => deleteFileFunction);
3303
3305
  }
3306
+ if (props.submit) {
3307
+ const {
3308
+ submitForm
3309
+ } = props.submit;
3310
+ const submitFunction = submitForm ? submitForm : () => {};
3311
+ enumSubmitFunctions.set('submit-form', () => submitFunction);
3312
+ }
3304
3313
  if (props.data) {
3305
3314
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
3306
3315
  (_a = props.data) === null || _a === void 0 ? void 0 : _a.forEach(item => {
@@ -3407,7 +3416,7 @@ const GoAEnumControlTester = rankWith(2, isEnumControl);
3407
3416
  const GoAEnumControl = withJsonFormsEnumProps(withTranslateProps(numControl), true);
3408
3417
 
3409
3418
  const EnumSelectAutoComplete = props => {
3410
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
3419
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
3411
3420
  const {
3412
3421
  data,
3413
3422
  schema,
@@ -3432,22 +3441,31 @@ const EnumSelectAutoComplete = props => {
3432
3441
  // eslint-disable-next-line
3433
3442
  enumData = newData;
3434
3443
  }
3435
- return jsx(GoADropdown, {
3436
- value: data,
3437
- onChange: (name, value) => {
3438
- handleChange(path, value);
3439
- },
3440
- testId: `autocomplete-dropdown-${label}`,
3441
- id: `autocomplete-dropdown-${label}`,
3442
- width: "100%",
3443
- filterable: true,
3444
- relative: true,
3445
- ariaLabel: label,
3446
- children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
3447
- return jsx(GoADropdownItem, {
3448
- value: item,
3449
- label: item
3450
- }, `autocomplete-${item}`);
3444
+ const readOnly = (_o = (_m = (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps) === null || _m === void 0 ? void 0 : _m.readOnly) !== null && _o !== void 0 ? _o : false;
3445
+ return jsx("div", {
3446
+ children: readOnly ? jsx("div", {
3447
+ children: jsx(GoADropdown, {
3448
+ disabled: true,
3449
+ placeholder: data,
3450
+ onChange: () => {}
3451
+ })
3452
+ }) : jsx(GoADropdown, {
3453
+ value: data,
3454
+ onChange: (name, value) => {
3455
+ handleChange(path, value);
3456
+ },
3457
+ testId: `autocomplete-dropdown-${label}`,
3458
+ id: `autocomplete-dropdown-${label}`,
3459
+ width: "100%",
3460
+ filterable: true,
3461
+ relative: true,
3462
+ ariaLabel: label,
3463
+ children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
3464
+ return jsx(GoADropdownItem, {
3465
+ value: item,
3466
+ label: item
3467
+ }, `autocomplete-${item}`);
3468
+ })
3451
3469
  })
3452
3470
  });
3453
3471
  };
@@ -3616,6 +3634,38 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
3616
3634
  const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
3617
3635
  const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
3618
3636
 
3637
+ /******************************************************************************
3638
+ Copyright (c) Microsoft Corporation.
3639
+
3640
+ Permission to use, copy, modify, and/or distribute this software for any
3641
+ purpose with or without fee is hereby granted.
3642
+
3643
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
3644
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
3645
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
3646
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
3647
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3648
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3649
+ PERFORMANCE OF THIS SOFTWARE.
3650
+ ***************************************************************************** */
3651
+
3652
+ function __rest(s, e) {
3653
+ var t = {};
3654
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
3655
+ t[p] = s[p];
3656
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
3657
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
3658
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
3659
+ t[p[i]] = s[p[i]];
3660
+ }
3661
+ return t;
3662
+ }
3663
+
3664
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3665
+ var e = new Error(message);
3666
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3667
+ };
3668
+
3619
3669
  let _$5 = t => t,
3620
3670
  _t$5,
3621
3671
  _t2$3;
@@ -3670,7 +3720,7 @@ const GridItem = styled.div(_t2$3 || (_t2$3 = _$5`
3670
3720
  let _$4 = t => t,
3671
3721
  _t$4,
3672
3722
  _t2$2,
3673
- _t3$1,
3723
+ _t3$2,
3674
3724
  _t4$1,
3675
3725
  _t5,
3676
3726
  _t6,
@@ -3693,7 +3743,7 @@ const ReviewItemSection = styled.div(_t2$2 || (_t2$2 = _$4`
3693
3743
  border: 1px solid #dcdcdc;
3694
3744
  border-radius: 5px;
3695
3745
  `));
3696
- const ReviewItemHeader = styled.div(_t3$1 || (_t3$1 = _$4`
3746
+ const ReviewItemHeader = styled.div(_t3$2 || (_t3$2 = _$4`
3697
3747
  display: flex;
3698
3748
  align-items: center;
3699
3749
  justify-content: space-between;
@@ -3859,20 +3909,26 @@ requiredFields) => elements.map((element, index) => {
3859
3909
  return null;
3860
3910
  });
3861
3911
 
3862
- const FormStepper = ({
3863
- uischema,
3864
- data,
3865
- schema,
3866
- // eslint-disable-next-line
3867
- ajv,
3868
- path,
3869
- cells,
3870
- renderers,
3871
- config,
3872
- visible,
3873
- enabled,
3874
- t
3875
- }) => {
3912
+ const FormStepper = _a => {
3913
+ var _b, _c, _d;
3914
+ var {
3915
+ uischema,
3916
+ data,
3917
+ schema,
3918
+ // eslint-disable-next-line
3919
+ ajv,
3920
+ path,
3921
+ cells,
3922
+ renderers,
3923
+ config,
3924
+ visible,
3925
+ enabled,
3926
+ t
3927
+ } = _a;
3928
+ __rest(_a, ["uischema", "data", "schema", "ajv", "path", "cells", "renderers", "config", "visible", "enabled", "t"]);
3929
+ const enumerators = useContext(JsonFormContext);
3930
+ const submitFormFunction = enumerators.submitFunction.get('submit-form');
3931
+ const submitForm = submitFormFunction && submitFormFunction();
3876
3932
  const categorization = uischema;
3877
3933
  const rawCategories = JSON.parse(JSON.stringify(categorization));
3878
3934
  const [step, setStep] = useState(1);
@@ -3886,8 +3942,11 @@ const FormStepper = ({
3886
3942
  }, [categorization, data, ajv]);
3887
3943
  const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
3888
3944
  const handleSubmit = () => {
3889
- setIsOpen(true);
3890
- console.log('submitted', data);
3945
+ if (submitForm) {
3946
+ submitForm(data);
3947
+ } else {
3948
+ setIsOpen(true);
3949
+ }
3891
3950
  };
3892
3951
  const onSubmit = () => {
3893
3952
  setIsOpen(false);
@@ -3898,14 +3957,23 @@ const FormStepper = ({
3898
3957
  }, [categories, t]);
3899
3958
  useEffect(() => {}, [categories.length]);
3900
3959
  // eslint-disable-next-line react-hooks/exhaustive-deps
3901
- const vslidateFormData = formData => {
3902
- const validate = ajv.compile(schema);
3960
+ const validateFormData = formData => {
3961
+ const newSchema = JSON.parse(JSON.stringify(schema));
3962
+ Object.keys(newSchema.properties || {}).forEach(propertyName => {
3963
+ var _a;
3964
+ const property = newSchema.properties || {};
3965
+ property[propertyName].enum = getData(propertyName);
3966
+ if (((_a = property[propertyName]) === null || _a === void 0 ? void 0 : _a.format) === 'file-urn') {
3967
+ delete property[propertyName].format;
3968
+ }
3969
+ });
3970
+ const validate = ajv.compile(newSchema);
3903
3971
  return validate(formData);
3904
3972
  };
3905
3973
  useEffect(() => {
3906
- const valid = vslidateFormData(data);
3974
+ const valid = validateFormData(data);
3907
3975
  setIsFormValid(valid);
3908
- }, [data, vslidateFormData]);
3976
+ }, [data, validateFormData]);
3909
3977
  if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
3910
3978
  // eslint-disable-next-line
3911
3979
  return jsx(Fragment, {});
@@ -3981,102 +4049,114 @@ const FormStepper = ({
3981
4049
  })
3982
4050
  );
3983
4051
  };
3984
- const handleEdit = index => {
4052
+ const changePage = index => {
3985
4053
  setPage(index + 1);
3986
4054
  };
3987
- return jsx(Visible, {
3988
- visible: visible,
3989
- children: jsxs("div", {
3990
- id: `${path || `goa`}-form-stepper`,
3991
- className: "formStepper",
3992
- children: [jsxs(GoAFormStepper, {
3993
- testId: "form-stepper-test",
3994
- step: step,
3995
- onChange: step => {
3996
- setTab(step);
3997
- },
3998
- children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
3999
- return jsx(GoAFormStep, {
4000
- text: `${CategoryLabels[index]}`,
4001
- status: 'incomplete'
4002
- }, `${CategoryLabels[index]}-tab`);
4003
- }), jsx(GoAFormStep, {
4004
- text: "Review",
4005
- status: "incomplete"
4006
- })]
4007
- }), jsxs(GoAPages, {
4008
- current: step,
4009
- mb: "xl",
4010
- children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
4011
- return jsx("div", {
4012
- "data-testid": `step_${index}-content`,
4013
- children: renderStepElements(category, index)
4014
- }, `${CategoryLabels[index]}`);
4015
- }), jsxs("div", {
4016
- children: [jsx("h3", {
4017
- style: {
4018
- flex: 1
4019
- },
4020
- children: "Summary"
4021
- }), jsx(ReviewItem, {
4022
- children: categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
4023
- const categoryLabel = category.label || category.i18n || 'Unknown Category';
4024
- const requiredFields = getAllRequiredFields(schema);
4025
- return jsxs(ReviewItemSection, {
4026
- children: [jsxs(ReviewItemHeader, {
4027
- children: [jsx(ReviewItemTitle, {
4028
- children: categoryLabel
4029
- }), jsx(Anchor, {
4030
- onClick: () => handleEdit(index),
4031
- children: "Edit"
4055
+ const readOnly = (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.componentProps) === null || _c === void 0 ? void 0 : _c.readOnly) !== null && _d !== void 0 ? _d : false;
4056
+ return jsx("div", {
4057
+ "data-testid": "form-stepper-test-wrapper",
4058
+ children: jsx(Visible, {
4059
+ visible: visible,
4060
+ children: jsxs("div", {
4061
+ id: `${path || `goa`}-form-stepper`,
4062
+ className: "formStepper",
4063
+ children: [jsxs(GoAFormStepper, {
4064
+ testId: "form-stepper-test",
4065
+ step: step,
4066
+ onChange: step => {
4067
+ setTab(step);
4068
+ },
4069
+ children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
4070
+ return jsx(GoAFormStep, {
4071
+ text: `${CategoryLabels[index]}`,
4072
+ status: 'incomplete'
4073
+ }, `${CategoryLabels[index]}-tab`);
4074
+ }), jsx(GoAFormStep, {
4075
+ text: "Review",
4076
+ status: "incomplete"
4077
+ })]
4078
+ }), jsxs(GoAPages, {
4079
+ current: step,
4080
+ mb: "xl",
4081
+ children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
4082
+ return jsx("div", {
4083
+ "data-testid": `step_${index}-content`,
4084
+ style: {
4085
+ marginTop: '1.5rem'
4086
+ },
4087
+ children: renderStepElements(category, index)
4088
+ }, `${CategoryLabels[index]}`);
4089
+ }), jsxs("div", {
4090
+ children: [jsx("h3", {
4091
+ style: {
4092
+ flex: 1,
4093
+ marginBottom: '1rem'
4094
+ },
4095
+ children: "Summary"
4096
+ }), jsx(ReviewItem, {
4097
+ children: categories.map((category, index) => {
4098
+ const categoryLabel = category.label || category.i18n || 'Unknown Category';
4099
+ const requiredFields = getAllRequiredFields(schema);
4100
+ return jsxs(ReviewItemSection, {
4101
+ children: [jsxs(ReviewItemHeader, {
4102
+ children: [jsx(ReviewItemTitle, {
4103
+ children: categoryLabel
4104
+ }), jsx(Anchor, {
4105
+ onClick: () => changePage(index),
4106
+ children: readOnly ? 'View' : 'Edit'
4107
+ })]
4108
+ }), jsx(Grid, {
4109
+ children: renderFormFields(category.elements, data, requiredFields)
4032
4110
  })]
4033
- }), jsx(Grid, {
4034
- children: renderFormFields(category.elements, data, requiredFields)
4035
- })]
4036
- }, index);
4037
- })
4111
+ }, index);
4112
+ })
4113
+ })]
4038
4114
  })]
4039
- })]
4040
- }), step && step !== 0 && jsxs(GoAGrid, {
4041
- minChildWidth: "100px",
4042
- children: [jsx("div", {
4043
- children: step !== 1 && jsx(GoAButton, {
4044
- type: "secondary",
4045
- disabled: disabledCategoryMap[step - 1] || !enabled,
4046
- onClick: () => prevPage(step, disabledCategoryMap),
4047
- children: "Previous"
4048
- })
4049
- }), jsxs(RightAlignmentDiv, {
4050
- children: [step !== null && showNextBtn && jsx(GoAButton, {
4051
- type: "primary",
4052
- disabled: disabledCategoryMap[step - 1] || !enabled,
4053
- onClick: () => nextPage(step, disabledCategoryMap),
4054
- children: "Next"
4055
- }), !showNextBtn && jsx(GoAButton, {
4056
- type: "primary",
4057
- onClick: handleSubmit,
4058
- disabled: !isFormValid || !enabled,
4059
- children: "Submit"
4115
+ }), step && step !== 0 && jsxs(GoAGrid, {
4116
+ minChildWidth: "100px",
4117
+ children: [jsx("div", {
4118
+ children: step !== 1 ? jsx(GoAButton, {
4119
+ type: "secondary",
4120
+ disabled: disabledCategoryMap[step - 1] || !enabled,
4121
+ onClick: () => prevPage(step, disabledCategoryMap),
4122
+ children: "Previous"
4123
+ }) : jsx("div", {})
4124
+ }), jsxs(RightAlignmentDiv, {
4125
+ children: [step !== null && showNextBtn && jsx(GoAButton, {
4126
+ type: "primary",
4127
+ disabled: disabledCategoryMap[step - 1] || !enabled,
4128
+ onClick: () => nextPage(step, disabledCategoryMap),
4129
+ children: "Next"
4130
+ }), !showNextBtn && jsx("div", {
4131
+ children: jsx(GoAButton, {
4132
+ type: "primary",
4133
+ onClick: handleSubmit,
4134
+ disabled: !isFormValid || !enabled,
4135
+ children: "Submit"
4136
+ })
4137
+ })]
4060
4138
  })]
4061
- })]
4062
- }), jsxs(GoAModal, {
4063
- testId: "submit-confirmation",
4064
- open: isOpen,
4065
- heading: 'Form Submitted',
4066
- width: "640px",
4067
- actions: jsx(GoAButtonGroup, {
4068
- alignment: "end",
4069
- children: jsx(GoAButton, {
4070
- type: "primary",
4071
- testId: "submit-form",
4072
- onClick: onSubmit,
4073
- children: "Close"
4139
+ }), jsx(GoAModal, {
4140
+ testId: "submit-confirmation",
4141
+ open: isOpen,
4142
+ heading: 'Form Submitted',
4143
+ width: "640px",
4144
+ actions: jsxs(GoAButtonGroup, {
4145
+ alignment: "end",
4146
+ children: [jsx(GoAButton, {
4147
+ type: "primary",
4148
+ testId: "submit-form",
4149
+ onClick: onSubmit,
4150
+ children: "Close"
4151
+ }), !showNextBtn && jsx(GoAButton, {
4152
+ type: "primary",
4153
+ onClick: handleSubmit,
4154
+ disabled: !isFormValid || !enabled,
4155
+ children: "Submit"
4156
+ })]
4074
4157
  })
4075
- }),
4076
- children: [jsx("b", {
4077
- children: "Submit is a test for preview purposes "
4078
- }), "(i.e. no actual form is being submitted)"]
4079
- })]
4158
+ })]
4159
+ })
4080
4160
  })
4081
4161
  });
4082
4162
  };
@@ -4099,38 +4179,6 @@ const categoriesAreValid = uischema => {
4099
4179
  };
4100
4180
  const CategorizationRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, optionIs('variant', 'stepper')));
4101
4181
 
4102
- /******************************************************************************
4103
- Copyright (c) Microsoft Corporation.
4104
-
4105
- Permission to use, copy, modify, and/or distribute this software for any
4106
- purpose with or without fee is hereby granted.
4107
-
4108
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
4109
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
4110
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
4111
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
4112
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
4113
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
4114
- PERFORMANCE OF THIS SOFTWARE.
4115
- ***************************************************************************** */
4116
-
4117
- function __rest(s, e) {
4118
- var t = {};
4119
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4120
- t[p] = s[p];
4121
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
4122
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
4123
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
4124
- t[p[i]] = s[p[i]];
4125
- }
4126
- return t;
4127
- }
4128
-
4129
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
4130
- var e = new Error(message);
4131
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
4132
- };
4133
-
4134
4182
  let _$3 = t => t,
4135
4183
  _t$3;
4136
4184
  const GoAContextMenuIcon = props => {
@@ -4192,11 +4240,12 @@ const DeleteFileModal = ({
4192
4240
 
4193
4241
  let _$2 = t => t,
4194
4242
  _t$2,
4195
- _t2$1;
4243
+ _t2$1,
4244
+ _t3$1;
4196
4245
  const DELAY_UPLOAD_TIMEOUT_MS = 200;
4197
4246
  const DELAY_DELETE_TIMEOUT_MS = 80;
4198
4247
  const FileUploader = _a => {
4199
- var _b;
4248
+ var _b, _c, _d, _e;
4200
4249
  var {
4201
4250
  data,
4202
4251
  path,
@@ -4260,6 +4309,7 @@ const FileUploader = _a => {
4260
4309
  const timeoutId = setTimeout(delayedFunction, 1);
4261
4310
  return () => clearTimeout(timeoutId);
4262
4311
  }, [handleChange, fileList, propertyId]);
4312
+ const readOnly = (_e = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.readOnly) !== null && _e !== void 0 ? _e : false;
4263
4313
  return jsxs(FileUploaderStyle, {
4264
4314
  id: "file-upload",
4265
4315
  className: "FileUploader",
@@ -4269,7 +4319,7 @@ const FileUploader = _a => {
4269
4319
  }) : jsx("div", {
4270
4320
  className: "label",
4271
4321
  children: props.label
4272
- }), jsx("div", {
4322
+ }), !readOnly && jsx("div", {
4273
4323
  className: "file-upload",
4274
4324
  children: jsx(GoAFileUploadInput, {
4275
4325
  variant: variant,
@@ -4287,43 +4337,61 @@ const FileUploader = _a => {
4287
4337
  })
4288
4338
  })
4289
4339
  }) : jsx("div", {
4290
- children: fileList && getFile() && jsxs(AttachmentBorder, {
4291
- children: [jsx("div", {
4292
- children: getFileName()
4293
- }), jsxs(GoAContextMenu, {
4294
- children: [jsx(GoAContextMenuIcon, {
4340
+ children: fileList && getFile() && jsx("div", {
4341
+ children: readOnly ? jsxs(AttachmentBorderDisabled, {
4342
+ children: [getFileName(), ' ', jsx(GoAContextMenuIcon, {
4295
4343
  testId: "download-icon",
4296
4344
  title: "Download",
4297
4345
  type: "download",
4298
4346
  onClick: () => downloadFile(getFile())
4299
- }), jsx(GoAContextMenuIcon, {
4300
- "data-testid": "delete-icon",
4301
- title: "Delete",
4302
- type: "trash",
4303
- onClick: () => {
4304
- setShowFileDeleteConfirmation(true);
4347
+ })]
4348
+ }) : jsxs(AttachmentBorder, {
4349
+ children: [jsx("div", {
4350
+ children: getFileName()
4351
+ }), jsxs(GoAContextMenu, {
4352
+ children: [jsx(GoAContextMenuIcon, {
4353
+ testId: "download-icon",
4354
+ title: "Download",
4355
+ type: "download",
4356
+ onClick: () => downloadFile(getFile())
4357
+ }), jsx(GoAContextMenuIcon, {
4358
+ "data-testid": "delete-icon",
4359
+ title: "Delete",
4360
+ type: "trash",
4361
+ onClick: () => {
4362
+ setShowFileDeleteConfirmation(true);
4363
+ }
4364
+ })]
4365
+ }), jsx(DeleteFileModal, {
4366
+ isOpen: showFileDeleteConfirmation,
4367
+ title: "Delete file",
4368
+ content: `Delete file ${getFile().filename} ?`,
4369
+ onCancel: () => setShowFileDeleteConfirmation(false),
4370
+ onDelete: () => {
4371
+ setShowFileDeleteConfirmation(false);
4372
+ deleteFile(getFile());
4373
+ const handleFunction = () => {
4374
+ handleChange(propertyId, '');
4375
+ };
4376
+ setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
4305
4377
  }
4306
4378
  })]
4307
- }), jsx(DeleteFileModal, {
4308
- isOpen: showFileDeleteConfirmation,
4309
- title: "Delete file",
4310
- content: `Delete file ${getFile().filename} ?`,
4311
- onCancel: () => setShowFileDeleteConfirmation(false),
4312
- onDelete: () => {
4313
- setShowFileDeleteConfirmation(false);
4314
- deleteFile(getFile());
4315
- const handleFunction = () => {
4316
- handleChange(propertyId, '');
4317
- };
4318
- setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
4319
- }
4320
- })]
4379
+ })
4321
4380
  })
4322
4381
  })
4323
4382
  })]
4324
4383
  });
4325
4384
  };
4326
- const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
4385
+ const AttachmentBorderDisabled = styled.div(_t$2 || (_t$2 = _$2`
4386
+ display: flex;
4387
+ flex-direction: row;
4388
+ border: var(--goa-border-width-s) solid #dcdcdc;
4389
+ border-radius: var(--goa-border-radius-m);
4390
+ padding: var(--goa-space-xs);
4391
+ width: fit-content;
4392
+ background-color: #f1f1f1;
4393
+ `));
4394
+ const AttachmentBorder = styled.div(_t2$1 || (_t2$1 = _$2`
4327
4395
  display: flex;
4328
4396
  flex-direction: row;
4329
4397
  border: var(--goa-border-width-s) solid #dcdcdc;
@@ -4332,7 +4400,7 @@ const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
4332
4400
  width: fit-content;
4333
4401
  margin-top: var(--goa-space-2xs);
4334
4402
  `));
4335
- const FileUploaderStyle = styled.div(_t2$1 || (_t2$1 = _$2`
4403
+ const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$2`
4336
4404
  .label {
4337
4405
  display: block;
4338
4406
  font-weight: var(--goa-font-weight-bold);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/jsonforms-components",
3
- "version": "1.10.0",
3
+ "version": "1.10.1",
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",
@@ -10,14 +10,19 @@ interface FileManagement {
10
10
  downloadFile?: (file: File) => void;
11
11
  deleteFile?: (file: File) => void;
12
12
  }
13
+ interface SubmitManagement {
14
+ submitForm?: (any: any) => void;
15
+ }
13
16
  type Props = {
14
17
  children?: React.ReactNode;
15
18
  fileManagement?: FileManagement;
19
+ submit?: SubmitManagement;
16
20
  data?: any;
17
21
  };
18
22
  export declare const JsonFormContext: React.Context<{
19
23
  data: Map<string, () => Record<string, any> | string[]>;
20
24
  functions: Map<string, () => (file: File, propertyId: string) => void>;
25
+ submitFunction: Map<string, () => (data: any) => void>;
21
26
  }>;
22
27
  export declare function ContextProvider(props: Props): JSX.Element | null;
23
28
  /**
@@ -5,7 +5,7 @@ import { AjvProps } from '@jsonforms/material-renderers';
5
5
  export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
6
6
  data: any;
7
7
  }
8
- export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, ...props }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
9
9
  export declare const flattenObject: (obj: Record<string, string>) => Record<string, string>;
10
10
  export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;
11
11
  export default FormStepper;