@j2inn/fin5-ui-utils 8.1.1-beta.6 → 8.1.1

package/dist_es/react/components/graphics/GraphicViewer.d.ts

@@ -1,10 +1,10 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-interface GraphicViewerProps {
-    projectName?: string;
-    graphicId: HRef;
-    targetRef: HRef;
-    className?: string;
-}
-export declare const GraphicViewer: React.FC<GraphicViewerProps>;
-export {};
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicViewerProps {
+    projectName?: string;
+    graphicId: HRef;
+    targetRef: HRef;
+    className?: string;
+}
+export declare const GraphicViewer: React.FC<GraphicViewerProps>;
+export {};

package/dist_es/react/components/graphics/GraphicViewer.js

@@ -1,23 +1,23 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-import cn from 'classnames';
-import React from 'react';
-import { createUseStyles } from 'react-jss';
-import { fin5Top } from '../../../fin5Top/fin5Top';
-const useStyles = createUseStyles({
-    iframe: {
-        width: '100%',
-        height: '100%',
-        border: 0,
-        overflow: 'hidden',
-    },
-});
-export const GraphicViewer = ({ projectName = fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
-    const classes = useStyles();
-    const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
-    url.hash = `targetRef=${targetRef.toAxon()}`;
-    url.searchParams.set('projectRef', graphicId.toAxon());
-    return (React.createElement("iframe", { id: graphicId.toAxon(), className: cn(classes.iframe, className), src: url.toString() }));
-};
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import cn from 'classnames';
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+import { fin5Top } from '../../../fin5Top/fin5Top';
+const useStyles = createUseStyles({
+    iframe: {
+        width: '100%',
+        height: '100%',
+        border: 0,
+        overflow: 'hidden',
+    },
+});
+export const GraphicViewer = ({ projectName = fin5Top?.finstack?.projectName ?? '', graphicId, targetRef, className, }) => {
+    const classes = useStyles();
+    const url = new URL(`${window.location.protocol}//${window.location.host}/fin5/${projectName}`);
+    url.hash = `targetRef=${targetRef.toAxon()}`;
+    url.searchParams.set('projectRef', graphicId.toAxon());
+    return (React.createElement("iframe", { id: graphicId.toAxon(), className: cn(classes.iframe, className), src: url.toString() }));
+};
 //# sourceMappingURL=GraphicViewer.js.map

package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts

@@ -1,17 +1,17 @@
-import { HRef } from 'haystack-core';
-import React from 'react';
-interface GraphicsTabViewer {
-    projectName?: string;
-    targetRef: HRef;
-    className?: string;
-    /**
-     * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
-     * false to just get the graphics on this target.
-     * @default false
-     */
-    queryRelated?: boolean;
-    fallbackClassName?: string;
-    fallbackText?: string;
-}
-export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
-export {};
+import { HRef } from 'haystack-core';
+import React from 'react';
+interface GraphicsTabViewer {
+    projectName?: string;
+    targetRef: HRef;
+    className?: string;
+    /**
+     * Set it to true if you want to query also for related graphics (graphics applicable to objects linked by refs),
+     * false to just get the graphics on this target.
+     * @default false
+     */
+    queryRelated?: boolean;
+    fallbackClassName?: string;
+    fallbackText?: string;
+}
+export declare const GraphicsTabViewer: React.FC<GraphicsTabViewer>;
+export {};

package/dist_es/react/components/graphics/GraphicsTabViewer.js

@@ -1,61 +1,61 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-import { ant_prefix, Tabs } from '@j2inn/ui';
-import cn from 'classnames';
-import { useClient } from 'haystack-react';
-import React, { useEffect, useMemo, useState } from 'react';
-import { createUseStyles } from 'react-jss';
-import { fin5Top } from '../../../fin5Top/fin5Top';
-import { LoadingSpinner } from '../LoadingSpinner';
-import { GraphicViewer } from './GraphicViewer';
-const useStyles = createUseStyles({
-    tabs: {
-        height: '100%',
-        [`& .${ant_prefix}-tabs-content-holder`]: {
-            height: '100%',
-            [`& .${ant_prefix}-tabs-content`]: {
-                height: '100%',
-                [`& .${ant_prefix}-tabs-tabpane`]: {
-                    height: '100%',
-                },
-            },
-        },
-    },
-    fallback: {
-        height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: '1.1em',
-    },
-});
-export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
-    const client = useClient();
-    const classes = useStyles();
-    const [loading, setLoading] = useState(true);
-    const [graphicsList, setGraphicsList] = useState([]);
-    useEffect(() => {
-        if (targetRef) {
-            client.ext
-                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
-                .then((grid) => {
-                setGraphicsList(grid.getRows());
-            })
-                .finally(() => setLoading(false));
-        }
-    }, [targetRef]);
-    const tabs = useMemo(() => {
-        return graphicsList
-            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
-            .map((graphic) => {
-            return {
-                label: graphic.toDis(),
-                key: graphic.id.toAxon(),
-                children: (React.createElement(GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
-            };
-        });
-    }, [graphicsList]);
-    return loading ? (React.createElement(LoadingSpinner, null)) : tabs.length > 0 ? (React.createElement(Tabs, { className: cn(classes.tabs, className), items: tabs })) : (React.createElement("div", { className: cn(classes.fallback, fallbackClassName) }, fallbackText));
-};
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { ant_prefix, Tabs } from '@j2inn/ui';
+import cn from 'classnames';
+import { useClient } from 'haystack-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { fin5Top } from '../../../fin5Top/fin5Top';
+import { LoadingSpinner } from '../LoadingSpinner';
+import { GraphicViewer } from './GraphicViewer';
+const useStyles = createUseStyles({
+    tabs: {
+        height: '100%',
+        [`& .${ant_prefix}-tabs-content-holder`]: {
+            height: '100%',
+            [`& .${ant_prefix}-tabs-content`]: {
+                height: '100%',
+                [`& .${ant_prefix}-tabs-tabpane`]: {
+                    height: '100%',
+                },
+            },
+        },
+    },
+    fallback: {
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '1.1em',
+    },
+});
+export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
+    const client = useClient();
+    const classes = useStyles();
+    const [loading, setLoading] = useState(true);
+    const [graphicsList, setGraphicsList] = useState([]);
+    useEffect(() => {
+        if (targetRef) {
+            client.ext
+                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
+                .then((grid) => {
+                setGraphicsList(grid.getRows());
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [targetRef]);
+    const tabs = useMemo(() => {
+        return graphicsList
+            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
+            .map((graphic) => {
+            return {
+                label: graphic.toDis(),
+                key: graphic.id.toAxon(),
+                children: (React.createElement(GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
+            };
+        });
+    }, [graphicsList]);
+    return loading ? (React.createElement(LoadingSpinner, null)) : tabs.length > 0 ? (React.createElement(Tabs, { className: cn(classes.tabs, className), items: tabs })) : (React.createElement("div", { className: cn(classes.fallback, fallbackClassName) }, fallbackText));
+};
 //# sourceMappingURL=GraphicsTabViewer.js.map

package/dist_es/react/components/makeCustomElement.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-interface CustomElementOptions {
-    useShadowDom?: boolean;
-}
-/**
- * Generate a custom element constructor that wraps the given react component.
- */
-export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
-/**
- * Create a custom element wrapping a React component and register it.
- * @param webComponentName the name of the Web component (tag name)
- * @param ReactComponent the React component to wrap
- * @returns
- */
-export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
-export {};
+import React from 'react';
+interface CustomElementOptions {
+    useShadowDom?: boolean;
+}
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
+/**
+ * Create a custom element wrapping a React component and register it.
+ * @param webComponentName the name of the Web component (tag name)
+ * @param ReactComponent the React component to wrap
+ * @returns
+ */
+export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
+export {};

package/dist_es/react/components/makeCustomElement.js

@@ -1,143 +1,143 @@
-/*
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
- */
-import { AppRootStoreContext, AppStoreContext } from '@j2inn/app-react';
-import { GenerateTheme } from '@j2inn/ui';
-import { I18NContext } from '@j2inn/utils';
-import { ClientContext } from 'haystack-react';
-import { create } from 'jss';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { JssProvider, ThemeProvider } from 'react-jss';
-const defaultTheme = GenerateTheme().light;
-/**
- * Generate a custom element constructor that wraps the given react component.
- */
-export const makeCustomElement = (Component, options = {
-    useShadowDom: true,
-}) => {
-    return class extends HTMLElement {
-        static get observedAttributes() {
-            return ['props'];
-        }
-        _locale;
-        get locale() {
-            return this._locale;
-        }
-        set locale(value) {
-            this._locale = value;
-            this.render();
-        }
-        _appRootStore;
-        get appRootStore() {
-            return this._appRootStore ?? {};
-        }
-        set appRootStore(value) {
-            this._appRootStore = value;
-            this.render();
-        }
-        _appStore;
-        get appStore() {
-            return this._appStore ?? {};
-        }
-        set appStore(value) {
-            this._appStore = value;
-            this.render();
-        }
-        _client;
-        get client() {
-            return this._client;
-        }
-        set client(value) {
-            this._client = value;
-            this.render();
-        }
-        _i18n;
-        get i18n() {
-            return this._i18n;
-        }
-        set i18n(value) {
-            this._i18n = value;
-            this.render();
-        }
-        _props;
-        get props() {
-            return this._props;
-        }
-        set props(value) {
-            this._props = value;
-            this.render();
-        }
-        _theme;
-        get theme() {
-            return this._theme ?? defaultTheme;
-        }
-        set theme(value) {
-            this._theme = value;
-            this.render();
-        }
-        root;
-        jss;
-        base;
-        initialized = false;
-        constructor() {
-            super();
-            this.base = options?.useShadowDom
-                ? this.attachShadow({ mode: 'open' })
-                : this;
-        }
-        initialize() {
-            if (!this.initialized) {
-                const mountPoint = document.createElement('div');
-                mountPoint.setAttribute('style', 'display: contents;');
-                this.base.appendChild(mountPoint);
-                this.root = createRoot(mountPoint);
-                this.jss = create({
-                    insertionPoint: mountPoint,
-                });
-                this.initialized = true;
-            }
-        }
-        connectedCallback() {
-            this.render();
-        }
-        attributeChangedCallback() {
-            this.render();
-        }
-        disconnectedCallback() {
-            this.root?.unmount();
-            this.initialized = false;
-        }
-        render() {
-            this.initialize();
-            const ThemedComponent = (React.createElement(ThemeProvider, { theme: this.theme },
-                React.createElement(I18NContext.Provider, { value: this.i18n },
-                    React.createElement(JssProvider, { jss: this.jss },
-                        React.createElement(Component, { ...this.props })))));
-            this.root?.render(React.createElement(AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
-                React.createElement(AppStoreContext.Provider, { value: this.appStore }, this.client ? (React.createElement(ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
-        }
-    };
-};
-/**
- * Create a custom element wrapping a React component and register it.
- * @param webComponentName the name of the Web component (tag name)
- * @param ReactComponent the React component to wrap
- * @returns
- */
-export const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
-    // Bail if web component is already defined
-    if (customElements.get(webComponentName)) {
-        return;
-    }
-    // Make web component that wraps the react component
-    const Element = makeCustomElement(ReactComponent, options);
-    try {
-        // Define web component
-        customElements.define(webComponentName, Element);
-    }
-    catch (e) {
-        console.error(e);
-    }
-};
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+import { AppRootStoreContext, AppStoreContext } from '@j2inn/app-react';
+import { GenerateTheme } from '@j2inn/ui';
+import { I18NContext } from '@j2inn/utils';
+import { ClientContext } from 'haystack-react';
+import { create } from 'jss';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { JssProvider, ThemeProvider } from 'react-jss';
+const defaultTheme = GenerateTheme().light;
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+export const makeCustomElement = (Component, options = {
+    useShadowDom: true,
+}) => {
+    return class extends HTMLElement {
+        static get observedAttributes() {
+            return ['props'];
+        }
+        _locale;
+        get locale() {
+            return this._locale;
+        }
+        set locale(value) {
+            this._locale = value;
+            this.render();
+        }
+        _appRootStore;
+        get appRootStore() {
+            return this._appRootStore ?? {};
+        }
+        set appRootStore(value) {
+            this._appRootStore = value;
+            this.render();
+        }
+        _appStore;
+        get appStore() {
+            return this._appStore ?? {};
+        }
+        set appStore(value) {
+            this._appStore = value;
+            this.render();
+        }
+        _client;
+        get client() {
+            return this._client;
+        }
+        set client(value) {
+            this._client = value;
+            this.render();
+        }
+        _i18n;
+        get i18n() {
+            return this._i18n;
+        }
+        set i18n(value) {
+            this._i18n = value;
+            this.render();
+        }
+        _props;
+        get props() {
+            return this._props;
+        }
+        set props(value) {
+            this._props = value;
+            this.render();
+        }
+        _theme;
+        get theme() {
+            return this._theme ?? defaultTheme;
+        }
+        set theme(value) {
+            this._theme = value;
+            this.render();
+        }
+        root;
+        jss;
+        base;
+        initialized = false;
+        constructor() {
+            super();
+            this.base = options?.useShadowDom
+                ? this.attachShadow({ mode: 'open' })
+                : this;
+        }
+        initialize() {
+            if (!this.initialized) {
+                const mountPoint = document.createElement('div');
+                mountPoint.setAttribute('style', 'display: contents;');
+                this.base.appendChild(mountPoint);
+                this.root = createRoot(mountPoint);
+                this.jss = create({
+                    insertionPoint: mountPoint,
+                });
+                this.initialized = true;
+            }
+        }
+        connectedCallback() {
+            this.render();
+        }
+        attributeChangedCallback() {
+            this.render();
+        }
+        disconnectedCallback() {
+            this.root?.unmount();
+            this.initialized = false;
+        }
+        render() {
+            this.initialize();
+            const ThemedComponent = (React.createElement(ThemeProvider, { theme: this.theme },
+                React.createElement(I18NContext.Provider, { value: this.i18n },
+                    React.createElement(JssProvider, { jss: this.jss },
+                        React.createElement(Component, { ...this.props })))));
+            this.root?.render(React.createElement(AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
+                React.createElement(AppStoreContext.Provider, { value: this.appStore }, this.client ? (React.createElement(ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
+        }
+    };
+};
+/**
+ * Create a custom element wrapping a React component and register it.
+ * @param webComponentName the name of the Web component (tag name)
+ * @param ReactComponent the React component to wrap
+ * @returns
+ */
+export const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
+    // Bail if web component is already defined
+    if (customElements.get(webComponentName)) {
+        return;
+    }
+    // Make web component that wraps the react component
+    const Element = makeCustomElement(ReactComponent, options);
+    try {
+        // Define web component
+        customElements.define(webComponentName, Element);
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
 //# sourceMappingURL=makeCustomElement.js.map

package/dist_es/react/components/navigation/BasicLayout.d.ts

@@ -1,41 +1,41 @@
-import { LayoutProps, MenuProps, SiderProps } from 'antd';
-import React, { PropsWithChildren, ReactElement } from 'react';
-import { MenuPage } from './MenuPage';
-export interface BasicLayoutStyleVariables {
-    isMobile?: boolean;
-    compactSider?: boolean;
-    siderWidth?: number | string;
-    headerHeight: number;
-}
-export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
-    pages?: T[];
-    defaultPage?: string;
-    selectedPages?: string[];
-    onSelect?: (key: string) => void;
-    compactSider?: {
-        isCompact?: boolean;
-        showButton?: boolean;
-        buttonClassName?: string;
-    };
-    layoutProps?: LayoutProps;
-    mobileHeaderProps?: LayoutProps;
-    siderProps?: SiderProps;
-    contentProps?: LayoutProps;
-    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
-    menuBefore?: React.ReactNode;
-    menuAfter?: React.ReactNode;
-    menuTriggerClassName?: string;
-    headerHeight?: number;
-}
-/**
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
- * @param pages
- * @returns
- */
-export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
-export declare const DEFAULT_HEADER_HEIGHT = 45;
-/**
- * Basic layout with sider and mobile navigation management.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
- */
-export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
+import { LayoutProps, MenuProps, SiderProps } from 'antd';
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { MenuPage } from './MenuPage';
+export interface BasicLayoutStyleVariables {
+    isMobile?: boolean;
+    compactSider?: boolean;
+    siderWidth?: number | string;
+    headerHeight: number;
+}
+export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
+    pages?: T[];
+    defaultPage?: string;
+    selectedPages?: string[];
+    onSelect?: (key: string) => void;
+    compactSider?: {
+        isCompact?: boolean;
+        showButton?: boolean;
+        buttonClassName?: string;
+    };
+    layoutProps?: LayoutProps;
+    mobileHeaderProps?: LayoutProps;
+    siderProps?: SiderProps;
+    contentProps?: LayoutProps;
+    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
+    menuBefore?: React.ReactNode;
+    menuAfter?: React.ReactNode;
+    menuTriggerClassName?: string;
+    headerHeight?: number;
+}
+/**
+ * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
+ * @param pages
+ * @returns
+ */
+export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
+export declare const DEFAULT_HEADER_HEIGHT = 45;
+/**
+ * Basic layout with sider and mobile navigation management.
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ */
+export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;