npm - @oneblink/apps-react - Versions diffs - 0.6.2 → 1.0.0-beta.3 - Mend

@oneblink/apps-react 0.6.2 → 1.0.0-beta.3

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 (253) hide show

package/dist/components/messages/LargeIconMessage.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LargeIconMessage.js","sourceRoot":"","sources":["../../../src/components/messages/LargeIconMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAa7C,SAAS,gBAAgB,CAAC,EACxB,aAAa,EACb,KAAK,EACL,OAAO,EACP,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,GACA;IACN,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YAC3C,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;SAC5B,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO,CACL,oBAAC,SAAS,IAAC,QAAQ,EAAC,IAAI;QACtB,oBAAC,mBAAmB,IAAC,SAAS,EAAE,SAAS;YACvC,oBAAC,IAAI,IAAC,KAAK,EAAE,OAAO,GAAI,CACJ;QACtB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,YAAY,QAAC,KAAK,EAAE,OAAO,IAChE,KAAK,CACK;QACZ,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,gBAAgB,IACf,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,CAAC,CAAC,MAAM,EACnB,YAAY,EAAE,CAAC,MAAM,IAAI,YAAY,IAEpC,QAAQ,CACQ,CACpB,CAAC,CAAC,CAAC,IAAI;QACP,MAAM,IAAI,CACT,oBAAC,UAAU,IACT,SAAS,QACT,cAAc,EAAC,QAAQ,EACvB,YAAY,EAAE,YAAY,IAEzB,MAAM,CACI,CACd,CACS,CACb,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,gBAAgB,CAAC,CAAA;AAElD,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,WAAW;CAClD,CAAC,CAEC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5B,SAAS,EAAE,QAAQ;IACnB,GAAG,CAAC,SAAS;QACX,CAAC,CAAC;YACE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SAC7B;QACH,CAAC,CAAC,EAAE,CAAC;CACR,CAAC,CAAC,CAAA;AAEH,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA0C,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IACxE,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;CAC5D,CAAC,CAAC,CAAA;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,EAAE;IAC9B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA6B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3D,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;CAC5D,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Typography, Grid, Container } from '@mui/material'\nimport { styled } from '@mui/material/styles'\n\ntype Variant = 'primary' | 'success' | 'error' | 'warning'\nexport type Props = {\n IconComponent: React.ComponentType<{ color: Variant }>\n title: string\n variant: Variant\n gutterTop?: boolean\n gutterBottom?: boolean\n children?: React.ReactNode\n action?: React.ReactNode\n}\n\nfunction LargeIconMessage({\n IconComponent,\n title,\n variant,\n gutterTop,\n gutterBottom,\n children,\n action,\n}: Props) {\n const Icon = React.useMemo(() => {\n return styled(IconComponent)(({ theme }) => ({\n fontSize: theme.spacing(16),\n }))\n }, [IconComponent])\n\n return (\n <Container maxWidth=\"sm\">\n <StyledIconContainer gutterTop={gutterTop}>\n <Icon color={variant} />\n </StyledIconContainer>\n <Typography variant=\"h5\" align=\"center\" gutterBottom color={variant}>\n {title}\n </Typography>\n {children ? (\n <StyledTypography\n align=\"center\"\n variant=\"body2\"\n paragraph={!!action}\n gutterBottom={!action && gutterBottom}\n >\n {children}\n </StyledTypography>\n ) : null}\n {action && (\n <StyledGrid\n container\n justifyContent=\"center\"\n gutterBottom={gutterBottom}\n >\n {action}\n </StyledGrid>\n )}\n </Container>\n )\n}\n\nexport default React.memo<Props>(LargeIconMessage)\n\nconst StyledIconContainer = styled('div', {\n shouldForwardProp: (prop) => prop !== 'gutterTop',\n})<{\n gutterTop?: boolean\n}>(({ theme, gutterTop }) => ({\n textAlign: 'center',\n ...(gutterTop\n ? {\n paddingTop: theme.spacing(4),\n }\n : {}),\n}))\n\nconst StyledTypography = styled(Typography, {\n shouldForwardProp: (prop) => prop !== 'gutterBottom',\n})<React.ComponentProps<typeof Typography>>(({ theme, gutterBottom }) => ({\n ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),\n}))\n\nconst StyledGrid = styled(Grid, {\n shouldForwardProp: (prop) => prop !== 'gutterBottom',\n})<{ gutterBottom?: boolean }>(({ theme, gutterBottom }) => ({\n ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),\n}))\n"]}

package/dist/components/messages/NoResourcesYet.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Props as LargeIconMessageProps } from './LargeIconMessage';
+declare type Props = {
+    IconComponent: LargeIconMessageProps['IconComponent'];
+    title: string;
+    gutterBottom?: boolean;
+    children?: React.ReactNode;
+};
+export declare function NoResourcesYet({ title, children, IconComponent, gutterBottom, }: Props): JSX.Element;
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/messages/NoResourcesYet.js ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import LargeIconMessage from './LargeIconMessage';
+export function NoResourcesYet({ title, children, IconComponent, gutterBottom, }) {
+    return (React.createElement(LargeIconMessage, { IconComponent: IconComponent, title: title, variant: "primary", gutterBottom: gutterBottom, gutterTop: true }, children));
+}
+export default React.memo(NoResourcesYet);
+//# sourceMappingURL=NoResourcesYet.js.map

