@compill/admin 1.0.101 → 1.0.103

package/{src → dist}/lib/layout/menu/MenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import { Item } from "./MenuConfig";
 interface MenuItemProps extends SoperioComponent, ParentComponent {

package/dist/lib/layout/menu/MenuItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { SelectedIndicator } from "./SelectedIndicator";
+import { Link, useLocation, useMatch } from "react-router-dom";
+import { MenuButton } from "./MenuButton";
+export function MenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
+    const location = useLocation();
+    const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+    const match = useMatch("/" + path) != null;
+    // const selected = match != null
+    return (_jsxs(_Fragment, { children: [_jsxs(Link, { to: path, style: { position: "relative" }, children: [_jsx(MenuButton, { depth: depth, darkMode: darkMode, icon: icon, selected: selected, ...props }), match && _jsx(SelectedIndicator, { darkMode: darkMode })] }), subMenu?.map((item, index) => (_jsx(MenuItem, { icon: item.icon, path: item.path, depth: (depth ?? 0) + 1, darkMode: darkMode, subMenu: item.children, children: item.label }, index)))] }));
+}

package/{src → dist}/lib/layout/menu/NextMenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import { Item } from "./MenuConfig";
 interface NextMenuItemProps extends SoperioComponent, ParentComponent {

package/dist/lib/layout/menu/NextMenuItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { MenuButton } from "./MenuButton";
+import { SelectedIndicator } from "./SelectedIndicator";
+import Link from "next/link";
+import { useRouter } from "next/router";
+export function NextMenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
+    const { pathname } = useRouter();
+    const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+    const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
+    return (_jsxs(_Fragment, { children: [_jsxs(Link, { href: path, style: { position: "relative" }, children: [_jsx(MenuButton, { depth: depth, darkMode: darkMode, icon: icon, selected: selected, ...props }), match && _jsx(SelectedIndicator, { darkMode: darkMode })] }), subMenu?.map((item, index) => (_jsx(NextMenuItem, { icon: item.icon, path: item.path, depth: (depth ?? 0) + 1, darkMode: darkMode, subMenu: item.children, children: item.label }, index)))] }));
+}

package/{src → dist}/lib/layout/menu/SelectedIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function SelectedIndicator({ darkMode }: {
     darkMode?: boolean;
 }): JSX.Element;

package/dist/lib/layout/menu/SelectedIndicator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function SelectedIndicator({ darkMode }) {
+    return (_jsx("div", { position: "absolute", bgColor: darkMode ? "white" : "black", bgOpacity: "90", w: "0.5", h: "6", top: "1.5", start: "-4" }));
+}

