@oneblink/apps-react 4.0.0-beta.1 → 4.0.0-beta.10

package/dist/components/formStore/OneBlinkFormStoreTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkFormStoreTable.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { styled, Tooltip } from '@mui/material'\nimport {\n  FilterList as FilterListIcon,\n  Warning as WarningIcon,\n  ArrowDownward,\n} from '@mui/icons-material'\nimport { IsHoveringProvider } from '../../hooks/useIsHovering'\nimport HeaderCellMoreButton from './table/HeaderCellMoreButton'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nconst SortingIcon = styled(ArrowDownward)(({ theme }) => ({\n  transition: theme.transitions.create('transform'),\n}))\n\nconst Table = styled('div')(({ theme }) => ({\n  display: 'inline-block',\n  backgroundColor: theme.palette.background.paper,\n  fontSize: theme.typography.body2.fontSize,\n  '& .ob-form-store-table-row__alternate': {\n    backgroundColor: theme.palette.action.hover,\n  },\n  '& .tc': {\n    padding: theme.spacing(1),\n    borderBottom: '1px solid',\n    borderBottomColor: theme.palette.divider,\n    display: 'flex',\n    alignItems: 'center',\n    '&.is-clickable': {\n      cursor: 'pointer',\n      transition: theme.transitions.create('transform'),\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover,\n      },\n    },\n  },\n  '& .td': {\n    position: 'relative',\n    borderRight: '1px solid',\n    borderRightColor: theme.palette.divider,\n    overflowX: 'hidden',\n    // minus 1 to cater for the border\n    minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n    '&.is-resizing': {\n      borderRightStyle: 'dashed',\n    },\n  },\n  '& .th': {\n    position: 'relative',\n    fontWeight: theme.typography.fontWeightBold,\n    paddingRight: 0,\n    borderBottomWidth: '2px',\n    '& .th-content': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      borderRight: '1px solid',\n      borderRightColor: theme.palette.divider,\n      paddingRight: theme.spacing(),\n      '& .th-label': {\n        display: 'inline-flex',\n        alignItems: 'center',\n        '& .th-icon': {\n          marginLeft: theme.spacing(),\n        },\n      },\n    },\n    '& .resizer': {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderWidth: 0,\n      borderLeftStyle: 'solid',\n      borderRightStyle: 'solid',\n      borderColor: theme.palette.divider,\n      paddingTop: theme.spacing(),\n      paddingBottom: theme.spacing(),\n      paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n      position: 'absolute',\n      right: 0,\n      top: theme.spacing(0.5),\n      bottom: theme.spacing(0.5),\n      transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n      zIndex: 1,\n      // prevents from scrolling while dragging on touch devices\n      touchAction: 'none',\n      '&:hover': {\n        borderWidth: '1px',\n      },\n      '&.is-resizing': {\n        borderWidth: '1px',\n        borderColor: theme.palette.grey[700],\n      },\n    },\n  },\n}))\n\nfunction OneBlinkFormStoreTable() {\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups: [parentHeaderGroup],\n    rows,\n    prepareRow,\n    onChangeParameters,\n  } = useFormStoreTableContext()\n\n  if (!parentHeaderGroup) {\n    return null\n  }\n\n  let alternateBackground = false\n\n  return (\n    <>\n      <Table {...getTableProps()} className=\"ob-form-store-table\">\n        <div className=\"thead\">\n          <div\n            {...parentHeaderGroup.getHeaderGroupProps()}\n            className=\"tr ob-form-store-table-header-row\"\n          >\n            {\n              // Loop over the headers in each row\n              parentHeaderGroup.headers.map((headerGroup) => {\n                const sortingProperty = headerGroup.sorting?.property\n                const sortingDirection = headerGroup.sorting?.direction\n\n                return (\n                  <Tooltip\n                    title={headerGroup.tooltip || ''}\n                    arrow\n                    key={headerGroup.id}\n                    PopperProps={{\n                      sx: {\n                        zIndex: 'drawer',\n                      },\n                    }}\n                  >\n                    <div\n                      className={clsx('th tc ob-form-store-table-header-cell', {\n                        'is-clickable': !!sortingProperty,\n                      })}\n                      onClick={\n                        sortingProperty\n                          ? () => {\n                              onChangeParameters((currentParameters) => {\n                                switch (sortingDirection) {\n                                  case 'ascending': {\n                                    return {\n                                      ...currentParameters,\n                                      sorting: [\n                                        {\n                                          property: sortingProperty,\n                                          direction: 'descending',\n                                        },\n                                      ],\n                                    }\n                                  }\n                                  case 'descending': {\n                                    return {\n                                      ...currentParameters,\n                                      sorting: undefined,\n                                    }\n                                  }\n                                  default: {\n                                    return {\n                                      ...currentParameters,\n                                      sorting: [\n                                        {\n                                          property: sortingProperty,\n                                          direction: 'ascending',\n                                        },\n                                      ],\n                                    }\n                                  }\n                                }\n                              }, false)\n                            }\n                          : undefined\n                      }\n                      // Apply the header cell props\n                      {...headerGroup.getHeaderProps()}\n                    >\n                      <IsHoveringProvider className=\"th-content\">\n                        <div className=\"th-label\">\n                          <span>{headerGroup.headerText}</span>\n                          {sortingDirection && (\n                            <SortingIcon\n                              fontSize=\"small\"\n                              color=\"primary\"\n                              sx={\n                                sortingDirection === 'ascending'\n                                  ? {\n                                      transform: 'rotate(180deg)',\n                                    }\n                                  : undefined\n                              }\n                              className=\"th-icon\"\n                            />\n                          )}\n                          {headerGroup.filter?.isInvalid ? (\n                            <Tooltip\n                              title={\n                                headerGroup.filter?.validationMessage || ''\n                              }\n                            >\n                              <WarningIcon\n                                fontSize=\"small\"\n                                color=\"error\"\n                                className=\"th-icon\"\n                              />\n                            </Tooltip>\n                          ) : headerGroup.filter?.value ? (\n                            <FilterListIcon\n                              fontSize=\"small\"\n                              color=\"primary\"\n                              className=\"th-icon\"\n                            />\n                          ) : null}\n                        </div>\n                        <HeaderCellMoreButton\n                          headerGroup={headerGroup}\n                          onHide={headerGroup.toggleHidden}\n                        />\n                        <div\n                          {...headerGroup.getResizerProps()}\n                          className={clsx('resizer', {\n                            'is-resizing': headerGroup.isResizing,\n                          })}\n                          onClick={(event) => {\n                            event.stopPropagation()\n                          }}\n                        />\n                      </IsHoveringProvider>\n                    </div>\n                  </Tooltip>\n                )\n              })\n            }\n          </div>\n        </div>\n        <div {...getTableBodyProps()} className=\"tbody\">\n          {\n            // Loop over the table rows\n            rows.map((row, index) => {\n              if (\n                rows[index - 1]?.original.submissionId !==\n                row.original.submissionId\n              ) {\n                alternateBackground = !alternateBackground\n              }\n              // Prepare the row for display\n              prepareRow(row)\n              return (\n                // Apply the row props\n                <div\n                  {...row.getRowProps()}\n                  key={row.id}\n                  className={clsx('tr ob-form-store-table-row', {\n                    'ob-form-store-table-row__alternate': alternateBackground,\n                  })}\n                >\n                  {\n                    // Loop over the rows cells\n                    row.cells.map((cell) => {\n                      // Apply the cell props\n                      return (\n                        <IsHoveringProvider\n                          {...cell.getCellProps()}\n                          key={cell.column.id}\n                          className={clsx(\n                            'td tc ob-form-store-table-row-cell',\n                            {\n                              'is-resizing': cell.column.isResizing,\n                            },\n                          )}\n                        >\n                          {\n                            // Render the cell contents\n                            cell.render('Cell')\n                          }\n                        </IsHoveringProvider>\n                      )\n                    })\n                  }\n                </div>\n              )\n            })\n          }\n        </div>\n      </Table>\n    </>\n  )\n}\n\nexport default React.memo(OneBlinkFormStoreTable)\n"]}
+{"version":3,"file":"OneBlinkFormStoreTable.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { styled, Tooltip } from '@mui/material'\nimport {\n  FilterList as FilterListIcon,\n  Warning as WarningIcon,\n  ArrowDownward,\n} from '@mui/icons-material'\nimport { IsHoveringProvider } from '../../hooks/useIsHovering'\nimport HeaderCellMoreButton from './table/HeaderCellMoreButton'\nimport useFormStoreTableContext from './useFormStoreTableContext'\n\nconst SortingIcon = styled(ArrowDownward)(({ theme }) => ({\n  transition: theme.transitions.create('transform'),\n}))\n\nconst Table = styled('div')(({ theme }) => ({\n  display: 'inline-block',\n  backgroundColor: theme.palette.background.paper,\n  fontSize: theme.typography.body2.fontSize,\n  '& .ob-form-store-table-row__alternate': {\n    backgroundColor: theme.palette.action.hover,\n  },\n  '& .tc': {\n    padding: theme.spacing(1),\n    borderBottom: '1px solid',\n    borderBottomColor: theme.palette.divider,\n    display: 'flex',\n    alignItems: 'center',\n    '&.is-clickable': {\n      cursor: 'pointer',\n      transition: theme.transitions.create('transform'),\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover,\n      },\n    },\n  },\n  '& .td': {\n    position: 'relative',\n    borderRight: '1px solid',\n    borderRightColor: theme.palette.divider,\n    overflowX: 'hidden',\n    // minus 1 to cater for the border\n    minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n    '&.is-resizing': {\n      borderRightStyle: 'dashed',\n    },\n  },\n  '& .th': {\n    position: 'relative',\n    fontWeight: theme.typography.fontWeightBold,\n    paddingRight: 0,\n    borderBottomWidth: '2px',\n    '& .th-content': {\n      flex: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      borderRight: '1px solid',\n      borderRightColor: theme.palette.divider,\n      paddingRight: theme.spacing(),\n      '& .th-label': {\n        display: 'inline-flex',\n        alignItems: 'center',\n        '& .th-icon': {\n          marginLeft: theme.spacing(),\n        },\n      },\n    },\n    '& .resizer': {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderWidth: 0,\n      borderLeftStyle: 'solid',\n      borderRightStyle: 'solid',\n      borderColor: theme.palette.divider,\n      paddingTop: theme.spacing(),\n      paddingBottom: theme.spacing(),\n      paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n      position: 'absolute',\n      right: 0,\n      top: theme.spacing(0.5),\n      bottom: theme.spacing(0.5),\n      transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n      zIndex: 1,\n      // prevents from scrolling while dragging on touch devices\n      touchAction: 'none',\n      '&:hover': {\n        borderWidth: '1px',\n      },\n      '&.is-resizing': {\n        borderWidth: '1px',\n        borderColor: theme.palette.grey[700],\n      },\n    },\n  },\n}))\n\nfunction OneBlinkFormStoreTable() {\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups: [parentHeaderGroup],\n    rows,\n    prepareRow,\n    onChangeParameters,\n  } = useFormStoreTableContext()\n\n  if (!parentHeaderGroup) {\n    return null\n  }\n\n  let alternateBackground = false\n\n  return (\n    <>\n      <Table {...getTableProps()} className=\"ob-form-store-table\">\n        <div className=\"thead\">\n          <div\n            {...parentHeaderGroup.getHeaderGroupProps()}\n            className=\"tr ob-form-store-table-header-row\"\n          >\n            {\n              // Loop over the headers in each row\n              parentHeaderGroup.headers.map((headerGroup) => {\n                const sortingProperty = headerGroup.sorting?.property\n                const sortingDirection = headerGroup.sorting?.direction\n\n                return (\n                  <Tooltip\n                    title={headerGroup.tooltip || ''}\n                    arrow\n                    key={headerGroup.id}\n                    PopperProps={{\n                      sx: {\n                        zIndex: 'drawer',\n                      },\n                    }}\n                  >\n                    <div\n                      className={clsx('th tc ob-form-store-table-header-cell', {\n                        'is-clickable': !!sortingProperty,\n                      })}\n                      onClick={\n                        sortingProperty\n                          ? () => {\n                              onChangeParameters((currentParameters) => {\n                                switch (sortingDirection) {\n                                  case 'ascending': {\n                                    return {\n                                      ...currentParameters,\n                                      sorting: [\n                                        {\n                                          property: sortingProperty,\n                                          direction: 'descending',\n                                        },\n                                      ],\n                                    }\n                                  }\n                                  case 'descending': {\n                                    return {\n                                      ...currentParameters,\n                                      sorting: undefined,\n                                    }\n                                  }\n                                  default: {\n                                    return {\n                                      ...currentParameters,\n                                      sorting: [\n                                        {\n                                          property: sortingProperty,\n                                          direction: 'ascending',\n                                        },\n                                      ],\n                                    }\n                                  }\n                                }\n                              }, false)\n                            }\n                          : undefined\n                      }\n                      // Apply the header cell props\n                      {...headerGroup.getHeaderProps()}\n                    >\n                      <IsHoveringProvider className=\"th-content\">\n                        <div className=\"th-label\">\n                          <span>{headerGroup.headerText}</span>\n                          {sortingDirection && (\n                            <SortingIcon\n                              fontSize=\"small\"\n                              color=\"primary\"\n                              sx={\n                                sortingDirection === 'ascending'\n                                  ? {\n                                      transform: 'rotate(180deg)',\n                                    }\n                                  : undefined\n                              }\n                              className=\"th-icon\"\n                            />\n                          )}\n                          {headerGroup.filter?.isInvalid ? (\n                            <Tooltip\n                              title={\n                                headerGroup.filter?.validationMessage || ''\n                              }\n                            >\n                              <WarningIcon\n                                fontSize=\"small\"\n                                color=\"error\"\n                                className=\"th-icon\"\n                              />\n                            </Tooltip>\n                          ) : headerGroup.filter?.value ? (\n                            <FilterListIcon\n                              fontSize=\"small\"\n                              color=\"primary\"\n                              className=\"th-icon\"\n                            />\n                          ) : null}\n                        </div>\n                        <HeaderCellMoreButton\n                          headerGroup={headerGroup}\n                          onHide={headerGroup.toggleHidden}\n                        />\n                        <div\n                          {...headerGroup.getResizerProps()}\n                          className={clsx('resizer', {\n                            'is-resizing': headerGroup.isResizing,\n                          })}\n                          onClick={(event) => {\n                            event.stopPropagation()\n                          }}\n                        />\n                      </IsHoveringProvider>\n                    </div>\n                  </Tooltip>\n                )\n              })\n            }\n          </div>\n        </div>\n        <div {...getTableBodyProps()} className=\"tbody\">\n          {\n            // Loop over the table rows\n            rows.map((row, index) => {\n              if (\n                rows[index - 1]?.original.submissionId !==\n                row.original.submissionId\n              ) {\n                alternateBackground = !alternateBackground\n              }\n              // Prepare the row for display\n              prepareRow(row)\n              return (\n                // Apply the row props\n                <div\n                  {...row.getRowProps()}\n                  key={row.id}\n                  className={clsx('tr ob-form-store-table-row', {\n                    'ob-form-store-table-row__alternate': alternateBackground,\n                  })}\n                >\n                  {\n                    // Loop over the rows cells\n                    row.cells.map((cell) => {\n                      // Apply the cell props\n                      return (\n                        <IsHoveringProvider\n                          {...cell.getCellProps()}\n                          key={cell.column.id}\n                          className={clsx(\n                            'td tc ob-form-store-table-row-cell',\n                            {\n                              'is-resizing': cell.column.isResizing,\n                            },\n                          )}\n                        >\n                          {\n                            // Render the cell contents\n                            cell.render('Cell')\n                          }\n                        </IsHoveringProvider>\n                      )\n                    })\n                  }\n                </div>\n              )\n            })\n          }\n        </div>\n      </Table>\n    </>\n  )\n}\n\n/**\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreTable)\n"]}

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

@@ -28,5 +28,10 @@ type Props = RemainingPickerProps & {
     clearable?: boolean;
     'data-cypress'?: string;
 };
+/**
+ * @param props
+ * @returns
+ * @group Components
+ */
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/components/pickers/V4CompatibleDatePicker.js

@@ -67,5 +67,10 @@ const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate,
             },
         }, ...rest }));
 };
