@variocube/app-ui 1.15.0 → 1.16.0

package/src/date-pickers/getFormatString.ts

@@ -1,38 +1,38 @@
 import {DateTimeFormat, PlainDateTime} from "../temporal";
 
 interface FormatStringPlaceholder {
-    year?: string;
-    month?: string;
-    day?: string;
-    hour?: string;
-    minute?: string;
-    second?: string;
+	year?: string;
+	month?: string;
+	day?: string;
+	hour?: string;
+	minute?: string;
+	second?: string;
 }
 
 export function getFormatString(format: DateTimeFormat, placeholder: FormatStringPlaceholder) {
-    const {year, month, day, hour, minute, second} = placeholder;
+	const {year, month, day, hour, minute, second} = placeholder;
 
-    // derive a format string from a fictional date
-    let formatString = format.format(new PlainDateTime(9999, 11, 22, 0, 33, 44))
+	// derive a format string from a fictional date
+	let formatString = format.format(new PlainDateTime(9999, 11, 22, 0, 33, 44));
 
-    if (year) {
-        formatString = formatString.replace(/9+/, year);
-    }
-    if (month) {
-        formatString = formatString.replace(/1+/, month);
-    }
-    if (day) {
-        formatString = formatString.replace(/2+/, day);
-    }
-    if (hour) {
-        formatString = formatString.replace(/0+/, hour);
-    }
-    if (minute) {
-        formatString = formatString.replace(/3+/, minute);
-    }
-    if (second) {
-        formatString = formatString.replace(/4+/, second);
-    }
+	if (year) {
+		formatString = formatString.replace(/9+/, year);
+	}
+	if (month) {
+		formatString = formatString.replace(/1+/, month);
+	}
+	if (day) {
+		formatString = formatString.replace(/2+/, day);
+	}
+	if (hour) {
+		formatString = formatString.replace(/0+/, hour);
+	}
+	if (minute) {
+		formatString = formatString.replace(/3+/, minute);
+	}
+	if (second) {
+		formatString = formatString.replace(/4+/, second);
+	}
 
-    return formatString;
-}
+	return formatString;
+}

package/src/date-pickers/index.ts

@@ -1,5 +1,6 @@
-export {PlainDatePicker} from "./PlainDatePicker";
-export {PlainDateTimePicker} from "./PlainDateTimePicker";
-export {PlainTimePicker} from "./PlainTimePicker";
-export {TimezoneSelect} from "./TimezoneSelect";
-export {TimeFrameType, FilterTimeFrame, TimeframePicker, computeFromUntil} from "./timeframe-picker";
+export { PlainDatePicker } from "./PlainDatePicker";
+export { PlainDateTimePicker } from "./PlainDateTimePicker";
+export { PlainTimePicker } from "./PlainTimePicker";
+export { computeFromUntil, TimeframePicker, TimeFrameType } from "./timeframe-picker";
+export type { FilterTimeFrame } from "./timeframe-picker";
+export { TimezoneSelect } from "./TimezoneSelect";

package/src/date-pickers/parse.spec.ts

@@ -1,43 +1,40 @@
-import {parsePlainDate} from "./parse";
 import {DateTimeFormat} from "../temporal";
