mtxuilib 0.1.182 → 0.1.183

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mtxuilib",
 	"private": false,
-	"version": "0.1.182",
+	"version": "0.1.183",
 	"publishConfig": {
 		"access": "public"
 	},

package/dist/common/DebugFormState.d.ts

@@ -1,4 +0,0 @@
-import { UseFormReturn } from "react-hook-form";
-export declare const DebugFormState: (props: {
-    form: UseFormReturn<any>;
-}) => null;

package/dist/common/DebugFormState.js

@@ -1,11 +0,0 @@
-"use client";
-import { useMemo } from "react";
-export const DebugFormState = (props) => {
-    const { form } = props;
-    useMemo(() => {
-        if (form?.formState?.errors && Object.keys(form?.formState?.errors).length > 0) {
-            console.warn("DebugFormState", form?.formState?.errors);
-        }
-    }, [form?.formState?.errors]);
-    return null;
-};

package/dist/common/DeleteComfirm.d.ts

@@ -1,22 +0,0 @@
-import { type PropsWithChildren } from "react";
-import { type StateCreator } from "zustand";
-type MtxFormProps = {
-    open?: boolean;
-};
-type ConfirmCallbackFnType = () => void;
-export interface DeleteConformState extends MtxFormProps {
-    setOpen: (open: boolean) => void;
-    confirmCallback?: ConfirmCallbackFnType;
-    setConfirmCallback: (confirmCallback: ConfirmCallbackFnType) => void;
-}
-export declare const createFormSlice: StateCreator<DeleteConformState, [
-], [
-], DeleteConformState>;
-export declare const DeleteConfirmProvider: (props: PropsWithChildren<MtxFormProps>) => import("react/jsx-runtime").JSX.Element;
-export declare const useDeleteConfirm: () => {
-    show: (props: {
-        callback: () => void;
-    }) => void;
-};
-export declare const DeleteConfirmDlg: () => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/common/DeleteComfirm.js

@@ -1,52 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, } from "react";
-import { createStore, useStore } from "zustand";
-import { immer } from "zustand/middleware/immer";
-import { MtButton } from "../ui/mt/Button";
-import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "../ui/dialog";
-export const createFormSlice = (set, get) => ({
-    setOpen: (open) => set({ open }),
-    setConfirmCallback: (confirmCallback) => set({ confirmCallback }),
-});
-const createDeleteConformStore = (initProps) => {
-    return createStore()(immer((...a) => ({
-        ...createFormSlice(...a),
-        ...initProps,
-    })));
-};
-const formContext = createContext(null);
-export const DeleteConfirmProvider = (props) => {
-    const { children, ...etc } = props;
-    const mystore = useMemo(() => createDeleteConformStore(etc), [etc]);
-    return (_jsxs(formContext.Provider, { value: mystore, children: [children, _jsx(DeleteConfirmDlg, {})] }));
-};
-function useDeleteConfirmStore(selector) {
-    const store = useContext(formContext);
-    if (!store)
-        throw new Error("useDeleteConfirm Missing MtxFormProvider");
-    return useStore(store, selector);
-}
-export const useDeleteConfirm = () => {
-    const setOpen = useDeleteConfirmStore((x) => x.setOpen);
-    const setConfirmCallback = useDeleteConfirmStore((x) => x.setConfirmCallback);
-    const show = useCallback((props) => {
-        setConfirmCallback(props.callback);
-        setOpen(true);
-    }, [setConfirmCallback, setOpen]);
-    return {
-        show,
-    };
-};
-export const DeleteConfirmDlg = () => {
-    const open = useDeleteConfirmStore((x) => x.open);
-    const setOpen = useDeleteConfirmStore((x) => x.setOpen);
-    const confirmCallback = useDeleteConfirmStore((x) => x.confirmCallback);
-    return (_jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: "delete confirm" }), _jsx(DialogDescription, { children: "will delete item, continue?" }), _jsx(MtButton, { variant: "destructive", onClick: async () => {
-                        setOpen(false);
-                        confirmCallback && confirmCallback();
-                    }, children: "Continue" }), _jsx(MtButton, { variant: "outline", onClick: () => {
-                        setOpen(false);
-                        confirmCallback && confirmCallback();
-                    }, children: "Cancel" })] }) }));
-};