package/{src → dist}/lib/layout/menu/UserBlock.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { MenuConfig } from "@compill/admin";
+import { MenuConfig } from "./MenuConfig";
 interface UserBlockProps {
     color: string;
     darkMode?: boolean;

package/dist/lib/layout/menu/UserBlock.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { useSessionLogout, useSessionUser } from "@compill/auth";
+import { mdiCog, mdiDotsVertical, mdiLogout } from "@mdi/js";
+import { Avatar, Button, Icon, IconButton, Popup } from "@valerya/ui";
+import { capitalize } from "es-toolkit";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+export function UserBlock({ color, darkMode, menuConfig, path }) {
+    const { isLoading, user } = useSessionUser();
+    const navigate = useNavigate();
+    const handleClick = React.useCallback(() => navigate(path), [navigate, path]);
+    if (isLoading)
+        return null;
+    return (_jsxs("div", { dflex: true, alignItems: "center", border: "0.5", borderColor: `${color}-${darkMode ? "800" : "200"}`, ps: "3", py: "1.5", textSize: "md", rounded: "lg", hover_bgColor: `${color}-${darkMode ? "800" : "200"}`, cursor: "pointer", textColor: darkMode ? "white" : "slate-800", onClick: handleClick, children: [_jsx(Avatar, { size: "sm", src: user?.media?.url ?? "", name: `${user?.firstname} ${user?.lastname}` }), _jsx("span", { flexGrow: true, ms: "2", children: `${capitalize(user?.firstname || user?.lastname || "")}` }), _jsx(IconButton, { variant: "borderless", corners: "pill", scheme: "dark", textColor: darkMode ? "white" : "slate-800", hover_textColor: darkMode ? "white" : "slate-800", hover_bgColor: `${color}-${darkMode ? "900" : "200"}`, icon: mdiCog, onClick: handleClick }), _jsx(OverflowMenu, { color: color, darkMode: darkMode, menuConfig: menuConfig })] }));
+}
+function OverflowMenu({ color, darkMode, menuConfig }) {
+    const [showPopup, setShowPopup] = React.useState(false);
+    const navigate = useNavigate();
+    const logout = useSessionLogout(false);
+    return (_jsx(_Fragment, { children: _jsxs(Popup, { show: showPopup, position: "relative", side: "bottom-end", onClick: (e) => { e.preventDefault(); e.stopPropagation(); setShowPopup((show) => !show); }, onHide: () => setShowPopup(false), children: [_jsx(IconButton, { icon: mdiDotsVertical, variant: "borderless", corners: "pill", scheme: "dark", textColor: darkMode ? "white" : "slate-800", hover_textColor: darkMode ? "white" : "slate-800", hover_bgColor: `${color}-${darkMode ? "900" : "200"}` }), _jsxs("div", { bgColor: "white", rounded: "sm", overflow: "hidden", shadow: true, mt: "1", border: "px", borderColor: "gray-200", divideColor: "gray-200", divideY: "px", minW: "40", children: [menuConfig && menuConfig.length > 0 && menuConfig.map((item, index) => {
+                            if (item.type == "item") {
+                                return (_jsx(MenuItem, { icon: item.icon, onClick: () => navigate(item.path), children: item.label }, index));
+                            }
+                            return null;
+                        }), _jsx(MenuItem, { icon: mdiLogout, onClick: logout, children: "Logout" })] })] }) }));
+}
+function MenuItem({ icon, onClick, children, ...props }) {
+    const handleClick = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick?.(e);
+    }, []);
+    return (_jsxs(Button, { variant: "borderless", scheme: "dark", size: "sm", alignItems: "center", dflex: true, gap: "2", px: "2", py: "1.5", w: "full", onClick: handleClick, textColor: "slate-700", ...props, children: [icon && _jsx(Icon, { path: icon, size: "md" }), children] }));
+}

package/{src → dist}/lib/modal/AttachDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryFunctionContext } from "@tanstack/react-query";
 import { ModalProps } from "@valerya/ui";
 import { FormikConfig } from "formik";