+import {parsePlainDate} from "./parse";
 
 describe("parsePlainDate", () => {
-
-    test("can parse locale: de", () => {
-        const plainDate = parsePlainDate("31.5.2020", new DateTimeFormat("de", {dateStyle: "short"}));
-        expect(plainDate.day).toBe(31);
-        expect(plainDate.month).toBe(5);
-        expect(plainDate.year).toBe(2020);
-    });
-
-    test("can parse locale: en-US", () => {
-        const plainDate = parsePlainDate("9/11/2001", new DateTimeFormat("en-US", {dateStyle: "short"}));
-        expect(plainDate.day).toBe(11);
-        expect(plainDate.month).toBe(9);
-        expect(plainDate.year).toBe(2001);
-    });
-
-    test("can parse locale: fr", () => {
-        const plainDate = parsePlainDate("4/7/2022", new DateTimeFormat("fr", {dateStyle: "short"}));
-        expect(plainDate.day).toBe(4);
-        expect(plainDate.month).toBe(7);
-        expect(plainDate.year).toBe(2022);
-    });
-
-    test("throws on non-latn numbering systems", () => {
-        expect(() => parsePlainDate("١٩‏/١٢‏/٢٠١٢", new DateTimeFormat("ar-EG", {dateStyle: "short"})))
-            .toThrow("Parsing numbering systems other than `latn` is not supported");
-    });
-
-
-    test("throws on invalid date", () => {
-        expect(() => parsePlainDate("13/11/2001", new DateTimeFormat("en-US", {dateStyle: "short"})))
-            .toThrow();
-    });
-
-    test("throws on parse error", () => {
-        expect(() => parsePlainDate("9//2001", new DateTimeFormat("en-US", {dateStyle: "short"})))
-            .toThrow();
-    });
-
-});
+	test("can parse locale: de", () => {
+		const plainDate = parsePlainDate("31.5.2020", new DateTimeFormat("de", {dateStyle: "short"}));
+		expect(plainDate.day).toBe(31);
+		expect(plainDate.month).toBe(5);
+		expect(plainDate.year).toBe(2020);
+	});
+
+	test("can parse locale: en-US", () => {
+		const plainDate = parsePlainDate("9/11/2001", new DateTimeFormat("en-US", {dateStyle: "short"}));
+		expect(plainDate.day).toBe(11);
+		expect(plainDate.month).toBe(9);
+		expect(plainDate.year).toBe(2001);
+	});
+
+	test("can parse locale: fr", () => {
+		const plainDate = parsePlainDate("4/7/2022", new DateTimeFormat("fr", {dateStyle: "short"}));
+		expect(plainDate.day).toBe(4);
+		expect(plainDate.month).toBe(7);
+		expect(plainDate.year).toBe(2022);
+	});
+
+	test("throws on non-latn numbering systems", () => {
+		expect(() => parsePlainDate("١٩‏/١٢‏/٢٠١٢", new DateTimeFormat("ar-EG", {dateStyle: "short"})))
+			.toThrow("Parsing numbering systems other than `latn` is not supported");
+	});
+
+	test("throws on invalid date", () => {
+		expect(() => parsePlainDate("13/11/2001", new DateTimeFormat("en-US", {dateStyle: "short"})))
+			.toThrow();
+	});
+
+	test("throws on parse error", () => {
+		expect(() => parsePlainDate("9//2001", new DateTimeFormat("en-US", {dateStyle: "short"})))
+			.toThrow();
+	});
+});

package/src/date-pickers/parse.ts

