@j2inn/fin5-ui-utils 6.0.5-beta.0 → 6.1.0

package/dist/react/components/makeCustomElement.js

@@ -1,151 +1,151 @@
-"use strict";
-/*
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerReactWebComponent = exports.makeCustomElement = void 0;
-const app_react_1 = require("@j2inn/app-react");
-const ui_1 = require("@j2inn/ui");
-const utils_1 = require("@j2inn/utils");
-const haystack_react_1 = require("haystack-react");
-const jss_1 = require("jss");
-const react_1 = __importDefault(require("react"));
-const client_1 = require("react-dom/client");
-const react_jss_1 = require("react-jss");
-const defaultTheme = (0, ui_1.GenerateTheme)().light;
-/**
- * Generate a custom element constructor that wraps the given react component.
- */
-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 = (0, client_1.createRoot)(mountPoint);
-                this.jss = (0, jss_1.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_1.default.createElement(react_jss_1.ThemeProvider, { theme: this.theme },
-                react_1.default.createElement(utils_1.I18NContext.Provider, { value: this.i18n },
-                    react_1.default.createElement(react_jss_1.JssProvider, { jss: this.jss },
-                        react_1.default.createElement(Component, { ...this.props })))));
-            this.root?.render(react_1.default.createElement(app_react_1.AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
-                react_1.default.createElement(app_react_1.AppStoreContext.Provider, { value: this.appStore }, this.client ? (react_1.default.createElement(haystack_react_1.ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
-        }
-    };
-};
-exports.makeCustomElement = makeCustomElement;
-/**
- * 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
- */
-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 = (0, exports.makeCustomElement)(ReactComponent, options);
-    try {
-        // Define web component
-        customElements.define(webComponentName, Element);
-    }
-    catch (e) {
-        console.error(e);
-    }
-};
-exports.registerReactWebComponent = registerReactWebComponent;
+"use strict";
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerReactWebComponent = exports.makeCustomElement = void 0;
+const app_react_1 = require("@j2inn/app-react");
+const ui_1 = require("@j2inn/ui");
+const utils_1 = require("@j2inn/utils");
+const haystack_react_1 = require("haystack-react");
+const jss_1 = require("jss");
+const react_1 = __importDefault(require("react"));
+const client_1 = require("react-dom/client");
+const react_jss_1 = require("react-jss");
+const defaultTheme = (0, ui_1.GenerateTheme)().light;
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+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 = (0, client_1.createRoot)(mountPoint);
+                this.jss = (0, jss_1.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_1.default.createElement(react_jss_1.ThemeProvider, { theme: this.theme },
+                react_1.default.createElement(utils_1.I18NContext.Provider, { value: this.i18n },
+                    react_1.default.createElement(react_jss_1.JssProvider, { jss: this.jss },
+                        react_1.default.createElement(Component, { ...this.props })))));
+            this.root?.render(react_1.default.createElement(app_react_1.AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
+                react_1.default.createElement(app_react_1.AppStoreContext.Provider, { value: this.appStore }, this.client ? (react_1.default.createElement(haystack_react_1.ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
+        }
+    };
+};
+exports.makeCustomElement = makeCustomElement;
+/**
+ * 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
+ */
+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 = (0, exports.makeCustomElement)(ReactComponent, options);
+    try {
+        // Define web component
+        customElements.define(webComponentName, Element);
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+exports.registerReactWebComponent = registerReactWebComponent;
 //# sourceMappingURL=makeCustomElement.js.map

package/dist/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;