@rnaga/wp-next-ui 1.0.1

package/hooks/use-media-selector.js

@@ -0,0 +1,33 @@
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+export const useMediaSelector = () => {
+    const { globalState } = useWP();
+    const selector = globalState.get("media-selector-modal");
+    const open = (...args) => {
+        const onSelected = args.length === 1 ? args[0] : args[1];
+        const mimeTypes = args.length === 1 ? undefined : args[0];
+        globalState.set({
+            "media-selector-modal": {
+                open: true,
+                onSelected,
+                mimeTypes,
+            },
+        });
+    };
+    const close = () => {
+        globalState.set({
+            "media-selector-modal": {
+                open: false,
+                onSelected: undefined,
+            },
+        });
+    };
+    const select = (post) => {
+        selector?.onSelected && selector.onSelected(post);
+    };
+    return {
+        open,
+        close,
+        select,
+        isOpen: selector?.open ?? false,
+    };
+};

package/hooks/use-mouse-move.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    onDeltaChange: (e: MouseEvent, delta: {
+        x: number;
+        y: number;
+    }) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onContextMenu?: (e: MouseEvent) => void;
+    onClick?: (e: MouseEvent) => void;
+    threshold?: number;
+    debounceTime?: number;
+    cursor?: string;
+}
+export declare const useMouseMove: ({ onDeltaChange, onMouseUp, onMouseDown, onContextMenu, onClick, threshold, debounceTime, cursor, }: Props) => {
+    initMouseMove: (elementOrRef: HTMLElement | React.RefObject<HTMLElement | null>) => (e: React.MouseEvent) => void;
+};
+export {};
+//# sourceMappingURL=use-mouse-move.d.ts.map

package/hooks/use-mouse-move.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mouse-move.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mouse-move.ts"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,GAAI,qGAS1B,KAAK;kCA2DU,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,MAKvD,GAAG,KAAK,CAAC,UAAU;CA0E9B,CAAC"}

package/hooks/use-mouse-move.js

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react";
+export const useMouseMove = ({ onDeltaChange, onMouseUp, onMouseDown, onContextMenu, onClick, threshold = 0.5, debounceTime = 500, cursor = "grabbing", // Default cursor
+ }) => {
+    const elementRef = useRef(null);
+    const eventStateRef = useRef(null);
+    const clickDurationTimerRef = useRef(0);
+    const handleMouseMove = (e) => {
+        //const target = e.target as HTMLElement;
+        e.stopPropagation();
+        e.preventDefault();
+        const state = eventStateRef.current;
+        if (!state || !state.isMouseDown)
+            return;
+        const deltaX = e.clientX - (state.initialX ?? e.clientX);
+        const deltaY = e.clientY - (state.initialY ?? e.clientY);
+        if (Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold) {
+            onDeltaChange(e, { x: deltaX, y: deltaY });
+            state.initialX = e.clientX;
+            state.initialY = e.clientY;
+        }
+    };
+    const handleMouseUp = (e) => {
+        const state = eventStateRef.current;
+        if (state?.isMouseDown) {
+            const clickDuration = Date.now() - clickDurationTimerRef.current;
+            // Check if the click duration is less than 150ms, then it's a click
+            if (clickDuration < 150) {
+                // Call the onClick handler
+                onClick?.(e);
+            }
+            else if (onMouseUp) {
+                onMouseUp(e);
+            }
+            state.isMouseDown = false;
+            state.initialX = null;
+            state.initialY = null;
+            // Remove the overlay
+            if (state.overlay) {
+                state.overlay.removeEventListener("mousemove", handleMouseMove);
+                state.overlay.removeEventListener("mouseup", handleMouseUp);
+                document.body.removeChild(state.overlay);
+                state.overlay = null;
+            }
+            eventStateRef.current = null;
+        }
+    };
+    const initMouseMove = (elementOrRef) => {
+        elementRef.current =
+            elementOrRef instanceof HTMLElement ? elementOrRef : elementOrRef.current;
+        return (e) => {
+            const element = elementOrRef instanceof HTMLElement
+                ? elementOrRef
+                : elementOrRef.current;
+            if (!element)
+                return;
+            clickDurationTimerRef.current = Date.now(); // milliseconds
+            if (onMouseDown) {
+                onMouseDown(e);
+            }
+            let state = eventStateRef.current;
+            if (!state) {
+                state = {
+                    isMouseDown: false,
+                    initialX: null,
+                    initialY: null,
+                };
+                eventStateRef.current = state;
+            }
+            state.isMouseDown = true;
+            state.initialX = e.clientX;
+            state.initialY = e.clientY;
+            // Create and show the overlay
+            if (!state.overlay) {
+                const overlay = document.createElement("div");
+                overlay.style.position = "fixed";
+                overlay.style.top = "0";
+                overlay.style.left = "0";
+                overlay.style.width = "100vw";
+                overlay.style.height = "100vh";
+                overlay.style.zIndex = "2000";
+                overlay.style.cursor = cursor;
+                overlay.style.background = "transparent"; // Keep transparent
+                document.body.appendChild(overlay);
+                state.overlay = overlay;
+                // Attach global mousemove and mouseup to the overlay
+                overlay.addEventListener("mousemove", handleMouseMove);
+                overlay.addEventListener("mouseup", handleMouseUp);
+                if (onContextMenu) {
+                    overlay.addEventListener("contextmenu", onContextMenu);
+                }
+                eventStateRef.current = state;
+            }
+        };
+    };
+    useEffect(() => {
+        return () => {
+            // Cleanup overlays and event listeners on unmount
+            const state = eventStateRef.current;
+            if (state?.overlay) {
+                state.overlay.removeEventListener("mousemove", handleMouseMove);
+                state.overlay.removeEventListener("mouseup", handleMouseUp);
+                if (onContextMenu) {
+                    state.overlay.removeEventListener("contextmenu", onContextMenu);
+                }
+                if (state.overlay && state.overlay.parentNode === document.body) {
+                    document.body.removeChild(state.overlay);
+                }
+            }
+        };
+    }, []);
+    return { initMouseMove };
+};

