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

package/dist/components/messages/LargeIconMessage.d.ts

@@ -1,14 +1,17 @@
 import * as React from 'react';
-declare type Props = {
+import { CommonProps } from '@mui/material/OverridableComponent';
+declare type Variant = 'primary' | 'success' | 'error' | 'warning';
+export declare type Props = {
     IconComponent: React.ComponentType<{
-        className: string;
+        color: Variant;
     }>;
     title: string;
-    variant: 'primary' | 'success' | 'error' | 'warning';
+    variant: Variant;
     gutterTop?: boolean;
     gutterBottom?: boolean;
     children?: React.ReactNode;
     action?: React.ReactNode;
+    className?: CommonProps['className'];
 };
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

package/dist/components/messages/LargeIconMessage.js

@@ -1,68 +1,38 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import makeStyles from '@mui/styles/makeStyles';
 import { Typography, Grid, Container } from '@mui/material';
-// Styles
-const useStyles = makeStyles((theme) => ({
-    gutterTop: {
-        paddingTop: theme.spacing(4),
-    },
-    gutterBottom: {
-        marginBottom: theme.spacing(4),
-    },
-    iconContainer: {
-        textAlign: 'center',
-    },
-    icon: {
-        fontSize: theme.spacing(16),
-    },
-    primaryText: {
-        color: theme.palette.primary.main,
-    },
-    successText: {
-        color: theme.palette.success.main,
-    },
-    errorText: {
-        color: theme.palette.error.main,
-    },
-    warningText: {
-        color: theme.palette.warning.main,
-    },
-}));
-// TODO: Come back to this
-// interface StyledIconContainerProps {
-//   gutterTop?: boolean
-// }
-// const StyledIconContainer = styled('div', {
-//   shouldForwardProp: (prop) => prop !== 'gutterTop',
-// })<StyledIconContainerProps>(({ theme, gutterTop }) => ({
-//   textAlign: 'center',
-//   ...(gutterTop
-//     ? {
-//         paddingTop: theme.spacing(4),
-//       }
-//     : {}),
-// }))
-function LargeIconMessage({ IconComponent, title, variant, gutterTop, gutterBottom, children, action, }) {
-    const classes = useStyles();
-    const textClassName = clsx({
-        [classes.primaryText]: variant === 'primary',
-        [classes.successText]: variant === 'success',
-        [classes.errorText]: variant === 'error',
-        [classes.warningText]: variant === 'warning',
-    });
-    return (React.createElement(Container, { maxWidth: "sm" },
-        React.createElement("div", { className: clsx(classes.iconContainer, {
-                [classes.gutterTop]: gutterTop,
-            }) },
-            React.createElement(IconComponent, { className: clsx(classes.icon, textClassName) })),
-        React.createElement(Typography, { variant: "h5", align: "center", gutterBottom: true, className: textClassName }, title),
-        children ? (React.createElement(Typography, { align: "center", variant: "body2", paragraph: !!action, className: clsx({
-                [classes.gutterBottom]: !action && gutterBottom,
-            }) }, children)) : null,
-        action && (React.createElement(Grid, { container: true, justifyContent: "center", className: clsx({
-                [classes.gutterBottom]: gutterBottom,
-            }) }, action))));
+import { styled } from '@mui/material/styles';
+function LargeIconMessage({ IconComponent, title, variant, gutterTop, gutterBottom, children, action, className, }) {
+    const Icon = React.useMemo(() => {
+        return styled(IconComponent)(({ theme }) => ({
+            fontSize: theme.spacing(16),
+        }));
+    }, [IconComponent]);
+    return (React.createElement(Container, { maxWidth: "sm", className: className || 'ob-large-icon-message' },
+        React.createElement(StyledIconContainer, { gutterTop: gutterTop },
+            React.createElement(Icon, { color: variant })),
+        React.createElement(Typography, { variant: "h5", align: "center", gutterBottom: true, color: variant }, title),
+        children ? (React.createElement(StyledTypography, { align: "center", variant: "body2", paragraph: !!action, gutterBottom: !action && gutterBottom }, children)) : null,
+        action && (React.createElement(StyledGrid, { container: true, justifyContent: "center", gutterBottom: gutterBottom }, action))));
 }
 export default React.memo(LargeIconMessage);
+const StyledIconContainer = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'gutterTop',
+})(({ theme, gutterTop }) => ({
+    textAlign: 'center',
+    ...(gutterTop
+        ? {
+            paddingTop: theme.spacing(4),
+        }
+        : {}),
+}));
+const StyledTypography = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'gutterBottom',
+})(({ theme, gutterBottom }) => ({
+    ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),
+}));
+const StyledGrid = styled(Grid, {
+    shouldForwardProp: (prop) => prop !== 'gutterBottom',
+})(({ theme, gutterBottom }) => ({
+    ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),
+}));
 //# sourceMappingURL=LargeIconMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LargeIconMessage.js","sourceRoot":"","sources":["../../../src/components/messages/LargeIconMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport makeStyles from '@mui/styles/makeStyles'\nimport { Typography, Grid, Container } from '@mui/material'\n// import { styled } from '@mui/material/styles'\n\ntype Props = {\n  IconComponent: React.ComponentType<{\n    className: string\n  }>\n  title: string\n  variant: 'primary' | 'success' | 'error' | 'warning'\n  gutterTop?: boolean\n  gutterBottom?: boolean\n  children?: React.ReactNode\n  action?: React.ReactNode\n}\n// Styles\nconst useStyles = makeStyles((theme) => ({\n  gutterTop: {\n    paddingTop: theme.spacing(4),\n  },\n  gutterBottom: {\n    marginBottom: theme.spacing(4),\n  },\n  iconContainer: {\n    textAlign: 'center',\n  },\n  icon: {\n    fontSize: theme.spacing(16),\n  },\n  primaryText: {\n    color: theme.palette.primary.main,\n  },\n  successText: {\n    color: theme.palette.success.main,\n  },\n  errorText: {\n    color: theme.palette.error.main,\n  },\n  warningText: {\n    color: theme.palette.warning.main,\n  },\n}))\n\n// TODO: Come back to this\n// interface StyledIconContainerProps {\n//   gutterTop?: boolean\n// }\n\n// const StyledIconContainer = styled('div', {\n//   shouldForwardProp: (prop) => prop !== 'gutterTop',\n// })<StyledIconContainerProps>(({ theme, gutterTop }) => ({\n//   textAlign: 'center',\n//   ...(gutterTop\n//     ? {\n//         paddingTop: theme.spacing(4),\n//       }\n//     : {}),\n// }))\n\nfunction LargeIconMessage({\n  IconComponent,\n  title,\n  variant,\n  gutterTop,\n  gutterBottom,\n  children,\n  action,\n}: Props) {\n  const classes = useStyles()\n  const textClassName = clsx({\n    [classes.primaryText]: variant === 'primary',\n    [classes.successText]: variant === 'success',\n    [classes.errorText]: variant === 'error',\n    [classes.warningText]: variant === 'warning',\n  })\n  return (\n    <Container maxWidth=\"sm\">\n      <div\n        className={clsx(classes.iconContainer, {\n          [classes.gutterTop]: gutterTop,\n        })}\n      >\n        <IconComponent className={clsx(classes.icon, textClassName)} />\n      </div>\n      <Typography\n        variant=\"h5\"\n        align=\"center\"\n        gutterBottom\n        className={textClassName}\n      >\n        {title}\n      </Typography>\n      {children ? (\n        <Typography\n          align=\"center\"\n          variant=\"body2\"\n          paragraph={!!action}\n          className={clsx({\n            [classes.gutterBottom]: !action && gutterBottom,\n          })}\n        >\n          {children}\n        </Typography>\n      ) : null}\n      {action && (\n        <Grid\n          container\n          justifyContent=\"center\"\n          className={clsx({\n            [classes.gutterBottom]: gutterBottom,\n          })}\n        >\n          {action}\n        </Grid>\n      )}\n    </Container>\n  )\n}\n\nexport default React.memo<Props>(LargeIconMessage)\n"]}
