@variocube/app-ui 1.15.0 → 1.16.0

package/src/formats/useRelativeTimeFormat.ts

@@ -1,6 +1,8 @@
-import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 import {useMemo} from "react";
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 
 export function useRelativeTimeFormat(options?: Intl.RelativeTimeFormatOptions, locale?: string) {
-    return useMemo(() => new Intl.RelativeTimeFormat(locale ?? getSupportedFormatLocale("relativeTime"), options), [options]);
-}
+	return useMemo(() => new Intl.RelativeTimeFormat(locale ?? getSupportedFormatLocale("relativeTime"), options), [
+		options,
+	]);
+}

package/src/forms/SearchForm.tsx

@@ -5,47 +5,46 @@ import {SearchIcon} from "../icons";
 import {TextField, TextFieldProps} from "../Input/TextField";
 
 export type SearchFormProps = Omit<TextFieldProps, "value" | "onChange" | "InputProps"> & {
-    search?: string;
-    onSearch: (search: string) => void;
-}
+	search?: string;
+	onSearch: (search: string) => void;
+};
 
 export function SearchForm(props: SearchFormProps) {
-    const {
-        search,
-        onSearch,
-        ...rest
-    } = props;
-
+	const {
+		search,
+		onSearch,
+		...rest
+	} = props;
 
-    const [value, setValue] = useState(search || "");
+	const [value, setValue] = useState(search || "");
 
-    useEffect(() => {
-        if (search) {
-            setValue(value);
-        }
-    }, [search]);
+	useEffect(() => {
+		if (search) {
+			setValue(value);
+		}
+	}, [search]);
 
-    function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        onSearch(value);
-    }
+	function handleSubmit(e: FormEvent) {
+		e.preventDefault();
+		onSearch(value);
+	}
 
-    return (
-        <form onSubmit={handleSubmit}>
-            <TextField
-                value={value}
-                onChange={setValue}
-                InputProps={{
-                    endAdornment: (
-                        <InputAdornment position="end">
-                            <IconButton type="submit" size="large">
-                                <SearchIcon/>
-                            </IconButton>
-                        </InputAdornment>
-                    )
-                }}
-                {...rest}
-            />
-        </form>
-    );
-}
+	return (
+		<form onSubmit={handleSubmit}>
+			<TextField
+				value={value}
+				onChange={setValue}
+				InputProps={{
+					endAdornment: (
+						<InputAdornment position="end">
+							<IconButton type="submit" size="large">
+								<SearchIcon />
+							</IconButton>
+						</InputAdornment>
+					),
+				}}
+				{...rest}
+			/>
+		</form>
+	);
+}

package/src/getNavigatorLanguages.ts

@@ -1,11 +1,10 @@
-
 /**
  * Returns the users preferred languages selected in the browser, or an empty array if not called in a browser context.
  * @see navigator.languages
  */
 export function getNavigatorLanguages() {
-    if (typeof navigator != "undefined") {
-        return navigator.languages || [navigator.language || (navigator as any).userLanguage];
-    }
-    return [];
+	if (typeof navigator != "undefined") {
+		return navigator.languages || [navigator.language || (navigator as any).userLanguage];
+	}
+	return [];
 }

package/src/getSupportedFormatLocale.ts

@@ -2,9 +2,9 @@ import {getNavigatorLanguages} from "./getNavigatorLanguages";
 import {DateTimeFormat} from "./temporal";
 
 export const IntlFormats = {
-    "number": Intl.NumberFormat,
-    "relativeTime": Intl.RelativeTimeFormat,
-    "dateTime": DateTimeFormat,
+	"number": Intl.NumberFormat,
+	"relativeTime": Intl.RelativeTimeFormat,
+	"dateTime": DateTimeFormat,
 } as const;
 
 export type IntlFormat = keyof typeof IntlFormats;
@@ -12,13 +12,13 @@ export type IntlFormat = keyof typeof IntlFormats;
 const supportedLocaleCache = {} as Record<IntlFormat, string>;
 
 export function getSupportedFormatLocale(format: IntlFormat) {
-    return supportedLocaleCache[format] ?? findSupportedFormatLocale(format);
+	return supportedLocaleCache[format] ?? findSupportedFormatLocale(format);
 }
 
 function findSupportedFormatLocale(format: IntlFormat) {
-    const formatCtor = IntlFormats[format];
-    const locale = getNavigatorLanguages()
-        .find(locale => locale == new formatCtor(locale).resolvedOptions().locale) ?? "default";
-    supportedLocaleCache[format] = locale;
-    return locale;
-}
+	const formatCtor = IntlFormats[format];
+	const locale = getNavigatorLanguages()
+		.find(locale => locale == new formatCtor(locale).resolvedOptions().locale) ?? "default";
+	supportedLocaleCache[format] = locale;
+	return locale;
+}

package/src/help/HelpDrawer.tsx

@@ -1,65 +1,86 @@
-import * as React from "react";
+import {Close, OpenInNew} from "@mui/icons-material";
 import {Drawer, Grid, IconButton} from "@mui/material";