package/dist/components/messages/NoResourcesYet.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NoResourcesYet.js","sourceRoot":"","sources":["../../../src/components/messages/NoResourcesYet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAEN,MAAM,oBAAoB,CAAA;AAO3B,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,YAAY,GACN;IACN,OAAO,CACL,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,SAAS,EACjB,YAAY,EAAE,YAAY,EAC1B,SAAS,UAER,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC;AACD,eAAe,KAAK,CAAC,IAAI,CAAQ,cAAc,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport LargeIconMessage, {\n Props as LargeIconMessageProps,\n} from './LargeIconMessage'\ntype Props = {\n IconComponent: LargeIconMessageProps['IconComponent']\n title: string\n gutterBottom?: boolean\n children?: React.ReactNode\n}\nexport function NoResourcesYet({\n title,\n children,\n IconComponent,\n gutterBottom,\n}: Props) {\n return (\n <LargeIconMessage\n IconComponent={IconComponent}\n title={title}\n variant=\"primary\"\n gutterBottom={gutterBottom}\n gutterTop\n >\n {children}\n </LargeIconMessage>\n )\n}\nexport default React.memo<Props>(NoResourcesYet)\n"]}

package/dist/components/pickers/V4CompatibleDatePicker.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { MobileDatePickerProps } from '@mui/x-date-pickers';
+import { TextField, IconButton } from '@mui/material';
+declare type RemainingPickerProps = Omit<MobileDatePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type TextFieldProps = React.ComponentProps<typeof TextField>;
+declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
+declare type Props = RemainingPickerProps & {
+    name?: string;
+    label?: string;
+    maxDate?: string | Date;
+    maxDateMessage?: string;
+    minDate?: string | Date;
+    minDateMessage?: string;
+    margin?: TextFieldProps['margin'];
+    size?: TextFieldProps['size'];
+    placeholder?: string;
+    InputProps?: TextFieldProps['InputProps'];
+    inputVariant?: TextFieldProps['variant'];
+    onBlur?: TextFieldProps['onBlur'];
+    startIconButton?: boolean;
+    endIconButton?: boolean;
+    iconButtonEdge?: IconButtonProps['edge'];
+    iconButtonSize?: IconButtonProps['size'];
+    helperText?: string | React.ReactNode;
+    error?: boolean;
+    required?: boolean;
+    'data-cypress'?: string;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/pickers/V4CompatibleDatePicker.js ADDED Viewed

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { MobileDatePicker } from '@mui/x-date-pickers';
+import { TextField, InputAdornment, IconButton } from '@mui/material';
+import { DateRange } from '@mui/icons-material';
+import useBooleanState from '../../hooks/useBooleanState';
+import { localisationService } from '@oneblink/apps';
+const emptyFn = () => {
+    //
+};
+const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+    const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
+    const [helperText, setHelperText] = React.useState(undefined);
+    const handleError = React.useCallback((error) => {
+        switch (error) {
+            case 'invalidDate': {
+                return setHelperText('Invalid Date Time');
+            }
+            case 'maxDate': {
+                return setHelperText(maxDateMessage);
+            }
+            case 'minDate': {
+                return setHelperText(minDateMessage);
+            }
+            default: {
+                return setHelperText(undefined);
+            }
+        }
+    }, [maxDateMessage, minDateMessage]);
+    const convertedMaxDate = React.useMemo(() => {
+        if (typeof maxDate === 'string') {
+            return new Date(maxDate);
+        }
+    }, [maxDate]);
+    const convertedMinDate = React.useMemo(() => {
+        if (typeof minDate === 'string') {
+            return new Date(minDate);
+        }
+    }, [minDate]);
+    const onAccept = React.useCallback((date) => {
+        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
+            onChange(date);
+        }
+    }, [onChange, rest.value]);
+    return (React.createElement(MobileDatePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
+                startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(DateRange, null)))) : undefined,
+                endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(DateRange, null)))) : undefined,
+                ...(InputProps ? InputProps : {}),
+            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError,
+        // This triggers everytime a component of the while date changes within the picker
+        onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
+};
+export default React.memo(V4CompatibleDatePicker);
+//# sourceMappingURL=V4CompatibleDatePicker.js.map

package/dist/components/pickers/V4CompatibleDatePicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"V4CompatibleDatePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileDatePicker, MobileDatePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\n\ntype RemainingPickerProps = Omit<\n MobileDatePickerProps<Date>,\n | 'onError'\n | 'renderInput'\n | 'toolbarFormat'\n | 'rightArrowIcon'\n | 'leftArrowIcon'\n | 'maxDate'\n | 'minDate'\n | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: string\n label?: string\n maxDate?: string | Date\n maxDateMessage?: string\n minDate?: string | Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: string\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: string | React.ReactNode\n error?: boolean\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst emptyFn = () => {\n //\n}\nconst V4CompatibleDatePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string | undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (error: Parameters<Required<MobileDatePickerProps>['onError']>[0]) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date | null) => {\n const currentValue =\n rest.value instanceof Date ? rest.value.toISOString() : rest.value\n\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, rest.value],\n )\n\n return (\n <MobileDatePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp || helperText}\n {...(error ? { error } : {})}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n // This triggers everytime a component of the while date changes within the picker\n onChange={emptyFn}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}