+/**
+ * @param props
+ * @returns
+ * @group Components
+ */
 export default React.memo(V4CompatibleDatePicker);
 //# sourceMappingURL=V4CompatibleDatePicker.js.map

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

@@ -1 +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'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n  MobileDatePickerProps<string | Date, 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?: TextFieldProps['name']\n  label?: TextFieldProps['label']\n  maxDate?: string | Date\n  maxDateMessage?: string\n  minDate?: string | Date\n  minDateMessage?: string\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: TextFieldProps['placeholder']\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?: TextFieldProps['helperText']\n  error?: TextFieldProps['error']\n  required?: TextFieldProps['required']\n  showTodayButton?: boolean\n  clearable?: boolean\n  'data-cypress'?: string\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  showTodayButton,\n  clearable,\n  value: valueProp,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [value, setValue] = React.useState<typeof valueProp>(null)\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (\n      error: Parameters<\n        Required<MobileDatePickerProps<string | Date, Date>>['onError']\n      >[0],\n    ) => {\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        valueProp instanceof Date ? valueProp.toISOString() : valueProp\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, valueProp],\n  )\n\n  const actions = React.useMemo(() => {\n    const actions: PickersActionBarAction[] = ['cancel', 'accept']\n    if (showTodayButton) {\n      actions.unshift('today')\n    }\n    if (clearable) {\n      actions.unshift('clear')\n    }\n    return actions\n  }, [clearable, showTodayButton])\n\n  React.useEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\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      onChange={setValue}\n      value={value}\n      onAccept={onAccept}\n      inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n      disabled={disabled}\n      componentsProps={{\n        actionBar: {\n          actions,\n        },\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}
+{"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'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n  MobileDatePickerProps<string | Date, 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?: TextFieldProps['name']\n  label?: TextFieldProps['label']\n  maxDate?: string | Date\n  maxDateMessage?: string\n  minDate?: string | Date\n  minDateMessage?: string\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: TextFieldProps['placeholder']\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?: TextFieldProps['helperText']\n  error?: TextFieldProps['error']\n  required?: TextFieldProps['required']\n  showTodayButton?: boolean\n  clearable?: boolean\n  'data-cypress'?: string\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  showTodayButton,\n  clearable,\n  value: valueProp,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [value, setValue] = React.useState<typeof valueProp>(null)\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (\n      error: Parameters<\n        Required<MobileDatePickerProps<string | Date, Date>>['onError']\n      >[0],\n    ) => {\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        valueProp instanceof Date ? valueProp.toISOString() : valueProp\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, valueProp],\n  )\n\n  const actions = React.useMemo(() => {\n    const actions: PickersActionBarAction[] = ['cancel', 'accept']\n    if (showTodayButton) {\n      actions.unshift('today')\n    }\n    if (clearable) {\n      actions.unshift('clear')\n    }\n    return actions\n  }, [clearable, showTodayButton])\n\n  React.useEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\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      onChange={setValue}\n      value={value}\n      onAccept={onAccept}\n      inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n      disabled={disabled}\n      componentsProps={{\n        actionBar: {\n          actions,\n        },\n      }}\n      {...rest}\n    />\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}

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

@@ -28,5 +28,10 @@ type Props = RemainingPickerProps & {
     clearable?: boolean;
     'data-cypress'?: string;
 };
+/**
+ * @param props
+ * @returns
+ * @group Components
+ */
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/components/pickers/V4CompatibleDateTimePicker.js

@@ -69,5 +69,10 @@ const V4CompatibleDateTimePicker = ({ name, label, maxDate, maxDateMessage, minD
             },
         }, ...rest }));
 };