package/dist/lib/modal/AttachDialog.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { useApiMutation, useApiQuery } from "@compill/api";
+import { ModalLoadingOverlay, QueryLoadingState, RetryOnError } from "@compill/components";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, Checkbox, Modal } from "@valerya/ui";
+import { sortBy } from "es-toolkit";
+import React from "react";
+import { toast } from "react-toastify";
+const defaultErrorMsg = "Oops, something went wrong...";
+export function AttachDialog({ queryId, queryKey, queryFetchFn, queryFetchAllKey, queryFetchAllFn, querySaveFn, matchKey, size = "lg", show, onClose, itemLabel, onSuccess, onFetchError, fetchErrorMsg = defaultErrorMsg, onSaveError, saveErrorMsg = defaultErrorMsg, invalidateQueriesOnSuccess = true, retryText = "Retry", cancelLabel = "Cancel", saveLabel, formikProps, getItemName, ...props }) {
+    const queryClient = useQueryClient();
+    const { data: attached, isInitialLoading: fetchLoading, isError: fetchError, refetch, error } = useApiQuery(queryKey, queryFetchFn);
+    const { data, isInitialLoading: fetchAllLoading, isError: fetchAllError, refetch: refetchAll, error: errorAll } = useApiQuery(queryFetchAllKey, queryFetchAllFn);
+    const [selectedResources, setSelectedResources] = React.useState([]);
+    const isLoading = fetchLoading || fetchAllLoading;
+    const isError = fetchError || fetchAllError;
+    const mutation = useApiMutation(querySaveFn, queryKey, queryId);
+    const handleClick = React.useCallback((event) => {
+        const id = event?.currentTarget.dataset.id ?? "";
+        const arr = selectedResources.concat([]);
+        const i = selectedResources.indexOf(id);
+        if (i != -1)
+            arr.splice(i, 1);
+        else
+            arr.push(id);
+        setSelectedResources(arr);
+    }, [selectedResources, setSelectedResources]);
+    const retry = React.useCallback(() => {
+        if (fetchError)
+            refetch();
+        if (fetchAllError)
+            refetchAll();
+    }, [refetch, refetchAll, fetchError, fetchAllError]);
+    const saveItem = React.useCallback(() => {
+        // Clear mutation error if any
+        mutation.reset();
+        mutation.mutateAsync({ resources: selectedResources })
+            .then((response) => {
+            if (onSuccess)
+                onSuccess(response);
+            else
+                toast.success(`${itemLabel} saved`);
+            if (invalidateQueriesOnSuccess)
+                queryClient.invalidateQueries({ queryKey: queryKey });
+            // closing delete modal
+            onClose?.();
+        })
+            .catch(error => {
+            console.error("on error", error);
+            if (onSaveError)
+                onSaveError();
+            else
+                toast.error(`Error adding ${itemLabel}`);
+        });
+    }, [mutation, queryId, onSuccess, queryClient, onSaveError, onClose]);
+    const resources = React.useMemo(() => {
+        let r = [];
+        if (attached && data) {
+            r = [].concat(data);
+            attached.forEach((attachedItem) => r.splice(r.findIndex((item) => item.id == attachedItem[matchKey]), 1));
+            // TODO set keyField for name (could be title for example)
+            if (getItemName)
+                r = r.map((item) => { return { ...item, name: getItemName(item) }; });
+            r = sortBy(r, ["name"]);
+        }
+        return r;
+    }, [attached, data]);
+    return (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "light", transition: true, ...props, children: [_jsx(Modal.Header, { children: `Add ${itemLabel}` }), isLoading && (_jsx(Modal.Body, { children: _jsx(QueryLoadingState, { minW: "72" }) })), isError && (_jsx(Modal.Body, { children: _jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) })), !isLoading && !isError &&
+                (_jsxs(_Fragment, { children: [_jsx(Modal.Body, { px: "0", pb: "6", maxH: "750px", overflow: "auto", children: _jsx("div", { dflex: true, flexCol: true, overflow: "auto", children: resources.map(item => (_jsx(ListItem, { label: item.name, value: item.id, "data-id": item.id, checked: selectedResources.includes(`${item.id}`), onClick: handleClick }, item.id))) }) }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isLoading, onClick: onClose, variant: "borderless", me: "2", children: cancelLabel }), _jsx(Button, { type: "submit", disabled: selectedResources.length == 0 || mutation.isLoading /* || !isValid*/, onClick: saveItem, children: saveLabel ? saveLabel : (queryId ? "Update" : "Create") })] })] })), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
+}
+function ListItem({ label, value, checked, ...props }) {
+    return (_jsxs("div", { dflex: true, alignItems: "center", hover_bgColor: "slate-100", px: "5", py: "2", cursor: "pointer", ...props, children: [_jsx("span", { flexGrow: true, children: label }), _jsx(Checkbox, { name: `resources.${value}`, value: value, checked: checked })] }));
+}

package/dist/lib/modal/FormActionDialog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useMutate } from "@compill/api";
+import { ModalLoadingOverlay } from "@compill/components";
+import { SubmitButton, FormRenderer, FormProvider } from "@compill/form";
+import { useApiMutation, useInvalidateParentMutation } from "@compill/api";
+import { Button, Modal } from "@valerya/ui";
+import React from "react";
+export function FormActionDialog({ initialValues, itemLabel, queryId = "", queryKey, queryFn, queryOptions, onSuccess, successMsg, showSuccessMsg, onError, errorMsg, showErrorMsg, processInput, invalidateQueriesOnSuccess = true, cancelLabel = "Cancel", saveLabel = "Send", size = "lg", title, form, show, onClose, formikProps, ...props }) {
+    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(queryFn, queryKey, queryOptions) : useApiMutation(queryFn, queryKey, queryId, queryOptions);
+    const mutate = useMutate(mutation, {
+        onSuccess,
+        successMsg,
+        showSuccessMsg,
+        onError,
+        errorMsg,
+        showErrorMsg,
+        processInput,
+    });
+    return (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "light", transition: true, ...props, children: [_jsx(Modal.Header, { children: title }), _jsxs(FormProvider, { initialValues: initialValues ?? {}, onSubmit: mutate, ...formikProps, children: [_jsxs(Modal.Body, { pb: "6", children: [React.isValidElement(form) && form, Array.isArray(form) && _jsx(FormRenderer, { form: form })] }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isLoading, onClick: onClose, variant: "borderless", me: "2", children: cancelLabel }), _jsx(SubmitButton, { disabled: mutation.isLoading, children: saveLabel })] })] }), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
+}