@@ -2,71 +2,68 @@ import {DateTimeFormat, PlainDate, PlainDateTime, PlainTime} from "../temporal";
 import {getFormatString} from "./getFormatString";
 
 const PLACEHOLDER = {
-    year: "year",
-    month: "month",
-    day: "day",
-    hour: "hour",
-    minute: "minute",
-    second: "second",
+	year: "year",
+	month: "month",
+	day: "day",
+	hour: "hour",
+	minute: "minute",
+	second: "second",
 } as const;
 
 export function parsePlainDate(value: string, format: DateTimeFormat) {
-    return PlainDate.from(parse(value, format), {overflow: "reject"});
+	return PlainDate.from(parse(value, format), {overflow: "reject"});
 }
 
 export function parsePlainDateTime(value: string, format: DateTimeFormat) {
-    return PlainDateTime.from(parse(value, format), {overflow: "reject"});
+	return PlainDateTime.from(parse(value, format), {overflow: "reject"});
 }
 
 export function parsePlainTime(value: string, format: DateTimeFormat) {
-    return PlainTime.from(parse(value, format), {overflow: "reject"});
+	return PlainTime.from(parse(value, format), {overflow: "reject"});
 }
 
 function parse(value: string, format: DateTimeFormat) {
-    // throw an error on unsupported numbering systems
-    if (format.resolvedOptions().numberingSystem != "latn") {
-        throw new Error("Parsing numbering systems other than `latn` is not supported");
-    }
-    const formatString = getFormatString(format, PLACEHOLDER);
-    return parseFormat(formatString, Object.values(PLACEHOLDER), value);
+	// throw an error on unsupported numbering systems
+	if (format.resolvedOptions().numberingSystem != "latn") {
+		throw new Error("Parsing numbering systems other than `latn` is not supported");
+	}
+	const formatString = getFormatString(format, PLACEHOLDER);
+	return parseFormat(formatString, Object.values(PLACEHOLDER), value);
 }
 
 function parseFormat<F extends string>(format: string, formatParts: F[], value: string) {
-    const parsed = {} as Record<F, number>;
-    for (const token of tokenize(format, formatParts)) {
-        if (isFormat(token, formatParts)) {
-            const matchStr = value.match(/^\d+/)?.pop();
-            if (matchStr) {
-                parsed[token] = parseInt(matchStr);
-                value = value.substring(matchStr.length);
-            }
-            else {
-                throw new Error("Could not parse number: " + value);
-            }
-        }
-        else {
-            if (value.startsWith(token)) {
-                value = value.substring(token.length);
-            }
-            else {
-                throw new Error(`Expected "${token}", but got "${value[0]}"`);
-            }
-        }
-    }
-    return parsed;
+	const parsed = {} as Record<F, number>;
+	for (const token of tokenize(format, formatParts)) {
+		if (isFormat(token, formatParts)) {
+			const matchStr = value.match(/^\d+/)?.pop();
+			if (matchStr) {
+				parsed[token] = parseInt(matchStr);
+				value = value.substring(matchStr.length);
+			} else {
+				throw new Error("Could not parse number: " + value);
+			}
+		} else {
+			if (value.startsWith(token)) {
+				value = value.substring(token.length);
+			} else {
+				throw new Error(`Expected "${token}", but got "${value[0]}"`);
+			}
+		}
+	}
+	return parsed;
 }
 
 function tokenize(format: string, formatParts: string[]) {
-    const tokens = [];
-    while (format.length > 0) {
-        // match the next format part or single char
-        const token = formatParts.find(part => format.startsWith(part)) || format[0];
-        tokens.push(token);
-        format = format.substring(token.length);
-    }
-    return tokens;
+	const tokens = [];
+	while (format.length > 0) {
+		// match the next format part or single char
+		const token = formatParts.find(part => format.startsWith(part)) || format[0];
+		tokens.push(token);
+		format = format.substring(token.length);
+	}
+	return tokens;
 }
 
 function isFormat<F extends string>(c: string, formatParts: F[]): c is F {
-    return formatParts.includes(c as F);
-}
+	return formatParts.includes(c as F);
+}

package/src/date-pickers/timeframe-picker.tsx

@@ -1,6 +1,6 @@
-import {Now, PlainDate, tryParsePlainDate} from "../temporal";
-import React, {ChangeEvent, useEffect} from "react";
 import {Box, Grid, MenuItem, TextField} from "@mui/material";
+import React, {ChangeEvent, useEffect} from "react";
+import {Now, PlainDate, tryParsePlainDate} from "../temporal";
 import {PlainDatePicker} from "./PlainDatePicker";
 
 export enum TimeFrameType {
@@ -40,15 +40,15 @@ interface TimeFrameSelectProps {
 			Last3Months?: string;
 			LastYear?: string;
 			Custom?: string;
-		}
-	}
+		};
+	};
 }
 
 export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
 	const {
 		type,
 		from,
-		until
+		until,
 	} = value;
 
 	const fromPlainDate = tryParsePlainDate(from) ?? null;
@@ -93,7 +93,7 @@ export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
 		timeframeTitle: tTimeframeTitle,
 		from: tFrom,
 		until: tUntil,