+/**
+ * @param props
+ * @returns
+ * @group Components
+ */
 export default React.memo(V4CompatibleDateTimePicker);
 //# sourceMappingURL=V4CompatibleDateTimePicker.js.map

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

@@ -1 +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'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n  MobileDateTimePickerProps<string | Date, 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?: TextFieldProps['name']\n  label?: TextFieldProps['label']\n  maxDate?: string | Date\n  maxDateMessage?: string\n  minDate?: string | Date\n  minDateMessage?: string\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: TextFieldProps['placeholder']\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?: TextFieldProps['helperText']\n  error?: TextFieldProps['error']\n  required?: TextFieldProps['required']\n  showTodayButton?: boolean\n  clearable?: boolean\n  'data-cypress'?: string\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  onBlur,\n  disabled,\n  startIconButton,\n  endIconButton,\n  iconButtonEdge,\n  iconButtonSize,\n  helperText: helperTextProp,\n  error,\n  required,\n  showTodayButton,\n  clearable,\n  value: valueProp,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [value, setValue] = React.useState<typeof valueProp>(null)\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (\n      error: Parameters<\n        Required<MobileDateTimePickerProps<string | Date, Date>>['onError']\n      >[0],\n    ) => {\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    return maxDate\n  }, [maxDate])\n  const convertedMinDate = React.useMemo(() => {\n    if (typeof minDate === 'string') {\n      return new Date(minDate)\n    }\n    return minDate\n  }, [minDate])\n\n  const onAccept = React.useCallback(\n    (date: Date | null) => {\n      const currentValue =\n        valueProp instanceof Date ? valueProp.toISOString() : valueProp\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, valueProp],\n  )\n\n  const actions = React.useMemo(() => {\n    const actions: PickersActionBarAction[] = ['cancel', 'accept']\n    if (showTodayButton) {\n      actions.unshift('today')\n    }\n    if (clearable) {\n      actions.unshift('clear')\n    }\n    return actions\n  }, [clearable, showTodayButton])\n\n  React.useEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\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          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      timeIcon={<AccessTime />}\n      dateRangeIcon={<DateRange />}\n      onChange={setValue}\n      value={value}\n      onAccept={onAccept}\n      inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n      disabled={disabled}\n      componentsProps={{\n        actionBar: {\n          actions,\n        },\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}
+{"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'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n  MobileDateTimePickerProps<string | Date, 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?: TextFieldProps['name']\n  label?: TextFieldProps['label']\n  maxDate?: string | Date\n  maxDateMessage?: string\n  minDate?: string | Date\n  minDateMessage?: string\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: TextFieldProps['placeholder']\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?: TextFieldProps['helperText']\n  error?: TextFieldProps['error']\n  required?: TextFieldProps['required']\n  showTodayButton?: boolean\n  clearable?: boolean\n  'data-cypress'?: string\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  onBlur,\n  disabled,\n  startIconButton,\n  endIconButton,\n  iconButtonEdge,\n  iconButtonSize,\n  helperText: helperTextProp,\n  error,\n  required,\n  showTodayButton,\n  clearable,\n  value: valueProp,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [value, setValue] = React.useState<typeof valueProp>(null)\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (\n      error: Parameters<\n        Required<MobileDateTimePickerProps<string | Date, Date>>['onError']\n      >[0],\n    ) => {\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    return maxDate\n  }, [maxDate])\n  const convertedMinDate = React.useMemo(() => {\n    if (typeof minDate === 'string') {\n      return new Date(minDate)\n    }\n    return minDate\n  }, [minDate])\n\n  const onAccept = React.useCallback(\n    (date: Date | null) => {\n      const currentValue =\n        valueProp instanceof Date ? valueProp.toISOString() : valueProp\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, valueProp],\n  )\n\n  const actions = React.useMemo(() => {\n    const actions: PickersActionBarAction[] = ['cancel', 'accept']\n    if (showTodayButton) {\n      actions.unshift('today')\n    }\n    if (clearable) {\n      actions.unshift('clear')\n    }\n    return actions\n  }, [clearable, showTodayButton])\n\n  React.useEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\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          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      timeIcon={<AccessTime />}\n      dateRangeIcon={<DateRange />}\n      onChange={setValue}\n      value={value}\n      onAccept={onAccept}\n      inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n      disabled={disabled}\n      componentsProps={{\n        actionBar: {\n          actions,\n        },\n      }}\n      {...rest}\n    />\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo<Props>(V4CompatibleDateTimePicker)\n"]}

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