package/hooks/use-scheme-toggle.d.ts

@@ -0,0 +1,6 @@
+export declare const useSchemeToggle: () => {
+    mode: "dark" | "light" | "system";
+    toggle: () => void;
+    updateMode: (value: "light" | "dark") => void;
+};
+//# sourceMappingURL=use-scheme-toggle.d.ts.map

package/hooks/use-scheme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scheme-toggle.d.ts","sourceRoot":"","sources":["../../src/hooks/use-scheme-toggle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;wBAWC,OAAO,GAAG,MAAM;CAK5C,CAAC"}

package/hooks/use-scheme-toggle.js

@@ -0,0 +1,16 @@
+import { useColorScheme as useMaterialColorScheme } from "@mui/material/styles";
+export const useSchemeToggle = () => {
+    const { mode: muiMode, setMode: setMaterialMode } = useMaterialColorScheme();
+    const toggle = () => {
+        if (muiMode === "light") {
+            setMaterialMode("dark");
+        }
+        else {
+            setMaterialMode("light");
+        }
+    };
+    const updateMode = (value) => {
+        setMaterialMode(value);
+    };
+    return { mode: muiMode, toggle, updateMode };
+};

package/hooks/use-viewport.d.ts

@@ -0,0 +1,5 @@
+export declare const useViewport: () => {
+    isMobile: boolean;
+    isDesktop: boolean;
+};
+//# sourceMappingURL=use-viewport.d.ts.map

package/hooks/use-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport.d.ts","sourceRoot":"","sources":["../../src/hooks/use-viewport.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;CAOvB,CAAC"}

package/hooks/use-viewport.js

@@ -0,0 +1,9 @@
+import { useMediaQuery } from "@mui/material";
+export const useViewport = () => {
+    const isUpMd = useMediaQuery((theme) => theme?.breakpoints.up("md"));
+    const viewport = {
+        isMobile: !isUpMd,
+        isDesktop: isUpMd,
+    };
+    return viewport;
+};

package/list/ListGrid.d.ts