+{"version":3,"file":"LargeIconMessage.js","sourceRoot":"","sources":["../../../src/components/messages/LargeIconMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Typography, Grid, Container } from '@mui/material'\nimport { styled } from '@mui/material/styles'\nimport { CommonProps } from '@mui/material/OverridableComponent'\n\ntype Variant = 'primary' | 'success' | 'error' | 'warning'\nexport type Props = {\n  IconComponent: React.ComponentType<{ color: Variant }>\n  title: string\n  variant: Variant\n  gutterTop?: boolean\n  gutterBottom?: boolean\n  children?: React.ReactNode\n  action?: React.ReactNode\n  className?: CommonProps['className']\n}\n\nfunction LargeIconMessage({\n  IconComponent,\n  title,\n  variant,\n  gutterTop,\n  gutterBottom,\n  children,\n  action,\n  className,\n}: Props) {\n  const Icon = React.useMemo(() => {\n    return styled(IconComponent)(({ theme }) => ({\n      fontSize: theme.spacing(16),\n    }))\n  }, [IconComponent])\n\n  return (\n    <Container maxWidth=\"sm\" className={className || 'ob-large-icon-message'}>\n      <StyledIconContainer gutterTop={gutterTop}>\n        <Icon color={variant} />\n      </StyledIconContainer>\n      <Typography variant=\"h5\" align=\"center\" gutterBottom color={variant}>\n        {title}\n      </Typography>\n      {children ? (\n        <StyledTypography\n          align=\"center\"\n          variant=\"body2\"\n          paragraph={!!action}\n          gutterBottom={!action && gutterBottom}\n        >\n          {children}\n        </StyledTypography>\n      ) : null}\n      {action && (\n        <StyledGrid\n          container\n          justifyContent=\"center\"\n          gutterBottom={gutterBottom}\n        >\n          {action}\n        </StyledGrid>\n      )}\n    </Container>\n  )\n}\n\nexport default React.memo<Props>(LargeIconMessage)\n\nconst StyledIconContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'gutterTop',\n})<{\n  gutterTop?: boolean\n}>(({ theme, gutterTop }) => ({\n  textAlign: 'center',\n  ...(gutterTop\n    ? {\n        paddingTop: theme.spacing(4),\n      }\n    : {}),\n}))\n\nconst StyledTypography = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'gutterBottom',\n})<React.ComponentProps<typeof Typography>>(({ theme, gutterBottom }) => ({\n  ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),\n}))\n\nconst StyledGrid = styled(Grid, {\n  shouldForwardProp: (prop) => prop !== 'gutterBottom',\n})<{ gutterBottom?: boolean }>(({ theme, gutterBottom }) => ({\n  ...(gutterBottom ? { marginBottom: theme.spacing(4) } : {}),\n}))\n"]}

package/dist/components/{NoResourcesYet.d.ts → messages/NoResourcesYet.d.ts}

@@ -1,8 +1,7 @@
 import * as React from 'react';
