@oneblink/apps-react 12.0.0 → 13.0.0-beta.1

package/dist/form-elements/FormElementNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '../apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.NumberElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={element.readOnly}\n                onBlur={setIsDirty}\n                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n                aria-required={element.required}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\n              </span>\n            </div>\n            {!!element.readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n              lookupButtonConfig={element.lookupButton}\n              overrideRequiredMessage={undefined}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n            ariaDescribedby={ariaDescribedby}\n          />\n        ) : undefined}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  onChange,\n  onBlur,\n  ariaDescribedby,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  ariaDescribedby: string | undefined\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={number}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        aria-describedby={ariaDescribedby}\n        aria-required={element.required}\n        disabled={element.readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}
+{"version":3,"file":"FormElementNumber.js","sourceRoot":"","sources":["../../src/form-elements/FormElementNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport _debounce from 'lodash.debounce'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport { localisationService } from '../apps'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useIsPageVisible from '../hooks/useIsPageVisible'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.NumberElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<number>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementNumber({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isPageVisible = useIsPageVisible()\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'number') {\n      return ''\n    }\n    if (element.displayAsCurrency) {\n      return localisationService.formatCurrency(value)\n    }\n    return value.toString()\n  }, [value, element.displayAsCurrency])\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseFloat(event.target.value)\n      onChange(element, {\n        value: isNaN(newValue) ? undefined : newValue,\n      })\n    },\n    [element, onChange],\n  )\n  const htmlInputElementRef = React.useRef<HTMLInputElement>(null)\n\n  //this onWheel callback prevents numbers changing while scrolling\n  const handleWheel = React.useCallback(() => {\n    if (htmlInputElementRef.current !== document.activeElement) {\n      return\n    }\n    htmlInputElementRef.current?.blur()\n    setTimeout(() => {\n      htmlInputElementRef.current?.focus()\n    })\n  }, [])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-number-element\">\n      <FormElementLabelContainer\n        className=\"ob-number\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        {!element.isSlider ? (\n          <div className=\"field has-addons\">\n            <div className=\"control is-expanded has-icons-right\">\n              <input\n                type=\"number\"\n                placeholder={element.placeholderValue}\n                id={id}\n                value={typeof value === 'number' ? value : ''}\n                name={element.name}\n                className=\"input ob-input cypress-number-control\"\n                onChange={handleChange}\n                required={element.required}\n                disabled={readOnly}\n                onBlur={setIsDirty}\n                ref={htmlInputElementRef}\n                onWheel={handleWheel}\n                aria-describedby={ariaDescribedby}\n                autoComplete={autocompleteAttributes}\n                aria-required={element.required}\n              />\n              <span className=\"ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5\">\n                  {element.displayAsCurrency ? 'attach_money' : 'tag'}\n                </MaterialIcon>\n              </span>\n            </div>\n            {!!readOnly && !!text && (\n              <div className=\"control\">\n                <CopyToClipboardButton\n                  className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                  text={text}\n                />\n              </div>\n            )}\n            <LookupButton\n              readOnly={readOnly}\n              isInputButton\n              value={value}\n              validationMessage={validationMessage}\n              lookupButtonConfig={element.lookupButton}\n              overrideRequiredMessage={undefined}\n            />\n          </div>\n        ) : isPageVisible ? (\n          <SliderControl\n            id={id}\n            text={text}\n            value={value}\n            element={element}\n            readOnly={readOnly}\n            onChange={handleChange}\n            onBlur={setIsDirty}\n            ariaDescribedby={ariaDescribedby}\n          />\n        ) : undefined}\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst sliderBubbleWidthInPixels = 24\n\nconst SliderControl = React.memo(function SliderControl({\n  id,\n  text,\n  value,\n  element,\n  readOnly,\n  onChange,\n  onBlur,\n  ariaDescribedby,\n}: {\n  id: string\n  text: string\n  value: unknown\n  element: FormTypes.NumberElement\n  readOnly: boolean\n  ariaDescribedby: string | undefined\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown\n  onBlur: () => void\n}) {\n  const sliderOutputRef = React.useRef<HTMLOutputElement>(null)\n  const sliderInputRef = React.useRef<HTMLInputElement>(null)\n\n  const number = React.useMemo(\n    () => (typeof value === 'number' ? value : parseFloat(value as string)),\n    [value],\n  )\n\n  const removeIsDraggingClass = React.useMemo(\n    () =>\n      _debounce((outputElement: HTMLOutputElement) => {\n        if (outputElement.classList.contains('is-dragging')) {\n          outputElement.classList.remove('is-dragging')\n        }\n      }, 500),\n    [],\n  )\n\n  React.useEffect(() => {\n    if (\n      Number.isNaN(number) ||\n      typeof element.maxNumber !== 'number' ||\n      typeof element.minNumber !== 'number'\n    ) {\n      return\n    }\n\n    const outputElement = sliderOutputRef.current\n    const inputElement = sliderInputRef.current\n    if (outputElement && inputElement) {\n      const range = element.maxNumber - element.minNumber\n      const percentage = (number - element.minNumber) / range\n      const inputWidth = inputElement.getBoundingClientRect().width\n      const outputWidth = outputElement.getBoundingClientRect().width\n      const sliderBubbleOffSetPixels =\n        (percentage - 0.5) * -sliderBubbleWidthInPixels\n\n      outputElement.style.left = `${percentage * inputWidth}px`\n      outputElement.style.marginLeft = `-${\n        outputWidth / 2 - sliderBubbleOffSetPixels\n      }px`\n\n      if (!outputElement.classList.contains('is-dragging')) {\n        outputElement.classList.add('is-dragging')\n      }\n      removeIsDraggingClass(outputElement)\n    }\n  }, [element.maxNumber, element.minNumber, number, removeIsDraggingClass])\n\n  return (\n    <div className=\"control\">\n      <output\n        ref={sliderOutputRef}\n        className=\"ob-number__output cypress-number-output\"\n        htmlFor={id}\n      >\n        {text}\n      </output>\n      <input\n        ref={sliderInputRef}\n        id={id}\n        name={element.name}\n        className=\"slider ob-input is-fullwidth cypress-slider-number-control is-large is-circle cypress-number-control\"\n        step={element.sliderIncrement ? element.sliderIncrement : 1}\n        min={element.minNumber}\n        max={element.maxNumber}\n        value={number}\n        type=\"range\"\n        onChange={onChange}\n        required={element.required}\n        aria-describedby={ariaDescribedby}\n        aria-required={element.required}\n        disabled={readOnly}\n        onBlur={onBlur}\n      />\n    </div>\n  )\n})\n\nexport default React.memo(FormElementNumber)\n"]}

package/dist/form-elements/FormElementPointAddress.d.ts