@@ -24,5 +24,10 @@ type Props = RemainingPickerProps & {
     clearable?: boolean;
     'data-cypress'?: string;
 };
+/**
+ * @param props
+ * @returns
+ * @group Components
+ */
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/components/pickers/V4CompatibleTimePicker.js

@@ -50,5 +50,10 @@ const V4CompatibleTimePicker = ({ name, label, margin, size, placeholder, InputP
             },
         }, ...rest }));
 };
+/**
+ * @param props
+ * @returns
+ * @group Components
+ */
 export default React.memo(V4CompatibleTimePicker);
 //# sourceMappingURL=V4CompatibleTimePicker.js.map

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

@@ -1 +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'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n  MobileTimePickerProps<string | Date, 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?: TextFieldProps['name']\n  label?: TextFieldProps['label']\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: TextFieldProps['placeholder']\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?: TextFieldProps['helperText']\n  error?: TextFieldProps['error']\n  required?: TextFieldProps['required']\n  showTodayButton?: boolean\n  clearable?: boolean\n  'data-cypress'?: string\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  showTodayButton,\n  clearable,\n  value: valueProp,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [value, setValue] = React.useState<typeof valueProp>(null)\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (\n      error: Parameters<\n        Required<MobileTimePickerProps<string | Date, Date>>['onError']\n      >[0],\n    ) => {\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        valueProp instanceof Date ? valueProp.toISOString() : valueProp\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, valueProp],\n  )\n\n  const actions = React.useMemo(() => {\n    const actions: PickersActionBarAction[] = ['cancel', 'accept']\n    if (showTodayButton) {\n      actions.unshift('today')\n    }\n    if (clearable) {\n      actions.unshift('clear')\n    }\n    return actions\n  }, [clearable, showTodayButton])\n\n  React.useEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\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      onChange={setValue}\n      value={value}\n      onAccept={onAccept}\n      disabled={disabled}\n      componentsProps={{\n        actionBar: {\n          actions,\n        },\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}
+{"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'\nimport { PickersActionBarAction } from '@mui/x-date-pickers/PickersActionBar/PickersActionBar'\n\ntype RemainingPickerProps = Omit<\n  MobileTimePickerProps<string | Date, 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?: TextFieldProps['name']\n  label?: TextFieldProps['label']\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: TextFieldProps['placeholder']\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?: TextFieldProps['helperText']\n  error?: TextFieldProps['error']\n  required?: TextFieldProps['required']\n  showTodayButton?: boolean\n  clearable?: boolean\n  'data-cypress'?: string\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  showTodayButton,\n  clearable,\n  value: valueProp,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [value, setValue] = React.useState<typeof valueProp>(null)\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (\n      error: Parameters<\n        Required<MobileTimePickerProps<string | Date, Date>>['onError']\n      >[0],\n    ) => {\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        valueProp instanceof Date ? valueProp.toISOString() : valueProp\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, valueProp],\n  )\n\n  const actions = React.useMemo(() => {\n    const actions: PickersActionBarAction[] = ['cancel', 'accept']\n    if (showTodayButton) {\n      actions.unshift('today')\n    }\n    if (clearable) {\n      actions.unshift('clear')\n    }\n    return actions\n  }, [clearable, showTodayButton])\n\n  React.useEffect(() => {\n    setValue(valueProp)\n  }, [valueProp])\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      onChange={setValue}\n      value={value}\n      onAccept={onAccept}\n      disabled={disabled}\n      componentsProps={{\n        actionBar: {\n          actions,\n        },\n      }}\n      {...rest}\n    />\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo<Props>(V4CompatibleTimePicker)\n"]}

package/dist/components/renderer/LookupButton.js

@@ -4,7 +4,7 @@ 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 { isLookup, onLookup, isDisabled } = useLookupNotification(value);
     const formIsReadOnly = useFormIsReadOnly();
     if (!isLookup) {
         return null;
@@ -13,7 +13,7 @@ function LookupButton({ value, validationMessage, hasMarginTop, isInputButton, }
             'is-input-addon': isInputButton,
             'ob-button': !isInputButton,
             'has-margin-top-8': hasMarginTop,
-        }), onClick: () => onLookup(value), disabled: formIsReadOnly ||
+        }), onClick: () => onLookup(), disabled: formIsReadOnly ||
             isDisabled ||
             value === undefined ||
             (!!validationMessage && validationMessage !== lookupValidationMessage) },

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

@@ -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,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        &nbsp;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"]}
+{"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,CAAC,KAAK,CAAC,CAAA;IACvE,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,EAAE,EACzB,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(value)\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()}\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        &nbsp;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/renderer/LookupNotification.js

@@ -64,7 +64,7 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
             };
         });
     }, [element, injectPagesAfter, onLookup]);
