npm - @oneblink/apps-react - Versions diffs - 10.2.0-beta.3 → 10.2.0-beta.4 - Mend

@oneblink/apps-react 10.2.0-beta.3 → 10.2.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist/components/renderer/AutocompleteDropdown.d.ts CHANGED Viewed

@@ -24,7 +24,8 @@ type Props<T> = {
     'aria-describedby'?: string;
     branding?: React.ReactNode;
     autoComplete?: string;
+    hideEndAdornment?: boolean;
 } & IsDirtyProps;
-declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, hideEndAdornment, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof AutocompleteDropdown;
 export default _default;

package/dist/components/renderer/AutocompleteDropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import { Sentry } from '../../apps';
@@ -6,7 +6,7 @@ import useBooleanState from '../../hooks/useBooleanState';
 import { LookupNotificationContext } from '../../hooks/useLookupNotification';
 import MaterialIcon from '../MaterialIcon';
 import FormElementValidationMessage from './FormElementValidationMessage';
-function AutocompleteDropdown({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, ...props }) {
+function AutocompleteDropdown({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, hideEndAdornment, ...props }) {
     const optionsContainerElement = React.useRef(null);
     const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] = React.useState(0);
     const [options, setOptions] = React.useState([]);
@@ -158,7 +158,7 @@ function AutocompleteDropdown({ id, label, value, placeholder, required, disable
                 }), children: [_jsx("div", { className: "field", children: _jsxs("div", { className: clsx('cypress-autocomplete-field-control control is-expanded', {
                                 'is-loading': isShowingLoading,
                                 'has-icons-right': isShowingValid || isShowingError,
-                            }), children: [_jsx("input", { type: "text", placeholder: placeholder, id: id, autoComplete: autoComplete !== null && autoComplete !== void 0 ? autoComplete : 'off', className: "cypress-autocomplete-control input ob-input", required: required, value: label, disabled: disabled, onFocus: onFocus, onBlur: () => handleBlur({ label, value }), onKeyDown: onKeyDown, onChange: handleChangeLabel, "aria-describedby": props['aria-describedby'], "aria-required": required }), isShowingValid && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5 has-text-success", children: "check" }) })), isShowingError && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5 has-text-danger", children: "error" }) }))] }) }), _jsx("div", { className: "dropdown-menu", children: _jsxs("div", { ref: optionsContainerElement, className: "ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content", children: [error ? (_jsx("a", { className: "dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error", children: _jsx("span", { className: "has-text-danger", children: error.message }) })) : label.length < searchMinCharacters ? (_jsx("a", { className: "dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters", children: _jsxs("i", { children: ["Enter at least ", searchMinCharacters, " character(s) to search"] }) })) : isShowingLoading ? (_jsx("a", { className: "dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching", children: _jsx("i", { children: "Searching..." }) })) : options && options.length ? (options.map((option, index) => (_jsx("a", { className: clsx(`dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`, {
+                            }), children: [_jsx("input", { type: "text", placeholder: placeholder, id: id, autoComplete: autoComplete !== null && autoComplete !== void 0 ? autoComplete : 'off', className: "cypress-autocomplete-control input ob-input", required: required, value: label, disabled: disabled, onFocus: onFocus, onBlur: () => handleBlur({ label, value }), onKeyDown: onKeyDown, onChange: handleChangeLabel, "aria-describedby": props['aria-describedby'], "aria-required": required }), !hideEndAdornment && (_jsxs(_Fragment, { children: [isShowingValid && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5 has-text-success", children: "check" }) })), isShowingError && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5 has-text-danger", children: "error" }) }))] }))] }) }), _jsx("div", { className: "dropdown-menu", children: _jsxs("div", { ref: optionsContainerElement, className: "ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content", children: [error ? (_jsx("a", { className: "dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error", children: _jsx("span", { className: "has-text-danger", children: error.message }) })) : label.length < searchMinCharacters ? (_jsx("a", { className: "dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters", children: _jsxs("i", { children: ["Enter at least ", searchMinCharacters, " character(s) to search"] }) })) : isShowingLoading ? (_jsx("a", { className: "dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching", children: _jsx("i", { children: "Searching..." }) })) : options && options.length ? (options.map((option, index) => (_jsx("a", { className: clsx(`dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`, {
                                         'is-active': currentFocusedOptionIndex === index,
                                     }), onMouseDown: (e) => handleClickOption(e, option),
                                     // eslint-disable-next-line react/no-danger

package/dist/components/renderer/AutocompleteDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../../src/components/renderer/AutocompleteDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Sentry } from '../../apps'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { IsDirtyProps } from '../../types/form'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport MaterialIcon from '../MaterialIcon'\nimport FormElementValidationMessage from './FormElementValidationMessage'\n\ntype AutocompleteOption<T> = {\n label: string\n value: string\n data?: T\n}\n\ntype Props<T> = {\n id: string\n label: string\n value: unknown \| undefined\n placeholder: string \| undefined\n required: boolean \| undefined\n disabled: boolean \| undefined\n isLoading?: boolean\n hasError?: boolean\n validationMessage: string \| undefined\n displayValidationMessage: boolean\n searchDebounceMs: number\n searchMinCharacters: number\n onChangeValue: (\n newValue: string \| undefined,\n data?: T,\n ) => Promise<void> \| void\n onChangeLabel: (newLabel: string) => void\n onSearch: (\n label: string,\n abortSignal: AbortSignal,\n ) => Promise<AutocompleteOption<T>[]>\n 'aria-describedby'?: string\n branding?: React.ReactNode\n autoComplete?: string\n} & IsDirtyProps\n\nfunction AutocompleteDropdown<T>({\n id,\n label,\n value,\n placeholder,\n required,\n disabled,\n validationMessage,\n displayValidationMessage,\n searchDebounceMs,\n searchMinCharacters,\n isLoading,\n hasError,\n onChangeValue,\n onChangeLabel,\n onSearch,\n isDirty,\n setIsDirty,\n branding,\n autoComplete,\n ...props\n}: Props<T>) {\n const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] =\n React.useState(0)\n const [options, setOptions] = React.useState<AutocompleteOption<T>[]>([])\n const [error, setError] = React.useState<Error \| null>(null)\n const [isFetchingOptions, setIsFetchingOptions] = React.useState(false)\n const [isOpen, onOpen, onClose] = useBooleanState(false)\n\n const onSelectOption = React.useCallback(\n (option: AutocompleteOption<T>) => {\n onChangeLabel(option.label)\n onChangeValue(option.value, option.data)\n onClose()\n },\n [onChangeLabel, onChangeValue, onClose],\n )\n\n const handleClickOption = React.useCallback(\n (\n event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n option: AutocompleteOption<T>,\n ) => {\n console.log('Selected element option in autocomplete', option)\n\n event.preventDefault()\n event.stopPropagation()\n\n onSelectOption(option)\n },\n [onSelectOption],\n )\n\n const onFocus = React.useCallback(() => {\n setCurrentFocusedOptionIndex(0)\n onOpen()\n }, [onOpen])\n\n // When moving away from the input, if this is no value remove\n // the label to show the user they have not selected a value\n const handleBlur = React.useCallback(\n (inputOption: { label: string; value: unknown \| undefined }) => {\n setIsDirty()\n setError(null)\n onClose()\n\n if (Array.isArray(options)) {\n // If there is a label that resembles an option, set that option to be the new value.\n // UNLESS it was the previously selected label. Else, clear the label and the value.\n if (inputOption.label) {\n const lowerCase = inputOption.label.toLowerCase()\n const option = options.find(\n (option) => option.label.toLowerCase() === lowerCase,\n )\n if (option) {\n // If the new option is not equal to the option that is currently selected,\n // we want to update to the new option to ensure that it gets changed.\n if (inputOption.value !== option.value) {\n console.log('Setting value after blurring away from autocomplete')\n onSelectOption(option)\n }\n return\n }\n }\n\n console.log('Removing label after blurring away from autocomplete')\n onChangeValue(undefined)\n onChangeLabel('')\n }\n },\n [\n onChangeLabel,\n onChangeValue,\n onClose,\n onSelectOption,\n options,\n setIsDirty,\n ],\n )\n\n const onKeyDown = React.useCallback<\n React.KeyboardEventHandler<HTMLInputElement>\n >(\n (event) => {\n if (!options) {\n return\n }\n const enterPressed = event.keyCode === 13\n const upArrowPressed = event.keyCode === 38\n const downArrowPressed = event.keyCode === 40\n if (!upArrowPressed && !downArrowPressed && !enterPressed) {\n return\n }\n\n event.preventDefault()\n\n const previousFocusedOptionIndex = currentFocusedOptionIndex\n let nextFocusedOptionIndex = currentFocusedOptionIndex\n if (upArrowPressed) {\n nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1)\n } else if (downArrowPressed) {\n nextFocusedOptionIndex = Math.min(\n options.length - 1,\n currentFocusedOptionIndex + 1,\n )\n } else if (enterPressed) {\n const option = options[nextFocusedOptionIndex]\n if (option) {\n onSelectOption(option)\n }\n }\n\n // If the index has changed, need to ensure the active option is visible\n if (\n previousFocusedOptionIndex !== nextFocusedOptionIndex &&\n optionsContainerElement.current\n ) {\n const activeStepElement = optionsContainerElement.current.querySelector(\n `.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`,\n )\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'start',\n })\n }\n setCurrentFocusedOptionIndex(nextFocusedOptionIndex)\n }\n },\n [currentFocusedOptionIndex, options, onSelectOption],\n )\n\n const handleChangeLabel = React.useCallback<\n React.ChangeEventHandler<HTMLInputElement>\n >(\n (e) => {\n const newLabel = e.target.value\n onOpen()\n setCurrentFocusedOptionIndex(0)\n\n onChangeLabel(newLabel)\n },\n [onChangeLabel, onOpen],\n )\n\n React.useEffect(() => {\n setError(null)\n\n if (!isOpen \|\| label.length < searchMinCharacters) {\n setIsFetchingOptions(false)\n return\n }\n\n setIsFetchingOptions(true)\n\n let ignore = false\n const abortController = new AbortController()\n\n const timeoutId = setTimeout(async () => {\n let newOptions: AutocompleteOption<T>[] = []\n let newError = null\n\n try {\n newOptions = await onSearch(label, abortController.signal)\n } catch (error) {\n // Cancelling will throw an error.\n if (!abortController.signal.aborted) {\n console.warn('Error while fetching autocomplete options', error)\n Sentry.captureException(error)\n newError = error as Error\n }\n }\n if (!ignore) {\n setError(newError)\n setOptions(newOptions)\n setIsFetchingOptions(false)\n }\n }, searchDebounceMs)\n\n return () => {\n ignore = true\n clearTimeout(timeoutId)\n abortController.abort()\n }\n }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])\n\n React.useEffect(() => {\n //If there is no value set, we want to clear the label\n //This is to satisfy lookups that return undefined.\n if (!value) {\n onChangeLabel('')\n }\n }, [onChangeLabel, value])\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n\n const isShowingLoading = isFetchingOptions \|\| !!isLoading\n const isShowingValid = !isShowingLoading && value !== undefined\n const isShowingError = !isShowingLoading && !isLookingUp && !!hasError\n\n return (\n <>\n <div\n className={clsx('dropdown', {\n 'is-active': isOpen && Array.isArray(options),\n })}\n >\n <div className=\"field\">\n <div\n className={clsx(\n 'cypress-autocomplete-field-control control is-expanded',\n {\n 'is-loading': isShowingLoading,\n 'has-icons-right': isShowingValid \|\| isShowingError,\n },\n )}\n >\n <input\n type=\"text\"\n placeholder={placeholder}\n id={id}\n autoComplete={autoComplete ?? 'off'}\n className=\"cypress-autocomplete-control input ob-input\"\n required={required}\n value={label}\n disabled={disabled}\n onFocus={onFocus}\n onBlur={() => handleBlur({ label, value })}\n onKeyDown={onKeyDown}\n onChange={handleChangeLabel}\n aria-describedby={props['aria-describedby']}\n aria-required={required}\n />\n {isShowingValid && (\n <span className=\" ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5 has-text-success\">\n check\n </MaterialIcon>\n </span>\n )}\n {isShowingError && (\n <span className=\" ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5 has-text-danger\">\n error\n </MaterialIcon>\n </span>\n )}\n </div>\n </div>\n\n <div className=\"dropdown-menu\">\n <div\n ref={optionsContainerElement}\n className=\"ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content\"\n >\n {error ? (\n <a className=\"dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error\">\n <span className=\"has-text-danger\">{error.message}</span>\n </a>\n ) : label.length < searchMinCharacters ? (\n <a className=\"dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters\">\n <i>\n Enter at least {searchMinCharacters} character(s) to search\n </i>\n </a>\n ) : isShowingLoading ? (\n <a className=\"dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching\">\n <i>Searching...</i>\n </a>\n ) : options && options.length ? (\n options.map((option, index) => (\n <a\n key={option.value}\n className={clsx(\n `dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`,\n {\n 'is-active': currentFocusedOptionIndex === index,\n },\n )}\n onMouseDown={(e) => handleClickOption(e, option)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: highlightLabel(option.label, label),\n }}\n />\n ))\n ) : (\n <a className=\"dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches\">\n <i>No matches found</i>\n </a>\n )}\n {branding}\n </div>\n </div>\n </div>\n\n {(isDirty \|\| displayValidationMessage) &&\n !!validationMessage &&\n !isShowingLoading && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </>\n )\n}\n\nexport default React.memo(AutocompleteDropdown) as typeof AutocompleteDropdown\n\nfunction highlightLabel(text: string, phrase: string) {\n if (phrase) {\n text = text.replace(\n new RegExp(\n '(' +\n phrase.replace(\n /[`~!@#$%^&*()_\|+\\-=?;:'\",.<>{}[\\]\\\\/]/gi,\n (char: string) => `\\\\${char}`,\n ) +\n ')',\n 'gi',\n ),\n '<b>$1</b>',\n )\n }\n\n return text\n}\n"]}
1	+ {"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../../src/components/renderer/AutocompleteDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Sentry } from '../../apps'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { IsDirtyProps } from '../../types/form'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport MaterialIcon from '../MaterialIcon'\nimport FormElementValidationMessage from './FormElementValidationMessage'\n\ntype AutocompleteOption<T> = {\n label: string\n value: string\n data?: T\n}\n\ntype Props<T> = {\n id: string\n label: string\n value: unknown \| undefined\n placeholder: string \| undefined\n required: boolean \| undefined\n disabled: boolean \| undefined\n isLoading?: boolean\n hasError?: boolean\n validationMessage: string \| undefined\n displayValidationMessage: boolean\n searchDebounceMs: number\n searchMinCharacters: number\n onChangeValue: (\n newValue: string \| undefined,\n data?: T,\n ) => Promise<void> \| void\n onChangeLabel: (newLabel: string) => void\n onSearch: (\n label: string,\n abortSignal: AbortSignal,\n ) => Promise<AutocompleteOption<T>[]>\n 'aria-describedby'?: string\n branding?: React.ReactNode\n autoComplete?: string\n hideEndAdornment?: boolean\n} & IsDirtyProps\n\nfunction AutocompleteDropdown<T>({\n id,\n label,\n value,\n placeholder,\n required,\n disabled,\n validationMessage,\n displayValidationMessage,\n searchDebounceMs,\n searchMinCharacters,\n isLoading,\n hasError,\n onChangeValue,\n onChangeLabel,\n onSearch,\n isDirty,\n setIsDirty,\n branding,\n autoComplete,\n hideEndAdornment,\n ...props\n}: Props<T>) {\n const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] =\n React.useState(0)\n const [options, setOptions] = React.useState<AutocompleteOption<T>[]>([])\n const [error, setError] = React.useState<Error \| null>(null)\n const [isFetchingOptions, setIsFetchingOptions] = React.useState(false)\n const [isOpen, onOpen, onClose] = useBooleanState(false)\n\n const onSelectOption = React.useCallback(\n (option: AutocompleteOption<T>) => {\n onChangeLabel(option.label)\n onChangeValue(option.value, option.data)\n onClose()\n },\n [onChangeLabel, onChangeValue, onClose],\n )\n\n const handleClickOption = React.useCallback(\n (\n event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n option: AutocompleteOption<T>,\n ) => {\n console.log('Selected element option in autocomplete', option)\n\n event.preventDefault()\n event.stopPropagation()\n\n onSelectOption(option)\n },\n [onSelectOption],\n )\n\n const onFocus = React.useCallback(() => {\n setCurrentFocusedOptionIndex(0)\n onOpen()\n }, [onOpen])\n\n // When moving away from the input, if this is no value remove\n // the label to show the user they have not selected a value\n const handleBlur = React.useCallback(\n (inputOption: { label: string; value: unknown \| undefined }) => {\n setIsDirty()\n setError(null)\n onClose()\n\n if (Array.isArray(options)) {\n // If there is a label that resembles an option, set that option to be the new value.\n // UNLESS it was the previously selected label. Else, clear the label and the value.\n if (inputOption.label) {\n const lowerCase = inputOption.label.toLowerCase()\n const option = options.find(\n (option) => option.label.toLowerCase() === lowerCase,\n )\n if (option) {\n // If the new option is not equal to the option that is currently selected,\n // we want to update to the new option to ensure that it gets changed.\n if (inputOption.value !== option.value) {\n console.log('Setting value after blurring away from autocomplete')\n onSelectOption(option)\n }\n return\n }\n }\n\n console.log('Removing label after blurring away from autocomplete')\n onChangeValue(undefined)\n onChangeLabel('')\n }\n },\n [\n onChangeLabel,\n onChangeValue,\n onClose,\n onSelectOption,\n options,\n setIsDirty,\n ],\n )\n\n const onKeyDown = React.useCallback<\n React.KeyboardEventHandler<HTMLInputElement>\n >(\n (event) => {\n if (!options) {\n return\n }\n const enterPressed = event.keyCode === 13\n const upArrowPressed = event.keyCode === 38\n const downArrowPressed = event.keyCode === 40\n if (!upArrowPressed && !downArrowPressed && !enterPressed) {\n return\n }\n\n event.preventDefault()\n\n const previousFocusedOptionIndex = currentFocusedOptionIndex\n let nextFocusedOptionIndex = currentFocusedOptionIndex\n if (upArrowPressed) {\n nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1)\n } else if (downArrowPressed) {\n nextFocusedOptionIndex = Math.min(\n options.length - 1,\n currentFocusedOptionIndex + 1,\n )\n } else if (enterPressed) {\n const option = options[nextFocusedOptionIndex]\n if (option) {\n onSelectOption(option)\n }\n }\n\n // If the index has changed, need to ensure the active option is visible\n if (\n previousFocusedOptionIndex !== nextFocusedOptionIndex &&\n optionsContainerElement.current\n ) {\n const activeStepElement = optionsContainerElement.current.querySelector(\n `.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`,\n )\n if (activeStepElement) {\n activeStepElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'start',\n })\n }\n setCurrentFocusedOptionIndex(nextFocusedOptionIndex)\n }\n },\n [currentFocusedOptionIndex, options, onSelectOption],\n )\n\n const handleChangeLabel = React.useCallback<\n React.ChangeEventHandler<HTMLInputElement>\n >(\n (e) => {\n const newLabel = e.target.value\n onOpen()\n setCurrentFocusedOptionIndex(0)\n\n onChangeLabel(newLabel)\n },\n [onChangeLabel, onOpen],\n )\n\n React.useEffect(() => {\n setError(null)\n\n if (!isOpen \|\| label.length < searchMinCharacters) {\n setIsFetchingOptions(false)\n return\n }\n\n setIsFetchingOptions(true)\n\n let ignore = false\n const abortController = new AbortController()\n\n const timeoutId = setTimeout(async () => {\n let newOptions: AutocompleteOption<T>[] = []\n let newError = null\n\n try {\n newOptions = await onSearch(label, abortController.signal)\n } catch (error) {\n // Cancelling will throw an error.\n if (!abortController.signal.aborted) {\n console.warn('Error while fetching autocomplete options', error)\n Sentry.captureException(error)\n newError = error as Error\n }\n }\n if (!ignore) {\n setError(newError)\n setOptions(newOptions)\n setIsFetchingOptions(false)\n }\n }, searchDebounceMs)\n\n return () => {\n ignore = true\n clearTimeout(timeoutId)\n abortController.abort()\n }\n }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])\n\n React.useEffect(() => {\n //If there is no value set, we want to clear the label\n //This is to satisfy lookups that return undefined.\n if (!value) {\n onChangeLabel('')\n }\n }, [onChangeLabel, value])\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n\n const isShowingLoading = isFetchingOptions \|\| !!isLoading\n const isShowingValid = !isShowingLoading && value !== undefined\n const isShowingError = !isShowingLoading && !isLookingUp && !!hasError\n\n return (\n <>\n <div\n className={clsx('dropdown', {\n 'is-active': isOpen && Array.isArray(options),\n })}\n >\n <div className=\"field\">\n <div\n className={clsx(\n 'cypress-autocomplete-field-control control is-expanded',\n {\n 'is-loading': isShowingLoading,\n 'has-icons-right': isShowingValid \|\| isShowingError,\n },\n )}\n >\n <input\n type=\"text\"\n placeholder={placeholder}\n id={id}\n autoComplete={autoComplete ?? 'off'}\n className=\"cypress-autocomplete-control input ob-input\"\n required={required}\n value={label}\n disabled={disabled}\n onFocus={onFocus}\n onBlur={() => handleBlur({ label, value })}\n onKeyDown={onKeyDown}\n onChange={handleChangeLabel}\n aria-describedby={props['aria-describedby']}\n aria-required={required}\n />\n {!hideEndAdornment && (\n <>\n {isShowingValid && (\n <span className=\" ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5 has-text-success\">\n check\n </MaterialIcon>\n </span>\n )}\n {isShowingError && (\n <span className=\" ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5 has-text-danger\">\n error\n </MaterialIcon>\n </span>\n )}\n </>\n )}\n </div>\n </div>\n\n <div className=\"dropdown-menu\">\n <div\n ref={optionsContainerElement}\n className=\"ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content\"\n >\n {error ? (\n <a className=\"dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error\">\n <span className=\"has-text-danger\">{error.message}</span>\n </a>\n ) : label.length < searchMinCharacters ? (\n <a className=\"dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters\">\n <i>\n Enter at least {searchMinCharacters} character(s) to search\n </i>\n </a>\n ) : isShowingLoading ? (\n <a className=\"dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching\">\n <i>Searching...</i>\n </a>\n ) : options && options.length ? (\n options.map((option, index) => (\n <a\n key={option.value}\n className={clsx(\n `dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`,\n {\n 'is-active': currentFocusedOptionIndex === index,\n },\n )}\n onMouseDown={(e) => handleClickOption(e, option)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: highlightLabel(option.label, label),\n }}\n />\n ))\n ) : (\n <a className=\"dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches\">\n <i>No matches found</i>\n </a>\n )}\n {branding}\n </div>\n </div>\n </div>\n\n {(isDirty \|\| displayValidationMessage) &&\n !!validationMessage &&\n !isShowingLoading && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </>\n )\n}\n\nexport default React.memo(AutocompleteDropdown) as typeof AutocompleteDropdown\n\nfunction highlightLabel(text: string, phrase: string) {\n if (phrase) {\n text = text.replace(\n new RegExp(\n '(' +\n phrase.replace(\n /[`~!@#$%^&*()_\|+\\-=?;:'\",.<>{}[\\]\\\\/]/gi,\n (char: string) => `\\\\${char}`,\n ) +\n ')',\n 'gi',\n ),\n '<b>$1</b>',\n )\n }\n\n return text\n}\n"]}

package/dist/components/renderer/LookupButton.d.ts CHANGED Viewed

@@ -6,8 +6,7 @@ type Props = {
     hasMarginTop?: boolean;
     isInputButton?: boolean;
     lookupButtonConfig?: EnvironmentTypes.ButtonConfiguration;
-    overrideRequiredMessage: string | undefined;
 };
-declare function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, lookupButtonConfig, overrideRequiredMessage, }: Props): import("react/jsx-runtime").JSX.Element | null;
+declare function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, lookupButtonConfig, }: Props): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: React.MemoExoticComponent<typeof LookupButton>;
 export default _default;

package/dist/components/renderer/LookupButton.js CHANGED Viewed

@@ -5,7 +5,7 @@ import useLookupNotification from '../../hooks/useLookupNotification';
 import { generateLookupValidationMessage } from '../../services/form-validation/validators';
 import useFormIsReadOnly from '../../hooks/useFormIsReadOnly';
 import MaterialIcon from '../MaterialIcon';
-function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, lookupButtonConfig, overrideRequiredMessage, }) {
+function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, lookupButtonConfig, }) {
     var _a, _b;
     const { isLookup, onLookup, isDisabled, isLoading, allowLookupOnEmptyValue } = useLookupNotification(value);
     const formIsReadOnly = useFormIsReadOnly();
@@ -25,7 +25,7 @@ function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, l
             (!isEmptyValue &&
                 !!validationMessage &&
                 validationMessage !==
-                    generateLookupValidationMessage(lookupButtonConfig, overrideRequiredMessage)), children: [isInputButton && _jsx("span", {}), _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: (_a = lookupButtonConfig === null || lookupButtonConfig === void 0 ? void 0 : lookupButtonConfig.icon) !== null && _a !== void 0 ? _a : 'search' }) }), _jsxs("span", { className: isInputButton ? 'is-hidden-mobile' : undefined, children: ["\u00A0", (_b = lookupButtonConfig === null || lookupButtonConfig === void 0 ? void 0 : lookupButtonConfig.label) !== null && _b !== void 0 ? _b : 'Lookup'] })] }));
+                    generateLookupValidationMessage(lookupButtonConfig)), children: [isInputButton && _jsx("span", {}), _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: (_a = lookupButtonConfig === null || lookupButtonConfig === void 0 ? void 0 : lookupButtonConfig.icon) !== null && _a !== void 0 ? _a : 'search' }) }), _jsxs("span", { className: isInputButton ? 'is-hidden-mobile' : undefined, children: ["\u00A0", (_b = lookupButtonConfig === null || lookupButtonConfig === void 0 ? void 0 : lookupButtonConfig.label) !== null && _b !== void 0 ? _b : 'Lookup'] })] }));
     if (isInputButton) {
         return _jsx("div", { className: "control", children: button });
     }