@@ -0,0 +1,12 @@
+export declare const ListGridTitle: (props: {
+    title: string;
+    defaultTitle?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ListGrid: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ListGridItem: (props: {
+    title: string;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListGrid.d.ts.map

package/list/ListGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListGrid.d.ts","sourceRoot":"","sources":["../../src/list/ListGrid.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,GAAI,OAAO;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,4CASA,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAM5D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAaA,CAAC"}

package/list/ListGrid.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid } from "@mui/material";
+import { AccordionSummary } from "../Accordion";
+import { Typography } from "../Typography";
+export const ListGridTitle = (props) => {
+    const { title, defaultTitle = "(No Title)" } = props;
+    return (_jsx(AccordionSummary, { children: _jsx(Typography, { sx: { wordWrap: "break-word", maxWidth: "90%" }, children: title || defaultTitle }) }));
+};
+export const ListGrid = (props) => {
+    return (_jsx(Grid, { container: true, rowSpacing: 1, sx: { width: "100%", mt: 2 }, children: props.children }));
+};
+export const ListGridItem = (props) => {
+    const { title, children } = props;
+    return (_jsxs(_Fragment, { children: [" ", _jsx(Grid, { size: { xs: 3 }, children: _jsx(Typography, { sx: { fontWeight: 600 }, children: title }) }), _jsx(Grid, { size: { xs: 9 }, children: _jsx(Typography, { component: "span", children: children }) })] }));
+};

package/list/ListTable.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties, ReactNode } from "react";
+import { SxProps } from "@mui/material";
+export declare const Table: (props: {
+    children: ReactNode;
+    sx?: SxProps | undefined;
+    stripe?: "even" | "odd" | "none" | undefined;
+    ariaLabel?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const THead: (props: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: (props: {
+    show?: boolean;
+    viewport?: "desktop" | "mobile";
+    children?: React.ReactNode;
+    style?: CSSProperties | undefined;
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Td: (props: {
+    show?: boolean;
+    viewport?: "desktop" | "mobile";
+    children: React.ReactNode;
+    style?: CSSProperties | undefined;
+    size?: "small" | "medium" | "large";
+    colSpan?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SortableTh: (props: {
+    name: string | ReactNode;
+    orderby: string;
+    viewport?: "desktop" | "mobile";
+    show?: boolean;
+    style?: CSSProperties | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Tr: (props: {
+    children: ReactNode;
+    style?: CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionTd: (props: {
+    viewport?: "desktop" | "mobile";
+    style?: CSSProperties | undefined;
+    children: ReactNode[];
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListTable.d.ts.map

package/list/ListTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListTable.d.ts","sourceRoot":"","sources":["../../src/list/ListTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,SAAS,EAGV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAa,OAAO,EAAE,MAAM,eAAe,CAAC;AAmCnD,eAAO,MAAM,KAAK,GAAI,OAAO;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAiBA,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAMnD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,OAAO;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB,4CAmCA,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,OAAO;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,4CAsCA,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO;IAChC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACnC,4CAkDA,CAAC;AAMF,eAAO,MAAM,EAAE,GAAI,OAAO;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,4CAqBvE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO;IAC9B,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,4CAwBA,CAAC"}

package/list/ListTable.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, } from "react";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import { Box, Link } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import MuiTable from "@mui/material/Table";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import { useWPTheme } from "../ThemeRegistry";
+import { useNavigation } from "@rnaga/wp-next-core/client/hooks/use-navigation";
+import { useViewport } from "../hooks/use-viewport";
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+    // backgroundColor: theme.palette.common.black,
+    // color: theme.palette.common.white,
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14,
+    },
+}));
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    "&:nth-of-type(even)": {
+        backgroundColor: theme.palette.action.hover,
+    },
+    // hide last border
+    "&:last-child td, &:last-child th": {
+        border: 0,
+    },
+    // Apply left padding to the first cell of every row
+    "& td:first-of-type, & th:first-of-type": {
+        paddingLeft: 10,
+    },
+}));
+export const Table = (props) => {
+    const { sx, stripe, ariaLabel } = props;
+    return (_jsx(MuiTable
+    // stripe={stripe ?? "odd"}
+    , { 
+        // stripe={stripe ?? "odd"}
+        sx: {
+            // "& th": (theme) => theme.variants.soft.neutral,
+            borderCollapse: "collapse",
+            "& *": {
+                wordWrap: "break-word",
+            },
+            ...sx,
+        }, children: props.children }));
+};
+export const THead = (props) => {
+    return (_jsx(TableHead, { children: _jsx(StyledTableRow, { children: props.children }) }));
+};
+export const Th = (props) => {
+    const { viewport, show = true, children, style = {}, ...rest } = props;
+    const currentViewport = useViewport();
+    const { wpTheme } = useWPTheme();
+    if (!show ||
+        (viewport &&
+            ((viewport == "mobile" && !currentViewport.isMobile) ||
+                (viewport == "desktop" && !currentViewport.isDesktop)))) {
+        return null;
+    }
+    return (_jsx(StyledTableCell, { sx: {
+            [`&.${tableCellClasses.head}`]: {
+                backgroundColor: wpTheme.table.header.backgroundColor, //(theme) => theme.palette.common.black,
+                color: wpTheme.table.header.color, //(theme) => theme.palette.common.white,
+                px: 0,
+                py: 1.5,
+                mb: 1,
+                fontWeight: "bold",
+                // For the first cell
+                "&:first-of-type": {
+                    pl: 1,
+                },
+            },
+        }, style: { ...style, overflowWrap: "break-word" }, ...rest, children: children }));
+};
+export const Td = (props) => {
+    const { show = true, viewport, children, style = {}, size = "small", colSpan = 1, ...rest } = props;
+    const currentViewport = useViewport();
+    if (!show ||
+        (viewport &&
+            ((viewport == "mobile" && !currentViewport.isMobile) ||
+                (viewport == "desktop" && !currentViewport.isDesktop)))) {
+        return null;
+    }
+    return (_jsx(StyledTableCell, { colSpan: colSpan, style: {
+            overflowWrap: "break-word",
+            padding: 2,
+            maxWidth: 250,
+            ...style,
+        },
+        ...rest, children: children }));
+};
+export const SortableTh = (props) => {
+    const { updateRouter, queryObject } = useNavigation();
+    const { wpTheme } = useWPTheme();
+    return (_jsx(Th, { show: props.show, style: { ...props.style, alignItems: "center" }, viewport: props.viewport, children: _jsx(Link, { component: "button", underline: "none", onClick: () => updateRouter({
+                orderby: props.orderby,
+                order: queryObject.orderby !== props.orderby ||
+                    queryObject.order == "asc"
+                    ? "desc"
+                    : "asc",
+            }), sx: {
+                "&:hover": {
+                    backgroundColor: wpTheme.text.linkHoverColor,
+                },
+            }, children: _jsxs(Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    width: "100%",
+                    justifyContent: "space-between",
+                }, children: [props.name, " ", queryObject.orderby !== props.orderby ? (_jsx(ArrowDropDownIcon, {})) : queryObject.order === "desc" ? (_jsx(ArrowDropDownIcon, {})) : (_jsx(ArrowDropUpIcon, {}))] }) }) }));
+};
+const TableContext = createContext({
+    mouseOver: false,
+});
+export const Tr = (props) => {
+    const { children, style } = props;
+    const [mouseOver, setMouseOver] = useState(false);
+    return (_jsx(TableContext.Provider, { value: { mouseOver }, children: _jsx(StyledTableRow, { sx: {
+                verticalAlign: "top",
+                borderBottom: "10px solid transparent",
+                ...style,
+            }, onMouseOver: () => {
+                setMouseOver(true);
+            }, onMouseLeave: () => setMouseOver(false), children: children }) }));
+};
+export const ActionTd = (props) => {
+    let { viewport = "desktop", style, children } = props;
+    const currentViewport = useViewport();
+    const { mouseOver } = useContext(TableContext);
+    if ((viewport == "mobile" && !currentViewport.isMobile) ||
+        (viewport == "desktop" && !currentViewport.isDesktop)) {
+        return null;
+    }
+    const show = viewport == "mobile" || mouseOver;
+    const [first, ...rest] = children;
+    children = show ? children : children?.filter((item, index) => index === 0);
+    return (_jsxs("td", { style: { ...style }, children: [first, _jsx(Box, { sx: { minHeight: 20 }, children: show ? rest : "" })] }));
+};

package/list/Pagination.d.ts

@@ -0,0 +1,5 @@
+import type * as wpTypes from "@rnaga/wp-node/types";
+export declare const Pagination: (props: {
+    pagination?: wpTypes.crud.Pagination;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

package/list/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/list/Pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,UAAU,GAAI,OAAO;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAA;CAAE,4CAuCzE,CAAC"}

package/list/Pagination.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Pagination as MuiPagination } from "@mui/material";
+import { Typography } from "../Typography";
+import { Viewport } from "../Viewport";
+import { useNavigation } from "@rnaga/wp-next-core/client/hooks/use-navigation";
+export const Pagination = (props) => {
+    const { pagination } = props;
+    const { queryObject, updateRouter } = useNavigation();
+    if (!pagination) {
+        return null;
+    }
+    const total = pagination?.totalPage ?? 0;
+    const count = pagination.count ?? 0;
+    const page = !queryObject.page ? 1 : parseInt(queryObject.page?.toString());
+    return (_jsxs(Box, { sx: (theme) => ({
+            display: "flex",
+            gap: 1,
+            justifyContent: "flex-end",
+            alignItems: "center",
+            [theme.breakpoints.down("md")]: {
+                justifyContent: "center",
+            },
+        }), children: [_jsx(Viewport, { device: "desktop", children: _jsxs(Typography, { bold: true, children: [count, " items"] }) }), _jsx(Box, { sx: { maxHeight: 30 }, children: _jsx(MuiPagination, { page: page, count: total, siblingCount: 0, onChange: (e, page) => updateRouter({ page }), variant: "outlined", shape: "rounded" }) })] }));
+};

package/list/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ListGrid";
+export * from "./Pagination";
+export * from "./ListTable";
+//# sourceMappingURL=index.d.ts.map

package/list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/list/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}

package/list/index.js

@@ -0,0 +1,3 @@
+export * from "./ListGrid";
+export * from "./Pagination";
+export * from "./ListTable";

package/media/MediaGridForm.d.ts

@@ -0,0 +1,5 @@
+import * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const MediaGridForm: (props?: Partial<{
+    onChange: (post: Partial<wpCoreTypes.actions.Post>) => void;
+}>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaGridForm.d.ts.map

package/media/MediaGridForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaGridForm.d.ts","sourceRoot":"","sources":["../../src/media/MediaGridForm.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAUzD,eAAO,MAAM,aAAa,GACxB,QAAQ,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CAC7D,CAAC,4CAuPH,CAAC"}

package/media/MediaGridForm.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import CheckIcon from "@mui/icons-material/Check";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { Box, Grid, IconButton, Tooltip } from "@mui/material";
+import { Input } from "../Input";
+import { Typography } from "../Typography";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { mediaMetakeys } from "@rnaga/wp-next-core/client/utils/media";
+import { useWP } from "@rnaga/wp-next-core/client/wp";
+export const MediaGridForm = (props) => {
+    const { onChange } = props ?? {};
+    const { error, globalState } = useWP();
+    const { actions, safeParse, parse } = useServerActions();
+    //const { setFormData } = useFormData<wpTypes.trx.PostUpsert>("post");
+    const mediaTargetItemState = globalState.get("media-target-item");
+    const post = mediaTargetItemState?.post;
+    const [metas, setMetas] = useState();
+    const [canEdit, setCanEdit] = useState(false);
+    const [actionStateText, setActionStateText] = useState();
+    const [guidCopied, setGuidCopied] = useState(false);
+    const setActionState = (text) => {
+        if (text == "Saved") {
+            setActionStateText("Saved");
+            setTimeout(() => {
+                setActionStateText(undefined);
+            }, 2000);
+            return;
+        }
+        setActionStateText(text);
+    };
+    useEffect(() => {
+        if (!post?.ID)
+            return;
+        const postId = post.ID;
+        actions.meta
+            .get("post", postId, mediaMetakeys)
+            .then((response) => {
+            const [metas] = parse(response);
+            setMetas(metas);
+        });
+        Promise.all([
+            actions.user.can("edit_posts"),
+            actions.user.can("edit_post", postId),
+        ]).then((responses) => {
+            if (responses.filter((response) => true === safeParse(response).data)
+                .length > 0) {
+                setCanEdit(true);
+                actions.post.get(postId).then((response) => {
+                    const result = safeParse(response);
+                    if (!result.success || result.data.post_status !== "inherit") {
+                        error.throw("You cannot edit this item because it is not a valid item.");
+                        return;
+                    }
+                    //setFormData(response.data);
+                    onChange?.(response.data);
+                });
+            }
+        });
+    }, [post?.ID]);
+    const handleUpdate = (...args) => {
+        const [postId, data] = args;
+        setActionState("Saving...");
+        actions.media
+            .update(postId, data)
+            .then((response) => {
+            const result = safeParse(response);
+            if (result.success && post) {
+                globalState.set("media-target-item", {
+                    post: { ...post, ...data },
+                });
+            }
+        })
+            .finally(() => {
+            setActionState("Saved");
+        });
+    };
+    const handleAltUpdate = (value) => {
+        if (!post?.ID)
+            return;
+        const postId = post.ID;
+        setActionState("Saving...");
+        actions.media
+            .updateAlt(postId, value)
+            .then((response) => {
+            const result = safeParse(response);
+            if (result.success && metas) {
+                setMetas({
+                    ...metas,
+                    _wp_attachment_image_alt: value,
+                });
+            }
+        })
+            .finally(() => {
+            setActionState("Saved");
+        });
+    };
+    if (!post) {
+        return null;
+    }
+    return (_jsxs(Grid, { container: true, spacing: 2, sx: {
+            flexGrow: 1,
+        }, children: [_jsx(Grid, { size: { xs: 12 }, sx: { position: "absolute" }, children: _jsx(Box, { sx: {
+                        position: "relative",
+                        top: -30,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        mx: 2,
+                    }, children: _jsx(Typography, { children: actionStateText }) }) }), _jsx(Grid, { size: { xs: 4 }, children: _jsx(Typography, { children: "Alternative Text" }) }), _jsx(Grid, { size: { xs: 8 }, children: _jsx(Input, { size: "medium", multiline: true, minRows: 3, maxRows: 3, value: metas?._wp_attachment_image_alt, onBlur: (value) => canEdit && handleAltUpdate(value), disabled: !canEdit, sx: {
+                        width: "100%",
+                    } }, "alt-text") }), _jsx(Grid, { size: { xs: 4 }, children: _jsx(Typography, { children: "Title" }) }), _jsx(Grid, { size: { xs: 8 }, children: _jsx(Input, { size: "medium", value: post?.post_title, onBlur: (value) => canEdit && handleUpdate(post.ID, { post_title: value }), disabled: !canEdit, sx: { width: "100%" } }, "title") }), _jsx(Grid, { size: { xs: 4 }, children: _jsx(Typography, { children: "Caption" }) }), _jsx(Grid, { size: { xs: 8 }, children: _jsx(Input, { size: "medium", multiline: true, minRows: 2, maxRows: 2, value: post?.post_excerpt, disabled: !canEdit, onBlur: (value) => canEdit &&
+                        handleUpdate(post.ID, {
+                            post_excerpt: value,
+                        }), sx: { width: "100%" } }, "excerpt") }), _jsx(Grid, { size: { xs: 4 }, children: _jsx(Typography, { children: "Description" }) }), _jsx(Grid, { size: { xs: 8 }, children: _jsx(Input, { size: "medium", multiline: true, minRows: 2, maxRows: 2, value: post?.post_content, disabled: !canEdit, onBlur: (value) => canEdit &&
+                        handleUpdate(post.ID, {
+                            post_content: value,
+                        }), sx: { width: "100%" } }, "description") }), _jsxs(Grid, { size: { xs: 4 }, sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                }, children: [_jsx(Typography, { children: "File URL" }), guidCopied ? (_jsx(CheckIcon, {})) : (_jsx(Tooltip, { title: "Copy to clipboard", placement: "top", children: _jsx(IconButton, { size: "small", onClick: () => {
+                                navigator.clipboard.writeText(post.guid);
+                                setGuidCopied(true);
+                                setTimeout(() => {
+                                    setGuidCopied(false);
+                                }, 1000);
+                            }, children: _jsx(ContentCopyIcon, {}) }) }))] }), _jsx(Grid, { size: { xs: 8 }, children: _jsx(Input, { disabled: true, size: "medium", value: post?.guid, sx: { width: "100%" } }, "title") })] }));
+};

package/media/MediaThumbnail.d.ts

@@ -0,0 +1,4 @@
+export declare const MediaThumbnail: (props: {
+    uri: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaThumbnail.d.ts.map

package/media/MediaThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaThumbnail.d.ts","sourceRoot":"","sources":["../../src/media/MediaThumbnail.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,4CAuBpD,CAAC"}