@alextheman/components 6.1.2 → 6.2.1

package/dist/index.d.cts

@@ -2,13 +2,14 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { CollapseProps } from "@mui/material/Collapse";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import * as react0 from "react";
-import { CSSProperties, ComponentProps, ComponentType, Dispatch, ElementType, JSX, ReactNode, Ref, SetStateAction } from "react";
-import { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
+import Button$1, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { LinkProps } from "@mui/material/Link";
 import { CommonProps, OverridableComponent } from "@mui/material/OverridableComponent";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { OptionalOnCondition } from "@alextheman/utility";
+import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
 import { TypographyProps } from "@mui/material/Typography";
 import { LiveProvider } from "react-live";
@@ -56,6 +57,18 @@ interface DropdownMenuProps {
   onOpen?: () => void;
   onClose?: () => void;
 }
+/**
+ * @param root0
+ * @param root0.children
+ * @param root0.button
+ * @param root0.buttonChildren
+ * @param root0.buttonProps
+ * @param root0.isOpenIcon
+ * @param root0.isClosedIcon
+ * @param root0.onOpen
+ * @param root0.onClose
+ * @deprecated This component does not support the new context-based pattern and individual DropdownMenuItem components. Please use DropdownMenu2 instead.
+ */
 declare function DropdownMenu({
   children,
   button: Button,
@@ -168,23 +181,93 @@ interface ContextHookOptions<S extends boolean = true> {
   strict?: S;
 }
 //#endregion
+//#region src/providers/DropdownMenu2/DropdownMenu2.d.ts
+interface DropdownMenuContextValue {
+  closeMenu: () => void;
+  isDropdownOpen: boolean;
+}
+declare function useDropdownMenu<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
+interface DropdownMenu2Props {
+  children: ReactNode;
+  button?: ElementType;
+  buttonProps?: Omit<ButtonOwnProps, "endIcon"> & {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+  };
+  openIcon?: ReactNode;
+  closedIcon?: ReactNode;
+}
+declare function DropdownMenu2({
+  children,
+  button: Button,
+  buttonProps,
+  openIcon,
+  closedIcon
+}: DropdownMenu2Props): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/providers/DropdownMenu2/DropdownMenuExternalLink.d.ts
+interface DropdownMenuExternalLinkProps extends MenuItemOwnProps {
+  ref?: Ref<HTMLAnchorElement>;
+  href: ComponentProps<typeof ExternalLink>["href"];
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}
+declare function DropdownMenuExternalLink({
+  ref,
+  href,
+  children,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuExternalLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/providers/DropdownMenu2/DropdownMenuInternalLink.d.ts
+interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
+  ref?: Ref<HTMLAnchorElement>;
+  to: ComponentProps<typeof InternalLink>["to"];
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}
+declare function DropdownMenuInternalLink({
+  to,
+  ref,
+  children,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuInternalLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/providers/DropdownMenu2/DropdownMenuItem.d.ts
+type DropdownMenuItemProps<RootComponent extends ElementType = typeof Button$1> = {
+  component?: RootComponent;
+  children?: ReactNode;
+  ref?: ComponentPropsWithRef<RootComponent>["ref"];
+  onClick?: ComponentProps<RootComponent>["onClick"];
+} & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
+declare function DropdownMenuItem<RootComponent extends ElementType>({
+  component,
+  children,
+  ref,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuItemProps<RootComponent>): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/providers/LoaderProvider/LoaderProvider.d.ts
-interface LoaderProviderBaseProps<T> {
+interface LoaderProviderBaseProps<DataType> {
   /** The current loading status (true if loading, false if not) */
   isLoading: boolean;
   /** The data being loaded. */
-  data?: T;
+  data?: DataType;
   /** A parser for the data. */
-  dataParser?: (data: unknown) => NonNullable<T>;
+  dataParser?: (data: unknown) => NonNullable<DataType>;
   /** The component to show when the data is being fetched. */
   loadingComponent?: ReactNode;
 }
-interface LoaderProviderPropsWithNoError<T> extends LoaderProviderBaseProps<T> {
+interface LoaderProviderPropsWithNoError<DataType> extends LoaderProviderBaseProps<DataType> {
   error?: never;
   errorComponent?: never;
   logError?: never;
 }
-interface LoaderProviderPropsWithError<T> extends LoaderProviderBaseProps<T> {
+interface LoaderProviderPropsWithError<DataType> extends LoaderProviderBaseProps<DataType> {
   /** The error given if the request gave an error. */
   error: unknown;
   /** The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided. */
@@ -196,18 +279,28 @@ type LoaderContextValue<T> = LoaderProviderPropsWithNoError<T> | LoaderProviderP
 type LoaderProviderProps<T> = LoaderContextValue<T> & {
   children: ReactNode;
 };
-/** A provider for a context that deals with state management when fetching data from an API.
+/**
+ * A provider for a context that deals with state management when fetching data from an API.
  * This may be used over Loader if you require more control over the placement of the error message and data display.
+ * @template DataType - The type of data being loaded.
+ * @param root0 - Props to pass to LoaderProvider.
+ * @param root0.children - The components that may receive access to the LoaderContext value.
+ * @param root0.loadingComponent - The component to show when the data is being fetched.
+ * @param root0.isLoading - The current loading status (true if loading, false if not)
+ * @param root0.error - The error given if the request gave an error.
+ * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param root0.logError - An option to log the error to the console. Note that this may not be provided unless the error prop has also been provided.
  */
-declare function LoaderProvider<T>({
+declare function LoaderProvider<DataType>({
   children,
   loadingComponent,
   ...contextProps
-}: LoaderProviderProps<T>): react_jsx_runtime0.JSX.Element;
+}: LoaderProviderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderData.d.ts
 interface LoaderDataProps<T> {
-  /** The elements to show after data has been loaded.
+  /**
+   * The elements to show after data has been loaded.
    * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
    */
   children: ReactNode | ((data: NonNullable<T>) => ReactNode);
@@ -216,23 +309,26 @@ interface LoaderDataProps<T> {
   /** The component to show when the data is being fetched. */
   loadingComponent?: ReactNode;
 }
-/** The component responsible for showing the data provided by LoaderProvider. */
-declare function LoaderData<T>({
+/**
+ * The component responsible for showing the data provided by LoaderProvider.
+ * @template DataType - The type of data being loaded.
+ * @param root0 - Props to pass to LoaderData.
+ * @param root0.children - The elements to show after data has been loaded.
+ * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
+ * @param root0.dataParser - A parser for the data.
+ * @param root0.loadingComponent - The component to show when the data is being fetched.
+ */
+declare function LoaderData<DataType>({
   children,
   dataParser: loaderDataParser,
   loadingComponent
-}: LoaderDataProps<T>): react_jsx_runtime0.JSX.Element;
+}: LoaderDataProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderError.d.ts
 interface LoaderErrorBaseProps {
-  /**
-   * The component to show if an error has been thrown.
-   * @deprecated Please pass in the content to show on error as children instead.
-   */
-  errorComponent?: ReactNode | ((error: unknown) => ReactNode);
   /** The component to show if an error has been thrown. */
   children?: ReactNode | ((error: unknown) => ReactNode);
-  /** Whether you want to log the error to the console or not. */
+  /** An option to log the error to the console. */
   logError?: boolean;
 }
 interface LoaderErrorPropsWithUndefinedOrNull extends LoaderErrorBaseProps {
@@ -249,7 +345,15 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
   nullableComponent?: ReactNode;
 }
 type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
-/** The component responsible for showing any errors provided by LoaderProvider. */
+/**
+ * The component responsible for showing any errors provided by LoaderProvider.
+ * @param root0 - The props to be passed to LoaderError.
+ * @param root0.children - The component to show if an error has been thrown.
+ * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param root0.logError - An option to log the error to the console.
+ */
 declare function LoaderError({
   children,
   undefinedComponent,
@@ -312,19 +416,30 @@ declare function SnackbarProvider({
 }: SnackbarProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Loader.d.ts
-type LoaderProps<T> = Omit<LoaderProviderProps<T>, "children"> & Omit<LoaderErrorProps, "errorComponent" | "children"> & Omit<LoaderDataProps<T>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
-/** An in-line component that deals with state management when fetching data from an API.
+type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "logError"> & Omit<LoaderErrorProps, "errorComponent" | "children"> & Omit<LoaderDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
+/**
+ * An in-line component that deals with state management when fetching data from an API.
  * This may be used over LoaderProvider if you don't require as much control over the placement of the error message and data display.
+ * @template DataType - The type of data being loaded.
+ * @param root0 - Props to pass to Loader.
+ * @param root0.children - The elements to show after data has been loaded.
+ * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param root0.loadingComponent - The component to show when the data is being fetched.
+ * @param root0.logError - An option to log the error to the console.
  */
-declare function Loader<T>({
+declare function Loader<DataType>({
   children,
   errorComponent,
   undefinedComponent,
   nullComponent,
   nullableComponent,
+  logError,
   loadingComponent,
   ...loaderProviderProps
-}: LoaderProps<T>): react_jsx_runtime0.JSX.Element;
+}: LoaderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/NavigationBottom.d.ts
 interface NavItemBottom {
@@ -425,5 +540,5 @@ declare function SwitchWithIcons({
 //#region src/hooks/useHash.d.ts
 declare function useHash<S extends string>(initialHash: S | undefined): [S, Dispatch<SetStateAction<S>>];
 //#endregion
-export { CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useHash, useMode, useScreenSize, useSnackbar };
+export { CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import { CollapseProps } from "@mui/material/Collapse";
 import * as react0 from "react";
-import { CSSProperties, ComponentProps, ComponentType, Dispatch, ElementType, JSX, ReactNode, Ref, SetStateAction } from "react";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, Dispatch, ElementType, JSX, MouseEvent, MouseEventHandler, ReactNode, Ref, SetStateAction } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import MUIButton, { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
+import { MenuItemOwnProps } from "@mui/material/MenuItem";
 import { AlertColor } from "@mui/material/Alert";
 import { PaletteMode, SxProps, Theme } from "@mui/material/styles";
 import { OptionalOnCondition } from "@alextheman/utility";
-import { ButtonOwnProps, ButtonProps } from "@mui/material/Button";
 import { LinkProps } from "@mui/material/Link";
 import { ListItemButtonProps } from "@mui/material/ListItemButton";
 import { TypographyProps } from "@mui/material/Typography";
@@ -56,6 +57,18 @@ interface DropdownMenuProps {
   onOpen?: () => void;
   onClose?: () => void;
 }
+/**
+ * @param root0
+ * @param root0.children
+ * @param root0.button
+ * @param root0.buttonChildren
+ * @param root0.buttonProps
+ * @param root0.isOpenIcon
+ * @param root0.isClosedIcon
+ * @param root0.onOpen
+ * @param root0.onClose
+ * @deprecated This component does not support the new context-based pattern and individual DropdownMenuItem components. Please use DropdownMenu2 instead.
+ */
 declare function DropdownMenu({
   children,
   button: Button,
@@ -168,23 +181,93 @@ interface ContextHookOptions<S extends boolean = true> {
   strict?: S;
 }
 //#endregion
+//#region src/providers/DropdownMenu2/DropdownMenu2.d.ts
+interface DropdownMenuContextValue {
+  closeMenu: () => void;
+  isDropdownOpen: boolean;
+}
+declare function useDropdownMenu<Strict extends boolean = true>({
+  strict
+}?: ContextHookOptions<Strict>): OptionalOnCondition<Strict, DropdownMenuContextValue>;
+interface DropdownMenu2Props {
+  children: ReactNode;
+  button?: ElementType;
+  buttonProps?: Omit<ButtonOwnProps, "endIcon"> & {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+  };
+  openIcon?: ReactNode;
+  closedIcon?: ReactNode;
+}
+declare function DropdownMenu2({
+  children,
+  button: Button,
+  buttonProps,
+  openIcon,
+  closedIcon
+}: DropdownMenu2Props): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/providers/DropdownMenu2/DropdownMenuExternalLink.d.ts
+interface DropdownMenuExternalLinkProps extends MenuItemOwnProps {
+  ref?: Ref<HTMLAnchorElement>;
+  href: ComponentProps<typeof ExternalLink>["href"];
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}
+declare function DropdownMenuExternalLink({
+  ref,
+  href,
+  children,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuExternalLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/providers/DropdownMenu2/DropdownMenuInternalLink.d.ts
+interface DropdownMenuInternalLinkProps extends MenuItemOwnProps {
+  ref?: Ref<HTMLAnchorElement>;
+  to: ComponentProps<typeof InternalLink>["to"];
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children: ReactNode;
+}
+declare function DropdownMenuInternalLink({
+  to,
+  ref,
+  children,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuInternalLinkProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/providers/DropdownMenu2/DropdownMenuItem.d.ts
+type DropdownMenuItemProps<RootComponent extends ElementType = typeof MUIButton> = {
+  component?: RootComponent;
+  children?: ReactNode;
+  ref?: ComponentPropsWithRef<RootComponent>["ref"];
+  onClick?: ComponentProps<RootComponent>["onClick"];
+} & Omit<ComponentPropsWithoutRef<RootComponent>, "children" | "ref"> & MenuItemOwnProps;
+declare function DropdownMenuItem<RootComponent extends ElementType>({
+  component,
+  children,
+  ref,
+  onClick,
+  ...menuItemProps
+}: DropdownMenuItemProps<RootComponent>): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/providers/LoaderProvider/LoaderProvider.d.ts
-interface LoaderProviderBaseProps<T> {
+interface LoaderProviderBaseProps<DataType> {
   /** The current loading status (true if loading, false if not) */
   isLoading: boolean;
   /** The data being loaded. */
-  data?: T;
+  data?: DataType;
   /** A parser for the data. */
-  dataParser?: (data: unknown) => NonNullable<T>;
+  dataParser?: (data: unknown) => NonNullable<DataType>;
   /** The component to show when the data is being fetched. */
   loadingComponent?: ReactNode;
 }
-interface LoaderProviderPropsWithNoError<T> extends LoaderProviderBaseProps<T> {
+interface LoaderProviderPropsWithNoError<DataType> extends LoaderProviderBaseProps<DataType> {
   error?: never;
   errorComponent?: never;
   logError?: never;
 }
-interface LoaderProviderPropsWithError<T> extends LoaderProviderBaseProps<T> {
+interface LoaderProviderPropsWithError<DataType> extends LoaderProviderBaseProps<DataType> {
   /** The error given if the request gave an error. */
   error: unknown;
   /** The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided. */
@@ -196,18 +279,28 @@ type LoaderContextValue<T> = LoaderProviderPropsWithNoError<T> | LoaderProviderP
 type LoaderProviderProps<T> = LoaderContextValue<T> & {
   children: ReactNode;
 };
-/** A provider for a context that deals with state management when fetching data from an API.
+/**
+ * A provider for a context that deals with state management when fetching data from an API.
  * This may be used over Loader if you require more control over the placement of the error message and data display.
+ * @template DataType - The type of data being loaded.
+ * @param root0 - Props to pass to LoaderProvider.
+ * @param root0.children - The components that may receive access to the LoaderContext value.
+ * @param root0.loadingComponent - The component to show when the data is being fetched.
+ * @param root0.isLoading - The current loading status (true if loading, false if not)
+ * @param root0.error - The error given if the request gave an error.
+ * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param root0.logError - An option to log the error to the console. Note that this may not be provided unless the error prop has also been provided.
  */
-declare function LoaderProvider<T>({
+declare function LoaderProvider<DataType>({
   children,
   loadingComponent,
   ...contextProps
-}: LoaderProviderProps<T>): react_jsx_runtime0.JSX.Element;
+}: LoaderProviderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderData.d.ts
 interface LoaderDataProps<T> {
-  /** The elements to show after data has been loaded.
+  /**
+   * The elements to show after data has been loaded.
    * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
    */
   children: ReactNode | ((data: NonNullable<T>) => ReactNode);
@@ -216,23 +309,26 @@ interface LoaderDataProps<T> {
   /** The component to show when the data is being fetched. */
   loadingComponent?: ReactNode;
 }
-/** The component responsible for showing the data provided by LoaderProvider. */
-declare function LoaderData<T>({
+/**
+ * The component responsible for showing the data provided by LoaderProvider.
+ * @template DataType - The type of data being loaded.
+ * @param root0 - Props to pass to LoaderData.
+ * @param root0.children - The elements to show after data has been loaded.
+ * This is best provided as a function with a data argument that guarantees the data will not be undefined by the time you receive it here.
+ * @param root0.dataParser - A parser for the data.
+ * @param root0.loadingComponent - The component to show when the data is being fetched.
+ */
+declare function LoaderData<DataType>({
   children,
   dataParser: loaderDataParser,
   loadingComponent
-}: LoaderDataProps<T>): react_jsx_runtime0.JSX.Element;
+}: LoaderDataProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/providers/LoaderProvider/LoaderError.d.ts
 interface LoaderErrorBaseProps {
-  /**
-   * The component to show if an error has been thrown.
-   * @deprecated Please pass in the content to show on error as children instead.
-   */
-  errorComponent?: ReactNode | ((error: unknown) => ReactNode);
   /** The component to show if an error has been thrown. */
   children?: ReactNode | ((error: unknown) => ReactNode);
-  /** Whether you want to log the error to the console or not. */
+  /** An option to log the error to the console. */
   logError?: boolean;
 }
 interface LoaderErrorPropsWithUndefinedOrNull extends LoaderErrorBaseProps {
@@ -249,7 +345,15 @@ interface LoaderErrorPropsWithNullable extends LoaderErrorBaseProps {
   nullableComponent?: ReactNode;
 }
 type LoaderErrorProps = LoaderErrorPropsWithUndefinedOrNull | LoaderErrorPropsWithNullable;
-/** The component responsible for showing any errors provided by LoaderProvider. */
+/**
+ * The component responsible for showing any errors provided by LoaderProvider.
+ * @param root0 - The props to be passed to LoaderError.
+ * @param root0.children - The component to show if an error has been thrown.
+ * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param root0.logError - An option to log the error to the console.
+ */
 declare function LoaderError({
   children,
   undefinedComponent,
@@ -312,19 +416,30 @@ declare function SnackbarProvider({
 }: SnackbarProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Loader.d.ts
-type LoaderProps<T> = Omit<LoaderProviderProps<T>, "children"> & Omit<LoaderErrorProps, "errorComponent" | "children"> & Omit<LoaderDataProps<T>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
-/** An in-line component that deals with state management when fetching data from an API.
+type LoaderProps<DataType> = Omit<LoaderProviderProps<DataType>, "children" | "logError"> & Omit<LoaderErrorProps, "errorComponent" | "children"> & Omit<LoaderDataProps<DataType>, "showOnError" | "onUndefined" | "onNull" | "onNullable">;
+/**
+ * An in-line component that deals with state management when fetching data from an API.
  * This may be used over LoaderProvider if you don't require as much control over the placement of the error message and data display.
+ * @template DataType - The type of data being loaded.
+ * @param root0 - Props to pass to Loader.
+ * @param root0.children - The elements to show after data has been loaded.
+ * @param root0.errorComponent - The component to show if an error has been thrown. Note that this may not be provided unless the error prop has also been provided.
+ * @param root0.undefinedComponent - The component to show if no error was thrown but the data is undefined.
+ * @param root0.nullComponent - The component to show if no error was thrown but the data is null.
+ * @param root0.nullableComponent - The component to show if no error was thrown but the data is nullable (undefined or null).
+ * @param root0.loadingComponent - The component to show when the data is being fetched.
+ * @param root0.logError - An option to log the error to the console.
  */
-declare function Loader<T>({
+declare function Loader<DataType>({
   children,
   errorComponent,
   undefinedComponent,
   nullComponent,
   nullableComponent,
+  logError,
   loadingComponent,
   ...loaderProviderProps
-}: LoaderProps<T>): react_jsx_runtime0.JSX.Element;
+}: LoaderProps<DataType>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/NavigationBottom.d.ts
 interface NavItemBottom {
@@ -425,5 +540,5 @@ declare function SwitchWithIcons({
 //#region src/hooks/useHash.d.ts
 declare function useHash<S extends string>(initialHash: S | undefined): [S, Dispatch<SetStateAction<S>>];
 //#endregion
-export { CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useHash, useMode, useScreenSize, useSnackbar };
+export { CollapsableItem, type CollapsableItemProps, ContextHookOptions, DarkModeToggle, DropdownMenu, DropdownMenu2, type DropdownMenu2Props, DropdownMenuExternalLink, type DropdownMenuExternalLinkProps, DropdownMenuInternalLink, type DropdownMenuInternalLinkProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ExternalLink, type ExternalLinkProps, FileInput, FileInputList, type FileInputListProps, type FileInputProps, FileType, IconWithPopover, type IconWithPopoverProps, InternalLink, type InternalLinkProps, ListItemInternalLink, type ListItemInternalLinkProps, Loader, LoaderData, type LoaderDataProps, LoaderError, type LoaderErrorBaseProps, type LoaderErrorProps, type LoaderErrorPropsWithNullable, type LoaderErrorPropsWithUndefinedOrNull, type LoaderProps, LoaderProvider, type LoaderProviderBaseProps, type LoaderProviderProps, type LoaderProviderPropsWithError, type LoaderProviderPropsWithNoError, ModeProvider, type ModeProviderProps, type NavItemBottom, type NavMenuItem, NavigationBottom, type NavigationBottomProps, NavigationDrawer, type NavigationDrawerProps, PopoverText, type PopoverTextProps, ReactPlayground, type ReactPlaygroundProps, type ScreenSizeContextValue, type ScreenSizeProps, ScreenSizeProvider, SkeletonRow, type SkeletonRowProps, SnackbarProvider, type SnackbarProviderProps, SubmitButton, type SubmitButtonProps, SwitchWithIcons, type SwitchWithIconsProps, useDropdownMenu, useHash, useMode, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,3 @@
-import e from"@mui/icons-material/ArrowDropDown";import t from"@mui/icons-material/ArrowDropUp";import n from"@mui/material/Box";import r from"@mui/material/ButtonBase";import i from"@mui/material/Collapse";import{Fragment as a,createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import _ from"@mui/icons-material/DarkMode";import v from"@mui/icons-material/LightMode";import y from"@mui/material/IconButton";import b from"@mui/material/Tooltip";import x from"@mui/material/CircularProgress";import S from"@mui/material/Alert";import C from"@mui/material/CssBaseline";import{ThemeProvider as ee,createTheme as te,styled as w,useTheme as ne}from"@mui/material/styles";import{fillArray as re,truncate as T,wait as ie}from"@alextheman/utility";import ae from"@mui/material/Snackbar";import E from"@mui/material/Button";import D from"@mui/material/Menu";import O from"@mui/material/Link";import oe from"@mui/icons-material/CloudUpload";import se from"@mui/icons-material/Delete";import k from"@mui/material/List";import A from"@mui/material/ListItem";import j from"@mui/material/ListItemText";import ce from"@mui/material/Popover";import{Link as M,useLocation as le}from"react-router-dom";import N from"@mui/material/ListItemButton";import ue from"@mui/material/BottomNavigation";import de from"@mui/material/BottomNavigationAction";import fe from"@mui/material/Paper";import pe from"@mui/icons-material/ChevronLeft";import me from"@mui/icons-material/ChevronRight";import he from"@mui/icons-material/Menu";import ge from"@mui/material/AppBar";import P from"@mui/material/Divider";import F from"@mui/material/Drawer";import I from"@mui/material/ListItemIcon";import L from"@mui/material/Toolbar";import R from"@mui/material/Typography";import{stripIndent as _e}from"common-tags";import{LiveEditor as ve,LiveError as ye,LivePreview as be,LiveProvider as xe}from"react-live";import Se from"@mui/material/Skeleton";import Ce from"@mui/material/TableCell";import we from"@mui/material/TableRow";import{useFormContext as Te}from"react-hook-form";import Ee from"@mui/material/Switch";function De({isInitiallyOpen:a,onOpen:o,onClose:s,children:c,buttonStyles:u,buttonContents:d,buttonComponent:f=r,collapseProps:m,openIcon:_=h(t,{}),closedIcon:v=h(e,{}),useDefaultStyling:y=f===r}){let[b,x]=p(!!a);return l(()=>{b&&o?o():!b&&s&&s()},[b]),g(n,{children:[g(f,{onClick:()=>{x(e=>!e)},sx:y?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":f===r?{backgroundColor:`action.hover`}:null,...u}:u,"aria-expanded":b,children:[d,b?_:v]}),h(i,{in:b,...m,children:c})]})}var Oe=De;const z=o(void 0);function B({strict:e=!0}={}){let t=c(z);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function ke({children:e,loadingComponent:t=h(x,{}),...n}){return h(z.Provider,{value:{loadingComponent:t,...n},children:e})}var Ae=ke;function je({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=B(),c=t??a;return r?h(m,{children:n??o}):s||i==null?h(m,{}):c?typeof e==`function`?h(m,{children:e(c(i))}):h(m,{children:e}):typeof e==`function`?h(m,{children:e(i)}):h(m,{children:e})}var V=je;function Me({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:c,logError:l}=B(),u=i??l,d=f(!1),p=e??c;return s?(u&&!d.current&&(console.error(s),d.current=!0),typeof p==`function`?p(s):p?h(m,{children:p}):h(S,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(u&&!d.current&&(console.error(`Data is nullable after loading.`),d.current=!0),h(m,{children:r})):o===void 0&&(u&&!d.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),d.current=!0),t)?h(m,{children:t}):o===null&&(u&&!d.current&&(console.error(`Data is null after loading.`),d.current=!0),n)?h(m,{children:n}):h(S,{severity:`error`,children:`Failed to load data. Please try again later.`}):h(m,{})}var H=Me,U=Ae;const W=o({toggleMode:()=>{},mode:`dark`});function G({strict:e=!0}={}){let t=c(W);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Ne({children:e,mode:t=`dark`}){let[n,r]=p(t),i=d(()=>te({palette:{mode:n}}),[n]);return h(W.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:g(ee,{theme:i,children:[h(C,{}),e]})})}var Pe=Ne;const K=o({windowWidth:0,windowHeight:0,isLargeScreen:!1});function Fe({strict:e=!0}={}){let t=c(K);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function Ie({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=p(window.innerWidth),[a,o]=p(window.innerHeight);l(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=d(()=>r>t&&a>n,[r,a,t,n]);return h(K.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}var Le=Ie;const q=o(void 0);function Re({strict:e=!0}={}){let t=c(q);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function ze({children:e,autoHideDuration:t=5e3}){let[n,r]=p(!1),[i,a]=p(t),[o,s]=p(``),[c,l]=p(`info`);function u(e,n,i){r(!0),a(i??t),l(n??`info`),s(e)}async function d(){r(!1),await ie(.2),s(``)}return g(q.Provider,{value:{addSnackbar:u},children:[h(ae,{open:n,autoHideDuration:i,onClose:d,children:h(S,{onClose:d,severity:c,children:o})}),e]})}var Be=ze;function Ve(){let{mode:e,toggleMode:t}=G();return h(b,{title:`Enable ${e===`dark`?`light`:`dark`} mode`,children:h(y,{sx:{marginLeft:`auto`},onClick:t,"aria-label":`Enable ${e===`dark`?`light`:`dark`} mode`,children:h(e===`dark`?v:_,{})})})}var He=Ve;function Ue({children:r,button:i=E,buttonChildren:a=`Menu`,buttonProps:o,isOpenIcon:s=h(t,{}),isClosedIcon:c=h(e,{}),onOpen:u,onClose:f}){let[m,_]=p(null),v=d(()=>!!m,[m]),y={...o,onClick:e=>{_(e.currentTarget)},"aria-controls":v?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":v};return i===E&&(y.endIcon=v?s:c),l(()=>{v&&u?u():!v&&f&&f()},[v,u,f]),g(n,{children:[h(i,{...y,children:a}),h(D,{id:`dropdown-menu`,anchorEl:m,open:v,onClose:()=>{_(null)},children:typeof r==`function`?h(n,{children:r(()=>{_(null)})}):r})]})}var We=Ue;function Ge({href:e,children:t,ref:n,...r}){return h(O,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}var Ke=Ge;const qe={PDF:`application/pdf`,PNG:`image/png`,JPEG:`image/jpeg`,JPG:`image/jpg`,XLSX:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`,DOCX:`application/vnd.openxmlformats-officedocument.wordprocessingml.document`,MP3:`audio/mp3`,MP4:`video/mp4`,WAV:`audio/wav`},Je=w(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),Ye=w(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function Xe({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=p(!1),c=g(E,{variant:`contained`,component:`label`,"aria-label":`File upload button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(`file-input`)?.click())},...a,startIcon:a.startIcon??h(oe,{}),children:[t,h(Je,{id:`file-input`,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?h(Ye,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:c}):c}var J=Xe;function Ze({files:e,setFiles:t,...r}){function i(e){t(t=>[...t,...e])}let a={...r,onFileInput:i};return a?.multiple===void 0&&(a.multiple=!0),g(n,{children:[h(J,{...a}),h(k,{children:e.map(e=>h(A,{secondaryAction:h(y,{"aria-label":`Delete`,edge:`end`,onClick:()=>{t(t=>t.filter(t=>t!==e))},children:h(se,{})}),children:h(j,{primary:e.name})},e.name))})]})}var Qe=Ze;function $e({icon:e,onOpen:t,onClose:r,iconProps:i,children:a}){let[o,s]=p(null),c=!!o,l=u();function d(e){s(e.currentTarget),t&&t()}function f(){s(null),r&&r()}return g(n,{children:[h(e,{"aria-owns":c?l:void 0,"aria-haspopup":`true`,onMouseEnter:d,onMouseLeave:f,...i}),h(ce,{id:l,sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:f,disableRestoreFocus:!0,children:a})]})}var et=$e;function tt({to:e,children:t,ref:n,...r}){return h(O,{component:M,to:e,ref:n,...r,children:t})}var Y=tt;function nt({children:e,...t}){return h(N,{component:Y,...t,children:e})}var rt=nt;function it({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,loadingComponent:a=h(x,{}),...o}){return g(U,{loadingComponent:a,...o,children:[h(H,{undefinedComponent:n,nullComponent:r,nullableComponent:i,children:t}),h(V,{children:e})]})}var at=it;function ot({children:e,navItems:t}){let[r,i]=p(``);return g(m,{children:[h(n,{sx:{paddingBottom:7},children:e}),h(fe,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:h(ue,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:t.map(e=>h(de,{...e,component:M},e.value))})})]})}var st=ot;function X(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Z(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const Q=w(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),ct=w(ge,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),lt=w(F,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...X(e),"& .MuiDrawer-paper":X(e)}},{props:({open:e})=>!e,style:{...Z(e),"& .MuiDrawer-paper":Z(e)}}]}));function ut({title:e,navItems:t,children:r,headerElements:i}){let o=ne(),[s,c]=p(!0),l=le();function u(){c(!0)}function d(){c(!1)}return g(n,{sx:{display:`flex`},children:[h(C,{}),h(ct,{position:`fixed`,open:s,children:g(L,{children:[h(y,{color:`inherit`,"aria-label":`open drawer`,onClick:u,edge:`start`,sx:[{marginRight:5},s&&{display:`none`}],children:h(he,{})}),h(R,{variant:`h6`,noWrap:!0,component:`div`,children:e}),i]})}),g(lt,{variant:`permanent`,open:s,children:[h(Q,{children:h(y,{onClick:d,children:o.direction===`rtl`?h(me,{}):h(pe,{})})}),h(P,{}),t.map(e=>g(a,{children:[g(k,{children:[h(R,{variant:s?`h5`:`h6`,paddingLeft:s?2:1,children:s?e.category:T(e.category,4)}),e.options.map(e=>h(A,{disablePadding:!0,sx:{display:`block`},children:g(N,{sx:[{minHeight:48,px:2.5},s?{justifyContent:`initial`}:{justifyContent:`center`}],component:M,to:e.to,selected:l.pathname===e.to,children:[h(I,{sx:[{minWidth:0,justifyContent:`center`},s?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:s?null:h(R,{children:T(e.label,4)})}),h(j,{primary:e.label,sx:[s?{opacity:1}:{opacity:0}]})]})},e.to))]}),h(P,{})]},e.category))]}),g(n,{component:`main`,sx:{flexGrow:1,p:3},children:[h(Q,{}),r]})]})}var dt=ut;function ft({text:e,sx:t,...n}){return h(m,{children:e.split(`
-`).map((e,r)=>h(R,{sx:{margin:1,...t},...n,children:e},r))})}var pt=ft;function mt({code:e,previewStyles:t,...r}){let{mode:i}=G(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=t?{...a,...t}:{...a};return h(n,{sx:{borderRadius:1,border:.5,padding:2},children:g(xe,{...r,code:_e(e??``),children:[h(R,{variant:`h5`,children:`Code`}),h(n,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:h(ve,{})}),h(`br`,{}),h(R,{variant:`h5`,children:`Result`}),g(n,{sx:o,children:[h(be,{}),h(ye,{})]})]})})}var ht=mt;function gt({columns:e}){return h(we,{children:re(e=>h(Ce,{children:h(Se,{})},e),e)})}var _t=gt;function vt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Te();return h(E,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}var $=vt;const yt=w(Ee)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function bt({checkedIcon:e,checkedIconStyles:t,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return h(yt,{checkedIcon:h(n,{sx:o,children:h(e,{style:{...s,...t}})}),icon:h(n,{sx:o,children:h(r,{style:{...s,...i}})}),...a})}var xt=bt;function St(e){let[t,n]=p(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=s(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return l(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,s(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}var Ct=St;export{Oe as CollapsableItem,He as DarkModeToggle,We as DropdownMenu,Ke as ExternalLink,J as FileInput,Qe as FileInputList,qe as FileType,et as IconWithPopover,Y as InternalLink,rt as ListItemInternalLink,at as Loader,V as LoaderData,H as LoaderError,U as LoaderProvider,Pe as ModeProvider,st as NavigationBottom,dt as NavigationDrawer,pt as PopoverText,ht as ReactPlayground,Le as ScreenSizeProvider,_t as SkeletonRow,Be as SnackbarProvider,$ as SubmitButton,xt as SwitchWithIcons,Ct as useHash,G as useMode,Fe as useScreenSize,Re as useSnackbar};
+import e from"@mui/icons-material/ArrowDropDown";import t from"@mui/icons-material/ArrowDropUp";import n from"@mui/material/Box";import r from"@mui/material/ButtonBase";import i from"@mui/material/Collapse";import{Fragment as a,createContext as o,useCallback as s,useContext as c,useEffect as l,useId as u,useMemo as d,useRef as f,useState as p}from"react";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import _ from"@mui/icons-material/DarkMode";import v from"@mui/icons-material/LightMode";import y from"@mui/material/IconButton";import b from"@mui/material/Tooltip";import x from"@mui/material/Button";import S from"@mui/material/Menu";import C from"@mui/material/MenuItem";import w from"@mui/material/CircularProgress";import T from"@mui/material/Alert";import E from"@mui/material/CssBaseline";import{ThemeProvider as ee,createTheme as te,styled as D,useTheme as ne}from"@mui/material/styles";import{fillArray as re,truncate as O,wait as ie}from"@alextheman/utility";import ae from"@mui/material/Snackbar";import k from"@mui/material/Link";import oe from"@mui/icons-material/CloudUpload";import se from"@mui/icons-material/Delete";import A from"@mui/material/List";import j from"@mui/material/ListItem";import M from"@mui/material/ListItemText";import ce from"@mui/material/Popover";import{Link as N,useLocation as le}from"react-router-dom";import P from"@mui/material/ListItemButton";import ue from"@mui/material/BottomNavigation";import de from"@mui/material/BottomNavigationAction";import fe from"@mui/material/Paper";import pe from"@mui/icons-material/ChevronLeft";import me from"@mui/icons-material/ChevronRight";import he from"@mui/icons-material/Menu";import ge from"@mui/material/AppBar";import F from"@mui/material/Divider";import _e from"@mui/material/Drawer";import ve from"@mui/material/ListItemIcon";import ye from"@mui/material/Toolbar";import I from"@mui/material/Typography";import{stripIndent as be}from"common-tags";import{LiveEditor as xe,LiveError as Se,LivePreview as Ce,LiveProvider as we}from"react-live";import Te from"@mui/material/Skeleton";import Ee from"@mui/material/TableCell";import De from"@mui/material/TableRow";import{useFormContext as Oe}from"react-hook-form";import ke from"@mui/material/Switch";function Ae({isInitiallyOpen:a,onOpen:o,onClose:s,children:c,buttonStyles:u,buttonContents:d,buttonComponent:f=r,collapseProps:m,openIcon:_=h(t,{}),closedIcon:v=h(e,{}),useDefaultStyling:y=f===r}){let[b,x]=p(!!a);return l(()=>{b&&o?o():!b&&s&&s()},[b]),g(n,{children:[g(f,{onClick:()=>{x(e=>!e)},sx:y?{width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`,paddingY:1.5,paddingX:2,textAlign:`center`,"&:hover":f===r?{backgroundColor:`action.hover`}:null,...u}:u,"aria-expanded":b,children:[d,b?_:v]}),h(i,{in:b,...m,children:c})]})}var je=Ae;const L=o(void 0);function R({strict:e=!0}={}){let t=c(L);if(e&&!t)throw Error(`DROPDOWN_MENU_NOT_FOUND`);return t}function Me({children:n,button:r=x,buttonProps:i,openIcon:a=h(t,{}),closedIcon:o=h(e,{})}){let[s,c]=p(null),l=d(()=>!!s,[s]);function u(){c(null)}return g(L.Provider,{value:{closeMenu:u,isDropdownOpen:l},children:[h(r,{"aria-controls":l?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":l,endIcon:l?a:o,...i,onClick:e=>{e.defaultPrevented||c(e.currentTarget),i?.onClick&&i?.onClick(e)}}),h(S,{anchorEl:s,open:l,onClose:u,children:n})]})}var Ne=Me;function Pe({ref:e,href:t,children:n,onClick:r,...i}){let{closeMenu:a}=R();return h(C,{component:J,href:t,ref:e,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}var Fe=Pe;function Ie({to:e,ref:t,children:n,onClick:r,...i}){let{closeMenu:a}=R();return h(C,{component:X,to:e,ref:t,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:n})}var Le=Ie;function Re({component:e,children:t,ref:n,onClick:r,...i}){let{closeMenu:a}=R();return h(C,{component:e??x,ref:n,...i,onClick:e=>{e.defaultPrevented||a(),r&&r(e)},children:t})}var ze=Re,Be=Ne;const z=o(void 0);function B({strict:e=!0}={}){let t=c(z);if(e&&!t)throw Error(`LOADER_PROVIDER_NOT_FOUND`);return t}function Ve({children:e,loadingComponent:t=h(w,{}),...n}){return h(z.Provider,{value:{loadingComponent:t,...n},children:e})}var He=Ve;function Ue({children:e,dataParser:t,loadingComponent:n}){let{isLoading:r,data:i,dataParser:a,loadingComponent:o,error:s}=B(),c=t??a;return r?h(m,{children:n??o}):s||i==null?h(m,{}):c?typeof e==`function`?h(m,{children:e(c(i))}):h(m,{children:e}):typeof e==`function`?h(m,{children:e(i)}):h(m,{children:e})}var V=Ue;function We({children:e,undefinedComponent:t,nullComponent:n,nullableComponent:r,logError:i}){let{isLoading:a,data:o,error:s,errorComponent:c,logError:l}=B(),u=i??l,d=f(!1),p=e??c;return s?(u&&!d.current&&(console.error(s),d.current=!0),typeof p==`function`?p(s):p?h(m,{children:p}):h(T,{severity:`error`,children:s?.message??`An unknown error has occured. Please try again later.`})):!a&&o==null?r?(u&&!d.current&&(console.error(`Data is nullable after loading.`),d.current=!0),h(m,{children:r})):o===void 0&&(u&&!d.current&&(console.error(`Data is undefined after loading. This could either be an issue with the query or you have not passed in the data to LoaderProvider. Please double-check that you have provided data.`),d.current=!0),t)?h(m,{children:t}):o===null&&(u&&!d.current&&(console.error(`Data is null after loading.`),d.current=!0),n)?h(m,{children:n}):h(T,{severity:`error`,children:`Failed to load data. Please try again later.`}):h(m,{})}var H=We,U=He;const W=o({toggleMode:()=>{},mode:`dark`});function G({strict:e=!0}={}){let t=c(W);if(e&&!t)throw Error(`MODE_PROVIDER_NOT_FOUND`);return t}function Ge({children:e,mode:t=`dark`}){let[n,r]=p(t),i=d(()=>te({palette:{mode:n}}),[n]);return h(W.Provider,{value:{mode:n,toggleMode:()=>{r(e=>e===`light`?`dark`:`light`)}},children:g(ee,{theme:i,children:[h(E,{}),e]})})}var Ke=Ge;const K=o({windowWidth:0,windowHeight:0,isLargeScreen:!1});function qe({strict:e=!0}={}){let t=c(K);if(e&&!t)throw Error(`SCREEN_SIZE_PROVIDER_NOT_FOUND`);return t}function Je({children:e,largeScreenWidth:t=669,largeScreenHeight:n=660}){let[r,i]=p(window.innerWidth),[a,o]=p(window.innerHeight);l(()=>{function e(){i(window.innerWidth),o(window.innerHeight)}return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[]);let s=d(()=>r>t&&a>n,[r,a,t,n]);return h(K.Provider,{value:{isLargeScreen:s,windowWidth:r,windowHeight:a},children:e})}var Ye=Je;const q=o(void 0);function Xe({strict:e=!0}={}){let t=c(q);if(e&&!t)throw Error(`SNACKBAR_PROVIDER_NOT_FOUND`);return t}function Ze({children:e,autoHideDuration:t=5e3}){let[n,r]=p(!1),[i,a]=p(t),[o,s]=p(``),[c,l]=p(`info`);function u(e,n,i){r(!0),a(i??t),l(n??`info`),s(e)}async function d(){r(!1),await ie(.2),s(``)}return g(q.Provider,{value:{addSnackbar:u},children:[h(ae,{open:n,autoHideDuration:i,onClose:d,children:h(T,{onClose:d,severity:c,children:o})}),e]})}var Qe=Ze;function $e(){let{mode:e,toggleMode:t}=G();return h(b,{title:`Enable ${e===`dark`?`light`:`dark`} mode`,children:h(y,{sx:{marginLeft:`auto`},onClick:t,"aria-label":`Enable ${e===`dark`?`light`:`dark`} mode`,children:h(e===`dark`?v:_,{})})})}var et=$e;function tt({children:r,button:i=x,buttonChildren:a=`Menu`,buttonProps:o,isOpenIcon:s=h(t,{}),isClosedIcon:c=h(e,{}),onOpen:u,onClose:f}){let[m,_]=p(null),v=d(()=>!!m,[m]),y={...o,onClick:e=>{_(e.currentTarget)},"aria-controls":v?`dropdown-menu`:void 0,"aria-haspopup":`true`,"aria-expanded":v};return i===x&&(y.endIcon=v?s:c),l(()=>{v&&u?u():!v&&f&&f()},[v,u,f]),g(n,{children:[h(i,{...y,children:a}),h(S,{id:`dropdown-menu`,anchorEl:m,open:v,onClose:()=>{_(null)},children:typeof r==`function`?h(n,{children:r(()=>{_(null)})}):r})]})}var nt=tt;function rt({href:e,children:t,ref:n,...r}){return h(k,{component:`a`,href:e,ref:n,target:`_blank`,rel:`noopener noreferrer`,...r,children:t})}var J=rt;const it={PDF:`application/pdf`,PNG:`image/png`,JPEG:`image/jpeg`,JPG:`image/jpg`,XLSX:`application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`,DOCX:`application/vnd.openxmlformats-officedocument.wordprocessingml.document`,MP3:`audio/mp3`,MP4:`video/mp4`,WAV:`audio/wav`},at=D(`input`)({clip:`rect(0 0 0 0)`,clipPath:`inset(50%)`,height:1,overflow:`hidden`,position:`absolute`,bottom:0,left:0,whiteSpace:`nowrap`,width:1}),ot=D(`div`)(({theme:e,$dragging:t})=>({border:`2px dashed`,borderColor:t?e.palette.primary.main:`#ccc`,backgroundColor:t?e.palette.action.hover:`transparent`,borderRadius:8,padding:`1.5rem`,textAlign:`center`,transition:`border-color 0.2s`,cursor:`pointer`}));function st({onFileInput:e,label:t=`Upload files`,multiple:n,accept:r,useDropzone:i,...a}){let[o,s]=p(!1),c=g(x,{variant:`contained`,component:`label`,"aria-label":`File upload button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),document.getElementById(`file-input`)?.click())},...a,startIcon:a.startIcon??h(oe,{}),children:[t,h(at,{id:`file-input`,type:`file`,onChange:t=>{let n=t.target;e(Array.from(n.files??[])),n.value=``},multiple:n,accept:r?.join(`,`),disabled:a.disabled})]});return i?h(ot,{$dragging:o,onDragOver:e=>{e.preventDefault(),!a.disabled&&s(!0)},onDragLeave:e=>{e.preventDefault(),s(!1)},onDrop:t=>{t.preventDefault(),s(!1),!a.disabled&&e(Array.from(t.dataTransfer.files??[]))},children:c}):c}var Y=st;function ct({files:e,setFiles:t,...r}){function i(e){t(t=>[...t,...e])}let a={...r,onFileInput:i};return a?.multiple===void 0&&(a.multiple=!0),g(n,{children:[h(Y,{...a}),h(A,{children:e.map(e=>h(j,{secondaryAction:h(y,{"aria-label":`Delete`,edge:`end`,onClick:()=>{t(t=>t.filter(t=>t!==e))},children:h(se,{})}),children:h(M,{primary:e.name})},e.name))})]})}var lt=ct;function ut({icon:e,onOpen:t,onClose:r,iconProps:i,children:a}){let[o,s]=p(null),c=!!o,l=u();function d(e){s(e.currentTarget),t&&t()}function f(){s(null),r&&r()}return g(n,{children:[h(e,{"aria-owns":c?l:void 0,"aria-haspopup":`true`,onMouseEnter:d,onMouseLeave:f,...i}),h(ce,{id:l,sx:{pointerEvents:`none`},open:c,anchorEl:o,anchorOrigin:{vertical:`bottom`,horizontal:`left`},transformOrigin:{vertical:`top`,horizontal:`left`},onClose:f,disableRestoreFocus:!0,children:a})]})}var dt=ut;function ft({to:e,children:t,ref:n,...r}){return h(k,{component:N,to:e,ref:n,...r,children:t})}var X=ft;function pt({children:e,...t}){return h(P,{component:X,...t,children:e})}var mt=pt;function ht({children:e,errorComponent:t,undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,loadingComponent:o=h(w,{}),...s}){return g(U,{loadingComponent:o,...s,children:[h(H,{undefinedComponent:n,nullComponent:r,nullableComponent:i,logError:a,children:t}),h(V,{children:e})]})}var gt=ht;function _t({children:e,navItems:t}){let[r,i]=p(``);return g(m,{children:[h(n,{sx:{paddingBottom:7},children:e}),h(fe,{sx:{position:`fixed`,bottom:0,left:0,right:0},children:h(ue,{showLabels:!0,value:r,onChange:(e,t)=>{i(t)},children:t.map(e=>h(de,{...e,component:N},e.value))})})]})}var vt=_t;function Z(e){return{width:240,transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:`hidden`}}function Q(e){return{transition:e.transitions.create(`width`,{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:`hidden`,width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up(`sm`)]:{width:`calc(${e.spacing(8)} + 1px)`}}}const $=D(`div`)(({theme:e})=>({display:`flex`,alignItems:`center`,justifyContent:`flex-end`,padding:e.spacing(0,1),...e.mixins.toolbar})),yt=D(ge,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({zIndex:e.zIndex.drawer+1,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),variants:[{props:({open:e})=>e,style:{marginLeft:240,width:`calc(100% - 240px)`,transition:e.transitions.create([`width`,`margin`],{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen})}}]})),bt=D(_e,{shouldForwardProp:e=>e!==`open`})(({theme:e})=>({width:240,flexShrink:0,whiteSpace:`nowrap`,boxSizing:`border-box`,variants:[{props:({open:e})=>e,style:{...Z(e),"& .MuiDrawer-paper":Z(e)}},{props:({open:e})=>!e,style:{...Q(e),"& .MuiDrawer-paper":Q(e)}}]}));function xt({title:e,navItems:t,children:r,headerElements:i}){let o=ne(),[s,c]=p(!0),l=le();function u(){c(!0)}function d(){c(!1)}return g(n,{sx:{display:`flex`},children:[h(E,{}),h(yt,{position:`fixed`,open:s,children:g(ye,{children:[h(y,{color:`inherit`,"aria-label":`open drawer`,onClick:u,edge:`start`,sx:[{marginRight:5},s&&{display:`none`}],children:h(he,{})}),h(I,{variant:`h6`,noWrap:!0,component:`div`,children:e}),i]})}),g(bt,{variant:`permanent`,open:s,children:[h($,{children:h(y,{onClick:d,children:o.direction===`rtl`?h(me,{}):h(pe,{})})}),h(F,{}),t.map(e=>g(a,{children:[g(A,{children:[h(I,{variant:s?`h5`:`h6`,paddingLeft:s?2:1,children:s?e.category:O(e.category,4)}),e.options.map(e=>h(j,{disablePadding:!0,sx:{display:`block`},children:g(P,{sx:[{minHeight:48,px:2.5},s?{justifyContent:`initial`}:{justifyContent:`center`}],component:N,to:e.to,selected:l.pathname===e.to,children:[h(ve,{sx:[{minWidth:0,justifyContent:`center`},s?{mr:3}:{mr:`auto`}],children:e.icon?e.icon:s?null:h(I,{children:O(e.label,4)})}),h(M,{primary:e.label,sx:[s?{opacity:1}:{opacity:0}]})]})},e.to))]}),h(F,{})]},e.category))]}),g(n,{component:`main`,sx:{flexGrow:1,p:3},children:[h($,{}),r]})]})}var St=xt;function Ct({text:e,sx:t,...n}){return h(m,{children:e.split(`
+`).map((e,r)=>h(I,{sx:{margin:1,...t},...n,children:e},r))})}var wt=Ct;function Tt({code:e,previewStyles:t,...r}){let{mode:i}=G(),a={backgroundColor:i===`dark`?`black`:`white`,border:.3,borderRadius:1,padding:2,borderColor:`darkgray`},o=t?{...a,...t}:{...a};return h(n,{sx:{borderRadius:1,border:.5,padding:2},children:g(we,{...r,code:be(e??``),children:[h(I,{variant:`h5`,children:`Code`}),h(n,{sx:{border:.3,borderRadius:.3,borderColor:`darkgray`},children:h(xe,{})}),h(`br`,{}),h(I,{variant:`h5`,children:`Result`}),g(n,{sx:o,children:[h(Ce,{}),h(Se,{})]})]})})}var Et=Tt;function Dt({columns:e}){return h(De,{children:re(e=>h(Ee,{children:h(Te,{})},e),e)})}var Ot=Dt;function kt({disableClean:e,label:t,...n}){let{formState:{disabled:r,isDirty:i,isSubmitting:a}}=Oe();return h(x,{color:`primary`,disabled:n.disabled||e&&!i||r,loading:a,type:`submit`,variant:`contained`,...n,children:t})}var At=kt;const jt=D(ke)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function Mt({checkedIcon:e,checkedIconStyles:t,uncheckedIcon:r,uncheckedIconStyles:i,...a}){let o={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},s={color:`black`,maxWidth:16.5,maxHeight:16.5};return h(jt,{checkedIcon:h(n,{sx:o,children:h(e,{style:{...s,...t}})}),icon:h(n,{sx:o,children:h(r,{style:{...s,...i}})}),...a})}var Nt=Mt;function Pt(e){let[t,n]=p(()=>{let t=window.location.hash.replace(`#`,``);return e&&t===``?e:t}),r=s(()=>{let t=window.location.hash.replace(`#`,``);n(e&&t===``?e:t)},[n,e]);return l(()=>(window.addEventListener(`hashchange`,r),()=>{window.removeEventListener(`hashchange`,r)}),[r]),[t,s(e=>{let n=typeof e==`function`?e(t):e;n!==t&&(window.location.hash=n)},[t])]}var Ft=Pt;export{je as CollapsableItem,et as DarkModeToggle,nt as DropdownMenu,Be as DropdownMenu2,Fe as DropdownMenuExternalLink,Le as DropdownMenuInternalLink,ze as DropdownMenuItem,J as ExternalLink,Y as FileInput,lt as FileInputList,it as FileType,dt as IconWithPopover,X as InternalLink,mt as ListItemInternalLink,gt as Loader,V as LoaderData,H as LoaderError,U as LoaderProvider,Ke as ModeProvider,vt as NavigationBottom,St as NavigationDrawer,wt as PopoverText,Et as ReactPlayground,Ye as ScreenSizeProvider,Ot as SkeletonRow,Qe as SnackbarProvider,At as SubmitButton,Nt as SwitchWithIcons,R as useDropdownMenu,Ft as useHash,G as useMode,qe as useScreenSize,Xe as useSnackbar};
 //# sourceMappingURL=index.js.map