package/dist/components/renderer/LookupButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LookupButton.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAA;AAC3F,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAE7D,OAAO,YAAY,MAAM,iBAAiB,CAAA;~~AAW1C~~,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,kBAAkB,~~EAClB,uBAAuB,GACjB~~;;IACN,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAC1E,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAA;IAE1D,MAAM,MAAM,GAAG,CACb,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D;YACE,YAAY,EAAE,SAAS;YACvB,gBAAgB,EAAE,aAAa;YAC/B,WAAW,EAAE,CAAC,aAAa;YAC3B,kBAAkB,EAAE,YAAY;SACjC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EACzB,QAAQ,EACN,cAAc;YACd,UAAU;YACV,SAAS;YACT,CAAC,YAAY,IAAI,CAAC,uBAAuB,CAAC;YAC1C,CAAC,CAAC,YAAY;gBACZ,CAAC,CAAC,iBAAiB;gBACnB,iBAAiB;oBACf,+BAA+B,~~CAC7B~~,kBAAkB,~~EAClB~~,~~uBAAuB,CACxB,~~CAAC,~~aAGP~~,aAAa,IAAI,gBAAa,EAC/B,eAAM,SAAS,EAAC,MAAM,YACpB,KAAC,YAAY,cAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,mCAAI,QAAQ,GAAgB,GAC9D,EACP,gBAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,uBACtD,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,mCAAI,QAAQ,IACvC,IACA,CACV,CAAA;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,cAAK,SAAS,EAAC,SAAS,YAAE,MAAM,GAAO,CAAA;IAChD,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useLookupNotification from '../../hooks/useLookupNotification'\nimport { generateLookupValidationMessage } from '../../services/form-validation/validators'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { EnvironmentTypes } from '@oneblink/types'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n value: unknown \| undefined\n validationMessage: string \| undefined\n hasMarginTop?: boolean\n isInputButton?: boolean\n lookupButtonConfig?: EnvironmentTypes.ButtonConfiguration\n ~~overrideRequiredMessage: string \| undefined\n~~}\n\nfunction LookupButton({\n value,\n validationMessage,\n hasMarginTop,\n isInputButton,\n lookupButtonConfig,\n ~~overrideRequiredMessage,\n~~}: Props) {\n const { isLookup, onLookup, isDisabled, isLoading, allowLookupOnEmptyValue } =\n useLookupNotification(value)\n const formIsReadOnly = useFormIsReadOnly()\n if (!isLookup) {\n return null\n }\n\n const isEmptyValue = value === undefined \|\| value === null\n\n const button = (\n <button\n type=\"button\"\n className={clsx(\n 'button is-primary ob-lookup__button cypress-lookup-button',\n {\n 'is-loading': isLoading,\n 'is-input-addon': isInputButton,\n 'ob-button': !isInputButton,\n 'has-margin-top-8': hasMarginTop,\n },\n )}\n onClick={() => onLookup()}\n disabled={\n formIsReadOnly \|\|\n isDisabled \|\|\n isLoading \|\|\n (isEmptyValue && !allowLookupOnEmptyValue) \|\|\n (!isEmptyValue &&\n !!validationMessage &&\n validationMessage !==\n generateLookupValidationMessage(\n lookupButtonConfig~~,\n overrideRequiredMessage,\n~~ ))\n }\n >\n {isInputButton && <span></span>}\n <span className=\"icon\">\n <MaterialIcon>{lookupButtonConfig?.icon ?? 'search'}</MaterialIcon>\n </span>\n <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n  {lookupButtonConfig?.label ?? 'Lookup'}\n </span>\n </button>\n )\n\n if (isInputButton) {\n return <div className=\"control\">{button}</div>\n }\n\n return button\n}\n\nexport default React.memo(LookupButton)\n"]}
1	+ {"version":3,"file":"LookupButton.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAA;AAC3F,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAE7D,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,kBAAkB,GACZ;;IACN,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAC1E,qBAAqB,CAAC,KAAK,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAA;IAE1D,MAAM,MAAM,GAAG,CACb,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D;YACE,YAAY,EAAE,SAAS;YACvB,gBAAgB,EAAE,aAAa;YAC/B,WAAW,EAAE,CAAC,aAAa;YAC3B,kBAAkB,EAAE,YAAY;SACjC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EACzB,QAAQ,EACN,cAAc;YACd,UAAU;YACV,SAAS;YACT,CAAC,YAAY,IAAI,CAAC,uBAAuB,CAAC;YAC1C,CAAC,CAAC,YAAY;gBACZ,CAAC,CAAC,iBAAiB;gBACnB,iBAAiB;oBACf,+BAA+B,CAAC,kBAAkB,CAAC,CAAC,aAGzD,aAAa,IAAI,gBAAa,EAC/B,eAAM,SAAS,EAAC,MAAM,YACpB,KAAC,YAAY,cAAE,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,IAAI,mCAAI,QAAQ,GAAgB,GAC9D,EACP,gBAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,uBACtD,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,KAAK,mCAAI,QAAQ,IACvC,IACA,CACV,CAAA;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,cAAK,SAAS,EAAC,SAAS,YAAE,MAAM,GAAO,CAAA;IAChD,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useLookupNotification from '../../hooks/useLookupNotification'\nimport { generateLookupValidationMessage } from '../../services/form-validation/validators'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { EnvironmentTypes } from '@oneblink/types'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n value: unknown \| undefined\n validationMessage: string \| undefined\n hasMarginTop?: boolean\n isInputButton?: boolean\n lookupButtonConfig?: EnvironmentTypes.ButtonConfiguration\n}\n\nfunction LookupButton({\n value,\n validationMessage,\n hasMarginTop,\n isInputButton,\n lookupButtonConfig,\n}: Props) {\n const { isLookup, onLookup, isDisabled, isLoading, allowLookupOnEmptyValue } =\n useLookupNotification(value)\n const formIsReadOnly = useFormIsReadOnly()\n if (!isLookup) {\n return null\n }\n\n const isEmptyValue = value === undefined \|\| value === null\n\n const button = (\n <button\n type=\"button\"\n className={clsx(\n 'button is-primary ob-lookup__button cypress-lookup-button',\n {\n 'is-loading': isLoading,\n 'is-input-addon': isInputButton,\n 'ob-button': !isInputButton,\n 'has-margin-top-8': hasMarginTop,\n },\n )}\n onClick={() => onLookup()}\n disabled={\n formIsReadOnly \|\|\n isDisabled \|\|\n isLoading \|\|\n (isEmptyValue && !allowLookupOnEmptyValue) \|\|\n (!isEmptyValue &&\n !!validationMessage &&\n validationMessage !==\n generateLookupValidationMessage(lookupButtonConfig))\n }\n >\n {isInputButton && <span></span>}\n <span className=\"icon\">\n <MaterialIcon>{lookupButtonConfig?.icon ?? 'search'}</MaterialIcon>\n </span>\n <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n  {lookupButtonConfig?.label ?? 'Lookup'}\n </span>\n </button>\n )\n\n if (isInputButton) {\n return <div className=\"control\">{button}</div>\n }\n\n return button\n}\n\nexport default React.memo(LookupButton)\n"]}