package/{src → dist}/lib/page/PageContainer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ContainerProps } from "@valerya/ui";
 export declare function PageContainer({ children, ...props }: ContainerProps): JSX.Element;

package/dist/lib/page/PageContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Container } from "@valerya/ui";
+export function PageContainer({ children, ...props }) {
+    return _jsx(Container, { center: true, dflex: true, flexCol: true, gap: "8", ...props, children: children });
+}

package/{src → dist}/lib/page/PageContentEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 export declare function PageContentEditor({ name, ...props }: {
     name: string;

package/dist/lib/page/PageContentEditor.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { FormEditor } from "@compill/form-editor";
+import { PageMain } from "./PageMain";
+import { ImageExtension } from "@compill/editor";
+export function PageContentEditor({ name, ...props }) {
+    const extensions = [ImageExtension];
+    return (_jsx(PageMain, { h: "min", ...props, children: _jsx(FormEditor, { minH: "128", minW: "144", maxW: props.maxW, 
+            // w={props.w}
+            name: name, placeHolder: "Write here...", extensions: extensions }) }));
+}

package/{src → dist}/lib/page/PageMain.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageMain({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageMain.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Tile } from "@valerya/ui";
+export function PageMain({ children, ...props }) {
+    return _jsx(Tile, { scheme: "light", p: "5", ...props, children: children });
+}

package/dist/lib/page/PageQueryStateContainer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { QueryLoadingState, RetryOnError } from "@compill/components";
+import { useApiQuery, useInvalidateQuery } from "@compill/api";
+import React from "react";
+import { PageContainer } from "./PageContainer";
+function PageQueryStateContainerInner({ queryId, api, apiFn, loadingStyles, errorStyles, children, ...props }) {
+    // @ts-ignore
+    const { data, isLoading, isError } = apiFn == "getAll" ? useApiQuery(api.queryKey, api.getAll, props.apiParams) : useApiQuery(api.queryKey, api.get, queryId);
+    const invalidate = useInvalidateQuery(api.queryKey, queryId);
+    if (isLoading)
+        return _jsx(QueryLoadingState, { w: "full", h: "100%", ...loadingStyles });
+    if (isError)
+        return _jsx(RetryOnError, { p: "0", onClick: invalidate, ...errorStyles });
+    return _jsx(PageContainer, { ...props, children: apiFn == "get" ? children(data) : children(data) });
+}
+export const PageQueryStateContainer = React.forwardRef(PageQueryStateContainerInner);

package/{src → dist}/lib/page/PageSectionTitle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSectionTitle({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageSectionTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageSectionTitle({ children, ...props }) {
+    return _jsx("div", { trait: "typo.h6", mb: "5", ...props, children: children });
+}

package/{src → dist}/lib/page/PageSidebar.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSidebar({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageSidebar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageSidebar({ children, ...props }) {
+    return _jsx("div", { w: "112", minW: "112", minH: "100%", gap: "8", dflex: true, flexCol: true, ...props, children: children });
+}

package/{src → dist}/lib/page/PageSidebarSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSidebarSection({ title, children, ...props }: {
     title?: string;

package/dist/lib/page/PageSidebarSection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { PageSectionTitle } from "./PageSectionTitle";
+export function PageSidebarSection({ title, children, ...props }) {
+    return (_jsxs("div", { w: "full", ...props, children: [title && _jsx(PageSectionTitle, { children: title }), children] }));
+}

package/dist/lib/page/PageStateContainer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { QueryLoadingState } from "@compill/components";
+import { Container } from "@valerya/ui";
+import React from "react";
+export const PageStateContainer = React.forwardRef(({ loading = false, children, ...props }, ref) => {
+    return (_jsxs(_Fragment, { children: [loading && _jsx(QueryLoadingState, { w: "full", h: "100%" }), !loading && _jsx(Container, { ref: ref, center: true, size: "x2", dflex: true, flexCol: true, gap: "8", ...props, children: children })] }));
+});

package/{src → dist}/lib/page/PageSubSectionTitle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSubSectionTitle({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageSubSectionTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageSubSectionTitle({ children, ...props }) {
+    return _jsx("div", { trait: "typo.h6", mb: "3", ...props, children: children });
+}

package/{src → dist}/lib/page/PageTitle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageTitle({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageTitle({ children, ...props }) {
+    return _jsx("div", { trait: "typo.h5", ...props, children: children });
+}

package/dist/lib/page/PageTopBar.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { createContext } from "@soperio/react";
+import { PageTitle } from "./PageTitle";
+import React from "react";
+import { createPortal } from "react-dom";
+import { FlexCenter } from "@compill/components";
+import { Breadcrumbs } from "../breadcrumbs/BreadCrumbs";
+export function PageTopBar({ title, breadcrumbs, children, ...props }) {
+    return (_jsxs(FlexCenter, { gap: "3", minH: "9", ...props, children: [title && _jsx(PageTitle, { children: title }), breadcrumbs && _jsx(Breadcrumbs, { breadcrumbs: breadcrumbs }), _jsx("div", { flexGrow: true }), children] }));
+}
+const [CP, usePageTabbedTopBarContext] = createContext();
+export function PageTabbedTopBarProvider({ children }) {
+    const [containerEl, setContainerEl] = React.useState(null);
+    const r = React.createRef();
+    return (_jsx(CP, { value: { containerEl, setContainerEl }, children: children }));
+}
+export function PageTabbedTopBar({ title, breadcrumbs, children, ...props }) {
+    const ref = React.createRef();
+    const { setContainerEl } = usePageTabbedTopBarContext();
+    const [isSet, setIsSet] = React.useState(false);
+    React.useEffect(() => {
+        if (!isSet && ref.current) {
+            setContainerEl(ref.current);
+            setIsSet(true);
+        }
+        return () => setContainerEl(null);
+    }, []);
+    return (_jsx(FlexCenter, { gap: "3", minH: "9", ...props, children: _jsxs(_Fragment, { children: [title && _jsx(PageTitle, { children: title }), breadcrumbs && _jsx(Breadcrumbs, { breadcrumbs: breadcrumbs }), _jsx("div", { flexGrow: true }), _jsx("div", { ref: ref, dflex: true, flexRow: true, gap: "3" }), children] }) }));
+}
+export function PageTopBarToolbar({ trackingRef, children }) {
+    const { containerEl } = usePageTabbedTopBarContext();
+    const [visible, setVisible] = React.useState(false);
+    const portal = React.useMemo(() => {
+        const node = containerEl; //?.ownerDocument.createElement("div")
+        // if (node) node.className = PORTAL_CLASSNAME
+        return node;
+    }, [containerEl]);
+    const host = containerEl ?? (typeof window !== "undefined" ? document.body : undefined);
+    React.useLayoutEffect(() => {
+        if (!portal || !host)
+            return;
+        try {
+            if (visible)
+                host.appendChild(portal);
+            else
+                host.removeChild(portal);
+        }
+        catch (e) {
+        }
+        return () => {
+            try {
+                host.removeChild(portal);
+            }
+            catch (e) { }
+        };
+    }, [visible, portal, host]);
+    const callback = React.useCallback((entries) => {
+        // @ts-ignore
+        setVisible(entries[0].isVisible);
+    }, [children]);
+    React.useEffect(() => {
+        const opts = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0,
+            /* required options*/
+            trackVisibility: true,
+            delay: 100
+        };
+        const observerScroll = new IntersectionObserver(callback, opts);
+        if (trackingRef)
+            observerScroll.observe(trackingRef);
+        return () => observerScroll.disconnect();
+    }, [trackingRef, callback, children]);
+    if (host && portal)
+        return createPortal(children, portal);
+    return null;
+}

package/{src → dist}/lib/status/StatusBadge.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 export declare function StatusBadge({ status, ...props }: {
     status: "draft" | "published";

package/dist/lib/status/StatusBadge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Badge } from "@valerya/ui";
+const labels = {
+    draft: "Draft",
+    published: "Published",
+    pending: "Pending",
+    approved: "Approved",
+    partially_approved: "Partially Approved",
+    rejected: "Rejected"
+};
+const schemes = {
+    draft: "warning",
+    published: "success",
+    pending: "secondary",
+    approved: "success",
+    partially_approved: "warning",
+    rejected: "danger",
+};
+export function StatusBadge({ status, ...props }) {
+    return (_jsx(Badge, { size: "sm", variant: "glass", whiteSpace: "nowrap", rounded: "full", px: "3", scheme: schemes[status], ...props, children: labels[status] }));
+}

package/dist/lib/table/TableColumnButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/table/TableColumnButton.js

@@ -0,0 +1,53 @@
+// import { mdiViewColumn } from "@mdi/js";
+// import { useTableContainerContext } from "./TableContainerContext";
+// import { ColumnDef, ColumnDefResolved } from "@tanstack/react-table";
+// import { ButtonProps } from "@valerya/ui";
+export {};
+// function getColId(column: ColumnDef<any, any>)
+// {
+//     return (column as ColumnDefResolved<any>).accessorKey ?? column.id ?? ""
+// }
+// export function TableColumnButton({ ...props }: ButtonProps)
+// {
+//     const t = useTranslation()
+//     const { columns, isColumnVisible, toggleColumnVisibility } = useTableContainerContext()
+//     const ids = columns.filter(col => isColumnVisible(getColId(col))).map(col => getColId(col))
+//     return (
+//         <Menu isLazy closeOnSelect={false}>
+//             <MenuButton
+//                 as={Button}
+//                 leftIcon={<SVGIcon path={mdiViewColumn} me="-1" w="5" />}
+//                 colorScheme="pink"
+//                 outline="0"
+//                 border="0"
+//                 title={t("toggle-columns-visibility") ?? ""}
+//                 display="flex"
+//                 gap="2"
+//                 alignItems="center"
+//                 placeContent="center"
+//                 {...props}
+//             >
+//                 {ids.length == columns.length && t("columns")}
+//                 {ids.length != columns.length && t("columns-with-count", {visible: ids.length, total: columns.length })}
+//             </MenuButton>
+//             <MenuList minWidth="240px" zIndex={2}>
+//                 <MenuOptionGroup type="checkbox" value={ids}>
+//                     {
+//                         columns.map((col, index) =>
+//                         (
+//                             <MenuItemOption
+//                                 key={getColId(col)}
+//                                 value={getColId(col)}
+//                                 isChecked={isColumnVisible(getColId(col))}
+//                                 onClick={() => toggleColumnVisibility(getColId(col))}
+//                                 isDisabled={col.enableHiding == false}
+//                             >
+//                                 {col.header?.toString() ?? ""}
+//                             </MenuItemOption>
+//                         ))
+//                     }
+//                 </MenuOptionGroup>
+//             </MenuList>
+//         </Menu>
+//     )
+// }

package/{src → dist}/lib/table/TableContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnDef } from "@tanstack/react-table";
 import { TileProps } from "@valerya/ui";
 interface TableContainerProps extends TileProps {

package/dist/lib/table/TableContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { TableContextProvider } from "@compill/table";
+import { TableContainerContextProvider } from "./TableContainerContext";
+export function TableContainer({ initialPageSize, initialVisibleColumns, columns, filtersMethod = "reactRouter", children, ...props }) {
+    return (_jsx("div", { w: "full", dflex: true, flexCol: true, ...props, children: _jsx(TableContextProvider, { initialPageSize: initialPageSize, filtersMethod: filtersMethod, children: _jsx(TableContainerContextProvider, { columns: columns, initialVisibleColumns: initialVisibleColumns, children: children }) }) }));
+}

package/dist/lib/table/TableContainerContext.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import React from "react";
+import { createContext } from "@soperio/react";
+const [provider, useContext] = createContext();
+function getColId(column) {
+    return column.accessorKey ?? column.id;
+}
+function TableContainerContextProvider({ initialVisibleColumns, columns, children }) {
+    const [showFilters, setShowFilters] = React.useState(false);
+    const [showMassActions, setShowMassActions] = React.useState(false);
+    const [visibleColumnIds, setVisibleColumnIds] = React.useState(initialVisibleColumns ?? columns?.map(col => getColId(col)) ?? []);
+    const filteredColumns = columns?.filter(col => visibleColumnIds.includes(getColId(col))) ?? [];
+    const toggleColumnVisibility = React.useCallback((id) => {
+        const index = visibleColumnIds.indexOf(id);
+        if (index > -1) {
+            const newIds = visibleColumnIds.concat();
+            newIds.splice(index, 1);
+            setVisibleColumnIds(newIds);
+        }
+        else {
+            setVisibleColumnIds(visibleColumnIds.concat(id));
+        }
+    }, [visibleColumnIds, setVisibleColumnIds]);
+    const isColumnVisible = React.useCallback((id) => {
+        return visibleColumnIds.includes(id);
+    }, [visibleColumnIds]);
+    const Provider = provider;
+    const value = {
+        showFilters,
+        setShowFilters,
+        showMassActions,
+        setShowMassActions,
+        columns: columns ?? [],
+        filteredColumns,
+        toggleColumnVisibility,
+        isColumnVisible
+    };
+    return _jsx(Provider, { value: value, children: children });
+}
+export { TableContainerContextProvider, useContext as useTableContainerContext };

package/{src → dist}/lib/table/TableCreateButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DialogButtonProps } from "../buttons/DialogButton";
 export declare function TableCreateButton({ icon, children, ...props }: {
     icon?: string;

package/dist/lib/table/TableCreateButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { mdiPlusThick } from "@mdi/js";
+import { Icon } from "@valerya/ui";
+import { ButtonBarDialogButton } from "../layout/ButtonBar";
+export function TableCreateButton({ icon, children, ...props }) {
+    return (_jsxs(ButtonBarDialogButton, { ...props, children: [_jsx(Icon, { path: icon ?? mdiPlusThick }), children] }));
+}

package/{src → dist}/lib/table/TableFilterButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ButtonProps } from "@valerya/ui";
 export declare function TableFilterButton({ ...props }: ButtonProps): JSX.Element;

package/dist/lib/table/TableFilterButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { Icon } from "@valerya/ui";
+import { Button, Popover } from "@valerya/ui";
+import { mdiFilter } from "@mdi/js";
+export function TableFilterButton({ ...props }) {
+    // return <Button scheme="secondary" {...props}><Icon path={mdiFilter} /></Button>
+    return (_jsxs(Popover, { side: "bottom-end", modal: true, children: [_jsx(Button, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", corners: "square", ...props, children: _jsx(Icon, { path: mdiFilter }) }), _jsxs("div", { bgColor: "white", rounded: true, shadow: true, children: [_jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "First Item" }), _jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Second Item" }), _jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Third Item" })] })] }));
+}

package/{src → dist}/lib/table/TableFilters.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormRendererConfig } from "@compill/form";
 interface TableFiltersProps {
     form: FormRendererConfig;

package/dist/lib/table/TableFilters.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useTableContext } from "@compill/table";
+import React from "react";
+import { useTableContainerContext } from "./TableContainerContext";
+import { FieldLabel, FormProvider, FormRenderer, mergeInitialFormValues, SubmitButton } from "@compill/form";
+import { Button, Collapse } from "@valerya/ui";
+import { isEqual } from "es-toolkit";
+export function TableFilters({ form, initialValues, schema, processInput }) {
+    const { showFilters } = useTableContainerContext();
+    const { getFilters, setFilters } = useTableContext();
+    const handleSubmit = React.useCallback((values, actions) => {
+        const params = processInput?.(values) ?? values;
+        if (!isEqual(params, getFilters()))
+            setFilters(params);
+        // setFilters(processInput?.(values) ?? values)
+        actions.setSubmitting(false);
+    }, [setFilters, processInput]);
+    const handleReset = React.useCallback((resetForm) => {
+        setFilters(initialValues);
+        resetForm();
+    }, [setFilters, initialValues]);
+    React.useEffect(() => setFilters(initialValues), []);
+    return (_jsx(Collapse, { in: showFilters, style: { overflow: showFilters ? "initial" : "hidden" }, children: _jsx("div", { p: "8", borderT: "px", borderB: "px", borderColor: "slate-100", children: _jsx(FormProvider, { initialValues: mergeInitialFormValues(getFilters(), initialValues), onSubmit: handleSubmit, validationSchema: schema, enableReinitialize: true, children: (props) => (_jsxs("div", { dflex: true, gap: "3", placeContent: "start", children: [_jsx(FormRenderer, { flexRow: true, w: "auto", form: form }), _jsx(Buttons, { handleReset: () => handleReset(props.resetForm) })] })) }) }) }));
+}
+function Buttons({ handleReset }) {
+    return (_jsxs("div", { dflex: true, gap: "3", children: [_jsxs("div", { dflex: true, flexCol: true, children: [_jsx(FieldLabel, { name: "", label: "\u00A0" }), _jsx(SubmitButton, { children: "Filter" })] }), _jsxs("div", { dflex: true, flexCol: true, children: [_jsx(FieldLabel, { name: "", label: "\u00A0" }), _jsx(Button, { scheme: "neutral", onClick: handleReset, children: "Reset" })] })] }));
+}