package/dist/components/pickers/V4CompatibleDateTimePicker.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { MobileDateTimePickerProps } from '@mui/x-date-pickers';
+import { TextField, IconButton } from '@mui/material';
+declare type RemainingPickerProps = Omit<MobileDateTimePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'timeIcon' | 'dateRangeIcon' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type TextFieldProps = React.ComponentProps<typeof TextField>;
+declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
+declare type Props = RemainingPickerProps & {
+    name?: string;
+    label?: string;
+    maxDate?: string | Date;
+    maxDateMessage?: string;
+    minDate?: string | Date;
+    minDateMessage?: string;
+    margin?: TextFieldProps['margin'];
+    size?: TextFieldProps['size'];
+    placeholder?: string;
+    InputProps?: TextFieldProps['InputProps'];
+    inputVariant?: TextFieldProps['variant'];
+    startIconButton?: boolean;
+    endIconButton?: boolean;
+    iconButtonEdge?: IconButtonProps['edge'];
+    iconButtonSize?: IconButtonProps['size'];
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    'data-cypress'?: string;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/pickers/V4CompatibleDateTimePicker.js ADDED Viewed

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { MobileDateTimePicker, } from '@mui/x-date-pickers';
+import { TextField, InputAdornment, IconButton } from '@mui/material';
+import { AccessTime, DateRange } from '@mui/icons-material';
+import useBooleanState from '../../hooks/useBooleanState';
+import { localisationService } from '@oneblink/apps';
+const emptyFn = () => {
+    //
+};
+const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+    const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
+    const [helperText, setHelperText] = React.useState(undefined);
+    const handleError = React.useCallback((error) => {
+        switch (error) {
+            case 'invalidDate': {
+                return setHelperText('Invalid Date Time');
+            }
+            case 'maxDate': {
+                return setHelperText(maxDateMessage);
+            }
+            case 'minDate': {
+                return setHelperText(minDateMessage);
+            }
+            default: {
+                return setHelperText(undefined);
+            }
+        }
+    }, [maxDateMessage, minDateMessage]);
+    const convertedMaxDate = React.useMemo(() => {
+        if (typeof maxDate === 'string') {
+            return new Date(maxDate);
+        }
+    }, [maxDate]);
+    const convertedMinDate = React.useMemo(() => {
+        if (typeof minDate === 'string') {
+            return new Date(minDate);
+        }
+    }, [minDate]);
+    const onAccept = React.useCallback((date) => {
+        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
+            onChange(date);
+        }
+    }, [onChange, rest.value]);
+    return (React.createElement(MobileDateTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, InputProps: {
+                startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(DateRange, null)))) : undefined,
+                endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(DateRange, null)))) : undefined,
+                ...(InputProps ? InputProps : {}),
+            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, timeIcon: React.createElement(AccessTime, null), dateRangeIcon: React.createElement(DateRange, null),
+        // This triggers everytime a component of the while date changes within the picker
+        onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
+};
+export default React.memo(V4CompatibleDateTimePicker);
+//# sourceMappingURL=V4CompatibleDateTimePicker.js.map

package/dist/components/pickers/V4CompatibleDateTimePicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"V4CompatibleDateTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDateTimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n MobileDateTimePicker,\n MobileDateTimePickerProps,\n} from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime, DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\n\ntype RemainingPickerProps = Omit<\n MobileDateTimePickerProps<Date>,\n | 'onError'\n | 'renderInput'\n | 'toolbarFormat'\n | 'timeIcon'\n | 'dateRangeIcon'\n | 'rightArrowIcon'\n | 'leftArrowIcon'\n | 'maxDate'\n | 'minDate'\n | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: string\n label?: string\n maxDate?: string | Date\n maxDateMessage?: string\n minDate?: string | Date\n minDateMessage?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: string\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: string\n error?: boolean\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst emptyFn = () => {\n //\n}\nconst V4CompatibleDateTimePicker = ({\n name,\n label,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string | undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (error: Parameters<Required<MobileDateTimePickerProps>['onError']>[0]) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n case 'maxDate': {\n return setHelperText(maxDateMessage)\n }\n case 'minDate': {\n return setHelperText(minDateMessage)\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [maxDateMessage, minDateMessage],\n )\n\n const convertedMaxDate = React.useMemo(() => {\n if (typeof maxDate === 'string') {\n return new Date(maxDate)\n }\n }, [maxDate])\n const convertedMinDate = React.useMemo(() => {\n if (typeof minDate === 'string') {\n return new Date(minDate)\n }\n }, [minDate])\n\n const onAccept = React.useCallback(\n (date: Date | null) => {\n const currentValue =\n rest.value instanceof Date ? rest.value.toISOString() : rest.value\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, rest.value],\n )\n\n return (\n <MobileDateTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp || helperText}\n {...(error ? { error } : {})}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <DateRange />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n maxDate={convertedMaxDate}\n minDate={convertedMinDate}\n onError={handleError}\n timeIcon={<AccessTime />}\n dateRangeIcon={<DateRange />}\n // This triggers everytime a component of the while date changes within the picker\n onChange={emptyFn}\n onAccept={onAccept}\n inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}