package/dist/common/FullCenter.d.ts

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from "react";
-export declare const FullCenter: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/common/FullCenter.js

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const FullCenter = (props) => {
-    const { children } = props;
-    return (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "flex-1", children: children }) }));
-};

package/dist/common/GlobalSearch.d.ts

@@ -1,11 +0,0 @@
-import { type PropsWithChildren } from "react";
-import { type StateCreator } from "zustand";
-type GlobalSearchProps = {};
-export interface GlobalSearchState extends GlobalSearchProps {
-    q?: string;
-    setQ?: (q: string) => void;
-}
-export declare const createFormSlice: StateCreator<GlobalSearchState, [], [], GlobalSearchState>;
-export declare const GlobalSearchProvider: (props: PropsWithChildren<GlobalSearchProps>) => import("react/jsx-runtime").JSX.Element;
-export declare function useGlobalSearch<T>(selector: (state: GlobalSearchState) => T): T;
-export {};

package/dist/common/GlobalSearch.js

@@ -1,25 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
-import { createStore, useStore } from "zustand";
-export const createFormSlice = (set, get) => ({
-    setQ: (q) => set({ q }),
-});
-const createDeleteConformStore = (initProps) => {
-    return createStore()((...a) => ({
-        ...createFormSlice(...a),
-        ...initProps,
-    }));
-};
-const formContext = createContext(null);
-export const GlobalSearchProvider = (props) => {
-    const { children, ...etc } = props;
-    const mystore = useMemo(() => createDeleteConformStore(etc), [etc]);
-    return (_jsx(formContext.Provider, { value: mystore, children: children }));
-};
-export function useGlobalSearch(selector) {
-    const store = useContext(formContext);
-    if (!store)
-        throw new Error("useGlobalSearch Missing GlobalSearchProvider");
-    return useStore(store, selector);
-}

package/dist/common/HtmlChangesObserver.d.ts