-import {useHelpSettingsContext} from "./HelpSettingsContext";
+import * as React from "react";
 import {useCallback, useMemo} from "react";
-import {Close, OpenInNew} from "@mui/icons-material";
+import {useHelpSettingsContext} from "./HelpSettingsContext";
 
-export const buildHelpDrawerUrl = (selectedHelpAnchor = "", selectedHelpLanguage = "", selectedHelpPage = "", baseUrl: string) => {
-    let extraAnchor = selectedHelpAnchor ? `#${selectedHelpAnchor}` : "";
-    let extraLanguage = selectedHelpLanguage ? `/${selectedHelpLanguage}` : "";
-    return `${baseUrl}${selectedHelpPage}${extraLanguage}${extraAnchor}`;
-}
+export const buildHelpDrawerUrl = (
+	selectedHelpAnchor = "",
+	selectedHelpLanguage = "",
+	selectedHelpPage = "",
+	baseUrl: string,
+) => {
+	let extraAnchor = selectedHelpAnchor ? `#${selectedHelpAnchor}` : "";
+	let extraLanguage = selectedHelpLanguage ? `/${selectedHelpLanguage}` : "";
+	return `${baseUrl}${selectedHelpPage}${extraLanguage}${extraAnchor}`;
+};
 
 export function HelpDrawer() {
-    const {baseUrl, selectedHelpPage: selectedHelpPage, clearSelectedHelpPage: clearSelectedHelpPage, 
-        selectedHelpAnchor : selectedHelpAnchor, clearSelectedHelpAnchor: clearSelectedHelpAnchor,
-        selectedHelpLanguage : selectedHelpLanguage, clearSelectedHelpLanguage: clearSelectedHelpLanguage} = useHelpSettingsContext();
+	const {
+		baseUrl,
+		selectedHelpPage: selectedHelpPage,
+		clearSelectedHelpPage: clearSelectedHelpPage,
+		selectedHelpAnchor: selectedHelpAnchor,
+		clearSelectedHelpAnchor: clearSelectedHelpAnchor,
+		selectedHelpLanguage: selectedHelpLanguage,
+		clearSelectedHelpLanguage: clearSelectedHelpLanguage,
+	} = useHelpSettingsContext();
 
-    const open = useMemo<boolean>(() => Boolean(selectedHelpPage), [selectedHelpPage, selectedHelpAnchor, selectedHelpLanguage]);
-    const url = useMemo<string>(() => {
-        if(selectedHelpPage) {
-            return buildHelpDrawerUrl(selectedHelpAnchor,selectedHelpLanguage, selectedHelpPage, baseUrl);
-        }else {
-            return `${baseUrl}`;
-        }
-    }, [baseUrl, selectedHelpPage, selectedHelpLanguage, selectedHelpAnchor]);
+	const open = useMemo<boolean>(() => Boolean(selectedHelpPage), [
+		selectedHelpPage,
+		selectedHelpAnchor,
+		selectedHelpLanguage,
+	]);
+	const url = useMemo<string>(() => {
+		if (selectedHelpPage) {
+			return buildHelpDrawerUrl(selectedHelpAnchor, selectedHelpLanguage, selectedHelpPage, baseUrl);
+		} else {
+			return `${baseUrl}`;
+		}
+	}, [baseUrl, selectedHelpPage, selectedHelpLanguage, selectedHelpAnchor]);
 
-    const iframe = React.useRef<HTMLIFrameElement>(null);
+	const iframe = React.useRef<HTMLIFrameElement>(null);
 
-    const handleOpenInNew = useCallback(() => {
-        window.open(url, url);
-        clearSelectedHelpPage();
-        clearSelectedHelpLanguage();
-        clearSelectedHelpAnchor();
-    }, [url, clearSelectedHelpPage]);
+	const handleOpenInNew = useCallback(() => {
+		window.open(url, url);
+		clearSelectedHelpPage();
+		clearSelectedHelpLanguage();
+		clearSelectedHelpAnchor();
+	}, [url, clearSelectedHelpPage]);
 
-    return (
-        <Drawer open={open} anchor="right" variant="persistent">
-            <Grid container sx={{width: "300px", height: "100%"}}>
-                <Grid item xs={12}>
-                    <Grid container>
-                        <Grid item style={{flexGrow: 1}}>
-                            <IconButton size="small" onClick={() => clearSelectedHelpPage()}>
-                                <Close />
-                            </IconButton>
-                        </Grid>
-                        <Grid item>
-                            <IconButton size="small" onClick={() => handleOpenInNew()}>
-                                <OpenInNew />
-                            </IconButton>
-                        </Grid>
-                    </Grid>
-                </Grid>
-                {open &&
-                    <Grid item xs={12} sx={{height: "100%"}}>
-                        <iframe onLoad={()=>{
-                            if (selectedHelpAnchor){
-                                iframe.current?.contentWindow?.postMessage(selectedHelpAnchor, "*");
-                            }
-                        }} ref={iframe} src={url} style={{border: 0, overflow: "scroll", height: "100%", width: "100%"}}/>
-                    </Grid>
-                }
-            </Grid>
-        </Drawer>
-    );
+	return (
+		<Drawer open={open} anchor="right" variant="persistent">
+			<Grid container sx={{width: "300px", height: "100%"}}>
+				<Grid item xs={12}>
+					<Grid container>
+						<Grid item style={{flexGrow: 1}}>
+							<IconButton size="small" onClick={() => clearSelectedHelpPage()}>
+								<Close />
+							</IconButton>
+						</Grid>
+						<Grid item>
+							<IconButton size="small" onClick={() => handleOpenInNew()}>
+								<OpenInNew />
+							</IconButton>
+						</Grid>
+					</Grid>
+				</Grid>
+				{open
+					&& (
+						<Grid item xs={12} sx={{height: "100%"}}>
+							<iframe
+								onLoad={() => {
+									if (selectedHelpAnchor) {
+										iframe.current?.contentWindow?.postMessage(selectedHelpAnchor, "*");
+									}
+								}}
+								ref={iframe}
+								src={url}
+								style={{border: 0, overflow: "scroll", height: "100%", width: "100%"}}
+							/>
+						</Grid>
+					)}
+			</Grid>
+		</Drawer>
+	);
 }