package/dist/components/pickers/V4CompatibleTimePicker.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MobileTimePickerProps } from '@mui/x-date-pickers';
+import { TextField, IconButton } from '@mui/material';
+declare type RemainingPickerProps = Omit<MobileTimePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type TextFieldProps = React.ComponentProps<typeof TextField>;
+declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
+declare type Props = RemainingPickerProps & {
+    name?: string;
+    label?: string;
+    margin?: TextFieldProps['margin'];
+    size?: TextFieldProps['size'];
+    placeholder?: string;
+    InputProps?: TextFieldProps['InputProps'];
+    inputVariant?: TextFieldProps['variant'];
+    onBlur?: TextFieldProps['onBlur'];
+    startIconButton?: boolean;
+    endIconButton?: boolean;
+    iconButtonEdge?: IconButtonProps['edge'];
+    iconButtonSize?: IconButtonProps['size'];
+    helperText?: string | React.ReactNode;
+    error?: boolean;
+    required?: boolean;
+    'data-cypress'?: string;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/pickers/V4CompatibleTimePicker.js ADDED Viewed

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { MobileTimePicker } from '@mui/x-date-pickers';
+import { TextField, InputAdornment, IconButton } from '@mui/material';
+import { AccessTime } from '@mui/icons-material';
+import useBooleanState from '../../hooks/useBooleanState';
+const emptyFn = () => {
+    //
+};
+const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+    const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
+    const [helperText, setHelperText] = React.useState(undefined);
+    const handleError = React.useCallback((error) => {
+        switch (error) {
+            case 'invalidDate': {
+                return setHelperText('Invalid Date Time');
+            }
+            default: {
+                return setHelperText(undefined);
+            }
+        }
+    }, []);
+    const onAccept = React.useCallback((date) => {
+        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
+            onChange(date);
+        }
+    }, [onChange, rest.value]);
+    return (React.createElement(MobileTimePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
+                startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(AccessTime, null)))) : undefined,
+                endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(AccessTime, null)))) : undefined,
+                ...(InputProps ? InputProps : {}),
+            }, "data-cypress": dataCypress })), onError: handleError,
+        // This triggers everytime a component of the while date changes within the picker
+        onChange: emptyFn, onAccept: onAccept, disabled: disabled, ...rest }));
+};
+export default React.memo(V4CompatibleTimePicker);
+//# sourceMappingURL=V4CompatibleTimePicker.js.map

package/dist/components/pickers/V4CompatibleTimePicker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"V4CompatibleTimePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleTimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileTimePicker, MobileTimePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { AccessTime } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\n\ntype RemainingPickerProps = Omit<\n MobileTimePickerProps<Date>,\n | 'onError'\n | 'renderInput'\n | 'toolbarFormat'\n | 'rightArrowIcon'\n | 'leftArrowIcon'\n | 'maxDate'\n | 'minDate'\n | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n name?: string\n label?: string\n margin?: TextFieldProps['margin']\n size?: TextFieldProps['size']\n placeholder?: string\n InputProps?: TextFieldProps['InputProps']\n inputVariant?: TextFieldProps['variant']\n onBlur?: TextFieldProps['onBlur']\n startIconButton?: boolean\n endIconButton?: boolean\n iconButtonEdge?: IconButtonProps['edge']\n iconButtonSize?: IconButtonProps['size']\n helperText?: string | React.ReactNode\n error?: boolean\n required?: boolean\n 'data-cypress'?: string\n}\n\nconst emptyFn = () => {\n //\n}\nconst V4CompatibleTimePicker = ({\n name,\n label,\n margin,\n size,\n placeholder,\n InputProps,\n onChange,\n inputVariant,\n onBlur,\n disabled,\n startIconButton,\n endIconButton,\n iconButtonEdge,\n iconButtonSize,\n helperText: helperTextProp,\n error,\n required,\n 'data-cypress': dataCypress,\n ...rest\n}: Props) => {\n const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n const [helperText, setHelperText] = React.useState<string | undefined>(\n undefined,\n )\n const handleError = React.useCallback(\n (error: Parameters<Required<MobileTimePickerProps>['onError']>[0]) => {\n switch (error) {\n case 'invalidDate': {\n return setHelperText('Invalid Date Time')\n }\n default: {\n return setHelperText(undefined)\n }\n }\n },\n [],\n )\n\n const onAccept = React.useCallback(\n (date: Date | null) => {\n const currentValue =\n rest.value instanceof Date ? rest.value.toISOString() : rest.value\n\n if (currentValue !== (date?.toISOString() || null)) {\n onChange(date)\n }\n },\n [onChange, rest.value],\n )\n\n return (\n <MobileTimePicker\n open={isOpen}\n onOpen={setIsOpen}\n onClose={setIsClosed}\n renderInput={(props) => (\n <TextField\n {...props}\n name={name}\n label={label}\n required={required}\n helperText={helperTextProp || helperText}\n {...(error ? { error } : {})}\n fullWidth\n margin={margin}\n size={size}\n placeholder={placeholder}\n variant={inputVariant}\n onBlur={onBlur}\n InputProps={{\n startAdornment: startIconButton ? (\n <InputAdornment position=\"start\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n endAdornment: endIconButton ? (\n <InputAdornment position=\"end\">\n <IconButton\n edge={iconButtonEdge}\n size={iconButtonSize}\n onClick={setIsOpen}\n disabled={disabled}\n >\n <AccessTime />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n ...(InputProps ? InputProps : {}),\n }}\n data-cypress={dataCypress}\n />\n )}\n onError={handleError}\n // This triggers everytime a component of the while date changes within the picker\n onChange={emptyFn}\n onAccept={onAccept}\n disabled={disabled}\n {...rest}\n />\n )\n}\n\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}