@@ -1 +0,0 @@
-export declare function HtmlChangesObserver({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/common/HtmlChangesObserver.js

@@ -1,53 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HtmlDiffer } from "html-differ";
-import { useEffect, useRef } from "react";
-const styles = {
-    none: "background: transparent; color:black",
-    gray: "background: transparent; color: gray",
-    bgGreen: "background: green; color:black",
-    bgRed: "background: red; color:black",
-};
-export function HtmlChangesObserver({ children }) {
-    const targetNode = useRef(null);
-    useEffect(() => {
-        const differ = new HtmlDiffer();
-        let lastHtml = targetNode.current.innerHTML;
-        function observeChanges() {
-            const newHtml = targetNode.current.innerHTML;
-            if (newHtml !== lastHtml) {
-                const diff = differ.diffHtml(lastHtml, newHtml);
-                lastHtml = newHtml;
-                logDiff(diff);
-            }
-            if (running) {
-                requestAnimationFrame(observeChanges);
-            }
-        }
-        let running = true;
-        requestAnimationFrame(observeChanges);
-        return () => {
-            running = false;
-        };
-    }, []);
-    return _jsx("div", { ref: targetNode, children: children });
-}
-function logDiff(diff) {
-    let output = "", styleArr = [];
-    if (diff.length === 1 && !diff[0].added && !diff[0].removed)
-        return output;
-    for (const part of diff) {
-        var index = diff.indexOf(part), partValue = part.value;
-        if (part.added || part.removed) {
-            output += index === 0 ? "\n" : "";
-            output += "%c" + partValue;
-            styleArr.push(part.added ? styles.bgGreen : styles.bgRed);
-        }
-        else {
-            output += index !== 0 ? "" : "\n";
-            output += "%c" + partValue;
-            styleArr.push(styles.gray);
-        }
-    }
-    console.log(performance.now() + "ms DOM changes: " + output, ...styleArr);
-}

package/dist/common/MtImage.d.ts

@@ -1,5 +0,0 @@
-import Image from 'next/image';
-import { ComponentProps } from "react";
-type Props = ComponentProps<typeof Image>;
-export declare const MtImage: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/common/MtImage.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isCloudflarePage } from 'mtxlib/utils';
-import Image from 'next/image';
-const normalizeSrc = (src) => {
-    return src.startsWith('/') ? src.slice(1) : src;
-};
-const cloudflareLoader = ({ src, width, quality }) => {
-    const params = [`width=${width}`];
-    if (quality) {
-        params.push(`quality=${quality}`);
-    }
-    const paramsString = params.join(',');
-    return `https://cfgomtm.yuepa8.com/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
-};
-const exampleImageLoader = ({ src, width, quality }) => {
-    return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
-};
-function getImageLoader() {
-    if (isCloudflarePage()) {
-        return cloudflareLoader;
-    }
-    else {
-        exampleImageLoader;
-    }
-}
-export const MtImage = (props) => {
-    return _jsx(Image, { ...props, loader: getImageLoader() });
-};

package/dist/common/MtProgressBar.d.ts

@@ -1 +0,0 @@
-export declare const MtProgressBar: () => import("react/jsx-runtime").JSX.Element;

package/dist/common/MtProgressBar.js

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AppProgressBar } from "next-nprogress-bar";
-export const MtProgressBar = () => {
-    return _jsx(AppProgressBar, { height: "4px", color: "#4934eb", options: { showSpinner: false }, shallowRouting: true });
-};

package/dist/common/NotFoundGoBack.d.ts

@@ -1 +0,0 @@
-export declare const NotFoundGoBack: () => import("react/jsx-runtime").JSX.Element;

package/dist/common/NotFoundGoBack.js

@@ -1,10 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter } from "next/navigation";
-import { Button } from "../ui/button";
-export const NotFoundGoBack = () => {
-    const router = useRouter();
-    return (_jsxs("div", { className: "container flex flex-col", children: [_jsx("div", { className: "mx-auto p-8", children: "not found" }), _jsx(Button, { className: "mx-auto p-8", onClick: () => {
-                    router.back();
-                }, children: "Go back" })] }));
-};

package/dist/common/SlntTree/Slnt.z.d.ts

@@ -1,28 +0,0 @@
-import { z } from "zod";
-declare const slntTreeNodeBaseSchema: z.ZodObject<{
-    id: z.ZodString;
-    pid: z.ZodOptional<z.ZodString>;
-    label: z.ZodOptional<z.ZodString>;
-    icon: z.ZodOptional<z.ZodString>;
-    routeName: z.ZodOptional<z.ZodString>;
-    routeType: z.ZodOptional<z.ZodEnum<["default", "list", "detail"]>>;
-}, "strip", z.ZodTypeAny, {
-    id: string;
-    label?: string | undefined;
-    icon?: string | undefined;
-    pid?: string | undefined;
-    routeName?: string | undefined;
-    routeType?: "default" | "list" | "detail" | undefined;
-}, {
-    id: string;
-    label?: string | undefined;
-    icon?: string | undefined;
-    pid?: string | undefined;
-    routeName?: string | undefined;
-    routeType?: "default" | "list" | "detail" | undefined;
-}>;
-export type DashMenuTreeItem = z.infer<typeof slntTreeNodeBaseSchema> & {
-    children?: DashMenuTreeItem[];
-};
-export declare const treeNodeSchema: z.ZodType<DashMenuTreeItem>;
-export {};

package/dist/common/SlntTree/Slnt.z.js

@@ -1,13 +0,0 @@
-import { z } from "zod";
-const DashMenuTreeItemRouteType = ["default", "list", "detail"];
-const slntTreeNodeBaseSchema = z.object({
-    id: z.string(),
-    pid: z.string().optional(),
-    label: z.string().optional(),
-    icon: z.string().optional(),
-    routeName: z.string().optional(),
-    routeType: z.enum(DashMenuTreeItemRouteType).optional(),
-});
-export const treeNodeSchema = slntTreeNodeBaseSchema.extend({
-    children: z.lazy(() => treeNodeSchema.array()).optional(),
-});

package/dist/common/SlntTree/SlntChildrenTabs.d.ts

@@ -1 +0,0 @@
-export declare const SlntChildrenTabs: () => import("react/jsx-runtime").JSX.Element;

package/dist/common/SlntTree/SlntChildrenTabs.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { urlJoinPaths } from "mtxlib/http/url";
-import { usePathname, useSelectedLayoutSegment, useSelectedLayoutSegments, } from "next/navigation";
-import { cn } from "../../lib/utils";
-import { MtLink } from "../mtlink";
-import { useMenuTreeStore } from "./SlntTreeNode";
-export const SlntChildrenTabs = () => {
-    const parentData = useMenuTreeStore((x) => x.menuNode);
-    const pathName = usePathname();
-    const segments = useSelectedLayoutSegments();
-    const segment = useSelectedLayoutSegment();
-    const basePath = pathName.slice(0, -segments.join("/").length);
-    const basePath3 = "/" + segments.join("/");
-    return (_jsx("div", { className: "flex gap-1 ", children: parentData?.children?.map((item, i) => {
-            let href = `${urlJoinPaths(basePath, item.routeName || "")}`;
-            if (!segments?.length) {
-                href = urlJoinPaths(pathName, item.routeName || "");
-            }
-            return (_jsx(TabItem, { activate: segment == item.routeName, children: _jsx(MtLink, { variant: "ghost", href: href, children: item.label }, i) }, i));
-        }) }));
-};
-const TabItem = (props) => {
-    const { activate, ...etc } = props;
-    return (_jsx("div", { "data-state": activate && "active", className: cn("ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow"), ...etc }));
-};

package/dist/common/SlntTree/SlntTreeNode.d.ts

@@ -1,19 +0,0 @@
-import { PropsWithChildren } from "react";
-import { DashMenuTreeItem } from "./Slnt.z";
-export type SLNTProps = {
-    menuNode?: DashMenuTreeItem;
-};
-export interface SlntState extends SLNTProps {
-}
-export declare const slntContext: import("react").Context<(Omit<import("zustand").StoreApi<SlntState>, "setState"> & {
-    setState(nextStateOrUpdater: SlntState | Partial<SlntState> | ((state: import("immer").WritableDraft<SlntState>) => void), shouldReplace?: boolean | undefined): void;
-}) | null>;
-type ModalProviderProps = React.PropsWithChildren<SLNTProps>;
-export declare const MenuTreeProvider: (props: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DEFAULT_USE_SHALLOW = true;
-export declare function useMenuTreeStore(): SlntState;
-export declare function useMenuTreeStore<T>(selector: (state: SlntState) => T): T;
-export declare const SlntTreeNode: (props: {
-    treeData?: DashMenuTreeItem;
-} & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/common/SlntTree/SlntTreeNode.js

@@ -1,45 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useSelectedLayoutSegment, useSelectedLayoutSegments, } from "next/navigation";
-import { createContext, useContext, useMemo } from "react";
-import { useStore } from "zustand";
-import { immer } from "zustand/middleware/immer";
-import { useShallow } from "zustand/react/shallow";
-import { createStore } from "zustand/vanilla";
-const createModalStore = (initProps) => {
-    return createStore()(immer((set, get) => ({
-        ...initProps,
-    })));
-};
-export const slntContext = createContext(null);
-export const MenuTreeProvider = (props) => {
-    const { children, ...etc } = props;
-    const mystore = useMemo(() => createModalStore(etc), [etc]);
-    return (_jsx(slntContext.Provider, { value: mystore, children: children }));
-};
-export const DEFAULT_USE_SHALLOW = true;
-export function useMenuTreeStore(selector) {
-    const store = useContext(slntContext);
-    if (!store)
-        return null;
-    if (selector) {
-        return useStore(store, DEFAULT_USE_SHALLOW ? useShallow(selector) : selector);
-    }
-    return useStore(store);
-}
-export const SlntTreeNode = (props) => {
-    const { children, treeData } = props;
-    const parentData = useMenuTreeStore((x) => x?.menuNode);
-    const segment = useSelectedLayoutSegment();
-    const segments = useSelectedLayoutSegments();
-    const parent = parentData || treeData;
-    if (!parent) {
-        throw new Error("must within parentNodes or rootNodes ");
-    }
-    const currNode = useMemo(() => {
-        const fined = parent.children?.find((x) => x.routeName == segment);
-        console.log({ message: `(SlntTreeNode)${segment}`, fined, parent });
-        return fined;
-    }, [parent, segment]);
-    return (_jsx(MenuTreeProvider, { menuNode: currNode, children: children }));
-};

package/dist/common/TrpcQuery.js

@@ -1 +0,0 @@
-"use strict";

package/dist/common/devtools/DebugValue.d.ts

@@ -1,5 +0,0 @@
-export declare const DebugValue: (props: {
-    title?: string;
-    data: any;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/common/devtools/DebugValue.js

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogContent, DialogTrigger } from "../../ui/dialog";
-import { MtButton } from "../../ui/mt/Button";
-export const DebugValue = (props) => {
-    const { title, data, className } = props;
-    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(MtButton, { variant: "outline", className: className, children: title || "debug" }) }), _jsx(DialogContent, { className: "max-h-lvh w-full overflow-scroll bg-red-100", children: _jsx("pre", { className: " text-xs", children: JSON.stringify(data, null, 2) }) })] }));
-};

package/dist/common/devtools/DevTools.d.ts

@@ -1,2 +0,0 @@
-export declare const HOTKEY_Debug = "alt+.";
-export declare const DevTools: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/common/devtools/DevTools.js

@@ -1,24 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import dynamic from "next/dynamic";
-import { useHotkeys } from "react-hotkeys-hook";
-import { useMtapp } from "../../mtapp/MtAppProvider";
-import { TailwindIndicator } from "../tailwind-indicator";
-const ReactQueryDevtoolsProduction = dynamic(() => import("@tanstack/react-query-devtools/build/modern/production.js").then((d) => ({
-    default: d.ReactQueryDevtools,
-})), {
-    ssr: false,
-});
-export const HOTKEY_Debug = "alt+.";
-export const DevTools = () => {
-    const debug = useMtapp((x) => x.debug);
-    const setDebug = useMtapp((x) => x.setDebug);
-    useHotkeys(HOTKEY_Debug, () => {
-        console.log("debug2:%o", !debug);
-        setDebug(!debug);
-    }, [debug, setDebug]);
-    if (!debug) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(ReactQueryDevtoolsProduction, { buttonPosition: "bottom-right" }), _jsx(TailwindIndicator, {})] }));
-};

package/dist/common/markdown.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-import { Options } from 'react-markdown';
-export declare const MemoizedReactMarkdown: FC<Options>;

package/dist/common/markdown.js

@@ -1,4 +0,0 @@
-import { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
-export const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children &&
-    prevProps.className === nextProps.className);

package/dist/common/mtlink.d.ts

@@ -1,14 +0,0 @@
-import { VariantProps } from "class-variance-authority";
-import Link from "next/link";
-import React, { ComponentProps } from "react";
-import { buttonVariants } from "../ui/button";
-export interface TMtLinkProps extends ComponentProps<typeof Link>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
-export declare const MtLink: React.ForwardRefExoticComponent<Omit<TMtLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-type ExternalLinkProps = ComponentProps<"a">;
-interface TExternalLink extends ExternalLinkProps {
-    children?: React.ReactNode;
-}
-export declare function MtExternalLink({ children, className, ...props }: TExternalLink): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/common/mtlink.js

@@ -1,15 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import Link from "next/link";
-import React from "react";
-import { cn } from "../lib/utils";
-import { buttonVariants } from "../ui/button";
-export const MtLink = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : Link;
-    return (_jsx(Comp, { className: cn(((variant) && buttonVariants({ variant: variant, className }))), ref: ref, ...props }));
-});
-MtLink.displayName = "MtLink";
-export function MtExternalLink({ children, className, ...props }) {
-    return (_jsx("a", { className: cn(className, "hover:text-brandtext-500 hover:underline hover:brightness-150"), rel: "noopener noreferrer", ...props, children: children }));
-}

package/dist/common/pip/PipExamplePage.d.ts

@@ -1 +0,0 @@
-export default function PipExamplePage(): import("react/jsx-runtime").JSX.Element;

package/dist/common/pip/PipExamplePage.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import ReactDocumentPictureInPicture from "mtxuilib/common/pip/ReactDocumentPictureInPicture";
-import { MtButton } from "mtxuilib/ui/mt/Button";
-import { useRef, useState } from "react";
-export default function PipExamplePage() {
-    const pipWindowRef = useRef(null);
-    return (_jsx(_Fragment, { children: _jsx(ReactDocumentPictureInPicture, { ref: pipWindowRef, width: "50%", height: "100%", buttonRenderer: ({ open, close, toggle, isOpen }) => (_jsxs("div", { className: "flex gap-2", children: [_jsxs("b", { children: ["Is ", isOpen ? "Open" : "Closed", " "] }), _jsx(MtButton, { onClick: open, children: "Open" }), _jsx(MtButton, { onClick: close, children: "Close" }), _jsx(MtButton, { onClick: toggle, children: "Toggle" })] })), children: _jsx(Comp, { pipWindowRef: pipWindowRef }) }) }));
-}
-const Comp = (props) => {
-    const { pipWindowRef } = props;
-    const [text, setText] = useState("tet1");
-    return (_jsxs("div", { className: "prose", children: [_jsx("h1", { children: "\u753B\u4E2D\u753B\u663E\u793A\uFF08\u8303\u4F8B\uFF09" }), _jsxs("div", { children: [_jsx("button", { onClick: () => {
-                            console.log("关闭");
-                            setText("ssssssssssssssss");
-                        }, children: "sssss" }), _jsxs(MtButton, { onClick: () => {
-                            console.log("关闭");
-                            setText("ssssssssssssssss");
-                        }, children: ["\u5173\u95ED333 ", text] })] }), _jsx("i", { children: "This text should be displayed in a Document Picture in Picture filling the maximum allow height and 50% of the width of the original window" })] }));
-};

package/dist/common/pip/ReactDocumentPictureInPicture.d.ts

@@ -1,28 +0,0 @@
-import { ReactNode } from "react";
-export type ReactDocumentPictureInPictureForwardRefType = {
-    window: () => Window | undefined;
-    isOpen: boolean;
-    close: () => void;
-};
-export declare enum FeatureUnavailableReasonEnum {
-    USING_UNSECURE_PROTOCOL = "USING_UNSECURE_PROTOCOL",
-    API_NOT_SUPPORTED = "API_NOT_SUPPORTED"
-}
-export type ReactDocumentPictureInPicturePropsType = {
-    width?: string | number;
-    height?: string | number;
-    shareStyles?: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
-    onResize?: (width: number, height: number) => void;
-    featureUnavailableRenderer?: ReactNode | ((reason: FeatureUnavailableReasonEnum) => ReactNode);
-    buttonRenderer?: ReactNode | ((props: {
-        open: () => void;
-        close: () => void;
-        toggle: () => void;
-        isOpen: boolean;
-    }) => ReactNode);
-    children?: ReactNode;
-};
-declare const ReactDocumentPictureInPicture: import("react").ForwardRefExoticComponent<ReactDocumentPictureInPicturePropsType & import("react").RefAttributes<ReactDocumentPictureInPictureForwardRefType>>;
-export default ReactDocumentPictureInPicture;