@variocube/app-ui 1.15.0 → 1.16.0

package/src/tabs/Tabs.tsx

@@ -1,187 +1,189 @@
-import React, {Fragment, SyntheticEvent, useEffect, useRef, useState} from "react";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import {IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Stack} from "@mui/material";
-import MuiTabs, {TabsProps as MuiTabsProps} from "@mui/material/Tabs";
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MuiTab, {TabProps as MuiTabProps} from "@mui/material/Tab";
+import MuiTabs, {TabsProps as MuiTabsProps} from "@mui/material/Tabs";
+import React, {Fragment, SyntheticEvent, useEffect, useRef, useState} from "react";
 
 interface TabItem {
-    index: number;
-    width: number;
+	index: number;
+	width: number;
 }
 
 interface TabProps extends MuiTabProps<React.ElementType> {
 }
 
 interface TabsProps extends MuiTabsProps {
-    items: TabProps [];
+	items: TabProps[];
 }
 
 const hiddenSx = {
-    visibility: 'hidden',
-    height: 0,
-    maxHeight: 'unset',
-    minHeight: 'unset',
-    padding: 0
-}
+	visibility: "hidden",
+	height: 0,
+	maxHeight: "unset",
+	minHeight: "unset",
+	padding: 0,
+};
 
 export function Tabs(props: TabsProps) {
-    const {
-        orientation = "horizontal",
-        scrollButtons = "auto",
-        allowScrollButtonsMobile = true,
-        sx,
-        onChange,
-        items: inItems,
-        value,
-        ...rest
-    } = props;
-
-    const items = inItems.map((item, i) => ({
-        ...item,
-        value: typeof item.value == "undefined" ? i : item.value
-    } as TabProps));
-
-    const ref = useRef(null);
-    const [dropdownEl, setDropdownEl] = useState<null|HTMLElement>(null);
-
-    const [overflowIndex, setOverflowIndex] = useState<number>(items.length);
-
-    const selectedIndex = items.findIndex((item) => item.value == value);
-
-    function handleTabOverflow(root: Element, items: TabItem[]) {
-        // clientWidth: what the user can see
-        // scrollWidth: actual size of the DOM object
-        const {clientWidth} = root;
-
-        // this basically loop through each item size and adding up the width of all items
-        // if the width exceed the clientWidth of the root node, item will be hidden from the horizontal tab display
-        // else the item remains visible and its ref from the dropdown list will be hidden otherwise
-        let overflowIndex = 0;
-        let itemsWidth = 0;
-        for (let i = 0; i < items.length; i++) {
-            itemsWidth += items[i].width;
-            if (itemsWidth < clientWidth) {
-                overflowIndex++;
-            }
-        }
-        setOverflowIndex(overflowIndex);
-    }
-
-    useEffect(() => {
-        if (ref.current) {
-            // fetch the root node of tabs
-            const root = Array.from((ref.current as HTMLButtonElement).children).find(e => e.className.includes('tabRoot'));
-            if (root) {
-                // from the root node, traverse down to list node of tab items
-                const list = Array.from(root.children).find(e => e.className.includes('tabList'));
-                const items = list ? Array.from(list.children).map((e, index) => ({ index, width: e.clientWidth })) : [];
-
-                // apply the resize observer to the root node and watch for the size changes
-                const resizeObserver = new ResizeObserver(() => handleTabOverflow(root, items));
-                resizeObserver.observe(root);
-                return () => resizeObserver.disconnect();
-            }
-        }
-    }, [ref])
-
-    return (
-        <Stack
-            flex={1}
-            direction="row"
-            alignItems="center"
-            sx={{
-                borderBottom: 1,
-                borderColor: "divider"
-            }}
-        >
-            <MuiTabs
-                ref={ref}
-                orientation="horizontal"
-                visibleScrollbar={false}
-                scrollButtons={false}
-                allowScrollButtonsMobile={false}
-                sx={{
-                    ...sx,
-                    flex: 1,
-                }}
-                classes={{
-                    scroller: 'tabRoot',
-                    flexContainer: 'tabList'
-                }}
-                value={value}
-                onChange={onChange}
-                {...rest}
-            >
-                {items
-                    .map((tabProps, i) => (
-                        <MuiTab
-                            key={'muiTab-' + i}
-                            iconPosition="start"
-                            {...tabProps}
-                            sx={{
-                                ...tabProps.sx,
-                                ...(i >= overflowIndex ? {display: "none"} : undefined),
-                                minHeight: 48,
-                            }}
-                        />
-                    ))}
-            </MuiTabs>
-            {(overflowIndex < items.length) && (
-                <Fragment>
-                    <IconButton
-                        sx={{
-                            ml: 1
-                        }}
-                        onClick={ev => setDropdownEl(ev.currentTarget)}
-                        color={selectedIndex >= overflowIndex ? "primary" : "default"}
-                    >
-                        <MoreHorizIcon fontSize="inherit" />
-                    </IconButton>
-                    <Menu
-                        anchorEl={dropdownEl}
-                        open={!!dropdownEl}
-                        onClose={() => setDropdownEl(null)}
-                    >
-                        {items
-                            .map((tabProps, i) => {
-                                const {
-                                    label,
-                                    icon,
-                                    onClick,
-                                    component,
-                                    value: itemValue,
-                                    ...rest
-                                } = tabProps;
-
-                                const selected = value == itemValue;
-
-                                function handleClick(ev: SyntheticEvent) {
+	const {
+		orientation = "horizontal",
+		scrollButtons = "auto",
+		allowScrollButtonsMobile = true,
+		sx,
+		onChange,
+		items: inItems,
+		value,
+		...rest
+	} = props;
+
+	const items = inItems.map((item, i) => ({
+		...item,
+		value: typeof item.value == "undefined" ? i : item.value,
+	} as TabProps));
+
+	const ref = useRef(null);
+	const [dropdownEl, setDropdownEl] = useState<null | HTMLElement>(null);
+
+	const [overflowIndex, setOverflowIndex] = useState<number>(items.length);
+
+	const selectedIndex = items.findIndex((item) => item.value == value);
+
+	function handleTabOverflow(root: Element, items: TabItem[]) {
+		// clientWidth: what the user can see
+		// scrollWidth: actual size of the DOM object
+		const {clientWidth} = root;
+
+		// this basically loop through each item size and adding up the width of all items
+		// if the width exceed the clientWidth of the root node, item will be hidden from the horizontal tab display
+		// else the item remains visible and its ref from the dropdown list will be hidden otherwise
+		let overflowIndex = 0;
+		let itemsWidth = 0;
+		for (let i = 0; i < items.length; i++) {
+			itemsWidth += items[i].width;
+			if (itemsWidth < clientWidth) {
+				overflowIndex++;
+			}
+		}
+		setOverflowIndex(overflowIndex);
+	}
+
+	useEffect(() => {
+		if (ref.current) {
+			// fetch the root node of tabs
+			const root = Array.from((ref.current as HTMLButtonElement).children).find(e =>
+				e.className.includes("tabRoot")
+			);
+			if (root) {
+				// from the root node, traverse down to list node of tab items
+				const list = Array.from(root.children).find(e => e.className.includes("tabList"));
+				const items = list ? Array.from(list.children).map((e, index) => ({index, width: e.clientWidth})) : [];
+
+				// apply the resize observer to the root node and watch for the size changes
+				const resizeObserver = new ResizeObserver(() => handleTabOverflow(root, items));
+				resizeObserver.observe(root);
+				return () => resizeObserver.disconnect();
+			}
+		}
+	}, [ref]);
+
+	return (
+		<Stack
+			flex={1}
+			direction="row"
+			alignItems="center"
+			sx={{
+				borderBottom: 1,
+				borderColor: "divider",
+			}}
+		>
+			<MuiTabs
+				ref={ref}
+				orientation="horizontal"
+				visibleScrollbar={false}
+				scrollButtons={false}
+				allowScrollButtonsMobile={false}
+				sx={{
+					...sx,
+					flex: 1,
+				}}
+				classes={{
+					scroller: "tabRoot",
+					flexContainer: "tabList",
+				}}
+				value={value}
+				onChange={onChange}
+				{...rest}
+			>
+				{items
+					.map((tabProps, i) => (
+						<MuiTab
+							key={"muiTab-" + i}
+							iconPosition="start"
+							{...tabProps}
+							sx={{
+								...tabProps.sx,
+								...(i >= overflowIndex ? {display: "none"} : undefined),
+								minHeight: 48,
+							}}
+						/>
+					))}
+			</MuiTabs>
+			{(overflowIndex < items.length) && (
+				<Fragment>
+					<IconButton
+						sx={{
+							ml: 1,
+						}}
+						onClick={ev => setDropdownEl(ev.currentTarget)}
+						color={selectedIndex >= overflowIndex ? "primary" : "default"}
+					>
+						<MoreHorizIcon fontSize="inherit" />
+					</IconButton>
+					<Menu
+						anchorEl={dropdownEl}
+						open={!!dropdownEl}
+						onClose={() => setDropdownEl(null)}
+					>
+						{items
+							.map((tabProps, i) => {
+								const {
+									label,
+									icon,
+									onClick,
+									component,
+									value: itemValue,
+									...rest
+								} = tabProps;
+
+								const selected = value == itemValue;
+
+								function handleClick(ev: SyntheticEvent) {
 									if (!selected && onChange) {
-                                        onChange(ev, itemValue);
-                                    }
-                                    if (onClick) {
-                                        onClick(ev);
-                                    }
-                                    setDropdownEl(null);
-                                }
-
-                                return (
-                                    <MenuItem
-                                        key={'dropdownItem-' + i}
-                                        onClick={handleClick}
-                                        component={component ?? "li"}
-                                        sx={i < overflowIndex ? hiddenSx : {}}
-                                        selected={selected}
-                                        {...rest}
-                                    >
-                                        {icon && <ListItemIcon>{icon}</ListItemIcon>}
-                                        <ListItemText>{label}</ListItemText>
-                                    </MenuItem>
-                                )
-                            })}
-                    </Menu>
-                </Fragment>
-            )}
-        </Stack>
-    );
+										onChange(ev, itemValue);
+									}
+									if (onClick) {
+										onClick(ev);
+									}
+									setDropdownEl(null);
+								}
+
+								return (
+									<MenuItem
+										key={"dropdownItem-" + i}
+										onClick={handleClick}
+										component={component ?? "li"}
+										sx={i < overflowIndex ? hiddenSx : {}}
+										selected={selected}
+										{...rest}
+									>
+										{icon && <ListItemIcon>{icon}</ListItemIcon>}
+										<ListItemText>{label}</ListItemText>
+									</MenuItem>
+								);
+							})}
+					</Menu>
+				</Fragment>
+			)}
+		</Stack>
+	);
 }