package/dist/components/{AnnotationModal.d.ts → renderer/AnnotationModal.d.ts} RENAMED Viewed

File without changes

package/dist/components/{AnnotationModal.js → renderer/AnnotationModal.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import SignatureCanvas from 'react-signature-canvas';
-import useBooleanState from '../hooks/useBooleanState';
-import scrollingService from '../services/scrolling-service';
+import useBooleanState from '../../hooks/useBooleanState';
+import scrollingService from '../../services/scrolling-service';
 const annotationButtonColours = [
     '#000000',
     '#ffffff',

package/dist/components/renderer/AnnotationModal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport SignatureCanvas from 'react-signature-canvas'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport scrollingService from '../../services/scrolling-service'\n\nconst annotationButtonColours = [\n '#000000',\n '#ffffff',\n '#f44336',\n '#e91e63',\n '#9c27b0',\n '#673ab7',\n '#3f51b5',\n '#2196f3',\n '#03a9f4',\n '#00bcd4',\n '#009688',\n '#4caf50',\n '#8bc34a',\n '#cddc39',\n '#ffee58',\n '#ffca28',\n '#ffa726',\n '#ff5722',\n]\n\nfunction AnnotationModal({\n imageSrc,\n onClose,\n onSave,\n}: {\n imageSrc: string\n onClose: () => void\n onSave: (newValue: string) => void\n}) {\n const annotationContentElementRef = React.useRef<HTMLDivElement>(null)\n const bmSignaturePadRef = React.useRef<HTMLDivElement>(null)\n const signatureCanvasRef = React.useRef<SignatureCanvas>(null)\n\n const [isDirty, setDirty] = useBooleanState(false)\n const [penColour, setPenColour] = React.useState(annotationButtonColours[0])\n\n const handleCancelAnnotation = React.useCallback(() => {\n if (signatureCanvasRef.current) {\n console.log('Clearing annotation...')\n signatureCanvasRef.current.clear()\n }\n onClose()\n }, [onClose])\n\n const handleSaveAnnotation = React.useCallback(() => {\n if (signatureCanvasRef.current) {\n onSave(signatureCanvasRef.current.toDataURL())\n }\n }, [onSave])\n\n // SETTING CANVAS FROM PASSED VALUE\n React.useEffect(() => {\n const annotationContentElement = annotationContentElementRef.current\n const bmSignaturePadElement = bmSignaturePadRef.current\n const signatureCanvas = signatureCanvasRef.current\n if (\n !annotationContentElement ||\n !bmSignaturePadElement ||\n !signatureCanvas ||\n typeof imageSrc !== 'string'\n ) {\n return\n }\n const canvasElement = signatureCanvas.getCanvas()\n\n // Disable scrolling to allow for smooth drawing\n scrollingService.disableScrolling()\n\n const maxWidth = annotationContentElement.clientWidth\n const maxHeight = annotationContentElement.clientHeight\n\n const i = new Image()\n i.onload = function () {\n const imageWidth = i.width\n const imageHeight = i.height\n let canvasWidth = imageWidth\n let canvasHeight = imageHeight\n\n if (imageWidth > maxWidth || imageHeight > maxHeight) {\n const widthRatio = maxWidth / imageWidth\n const heightRatio = maxHeight / imageHeight\n const ratio = Math.min(widthRatio, heightRatio)\n\n canvasWidth = ratio * imageWidth\n canvasHeight = ratio * imageHeight\n }\n\n bmSignaturePadElement.style.width = `${canvasWidth}px`\n bmSignaturePadElement.style.height = `${canvasHeight}px`\n bmSignaturePadElement.style.backgroundSize = 'cover'\n bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`\n canvasElement.width = canvasWidth\n canvasElement.height = canvasHeight\n }\n console.log('imageSrc', imageSrc)\n i.src = imageSrc\n\n return () => {\n scrollingService.enableScrolling()\n }\n }, [imageSrc])\n\n return (\n <div className=\"modal is-active\">\n <div className=\"modal-background-faded\"></div>\n <div className=\"ob-annotation\">\n <div className=\"ob-annotation__buttons ob-annotation__buttons-colours\">\n {annotationButtonColours.map((colour, index) => {\n return (\n <button\n key={index}\n type=\"button\"\n className={clsx(\n 'button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button',\n {\n 'is-selected': penColour === colour,\n },\n )}\n onClick={() => setPenColour(colour)}\n style={{ backgroundColor: colour }}\n />\n )\n })}\n </div>\n <div\n ref={annotationContentElementRef}\n className=\"ob-annotation__content\"\n >\n <div\n ref={bmSignaturePadRef}\n className=\"ob-annotation__signature-pad cypress-annotation-signature-pad\"\n >\n <SignatureCanvas\n ref={signatureCanvasRef}\n clearOnResize={false}\n // @ts-expect-error ???\n onEnd={setDirty}\n penColor={penColour}\n />\n </div>\n </div>\n <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n <button\n type=\"button\"\n className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button\"\n onClick={handleCancelAnnotation}\n >\n Cancel\n </button>\n <button\n type=\"button\"\n className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button\"\n disabled={!isDirty}\n onClick={handleSaveAnnotation}\n >\n Save\n </button>\n </div>\n </div>\n </div>\n )\n}\n\nexport default React.memo(AnnotationModal)\n"]}

package/dist/components/{AutocompleteDropdown.d.ts → renderer/AutocompleteDropdown.d.ts} RENAMED Viewed

File without changes

package/dist/components/{AutocompleteDropdown.js → renderer/AutocompleteDropdown.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import useBooleanState from '../hooks/useBooleanState';
+import useBooleanState from '../../hooks/useBooleanState';
 import { Sentry } from '@oneblink/apps';
 function AutocompleteDropdown({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, }) {
     const optionsContainerElement = React.useRef(null);

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

@@ -0,0 +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'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { Sentry } from '@oneblink/apps'\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}\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}: Props<T>) {\n const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n const [isDirty, setIsDirty] = React.useState(false)\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 (event, option: AutocompleteOption<T>) => {\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 setIsDirty(true)\n setError(null)\n onClose()\n\n if (!value && Array.isArray(options)) {\n // If there is no option currently selected but the typed in label\n // matches an option's label, set that option as the value, otherwise remove label\n if (label) {\n const lowerCase = label.toLowerCase()\n const option = options.find(\n (option) => option.label.toLowerCase() === lowerCase,\n )\n if (option) {\n console.log('Setting value after blurring away from autocomplete')\n onSelectOption(option)\n return\n }\n }\n console.log('Removing label after blurring away from autocomplete')\n onChangeLabel('')\n }\n }, [label, onChangeLabel, onClose, onSelectOption, options, value])\n\n const onKeyDown = React.useCallback(\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 (e) => {\n const newLabel = e.target.value\n onOpen()\n setCurrentFocusedOptionIndex(0)\n\n // Remove value when changing label\n onChangeValue(undefined)\n onChangeLabel(newLabel)\n },\n [onChangeLabel, onChangeValue, 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 const isShowingLoading = isFetchingOptions || !!isLoading\n const isShowingValid = !isShowingLoading && value !== undefined\n const isShowingError = !isShowingLoading && !!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=\"off\"\n className=\"cypress-autocomplete-control input ob-input\"\n required={required}\n value={label}\n disabled={disabled}\n onFocus={onFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n onChange={handleChangeLabel}\n />\n {isShowingValid && (\n <span className=\" ob-input-icon icon is-small is-right\">\n <i className=\"material-icons is-size-5 has-text-success\">\n check\n </i>\n </span>\n )}\n {isShowingError && (\n <span className=\" ob-input-icon icon is-small is-right\">\n <i className=\"material-icons is-size-5 has-text-danger\">\n error\n </i>\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 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 </div>\n </div>\n </div>\n\n {(isDirty || displayValidationMessage) &&\n !!validationMessage &&\n !isShowingLoading && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\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(new RegExp('(' + phrase + ')', 'gi'), '<b>$1</b>')\n }\n\n return text\n}\n"]}

package/dist/components/{CopyToClipboardButton.d.ts → renderer/CopyToClipboardButton.d.ts} RENAMED Viewed

File without changes

package/dist/components/{CopyToClipboardButton.js → renderer/CopyToClipboardButton.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import utilsService from '../services/utils-service';
+import utilsService from '../../services/utils-service';
 function CopyToClipboardButton({ className, text, isInputButton }) {
     const copy = React.useCallback(() => {
         utilsService.copyToClipboard(text);

package/dist/components/renderer/CopyToClipboardButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CopyToClipboardButton.js","sourceRoot":"","sources":["../../../src/components/renderer/CopyToClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAQvD,SAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAS;IACtE,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,OAAO,CACL,gCAAQ,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ;QACxD,iCAAa;QACb,8BAAM,SAAS,EAAC,MAAM;YACpB,2BAAG,SAAS,EAAC,gBAAgB,gBAAc,CACtC;QACP,8BAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,iBAExD,CACA,CACV,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport utilsService from '../../services/utils-service'\n\ntype Props = {\n text: string\n className?: string\n isInputButton?: boolean\n}\n\nfunction CopyToClipboardButton({ className, text, isInputButton }: Props) {\n const copy = React.useCallback(() => {\n utilsService.copyToClipboard(text)\n }, [text])\n return (\n <button onClick={copy} className={className} type=\"button\">\n <span></span>\n <span className=\"icon\">\n <i className=\"material-icons\">file_copy</i>\n </span>\n <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n  Copy\n </span>\n </button>\n )\n}\n\nexport default React.memo(CopyToClipboardButton)\n"]}

package/dist/components/{CustomisableButtonInner.d.ts → renderer/CustomisableButtonInner.d.ts} RENAMED Viewed

File without changes

package/dist/components/{CustomisableButtonInner.js → renderer/CustomisableButtonInner.js} RENAMED Viewed

File without changes

package/dist/components/renderer/CustomisableButtonInner.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CustomisableButtonInner.js","sourceRoot":"","sources":["../../../src/components/renderer/CustomisableButtonInner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAS,EAAE,EAAE;IACpD,OAAO,CACL;QACE,8BAAM,SAAS,EAAC,8BAA8B;YAC3C,CAAC,CAAC,IAAI,IAAI,2BAAG,SAAS,EAAC,gBAAgB,IAAE,IAAI,CAAK;YACnD,kCAAO,KAAK,CAAQ,CACf,CACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\ntype Props = {\n label: string\n icon?: string\n}\n\nconst CustomisableButton = ({ label, icon }: Props) => {\n return (\n <>\n <span className=\"ob-customisable-button-inner\">\n {!!icon && <i className=\"material-icons\">{icon}</i>}\n <span>{label}</span>\n </span>\n </>\n )\n}\n\nexport default React.memo<Props>(CustomisableButton)\n"]}

package/dist/components/{FormElementLabelContainer.d.ts → renderer/FormElementLabelContainer.d.ts} RENAMED Viewed

File without changes

package/dist/components/{FormElementLabelContainer.js → renderer/FormElementLabelContainer.js} RENAMED Viewed

File without changes

package/dist/components/renderer/FormElementLabelContainer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AAGvB,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO;YACR,+BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,gCAAgC,EAAE,QAAQ;iBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,IAEV,OAAO,CAAC,KAAK,CACR;YACP,OAAO,CAAC,IAAI,IAAI,CACf,oBAAC,OAAO,IACN,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK;gBAEtB,2BAAG,SAAS,EAAC,mDAAmD,WAE5D,CACI,CACX,CACG;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\n\nfunction FormElementLabelContainer({\n className,\n element,\n id,\n required,\n children,\n leading,\n}: {\n className: string\n element: FormTypes.FormElementBase\n id: string\n required: boolean\n children: React.ReactNode\n leading?: React.ReactNode\n}) {\n return (\n <div className={clsx('ob-form__element', className)}>\n <div className=\"label ob-label__container\">\n {leading}\n <label\n className={clsx('ob-label', {\n 'ob-label__required is-required': required,\n })}\n htmlFor={id}\n >\n {element.label}\n </label>\n {element.hint && (\n <Tooltip\n title={element.hint}\n arrow\n enterTouchDelay={0}\n leaveTouchDelay={10000}\n >\n <i className=\"material-icons has-text-grey-light ob-label__hint\">\n info\n </i>\n </Tooltip>\n )}\n </div>\n {children}\n </div>\n )\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}

package/dist/components/{FormElementOptions.d.ts → renderer/FormElementOptions.d.ts} RENAMED Viewed

File without changes

package/dist/components/{FormElementOptions.js → renderer/FormElementOptions.js} RENAMED Viewed

File without changes

package/dist/components/renderer/FormElementOptions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormElementOptions.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementOptions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,SAAS,MAAM,aAAa,CAAA;AAOnC,SAAS,kBAAkB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAS;IACtD,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CACL;YACE,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,EAAC,KAAK,SAAa,CACvD,CACP,CAAA;KACF;IAED,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACnB,OAAO,CACL;YACE,6BAAK,SAAS,EAAC,yBAAyB,8EAGlC,CACF,CACP,CAAA;KACF;IAED,OAAO,iCAAM,QAAQ,CAAO,CAAA;AAC9B,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport OnLoading from './OnLoading'\n\ntype Props = {\n options: FormTypes.ChoiceElementOption[] | undefined\n children: React.ReactNode\n}\n\nfunction FormElementOptions({ options, children }: Props) {\n if (!options) {\n return (\n <div>\n <OnLoading className=\"has-text-centered\" small></OnLoading>\n </div>\n )\n }\n\n if (!options.length) {\n return (\n <div>\n <div className=\"has-text-grey is-size-7\">\n We were unable to load your options. Please contact your\n administrator.\n </div>\n </div>\n )\n }\n\n return <div>{children}</div>\n}\n\nexport default React.memo(FormElementOptions)\n"]}

package/dist/components/{LookupButton.d.ts → renderer/LookupButton.d.ts} RENAMED Viewed

File without changes

package/dist/components/{LookupButton.js → renderer/LookupButton.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import useLookupNotification from '../hooks/useLookupNotification';
-import { lookupValidationMessage } from '../services/form-validation';
-import useFormIsReadOnly from '../hooks/useFormIsReadOnly';
+import useLookupNotification from '../../hooks/useLookupNotification';
+import { lookupValidationMessage } from '../../services/form-validation';
+import useFormIsReadOnly from '../../hooks/useFormIsReadOnly';
 function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, }) {
     const { isLookup, onLookup, isDisabled } = useLookupNotification();
     const formIsReadOnly = useFormIsReadOnly();

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

@@ -0,0 +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,uBAAuB,EAAE,MAAM,gCAAgC,CAAA;AACxE,OAAO,iBAAiB,MAAM,+BAA+B,CAAA;AAQ7D,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,aAAa,GACP;IACN,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAA;IAClE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,MAAM,GAAG,CACb,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,2DAA2D,EAC3D;YACE,gBAAgB,EAAE,aAAa;YAC/B,WAAW,EAAE,CAAC,aAAa;YAC3B,kBAAkB,EAAE,YAAY;SACjC,CACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EACN,cAAc;YACd,UAAU;YACV,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,CAAC,iBAAiB,IAAI,iBAAiB,KAAK,uBAAuB,CAAC;QAGvE,aAAa,IAAI,iCAAa;QAC/B,8BAAM,SAAS,EAAC,MAAM;YACpB,2BAAG,SAAS,EAAC,gBAAgB,aAAW,CACnC;QACP,8BAAM,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,mBAExD,CACA,CACV,CAAA;IAED,IAAI,aAAa,EAAE;QACjB,OAAO,6BAAK,SAAS,EAAC,SAAS,IAAE,MAAM,CAAO,CAAA;KAC/C;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 { lookupValidationMessage } from '../../services/form-validation'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\ntype Props = {\n value: unknown | undefined\n validationMessage: string | undefined\n hasMarginTop?: boolean\n isInputButton?: boolean\n}\n\nfunction LookupButton({\n value,\n validationMessage,\n hasMarginTop,\n isInputButton,\n}: Props) {\n const { isLookup, onLookup, isDisabled } = useLookupNotification()\n const formIsReadOnly = useFormIsReadOnly()\n if (!isLookup) {\n return null\n }\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-input-addon': isInputButton,\n 'ob-button': !isInputButton,\n 'has-margin-top-8': hasMarginTop,\n },\n )}\n onClick={() => onLookup(value)}\n disabled={\n formIsReadOnly ||\n isDisabled ||\n value === undefined ||\n (!!validationMessage && validationMessage !== lookupValidationMessage)\n }\n >\n {isInputButton && <span></span>}\n <span className=\"icon\">\n <i className=\"material-icons\">search</i>\n </span>\n <span className={isInputButton ? 'is-hidden-mobile' : undefined}>\n  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/components/{LookupNotification.d.ts → renderer/LookupNotification.d.ts} RENAMED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementLookupHandler } from '../types/form';
+import { FormElementLookupHandler } from '../../types/form';
 declare type Props = {
     autoLookupValue?: unknown;
     stringifyAutoLookupValue?: (autoLookupValue: unknown) => string;

package/dist/components/{LookupNotification.js → renderer/LookupNotification.js} RENAMED Viewed

@@ -2,17 +2,17 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { formService } from '@oneblink/apps';
 import { generateHeaders } from '@oneblink/apps/dist/services/fetch';
-import useIsOffline from '../hooks/useIsOffline';
+import useIsOffline from '../../hooks/useIsOffline';
 import OnLoading from './OnLoading';
-import generateDefaultData from '../services/generate-default-data';
-import { LookupNotificationContext } from '../hooks/useLookupNotification';
-import useFormDefinition from '../hooks/useFormDefinition';
-import useInjectPages from '../hooks/useInjectPages';
-import useFormSubmissionModel from '../hooks/useFormSubmissionModelContext';
-import useExecutedLookupCallback from '../hooks/useExecutedLookupCallback';
-import useFormIsReadOnly from '../hooks/useFormIsReadOnly';
+import generateDefaultData from '../../services/generate-default-data';
+import { LookupNotificationContext } from '../../hooks/useLookupNotification';
+import useFormDefinition from '../../hooks/useFormDefinition';
+import useInjectPages from '../../hooks/useInjectPages';
+import useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext';
+import useExecutedLookupCallback from '../../hooks/useExecutedLookupCallback';
+import useFormIsReadOnly from '../../hooks/useFormIsReadOnly';
 import { Sentry } from '@oneblink/apps';
-import useIsMounted from '../hooks/useIsMounted';
+import useIsMounted from '../../hooks/useIsMounted';
 function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue, element, onLookup, children, }) {
     const isMounted = useIsMounted();
     const isOffline = useIsOffline();