@raystack/apsara 0.10.5 → 0.10.7

package/dist/index.cjs

@@ -11610,8 +11610,8 @@ const cell$1 = cva(styles$6.cell, {
         },
     },
 });
-const SidebarNavigationCell = ({ leadingIcon, trailingIcon, active, disabled, children, href = "#", }) => {
-    return (jsxRuntimeExports.jsxs(Link, { className: cell$1({ active, disabled }), href: href, children: [jsxRuntimeExports.jsxs(Flex, { gap: "small", children: [leadingIcon, jsxRuntimeExports.jsx(Text, { className: styles$6.cellText, children: children })] }), trailingIcon] }));
+const SidebarNavigationCell = ({ leadingIcon, trailingIcon, active, disabled, children, onClick, }) => {
+    return (jsxRuntimeExports.jsxs(Flex, { className: cell$1({ active, disabled }), onClick: onClick, children: [jsxRuntimeExports.jsxs(Flex, { gap: "small", children: [leadingIcon, jsxRuntimeExports.jsx(Text, { className: styles$6.cellText, children: children })] }), trailingIcon] }));
 };
 const SidebarFooter = ({ children, action }) => {
     return (jsxRuntimeExports.jsxs(Flex, { className: styles$6.footer, gap: "small", justify: "between", children: [jsxRuntimeExports.jsx(Text, { children: children }), action] }));
@@ -15308,8 +15308,8 @@ function DataTableGloabalSearch(props) {
     return (jsxRuntimeExports.jsx(TextField, { placeholder: "Filter tasks...", value: globalFilter ?? "", onChange: (event) => onGlobalFilterChange(String(event.target.value)), ...props }));
 }
 
-function DataTableToolbar({ children, }) {
-    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$4.toolbar, children: children }));
+function DataTableToolbar({ children, ...props }) {
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$4.toolbar, ...props, children: children }));
 }
 
 function DataTableViewOptions({ children, ...props }) {
@@ -15385,7 +15385,7 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-function DataTableRoot({ columns, data, emptyState, children, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...props }) {
     const convertedChildren = React.Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
     const footer = convertedChildren.find((child) => child.type === DataTableFooter) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
@@ -15429,7 +15429,7 @@ function DataTableRoot({ columns, data, emptyState, children, ...props }) {
                 resetColumns,
                 onGlobalFilterChange: setGlobalFilter,
                 onChange: () => ({}),
-            }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
+            }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { style: parentStyle, children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
                                                     return (jsxRuntimeExports.jsx(Table.Head, { children: jsxRuntimeExports.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
                                                                     ? null
                                                                     : flexRender(header.column.columnDef.header, header.getContext()), {
@@ -15622,136 +15622,228 @@ const Tabs = Object.assign(TabsRoot, {
     List: TabsList,
 });
 
-const isBrowser = () => typeof window !== "undefined";
-const getMediaTheme = () => {
-    if (!isBrowser())
-        return null;
-    // If they haven't been explicitly set, let's check the media query
-    const mqlDark = window.matchMedia("(prefers-color-scheme: dark)");
-    const hasMediaQueryPreference = typeof mqlDark.matches === "boolean";
-    if (hasMediaQueryPreference)
-        return mqlDark.matches ? "dark" : "light";
-    return null;
-};
-const listenForOSPreferenceChanges = (preferenceChanged) => {
-    if (!isBrowser())
-        return null;
-    // Listen out for if a user changes operating system mode,
-    // but don't save the change in local storage.
-    // The only two options here are dark or light.
-    window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", (e) => {
-        preferenceChanged(e.matches ? "dark" : "light");
-    });
-    window
-        .matchMedia("(prefers-color-scheme: light)")
-        .addEventListener("change", (e) => {
-        preferenceChanged(e.matches ? "light" : "dark");
-    });
-};
-
-const themeLocalStorageKey = "theme";
-function isValidThemePreference(theme) {
-    return theme == "auto" || theme == "dark" || theme == "light";
-}
-const saveThemePreference = (newTheme) => {
-    try {
-        if (typeof newTheme === "string")
-            window.localStorage.setItem(themeLocalStorageKey, newTheme);
-    }
-    catch (e) {
-        console.warn(e);
-    }
-};
-const getSavedThemePreference = () => {
-    try {
-        const savedMode = window.localStorage.getItem(themeLocalStorageKey);
-        // If the user has explicitly chosen a colour mode,
-        // let's use it. Otherwise, this value will be null.
-        return isValidThemePreference(savedMode) ? savedMode : null;
-    }
-    catch (e) {
-        // When Chrome in incognito, localStorage cannot be accessed
-        console.warn(e);
-        return null;
-    }
-};
-
-const { createContext, useState, useEffect } = React;
-const defaultThemeName = "dark";
-const initialValues = {
-    themeName: defaultThemeName,
-    themePreference: defaultThemeName,
-    setTheme: () => { },
-};
-const ApsaraThemeContext = createContext(initialValues);
-ApsaraThemeContext.displayName = "ApsaraThemeContext ";
-const useTheme = () => {
-    const [themePreference, setThemePreference] = useState(defaultThemeName);
-    const [themeName, setThemeName] = useState(defaultThemeName);
-    const [osTheme, setOsTheme] = useState(getMediaTheme());
-    // in the future this should prefer auto if no saved
-    useEffect(() => {
-        const initialTheme = getSavedThemePreference();
-        if (isValidThemePreference(initialTheme)) {
-            setThemePreference(initialTheme);
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const isServer = typeof window === "undefined";
+const ThemeContext = React.createContext(undefined);
+const defaultContext = { setTheme: (_) => { }, themes: [] };
+const useTheme = () => React.useContext(ThemeContext) ?? defaultContext;
+const ThemeProvider = (props) => {
+    const context = React.useContext(ThemeContext);
+    // Ignore nested context providers, just passthrough children
+    if (context)
+        return jsxRuntimeExports.jsx(React.Fragment, { children: props.children });
+    return jsxRuntimeExports.jsx(Theme$1, { ...props });
+};
+const defaultThemes = ["light", "dark"];
+const Theme$1 = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, }) => {
+    const [theme, setThemeState] = React.useState(() => getTheme(storageKey, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = React.useState(() => getTheme(storageKey));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = React.useCallback((theme) => {
+        let resolved = theme;
+        if (!resolved)
+            return;
+        // If theme is system, resolve it before setting theme
+        if (theme === "system" && enableSystem) {
+            resolved = getSystemTheme();
+        }
+        const name = value ? value[resolved] : resolved;
+        const enable = disableTransitionOnChange ? disableAnimation() : null;
+        const d = document.documentElement;
+        if (attribute === "class") {
+            d.classList.remove(...attrs);
+            if (name)
+                d.classList.add(name);
         }
         else {
-            setThemePreference(defaultThemeName);
+            if (name) {
+                d.setAttribute(attribute, name);
+            }
+            else {
+                d.removeAttribute(attribute);
+            }
         }
+        if (enableColorScheme) {
+            const fallback = colorSchemes.includes(defaultTheme)
+                ? defaultTheme
+                : null;
+            const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
+            // @ts-ignore
+            d.style.colorScheme = colorScheme;
+        }
+        enable?.();
     }, []);
-    useEffect(() => {
-        if (themePreference == "auto") {
-            setThemeName(osTheme ?? defaultThemeName);
+    const setTheme = React.useCallback((theme) => {
+        setThemeState(theme);
+        // Save to storage
+        try {
+            localStorage.setItem(storageKey, theme);
+        }
+        catch (e) {
+            // Unsupported
+        }
+    }, [forcedTheme]);
+    const handleMediaQuery = React.useCallback((e) => {
+        const resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, forcedTheme]);
+    // Always listen to System preference
+    React.useEffect(() => {
+        const media = window.matchMedia(MEDIA);
+        // Intentionally use deprecated listener methods to support iOS & old browsers
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return () => media.removeListener(handleMediaQuery);
+    }, [handleMediaQuery]);
+    // localStorage event handling
+    React.useEffect(() => {
+        const handleStorage = (e) => {
+            if (e.key !== storageKey) {
+                return;
+            }
+            // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+            const theme = e.newValue || defaultTheme;
+            setTheme(theme);
+        };
+        window.addEventListener("storage", handleStorage);
+        return () => window.removeEventListener("storage", handleStorage);
+    }, [setTheme]);
+    // Whenever theme or forcedTheme changes, apply it
+    React.useEffect(() => {
+        // @ts-ignore
+        applyTheme(forcedTheme ?? theme);
+    }, [forcedTheme, theme]);
+    const providerValue = React.useMemo(() => ({
+        theme,
+        setTheme,
+        forcedTheme,
+        resolvedTheme: theme === "system" ? resolvedTheme : theme,
+        themes: enableSystem ? [...themes, "system"] : themes,
+        systemTheme: (enableSystem ? resolvedTheme : undefined),
+    }), [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes]);
+    return (jsxRuntimeExports.jsxs(ThemeContext.Provider, { value: providerValue, children: [jsxRuntimeExports.jsx(ThemeScript, { ...{
+                    forcedTheme,
+                    disableTransitionOnChange,
+                    enableSystem,
+                    enableColorScheme,
+                    storageKey,
+                    themes,
+                    defaultTheme,
+                    attribute,
+                    value,
+                    children,
+                    attrs,
+                    nonce,
+                } }), children] }));
+};
+const ThemeScript = React.memo(({ forcedTheme, storageKey, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, }) => {
+    const defaultSystem = defaultTheme === "system";
+    // Code-golfing the amount of characters in the script
+    const optimization = (() => {
+        if (attribute === "class") {
+            const removeClasses = `c.remove(${attrs
+                .map((t) => `'${t}'`)
+                .join(",")})`;
+            return `var d=document.documentElement,c=d.classList;${removeClasses};`;
         }
         else {
-            setThemeName(themePreference);
-        }
-    }, [themePreference]);
-    useEffect(() => {
-        // if os theme changes and we are in auto mode, change up
-        if (themePreference == "auto") {
-            setThemeName(osTheme ?? defaultThemeName);
-        }
-    }, [osTheme]);
-    useEffect(() => {
-        const html = document.documentElement;
-        for (const k of ["dark", "light"]) {
-            html.classList.remove(k);
-        }
-        html.classList.add(themeName);
-    }, [themeName]);
-    listenForOSPreferenceChanges((osPref) => {
-        if (osPref === osTheme)
-            return;
-        setOsTheme(osPref);
-    });
-    return {
-        themeName,
-        themePreference: themePreference,
-        setTheme: (newTheme) => {
-            setThemePreference(newTheme);
-            saveThemePreference(newTheme);
-        },
+            return `var d=document.documentElement,n='${attribute}',s='setAttribute';`;
+        }
+    })();
+    const fallbackColorScheme = (() => {
+        if (!enableColorScheme) {
+            return "";
+        }
+        const fallback = colorSchemes.includes(defaultTheme)
+            ? defaultTheme
+            : null;
+        if (fallback) {
+            return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+        }
+        else {
+            return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+        }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+        const resolvedName = value ? value[name] : name;
+        const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+        let text = "";
+        // MUCH faster to set colorScheme alongside HTML attribute/class
+        // as it only incurs 1 style recalculation rather than 2
+        // This can save over 250ms of work for pages with big DOM
+        if (enableColorScheme &&
+            setColorScheme &&
+            !literal &&
+            colorSchemes.includes(name)) {
+            text += `d.style.colorScheme = '${name}';`;
+        }
+        if (attribute === "class") {
+            if (literal || resolvedName) {
+                text += `c.add(${val})`;
+            }
+            else {
+                text += `null`;
+            }
+        }
+        else {
+            if (resolvedName) {
+                text += `d[s](n,${val})`;
+            }
+        }
+        return text;
     };
-};
-const ApsaraThemeProvider = ({ children }) => {
-    const { themePreference, setTheme, themeName } = useTheme();
-    return (jsxRuntimeExports.jsx(ApsaraThemeContext.Provider, { value: {
-            themeName,
-            themePreference,
-            setTheme,
-        }, children: children }));
-};
-function useApsaraTheme() {
-    const context = React.useContext(ApsaraThemeContext);
-    if (!context) {
-        throw new Error("[Apsara UI 2.0]: useApsaraTheme must be used within a ApsaraThemeProvider");
+    const scriptSrc = (() => {
+        if (forcedTheme) {
+            return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+        }
+        if (enableSystem) {
+            return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if('system'===e||(!e&&${defaultSystem})){var t='${MEDIA}',m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM("dark")}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem
+                ? `else{` + updateDOM(defaultTheme, false, false) + "}"
+                : ""}${fallbackColorScheme}}catch(e){}}()`;
+        }
+        return `!function(){try{${optimization}var e=localStorage.getItem('${storageKey}');if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(defaultTheme, false, false)};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    return (jsxRuntimeExports.jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: scriptSrc } }));
+}, 
+// Never re-render this component
+() => true);
+// Helpers
+const getTheme = (key, fallback) => {
+    if (isServer)
+        return undefined;
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
     }
-    const { themePreference, setTheme, themeName } = context;
-    return { themePreference, setTheme, themeName };
-}
+    catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};
+const disableAnimation = () => {
+    const css = document.createElement("style");
+    css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+    document.head.appendChild(css);
+    return () => {
+        // Force restyle
+        (() => window.getComputedStyle(document.body))();
+        // Wait for next tick before removing
+        setTimeout(() => {
+            document.head.removeChild(css);
+        }, 1);
+    };
+};
+const getSystemTheme = (e) => {
+    if (!e)
+        e = window.matchMedia(MEDIA);
+    const isDark = e.matches;
+    const systemTheme = isDark ? "dark" : "light";
+    return systemTheme;
+};
 
 var Theme;
 (function (Theme) {
@@ -15759,11 +15851,11 @@ var Theme;
     Theme["LIGHT"] = "light";
 })(Theme || (Theme = {}));
 function ThemeSwitcher({ size = 30, ...props }) {
-    const { themeName, setTheme } = useApsaraTheme();
+    const { theme, setTheme } = useTheme();
     const onClickHandler = () => {
-        setTheme(themeName === Theme.DARK ? Theme.LIGHT : Theme.DARK);
+        setTheme(theme === Theme.DARK ? Theme.LIGHT : Theme.DARK);
     };
-    return (jsxRuntimeExports.jsx(Box, { ...props, children: themeName === Theme.DARK ? (jsxRuntimeExports.jsx(SunIcon, { width: size, height: size, onClick: onClickHandler })) : (jsxRuntimeExports.jsx(MoonIcon, { width: size, height: size, onClick: onClickHandler })) }));
+    return (jsxRuntimeExports.jsx(Box, { ...props, children: theme === Theme.DARK ? (jsxRuntimeExports.jsx(SunIcon, { width: size, height: size, onClick: onClickHandler })) : (jsxRuntimeExports.jsx(MoonIcon, { width: size, height: size, onClick: onClickHandler })) }));
 }
 
 var styles = {"title":"title-module_title__r78X4","title-small":"title-module_title-small__aS4B3","title-medium":"title-module_title-medium__e8yQc","title-large":"title-module_title-large__TVRRL"};
@@ -15784,7 +15876,6 @@ function Title({ children, className, size, ...props }) {
     return (jsxRuntimeExports.jsx("span", { className: title({ size, className }), ...props, children: children }));
 }
 
-exports.ApsaraThemeProvider = ApsaraThemeProvider;
 exports.Avatar = Avatar;
 exports.Badge = badge$1;
 exports.Body = Body;
@@ -15817,8 +15908,9 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextField = TextField;
+exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.Title = Title;
-exports.useApsaraTheme = useApsaraTheme;
 exports.useTable = useTable;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.cjs.map