package/dist/form-elements/FormElementABN.js CHANGED Viewed

@@ -67,8 +67,7 @@ function FormElementABN({ id, element, value, onChange, validationMessage, displ
                     });
                 });
                 if (result.ABRPayloadSearchResults.response.exception) {
-                    throw new Error(result.ABRPayloadSearchResults.response.exception
-                        .exceptionDescription);
+                    throw new Error(result.ABRPayloadSearchResults.response.exception.exceptionDescription);
                 }
                 if (result.ABRPayloadSearchResults.response.businessEntity201408) {
                     result.ABRPayloadSearchResults.response.businessEntity202001 =
@@ -153,7 +152,7 @@ function FormElementABN({ id, element, value, onChange, validationMessage, displ
                                 }, required: element.required, disabled: element.readOnly, onBlur: () => {
                                     setIsDirty();
                                     removeFocus();
-                                }, onFocus: setIsFocused, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))] }) }));
+                                }, onFocus: setIsFocused, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] }), value && (_jsx(ABNDisplay, { abnRecord: value, className: "ob-abn__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: (error === null || error === void 0 ? void 0 : error.message) || validationMessage }))] }) }));
 }
 export default React.memo(FormElementABN);
 const ABNDisplay = ({ abnRecord, className, }) => {

package/dist/form-elements/FormElementABN.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementABN.js","sourceRoot":"","sources":["../../src/form-elements/FormElementABN.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { InputMask } from '@react-input/mask'\nimport { parseString } from 'xml2js'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid'\nimport { abnService } from '@oneblink/sdk-core'\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.ABNElement\n value: MiscTypes.ABNRecord \| undefined\n onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementABN({\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 abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid()\n const [label, setLabel] = React.useState(\n value ? abnService.getABNNumberFromABNRecord(value) \|\| '' : '',\n )\n const [isFocused, setIsFocused, removeFocus] = useBooleanState(false)\n const [{ isLoading, error }, setState] = React.useState<{\n isLoading: boolean\n error: Error \| null\n }>({\n isLoading: false,\n error: null,\n })\n\n React.useEffect(() => {\n const searchString = label.replace(/[^\\d]/g, '')\n const isSearchStringValid =\n searchString.length === 11 \|\| (searchString.length === 9 && !isFocused)\n\n const currentABNNumber = value\n ? abnService.getABNNumberFromABNRecord(value)\n : ''\n if (!isSearchStringValid \|\| currentABNNumber === searchString) {\n return\n }\n\n setState({\n isLoading: true,\n error: null,\n })\n\n const abortController = new AbortController()\n const fetchRecord = async () => {\n try {\n const urlSearchParams = new URLSearchParams()\n urlSearchParams.append('searchString', searchString)\n urlSearchParams.append('includeHistoricalDetails', 'N')\n if (abnLookupAuthenticationGuid) {\n urlSearchParams.append(\n 'authenticationGuid',\n abnLookupAuthenticationGuid,\n )\n }\n\n const url =\n searchString.length === 11\n ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'\n : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408'\n const response = await fetch(`${url}?${urlSearchParams.toString()}`, {\n mode: 'cors',\n signal: abortController.signal,\n })\n const text = await response.text()\n if (!response.ok) {\n throw new Error(text)\n }\n\n const result = await new Promise<{\n ABRPayloadSearchResults: {\n response: {\n businessEntity201408?: MiscTypes.ABNRecord\n businessEntity202001: MiscTypes.ABNRecord\n exception?: {\n exceptionDescription: string\n exceptionCode: string\n }\n }\n }\n }>((resolve, reject) => {\n parseString(\n text,\n {\n explicitArray: false,\n },\n (err, result) => {\n if (err) {\n reject(err)\n } else {\n resolve(result)\n }\n },\n )\n })\n if (result.ABRPayloadSearchResults.response.exception) {\n throw new Error(\n result.ABRPayloadSearchResults.response.exception\n .exceptionDescription,\n )\n }\n\n if (result.ABRPayloadSearchResults.response.businessEntity201408) {\n result.ABRPayloadSearchResults.response.businessEntity202001 =\n result.ABRPayloadSearchResults.response.businessEntity201408\n }\n\n if (\n !Array.isArray(\n result.ABRPayloadSearchResults.response.businessEntity202001\n .businessName,\n )\n ) {\n result.ABRPayloadSearchResults.response.businessEntity202001.businessName =\n [\n result.ABRPayloadSearchResults.response.businessEntity202001\n .businessName,\n ]\n }\n\n if (!abortController.signal.aborted) {\n onChange(element, {\n value: result.ABRPayloadSearchResults.response.businessEntity202001,\n })\n setState({\n isLoading: false,\n error: null,\n })\n }\n } catch (err) {\n if (!abortController.signal.aborted) {\n setState({\n isLoading: false,\n error: err as Error,\n })\n }\n }\n }\n\n fetchRecord()\n\n return () => {\n abortController.abort()\n }\n }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value])\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 = abnService.getABNNumberFromABNRecord(value)\n if (!newLabel) {\n // Record in value had no ABN Number. This should never happen\n return\n }\n if (label !== newLabel) {\n setLabel(\n newLabel.split('').reduce((memo, character, index) => {\n switch (index) {\n case 2:\n case 5:\n case 8: {\n return `${memo} ${character}`\n }\n default: {\n return `${memo}${character}`\n }\n }\n }, ''),\n )\n }\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 const hasLookupButton = element.isDataLookup \|\| element.isElementLookup\n return (\n <div className=\"cypress-abn-element\">\n <FormElementLabelContainer\n className=\"ob-abn\"\n id={id}\n element={element}\n required={element.required}\n >\n <div\n className={clsx('field has-addons', {\n 'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n })}\n >\n <div\n className={clsx('control is-expanded', {\n 'is-loading': isLoading,\n })}\n >\n <InputMask\n mask={isFocused \|\| value ? 'dd ddd ddd ddd' : 'ddd ddd ddd'}\n replacement={{ d: /\\d/ }}\n type=\"text\"\n id={id}\n name={element.name}\n className=\"input ob-input cypress-abn-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={() => {\n setIsDirty()\n removeFocus()\n }}\n onFocus={setIsFocused}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n </div>\n {value && (\n <ABNDisplay abnRecord={value} className=\"ob-abn__display-desktop\" />\n )}\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 <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </div>\n {value && (\n <ABNDisplay abnRecord={value} className=\"ob-abn__display-mobile\" />\n )}\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage\n message={error?.message \|\| validationMessage}\n />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementABN)\n\nconst ABNDisplay = ({\n abnRecord,\n className,\n}: {\n abnRecord: MiscTypes.ABNRecord\n className: string\n}) => {\n return (\n <div className={`control ob-abn__record-control ${className}`}>\n <a className=\"button is-static ob-abn__record-button\">\n {abnService.displayBusinessNameFromABNRecord(abnRecord)}\n </a>\n </div>\n )\n}\n"]}
1	+ {"version":3,"file":"FormElementABN.js","sourceRoot":"","sources":["../../src/form-elements/FormElementABN.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { InputMask } from '@react-input/mask'\nimport { parseString } from 'xml2js'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid'\nimport { abnService } from '@oneblink/sdk-core'\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.ABNElement\n value: MiscTypes.ABNRecord \| undefined\n onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementABN({\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 abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid()\n const [label, setLabel] = React.useState(\n value ? abnService.getABNNumberFromABNRecord(value) \|\| '' : '',\n )\n const [isFocused, setIsFocused, removeFocus] = useBooleanState(false)\n const [{ isLoading, error }, setState] = React.useState<{\n isLoading: boolean\n error: Error \| null\n }>({\n isLoading: false,\n error: null,\n })\n\n React.useEffect(() => {\n const searchString = label.replace(/[^\\d]/g, '')\n const isSearchStringValid =\n searchString.length === 11 \|\| (searchString.length === 9 && !isFocused)\n\n const currentABNNumber = value\n ? abnService.getABNNumberFromABNRecord(value)\n : ''\n if (!isSearchStringValid \|\| currentABNNumber === searchString) {\n return\n }\n\n setState({\n isLoading: true,\n error: null,\n })\n\n const abortController = new AbortController()\n const fetchRecord = async () => {\n try {\n const urlSearchParams = new URLSearchParams()\n urlSearchParams.append('searchString', searchString)\n urlSearchParams.append('includeHistoricalDetails', 'N')\n if (abnLookupAuthenticationGuid) {\n urlSearchParams.append(\n 'authenticationGuid',\n abnLookupAuthenticationGuid,\n )\n }\n\n const url =\n searchString.length === 11\n ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'\n : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408'\n const response = await fetch(`${url}?${urlSearchParams.toString()}`, {\n mode: 'cors',\n signal: abortController.signal,\n })\n const text = await response.text()\n if (!response.ok) {\n throw new Error(text)\n }\n\n const result = await new Promise<{\n ABRPayloadSearchResults: {\n response: {\n businessEntity201408?: MiscTypes.ABNRecord\n businessEntity202001: MiscTypes.ABNRecord\n exception?: {\n exceptionDescription: string\n exceptionCode: string\n }\n }\n }\n }>((resolve, reject) => {\n parseString(\n text,\n {\n explicitArray: false,\n },\n (err, result) => {\n if (err) {\n reject(err)\n } else {\n resolve(result)\n }\n },\n )\n })\n if (result.ABRPayloadSearchResults.response.exception) {\n throw new Error(\n result.ABRPayloadSearchResults.response.exception.exceptionDescription,\n )\n }\n\n if (result.ABRPayloadSearchResults.response.businessEntity201408) {\n result.ABRPayloadSearchResults.response.businessEntity202001 =\n result.ABRPayloadSearchResults.response.businessEntity201408\n }\n\n if (\n !Array.isArray(\n result.ABRPayloadSearchResults.response.businessEntity202001\n .businessName,\n )\n ) {\n result.ABRPayloadSearchResults.response.businessEntity202001.businessName =\n [\n result.ABRPayloadSearchResults.response.businessEntity202001\n .businessName,\n ]\n }\n\n if (!abortController.signal.aborted) {\n onChange(element, {\n value: result.ABRPayloadSearchResults.response.businessEntity202001,\n })\n setState({\n isLoading: false,\n error: null,\n })\n }\n } catch (err) {\n if (!abortController.signal.aborted) {\n setState({\n isLoading: false,\n error: err as Error,\n })\n }\n }\n }\n\n fetchRecord()\n\n return () => {\n abortController.abort()\n }\n }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value])\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 = abnService.getABNNumberFromABNRecord(value)\n if (!newLabel) {\n // Record in value had no ABN Number. This should never happen\n return\n }\n if (label !== newLabel) {\n setLabel(\n newLabel.split('').reduce((memo, character, index) => {\n switch (index) {\n case 2:\n case 5:\n case 8: {\n return `${memo} ${character}`\n }\n default: {\n return `${memo}${character}`\n }\n }\n }, ''),\n )\n }\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 const hasLookupButton = element.isDataLookup \|\| element.isElementLookup\n return (\n <div className=\"cypress-abn-element\">\n <FormElementLabelContainer\n className=\"ob-abn\"\n id={id}\n element={element}\n required={element.required}\n >\n <div\n className={clsx('field has-addons', {\n 'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n })}\n >\n <div\n className={clsx('control is-expanded', {\n 'is-loading': isLoading,\n })}\n >\n <InputMask\n mask={isFocused \|\| value ? 'dd ddd ddd ddd' : 'ddd ddd ddd'}\n replacement={{ d: /\\d/ }}\n type=\"text\"\n id={id}\n name={element.name}\n className=\"input ob-input cypress-abn-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={() => {\n setIsDirty()\n removeFocus()\n }}\n onFocus={setIsFocused}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n </div>\n {value && (\n <ABNDisplay abnRecord={value} className=\"ob-abn__display-desktop\" />\n )}\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 <LookupButton\n isInputButton\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </div>\n {value && (\n <ABNDisplay abnRecord={value} className=\"ob-abn__display-mobile\" />\n )}\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage\n message={error?.message \|\| validationMessage}\n />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementABN)\n\nconst ABNDisplay = ({\n abnRecord,\n className,\n}: {\n abnRecord: MiscTypes.ABNRecord\n className: string\n}) => {\n return (\n <div className={`control ob-abn__record-control ${className}`}>\n <a className=\"button is-static ob-abn__record-button\">\n {abnService.displayBusinessNameFromABNRecord(abnRecord)}\n </a>\n </div>\n )\n}\n"]}