+import { Props as LargeIconMessageProps } from './LargeIconMessage';
 declare type Props = {
-    IconComponent: React.ComponentType<{
-        className: string;
-    }>;
+    IconComponent: LargeIconMessageProps['IconComponent'];
     title: string;
     gutterBottom?: boolean;
     children?: React.ReactNode;

package/dist/components/{NoResourcesYet.js → messages/NoResourcesYet.js}

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

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

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

package/dist/form-elements/FormElementDate.js

@@ -13,7 +13,7 @@ function FormElementDate({ id, element, value, onChange, validationMessage, disp
         const opts = {
             altInput: true,
             dateFormat: 'Y-m-d',
-            altFormat: localisationService.getDateFnsFormats().shortDate,
+            altFormat: localisationService.getFlatpickrFormats().shortDate,
             allowInput: true,
             altInputClass: 'input ob-input cypress-date-control',
             minDate: parseDateValue({

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-d',\n      altFormat: localisationService.getDateFnsFormats().shortDate,\n      allowInput: true,\n      altInputClass: 'input ob-input cypress-date-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"date\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">event</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}
+{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-d',\n      altFormat: localisationService.getFlatpickrFormats().shortDate,\n      allowInput: true,\n      altInputClass: 'input ob-input cypress-date-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"date\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">event</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon cypress-copy-to-clipboard-button\"\n                isInputButton\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}

package/dist/hooks/useInfiniteScrollDataLoad.d.ts

@@ -1,6 +1,7 @@
 import useQuery from './useQuery';
 export declare type ChangeHandler<T> = (filters: T) => T;
 export declare type OnChangeFilters<T> = (changeHandler: ChangeHandler<T>, shouldDebounce: boolean) => void;
+export declare type LoadingType = 'INITIAL' | 'MORE' | null;
 export default function useInfiniteScrollDataLoad<Filters, T>({ limit, debounceSearchMs, onDefaultFilters, onSearch, onValidateFilters, }: {
     limit: number;
     debounceSearchMs?: number;
@@ -18,7 +19,7 @@ export default function useInfiniteScrollDataLoad<Filters, T>({ limit, debounceS
     }>;
     onValidateFilters?: (filters: Filters) => boolean;
 }): {
-    isLoading: boolean;
+    isLoading: LoadingType;
     loadError: Error | null;
     records: T[];
     onRefresh: () => void;

package/dist/hooks/useInfiniteScrollDataLoad.js

@@ -20,7 +20,7 @@ export default function useInfiniteScrollDataLoad({ limit, debounceSearchMs, onD
         }));
     }, []);
     const [{ isLoading, records, error, nextOffset }, setState] = React.useState({
-        isLoading: true,
+        isLoading: 'INITIAL',
         records: [],
         error: null,
         nextOffset: 0,
@@ -36,7 +36,7 @@ export default function useInfiniteScrollDataLoad({ limit, debounceSearchMs, onD
             ...currentState,
             error: null,
             records: offset === 0 ? [] : currentState.records,
-            isLoading: true,
+            isLoading: offset === 0 ? 'INITIAL' : 'MORE',
         }));
         try {
             const result = await onSearch(filters, {
@@ -46,7 +46,7 @@ export default function useInfiniteScrollDataLoad({ limit, debounceSearchMs, onD
             setState((currentState) => ({
                 error: null,
                 records: [...currentState.records, ...result.records],
-                isLoading: false,
+                isLoading: null,
                 nextOffset: result.meta.nextOffset || 0,
             }));
         }
@@ -58,7 +58,7 @@ export default function useInfiniteScrollDataLoad({ limit, debounceSearchMs, onD
             setState((currentState) => ({
                 ...currentState,
                 error: error,
-                isLoading: false,
+                isLoading: null,
             }));
         }
     }, [onValidateFilters, filters, offset, onSearch, limit]);

package/dist/hooks/useInfiniteScrollDataLoad.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteScrollDataLoad.js","sourceRoot":"","sources":["../../src/hooks/useInfiniteScrollDataLoad.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useQuery from './useQuery'\n\nexport type ChangeHandler<T> = (filters: T) => T\nexport type OnChangeFilters<T> = (\n  changeHandler: ChangeHandler<T>,\n  shouldDebounce: boolean,\n) => void\n\nexport default function useInfiniteScrollDataLoad<Filters, T>({\n  limit,\n  debounceSearchMs,\n  onDefaultFilters,\n  onSearch,\n  onValidateFilters,\n}: {\n  limit: number\n  debounceSearchMs?: number\n  onDefaultFilters: (query: ReturnType<typeof useQuery>) => Filters\n  onSearch: (\n    filters: Filters,\n    paging: {\n      limit: number\n      offset: number\n    },\n    abortSignal: AbortSignal,\n  ) => Promise<{\n    records: T[]\n    meta: {\n      limit: number\n      offset: number\n      nextOffset?: number | undefined\n    }\n  }>\n  onValidateFilters?: (filters: Filters) => boolean\n}) {\n  const query = useQuery()\n\n  const [{ forceReload, shouldDebounce, offset, filters }, setOffsetState] =\n    React.useState<{\n      forceReload: boolean\n      shouldDebounce: boolean\n      offset: number\n      filters: Filters\n    }>(() => {\n      return {\n        forceReload: false,\n        shouldDebounce: true,\n        offset: 0,\n        filters: onDefaultFilters(query),\n      }\n    })\n\n  const onChangeFilters = React.useCallback<OnChangeFilters<Filters>>(\n    (changeHandler, shouldDebounce) => {\n      setOffsetState((currentState) => ({\n        ...currentState,\n        afterRefresh: false,\n        shouldDebounce,\n        offset: 0,\n        filters: changeHandler(currentState.filters),\n      }))\n    },\n    [],\n  )\n\n  const [{ isLoading, records, error, nextOffset }, setState] = React.useState<{\n    isLoading: boolean\n    records: T[]\n    error: Error | null\n    nextOffset: number\n  }>({\n    isLoading: true,\n    records: [],\n    error: null,\n    nextOffset: 0,\n  })\n\n  const fetchRecords = React.useCallback(\n    async (abortSignal) => {\n      if (onValidateFilters) {\n        const isValid = onValidateFilters(filters)\n        if (!isValid) {\n          return\n        }\n      }\n\n      setState((currentState) => ({\n        ...currentState,\n        error: null,\n        records: offset === 0 ? [] : currentState.records,\n        isLoading: true,\n      }))\n      try {\n        const result = await onSearch(\n          filters,\n          {\n            limit,\n            offset,\n          },\n          abortSignal,\n        )\n        setState((currentState) => ({\n          error: null,\n          records: [...currentState.records, ...result.records],\n          isLoading: false,\n          nextOffset: result.meta.nextOffset || 0,\n        }))\n      } catch (error) {\n        if (abortSignal.aborted) {\n          return\n        }\n        console.warn('An error occurred while fetching records', error)\n        setState((currentState) => ({\n          ...currentState,\n          error: error as Error,\n          isLoading: false,\n        }))\n      }\n    },\n    [onValidateFilters, filters, offset, onSearch, limit],\n  )\n\n  React.useEffect(() => {\n    const controller = new AbortController()\n    const timeoutId = setTimeout(\n      () => {\n        fetchRecords(controller.signal)\n      },\n      shouldDebounce ? debounceSearchMs || 0 : 0,\n    )\n    return () => {\n      clearTimeout(timeoutId)\n      controller.abort()\n    }\n  }, [debounceSearchMs, fetchRecords, shouldDebounce, forceReload])\n\n  const onLoad = React.useCallback((newOffset?: number) => {\n    setOffsetState((currentState) => {\n      return {\n        ...currentState,\n        offset: typeof newOffset === 'number' ? newOffset : currentState.offset,\n        forceReload: !currentState.forceReload,\n        shouldDebounce: false,\n      }\n    })\n  }, [])\n\n  React.useEffect(() => {\n    const scrollEventListener = () => {\n      // Bails early if we have not fetched data yet and:\n      // - there's an error\n      // - it's already loading\n      // - there's nothing left to load\n      if (!document.body || error || isLoading || !nextOffset) {\n        return\n      }\n\n      // Checks that the page has scrolled to the bottom\n      if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {\n        onLoad(nextOffset)\n      }\n    }\n    // Binds our scroll event handler\n    window.addEventListener('scroll', scrollEventListener)\n\n    return () => {\n      window.removeEventListener('scroll', scrollEventListener)\n    }\n  }, [error, isLoading, nextOffset, onLoad])\n\n  const onRefresh = React.useCallback(() => {\n    onLoad(0)\n  }, [onLoad])\n\n  return {\n    isLoading,\n    loadError: error,\n    records,\n    onRefresh,\n    onTryAgain: onLoad,\n    filters,\n    onChangeFilters,\n  }\n}\n"]}
+{"version":3,"file":"useInfiniteScrollDataLoad.js","sourceRoot":"","sources":["../../src/hooks/useInfiniteScrollDataLoad.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useQuery from './useQuery'\n\nexport type ChangeHandler<T> = (filters: T) => T\nexport type OnChangeFilters<T> = (\n  changeHandler: ChangeHandler<T>,\n  shouldDebounce: boolean,\n) => void\n\nexport type LoadingType = 'INITIAL' | 'MORE' | null\n\nexport default function useInfiniteScrollDataLoad<Filters, T>({\n  limit,\n  debounceSearchMs,\n  onDefaultFilters,\n  onSearch,\n  onValidateFilters,\n}: {\n  limit: number\n  debounceSearchMs?: number\n  onDefaultFilters: (query: ReturnType<typeof useQuery>) => Filters\n  onSearch: (\n    filters: Filters,\n    paging: {\n      limit: number\n      offset: number\n    },\n    abortSignal: AbortSignal,\n  ) => Promise<{\n    records: T[]\n    meta: {\n      limit: number\n      offset: number\n      nextOffset?: number | undefined\n    }\n  }>\n  onValidateFilters?: (filters: Filters) => boolean\n}) {\n  const query = useQuery()\n\n  const [{ forceReload, shouldDebounce, offset, filters }, setOffsetState] =\n    React.useState<{\n      forceReload: boolean\n      shouldDebounce: boolean\n      offset: number\n      filters: Filters\n    }>(() => {\n      return {\n        forceReload: false,\n        shouldDebounce: true,\n        offset: 0,\n        filters: onDefaultFilters(query),\n      }\n    })\n\n  const onChangeFilters = React.useCallback<OnChangeFilters<Filters>>(\n    (changeHandler, shouldDebounce) => {\n      setOffsetState((currentState) => ({\n        ...currentState,\n        afterRefresh: false,\n        shouldDebounce,\n        offset: 0,\n        filters: changeHandler(currentState.filters),\n      }))\n    },\n    [],\n  )\n\n  const [{ isLoading, records, error, nextOffset }, setState] = React.useState<{\n    isLoading: LoadingType\n    records: T[]\n    error: Error | null\n    nextOffset: number\n  }>({\n    isLoading: 'INITIAL',\n    records: [],\n    error: null,\n    nextOffset: 0,\n  })\n\n  const fetchRecords = React.useCallback(\n    async (abortSignal: AbortSignal) => {\n      if (onValidateFilters) {\n        const isValid = onValidateFilters(filters)\n        if (!isValid) {\n          return\n        }\n      }\n\n      setState((currentState) => ({\n        ...currentState,\n        error: null,\n        records: offset === 0 ? [] : currentState.records,\n        isLoading: offset === 0 ? 'INITIAL' : 'MORE',\n      }))\n      try {\n        const result = await onSearch(\n          filters,\n          {\n            limit,\n            offset,\n          },\n          abortSignal,\n        )\n        setState((currentState) => ({\n          error: null,\n          records: [...currentState.records, ...result.records],\n          isLoading: null,\n          nextOffset: result.meta.nextOffset || 0,\n        }))\n      } catch (error) {\n        if (abortSignal.aborted) {\n          return\n        }\n        console.warn('An error occurred while fetching records', error)\n        setState((currentState) => ({\n          ...currentState,\n          error: error as Error,\n          isLoading: null,\n        }))\n      }\n    },\n    [onValidateFilters, filters, offset, onSearch, limit],\n  )\n\n  React.useEffect(() => {\n    const controller = new AbortController()\n    const timeoutId = setTimeout(\n      () => {\n        fetchRecords(controller.signal)\n      },\n      shouldDebounce ? debounceSearchMs || 0 : 0,\n    )\n    return () => {\n      clearTimeout(timeoutId)\n      controller.abort()\n    }\n  }, [debounceSearchMs, fetchRecords, shouldDebounce, forceReload])\n\n  const onLoad = React.useCallback((newOffset?: number) => {\n    setOffsetState((currentState) => {\n      return {\n        ...currentState,\n        offset: typeof newOffset === 'number' ? newOffset : currentState.offset,\n        forceReload: !currentState.forceReload,\n        shouldDebounce: false,\n      }\n    })\n  }, [])\n\n  React.useEffect(() => {\n    const scrollEventListener = () => {\n      // Bails early if we have not fetched data yet and:\n      // - there's an error\n      // - it's already loading\n      // - there's nothing left to load\n      if (!document.body || error || isLoading || !nextOffset) {\n        return\n      }\n\n      // Checks that the page has scrolled to the bottom\n      if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {\n        onLoad(nextOffset)\n      }\n    }\n    // Binds our scroll event handler\n    window.addEventListener('scroll', scrollEventListener)\n\n    return () => {\n      window.removeEventListener('scroll', scrollEventListener)\n    }\n  }, [error, isLoading, nextOffset, onLoad])\n\n  const onRefresh = React.useCallback(() => {\n    onLoad(0)\n  }, [onLoad])\n\n  return {\n    isLoading,\n    loadError: error,\n    records,\n    onRefresh,\n    onTryAgain: onLoad,\n    filters,\n    onChangeFilters,\n  }\n}\n"]}

package/dist/hooks/useSubmissionIdIsValid.d.ts

@@ -1,4 +1,3 @@
-export declare const UUIDValidatorFn: (value: unknown) => boolean;
 export declare const validateIsUUID: (value: unknown) => boolean;
 declare const useSubmissionIdValidationMessage: (submissionId: string | undefined) => "Must be a valid Submission Id" | undefined;
 export default useSubmissionIdValidationMessage;

package/dist/hooks/useSubmissionIdIsValid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 const submissionIdInvalidMessage = 'Must be a valid Submission Id';
-export const UUIDValidatorFn = (value) => {
+export const validateIsUUID = (value) => {
     if (value === null || value === undefined || value === '') {
         return true;
     }
@@ -9,7 +9,6 @@ export const UUIDValidatorFn = (value) => {
     }
     return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value);
 };
-export const validateIsUUID = (value) => !!value || !UUIDValidatorFn(value);
 const useSubmissionIdValidationMessage = (submissionId) => {
     return React.useMemo(() => {
         if (!validateIsUUID(submissionId)) {

package/dist/hooks/useSubmissionIdIsValid.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSubmissionIdIsValid.js","sourceRoot":"","sources":["../../src/hooks/useSubmissionIdIsValid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,0BAA0B,GAAG,+BAA+B,CAAA;AAElE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAc,EAAE,EAAE;IAChD,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE;QACzD,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,OAAO,4EAA4E,CAAC,IAAI,CACtF,KAAK,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE,CAC/C,CAAC,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;AAEpC,MAAM,gCAAgC,GAAG,CAAC,YAAgC,EAAE,EAAE;IAC5E,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE;YACjC,OAAO,0BAA0B,CAAA;SAClC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AACpB,CAAC,CAAA;AAED,eAAe,gCAAgC,CAAA","sourcesContent":["import * as React from 'react'\n\nconst submissionIdInvalidMessage = 'Must be a valid Submission Id'\n\nexport const UUIDValidatorFn = (value: unknown) => {\n  if (value === null || value === undefined || value === '') {\n    return true\n  }\n\n  if (typeof value !== 'string') {\n    return false\n  }\n\n  return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(\n    value,\n  )\n}\n\nexport const validateIsUUID = (value: unknown) =>\n  !!value || !UUIDValidatorFn(value)\n\nconst useSubmissionIdValidationMessage = (submissionId: string | undefined) => {\n  return React.useMemo(() => {\n    if (!validateIsUUID(submissionId)) {\n      return submissionIdInvalidMessage\n    }\n  }, [submissionId])\n}\n\nexport default useSubmissionIdValidationMessage\n"]}
+{"version":3,"file":"useSubmissionIdIsValid.js","sourceRoot":"","sources":["../../src/hooks/useSubmissionIdIsValid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,0BAA0B,GAAG,+BAA+B,CAAA;AAElE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE;IAC/C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE;QACzD,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAA;KACb;IAED,OAAO,4EAA4E,CAAC,IAAI,CACtF,KAAK,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gCAAgC,GAAG,CAAC,YAAgC,EAAE,EAAE;IAC5E,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE;YACjC,OAAO,0BAA0B,CAAA;SAClC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AACpB,CAAC,CAAA;AAED,eAAe,gCAAgC,CAAA","sourcesContent":["import * as React from 'react'\n\nconst submissionIdInvalidMessage = 'Must be a valid Submission Id'\n\nexport const validateIsUUID = (value: unknown) => {\n  if (value === null || value === undefined || value === '') {\n    return true\n  }\n\n  if (typeof value !== 'string') {\n    return false\n  }\n\n  return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(\n    value,\n  )\n}\n\nconst useSubmissionIdValidationMessage = (submissionId: string | undefined) => {\n  return React.useMemo(() => {\n    if (!validateIsUUID(submissionId)) {\n      return submissionIdInvalidMessage\n    }\n  }, [submissionId])\n}\n\nexport default useSubmissionIdValidationMessage\n"]}

package/dist/index.d.ts

@@ -1,7 +1,12 @@
 export { OneBlinkFormUncontrolled as OneBlinkForm, OneBlinkFormControlled, } from './OneBlinkForm';
 export { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm';
 export { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm';
-export { default as OneBlinkFormStoreView } from './OneBlinkFormStoreView';
+export { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider';
+export { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton';
+export { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton';
+export { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton';
+export { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton';
+export { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable';
 export { default as useIsMounted } from './hooks/useIsMounted';
 export { default as useBooleanState } from './hooks/useBooleanState';
 export { default as useNullableState } from './hooks/useNullableState';

package/dist/index.js

@@ -1,7 +1,12 @@
 export { OneBlinkFormUncontrolled as OneBlinkForm, OneBlinkFormControlled, } from './OneBlinkForm';
 export { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm';
 export { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm';
-export { default as OneBlinkFormStoreView } from './OneBlinkFormStoreView';
+export { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider';
+export { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton';
+export { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton';
+export { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton';
+export { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton';
+export { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable';
 export { default as useIsMounted } from './hooks/useIsMounted';
 export { default as useBooleanState } from './hooks/useBooleanState';
 export { default as useNullableState } from './hooks/useNullableState';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAElG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC1G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA","sourcesContent":["export {\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { default as OneBlinkFormStoreView } from './OneBlinkFormStoreView'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin } from './hooks/useLogin'\nexport { default as useAuth, AuthContextProvider } from './hooks/useAuth'\nexport { default as useLoadDataState } from './hooks/useLoadDataState'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\n\nexport { default as MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker'\nexport { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker'\nexport { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,IAAI,YAAY,EACxC,sBAAsB,GACvB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAA;AAC5F,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,4DAA4D,CAAA;AAC3H,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,wDAAwD,CAAA;AACnH,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,uDAAuD,CAAA;AACjH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,+CAA+C,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,wBAAwB,GACzB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,wCAAwC,CAAA;AAElG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,iDAAiD,CAAA;AAC1G,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6CAA6C,CAAA","sourcesContent":["export {\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin } from './hooks/useLogin'\nexport { default as useAuth, AuthContextProvider } from './hooks/useAuth'\nexport { default as useLoadDataState } from './hooks/useLoadDataState'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\n\nexport { default as MuiV4CompatibleDatePicker } from './components/pickers/V4CompatibleDatePicker'\nexport { default as MuiV4CompatibleDateTimePicker } from './components/pickers/V4CompatibleDateTimePicker'\nexport { default as MuiV4CompatibleTimePicker } from './components/pickers/V4CompatibleTimePicker'\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,10 +11,6 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
-    "@mui/lab": "^5.0.0-alpha.79",
-    "@mui/material": "^5.6.1",
-    "@mui/styles": "^5.6.2",
-    "@mui/x-date-pickers": "^5.0.0-alpha.1",
     "@oneblink/sdk-core": "^0.4.0",
     "@react-google-maps/api": "2.7.0",
     "blueimp-load-image": "^5.16.0",
@@ -48,6 +44,9 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.11",
+    "@mui/lab": "^5.0.0-alpha.79",
+    "@mui/material": "^5.6.1",
+    "@mui/x-date-pickers": "^5.0.0-alpha.2",
     "@oneblink/apps": "^1.0.0-beta.1",
     "@oneblink/release-cli": "^1.0.0",
     "@oneblink/types": "github:oneblink/types",
@@ -99,7 +98,10 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@oneblink/apps": "^1.0.0 || ^1.0.0-beta.1",
+    "@mui/lab": "^5.0.0 || ^5.0.0-alpha.79",
+    "@mui/material": "^5.6.1",
+    "@mui/x-date-pickers": "^5.0.0 || ^5.0.0-alpha.2",
+    "@oneblink/apps": "^1.0.0 || ^1.0.0-beta.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-router-dom": "^5.2.0"

package/dist/OneBlinkFormStoreView.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-interface Props {
-    form: FormTypes.Form;
-}
-declare function FormStoreContainer({ form }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormStoreContainer>;
-export default _default;

package/dist/OneBlinkFormStoreView.js

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import LoadingWithMessage from './components/LoadingWithMessage';
-import ErrorMessage from './components/ErrorMessage';
-import FormStore from './components/formStore/FormStore';
-import { formStoreService } from '@oneblink/apps';
-import WarningIcon from '@mui/icons-material/Warning';
-import useLoadDataState from './hooks/useLoadDataState';
-import { Box, Button, Container, Grid, Typography } from '@mui/material';
-import LargeIconMessage from './components/messages/LargeIconMessage';
-import { ListItem, UnorderedList } from './components/Lists';
-import useLegacyFormElements from './hooks/useLegacyElements';
-function FormStoreContainer({ form }) {
-    const fetchFormStoreDefinition = React.useCallback((abortSignal) => {
-        return formStoreService.getFormStoreDefinition(form.id, abortSignal);
-    }, [form.id]);
-    const [formStoreDefinitionState, onTryAgain] = useLoadDataState(fetchFormStoreDefinition);
-    const { formElementsUsingLegacyStorage, formElementsUsingLegacyNames } = useLegacyFormElements((form === null || form === void 0 ? void 0 : form.elements) || []);
-    if (formStoreDefinitionState.status === 'LOADING') {
-        return React.createElement(LoadingWithMessage, null);
-    }
-    if (formStoreDefinitionState.status === 'ERROR') {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(ErrorMessage, { title: "Error Retrieving Form Definition", gutterTop: true }, formStoreDefinitionState.error.message),
-            React.createElement(Grid, { container: true, justifyContent: "center" },
-                React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again"))));
-    }
-    if (formElementsUsingLegacyStorage.length ||
-        formElementsUsingLegacyNames.length) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(LargeIconMessage, { IconComponent: WarningIcon, title: "Incompatible Form Elements", variant: "warning", gutterTop: true, gutterBottom: true }, "This Form has Element(s) that are incompatible with Data Manager. If you would like to be able to view submissions for this Form, please follow the instructions below to ensure your Form is compatible."),
-            React.createElement(Container, { maxWidth: "sm" },
-                !!formElementsUsingLegacyStorage.length && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { variant: "body2" },
-                        "The following Element(s) are using the ",
-                        React.createElement("b", null, "Embedded"),
-                        " storage type. Please update them to use either the Private or Public storage type."),
-                    React.createElement(Box, { marginBottom: 1 },
-                        React.createElement(UnorderedList, null, formElementsUsingLegacyStorage.map(({ name, label }, index) => (React.createElement(ListItem, { key: index },
-                            React.createElement("b", null, label),
-                            ' ',
-                            React.createElement(Typography, { component: "span", variant: "body2", color: "textSecondary" }, name)))))))),
-                !!formElementsUsingLegacyNames.length && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { variant: "body2" },
-                        "This following Element(s) have a ",
-                        React.createElement("b", null, "Name"),
-                        " property with unsupported characters. Please update them to have only letters, numbers, underscores and dashes."),
-                    React.createElement(UnorderedList, null, formElementsUsingLegacyNames.map(({ name, label }, index) => (React.createElement(ListItem, { key: index },
-                        React.createElement("b", null, label),
-                        ' ',
-                        React.createElement(Typography, { component: "span", variant: "body2", color: "textSecondary" }, name))))))))));
-    }
-    return (React.createElement(FormStore, { form: form, formElements: formStoreDefinitionState.result.formElements }));
-}
-export default React.memo(FormStoreContainer);
-//# sourceMappingURL=OneBlinkFormStoreView.js.map

package/dist/OneBlinkFormStoreView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OneBlinkFormStoreView.js","sourceRoot":"","sources":["../src/OneBlinkFormStoreView.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport LoadingWithMessage from './components/LoadingWithMessage'\nimport ErrorMessage from './components/ErrorMessage'\nimport FormStore from './components/formStore/FormStore'\nimport { formStoreService } from '@oneblink/apps'\nimport WarningIcon from '@mui/icons-material/Warning'\nimport useLoadDataState from './hooks/useLoadDataState'\nimport { Box, Button, Container, Grid, Typography } from '@mui/material'\nimport LargeIconMessage from './components/messages/LargeIconMessage'\nimport { ListItem, UnorderedList } from './components/Lists'\nimport useLegacyFormElements from './hooks/useLegacyElements'\nimport { FormTypes } from '@oneblink/types'\n\ninterface Props {\n  form: FormTypes.Form\n}\nfunction FormStoreContainer({ form }: Props) {\n  const fetchFormStoreDefinition = React.useCallback(\n    (abortSignal?: AbortSignal) => {\n      return formStoreService.getFormStoreDefinition(form.id, abortSignal)\n    },\n    [form.id],\n  )\n  const [formStoreDefinitionState, onTryAgain] = useLoadDataState(\n    fetchFormStoreDefinition,\n  )\n\n  const { formElementsUsingLegacyStorage, formElementsUsingLegacyNames } =\n    useLegacyFormElements(form?.elements || [])\n\n  if (formStoreDefinitionState.status === 'LOADING') {\n    return <LoadingWithMessage />\n  }\n\n  if (formStoreDefinitionState.status === 'ERROR') {\n    return (\n      <>\n        <ErrorMessage title=\"Error Retrieving Form Definition\" gutterTop>\n          {formStoreDefinitionState.error.message}\n        </ErrorMessage>\n        <Grid container justifyContent=\"center\">\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => onTryAgain()}\n          >\n            Try Again\n          </Button>\n        </Grid>\n      </>\n    )\n  }\n\n  if (\n    formElementsUsingLegacyStorage.length ||\n    formElementsUsingLegacyNames.length\n  ) {\n    return (\n      <>\n        <LargeIconMessage\n          IconComponent={WarningIcon}\n          title=\"Incompatible Form Elements\"\n          variant=\"warning\"\n          gutterTop\n          gutterBottom\n        >\n          This Form has Element(s) that are incompatible with Data Manager. If\n          you would like to be able to view submissions for this Form, please\n          follow the instructions below to ensure your Form is compatible.\n        </LargeIconMessage>\n        <Container maxWidth=\"sm\">\n          {!!formElementsUsingLegacyStorage.length && (\n            <>\n              <Typography variant=\"body2\">\n                The following Element(s) are using the <b>Embedded</b> storage\n                type. Please update them to use either the Private or Public\n                storage type.\n              </Typography>\n              <Box marginBottom={1}>\n                <UnorderedList>\n                  {formElementsUsingLegacyStorage.map(\n                    ({ name, label }, index) => (\n                      <ListItem key={index}>\n                        <b>{label}</b>{' '}\n                        <Typography\n                          component=\"span\"\n                          variant=\"body2\"\n                          color=\"textSecondary\"\n                        >\n                          {name}\n                        </Typography>\n                      </ListItem>\n                    ),\n                  )}\n                </UnorderedList>\n              </Box>\n            </>\n          )}\n          {!!formElementsUsingLegacyNames.length && (\n            <>\n              <Typography variant=\"body2\">\n                This following Element(s) have a <b>Name</b> property with\n                unsupported characters. Please update them to have only letters,\n                numbers, underscores and dashes.\n              </Typography>\n              <UnorderedList>\n                {formElementsUsingLegacyNames.map(({ name, label }, index) => (\n                  <ListItem key={index}>\n                    <b>{label}</b>{' '}\n                    <Typography\n                      component=\"span\"\n                      variant=\"body2\"\n                      color=\"textSecondary\"\n                    >\n                      {name}\n                    </Typography>\n                  </ListItem>\n                ))}\n              </UnorderedList>\n            </>\n          )}\n        </Container>\n      </>\n    )\n  }\n\n  return (\n    <FormStore\n      form={form}\n      formElements={formStoreDefinitionState.result.formElements}\n    />\n  )\n}\n\nexport default React.memo(FormStoreContainer)\n"]}

package/dist/components/ErrorMessage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/components/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,gBAAgB,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAYtC,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,UAAU,GACJ;IACN,IAAI,CAAC,aAAa,EAAE;QAClB,aAAa,GAAG,SAAS,CAAA;KAC1B;IAED,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,MAAM,EACJ,UAAU,IAAI,CACZ,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,gBAGpB,CACV,IAGF,QAAQ,CACQ,CAClB,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ErrorIcon from '@mui/icons-material/Error'\nimport LargeIconMessage from './messages/LargeIconMessage'\nimport { Button } from '@mui/material'\ntype Props = {\n  IconComponent?: React.ComponentType<{\n    className: string\n  }>\n  title: string\n  gutterTop?: boolean\n  gutterBottom?: boolean\n  children?: React.ReactNode\n  onTryAgain?: () => void\n}\n\nfunction ErrorMessage({\n  title,\n  children,\n  gutterTop,\n  gutterBottom,\n  IconComponent,\n  onTryAgain,\n}: Props) {\n  if (!IconComponent) {\n    IconComponent = ErrorIcon\n  }\n\n  return (\n    <>\n      <LargeIconMessage\n        IconComponent={IconComponent}\n        title={title}\n        variant=\"error\"\n        gutterTop={gutterTop}\n        gutterBottom={gutterBottom}\n        action={\n          onTryAgain && (\n            <Button\n              variant=\"outlined\"\n              color=\"primary\"\n              onClick={() => onTryAgain()}\n            >\n              Try Again\n            </Button>\n          )\n        }\n      >\n        {children}\n      </LargeIconMessage>\n    </>\n  )\n}\n\nexport default React.memo<Props>(ErrorMessage)\n"]}

package/dist/components/NoResourcesYet.js.map

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

package/dist/components/formStore/ColumnsConfigurationButton.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ColumnInstance } from 'react-table';
-import { Checkbox } from '@mui/material';
-import { SubmissionTypes } from '@oneblink/types';
-declare function ColumnsConfigurationButton({ allColumns, getToggleHideAllColumnsProps, }: {
-    allColumns: ColumnInstance<SubmissionTypes.FormStoreRecord>[];
-    getToggleHideAllColumnsProps: () => React.ComponentProps<typeof Checkbox>;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ColumnsConfigurationButton>;
-export default _default;

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnsConfigurationButton.js","sourceRoot":"","sources":["../../../src/components/formStore/ColumnsConfigurationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAGzD,SAAS,0BAA0B,CAAC,EAClC,UAAU,EACV,4BAA4B,GAI7B;IACC,MAAM,CACJ,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACxB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE1B,MAAM,yBAAyB,GAAG,4BAA4B,EAAE,CAAA;IAEhE,OAAO,CACL;QACE,oBAAC,MAAM,IACL,SAAS,EAAE,oBAAC,YAAY,OAAG,EAC3B,OAAO,EAAE,uBAAuB,EAChC,OAAO,EAAC,UAAU,cAGX;QACT,oBAAC,MAAM,IACL,IAAI,EAAE,oBAAoB,EAC1B,QAAQ,EAAC,IAAI,EACb,SAAS,QACT,OAAO,EAAE,uBAAuB;YAEhC,oBAAC,WAAW,+BAAmC;YAC/C,oBAAC,aAAa,IAAC,QAAQ;gBACrB,oBAAC,SAAS;oBACR,oBAAC,gBAAgB,IACf,OAAO,EACL,oBAAC,QAAQ,OACH,yBAAyB,EAC7B,aAAa,EAAE,CAAC,CAAC,yBAAyB,CAAC,aAAa,GACxD,EAEJ,KAAK,EAAE,4CAAiB,GACxB;oBACD,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;wBACzB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE;4BAC5B,oBAAC,gBAAgB,IACf,OAAO,EAAE,oBAAC,QAAQ,OAAK,MAAM,CAAC,oBAAoB,EAAE,GAAI,EACxD,KAAK,EACH;oCACG,MAAM,CAAC,UAAU;oCACjB,MAAM,CAAC,OAAO,IAAI,CACjB,oBAAC,UAAU,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;wCAC/C,GAAG;;wCACF,MAAM,CAAC,OAAO;4CACL,CACd,CACA,GAEL,CACa,CAClB,CAAA;oBACH,CAAC,CAAC,CACQ,CACE;YAChB,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IACL,OAAO,EAAE,uBAAuB,EAChC,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,WAGZ,CACK,CACT,CACR,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { ColumnInstance } from 'react-table'\nimport {\n  Button,\n  Checkbox,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  FormControlLabel,\n  FormGroup,\n  Typography,\n} from '@mui/material'\nimport { Settings as SettingsIcon } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { SubmissionTypes } from '@oneblink/types'\n\nfunction ColumnsConfigurationButton({\n  allColumns,\n  getToggleHideAllColumnsProps,\n}: {\n  allColumns: ColumnInstance<SubmissionTypes.FormStoreRecord>[]\n  getToggleHideAllColumnsProps: () => React.ComponentProps<typeof Checkbox>\n}) {\n  const [\n    isConfiguringColumns,\n    showColumnConfiguration,\n    hideColumnConfiguration,\n  ] = useBooleanState(false)\n\n  const toggleHideAllColumnsProps = getToggleHideAllColumnsProps()\n\n  return (\n    <>\n      <Button\n        startIcon={<SettingsIcon />}\n        onClick={showColumnConfiguration}\n        variant=\"outlined\"\n      >\n        Columns\n      </Button>\n      <Dialog\n        open={isConfiguringColumns}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={hideColumnConfiguration}\n      >\n        <DialogTitle>Column Configuration</DialogTitle>\n        <DialogContent dividers>\n          <FormGroup>\n            <FormControlLabel\n              control={\n                <Checkbox\n                  {...toggleHideAllColumnsProps}\n                  indeterminate={!!toggleHideAllColumnsProps.indeterminate}\n                />\n              }\n              label={<b>Toggle All</b>}\n            />\n            {allColumns.map((column) => {\n              return (\n                <React.Fragment key={column.id}>\n                  <FormControlLabel\n                    control={<Checkbox {...column.getToggleHiddenProps()} />}\n                    label={\n                      <>\n                        {column.headerText}\n                        {column.tooltip && (\n                          <Typography component=\"span\" color=\"textSecondary\">\n                            {' '}\n                            ({column.tooltip})\n                          </Typography>\n                        )}\n                      </>\n                    }\n                  />\n                </React.Fragment>\n              )\n            })}\n          </FormGroup>\n        </DialogContent>\n        <DialogActions>\n          <Button\n            onClick={hideColumnConfiguration}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Done\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n\nexport default React.memo(ColumnsConfigurationButton)\n"]}