@@ -5,13 +5,14 @@ type Props = {
     formId: number;
     id: string;
     element: FormTypes.PointAddressElement;
+    readOnly: boolean;
     value: PointTypes.PointAddress | undefined;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     onChange: FormElementValueChangeHandler<PointTypes.PointAddress>;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementPointAddress({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function PointAddressGridItem({ label, classNameSuffix, value, }: {
     label: string;
     classNameSuffix: string;

package/dist/form-elements/FormElementPointAddress.js

@@ -9,7 +9,7 @@ import { Collapse } from '@mui/material';
 import { NotificationGrid, NotificationGridItem, } from '../components/NotificationGrid';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 const pointAddressClass = 'ob-point-address';
-function FormElementPointAddress({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementPointAddress({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
     var _a, _b, _c;
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const isMounted = useIsMounted();
@@ -69,7 +69,7 @@ function FormElementPointAddress({ formId, id, element, value, displayValidation
         // we don't need this to run again when the label changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (_jsxs("div", { className: "cypress-point-address-element", children: [_jsx(FormElementLabelContainer, { className: `${pointAddressClass} ob-autocomplete`, element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-point-address-details-error-message" })), _jsx(Collapse, { in: !!value && !!element.isDisplayingAddressInformation, children: _jsxs(NotificationGrid, { className: `${pointAddressClass}__record-display has-margin-top-6`, gridClassName: `${pointAddressClass}__container`, children: [_jsx(PointAddressGridItem, { label: "Local Government Area", value: (_a = value === null || value === void 0 ? void 0 : value.localGovernmentArea) === null || _a === void 0 ? void 0 : _a.lgaName, classNameSuffix: "local-government-area-name" }), _jsx(PointAddressGridItem, { label: "Lot / Section / Plan No.", value: (_b = value === null || value === void 0 ? void 0 : value.addressDetails) === null || _b === void 0 ? void 0 : _b.cadastralIdentifier, classNameSuffix: "cadastral-identifier" }), (_c = value === null || value === void 0 ? void 0 : value.cadastralParcels) === null || _c === void 0 ? void 0 : _c.map((cadastralParcel, index) => {
+    return (_jsxs("div", { className: "cypress-point-address-element", children: [_jsx(FormElementLabelContainer, { className: `${pointAddressClass} ob-autocomplete`, element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-point-address-details-error-message" })), _jsx(Collapse, { in: !!value && !!element.isDisplayingAddressInformation, children: _jsxs(NotificationGrid, { className: `${pointAddressClass}__record-display has-margin-top-6`, gridClassName: `${pointAddressClass}__container`, children: [_jsx(PointAddressGridItem, { label: "Local Government Area", value: (_a = value === null || value === void 0 ? void 0 : value.localGovernmentArea) === null || _a === void 0 ? void 0 : _a.lgaName, classNameSuffix: "local-government-area-name" }), _jsx(PointAddressGridItem, { label: "Lot / Section / Plan No.", value: (_b = value === null || value === void 0 ? void 0 : value.addressDetails) === null || _b === void 0 ? void 0 : _b.cadastralIdentifier, classNameSuffix: "cadastral-identifier" }), (_c = value === null || value === void 0 ? void 0 : value.cadastralParcels) === null || _c === void 0 ? void 0 : _c.map((cadastralParcel, index) => {
                             var _a;
                             return (_jsx(PointAddressGridItem, { label: "Lot / DP Numbers", value: (_a = cadastralParcel === null || cadastralParcel === void 0 ? void 0 : cadastralParcel.parcelId) === null || _a === void 0 ? void 0 : _a.join(', '), classNameSuffix: "cadastral-parcel" }, cadastralParcel.propId || index));
                         })] }) })] }));

package/dist/form-elements/FormElementPointAddress.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementPointAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointAddress.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, PointTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { Collapse } from '@mui/material'\nimport {\n  NotificationGrid,\n  NotificationGridItem,\n} from '../components/NotificationGrid'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.PointAddressElement\n  value: PointTypes.PointAddress | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointAddress>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype AddressType = 'all' | 'physical' | 'mailing'\nconst pointAddressClass = 'ob-point-address'\n\nfunction FormElementPointAddress({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isMounted = useIsMounted()\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n    React.useState(false)\n\n  const handleSearch = React.useCallback(\n    async (address: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n\n      const params: {\n        address: string\n        maxNumberOfResults?: number\n        stateTerritory?: string\n        addressType?: AddressType\n      } = {\n        address,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateTerritory = element.stateTerritoryFilter.join(',')\n      }\n      if (element.addressTypeFilter) {\n        let addressType: AddressType = 'all'\n        if (element.addressTypeFilter.length === 1) {\n          addressType = element.addressTypeFilter[0] as AddressType\n        }\n        params.addressType = addressType\n      }\n\n      const result = await formService.searchPointAddresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return result.map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [element.addressTypeFilter, element.stateTerritoryFilter, formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, { value: undefined })\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getPointAddress(formId, addressId)\n        onChange(element, { value: result })\n      } catch (newError) {\n        if (isMounted.current) {\n          setError(newError as Error)\n        }\n      }\n      if (isMounted.current) {\n        setIsLoadingAddressDetails(false)\n      }\n    },\n    [isMounted, onChange, element, formId],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = value.addressDetails?.formattedAddress || value.addressId\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // we don't need this to run again when the label changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-point-address-element\">\n      <FormElementLabelContainer\n        className={`${pointAddressClass} ob-autocomplete`}\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={element.readOnly || isLoadingAddressDetails}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          isLoading={isLoadingAddressDetails}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-point-address-details-error-message\"\n        />\n      )}\n\n      <Collapse in={!!value && !!element.isDisplayingAddressInformation}>\n        <NotificationGrid\n          className={`${pointAddressClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointAddressClass}__container`}\n        >\n          <PointAddressGridItem\n            label=\"Local Government Area\"\n            value={value?.localGovernmentArea?.lgaName}\n            classNameSuffix=\"local-government-area-name\"\n          />\n          <PointAddressGridItem\n            label=\"Lot / Section / Plan No.\"\n            value={value?.addressDetails?.cadastralIdentifier}\n            classNameSuffix=\"cadastral-identifier\"\n          />\n          {value?.cadastralParcels?.map((cadastralParcel, index) => (\n            <PointAddressGridItem\n              key={cadastralParcel.propId || index}\n              label=\"Lot / DP Numbers\"\n              value={cadastralParcel?.parcelId?.join(', ')}\n              classNameSuffix=\"cadastral-parcel\"\n            />\n          ))}\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nexport function PointAddressGridItem({\n  label,\n  classNameSuffix,\n  value,\n}: {\n  label: string\n  classNameSuffix: string\n  value: string | undefined\n}) {\n  return (\n    <NotificationGridItem\n      className={`${pointAddressClass}__container-${classNameSuffix}`}\n      value={value}\n      label={label}\n      labelClassName={`${pointAddressClass}__detail-label`}\n      valueClassName={`${pointAddressClass}__detail-value`}\n    />\n  )\n}\n\nexport default React.memo(FormElementPointAddress)\n"]}
+{"version":3,"file":"FormElementPointAddress.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointAddress.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, PointTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { Collapse } from '@mui/material'\nimport {\n  NotificationGrid,\n  NotificationGridItem,\n} from '../components/NotificationGrid'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.PointAddressElement\n  readOnly: boolean\n  value: PointTypes.PointAddress | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointAddress>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype AddressType = 'all' | 'physical' | 'mailing'\nconst pointAddressClass = 'ob-point-address'\n\nfunction FormElementPointAddress({\n  formId,\n  id,\n  element,\n  readOnly,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isMounted = useIsMounted()\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n    React.useState(false)\n\n  const handleSearch = React.useCallback(\n    async (address: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n\n      const params: {\n        address: string\n        maxNumberOfResults?: number\n        stateTerritory?: string\n        addressType?: AddressType\n      } = {\n        address,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateTerritory = element.stateTerritoryFilter.join(',')\n      }\n      if (element.addressTypeFilter) {\n        let addressType: AddressType = 'all'\n        if (element.addressTypeFilter.length === 1) {\n          addressType = element.addressTypeFilter[0] as AddressType\n        }\n        params.addressType = addressType\n      }\n\n      const result = await formService.searchPointAddresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return result.map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [element.addressTypeFilter, element.stateTerritoryFilter, formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, { value: undefined })\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getPointAddress(formId, addressId)\n        onChange(element, { value: result })\n      } catch (newError) {\n        if (isMounted.current) {\n          setError(newError as Error)\n        }\n      }\n      if (isMounted.current) {\n        setIsLoadingAddressDetails(false)\n      }\n    },\n    [isMounted, onChange, element, formId],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = value.addressDetails?.formattedAddress || value.addressId\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // we don't need this to run again when the label changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-point-address-element\">\n      <FormElementLabelContainer\n        className={`${pointAddressClass} ob-autocomplete`}\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={readOnly || isLoadingAddressDetails}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          isLoading={isLoadingAddressDetails}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-point-address-details-error-message\"\n        />\n      )}\n\n      <Collapse in={!!value && !!element.isDisplayingAddressInformation}>\n        <NotificationGrid\n          className={`${pointAddressClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointAddressClass}__container`}\n        >\n          <PointAddressGridItem\n            label=\"Local Government Area\"\n            value={value?.localGovernmentArea?.lgaName}\n            classNameSuffix=\"local-government-area-name\"\n          />\n          <PointAddressGridItem\n            label=\"Lot / Section / Plan No.\"\n            value={value?.addressDetails?.cadastralIdentifier}\n            classNameSuffix=\"cadastral-identifier\"\n          />\n          {value?.cadastralParcels?.map((cadastralParcel, index) => (\n            <PointAddressGridItem\n              key={cadastralParcel.propId || index}\n              label=\"Lot / DP Numbers\"\n              value={cadastralParcel?.parcelId?.join(', ')}\n              classNameSuffix=\"cadastral-parcel\"\n            />\n          ))}\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nexport function PointAddressGridItem({\n  label,\n  classNameSuffix,\n  value,\n}: {\n  label: string\n  classNameSuffix: string\n  value: string | undefined\n}) {\n  return (\n    <NotificationGridItem\n      className={`${pointAddressClass}__container-${classNameSuffix}`}\n      value={value}\n      label={label}\n      labelClassName={`${pointAddressClass}__detail-label`}\n      valueClassName={`${pointAddressClass}__detail-value`}\n    />\n  )\n}\n\nexport default React.memo(FormElementPointAddress)\n"]}

package/dist/form-elements/FormElementPointAddressV3.d.ts

@@ -5,12 +5,13 @@ type Props = {
     formId: number;
     id: string;
     element: FormTypes.PointAddressV3Element;
+    readOnly: boolean;
     value: PointTypes.PointAddressV3GetAddressDetailsResponse | undefined;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     onChange: FormElementValueChangeHandler<PointTypes.PointAddressV3GetAddressDetailsResponse>;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementPointAddressV3({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementPointAddressV3({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementPointAddressV3>;
 export default _default;

package/dist/form-elements/FormElementPointAddressV3.js

@@ -10,7 +10,7 @@ import { NotificationGrid } from '../components/NotificationGrid';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 import { PointAddressGridItem } from './FormElementPointAddress';
 const pointAddressClass = 'ob-point-address-v3';
-function FormElementPointAddressV3({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementPointAddressV3({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
     var _a, _b, _c, _d, _e;
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const isMounted = useIsMounted();
@@ -85,7 +85,7 @@ function FormElementPointAddressV3({ formId, id, element, value, displayValidati
         // we don't need this to run again when the label changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (_jsxs("div", { className: "cypress-point-address-v3-element", children: [_jsx(FormElementLabelContainer, { className: `${pointAddressClass} ob-autocomplete`, element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-point-address-v3-details-error-message" })), _jsx(Collapse, { in: !!value && !!element.isDisplayingAddressInformation, children: _jsxs(NotificationGrid, { className: `${pointAddressClass}__record-display has-margin-top-6`, gridClassName: `${pointAddressClass}__container`, children: [_jsx(PointAddressGridItem, { label: "Local Government Area", value: (_b = (_a = value === null || value === void 0 ? void 0 : value.properties) === null || _a === void 0 ? void 0 : _a.localGovernmentArea) === null || _b === void 0 ? void 0 : _b.lgaName, classNameSuffix: "local-government-area-name" }), _jsx(PointAddressGridItem, { label: "Lot / Section / Plan No.", value: (_c = value === null || value === void 0 ? void 0 : value.properties) === null || _c === void 0 ? void 0 : _c.cadastralIdentifier, classNameSuffix: "cadastral-identifier" }), (_e = (_d = value === null || value === void 0 ? void 0 : value.properties) === null || _d === void 0 ? void 0 : _d.propertyBundle) === null || _e === void 0 ? void 0 : _e.map((property) => {
+    return (_jsxs("div", { className: "cypress-point-address-v3-element", children: [_jsx(FormElementLabelContainer, { className: `${pointAddressClass} ob-autocomplete`, element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly || isLoadingAddressDetails, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, isLoading: isLoadingAddressDetails, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-point-address-v3-details-error-message" })), _jsx(Collapse, { in: !!value && !!element.isDisplayingAddressInformation, children: _jsxs(NotificationGrid, { className: `${pointAddressClass}__record-display has-margin-top-6`, gridClassName: `${pointAddressClass}__container`, children: [_jsx(PointAddressGridItem, { label: "Local Government Area", value: (_b = (_a = value === null || value === void 0 ? void 0 : value.properties) === null || _a === void 0 ? void 0 : _a.localGovernmentArea) === null || _b === void 0 ? void 0 : _b.lgaName, classNameSuffix: "local-government-area-name" }), _jsx(PointAddressGridItem, { label: "Lot / Section / Plan No.", value: (_c = value === null || value === void 0 ? void 0 : value.properties) === null || _c === void 0 ? void 0 : _c.cadastralIdentifier, classNameSuffix: "cadastral-identifier" }), (_e = (_d = value === null || value === void 0 ? void 0 : value.properties) === null || _d === void 0 ? void 0 : _d.propertyBundle) === null || _e === void 0 ? void 0 : _e.map((property) => {
                             var _a;
                             return (_jsx(PointAddressGridItem, { label: "Lot / DP Numbers", value: (_a = property.parcelIds) === null || _a === void 0 ? void 0 : _a.join(', '), classNameSuffix: "cadastral-parcel" }, property.propertyPid));
                         })] }) })] }));

package/dist/form-elements/FormElementPointAddressV3.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementPointAddressV3.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointAddressV3.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, PointTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { Collapse } from '@mui/material'\nimport { NotificationGrid } from '../components/NotificationGrid'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport { PointAddressGridItem } from './FormElementPointAddress'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.PointAddressV3Element\n  value: PointTypes.PointAddressV3GetAddressDetailsResponse | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointAddressV3GetAddressDetailsResponse>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype AddressType = 'all' | 'physical' | 'mailing'\nconst pointAddressClass = 'ob-point-address-v3'\n\nfunction FormElementPointAddressV3({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isMounted = useIsMounted()\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n    React.useState(false)\n\n  const handleSearch = React.useCallback(\n    async (address: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n\n      const params: {\n        address: string\n        maxNumberOfResults?: number\n        stateFilter?: string\n        excludeAliases?: boolean\n        addressType?: AddressType\n        dataset?: string\n      } = {\n        address,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateFilter = element.stateTerritoryFilter.join(',')\n      }\n      if (element.addressTypeFilter) {\n        let addressType: AddressType = 'all'\n        if (element.addressTypeFilter.length === 1) {\n          addressType = element.addressTypeFilter[0] as AddressType\n        }\n        params.addressType = addressType\n      }\n      if (element.datasetFilter?.length) {\n        params.dataset = element.datasetFilter.join(',')\n      }\n      if (element.excludeAliases) {\n        params.excludeAliases = true\n      }\n\n      const { suggest } = await formService.searchPointV3Addresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return (suggest || []).map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [\n      element.addressTypeFilter,\n      element.datasetFilter,\n      element.excludeAliases,\n      element.stateTerritoryFilter,\n      formId,\n    ],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, { value: undefined })\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getPointV3Address(formId, {\n          addressId,\n        })\n        onChange(element, { value: result })\n      } catch (newError) {\n        if (isMounted.current) {\n          setError(newError as Error)\n        }\n      }\n      if (isMounted.current) {\n        setIsLoadingAddressDetails(false)\n      }\n    },\n    [isMounted, onChange, element, formId],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel =\n        value.properties?.formattedAddress || value.properties?.addressId\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // we don't need this to run again when the label changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-point-address-v3-element\">\n      <FormElementLabelContainer\n        className={`${pointAddressClass} ob-autocomplete`}\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={element.readOnly || isLoadingAddressDetails}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          isLoading={isLoadingAddressDetails}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-point-address-v3-details-error-message\"\n        />\n      )}\n\n      <Collapse in={!!value && !!element.isDisplayingAddressInformation}>\n        <NotificationGrid\n          className={`${pointAddressClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointAddressClass}__container`}\n        >\n          <PointAddressGridItem\n            label=\"Local Government Area\"\n            value={value?.properties?.localGovernmentArea?.lgaName}\n            classNameSuffix=\"local-government-area-name\"\n          />\n          <PointAddressGridItem\n            label=\"Lot / Section / Plan No.\"\n            value={value?.properties?.cadastralIdentifier}\n            classNameSuffix=\"cadastral-identifier\"\n          />\n          {value?.properties?.propertyBundle?.map((property) => (\n            <PointAddressGridItem\n              key={property.propertyPid}\n              label=\"Lot / DP Numbers\"\n              value={property.parcelIds?.join(', ')}\n              classNameSuffix=\"cadastral-parcel\"\n            />\n          ))}\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementPointAddressV3)\n"]}
+{"version":3,"file":"FormElementPointAddressV3.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointAddressV3.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, PointTypes } from '@oneblink/types'\nimport useIsMounted from '../hooks/useIsMounted'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { Collapse } from '@mui/material'\nimport { NotificationGrid } from '../components/NotificationGrid'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport { PointAddressGridItem } from './FormElementPointAddress'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.PointAddressV3Element\n  readOnly: boolean\n  value: PointTypes.PointAddressV3GetAddressDetailsResponse | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointAddressV3GetAddressDetailsResponse>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\ntype AddressType = 'all' | 'physical' | 'mailing'\nconst pointAddressClass = 'ob-point-address-v3'\n\nfunction FormElementPointAddressV3({\n  formId,\n  id,\n  element,\n  readOnly,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const isMounted = useIsMounted()\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n  const [isLoadingAddressDetails, setIsLoadingAddressDetails] =\n    React.useState(false)\n\n  const handleSearch = React.useCallback(\n    async (address: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n\n      const params: {\n        address: string\n        maxNumberOfResults?: number\n        stateFilter?: string\n        excludeAliases?: boolean\n        addressType?: AddressType\n        dataset?: string\n      } = {\n        address,\n        maxNumberOfResults: 10,\n      }\n\n      if (element.stateTerritoryFilter) {\n        params.stateFilter = element.stateTerritoryFilter.join(',')\n      }\n      if (element.addressTypeFilter) {\n        let addressType: AddressType = 'all'\n        if (element.addressTypeFilter.length === 1) {\n          addressType = element.addressTypeFilter[0] as AddressType\n        }\n        params.addressType = addressType\n      }\n      if (element.datasetFilter?.length) {\n        params.dataset = element.datasetFilter.join(',')\n      }\n      if (element.excludeAliases) {\n        params.excludeAliases = true\n      }\n\n      const { suggest } = await formService.searchPointV3Addresses(\n        formId,\n        params,\n        abortSignal,\n      )\n\n      return (suggest || []).map((suggestion, index) => ({\n        value: suggestion.id || index.toString(),\n        label: suggestion.address || index.toString(),\n      }))\n    },\n    [\n      element.addressTypeFilter,\n      element.datasetFilter,\n      element.excludeAliases,\n      element.stateTerritoryFilter,\n      formId,\n    ],\n  )\n\n  const handleChange = React.useCallback(\n    async (addressId: string | undefined) => {\n      if (!addressId) {\n        onChange(element, { value: undefined })\n        return\n      }\n\n      setIsLoadingAddressDetails(true)\n      try {\n        const result = await formService.getPointV3Address(formId, {\n          addressId,\n        })\n        onChange(element, { value: result })\n      } catch (newError) {\n        if (isMounted.current) {\n          setError(newError as Error)\n        }\n      }\n      if (isMounted.current) {\n        setIsLoadingAddressDetails(false)\n      }\n    },\n    [isMounted, onChange, element, formId],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel =\n        value.properties?.formattedAddress || value.properties?.addressId\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // we don't need this to run again when the label changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-point-address-v3-element\">\n      <FormElementLabelContainer\n        className={`${pointAddressClass} ob-autocomplete`}\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={readOnly || isLoadingAddressDetails}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          isLoading={isLoadingAddressDetails}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-point-address-v3-details-error-message\"\n        />\n      )}\n\n      <Collapse in={!!value && !!element.isDisplayingAddressInformation}>\n        <NotificationGrid\n          className={`${pointAddressClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointAddressClass}__container`}\n        >\n          <PointAddressGridItem\n            label=\"Local Government Area\"\n            value={value?.properties?.localGovernmentArea?.lgaName}\n            classNameSuffix=\"local-government-area-name\"\n          />\n          <PointAddressGridItem\n            label=\"Lot / Section / Plan No.\"\n            value={value?.properties?.cadastralIdentifier}\n            classNameSuffix=\"cadastral-identifier\"\n          />\n          {value?.properties?.propertyBundle?.map((property) => (\n            <PointAddressGridItem\n              key={property.propertyPid}\n              label=\"Lot / DP Numbers\"\n              value={property.parcelIds?.join(', ')}\n              classNameSuffix=\"cadastral-parcel\"\n            />\n          ))}\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementPointAddressV3)\n"]}

package/dist/form-elements/FormElementPointCadastralParcel.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { FormTypes, PointTypes } from '@oneblink/types';
 import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
-declare function FormElementPointCadastralParcel({ id, formId, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: {
+declare function FormElementPointCadastralParcel({ id, formId, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }: {
     id: string;
     formId: number;
     element: FormTypes.PointCadastralParcelElement;
+    readOnly: boolean;
     value: PointTypes.PointCadastralParcelResponse | undefined;
     onChange: FormElementValueChangeHandler<PointTypes.PointCadastralParcelResponse>;
     displayValidationMessage: boolean;

package/dist/form-elements/FormElementPointCadastralParcel.js

@@ -11,7 +11,7 @@ import { NotificationGrid, NotificationGridItem, } from '../components/Notificat
 import MaterialIcon from '../components/MaterialIcon';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 const pointCadastralParcelClass = 'ob-point-cadastral-parcel';
-function FormElementPointCadastralParcel({ id, formId, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementPointCadastralParcel({ id, formId, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, autocompleteAttributes, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const parcelId = (_b = (_a = value === null || value === void 0 ? void 0 : value.parcelBundle) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.parcelId;
@@ -76,7 +76,7 @@ function FormElementPointCadastralParcel({ id, formId, element, value, onChange,
         !isLoading) ||
         error) &&
         !isLookingUp;
-    const hasCopyButton = !!value && !!element.readOnly;
+    const hasCopyButton = !!value && !!readOnly;
     return (_jsxs("div", { className: "cypress-point-cadastral-parcel-element", children: [_jsxs(FormElementLabelContainer, { className: pointCadastralParcelClass, id: id, element: element, required: element.required, children: [_jsxs("div", { className: clsx('field has-addons', {
                             'no-addons-mobile': !hasCopyButton,
                         }), children: [_jsxs("div", { className: clsx('control is-expanded has-icons-right', {
@@ -89,7 +89,7 @@ function FormElementPointCadastralParcel({ id, formId, element, value, onChange,
                                                     value: undefined,
                                                 });
                                             }
-                                        }, required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), !isLoading && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: value ? (_jsx(MaterialIcon, { className: "is-size-5 has-text-success", children: "check" })) : (error === null || error === void 0 ? void 0 : error.message) ? (_jsx(MaterialIcon, { className: "is-size-5 has-text-danger", children: "error" })) : (_jsx(MaterialIcon, { className: "is-size-5", children: "map" })) }))] }), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }) }))] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))] }), _jsx(Collapse, { in: !!(value === null || value === void 0 ? void 0 : value.features), children: _jsxs(NotificationGrid, { className: `${pointCadastralParcelClass}__record-display has-margin-top-6`, gridClassName: `${pointCadastralParcelClass}__container`, children: [_jsx(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-address`, value: (_e = (_d = (_c = value === null || value === void 0 ? void 0 : value.features) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.formattedAddress, label: "Address", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` }), _jsx(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-lots`, value: (_l = (_k = (_j = (_h = (_g = (_f = value === null || value === void 0 ? void 0 : value.features) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.properties) === null || _h === void 0 ? void 0 : _h.propertyBundle) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.parcelIds) === null || _l === void 0 ? void 0 : _l.join(', '), label: "Lots", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` }), _jsx(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-local-government-area-name`, value: (_q = (_p = (_o = (_m = value === null || value === void 0 ? void 0 : value.features) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.properties) === null || _p === void 0 ? void 0 : _p.localGovernmentArea) === null || _q === void 0 ? void 0 : _q.lgaName, label: "Local Government Area", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` })] }) })] }));
+                                        }, required: element.required, disabled: readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), !isLoading && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: value ? (_jsx(MaterialIcon, { className: "is-size-5 has-text-success", children: "check" })) : (error === null || error === void 0 ? void 0 : error.message) ? (_jsx(MaterialIcon, { className: "is-size-5 has-text-danger", children: "error" })) : (_jsx(MaterialIcon, { className: "is-size-5", children: "map" })) }))] }), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }) }))] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))] }), _jsx(Collapse, { in: !!(value === null || value === void 0 ? void 0 : value.features), children: _jsxs(NotificationGrid, { className: `${pointCadastralParcelClass}__record-display has-margin-top-6`, gridClassName: `${pointCadastralParcelClass}__container`, children: [_jsx(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-address`, value: (_e = (_d = (_c = value === null || value === void 0 ? void 0 : value.features) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.properties) === null || _e === void 0 ? void 0 : _e.formattedAddress, label: "Address", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` }), _jsx(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-lots`, value: (_l = (_k = (_j = (_h = (_g = (_f = value === null || value === void 0 ? void 0 : value.features) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.properties) === null || _h === void 0 ? void 0 : _h.propertyBundle) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.parcelIds) === null || _l === void 0 ? void 0 : _l.join(', '), label: "Lots", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` }), _jsx(NotificationGridItem, { className: `${pointCadastralParcelClass}__container-local-government-area-name`, value: (_q = (_p = (_o = (_m = value === null || value === void 0 ? void 0 : value.features) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.properties) === null || _p === void 0 ? void 0 : _p.localGovernmentArea) === null || _q === void 0 ? void 0 : _q.lgaName, label: "Local Government Area", labelClassName: `${pointCadastralParcelClass}__detail-label`, valueClassName: `${pointCadastralParcelClass}__detail-value` })] }) })] }));
 }
 export default React.memo(FormElementPointCadastralParcel);
 //# sourceMappingURL=FormElementPointCadastralParcel.js.map