package/dist/form-elements/FormElementBSB.js CHANGED Viewed

@@ -98,10 +98,10 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
                                         onChange(element, {
                                             value: undefined,
                                         });
-                                        setText('');
+                                        setText("");
                                     }
                                     setIsDirty();
-                                }, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: errorMessage || validationMessage }))] }) }));
+                                }, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }) }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })), hasCopyButton && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] }), bsbRecord && (_jsx(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: errorMessage || validationMessage }))] }) }));
 }
 const BSBDisplay = ({ bsbRecord, className, }) => {
     return (_jsx("div", { className: `control ob-bsb__record-control ${className}`, children: _jsxs("a", { className: "button is-static ob-bsb__record-button", children: [bsbRecord.financialInstitutionMnemonic, " - ", bsbRecord.name] }) }));

package/dist/form-elements/FormElementBSB.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { InputMask } from '@react-input/mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '../apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport useBooleanState from '../hooks/useBooleanState'\n\ntype Props = {\n id: string\n formId: number\n element: FormTypes.BSBElement\n value: unknown\n onChange: FormElementValueChangeHandler<\n string \| { isInvalid: boolean; isValidating: boolean }\n >\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBSB({\n id,\n formId,\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 [text, setText] = React.useState(typeof value === 'string' ? value : '')\n const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false)\n const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n isLoading: boolean\n errorMessage: string \| null\n bsbRecord: MiscTypes.BSBRecord \| null\n }>({\n isLoading: false,\n errorMessage: null,\n bsbRecord: null,\n })\n\n React.useEffect(() => {\n if (bsbRecord) {\n onChange(element, {\n value: bsbRecord.bsb,\n })\n }\n }, [bsbRecord, element, onChange, value])\n\n React.useEffect(() => {\n if (text === '') {\n return\n }\n\n if (!isValidFormat) {\n setState({\n isLoading: false,\n errorMessage: null,\n bsbRecord: null,\n })\n return\n }\n\n setState({\n isLoading: true,\n errorMessage: null,\n bsbRecord: null,\n })\n\n const abortController = new AbortController()\n const getBSBRecord = async () => {\n onChange(element, {\n value: { isValidating: true, isInvalid: false },\n })\n try {\n const bsbRecord = await formService.getBSBRecord(\n formId,\n text,\n abortController.signal,\n )\n if (!abortController.signal.aborted) {\n setState({\n isLoading: false,\n errorMessage: null,\n bsbRecord,\n })\n }\n } catch (error) {\n console.warn('Error validating BSB number', error)\n if (!abortController.signal.aborted) {\n onChange(element, {\n value: { isInvalid: true, isValidating: false },\n })\n setState({\n isLoading: false,\n errorMessage: `The BSB number \"${text}\" does not exist`,\n bsbRecord: null,\n })\n }\n }\n }\n\n getBSBRecord()\n\n return () => {\n abortController.abort()\n }\n }, [formId, isValidFormat, text, onChange, element])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (((isDirty \|\| displayValidationMessage) &&\n !!validationMessage &&\n !isLoading) \|\|\n errorMessage) &&\n !isLookingUp\n\n const hasCopyButton = !!value && !!element.readOnly\n const hasLookupButton = element.isDataLookup \|\| element.isElementLookup\n return (\n <div className=\"cypress-bsb-element\">\n <FormElementLabelContainer\n className=\"ob-bsb\"\n id={id}\n element={element}\n required={element.required}\n >\n <div\n className={clsx('field has-addons', {\n 'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n })}\n >\n <div\n className={clsx('control is-expanded', {\n 'is-loading': isLoading,\n })}\n >\n <InputMask\n mask=\"xxx-xxx\"\n replacement={{ x: /\\d/ }}\n showMask={hasFocus}\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-bsb-control\"\n value={text}\n onChange={(e) => {\n setText(e.target.value)\n }}\n required={element.required}\n disabled={element.readOnly}\n onFocus={setHasFocus}\n onBlur={() => {\n removeFocus()\n if (text === 'xxx-xxx') {\n onChange(element, {\n value: undefined,\n })\n setText('')\n }\n setIsDirty()\n }}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n </div>\n {bsbRecord && (\n <BSBDisplay\n bsbRecord={bsbRecord}\n className=\"ob-bsb__display-desktop\"\n />\n )}\n {hasCopyButton && (\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 {bsbRecord && (\n <BSBDisplay\n bsbRecord={bsbRecord}\n className=\"ob-bsb__display-mobile\"\n />\n )}\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage\n message={errorMessage \|\| validationMessage}\n />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nconst BSBDisplay = ({\n bsbRecord,\n className,\n}: {\n bsbRecord: MiscTypes.BSBRecord\n className: string\n}) => {\n return (\n <div className={`control ob-bsb__record-control ${className}`}>\n <a className=\"button is-static ob-bsb__record-button\">\n {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n </a>\n </div>\n )\n}\nexport default React.memo(FormElementBSB)\n"]}
1	+ {"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { InputMask } from '@react-input/mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '../apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport useBooleanState from '../hooks/useBooleanState'\n\ntype Props = {\n id: string\n formId: number\n element: FormTypes.BSBElement\n value: unknown\n onChange: FormElementValueChangeHandler<\n string \| { isInvalid: boolean; isValidating: boolean }\n >\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBSB({\n id,\n formId,\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 [text, setText] = React.useState(typeof value === 'string' ? value : '')\n const [hasFocus, setHasFocus, removeFocus] = useBooleanState(false)\n const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n isLoading: boolean\n errorMessage: string \| null\n bsbRecord: MiscTypes.BSBRecord \| null\n }>({\n isLoading: false,\n errorMessage: null,\n bsbRecord: null,\n })\n\n React.useEffect(() => {\n if (bsbRecord) {\n onChange(element, {\n value: bsbRecord.bsb,\n })\n }\n }, [bsbRecord, element, onChange, value])\n\n React.useEffect(() => {\n if (text === '') {\n return\n }\n\n if (!isValidFormat) {\n setState({\n isLoading: false,\n errorMessage: null,\n bsbRecord: null,\n })\n return\n }\n\n setState({\n isLoading: true,\n errorMessage: null,\n bsbRecord: null,\n })\n\n const abortController = new AbortController()\n const getBSBRecord = async () => {\n onChange(element, {\n value: { isValidating: true, isInvalid: false },\n })\n try {\n const bsbRecord = await formService.getBSBRecord(\n formId,\n text,\n abortController.signal,\n )\n if (!abortController.signal.aborted) {\n setState({\n isLoading: false,\n errorMessage: null,\n bsbRecord,\n })\n }\n } catch (error) {\n console.warn('Error validating BSB number', error)\n if (!abortController.signal.aborted) {\n onChange(element, {\n value: { isInvalid: true, isValidating: false },\n })\n setState({\n isLoading: false,\n errorMessage: `The BSB number \"${text}\" does not exist`,\n bsbRecord: null,\n })\n }\n }\n }\n\n getBSBRecord()\n\n return () => {\n abortController.abort()\n }\n }, [formId, isValidFormat, text, onChange, element])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (((isDirty \|\| displayValidationMessage) &&\n !!validationMessage &&\n !isLoading) \|\|\n errorMessage) &&\n !isLookingUp\n\n const hasCopyButton = !!value && !!element.readOnly\n const hasLookupButton = element.isDataLookup \|\| element.isElementLookup\n return (\n <div className=\"cypress-bsb-element\">\n <FormElementLabelContainer\n className=\"ob-bsb\"\n id={id}\n element={element}\n required={element.required}\n >\n <div\n className={clsx('field has-addons', {\n 'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n })}\n >\n <div\n className={clsx('control is-expanded', {\n 'is-loading': isLoading,\n })}\n >\n <InputMask\n mask=\"xxx-xxx\"\n replacement={{ x: /\\d/ }}\n showMask={hasFocus}\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-bsb-control\"\n value={text}\n onChange={(e) => {\n setText(e.target.value)\n }}\n required={element.required}\n disabled={element.readOnly}\n onFocus={setHasFocus}\n onBlur={() => {\n removeFocus()\n if (text === 'xxx-xxx') {\n onChange(element, {\n value: undefined,\n })\n setText(\"\")\n }\n setIsDirty()\n }}\n aria-describedby={ariaDescribedby}\n autoComplete={autocompleteAttributes}\n aria-required={element.required}\n />\n </div>\n {bsbRecord && (\n <BSBDisplay\n bsbRecord={bsbRecord}\n className=\"ob-bsb__display-desktop\"\n />\n )}\n {hasCopyButton && (\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 />\n </div>\n {bsbRecord && (\n <BSBDisplay\n bsbRecord={bsbRecord}\n className=\"ob-bsb__display-mobile\"\n />\n )}\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage\n message={errorMessage \|\| validationMessage}\n />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nconst BSBDisplay = ({\n bsbRecord,\n className,\n}: {\n bsbRecord: MiscTypes.BSBRecord\n className: string\n}) => {\n return (\n <div className={`control ob-bsb__record-control ${className}`}>\n <a className=\"button is-static ob-bsb__record-button\">\n {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n </a>\n </div>\n )\n}\nexport default React.memo(FormElementBSB)\n"]}