-    const triggerLookup = React.useCallback(async (newValue) => {
+    const triggerLookup = React.useCallback(async (newValue, abortSignal) => {
         // No lookups for read only forms
         if (formIsReadOnly)
             return;
@@ -83,11 +83,11 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
         setHasLookupFailed(false);
         setHasLookupSucceeded(false);
         setLookupErrorHTML(null);
-        const abortController = new AbortController();
-        setOnCancelLookup(() => () => abortController.abort());
+        const cancelAbortController = new AbortController();
+        setOnCancelLookup(() => () => cancelAbortController.abort());
         // After certain amount of time, show the cancel button
         const isCancellableTimeout = setTimeout(() => {
-            setIsCancellable(!abortController.signal.aborted);
+            setIsCancellable(!cancelAbortController.signal.aborted);
         }, 5000);
         const payload = {
             element,
@@ -99,30 +99,34 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
         };
         try {
             const [dataLookupResult, elementLookupResult] = await Promise.all([
-                fetchLookup(element.dataLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortController.signal),
-                fetchLookup(element.elementLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortController.signal),
+                fetchLookup(element.dataLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortSignal),
+                fetchLookup(element.elementLookupId, definition === null || definition === void 0 ? void 0 : definition.organisationId, definition === null || definition === void 0 ? void 0 : definition.formsAppEnvironmentId, payload, abortSignal),
             ]);
+            // If the user clicked cancel, we stop showing lookup.
+            if (cancelAbortController.signal.aborted) {
+                setIsLookingUp(false);
+                return;
+            }
             mergeLookupData(newValue, dataLookupResult, elementLookupResult);
             if (isMounted.current) {
                 setHasLookupSucceeded(true);
             }
             // After certain amount of time, hide the lookup succeeded message
-            await new Promise((resolve) => setTimeout(() => resolve(false), 750));
-            if (isMounted.current) {
-                setIsLookingUp(false);
-            }
+            setTimeout(() => {
+                if (isMounted.current && !abortSignal.aborted) {
+                    setIsLookingUp(false);
+                }
+            }, 750);
         }
         catch (error) {
-            executeLookupFailed(element);
             if (!isMounted.current) {
                 return;
             }
-            // Cancelling will throw an error.
-            if (abortController.signal.aborted) {
+            if (abortSignal.aborted) {
                 console.log('Fetch aborted');
-                setIsLookingUp(false);
                 return;
             }
+            executeLookupFailed(element);
             setHasLookupFailed(true);
             setLookupErrorHTML(typeof error === 'string'
                 ? error
@@ -155,9 +159,11 @@ function LookupNotificationComponent({ autoLookupValue, stringifyAutoLookupValue
         ? stringifyAutoLookupValue(autoLookupValue)
         : autoLookupValue;
     React.useEffect(() => {
-        if (autoLookupValue !== undefined) {
-            triggerLookup(autoLookupValue);
-        }
+        const abortController = new AbortController();
+        triggerLookup(autoLookupValue, abortController.signal);
+        return () => {
+            abortController.abort();
+        };
         // Wants to use "triggerLookup" as a dependency,
         // however, this will change on any change made on any
         // element. Checking if "value" has changed is enough
@@ -215,14 +221,27 @@ async function fetchLookup(formElementLookupId, organisationId, formsAppEnvironm
     if (formElementLookup.type === 'STATIC_DATA') {
         const elementName = payload.element.name;
         const inputValue = payload.submission[elementName];
-        const matchingRecord = (_a = formElementLookup.records) === null || _a === void 0 ? void 0 : _a.find((r) => r.inputValue === inputValue);
-        const lookupResult = {};
-        matchingRecord === null || matchingRecord === void 0 ? void 0 : matchingRecord.preFills.forEach((prefill) => {
-            if (prefill.type === 'TEXT') {
-                lookupResult[prefill.formElementName] = prefill.text;
+        const formElementLookupEnvironment = formElementLookup.environments.find((e) => e.formsAppEnvironmentId === formsAppEnvironmentId);
+        if (!formElementLookupEnvironment) {
+            console.log(`Returning... static data lookup not found for environment ${formsAppEnvironmentId}`);
+            return {};
+        }
+        const matchingRecord = (_a = formElementLookupEnvironment.records) === null || _a === void 0 ? void 0 : _a.find((r) => r.inputValue === inputValue);
+        // insert prefill values
+        return matchingRecord === null || matchingRecord === void 0 ? void 0 : matchingRecord.preFills.reduce((lookupResult, prefill) => {
+            switch (prefill.type) {
+                case 'TEXT':
+                    lookupResult[prefill.formElementName] = prefill.text;
+                    break;
+                case 'NUMBER':
+                    lookupResult[prefill.formElementName] = prefill.number;
+                    break;
+                case 'CLEAR':
+                    lookupResult[prefill.formElementName] = undefined;
+                    break;
             }
-        });
-        return lookupResult;
+            return lookupResult;
+        }, {});
     }
     if (!formElementLookup.url) {
         console.log('Could not find URL for form element lookup for id:', formElementLookupId, formElementLookup);
@@ -247,5 +266,4 @@ async function fetchLookup(formElementLookupId, organisationId, formsAppEnvironm
     }
     return data;
 }
-// Validate that an element with a lookup has had the lookup button pressed if the element is required
 //# sourceMappingURL=LookupNotification.js.map

package/dist/components/renderer/LookupNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"LookupNotification.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { formService } from '@oneblink/apps'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport useIsOffline from '../../hooks/useIsOffline'\nimport OnLoading from './OnLoading'\nimport generateDefaultData from '../../services/generate-default-data'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport useInjectPages from '../../hooks/useInjectPages'\nimport useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'\nimport useExecutedLookupCallback from '../../hooks/useExecutedLookupCallback'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { Sentry } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport useIsMounted from '../../hooks/useIsMounted'\nimport { FormElementLookupHandler, FormSubmissionModel } from '../../types/form'\n\ntype FetchLookupPayload = {\n  element: FormTypes.LookupFormElement\n  definition: FormTypes.Form\n  submission: FormSubmissionModel\n}\ntype Props = {\n  autoLookupValue?: unknown\n  stringifyAutoLookupValue?: (autoLookupValue: unknown) => string\n  element: FormTypes.LookupFormElement\n  onLookup: FormElementLookupHandler\n  children: React.ReactNode\n}\n\nfunction LookupNotificationComponent({\n  autoLookupValue,\n  stringifyAutoLookupValue,\n  element,\n  onLookup,\n  children,\n}: Props) {\n  const isMounted = useIsMounted()\n  const isOffline = useIsOffline()\n  const definition = useFormDefinition()\n  const injectPagesAfter = useInjectPages()\n  const { executedLookup, executeLookupFailed } = useExecutedLookupCallback()\n\n  const [onCancelLookup, setOnCancelLookup] = React.useState<\n    (() => void) | undefined\n  >(undefined)\n  const [isLookingUp, setIsLookingUp] = React.useState(false)\n  const [hasLookupFailed, setHasLookupFailed] = React.useState(false)\n  const [hasLookupSucceeded, setHasLookupSucceeded] = React.useState(false)\n  const [isCancellable, setIsCancellable] = React.useState(false)\n  const [isDisabled, setIsDisabled] = React.useState(false)\n  const [lookupErrorHTML, setLookupErrorHTML] = React.useState<string | null>(\n    null,\n  )\n  const formIsReadOnly = useFormIsReadOnly()\n  const { formSubmissionModel: model } = useFormSubmissionModel()\n\n  const mergeLookupData = React.useCallback(\n    (\n      newValue: unknown,\n      dataLookupResult: FormSubmissionModel,\n      elementLookupResult: FormTypes.FormElement[],\n    ) => {\n      if (elementLookupResult) {\n        if (elementLookupResult[0] && elementLookupResult[0].type === 'page') {\n          injectPagesAfter(\n            element,\n            elementLookupResult as FormTypes.PageElement[],\n            dataLookupResult,\n          )\n          return\n        }\n      }\n\n      onLookup(({ submission, elements }) => {\n        let allElements = elements\n        if (Array.isArray(elementLookupResult)) {\n          const indexOfElement = elements.findIndex(\n            ({ id }) => id === element.id,\n          )\n          if (indexOfElement === -1) {\n            console.log('Could not find element', element)\n          } else {\n            // Filter out already injected elements\n            allElements = elements.filter(\n              // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n              (e) => e.injectedByElementId !== element.id,\n            )\n            allElements.splice(\n              indexOfElement + 1,\n              0,\n              ...elementLookupResult.map((e) => {\n                // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n                e.injectedByElementId = element.id\n                return e\n              }),\n            )\n          }\n        }\n\n        return {\n          elements: allElements,\n          submission: generateDefaultData(allElements, {\n            ...submission,\n            [element.name]: newValue,\n            ...dataLookupResult,\n          }),\n        }\n      })\n    },\n    [element, injectPagesAfter, onLookup],\n  )\n\n  const triggerLookup = React.useCallback(\n    async (newValue: unknown) => {\n      // No lookups for read only forms\n      if (formIsReadOnly) return\n      // if the element triggering the lookup has no value..\n      // ..return and do nothing\n      if (newValue === undefined || newValue === null) return\n\n      setIsLookingUp(true)\n\n      if (isOffline) {\n        setHasLookupFailed(true)\n        return\n      }\n\n      executedLookup(element)\n      setIsDisabled(true)\n      setIsCancellable(false)\n      setHasLookupFailed(false)\n      setHasLookupSucceeded(false)\n      setLookupErrorHTML(null)\n\n      const abortController = new AbortController()\n      setOnCancelLookup(() => () => abortController.abort())\n\n      // After certain amount of time, show the cancel button\n      const isCancellableTimeout = setTimeout(() => {\n        setIsCancellable(!abortController.signal.aborted)\n      }, 5000)\n\n      const payload: FetchLookupPayload = {\n        element,\n        definition,\n        submission: {\n          ...model,\n          [element.name]: newValue,\n        },\n      }\n\n      try {\n        const [dataLookupResult, elementLookupResult] = await Promise.all([\n          fetchLookup(\n            element.dataLookupId,\n            definition?.organisationId,\n            definition?.formsAppEnvironmentId,\n            payload,\n            abortController.signal,\n          ),\n          fetchLookup(\n            element.elementLookupId,\n            definition?.organisationId,\n            definition?.formsAppEnvironmentId,\n            payload,\n            abortController.signal,\n          ),\n        ])\n\n        mergeLookupData(newValue, dataLookupResult, elementLookupResult)\n\n        if (isMounted.current) {\n          setHasLookupSucceeded(true)\n        }\n\n        // After certain amount of time, hide the lookup succeeded message\n        await new Promise((resolve) => setTimeout(() => resolve(false), 750))\n\n        if (isMounted.current) {\n          setIsLookingUp(false)\n        }\n      } catch (error) {\n        executeLookupFailed(element)\n\n        if (!isMounted.current) {\n          return\n        }\n\n        // Cancelling will throw an error.\n        if (abortController.signal.aborted) {\n          console.log('Fetch aborted')\n          setIsLookingUp(false)\n          return\n        }\n\n        setHasLookupFailed(true)\n        setLookupErrorHTML(\n          typeof error === 'string'\n            ? error\n            : 'It looks like something went wrong.<br/>Please try again.<br />If the issue continues, please contact support.',\n        )\n      } finally {\n        clearTimeout(isCancellableTimeout)\n        if (isMounted.current) {\n          setIsDisabled(false)\n          setOnCancelLookup(undefined)\n        }\n      }\n    },\n    [\n      definition,\n      element,\n      executeLookupFailed,\n      executedLookup,\n      formIsReadOnly,\n      isMounted,\n      isOffline,\n      mergeLookupData,\n      model,\n    ],\n  )\n\n  // For certain elements, do not add click event\n  // instead, watch model for changes and trigger lookup function.\n  // We add this stringify function here to allow the value to be\n  // an object which may have a reference change, but the values\n  // have not changed. e.g. the 'location' element's value\n  const autoLookupValueString = stringifyAutoLookupValue\n    ? stringifyAutoLookupValue(autoLookupValue)\n    : autoLookupValue\n  React.useEffect(() => {\n    if (autoLookupValue !== undefined) {\n      triggerLookup(autoLookupValue)\n    }\n    // Wants to use \"triggerLookup\" as a dependency,\n    // however, this will change on any change made on any\n    // element. Checking if \"value\" has changed is enough\n    // to trigger a lookup when the correct dependencies change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoLookupValueString])\n\n  const contextValue = React.useMemo(\n    () => ({\n      isLookup: true,\n      isDisabled,\n      onLookup: triggerLookup,\n    }),\n    [isDisabled, triggerLookup],\n  )\n\n  return (\n    <LookupNotificationContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={clsx('ob-lookup__notification', {\n          'is-looking-up': isLookingUp,\n          'is-extended':\n            hasLookupFailed || (isCancellable && !hasLookupSucceeded),\n        })}\n      >\n        <div className=\"notification has-margin-top-7 has-text-centered\">\n          {hasLookupFailed && (\n            <>\n              <button\n                type=\"button\"\n                className=\"delete fade-in\"\n                onClick={() => setIsLookingUp(false)}\n              />\n\n              <div>\n                {isOffline ? (\n                  <div>\n                    <i className=\"material-icons fade-in has-text-warning\">\n                      wifi_off\n                    </i>\n                    <p className=\"fade-in\">\n                      It looks like you&apos;re offline. Please try again when\n                      connectivity is restored.\n                    </p>\n                  </div>\n                ) : (\n                  <div>\n                    <i className=\"material-icons fade-in has-text-danger\">\n                      error_outline\n                    </i>\n                    <p\n                      className=\"fade-in\"\n                      // eslint-disable-next-line react/no-danger\n                      dangerouslySetInnerHTML={{\n                        __html: lookupErrorHTML || '',\n                      }}\n                    />\n                  </div>\n                )}\n              </div>\n            </>\n          )}\n\n          {hasLookupSucceeded && (\n            <i className=\"material-icons has-text-success fade-in\">\n              check_circle_outline\n            </i>\n          )}\n\n          {!hasLookupSucceeded && !hasLookupFailed && <OnLoading small />}\n\n          {isCancellable && !hasLookupSucceeded && !hasLookupFailed && (\n            <div className=\"has-margin-top-5 fade-in\">\n              <p>Taking longer than expected?</p>\n              <button\n                type=\"button\"\n                className=\"button has-margin-top-8\"\n                onClick={onCancelLookup}\n              >\n                Cancel\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </LookupNotificationContext.Provider>\n  )\n}\n\nexport default function LookupNotification(props: Props) {\n  if (props.element.isDataLookup || props.element.isElementLookup) {\n    return <LookupNotificationComponent {...props} />\n  }\n\n  return <>{props.children}</>\n}\n\nasync function fetchLookup(\n  formElementLookupId: number | undefined,\n  organisationId: string | undefined,\n  formsAppEnvironmentId: number | undefined,\n  payload: FetchLookupPayload,\n  abortSignal: AbortSignal,\n) {\n  if (\n    typeof formElementLookupId !== 'number' ||\n    !organisationId ||\n    typeof formsAppEnvironmentId !== 'number'\n  ) {\n    return\n  }\n\n  console.log(\n    'Attempting to retrieve form element lookup for id:',\n    formElementLookupId,\n  )\n  const formElementLookup = await formService.getFormElementLookupById(\n    organisationId,\n    formsAppEnvironmentId,\n    formElementLookupId,\n  )\n\n  if (!formElementLookup) {\n    console.log(\n      'Could not find form element lookup configuration for id:',\n      formElementLookupId,\n      formElementLookup,\n    )\n    throw new Error('Could not find element lookup configuration')\n  }\n\n  if (formElementLookup.type === 'STATIC_DATA') {\n    const elementName = payload.element.name\n    const inputValue = payload.submission[elementName]\n    const matchingRecord = formElementLookup.records?.find(\n      (r) => r.inputValue === inputValue,\n    )\n    const lookupResult: FormSubmissionModel = {}\n    matchingRecord?.preFills.forEach((prefill) => {\n      if (prefill.type === 'TEXT') {\n        lookupResult[prefill.formElementName] = prefill.text\n      }\n    })\n    return lookupResult\n  }\n\n  if (!formElementLookup.url) {\n    console.log(\n      'Could not find URL for form element lookup for id:',\n      formElementLookupId,\n      formElementLookup,\n    )\n    throw new Error('Could not find element lookup configuration')\n  }\n\n  const headers = await generateHeaders()\n  console.log(\n    `Attempting a ${formElementLookup.type} lookup request to:`,\n    formElementLookup.url,\n  )\n  const response = await fetch(formElementLookup.url, {\n    method: 'POST',\n    headers,\n    body: JSON.stringify(payload),\n    signal: abortSignal,\n  })\n\n  const data = await response.json()\n  console.log(\n    'Response from lookup to: POST',\n    formElementLookup.url,\n    response.status,\n    data,\n  )\n\n  if (!response.ok) {\n    Sentry.captureException(\n      new Error(`Received ${response.status} status code from lookup`),\n    )\n    if (response.status === 400 && data && data.message) {\n      throw data.message\n    }\n    throw new Error('Invalid response from lookup')\n  }\n\n  return data\n}\n\n// Validate that an element with a lookup has had the lookup button pressed if the element is required\n"]}
+{"version":3,"file":"LookupNotification.js","sourceRoot":"","sources":["../../../src/components/renderer/LookupNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { formService } from '@oneblink/apps'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport useIsOffline from '../../hooks/useIsOffline'\nimport OnLoading from './OnLoading'\nimport generateDefaultData from '../../services/generate-default-data'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport useFormDefinition from '../../hooks/useFormDefinition'\nimport useInjectPages from '../../hooks/useInjectPages'\nimport useFormSubmissionModel from '../../hooks/useFormSubmissionModelContext'\nimport useExecutedLookupCallback from '../../hooks/useExecutedLookupCallback'\nimport useFormIsReadOnly from '../../hooks/useFormIsReadOnly'\nimport { Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useIsMounted from '../../hooks/useIsMounted'\nimport { FormElementLookupHandler } from '../../types/form'\n\ntype FetchLookupPayload = {\n  element: FormTypes.LookupFormElement\n  definition: FormTypes.Form\n  submission: SubmissionTypes.S3SubmissionData['submission']\n}\ntype Props = {\n  autoLookupValue?: unknown\n  stringifyAutoLookupValue?: (autoLookupValue: unknown) => string\n  element: FormTypes.LookupFormElement\n  onLookup: FormElementLookupHandler\n  children: React.ReactNode\n}\n\nfunction LookupNotificationComponent({\n  autoLookupValue,\n  stringifyAutoLookupValue,\n  element,\n  onLookup,\n  children,\n}: Props) {\n  const isMounted = useIsMounted()\n  const isOffline = useIsOffline()\n  const definition = useFormDefinition()\n  const injectPagesAfter = useInjectPages()\n  const { executedLookup, executeLookupFailed } = useExecutedLookupCallback()\n\n  const [onCancelLookup, setOnCancelLookup] = React.useState<\n    (() => void) | undefined\n  >(undefined)\n  const [isLookingUp, setIsLookingUp] = React.useState(false)\n  const [hasLookupFailed, setHasLookupFailed] = React.useState(false)\n  const [hasLookupSucceeded, setHasLookupSucceeded] = React.useState(false)\n  const [isCancellable, setIsCancellable] = React.useState(false)\n  const [isDisabled, setIsDisabled] = React.useState(false)\n  const [lookupErrorHTML, setLookupErrorHTML] = React.useState<string | null>(\n    null,\n  )\n  const formIsReadOnly = useFormIsReadOnly()\n  const { formSubmissionModel: model } = useFormSubmissionModel()\n\n  const mergeLookupData = React.useCallback(\n    (\n      newValue: unknown,\n      dataLookupResult: SubmissionTypes.S3SubmissionData['submission'],\n      elementLookupResult: FormTypes.FormElement[],\n    ) => {\n      if (elementLookupResult) {\n        if (elementLookupResult[0] && elementLookupResult[0].type === 'page') {\n          injectPagesAfter(\n            element,\n            elementLookupResult as FormTypes.PageElement[],\n            dataLookupResult,\n          )\n          return\n        }\n      }\n\n      onLookup(({ submission, elements }) => {\n        let allElements = elements\n        if (Array.isArray(elementLookupResult)) {\n          const indexOfElement = elements.findIndex(\n            ({ id }) => id === element.id,\n          )\n          if (indexOfElement === -1) {\n            console.log('Could not find element', element)\n          } else {\n            // Filter out already injected elements\n            allElements = elements.filter(\n              // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n              (e) => e.injectedByElementId !== element.id,\n            )\n            allElements.splice(\n              indexOfElement + 1,\n              0,\n              ...elementLookupResult.map((e) => {\n                // @ts-expect-error Sorry typescript, we need to check a property you don't approve of :(\n                e.injectedByElementId = element.id\n                return e\n              }),\n            )\n          }\n        }\n\n        return {\n          elements: allElements,\n          submission: generateDefaultData(allElements, {\n            ...submission,\n            [element.name]: newValue,\n            ...dataLookupResult,\n          }),\n        }\n      })\n    },\n    [element, injectPagesAfter, onLookup],\n  )\n\n  const triggerLookup = React.useCallback(\n    async (newValue: unknown, abortSignal: AbortSignal) => {\n      // No lookups for read only forms\n      if (formIsReadOnly) return\n      // if the element triggering the lookup has no value..\n      // ..return and do nothing\n      if (newValue === undefined || newValue === null) return\n\n      setIsLookingUp(true)\n\n      if (isOffline) {\n        setHasLookupFailed(true)\n        return\n      }\n\n      executedLookup(element)\n      setIsDisabled(true)\n      setIsCancellable(false)\n      setHasLookupFailed(false)\n      setHasLookupSucceeded(false)\n      setLookupErrorHTML(null)\n\n      const cancelAbortController = new AbortController()\n      setOnCancelLookup(() => () => cancelAbortController.abort())\n\n      // After certain amount of time, show the cancel button\n      const isCancellableTimeout = setTimeout(() => {\n        setIsCancellable(!cancelAbortController.signal.aborted)\n      }, 5000)\n\n      const payload: FetchLookupPayload = {\n        element,\n        definition,\n        submission: {\n          ...model,\n          [element.name]: newValue,\n        },\n      }\n\n      try {\n        const [dataLookupResult, elementLookupResult] = await Promise.all([\n          fetchLookup(\n            element.dataLookupId,\n            definition?.organisationId,\n            definition?.formsAppEnvironmentId,\n            payload,\n            abortSignal,\n          ),\n          fetchLookup(\n            element.elementLookupId,\n            definition?.organisationId,\n            definition?.formsAppEnvironmentId,\n            payload,\n            abortSignal,\n          ),\n        ])\n\n        // If the user clicked cancel, we stop showing lookup.\n        if (cancelAbortController.signal.aborted) {\n          setIsLookingUp(false)\n          return\n        }\n\n        mergeLookupData(newValue, dataLookupResult, elementLookupResult)\n\n        if (isMounted.current) {\n          setHasLookupSucceeded(true)\n        }\n\n        // After certain amount of time, hide the lookup succeeded message\n        setTimeout(() => {\n          if (isMounted.current && !abortSignal.aborted) {\n            setIsLookingUp(false)\n          }\n        }, 750)\n      } catch (error) {\n        if (!isMounted.current) {\n          return\n        }\n\n        if (abortSignal.aborted) {\n          console.log('Fetch aborted')\n          return\n        }\n\n        executeLookupFailed(element)\n\n        setHasLookupFailed(true)\n        setLookupErrorHTML(\n          typeof error === 'string'\n            ? error\n            : 'It looks like something went wrong.<br/>Please try again.<br />If the issue continues, please contact support.',\n        )\n      } finally {\n        clearTimeout(isCancellableTimeout)\n        if (isMounted.current) {\n          setIsDisabled(false)\n          setOnCancelLookup(undefined)\n        }\n      }\n    },\n    [\n      definition,\n      element,\n      executeLookupFailed,\n      executedLookup,\n      formIsReadOnly,\n      isMounted,\n      isOffline,\n      mergeLookupData,\n      model,\n    ],\n  )\n\n  // For certain elements, do not add click event\n  // instead, watch model for changes and trigger lookup function.\n  // We add this stringify function here to allow the value to be\n  // an object which may have a reference change, but the values\n  // have not changed. e.g. the 'location' element's value\n  const autoLookupValueString = stringifyAutoLookupValue\n    ? stringifyAutoLookupValue(autoLookupValue)\n    : autoLookupValue\n  React.useEffect(() => {\n    const abortController = new AbortController()\n    triggerLookup(autoLookupValue, abortController.signal)\n    return () => {\n      abortController.abort()\n    }\n    // Wants to use \"triggerLookup\" as a dependency,\n    // however, this will change on any change made on any\n    // element. Checking if \"value\" has changed is enough\n    // to trigger a lookup when the correct dependencies change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [autoLookupValueString])\n\n  const contextValue = React.useMemo(\n    () => ({\n      isLookup: true,\n      isDisabled,\n      onLookup: triggerLookup,\n    }),\n    [isDisabled, triggerLookup],\n  )\n\n  return (\n    <LookupNotificationContext.Provider value={contextValue}>\n      {children}\n      <div\n        className={clsx('ob-lookup__notification', {\n          'is-looking-up': isLookingUp,\n          'is-extended':\n            hasLookupFailed || (isCancellable && !hasLookupSucceeded),\n        })}\n      >\n        <div className=\"notification has-margin-top-7 has-text-centered\">\n          {hasLookupFailed && (\n            <>\n              <button\n                type=\"button\"\n                className=\"delete fade-in\"\n                onClick={() => setIsLookingUp(false)}\n              />\n\n              <div>\n                {isOffline ? (\n                  <div>\n                    <i className=\"material-icons fade-in has-text-warning\">\n                      wifi_off\n                    </i>\n                    <p className=\"fade-in\">\n                      It looks like you&apos;re offline. Please try again when\n                      connectivity is restored.\n                    </p>\n                  </div>\n                ) : (\n                  <div>\n                    <i className=\"material-icons fade-in has-text-danger\">\n                      error_outline\n                    </i>\n                    <p\n                      className=\"fade-in\"\n                      // eslint-disable-next-line react/no-danger\n                      dangerouslySetInnerHTML={{\n                        __html: lookupErrorHTML || '',\n                      }}\n                    />\n                  </div>\n                )}\n              </div>\n            </>\n          )}\n\n          {hasLookupSucceeded && (\n            <i className=\"material-icons has-text-success fade-in\">\n              check_circle_outline\n            </i>\n          )}\n\n          {!hasLookupSucceeded && !hasLookupFailed && <OnLoading small />}\n\n          {isCancellable && !hasLookupSucceeded && !hasLookupFailed && (\n            <div className=\"has-margin-top-5 fade-in\">\n              <p>Taking longer than expected?</p>\n              <button\n                type=\"button\"\n                className=\"button has-margin-top-8\"\n                onClick={onCancelLookup}\n              >\n                Cancel\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    </LookupNotificationContext.Provider>\n  )\n}\n\nexport default function LookupNotification(props: Props) {\n  if (props.element.isDataLookup || props.element.isElementLookup) {\n    return <LookupNotificationComponent {...props} />\n  }\n\n  return <>{props.children}</>\n}\n\nasync function fetchLookup(\n  formElementLookupId: number | undefined,\n  organisationId: string | undefined,\n  formsAppEnvironmentId: number | undefined,\n  payload: FetchLookupPayload,\n  abortSignal: AbortSignal,\n) {\n  if (\n    typeof formElementLookupId !== 'number' ||\n    !organisationId ||\n    typeof formsAppEnvironmentId !== 'number'\n  ) {\n    return\n  }\n\n  console.log(\n    'Attempting to retrieve form element lookup for id:',\n    formElementLookupId,\n  )\n  const formElementLookup = await formService.getFormElementLookupById(\n    organisationId,\n    formsAppEnvironmentId,\n    formElementLookupId,\n  )\n\n  if (!formElementLookup) {\n    console.log(\n      'Could not find form element lookup configuration for id:',\n      formElementLookupId,\n      formElementLookup,\n    )\n    throw new Error('Could not find element lookup configuration')\n  }\n\n  if (formElementLookup.type === 'STATIC_DATA') {\n    const elementName = payload.element.name\n    const inputValue = payload.submission[elementName]\n    const formElementLookupEnvironment = formElementLookup.environments.find(\n      (e) => e.formsAppEnvironmentId === formsAppEnvironmentId,\n    )\n\n    if (!formElementLookupEnvironment) {\n      console.log(\n        `Returning... static data lookup not found for environment ${formsAppEnvironmentId}`,\n      )\n      return {}\n    }\n\n    const matchingRecord = formElementLookupEnvironment.records?.find(\n      (r) => r.inputValue === inputValue,\n    )\n\n    // insert prefill values\n    return matchingRecord?.preFills.reduce<\n      SubmissionTypes.S3SubmissionData['submission']\n    >((lookupResult, prefill) => {\n      switch (prefill.type) {\n        case 'TEXT':\n          lookupResult[prefill.formElementName] = prefill.text\n          break\n        case 'NUMBER':\n          lookupResult[prefill.formElementName] = prefill.number\n          break\n        case 'CLEAR':\n          lookupResult[prefill.formElementName] = undefined\n          break\n      }\n      return lookupResult\n    }, {})\n  }\n\n  if (!formElementLookup.url) {\n    console.log(\n      'Could not find URL for form element lookup for id:',\n      formElementLookupId,\n      formElementLookup,\n    )\n    throw new Error('Could not find element lookup configuration')\n  }\n\n  const headers = await generateHeaders()\n  console.log(\n    `Attempting a ${formElementLookup.type} lookup request to:`,\n    formElementLookup.url,\n  )\n  const response = await fetch(formElementLookup.url, {\n    method: 'POST',\n    headers,\n    body: JSON.stringify(payload),\n    signal: abortSignal,\n  })\n\n  const data = await response.json()\n  console.log(\n    'Response from lookup to: POST',\n    formElementLookup.url,\n    response.status,\n    data,\n  )\n\n  if (!response.ok) {\n    Sentry.captureException(\n      new Error(`Received ${response.status} status code from lookup`),\n    )\n    if (response.status === 400 && data && data.message) {\n      throw data.message\n    }\n    throw new Error('Invalid response from lookup')\n  }\n\n  return data\n}\n"]}

package/dist/components/renderer/OneBlinkFormElements.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementLookupHandler, FormElementsConditionallyShown, FormElementsValidation, FormElementValueChangeHandler, FormSubmissionModel } from '../../types/form';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
+import { FormElementLookupHandler, FormElementsConditionallyShown, FormElementsValidation, FormElementValueChangeHandler } from '../../types/form';
 export type Props<T extends FormTypes._NestedElementsElement> = {
     formId: number;
     elements: FormTypes.FormElement[];
@@ -11,7 +11,7 @@ export type Props<T extends FormTypes._NestedElementsElement> = {
     onLookup: FormElementLookupHandler;
     isEven?: boolean;
     idPrefix: string;
-    model: FormSubmissionModel;
+    model: SubmissionTypes.S3SubmissionData['submission'];
     parentElement: T;
 };
 declare function OneBlinkFormElements<T extends FormTypes._NestedElementsElement>({ formId, elements, isEven, idPrefix, displayValidationMessages, formElementsValidation, formElementsConditionallyShown, onChange, onLookup, model, parentElement, }: Props<T>): JSX.Element;