@alextheman/components 7.0.0 → 7.0.2

package/dist/form/index.d.ts

@@ -0,0 +1,95 @@
+import { createFormHook as createFormHook$1 } from "@tanstack/react-form";
+import { ButtonProps } from "@mui/material/Button";
+import { TextFieldProps } from "@mui/material/TextField";
+import { ComponentType } from "react";
+
+//#region src/form/createFormHook.d.ts
+interface AlexFieldComponents {
+  TextField: typeof TextField;
+}
+interface AlexFormComponents {
+  SubmitButton: typeof SubmitButton;
+}
+/** Create the hooks for your app form with `@tanstack/react-form` using our default configuration. */
+declare function createFormHook<FieldComponents extends Record<string, ComponentType<any>> = Record<string, never>, FormComponents extends Record<string, ComponentType<any>> = Record<string, never>>(options?: Partial<Omit<Parameters<typeof createFormHook$1>[0], "formComponents" | "fieldComponents"> & {
+  fieldComponents?: FieldComponents;
+  formComponents?: FormComponents;
+}>): ReturnType<typeof createFormHook$1<AlexFieldComponents & FieldComponents, AlexFormComponents & FormComponents>>;
+//#endregion
+//#region src/form/SubmitButton.d.ts
+interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
+  /** An option to disable the button on submit if the form is not dirty. */
+  disableClean?: boolean;
+  /** The label for the button. */
+  label?: string;
+}
+/**
+ * A Submit Button for use with TanStack Form's app form pattern. Must be used in a `<form.AppForm />` context.
+ *
+ * This should be initialised in your app form in the following way:
+ *
+ * ```typescript
+ *  const { useAppForm } = createFormHook({
+ *     fieldContext,
+ *     formContext,
+ *     formComponents: {
+ *       SubmitButton,
+ *     },
+ *   });
+ * ```
+ * And then used as such:
+ *
+ * ```tsx
+ * <form.AppField>
+ *   ...
+ * </form.AppField>
+ * <form.AppForm>
+ *   <form.SubmitButton />
+ * </form.AppForm>
+ * ```
+ */
+declare function SubmitButton({
+  disableClean,
+  label,
+  ...buttonProps
+}: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/form/TextField.d.ts
+/**
+ * A text field component for use with TanStack Form's app form pattern. Must be used in a `<form.AppField />` context.
+ *
+ * This should be initialised in your app form in the following way:
+ *
+ * ```typescript
+ *  const { useAppForm } = createFormHook({
+ *     fieldContext,
+ *     formContext,
+ *     fieldComponents: {
+ *       TextField,
+ *     },
+ *   });
+ * ```
+ * And then used as such:
+ *
+ * ```tsx
+ * <form.AppField name="firstName">
+ *   {(field) => {
+ *      return <field.TextField />
+ *    }}
+ * </form.AppField>
+ * <form.AppForm>
+ *   <form.SubmitButton />
+ * </form.AppForm>
+ * ```
+ */
+declare function TextField({
+  label,
+  type,
+  ...props
+}: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/form/formHooks.d.ts
+declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+//#endregion
+export { SubmitButton, type SubmitButtonProps, TextField, createFormHook, fieldContext, formContext, useFieldContext, useFormContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/form/index.js

@@ -0,0 +1,2 @@
+import{omitProperties as e}from"@alextheman/utility";import{createFormHook as t,createFormHookContexts as n}from"@tanstack/react-form";import r from"@mui/material/Button";import{jsx as i}from"react/jsx-runtime";import a from"@mui/material/TextField";const{fieldContext:o,formContext:s,useFieldContext:c,useFormContext:l}=n();function u(n){return t({fieldContext:o,formContext:s,fieldComponents:{TextField:f,...n?.fieldComponents},formComponents:{SubmitButton:d,...n?.formComponents},...e(n??{},[`formComponents`,`fieldComponents`])})}function d({disableClean:e,label:t=`Submit`,...n}){let a=l();return i(r,{color:`primary`,disabled:n.disabled||e&&!a.state.isDirty,loading:a.state.isSubmitting,type:`submit`,variant:`contained`,...n,children:t})}function f({label:e,type:t,...n}){let r=c();return i(a,{...n,label:e,error:r.state.meta.errors.length!==0,type:t??`text`,value:r.state.value,onChange:e=>r.handleChange(e.target.value),onBlur:r.handleBlur,placeholder:typeof e==`string`?e:r.name,helperText:r.state.meta.errors[0]??``})}export{d as SubmitButton,f as TextField,u as createFormHook,o as fieldContext,s as formContext,c as useFieldContext,l as useFormContext};
+//# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createTanstackFormHook"],"sources":["../../src/form/formHooks.ts","../../src/form/createFormHook.ts","../../src/form/SubmitButton.tsx","../../src/form/TextField.tsx"],"sourcesContent":["import { createFormHookContexts } from \"@tanstack/react-form\";\n\nexport const { fieldContext, formContext, useFieldContext, useFormContext } =\n  createFormHookContexts();\n","import type { ComponentType } from \"react\";\n\nimport { omitProperties } from \"@alextheman/utility\";\nimport { createFormHook as createTanstackFormHook } from \"@tanstack/react-form\";\n\nimport { SubmitButton, TextField } from \"src/form\";\nimport { fieldContext, formContext } from \"src/form/formHooks\";\n\nexport interface AlexFieldComponents {\n  TextField: typeof TextField;\n}\n\nexport interface AlexFormComponents {\n  SubmitButton: typeof SubmitButton;\n}\n\n/** Create the hooks for your app form with `@tanstack/react-form` using our default configuration. */\nfunction createFormHook<\n  FieldComponents extends Record<string, ComponentType<any>> = Record<string, never>,\n  FormComponents extends Record<string, ComponentType<any>> = Record<string, never>,\n>(\n  options?: Partial<\n    Omit<Parameters<typeof createTanstackFormHook>[0], \"formComponents\" | \"fieldComponents\"> & {\n      fieldComponents?: FieldComponents;\n      formComponents?: FormComponents;\n    }\n  >,\n): ReturnType<\n  typeof createTanstackFormHook<\n    AlexFieldComponents & FieldComponents,\n    AlexFormComponents & FormComponents\n  >\n> {\n  return createTanstackFormHook({\n    fieldContext,\n    formContext,\n    fieldComponents: {\n      TextField,\n      ...options?.fieldComponents,\n    } as AlexFieldComponents & FieldComponents,\n    formComponents: {\n      SubmitButton,\n      ...options?.formComponents,\n    } as AlexFormComponents & FormComponents,\n    ...omitProperties(options ?? {}, [\"formComponents\", \"fieldComponents\"]),\n  });\n}\n\nexport default createFormHook;\n","import type { ButtonProps } from \"@mui/material/Button\";\n\nimport Button from \"@mui/material/Button\";\n\nimport { useFormContext } from \"src/form/formHooks\";\n\nexport interface SubmitButtonProps extends Omit<ButtonProps, \"type\"> {\n  /** An option to disable the button on submit if the form is not dirty. */\n  disableClean?: boolean;\n  /** The label for the button. */\n  label?: string;\n}\n\n/**\n * A Submit Button for use with TanStack Form's app form pattern. Must be used in a `<form.AppForm />` context.\n *\n * This should be initialised in your app form in the following way:\n *\n * ```typescript\n *  const { useAppForm } = createFormHook({\n *     fieldContext,\n *     formContext,\n *     formComponents: {\n *       SubmitButton,\n *     },\n *   });\n * ```\n * And then used as such:\n *\n * ```tsx\n * <form.AppField>\n *   ...\n * </form.AppField>\n * <form.AppForm>\n *   <form.SubmitButton />\n * </form.AppForm>\n * ```\n */\nfunction SubmitButton({ disableClean, label = \"Submit\", ...buttonProps }: SubmitButtonProps) {\n  const form = useFormContext();\n\n  return (\n    <Button\n      color=\"primary\"\n      disabled={buttonProps.disabled || (disableClean && !form.state.isDirty)}\n      loading={form.state.isSubmitting}\n      type=\"submit\"\n      variant=\"contained\"\n      {...buttonProps}\n    >\n      {label}\n    </Button>\n  );\n}\n\nexport default SubmitButton;\n","import type { TextFieldProps as MUITextFieldProps } from \"@mui/material/TextField\";\n\nimport MUITextField from \"@mui/material/TextField\";\n\nimport { useFieldContext } from \"src/form/formHooks\";\n\n/**\n * A text field component for use with TanStack Form's app form pattern. Must be used in a `<form.AppField />` context.\n *\n * This should be initialised in your app form in the following way:\n *\n * ```typescript\n *  const { useAppForm } = createFormHook({\n *     fieldContext,\n *     formContext,\n *     fieldComponents: {\n *       TextField,\n *     },\n *   });\n * ```\n * And then used as such:\n *\n * ```tsx\n * <form.AppField name=\"firstName\">\n *   {(field) => {\n *      return <field.TextField />\n *    }}\n * </form.AppField>\n * <form.AppForm>\n *   <form.SubmitButton />\n * </form.AppForm>\n * ```\n */\nfunction TextField({ label, type, ...props }: MUITextFieldProps) {\n  const field = useFieldContext();\n\n  return (\n    <MUITextField\n      {...props}\n      label={label}\n      error={field.state.meta.errors.length !== 0}\n      type={type ?? \"text\"}\n      value={field.state.value}\n      onChange={(event) => {\n        return field.handleChange(event.target.value);\n      }}\n      onBlur={field.handleBlur}\n      placeholder={typeof label === \"string\" ? label : field.name}\n      helperText={field.state.meta.errors[0] ?? \"\"}\n    />\n  );\n}\n\nexport default TextField;\n"],"mappings":"0PAEA,KAAa,CAAE,eAAc,cAAa,kBAAiB,kBACzD,EAAuB,ECczB,SAAS,EAIP,EAWA,CACA,OAAOA,EAAuB,CAC5B,eACA,cACA,gBAAiB,CACf,YACA,GAAG,GAAS,eACd,EACA,eAAgB,CACd,eACA,GAAG,GAAS,cACd,EACA,GAAG,EAAe,GAAW,CAAC,EAAG,CAAC,iBAAkB,iBAAiB,CAAC,CACxE,CAAC,CACH,CCRA,SAAS,EAAa,CAAE,eAAc,QAAQ,SAAU,GAAG,GAAkC,CAC3F,IAAM,EAAO,EAAe,EAE5B,OACE,EAAC,EAAD,CACE,MAAM,UACN,SAAU,EAAY,UAAa,GAAgB,CAAC,EAAK,MAAM,QAC/D,QAAS,EAAK,MAAM,aACpB,KAAK,SACL,QAAQ,YACR,GAAI,WAEH,CACK,CAAA,CAEZ,CCpBA,SAAS,EAAU,CAAE,QAAO,OAAM,GAAG,GAA4B,CAC/D,IAAM,EAAQ,EAAgB,EAE9B,OACE,EAAC,EAAD,CACE,GAAI,EACG,QACP,MAAO,EAAM,MAAM,KAAK,OAAO,SAAW,EAC1C,KAAM,GAAQ,OACd,MAAO,EAAM,MAAM,MACnB,SAAW,GACF,EAAM,aAAa,EAAM,OAAO,KAAK,EAE9C,OAAQ,EAAM,WACd,YAAa,OAAO,GAAU,SAAW,EAAQ,EAAM,KACvD,WAAY,EAAM,MAAM,KAAK,OAAO,IAAM,EAC3C,CAAA,CAEL"}

package/dist/snackbar/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { OptionalOnCondition } from "@alextheman/utility";
 import { AlertColor } from "@mui/material/Alert";
+import { OptionalOnCondition } from "@alextheman/utility";
 
 //#region src/root/types/ContextHookOptions.d.ts
 interface ContextHookOptions<Strict extends boolean = true> {
@@ -47,5 +47,9 @@ declare function SnackbarProvider({
   autoHideDuration
 }: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { SnackbarProvider, type SnackbarProviderProps, useSnackbarContext };
+//#region src/snackbar/Snackbars.d.ts
+/** Displays the array of snackbars provided by `SnackbarProvider`. */
+declare function Snackbars(): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { SnackbarProvider, type SnackbarProviderProps, Snackbars, useSnackbarContext };
 //# sourceMappingURL=index.d.ts.map

package/dist/snackbar/index.js

@@ -1,2 +1,2 @@
-import{DataError as e}from"@alextheman/utility/v6";import{createContext as t,use as n,useState as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=t(void 0);function o({strict:t=!0}={}){let r=n(a);if(t&&!r)throw new e({strict:t,context:r},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return r}function s({children:e,autoHideDuration:t=5e3}){let[n,o]=r([]);function s(e,n={}){let{severity:r=`info`,duration:i=t}=n;o(t=>[...t,{severity:r,id:crypto.randomUUID(),message:e,duration:i}])}function c(e){o(t=>{let n=[...t];return e===void 0?(n.shift(),n):n.filter(t=>t.id!==e)})}return i(a,{value:{snackbars:n,addSnackbar:s,removeSnackbar:c},children:e})}export{s as SnackbarProvider,o as useSnackbarContext};
+import{DataError as e}from"@alextheman/utility/v6";import{createContext as t,use as n,useEffect as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";import o from"@mui/material/Alert";import s from"@mui/material/Snackbar";const c=t(void 0);function l({strict:t=!0}={}){let r=n(c);if(t&&!r)throw new e({strict:t,context:r},`SNACKBAR_PROVIDER_NOT_FOUND`,`Could not find the SnackbarProvider context. Please double-check that it is present.`);return r}function u({children:e,autoHideDuration:t=5e3}){let[n,r]=i([]);function o(e,n={}){let{severity:i=`info`,duration:a=t}=n;r(t=>[...t,{severity:i,id:crypto.randomUUID(),message:e,duration:a}])}function s(e){r(t=>{let n=[...t];return e===void 0?(n.shift(),n):n.filter(t=>t.id!==e)})}return a(c,{value:{snackbars:n,addSnackbar:o,removeSnackbar:s},children:e})}function d(){let{snackbars:e,removeSnackbar:t}=l(),[n,c]=i(!1),[u,d]=i(null);function f(e,t){t!==`clickaway`&&(d(null),c(!1))}return r(()=>{!n&&e.length!==0&&(d(e[0]),t(),c(!0))},[n,t,e]),a(s,{open:n,autoHideDuration:u?.duration,onClose:f,children:a(o,{onClose:f,severity:u?.severity??`info`,children:u?.message})})}export{u as SnackbarProvider,d as Snackbars,l as useSnackbarContext};
 //# sourceMappingURL=index.js.map

package/dist/snackbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/snackbar/SnackbarProvider.tsx"],"sourcesContent":["import type { OptionalOnCondition } from \"@alextheman/utility\";\nimport type { AlertColor } from \"@mui/material/Alert\";\nimport type { ReactNode } from \"react\";\n\nimport type { ContextHookOptions } from \"src/root/types\";\n\nimport { DataError } from \"@alextheman/utility/v6\";\nimport { createContext, use, useState } from \"react\";\n\nexport interface SnackbarProviderProps {\n  /** The children that will have access to the snackbar context. */\n  children: ReactNode;\n  /** The amount of seconds to wait before hiding the snackbar. */\n  autoHideDuration?: number;\n}\n\nexport interface SnackbarItem {\n  /** The ID of the Snackbar */\n  id: string;\n  /** The severity of the alert. This defines the color and icon used. */\n  severity?: AlertColor;\n  /** The message to show as part of the snackbar. */\n  message: string;\n  /** The amount of milliseconds to show the snackbar for. */\n  duration: number;\n}\n\nexport interface AddSnackbarOptions {\n  severity?: AlertColor;\n  duration?: number;\n}\nexport interface SnackbarContextValue {\n  /** An array of all the snackbars to render. */\n  snackbars: Array<SnackbarItem>;\n  /** A function that adds the snackbar to the page. */\n  addSnackbar: (message: string, options?: AddSnackbarOptions) => void;\n  /** A function to remove a snackbar. */\n  removeSnackbar: (id?: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarContextValue | undefined>(undefined);\n\n/** Access the snackbar context directly. */\nexport function useSnackbarContext<Strict extends boolean = true>({\n  strict = true as Strict,\n}: ContextHookOptions<Strict> = {}): OptionalOnCondition<Strict, SnackbarContextValue> {\n  const context = use(SnackbarContext);\n  if (strict && !context) {\n    throw new DataError(\n      { strict, context },\n      \"SNACKBAR_PROVIDER_NOT_FOUND\",\n      \"Could not find the SnackbarProvider context. Please double-check that it is present.\",\n    );\n  }\n  return context as OptionalOnCondition<Strict, SnackbarContextValue>;\n}\n\n/** Provides an array of snackbars for the `Snackbars` component to display. */\nfunction SnackbarProvider({ children, autoHideDuration = 5000 }: SnackbarProviderProps) {\n  const [snackbars, setSnackbars] = useState<Array<SnackbarItem>>([]);\n\n  function addSnackbar(message: string, options: AddSnackbarOptions = {}) {\n    const { severity = \"info\", duration = autoHideDuration } = options;\n    setSnackbars((previous) => {\n      return [\n        ...previous,\n        {\n          severity,\n          id: crypto.randomUUID(),\n          message,\n          duration,\n        },\n      ];\n    });\n  }\n\n  function removeSnackbar(id?: string) {\n    setSnackbars((previous) => {\n      const newSnackbars = [...previous];\n      if (id === undefined) {\n        newSnackbars.shift();\n        return newSnackbars;\n      }\n\n      return newSnackbars.filter((snackbar) => {\n        return snackbar.id !== id;\n      });\n    });\n  }\n\n  return (\n    <SnackbarContext value={{ snackbars, addSnackbar, removeSnackbar }}>{children}</SnackbarContext>\n  );\n}\n\nexport default SnackbarProvider;\n"],"mappings":"wJAwCA,MAAM,EAAkB,EAAgD,IAAA,EAAS,EAGjF,SAAgB,EAAkD,CAChE,SAAS,IACqB,CAAC,EAAsD,CACrF,IAAM,EAAU,EAAI,CAAe,EACnC,GAAI,GAAU,CAAC,EACb,MAAM,IAAI,EACR,CAAE,SAAQ,SAAQ,EAClB,8BACA,sFACF,EAEF,OAAO,CACT,CAGA,SAAS,EAAiB,CAAE,WAAU,mBAAmB,KAA+B,CACtF,GAAM,CAAC,EAAW,GAAgB,EAA8B,CAAC,CAAC,EAElE,SAAS,EAAY,EAAiB,EAA8B,CAAC,EAAG,CACtE,GAAM,CAAE,WAAW,OAAQ,WAAW,GAAqB,EAC3D,EAAc,GACL,CACL,GAAG,EACH,CACE,WACA,GAAI,OAAO,WAAW,EACtB,UACA,UACF,CACF,CACD,CACH,CAEA,SAAS,EAAe,EAAa,CACnC,EAAc,GAAa,CACzB,IAAM,EAAe,CAAC,GAAG,CAAQ,EAMjC,OALI,IAAO,IAAA,IACT,EAAa,MAAM,EACZ,GAGF,EAAa,OAAQ,GACnB,EAAS,KAAO,CACxB,CACH,CAAC,CACH,CAEA,OACE,EAAC,EAAD,CAAiB,MAAO,CAAE,YAAW,cAAa,gBAAe,EAAI,UAA0B,CAAA,CAEnG"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/snackbar/SnackbarProvider.tsx","../../src/snackbar/Snackbars.tsx"],"sourcesContent":["import type { OptionalOnCondition } from \"@alextheman/utility\";\nimport type { AlertColor } from \"@mui/material/Alert\";\nimport type { ReactNode } from \"react\";\n\nimport type { ContextHookOptions } from \"src/root/types\";\n\nimport { DataError } from \"@alextheman/utility/v6\";\nimport { createContext, use, useState } from \"react\";\n\nexport interface SnackbarProviderProps {\n  /** The children that will have access to the snackbar context. */\n  children: ReactNode;\n  /** The amount of seconds to wait before hiding the snackbar. */\n  autoHideDuration?: number;\n}\n\nexport interface SnackbarItem {\n  /** The ID of the Snackbar */\n  id: string;\n  /** The severity of the alert. This defines the color and icon used. */\n  severity?: AlertColor;\n  /** The message to show as part of the snackbar. */\n  message: string;\n  /** The amount of milliseconds to show the snackbar for. */\n  duration: number;\n}\n\nexport interface AddSnackbarOptions {\n  severity?: AlertColor;\n  duration?: number;\n}\nexport interface SnackbarContextValue {\n  /** An array of all the snackbars to render. */\n  snackbars: Array<SnackbarItem>;\n  /** A function that adds the snackbar to the page. */\n  addSnackbar: (message: string, options?: AddSnackbarOptions) => void;\n  /** A function to remove a snackbar. */\n  removeSnackbar: (id?: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarContextValue | undefined>(undefined);\n\n/** Access the snackbar context directly. */\nexport function useSnackbarContext<Strict extends boolean = true>({\n  strict = true as Strict,\n}: ContextHookOptions<Strict> = {}): OptionalOnCondition<Strict, SnackbarContextValue> {\n  const context = use(SnackbarContext);\n  if (strict && !context) {\n    throw new DataError(\n      { strict, context },\n      \"SNACKBAR_PROVIDER_NOT_FOUND\",\n      \"Could not find the SnackbarProvider context. Please double-check that it is present.\",\n    );\n  }\n  return context as OptionalOnCondition<Strict, SnackbarContextValue>;\n}\n\n/** Provides an array of snackbars for the `Snackbars` component to display. */\nfunction SnackbarProvider({ children, autoHideDuration = 5000 }: SnackbarProviderProps) {\n  const [snackbars, setSnackbars] = useState<Array<SnackbarItem>>([]);\n\n  function addSnackbar(message: string, options: AddSnackbarOptions = {}) {\n    const { severity = \"info\", duration = autoHideDuration } = options;\n    setSnackbars((previous) => {\n      return [\n        ...previous,\n        {\n          severity,\n          id: crypto.randomUUID(),\n          message,\n          duration,\n        },\n      ];\n    });\n  }\n\n  function removeSnackbar(id?: string) {\n    setSnackbars((previous) => {\n      const newSnackbars = [...previous];\n      if (id === undefined) {\n        newSnackbars.shift();\n        return newSnackbars;\n      }\n\n      return newSnackbars.filter((snackbar) => {\n        return snackbar.id !== id;\n      });\n    });\n  }\n\n  return (\n    <SnackbarContext value={{ snackbars, addSnackbar, removeSnackbar }}>{children}</SnackbarContext>\n  );\n}\n\nexport default SnackbarProvider;\n","import type { SyntheticEvent } from \"react\";\n\nimport type { SnackbarItem } from \"src/snackbar/SnackbarProvider\";\n\nimport Alert from \"@mui/material/Alert\";\nimport Snackbar from \"@mui/material/Snackbar\";\nimport { useEffect, useState } from \"react\";\n\nimport { useSnackbarContext } from \"src/snackbar/SnackbarProvider\";\n\n/** Displays the array of snackbars provided by `SnackbarProvider`. */\nfunction Snackbars() {\n  const { snackbars, removeSnackbar } = useSnackbarContext();\n  const [open, setOpen] = useState<boolean>(false);\n  const [currentSnackbar, setCurrentSnackbar] = useState<SnackbarItem | null>(null);\n\n  function onClose(_: SyntheticEvent | Event, reason?: string) {\n    if (reason !== \"clickaway\") {\n      setCurrentSnackbar(null);\n      setOpen(false);\n    }\n  }\n\n  useEffect(() => {\n    if (!open && snackbars.length !== 0) {\n      /* eslint-disable @eslint-react/set-state-in-effect -- This is a legitimate usage as we need to be able to control exactly when the  snackbar gets added/shown. */\n      setCurrentSnackbar(snackbars[0]);\n      removeSnackbar();\n      setOpen(true);\n      /* eslint-enable */\n    }\n  }, [open, removeSnackbar, snackbars]);\n\n  return (\n    <Snackbar open={open} autoHideDuration={currentSnackbar?.duration} onClose={onClose}>\n      <Alert onClose={onClose} severity={currentSnackbar?.severity ?? \"info\"}>\n        {currentSnackbar?.message}\n      </Alert>\n    </Snackbar>\n  );\n}\n\nexport default Snackbars;\n"],"mappings":"gPAwCA,MAAM,EAAkB,EAAgD,IAAA,EAAS,EAGjF,SAAgB,EAAkD,CAChE,SAAS,IACqB,CAAC,EAAsD,CACrF,IAAM,EAAU,EAAI,CAAe,EACnC,GAAI,GAAU,CAAC,EACb,MAAM,IAAI,EACR,CAAE,SAAQ,SAAQ,EAClB,8BACA,sFACF,EAEF,OAAO,CACT,CAGA,SAAS,EAAiB,CAAE,WAAU,mBAAmB,KAA+B,CACtF,GAAM,CAAC,EAAW,GAAgB,EAA8B,CAAC,CAAC,EAElE,SAAS,EAAY,EAAiB,EAA8B,CAAC,EAAG,CACtE,GAAM,CAAE,WAAW,OAAQ,WAAW,GAAqB,EAC3D,EAAc,GACL,CACL,GAAG,EACH,CACE,WACA,GAAI,OAAO,WAAW,EACtB,UACA,UACF,CACF,CACD,CACH,CAEA,SAAS,EAAe,EAAa,CACnC,EAAc,GAAa,CACzB,IAAM,EAAe,CAAC,GAAG,CAAQ,EAMjC,OALI,IAAO,IAAA,IACT,EAAa,MAAM,EACZ,GAGF,EAAa,OAAQ,GACnB,EAAS,KAAO,CACxB,CACH,CAAC,CACH,CAEA,OACE,EAAC,EAAD,CAAiB,MAAO,CAAE,YAAW,cAAa,gBAAe,EAAI,UAA0B,CAAA,CAEnG,CClFA,SAAS,GAAY,CACnB,GAAM,CAAE,YAAW,kBAAmB,EAAmB,EACnD,CAAC,EAAM,GAAW,EAAkB,EAAK,EACzC,CAAC,EAAiB,GAAsB,EAA8B,IAAI,EAEhF,SAAS,EAAQ,EAA2B,EAAiB,CACvD,IAAW,cACb,EAAmB,IAAI,EACvB,EAAQ,EAAK,EAEjB,CAYA,OAVA,MAAgB,CACV,CAAC,GAAQ,EAAU,SAAW,IAEhC,EAAmB,EAAU,EAAE,EAC/B,EAAe,EACf,EAAQ,EAAI,EAGhB,EAAG,CAAC,EAAM,EAAgB,CAAS,CAAC,EAGlC,EAAC,EAAD,CAAgB,OAAM,iBAAkB,GAAiB,SAAmB,mBAC1E,EAAC,EAAD,CAAgB,UAAS,SAAU,GAAiB,UAAY,gBAC7D,GAAiB,OACb,CAAA,CACC,CAAA,CAEd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alextheman/components",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "A package containing common React components used across my projects.",
   "repository": {
     "type": "git",