package/dist/form-elements/FormElementBarcodeScanner.js CHANGED Viewed

@@ -54,7 +54,7 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                         ? element.restrictedBarcodeTypes
                         : undefined, onScan: handleScan, onClose: stopBarcodeScanner, "aria-describedby": ariaDescribedby })) : (_jsxs("div", { children: [_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: "control is-expanded has-icons-right", children: [_jsx("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-barcode-scanner-control has-margin-bottom-8", value: text, onChange: (e) => onChange(element, {
                                                 value: e.target.value || undefined,
-                                            }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "document_scanner" }) })] }), !!element.readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), _jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: element.readOnly, onClick: openBarcodeScanner, children: "Scan Barcode" })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+                                            }), required: element.required, disabled: element.readOnly, onBlur: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes, "aria-required": element.required }), _jsx("span", { className: "ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5", children: "document_scanner" }) })] }), !!element.readOnly && !!value && (_jsx("div", { className: "control", children: _jsx(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }) })), _jsx(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] }), _jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-start-scan-barcode-button", disabled: element.readOnly, onClick: openBarcodeScanner, children: "Scan Barcode" })] })), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementBarcodeScanner);
 function BarcodeScannerSupported(props) {

package/dist/form-elements/FormElementBarcodeScanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n Html5Qrcode,\n CameraDevice,\n Html5QrcodeSupportedFormats,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\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.BarcodeScannerElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\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 [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n useBooleanState(false)\n const [error, setError] = React.useState<Error \| null>(null)\n const { onLookup } = useLookupNotification(value)\n const handleScan = React.useCallback(\n (newValue: string \| undefined) => {\n setIsDirty()\n onChange(element, {\n value: newValue,\n })\n stopBarcodeScanner()\n onLookup()\n },\n [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n )\n\n const openBarcodeScanner = React.useCallback(() => {\n if (window.cordova) {\n setError(null)\n // @ts-expect-error ???\n window.cordova.plugins.barcodeScanner.scan(\n // @ts-expect-error ???\n (result) => {\n if (!result.cancelled) {\n handleScan(result.text)\n }\n },\n // @ts-expect-error ???\n (error) => {\n setError(\n new Error(\n `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n ),\n )\n },\n {\n showFlipCameraButton: true,\n showTorchButton: true,\n },\n )\n } else {\n startBarcodeScanner()\n }\n }, [handleScan, startBarcodeScanner])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n const text = typeof value === 'string' ? value : ''\n return (\n <div className=\"cypress-barcode-scanner-element\">\n <FormElementLabelContainer\n className=\"ob-barcode-scanner\"\n element={element}\n id={id}\n required={element.required}\n >\n {error && (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <div>\n <h4 className=\"title is-4\">Whoops...</h4>\n <p>{error.message}</p>\n </div>\n </div>\n </figure>\n )}\n\n {isCameraOpen ? (\n <BarcodeScannerSupported\n id={`${id}==BARCODE_SCANNER`}\n restrictedBarcodeTypes={\n element.restrictBarcodeTypes\n ? element.restrictedBarcodeTypes\n : undefined\n }\n onScan={handleScan}\n onClose={stopBarcodeScanner}\n aria-describedby={ariaDescribedby}\n />\n ) : (\n <div>\n <div className=\"field has-addons\">\n <div className=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\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 <span className=\"ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5\">\n document_scanner\n </MaterialIcon>\n </span>\n </div>\n {!!element.readOnly && !!value && (\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\n <button\n type=\"button\"\n className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n disabled={element.readOnly}\n onClick={openBarcodeScanner}\n >\n Scan Barcode\n </button>\n </div>\n )}\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n id: string\n restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n onScan: (barcode: string \| undefined) => void\n onClose: () => void\n 'aria-describedby'?: string\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n const { onClose } = props\n if (!navigator.mediaDevices?.getUserMedia) {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <BarcodeScannerError\n title=\"Unsupported Device\"\n message=\"Your device does not support accessing your camera.\"\n />\n </BarcodeScannerFigure>\n )\n }\n\n return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n const { onClose } = props\n const [state] = useLoadDataState(Html5Qrcode.getCameras)\n switch (state.status) {\n case 'LOADING': {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <div className=\"figure-content has-text-centered\">\n <OnLoading small />\n </div>\n </BarcodeScannerFigure>\n )\n }\n case 'ERROR': {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <BarcodeScannerError\n title=\"Whoops...\"\n message={\n state.error.name === 'NotAllowedError'\n ? 'Cannot scan for barcodes without granting the application access to the camera.'\n : state.error.message\n }\n />\n </BarcodeScannerFigure>\n )\n }\n }\n\n if (!state.result.length) {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <BarcodeScannerError\n title=\"No Cameras Available\"\n message=\"Your device does not have an accessible camera.\"\n />\n </BarcodeScannerFigure>\n )\n }\n\n return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n id,\n restrictedBarcodeTypes,\n onScan,\n onClose,\n ...props\n}: BarcodeScannerProps & {\n cameraDevices: CameraDevice[]\n}) {\n const formatsToSupport = React.useMemo(() => {\n return restrictedBarcodeTypes?.reduce<Html5QrcodeSupportedFormats[]>(\n (memo, barcodeType) => {\n const format =\n Html5QrcodeSupportedFormats[\n barcodeType as keyof typeof Html5QrcodeSupportedFormats\n ]\n if (format !== undefined) {\n memo.push(format)\n }\n return memo\n },\n [],\n )\n }, [restrictedBarcodeTypes])\n\n React.useEffect(() => {\n const html5Qrcode = new Html5Qrcode(id, {\n verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n })\n\n html5Qrcode\n .start(\n {\n facingMode: 'environment',\n },\n {\n fps: 20,\n qrbox: {\n width: 400,\n height: 400,\n },\n },\n function onScanSuccess(decodedText, decodedResult) {\n console.log('Barcode scanner decoded result:', decodedResult)\n onScan(decodedText)\n },\n function onScanFailure() {\n // do nothing and keep scanning\n },\n )\n .catch((error) => {\n console.warn('Failed to start scanning', error)\n })\n\n return () => {\n html5Qrcode.stop().catch((error) => {\n console.warn('Failed to stop barcode scanner', error)\n })\n }\n }, [formatsToSupport, id, onScan])\n\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <div className=\"figure-content-absolute-center\">\n <OnLoading small />\n </div>\n <div\n id={id}\n className=\"ob-figure__barcode-scanner\"\n aria-describedby={props['aria-describedby']}\n />\n </BarcodeScannerFigure>\n )\n}\n\nfunction BarcodeScannerFigure({\n onClose,\n children,\n}: {\n onClose: () => void\n children: React.ReactNode\n}) {\n return (\n <div>\n <figure className=\"ob-figure\">{children}</figure>\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n onClick={onClose}\n >\n Cancel\n </button>\n </div>\n </div>\n )\n}\n\nfunction BarcodeScannerError({\n title,\n message,\n}: {\n title: string\n message: string\n}) {\n return (\n <div className=\"figure-content has-text-centered\" role=\"alert\">\n <div>\n <h4 className=\"title is-4\">{title}</h4>\n <p className=\"has-margin-bottom-6\">{message}</p>\n <p>\n Please click <b>Cancel</b> below and type in the barcode value\n manually.\n </p>\n </div>\n </div>\n )\n}\n"]}
1	+ {"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n Html5Qrcode,\n CameraDevice,\n Html5QrcodeSupportedFormats,\n} from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useLoadDataState from '../hooks/useLoadDataState'\nimport OnLoading from '../components/renderer/OnLoading'\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.BarcodeScannerElement\n value: unknown \| undefined\n onChange: FormElementValueChangeHandler<string>\n displayValidationMessage: boolean\n validationMessage: string \| undefined\n autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\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 [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n useBooleanState(false)\n const [error, setError] = React.useState<Error \| null>(null)\n const { onLookup } = useLookupNotification(value)\n const handleScan = React.useCallback(\n (newValue: string \| undefined) => {\n setIsDirty()\n onChange(element, {\n value: newValue,\n })\n stopBarcodeScanner()\n onLookup()\n },\n [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n )\n\n const openBarcodeScanner = React.useCallback(() => {\n if (window.cordova) {\n setError(null)\n // @ts-expect-error ???\n window.cordova.plugins.barcodeScanner.scan(\n // @ts-expect-error ???\n (result) => {\n if (!result.cancelled) {\n handleScan(result.text)\n }\n },\n // @ts-expect-error ???\n (error) => {\n setError(\n new Error(\n `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n ),\n )\n },\n {\n showFlipCameraButton: true,\n showTorchButton: true,\n },\n )\n } else {\n startBarcodeScanner()\n }\n }, [handleScan, startBarcodeScanner])\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (isDirty \|\| displayValidationMessage) && !!validationMessage && !isLookingUp\n\n const text = typeof value === 'string' ? value : ''\n return (\n <div className=\"cypress-barcode-scanner-element\">\n <FormElementLabelContainer\n className=\"ob-barcode-scanner\"\n element={element}\n id={id}\n required={element.required}\n >\n {error && (\n <figure className=\"ob-figure\">\n <div className=\"figure-content has-text-centered\">\n <div>\n <h4 className=\"title is-4\">Whoops...</h4>\n <p>{error.message}</p>\n </div>\n </div>\n </figure>\n )}\n\n {isCameraOpen ? (\n <BarcodeScannerSupported\n id={`${id}==BARCODE_SCANNER`}\n restrictedBarcodeTypes={\n element.restrictBarcodeTypes\n ? element.restrictedBarcodeTypes\n : undefined\n }\n onScan={handleScan}\n onClose={stopBarcodeScanner}\n aria-describedby={ariaDescribedby}\n />\n ) : (\n <div>\n <div className=\"field has-addons\">\n <div className=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n placeholder={element.placeholderValue}\n id={id}\n name={element.name}\n className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n value={text}\n onChange={(e) =>\n onChange(element, {\n value: e.target.value \|\| undefined,\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 <span className=\"ob-input-icon icon is-small is-right\">\n <MaterialIcon className=\"is-size-5\">\n document_scanner\n </MaterialIcon>\n </span>\n </div>\n {!!element.readOnly && !!value && (\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 />\n </div>\n\n <button\n type=\"button\"\n className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n disabled={element.readOnly}\n onClick={openBarcodeScanner}\n >\n Scan Barcode\n </button>\n </div>\n )}\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n id: string\n restrictedBarcodeTypes: FormTypes.BarcodeScannerElement['restrictedBarcodeTypes']\n onScan: (barcode: string \| undefined) => void\n onClose: () => void\n 'aria-describedby'?: string\n}\n\nfunction BarcodeScannerSupported(props: BarcodeScannerProps) {\n const { onClose } = props\n if (!navigator.mediaDevices?.getUserMedia) {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <BarcodeScannerError\n title=\"Unsupported Device\"\n message=\"Your device does not support accessing your camera.\"\n />\n </BarcodeScannerFigure>\n )\n }\n\n return <BarcodeScannerCameraLoader {...props} />\n}\n\nfunction BarcodeScannerCameraLoader(props: BarcodeScannerProps) {\n const { onClose } = props\n const [state] = useLoadDataState(Html5Qrcode.getCameras)\n switch (state.status) {\n case 'LOADING': {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <div className=\"figure-content has-text-centered\">\n <OnLoading small />\n </div>\n </BarcodeScannerFigure>\n )\n }\n case 'ERROR': {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <BarcodeScannerError\n title=\"Whoops...\"\n message={\n state.error.name === 'NotAllowedError'\n ? 'Cannot scan for barcodes without granting the application access to the camera.'\n : state.error.message\n }\n />\n </BarcodeScannerFigure>\n )\n }\n }\n\n if (!state.result.length) {\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <BarcodeScannerError\n title=\"No Cameras Available\"\n message=\"Your device does not have an accessible camera.\"\n />\n </BarcodeScannerFigure>\n )\n }\n\n return <BarcodeScanner {...props} cameraDevices={state.result} />\n}\n\nfunction BarcodeScanner({\n id,\n restrictedBarcodeTypes,\n onScan,\n onClose,\n ...props\n}: BarcodeScannerProps & {\n cameraDevices: CameraDevice[]\n}) {\n const formatsToSupport = React.useMemo(() => {\n return restrictedBarcodeTypes?.reduce<Html5QrcodeSupportedFormats[]>(\n (memo, barcodeType) => {\n const format =\n Html5QrcodeSupportedFormats[\n barcodeType as keyof typeof Html5QrcodeSupportedFormats\n ]\n if (format !== undefined) {\n memo.push(format)\n }\n return memo\n },\n [],\n )\n }, [restrictedBarcodeTypes])\n\n React.useEffect(() => {\n const html5Qrcode = new Html5Qrcode(id, {\n verbose: !!localStorage.getItem('BARCODE_SCANNER_VERBOSE'),\n formatsToSupport: formatsToSupport?.length ? formatsToSupport : undefined,\n })\n\n html5Qrcode\n .start(\n {\n facingMode: 'environment',\n },\n {\n fps: 20,\n qrbox: {\n width: 400,\n height: 400,\n },\n },\n function onScanSuccess(decodedText, decodedResult) {\n console.log('Barcode scanner decoded result:', decodedResult)\n onScan(decodedText)\n },\n function onScanFailure() {\n // do nothing and keep scanning\n },\n )\n .catch((error) => {\n console.warn('Failed to start scanning', error)\n })\n\n return () => {\n html5Qrcode.stop().catch((error) => {\n console.warn('Failed to stop barcode scanner', error)\n })\n }\n }, [formatsToSupport, id, onScan])\n\n return (\n <BarcodeScannerFigure onClose={onClose}>\n <div className=\"figure-content-absolute-center\">\n <OnLoading small />\n </div>\n <div\n id={id}\n className=\"ob-figure__barcode-scanner\"\n aria-describedby={props['aria-describedby']}\n />\n </BarcodeScannerFigure>\n )\n}\n\nfunction BarcodeScannerFigure({\n onClose,\n children,\n}: {\n onClose: () => void\n children: React.ReactNode\n}) {\n return (\n <div>\n <figure className=\"ob-figure\">{children}</figure>\n <div className=\"buttons ob-buttons\">\n <button\n type=\"button\"\n className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n onClick={onClose}\n >\n Cancel\n </button>\n </div>\n </div>\n )\n}\n\nfunction BarcodeScannerError({\n title,\n message,\n}: {\n title: string\n message: string\n}) {\n return (\n <div className=\"figure-content has-text-centered\" role=\"alert\">\n <div>\n <h4 className=\"title is-4\">{title}</h4>\n <p className=\"has-margin-bottom-6\">{message}</p>\n <p>\n Please click <b>Cancel</b> below and type in the barcode value\n manually.\n </p>\n </div>\n </div>\n )\n}\n"]}

package/dist/form-elements/FormElementCheckBoxes.js CHANGED Viewed

@@ -89,7 +89,7 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
                                                         setIsDirty();
                                                     }
                                                 } }), ' ', option.label] }) }, index));
-                            }) })), _jsx(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton, overrideRequiredMessage: undefined })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
+                            }) })), _jsx(LookupButton, { hasMarginTop: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })] }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }) }));
 }
 export default React.memo(FormElementCheckboxes);
 //# sourceMappingURL=FormElementCheckBoxes.js.map

package/dist/form-elements/FormElementCheckBoxes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\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.CheckboxElement\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 FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) \|\|\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue \|\| []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\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 (displayValidationMessage \|\| isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required \|\| !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div\n className=\"buttons ob-buttons ob-buttons-radio\"\n role=\"group\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(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={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-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 <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n overrideRequiredMessage={undefined}\n />\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
1	+ {"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\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.CheckboxElement\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 FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) \|\|\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue \|\| []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\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 (displayValidationMessage \|\| isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required \|\| !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div\n className=\"buttons ob-buttons ob-buttons-radio\"\n role=\"group\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(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={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-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 <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <FormElementValidationMessage message={validationMessage} />\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}