package/src/help/index.ts

@@ -1,3 +1,3 @@
-export {HelpSettingsContextProvider, useHelpSettingsContext} from "./HelpSettingsContext";
-export {HelpButton} from "./HelpButton";
-export {HelpDrawer} from "./HelpDrawer";
+export { HelpButton } from "./HelpButton";
+export { HelpDrawer } from "./HelpDrawer";
+export { HelpSettingsContextProvider, useHelpSettingsContext } from "./HelpSettingsContext";

package/src/icons.ts

@@ -1,23 +1,23 @@
-export {default as MenuIcon} from "@mui/icons-material/Menu";
-export {default as FilterListIcon} from "@mui/icons-material/FilterList";
-export {default as TuningIcon} from "@mui/icons-material/Tune";
-export {default as CategoryIcon} from '@mui/icons-material/Category';
-export {default as ChevronRightIcon} from "@mui/icons-material/ChevronRight";
-export {default as ErrorIcon} from "@mui/icons-material/Error";
-export {default as SuccessIcon} from "@mui/icons-material/Done";
-export {default as SaveIcon} from "@mui/icons-material/SaveOutlined";
-export {default as CloseIcon} from '@mui/icons-material/Close';
-export {default as MoveUpIcon} from "@mui/icons-material/ArrowUpward";
-export {default as MoveDownIcon} from "@mui/icons-material/ArrowDownward";
-export {default as RemoveIcon} from "@mui/icons-material/Remove";
-export {default as AddIcon} from "@mui/icons-material/Add";
+export { default as AddIcon } from "@mui/icons-material/Add";
+export { default as MoveDownIcon } from "@mui/icons-material/ArrowDownward";
+export { default as MoveUpIcon } from "@mui/icons-material/ArrowUpward";
+export { default as CategoryIcon } from "@mui/icons-material/Category";
+export { default as ChevronRightIcon } from "@mui/icons-material/ChevronRight";
+export { default as CloseIcon } from "@mui/icons-material/Close";
+export { default as SuccessIcon } from "@mui/icons-material/Done";
+export { default as ErrorIcon } from "@mui/icons-material/Error";
+export { default as FilterListIcon } from "@mui/icons-material/FilterList";
+export { default as MenuIcon } from "@mui/icons-material/Menu";
+export { default as RemoveIcon } from "@mui/icons-material/Remove";
+export { default as SaveIcon } from "@mui/icons-material/SaveOutlined";
+export { default as TuningIcon } from "@mui/icons-material/Tune";
 
-export {default as MoveUpCircleIcon} from "@mui/icons-material/ArrowCircleUp";
-export {default as MoveDownCircleIcon} from "@mui/icons-material/ArrowCircleDown";
-export {default as RemoveCircleIcon} from "@mui/icons-material/RemoveCircle";
-export {default as AddCircleIcon} from "@mui/icons-material/AddCircle";
+export { default as AddCircleIcon } from "@mui/icons-material/AddCircle";
+export { default as MoveDownCircleIcon } from "@mui/icons-material/ArrowCircleDown";
+export { default as MoveUpCircleIcon } from "@mui/icons-material/ArrowCircleUp";
+export { default as RemoveCircleIcon } from "@mui/icons-material/RemoveCircle";
 
-export {default as SearchIcon} from "@mui/icons-material/Search";
-export {default as AuditIcon} from "@mui/icons-material/TrackChanges";
-export {default as CreateIcon} from "@mui/icons-material/Create";
-export {default as UpdateIcon} from "@mui/icons-material/Update";
+export { default as CreateIcon } from "@mui/icons-material/Create";
+export { default as SearchIcon } from "@mui/icons-material/Search";
+export { default as AuditIcon } from "@mui/icons-material/TrackChanges";
+export { default as UpdateIcon } from "@mui/icons-material/Update";