-		types: tTypes = {}
+		types: tTypes = {},
 	} = i18n ?? {};
 
 	return (
@@ -104,7 +104,7 @@ export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
 						fullWidth
 						select
 						variant="outlined"
-						label={tTimeframeTitle ?? 'Timeframe'}
+						label={tTimeframeTitle ?? "Timeframe"}
 						value={type}
 						onChange={handleTypeChange}
 					>
@@ -115,7 +115,7 @@ export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
 				</Grid>
 				<Grid item md={4} xs={12}>
 					<PlainDatePicker
-						label={tFrom ?? 'From'}
+						label={tFrom ?? "From"}
 						value={fromPlainDate}
 						onChange={handleFromChange}
 						disabled={type != TimeFrameType.Custom}
@@ -124,7 +124,7 @@ export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
 				</Grid>
 				<Grid item md={4} xs={12}>
 					<PlainDatePicker
-						label={tUntil ?? 'Until'}
+						label={tUntil ?? "Until"}
 						value={untilPlainDate}
 						onChange={handleUntilChange}
 						disabled={type != TimeFrameType.Custom}
@@ -133,7 +133,7 @@ export function TimeframePicker({value, onChange, i18n}: TimeFrameSelectProps) {
 				</Grid>
 			</Grid>
 		</Box>
-	)
+	);
 }
 
 export function computeFromUntil(type: TimeFrameType, from?: PlainDate | null, until?: PlainDate | null) {
@@ -154,13 +154,13 @@ export function computeFromUntil(type: TimeFrameType, from?: PlainDate | null, u
 			return {
 				from: today,
 				until: today,
-			}
+			};
 
 		case TimeFrameType.Yesterday:
 			return {
 				from: yesterday,
 				until: yesterday,
-			}
+			};
 
 		case TimeFrameType.Last7Days:
 			return {
@@ -172,13 +172,13 @@ export function computeFromUntil(type: TimeFrameType, from?: PlainDate | null, u
 			return {
 				from: lastWeek.subtract({days: lastWeek.dayOfWeek - 1}),
 				until: lastWeek.add({days: 7 - lastWeek.dayOfWeek}),
-			}
+			};
 
 		case TimeFrameType.ThisMonth:
 			return {
 				from: today.with({day: 1}),
 				until: today.with({day: lastMonth.daysInMonth}),
-			}
+			};
 
 		case TimeFrameType.LastMonth:
 			return {
@@ -190,13 +190,12 @@ export function computeFromUntil(type: TimeFrameType, from?: PlainDate | null, u
 			return {
 				from: lastMonth.subtract({months: 3}).with({day: 1}),
 				until: lastMonth.with({day: lastMonth.daysInMonth}),
-			}
+			};
 
 		case TimeFrameType.LastYear:
 			return {
 				from: lastYear.with({day: 1, month: 1}),
 				until: lastYear.with({day: 31, month: 12}),
-			}
-
+			};
 	}
 }

package/src/date-pickers/useLocale.ts

@@ -2,5 +2,5 @@ import {useMemo} from "react";
 import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 
 export function useLocale(suppliedLocale: string | undefined) {
-    return useMemo(() => suppliedLocale || getSupportedFormatLocale("dateTime"), [suppliedLocale]);
+	return useMemo(() => suppliedLocale || getSupportedFormatLocale("dateTime"), [suppliedLocale]);
 }

package/src/date-pickers/useRenderInput.tsx

@@ -1,20 +1,29 @@
-import * as React from "react";
-import {useCallback} from "react";
-import {TextFieldProps} from "@mui/material/TextField/TextField";
 import {TextField} from "@mui/material";
+import {TextFieldProps} from "@mui/material/TextField/TextField";
+import * as React from "react";
+import {useCallback, useMemo} from "react";
 
 export type UseRenderInputProps = Pick<TextFieldProps, "fullWidth" | "helperText" | "size" | "required">;
 
 export function useRenderInput(props: UseRenderInputProps) {
-    const {fullWidth, helperText, size, required} = props;
-    return useCallback((props: TextFieldProps) => (
-        <TextField
-            variant="outlined"
-            fullWidth={fullWidth}
-            helperText={helperText}
-            size={size}
-            required={required}
-            {...props}
-        />
-    ), [fullWidth, helperText, size]);
-}
+	const {fullWidth, helperText, size, required} = props;
+
+	// Create a stable forwardRef component
+	const RenderInputComponent = useMemo(
+		() =>
+			React.forwardRef<any, TextFieldProps>((props, ref) => (
+				<TextField
+					variant="outlined"
+					fullWidth={fullWidth}
+					helperText={helperText}
+					size={size}
+					required={required}
+					{...props}
+					inputRef={ref}
+				/>
+			)),
+		[fullWidth, helperText, size, required],
+	);
+
+	return useCallback((props: TextFieldProps) => <RenderInputComponent {...props} />, [RenderInputComponent]);
+}

