@pepperi-addons/ngx-composite-lib-react 0.0.2 → 0.0.4

package/components/PepGroupButtonsSettingsReact.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" resolution-mode="require"/>
+import React from 'react';
 export interface PepGroupButtonsSettingsReactProps {
     pepResetConfigurationField?: string;
     hideReset?: boolean;
@@ -11,4 +11,4 @@ export interface PepGroupButtonsSettingsReactProps {
     btnsArray?: any[];
     onBtnKeyChange?: (e: any) => void;
 }
-export declare function PepGroupButtonsSettingsReact(props: PepGroupButtonsSettingsReactProps): JSX.Element;
+export declare function PepGroupButtonsSettingsReact(props: PepGroupButtonsSettingsReactProps): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/components/PepGroupButtonsSettingsReact.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { PepGroupButtons } from '@pepperi-addons/ngx-lib-react';
 export function PepGroupButtonsSettingsReact(props) {
     const { pepResetConfigurationField, hideReset, resetHostEvents, groupType, subHeader, btnKey, useNone, excludeKeys, btnsArray, onBtnKeyChange, } = props;
     const onReset = React.useCallback(() => {
@@ -12,7 +10,7 @@ export function PepGroupButtonsSettingsReact(props) {
             });
         }
     }, [pepResetConfigurationField, resetHostEvents]);
-    // Build items for the base group-buttons element so the shim can render real visuals
+    // Build items for the settings element (we will pass as custom group)
     const computedItems = React.useMemo(() => {
         const arr = [];
         switch (groupType) {
@@ -58,6 +56,49 @@ export function PepGroupButtonsSettingsReact(props) {
         }
         return filtered;
     }, [groupType, btnsArray, excludeKeys, useNone]);
-    return (_jsxs("div", { children: [subHeader ? _jsx("div", { className: "pep-subheader", children: subHeader }) : null, _jsx(PepGroupButtons, { ...{ groupType: 'custom', btnsArray: computedItems, btnKey }, onBtnKeyChange: onBtnKeyChange }), !hideReset ? (_jsx("button", { type: "button", onClick: onReset, children: "Reset" })) : null] }));
+    const hostRef = React.useRef(null);
+    const elRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return () => { };
+        let el = elRef.current;
+        if (!el) {
+            el = document.createElement('pep-group-buttons-settings');
+            elRef.current = el;
+        }
+        const listeners = [];
+        // Set properties BEFORE connecting to the DOM
+        const propsToSet = {
+            pepResetConfigurationField,
+            hideReset,
+            resetHostEvents,
+            groupType: 'custom',
+            subHeader,
+            btnKey,
+            useNone,
+            excludeKeys,
+            btnsArray: computedItems,
+        };
+        Object.entries(propsToSet).forEach(([k, v]) => {
+            if (typeof v === 'undefined')
+                return;
+            try {
+                el[k] = v;
+            }
+            catch { }
+        });
+        if (typeof onBtnKeyChange === 'function') {
+            const handler = (e) => onBtnKeyChange(e);
+            el.addEventListener('btnkeyChange', handler);
+            listeners.push(['btnkeyChange', handler]);
+        }
+        if (!el.isConnected)
+            host.appendChild(el);
+        return () => {
+            listeners.forEach(([n, h]) => el.removeEventListener(n, h));
+        };
+    }, [pepResetConfigurationField, hideReset, resetHostEvents, subHeader, btnKey, useNone, excludeKeys, computedItems, onBtnKeyChange]);
+    return React.createElement('div', { ref: hostRef });
 }
 //# sourceMappingURL=PepGroupButtonsSettingsReact.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "React wrappers for @pepperi-addons/ngx-composite-lib web components, plus registration bundles.",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,8 @@
     "*.d.ts",
     "components/*.js",
     "components/*.d.ts",
+    "utils/*.js",
+    "utils/*.d.ts",
     "elements/*",
     "README.md"
   ],
@@ -19,6 +21,7 @@
       "types": "./index.d.ts",
       "default": "./index.js"
     },
+    "./components/PepGroupButtonsSettingsReact.js": "./components/PepGroupButtonsSettingsReact.js",
     "./elements/register.js": "./elements/register.js",
     "./elements/register.auto.js": "./elements/register.auto.js",
     "./elements/styles.css": "./elements/styles.css",

package/utils/create-wrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type AnyProps = Record<string, any> & {
+    children?: React.ReactNode;
+};
+declare type WebComponent = HTMLElement & Record<string, any>;
+export declare function createPepWrapper<T extends WebComponent = WebComponent>(tagName: string, displayName: string): React.ForwardRefExoticComponent<Pick<AnyProps, string> & React.RefAttributes<T>>;
+export {};

package/utils/create-wrapper.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, forwardRef } from 'react';
+export function createPepWrapper(tagName, displayName) {
+    const Cmp = forwardRef((props, ref) => {
+        const localRef = useRef(null);
+        const setRef = (el) => {
+            localRef.current = el;
+            if (typeof ref === 'function')
+                ref(el);
+            else if (ref && 'current' in ref)
+                ref.current = el;
+        };
+        useEffect(() => {
+            const el = localRef.current;
+            const listeners = [];
+            if (el) {
+                Object.entries(props).forEach(([key, value]) => {
+                    if (key === 'children' || key === 'style' || key === 'className')
+                        return;
+                    if (key.startsWith('on') && typeof value === 'function') {
+                        const eventName = key.slice(2, 3).toLowerCase() + key.slice(3);
+                        const handler = (e) => value(e);
+                        el.addEventListener(eventName, handler);
+                        listeners.push([eventName, handler]);
+                    }
+                    else {
+                        try {
+                            el[key] = value;
+                        }
+                        catch {
+                            // ignore set errors
+                        }
+                    }
+                });
+            }
+            return () => {
+                const current = localRef.current;
+                listeners.forEach(([n, h]) => current?.removeEventListener(n, h));
+            };
+        }, [props]);
+        const { children, className, style } = props;
+        return React.createElement(tagName, { ref: setRef, className, style }, children);
+    });
+    Cmp.displayName = displayName;
+    return Cmp;
+}
+//# sourceMappingURL=create-wrapper.js.map