@pepperi-addons/ngx-composite-lib-react 0.0.3 → 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.3",
+  "version": "0.0.4",
   "description": "React wrappers for @pepperi-addons/ngx-composite-lib web components, plus registration bundles.",
   "type": "module",
   "main": "index.js",