package/src/formats/CompactFormat.spec.tsx

@@ -1,25 +1,23 @@
-import {act, create, ReactTestRenderer} from "react-test-renderer";
 import * as React from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
 import {CompactFormat} from "./CompactFormat";
 
 describe("CompactFormat", () => {
+	test("render de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<CompactFormat value={99000000} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("99\u00a0Mio.");
+	});
 
-    test("render de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<CompactFormat value={99000000} locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("99\u00a0Mio.");
-    });
-
-    test("render en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<CompactFormat value={99000000} locale="en-US" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("99M");
-    });
-
-});
+	test("render en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<CompactFormat value={99000000} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("99M");
+	});
+});

package/src/formats/CompactFormat.tsx

@@ -1,24 +1,24 @@
-import {useNumberFormat} from "./useNumberFormat";
 import {Fragment, useMemo} from "react";
 import * as React from "react";
+import {useNumberFormat} from "./useNumberFormat";
 
 export type CompactDisplay = "long" | "short";
 
 export interface CompactFormatProps {
-    /**
-     * The numeric amount of currency.
-     */
-    value: number | bigint | null | undefined;
-
-    /**
-     * Compact display.
-     */
-    compactDisplay?: CompactDisplay;
-
-    /**
-     * Overrides the user's locale. Use for testing only.
-     */
-    locale?: string;
+	/**
+	 * The numeric amount of currency.
+	 */
+	value: number | bigint | null | undefined;
+
+	/**
+	 * Compact display.
+	 */
+	compactDisplay?: CompactDisplay;
+
+	/**
+	 * Overrides the user's locale. Use for testing only.
+	 */
+	locale?: string;
 }
 
 /**
@@ -27,22 +27,22 @@ export interface CompactFormatProps {
  * @constructor
  */
 export function CompactFormat(props: CompactFormatProps) {
-    const {
-        value,
-        compactDisplay,
-        locale,
-    } = props;
+	const {
+		value,
+		compactDisplay,
+		locale,
+	} = props;
 
-    const options = useMemo(() => ({
-        notation: "compact",
-        compactDisplay,
-    } as const), [compactDisplay]);
+	const options = useMemo(() => ({
+		notation: "compact",
+		compactDisplay,
+	} as const), [compactDisplay]);
 
-    const numberFormat = useNumberFormat(options, locale);
+	const numberFormat = useNumberFormat(options, locale);
 
-    const str = useMemo(() => {
-        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
-    }, [numberFormat, value]);
+	const str = useMemo(() => {
+		return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+	}, [numberFormat, value]);
 
-    return <Fragment>{str}</Fragment>;
-}
+	return <Fragment>{str}</Fragment>;
+}

package/src/formats/CurrencyFormat.spec.tsx

@@ -1,25 +1,23 @@
-import {act, create, ReactTestRenderer} from "react-test-renderer";
 import * as React from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
 import {CurrencyFormat} from "./CurrencyFormat";
 
 describe("CurrencyFormat", () => {
+	test("render de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<CurrencyFormat value={1234.5} currency="EUR" locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("€\u00a01.234,50"); // \u00a0 is a non-breaking space
+	});
 
-    test("render de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<CurrencyFormat value={1234.5} currency="EUR" locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("€\u00a01.234,50"); // \u00a0 is a non-breaking space
-    });
-
-    test("render en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<CurrencyFormat value={1234.5} currency="USD" locale="en-US" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("$1,234.50");
-    });
-
-});
+	test("render en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<CurrencyFormat value={1234.5} currency="USD" locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("$1,234.50");
+	});
+});