package/src/tabs/index.ts

@@ -1 +1 @@
-export {Tabs} from "./Tabs";
+export { Tabs } from "./Tabs";

package/src/temporal/index.ts

@@ -1,2 +1,2 @@
-export * from "./polyfill";
 export * from "./parse";
+export * from "./polyfill";

package/src/temporal/parse.ts

@@ -20,8 +20,7 @@ function tryParseString<T>(value: string | undefined | null, parseFn: (value: st
 	if (value) {
 		try {
 			return parseFn(value);
-		}
-		catch (error) {
+		} catch (error) {
 			// ignore parse error
 		}
 	}

package/src/temporal/polyfill.ts

@@ -4,17 +4,17 @@
  * switch to a conditional polyfill or using the browser built-ins.
  */
 
-import {Temporal, Intl, toTemporalInstant} from '@js-temporal/polyfill';
+import {Intl, Temporal, toTemporalInstant} from "@js-temporal/polyfill";
 
 export const {
-    Instant,
-    ZonedDateTime,
-    PlainDateTime,
-    PlainDate,
-    PlainTime,
-    Now,
-    Duration,
-    TimeZone
+	Instant,
+	ZonedDateTime,
+	PlainDateTime,
+	PlainDate,
+	PlainTime,
+	Now,
+	Duration,
+	TimeZone,
 } = Temporal;
 
 export type Instant = Temporal.Instant;
@@ -26,11 +26,11 @@ export type Duration = Temporal.Duration;
 export type TimeZone = Temporal.TimeZone;
 
 export const {
-    DateTimeFormat
+	DateTimeFormat,
 } = Intl;
 
 export type DateTimeFormat = Intl.DateTimeFormat;
 export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 export type Formattable = Intl.Formattable;
 
-export {toTemporalInstant};
+export { toTemporalInstant };

package/src/utils/defined.ts

@@ -1,4 +1,3 @@
-
 export function defined<T>(x: T | undefined): x is T {
-    return x !== undefined;
-}
+	return x !== undefined;
+}

package/src/utils/index.ts

@@ -1,3 +1,3 @@
+export * from "./defined";
 export * from "./useFlag";
 export * from "./useIsMounted";
-export * from "./defined";

package/src/utils/useFlag.ts

@@ -1,9 +1,9 @@
 import {useCallback, useState} from "react";
 
 export function useFlag(initialValue: boolean) {
-    const [flag, setFlag] = useState(initialValue);
-    const set = useCallback(() => setFlag(true), []);
-    const clear = useCallback(() => setFlag(false), []);
-    const toggle = useCallback(() => setFlag(prev => !prev), []);
-    return [flag, set, clear, toggle] as const;
+	const [flag, setFlag] = useState(initialValue);
+	const set = useCallback(() => setFlag(true), []);
+	const clear = useCallback(() => setFlag(false), []);
+	const toggle = useCallback(() => setFlag(prev => !prev), []);
+	return [flag, set, clear, toggle] as const;
 }

package/src/utils/useIsMounted.ts

@@ -1,12 +1,12 @@
 import {useEffect, useRef} from "react";
 
 export function useIsMounted() {
-    const isMounted = useRef(false);
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        }
-    }, []);
-    return isMounted.current;
-}
+	const isMounted = useRef(false);
+	useEffect(() => {
+		isMounted.current = true;
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+	return isMounted.current;
+}