package/dist/form-elements/FormElementPointCadastralParcel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementPointCadastralParcel.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointCadastralParcel.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport { FormTypes, PointTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { formService } from '../apps'\nimport { Collapse } from '@mui/material'\nimport {\n  NotificationGrid,\n  NotificationGridItem,\n} from '../components/NotificationGrid'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nconst pointCadastralParcelClass = 'ob-point-cadastral-parcel'\n\nfunction FormElementPointCadastralParcel({\n  id,\n  formId,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: {\n  id: string\n  formId: number\n  element: FormTypes.PointCadastralParcelElement\n  value: PointTypes.PointCadastralParcelResponse | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointCadastralParcelResponse>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const parcelId = value?.parcelBundle?.[0]?.parcelId\n  const [label, setLabel] = React.useState(parcelId || '')\n  const [{ isLoading, error }, setState] = React.useState<{\n    isLoading: boolean\n    error: Error | null\n  }>({\n    isLoading: false,\n    error: null,\n  })\n\n  const loadCadastralParcel = React.useCallback(\n    async (abortSignal: AbortSignal) => {\n      if (!label || label === parcelId) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n        error: null,\n      })\n\n      try {\n        console.log('Attempting to load NSW point cadastral parcel', {\n          formId,\n          parcelId: label,\n        })\n        const result = await formService.getPointCadastralParcel(\n          formId,\n          label,\n          abortSignal,\n        )\n        if (!abortSignal.aborted) {\n          onChange(element, {\n            value: result,\n          })\n          setState({\n            error: null,\n            isLoading: false,\n          })\n        }\n      } catch (err) {\n        if (!abortSignal.aborted) {\n          setState({\n            isLoading: false,\n            error: err as Error,\n          })\n        }\n      }\n    },\n    [element, formId, label, onChange, parcelId],\n  )\n\n  React.useEffect(() => {\n    const abortController = new AbortController()\n    const timeoutId = setTimeout(() => {\n      loadCadastralParcel(abortController.signal)\n    }, 750)\n    return () => {\n      abortController.abort()\n      clearTimeout(timeoutId)\n    }\n  }, [loadCadastralParcel])\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (parcelId && label !== parcelId) {\n      setLabel(parcelId)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      error) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!element.readOnly\n  return (\n    <div className=\"cypress-point-cadastral-parcel-element\">\n      <FormElementLabelContainer\n        className={pointCadastralParcelClass}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded has-icons-right', {\n              'is-loading': isLoading,\n              'has-icons-right': !isLoading,\n            })}\n          >\n            <input\n              type=\"text\"\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-point-cadastral-parcel-control\"\n              placeholder={element.placeholderValue}\n              value={label}\n              onChange={(e) => {\n                setLabel(e.target.value)\n                if (value) {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n              }}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n            {!isLoading && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                {value ? (\n                  <MaterialIcon className=\"is-size-5 has-text-success\">\n                    check\n                  </MaterialIcon>\n                ) : error?.message ? (\n                  <MaterialIcon className=\"is-size-5 has-text-danger\">\n                    error\n                  </MaterialIcon>\n                ) : (\n                  <MaterialIcon className=\"is-size-5\">map</MaterialIcon>\n                )}\n              </span>\n            )}\n          </div>\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={label}\n              />\n            </div>\n          )}\n        </div>\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={error?.message || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n\n      <Collapse in={!!value?.features}>\n        <NotificationGrid\n          className={`${pointCadastralParcelClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointCadastralParcelClass}__container`}\n        >\n          <NotificationGridItem\n            className={`${pointCadastralParcelClass}__container-address`}\n            value={value?.features?.[0]?.properties?.formattedAddress}\n            label=\"Address\"\n            labelClassName={`${pointCadastralParcelClass}__detail-label`}\n            valueClassName={`${pointCadastralParcelClass}__detail-value`}\n          />\n          <NotificationGridItem\n            className={`${pointCadastralParcelClass}__container-lots`}\n            value={value?.features?.[0]?.properties?.propertyBundle?.[0]?.parcelIds?.join(\n              ', ',\n            )}\n            label=\"Lots\"\n            labelClassName={`${pointCadastralParcelClass}__detail-label`}\n            valueClassName={`${pointCadastralParcelClass}__detail-value`}\n          />\n          <NotificationGridItem\n            className={`${pointCadastralParcelClass}__container-local-government-area-name`}\n            value={\n              value?.features?.[0]?.properties?.localGovernmentArea?.lgaName\n            }\n            label=\"Local Government Area\"\n            labelClassName={`${pointCadastralParcelClass}__detail-label`}\n            valueClassName={`${pointCadastralParcelClass}__detail-value`}\n          />\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementPointCadastralParcel)\n"]}
+{"version":3,"file":"FormElementPointCadastralParcel.js","sourceRoot":"","sources":["../../src/form-elements/FormElementPointCadastralParcel.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport { FormTypes, PointTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { formService } from '../apps'\nimport { Collapse } from '@mui/material'\nimport {\n  NotificationGrid,\n  NotificationGridItem,\n} from '../components/NotificationGrid'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\nconst pointCadastralParcelClass = 'ob-point-cadastral-parcel'\n\nfunction FormElementPointCadastralParcel({\n  id,\n  formId,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: {\n  id: string\n  formId: number\n  element: FormTypes.PointCadastralParcelElement\n  readOnly: boolean\n  value: PointTypes.PointCadastralParcelResponse | undefined\n  onChange: FormElementValueChangeHandler<PointTypes.PointCadastralParcelResponse>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  autocompleteAttributes?: string\n} & IsDirtyProps) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const parcelId = value?.parcelBundle?.[0]?.parcelId\n  const [label, setLabel] = React.useState(parcelId || '')\n  const [{ isLoading, error }, setState] = React.useState<{\n    isLoading: boolean\n    error: Error | null\n  }>({\n    isLoading: false,\n    error: null,\n  })\n\n  const loadCadastralParcel = React.useCallback(\n    async (abortSignal: AbortSignal) => {\n      if (!label || label === parcelId) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n        error: null,\n      })\n\n      try {\n        console.log('Attempting to load NSW point cadastral parcel', {\n          formId,\n          parcelId: label,\n        })\n        const result = await formService.getPointCadastralParcel(\n          formId,\n          label,\n          abortSignal,\n        )\n        if (!abortSignal.aborted) {\n          onChange(element, {\n            value: result,\n          })\n          setState({\n            error: null,\n            isLoading: false,\n          })\n        }\n      } catch (err) {\n        if (!abortSignal.aborted) {\n          setState({\n            isLoading: false,\n            error: err as Error,\n          })\n        }\n      }\n    },\n    [element, formId, label, onChange, parcelId],\n  )\n\n  React.useEffect(() => {\n    const abortController = new AbortController()\n    const timeoutId = setTimeout(() => {\n      loadCadastralParcel(abortController.signal)\n    }, 750)\n    return () => {\n      abortController.abort()\n      clearTimeout(timeoutId)\n    }\n  }, [loadCadastralParcel])\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (parcelId && label !== parcelId) {\n      setLabel(parcelId)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      error) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!readOnly\n  return (\n    <div className=\"cypress-point-cadastral-parcel-element\">\n      <FormElementLabelContainer\n        className={pointCadastralParcelClass}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded has-icons-right', {\n              'is-loading': isLoading,\n              'has-icons-right': !isLoading,\n            })}\n          >\n            <input\n              type=\"text\"\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-point-cadastral-parcel-control\"\n              placeholder={element.placeholderValue}\n              value={label}\n              onChange={(e) => {\n                setLabel(e.target.value)\n                if (value) {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n              }}\n              required={element.required}\n              disabled={readOnly}\n              onBlur={setIsDirty}\n              aria-describedby={ariaDescribedby}\n              autoComplete={autocompleteAttributes}\n              aria-required={element.required}\n            />\n            {!isLoading && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                {value ? (\n                  <MaterialIcon className=\"is-size-5 has-text-success\">\n                    check\n                  </MaterialIcon>\n                ) : error?.message ? (\n                  <MaterialIcon className=\"is-size-5 has-text-danger\">\n                    error\n                  </MaterialIcon>\n                ) : (\n                  <MaterialIcon className=\"is-size-5\">map</MaterialIcon>\n                )}\n              </span>\n            )}\n          </div>\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={label}\n              />\n            </div>\n          )}\n        </div>\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage\n            message={error?.message || validationMessage}\n          />\n        )}\n      </FormElementLabelContainer>\n\n      <Collapse in={!!value?.features}>\n        <NotificationGrid\n          className={`${pointCadastralParcelClass}__record-display has-margin-top-6`}\n          gridClassName={`${pointCadastralParcelClass}__container`}\n        >\n          <NotificationGridItem\n            className={`${pointCadastralParcelClass}__container-address`}\n            value={value?.features?.[0]?.properties?.formattedAddress}\n            label=\"Address\"\n            labelClassName={`${pointCadastralParcelClass}__detail-label`}\n            valueClassName={`${pointCadastralParcelClass}__detail-value`}\n          />\n          <NotificationGridItem\n            className={`${pointCadastralParcelClass}__container-lots`}\n            value={value?.features?.[0]?.properties?.propertyBundle?.[0]?.parcelIds?.join(\n              ', ',\n            )}\n            label=\"Lots\"\n            labelClassName={`${pointCadastralParcelClass}__detail-label`}\n            valueClassName={`${pointCadastralParcelClass}__detail-value`}\n          />\n          <NotificationGridItem\n            className={`${pointCadastralParcelClass}__container-local-government-area-name`}\n            value={\n              value?.features?.[0]?.properties?.localGovernmentArea?.lgaName\n            }\n            label=\"Local Government Area\"\n            labelClassName={`${pointCadastralParcelClass}__detail-label`}\n            valueClassName={`${pointCadastralParcelClass}__detail-value`}\n          />\n        </NotificationGrid>\n      </Collapse>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementPointCadastralParcel)\n"]}

package/dist/form-elements/FormElementRadio.d.ts

@@ -4,6 +4,7 @@ import { FormElementValueChangeHandler, FormElementConditionallyShownElement, Is
 type Props = {
     id: string;
     element: FormTypes.RadioButtonElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
@@ -11,6 +12,6 @@ type Props = {
     conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
     onUpdateFormElements: UpdateFormElementsHandler;
 } & IsDirtyProps;
-declare function FormElementRadio({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, onUpdateFormElements, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementRadio({ id, element, readOnly, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, onUpdateFormElements, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementRadio>;
 export default _default;

package/dist/form-elements/FormElementRadio.js

@@ -9,7 +9,7 @@ import FormElementLabelContainer from '../components/renderer/FormElementLabelCo
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementRadio({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, onUpdateFormElements, isDirty, setIsDirty, }) {
+function FormElementRadio({ id, element, readOnly, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, onUpdateFormElements, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const filteredOptions = useFormElementOptions({
         element,
@@ -22,14 +22,14 @@ function FormElementRadio({ id, element, value, onChange, conditionallyShownOpti
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (_jsx("div", { className: "cypress-radio-element", children: _jsxs(FormElementLabelContainer, { className: "ob-radio", id: id, element: element, required: element.required, children: [_jsx(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement, children: !element.buttons ? (_jsx(RadioGroup, { className: "ob-radio-container", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, onBlur: setIsDirty, children: filteredOptions.map((option) => (_jsx("div", { className: "control", children: _jsxs("label", { className: "radio ob-radio__input-label cypress-radio-label", htmlFor: `${id}_${option.value}`, children: [_jsx(Radio, { color: "primary", className: "ob-radio__input cypress-radio-control", classes: {
                                             checked: 'ob-radio__input-checked',
-                                        }, value: option.value || '', id: `${id}_${option.value}`, disabled: element.readOnly, checked: value === option.value, onChange: (e) => {
+                                        }, value: option.value || '', id: `${id}_${option.value}`, disabled: readOnly, checked: value === option.value, onChange: (e) => {
                                             setIsDirty();
                                             onChange(element, {
                                                 value: e.target.value,
                                             });
                                         }, edge: "start" }), ` ${option.label}`] }) }, option.value))) })) : (_jsx("div", { className: "buttons ob-buttons ob-buttons-radio cypress-radio-button-group", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, children: filteredOptions.map((option, index) => {
                             const isSelected = value === option.value;
-                            return (_jsx("div", { className: "ob-button-radio-container", children: _jsx(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => {
+                            return (_jsx("div", { className: "ob-button-radio-container", children: _jsx(OptionButton, { readOnly: readOnly, option: option, isSelected: isSelected, onClick: () => {
                                         if (!isSelected) {
                                             setIsDirty();
                                             onChange(element, {

package/dist/form-elements/FormElementRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementRadio.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Radio, RadioGroup } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.RadioButtonElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementRadio({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-radio-element\">\n      <FormElementLabelContainer\n        className=\"ob-radio\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {!element.buttons ? (\n            <RadioGroup\n              className=\"ob-radio-container\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n              onBlur={setIsDirty}\n            >\n              {filteredOptions.map((option) => (\n                <div className=\"control\" key={option.value}>\n                  <label\n                    className=\"radio ob-radio__input-label cypress-radio-label\"\n                    htmlFor={`${id}_${option.value}`}\n                  >\n                    <Radio\n                      color=\"primary\"\n                      className=\"ob-radio__input cypress-radio-control\"\n                      classes={{\n                        checked: 'ob-radio__input-checked',\n                      }}\n                      value={option.value || ''}\n                      id={`${id}_${option.value}`}\n                      disabled={element.readOnly}\n                      checked={value === option.value}\n                      onChange={(e) => {\n                        setIsDirty()\n                        onChange(element, {\n                          value: e.target.value,\n                        })\n                      }}\n                      edge=\"start\"\n                    />\n                    {` ${option.label}`}\n                  </label>\n                </div>\n              ))}\n            </RadioGroup>\n          ) : (\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        if (!isSelected) {\n                          setIsDirty()\n                          onChange(element, {\n                            value: option.value,\n                          })\n                        }\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                      onBlur={() => {\n                        if (index === filteredOptions.length - 1) {\n                          setIsDirty()\n                        }\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementRadio)\n"]}
+{"version":3,"file":"FormElementRadio.js","sourceRoot":"","sources":["../../src/form-elements/FormElementRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Radio, RadioGroup } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.RadioButtonElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementRadio({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-radio-element\">\n      <FormElementLabelContainer\n        className=\"ob-radio\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {!element.buttons ? (\n            <RadioGroup\n              className=\"ob-radio-container\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n              onBlur={setIsDirty}\n            >\n              {filteredOptions.map((option) => (\n                <div className=\"control\" key={option.value}>\n                  <label\n                    className=\"radio ob-radio__input-label cypress-radio-label\"\n                    htmlFor={`${id}_${option.value}`}\n                  >\n                    <Radio\n                      color=\"primary\"\n                      className=\"ob-radio__input cypress-radio-control\"\n                      classes={{\n                        checked: 'ob-radio__input-checked',\n                      }}\n                      value={option.value || ''}\n                      id={`${id}_${option.value}`}\n                      disabled={readOnly}\n                      checked={value === option.value}\n                      onChange={(e) => {\n                        setIsDirty()\n                        onChange(element, {\n                          value: e.target.value,\n                        })\n                      }}\n                      edge=\"start\"\n                    />\n                    {` ${option.label}`}\n                  </label>\n                </div>\n              ))}\n            </RadioGroup>\n          ) : (\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      readOnly={readOnly}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        if (!isSelected) {\n                          setIsDirty()\n                          onChange(element, {\n                            value: option.value,\n                          })\n                        }\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                      onBlur={() => {\n                        if (index === filteredOptions.length - 1) {\n                          setIsDirty()\n                        }\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementRadio)\n"]}

package/dist/form-elements/FormElementRepeatableSet.d.ts

@@ -6,6 +6,18 @@ type Props = {
     id: string;
     isEven: boolean;
     element: FormTypes.RepeatableSetElement;
+    /**
+     * Whether this set’s own controls (add/remove entries) are locked.
+     * Includes audience lock, so an approver may be unable to add or remove
+     * entries even when a nested `ALL_STEPS` field is still editable.
+     */
+    readOnly: boolean;
+    /**
+     * Lock to apply to fields inside each entry. True when the whole form is
+     * read-only, a parent is read-only, or this element’s definition has
+     * `readOnly: true`. Does not include this set’s audience lock.
+     */
+    childrenReadOnly: boolean;
     value: Array<SubmissionTypes.S3SubmissionData['submission']> | undefined;
     onChange: NestedFormElementValueChangeHandler<SubmissionTypes.S3SubmissionData['submission'][]>;
     onLookup: FormElementLookupHandler;
@@ -16,6 +28,6 @@ type Props = {
     sectionState: SectionState;
 } & IsDirtyProps;
 export declare function useRepeatableSetIndexText(text: string): string;
-declare function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, isDirty, setIsDirty, sectionState, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementRepeatableSet({ formId, element, readOnly, childrenReadOnly, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, isDirty, setIsDirty, sectionState, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementRepeatableSet>;
 export default _default;

package/dist/form-elements/FormElementRepeatableSet.js

@@ -42,7 +42,7 @@ export function useRepeatableSetIndexText(text) {
     const index = React.useContext(RepeatableSetIndexContext);
     return React.useMemo(() => text.replace('{INDEX}', (index + 1).toString()), [index, text]);
 }
-function FormElementRepeatableSet({ formId, element, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, isDirty, setIsDirty, sectionState, }) {
+function FormElementRepeatableSet({ formId, element, readOnly, childrenReadOnly, value, formElementValidation, id, isEven, displayValidationMessage, formElementConditionallyShown, onChange, onLookup, onUpdateFormElements, isDirty, setIsDirty, sectionState, }) {
     const entries = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
     const handleAddEntry = React.useCallback((index) => {
         onChange(element, {
@@ -207,16 +207,16 @@ function FormElementRepeatableSet({ formId, element, value, formElementValidatio
                 return 'single-add-button';
         }
     }, [element.layout]);
-    return (_jsx("div", { className: clsx('cypress-repeatable-set-element', validationClassName), "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, role: "region", children: _jsxs(FormElementLabelContainer, { className: clsx('ob-repeatable-set', isEven ? 'even' : 'odd', repeatableSetContainerClass), element: element, id: id, required: !!minSetEntries && minSetEntries > 0, associateLabelWithInput: false, children: [element.layout === 'MULTIPLE_ADD_BUTTONS' && showAddButton && (_jsx(AddButton, { onAdd: () => handleAddEntry(0), element: element, classes: ['ob-button-repeatable-set-layout__multiple-add-buttons'], id: id })), entries.map((entry, index) => {
-                    return (_jsx(RepeatableSetEntry, { formId: formId, index: index, id: id, isEven: isEven, entry: entry, element: element, showAddButton: element.layout === 'MULTIPLE_ADD_BUTTONS' && showAddButton, onChange: handleNestedChange, onLookup: onLookup, onAdd: handleAddEntry, onRemove: handleRemoveEntry, formElementsConditionallyShown: repeatableSetEntriesConditionallyShown[index.toString()], formElementsValidation: repeatableSetValidation &&
+    return (_jsx("div", { className: clsx('cypress-repeatable-set-element', validationClassName), "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, role: "region", children: _jsxs(FormElementLabelContainer, { className: clsx('ob-repeatable-set', isEven ? 'even' : 'odd', repeatableSetContainerClass), element: element, id: id, required: !!minSetEntries && minSetEntries > 0, associateLabelWithInput: false, children: [element.layout === 'MULTIPLE_ADD_BUTTONS' && showAddButton && (_jsx(AddButton, { onAdd: () => handleAddEntry(0), element: element, readOnly: readOnly, classes: ['ob-button-repeatable-set-layout__multiple-add-buttons'], id: id })), entries.map((entry, index) => {
+                    return (_jsx(RepeatableSetEntry, { formId: formId, index: index, id: id, isEven: isEven, entry: entry, element: element, readOnly: readOnly, childrenReadOnly: childrenReadOnly, showAddButton: element.layout === 'MULTIPLE_ADD_BUTTONS' && showAddButton, onChange: handleNestedChange, onLookup: onLookup, onAdd: handleAddEntry, onRemove: handleRemoveEntry, formElementsConditionallyShown: repeatableSetEntriesConditionallyShown[index.toString()], formElementsValidation: repeatableSetValidation &&
                             repeatableSetValidation.entries[index.toString()], displayValidationMessages: displayValidationMessage, onUpdateFormElements: onUpdateFormElements, sectionState: sectionState }, entry[ENTRY_ID_PROPERTY_NAME]));
                 }), (!element.layout || element.layout === 'SINGLE_ADD_BUTTON') &&
-                    showAddButton && (_jsx(AddButton, { onAdd: () => handleAddEntry(entries.length), element: element, id: id })), (isDirty || displayValidationMessage) &&
+                    showAddButton && (_jsx(AddButton, { onAdd: () => handleAddEntry(entries.length), element: element, readOnly: readOnly, id: id })), (isDirty || displayValidationMessage) &&
                     !!repeatableSetValidation &&
                     !!repeatableSetValidation.set && (_jsx(FormElementValidationMessage, { message: repeatableSetValidation.set }))] }) }));
 }
 export default React.memo(FormElementRepeatableSet);
-const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id, index, isEven, entry, element, formElementsConditionallyShown, displayValidationMessages, formElementsValidation, onChange, onLookup, onAdd, onRemove, onUpdateFormElements, showAddButton, sectionState, }) {
+const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id, index, isEven, entry, element, readOnly, childrenReadOnly, formElementsConditionallyShown, displayValidationMessages, formElementsValidation, onChange, onLookup, onAdd, onRemove, onUpdateFormElements, showAddButton, sectionState, }) {
     const [isConfirmingRemove, confirmRemove, cancelRemove] = useBooleanState(false);
     const elementDOMId = React.useMemo(() => new ElementDOMId(id), [id]);
     const handleChange = React.useCallback((nestedElement, { value, executedLookups, sectionState }, idPrefix) => {
@@ -312,15 +312,15 @@ const RepeatableSetEntry = React.memo(function RepeatableSetEntry({ formId, id,
     return (_jsx(RepeatableSetEntryProvider, { index: index, element: element, idPrefix: idPrefix, onRemove: onRemove, isAnimated: element.layout === 'MULTIPLE_ADD_BUTTONS', children: ({ onRemove }) => (_jsxs(_Fragment, { children: [_jsx(Modal, { isOpen: isConfirmingRemove, className: "cypress-repeatable-set-prompt", titleClassName: "cypress-repeatable-set-remove-entry-header", title: element.removeSetEntryLabel || 'Remove Entry', actions: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "button ob-button is-light cypress-cancel-repeatable-set", onClick: cancelRemove, children: "Cancel" }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-confirm-repeatable-set", onClick: () => {
                                     cancelRemove();
                                     onRemove();
-                                }, autoFocus: true, children: "Yes" })] }), children: "Are you sure you want to remove this entry?" }), _jsxs("div", { className: clsx('ob-repeatable-set__container cypress-repeatable-set-container', validationClassName), children: [(!element.layout || element.layout === 'SINGLE_ADD_BUTTON') && (_jsx(RemoveButton, { onConfirmRemove: confirmRemove, element: element, className: "ob-repeatable-set__button-remove-top", index: index })), _jsx(OneBlinkFormElements, { formId: formId, idPrefix: idPrefix, isEven: isEven, formElementsValidation: formElementsValidation, displayValidationMessages: displayValidationMessages, elements: element.elements, onChange: handleChange, onLookup: handleLookup, model: entry, parentElement: element, formElementsConditionallyShown: formElementsConditionallyShown, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState }), element.layout === 'MULTIPLE_ADD_BUTTONS' && (_jsx(RemoveButton, { onConfirmRemove: confirmRemove, element: element, index: index, className: "ob-repeatable-set__button-remove-bottom" }))] }), showAddButton && (_jsx(AddButton, { onAdd: () => onAdd(index + 1), element: element, classes: [
+                                }, autoFocus: true, children: "Yes" })] }), children: "Are you sure you want to remove this entry?" }), _jsxs("div", { className: clsx('ob-repeatable-set__container cypress-repeatable-set-container', validationClassName), children: [(!element.layout || element.layout === 'SINGLE_ADD_BUTTON') && (_jsx(RemoveButton, { onConfirmRemove: confirmRemove, element: element, readOnly: readOnly, className: "ob-repeatable-set__button-remove-top", index: index })), _jsx(OneBlinkFormElements, { formId: formId, idPrefix: idPrefix, isEven: isEven, formElementsValidation: formElementsValidation, displayValidationMessages: displayValidationMessages, elements: element.elements, onChange: handleChange, onLookup: handleLookup, model: entry, parentElement: element, readOnly: childrenReadOnly, formElementsConditionallyShown: formElementsConditionallyShown, onUpdateFormElements: handleUpdateNestedFormElements, sectionState: sectionState }), element.layout === 'MULTIPLE_ADD_BUTTONS' && (_jsx(RemoveButton, { onConfirmRemove: confirmRemove, element: element, readOnly: readOnly, index: index, className: "ob-repeatable-set__button-remove-bottom" }))] }), showAddButton && (_jsx(AddButton, { onAdd: () => onAdd(index + 1), element: element, readOnly: readOnly, classes: [
                         'ob-button-repeatable-set-layout__multiple-add-buttons',
                     ] }))] })) }));
 });
-function AddButton({ id, onAdd, element, classes, }) {
-    return (_jsxs("button", { type: "button", className: clsx('button ob-button ob-button__add cypress-add-repeatable-set is-primary', classes), onClick: onAdd, disabled: element.readOnly, "aria-label": element.addSetEntryLabel ? undefined : 'Add Entry', id: id, children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "add" }) }), !!element.addSetEntryLabel && _jsx("span", { children: element.addSetEntryLabel })] }));
+function AddButton({ id, onAdd, element, readOnly, classes, }) {
+    return (_jsxs("button", { type: "button", className: clsx('button ob-button ob-button__add cypress-add-repeatable-set is-primary', classes), onClick: onAdd, disabled: readOnly, "aria-label": element.addSetEntryLabel ? undefined : 'Add Entry', id: id, children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "add" }) }), !!element.addSetEntryLabel && _jsx("span", { children: element.addSetEntryLabel })] }));
 }
-function RemoveButton({ onConfirmRemove, element, className, index, }) {
+function RemoveButton({ onConfirmRemove, element, readOnly, className, index, }) {
     var _a;
-    return (_jsxs("button", { type: "button", className: clsx('button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry', className), onClick: onConfirmRemove, disabled: element.readOnly, "aria-label": `${(_a = element.removeSetEntryLabel) !== null && _a !== void 0 ? _a : 'Remove Entry'} ${index + 1}`, children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "delete_outline" }) }), !!element.removeSetEntryLabel && (_jsx("span", { children: element.removeSetEntryLabel }))] }));
+    return (_jsxs("button", { type: "button", className: clsx('button ob-button ob-button_remove is-light cypress-remove-repeatable-set-entry', className), onClick: onConfirmRemove, disabled: readOnly, "aria-label": `${(_a = element.removeSetEntryLabel) !== null && _a !== void 0 ? _a : 'Remove Entry'} ${index + 1}`, children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "delete_outline" }) }), !!element.removeSetEntryLabel && (_jsx("span", { children: element.removeSetEntryLabel }))] }));
 }
 //# sourceMappingURL=FormElementRepeatableSet.js.map