@pixelated-tech/components 3.4.3 → 3.5.1

package/dist/components/cms/instagram.components.js

@@ -1,8 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { getInstagramTiles } from './instagram.functions';
 import { Tiles } from '../carousel/tiles';
+InstagramTiles.propTypes = {
+    accessToken: PropTypes.string,
+    userId: PropTypes.string,
+    limit: PropTypes.number,
+    rowCount: PropTypes.number,
+    useThumbnails: PropTypes.bool,
+    includeVideos: PropTypes.bool,
+    includeCaptions: PropTypes.bool,
+};
 export function InstagramTiles(props) {
     const [tiles, setTiles] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -11,12 +21,12 @@ export function InstagramTiles(props) {
         (async () => {
             try {
                 const result = await getInstagramTiles({
-                    accessToken: props.accessToken,
-                    userId: props.userId,
+                    accessToken: props.accessToken ?? undefined,
+                    userId: props.userId ?? undefined,
                     limit: props.limit ?? 12,
-                    useThumbnails: props.useThumbnails,
-                    includeVideos: props.includeVideos,
-                    includeCaptions: props.includeCaptions,
+                    useThumbnails: props.useThumbnails ?? undefined,
+                    includeVideos: props.includeVideos ?? undefined,
+                    includeCaptions: props.includeCaptions ?? undefined,
                 });
                 setTiles(result);
                 setLoading(false);

package/dist/components/cms/smartimage.js

@@ -80,8 +80,8 @@ export function SmartImage(props) {
     newProps.name = safeString(name);
     newProps.title = safeString(title);
     newProps.alt = safeString(alt) ?? '';
-    newProps.width = parseNumber(width) || 500;
-    newProps.height = parseNumber(height) || 500;
+    newProps.width = parseNumber(width ?? undefined) ?? 500;
+    newProps.height = parseNumber(height ?? undefined) ?? 500;
     const filename = (newProps.src).split('/').pop()?.split('?')[0] || '';
     const imageName = filename.replace(/\.[^.]+$/, '');
     newProps.id = newProps.id || newProps.name || sanitizeString(newProps.title) || sanitizeString(newProps.alt) || sanitizeString(imageName);

package/dist/components/cms/wordpress.components.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { usePixelatedConfig } from "../config/config.client";
 import { SmartImage } from './smartimage';
 import { PageGridItem } from '../general/semantic';
@@ -13,6 +14,13 @@ function decodeString(str) {
     textarea.innerHTML = str;
     return textarea.value;
 }
+BlogPostList.propTypes = {
+    site: PropTypes.string,
+    baseURL: PropTypes.string,
+    count: PropTypes.number,
+    posts: PropTypes.array,
+    showCategories: PropTypes.bool,
+};
 export function BlogPostList(props) {
     const { site: propSite, baseURL: propBaseURL, count, posts: cachedPosts, showCategories = true } = props;
     const config = usePixelatedConfig();
@@ -34,7 +42,12 @@ export function BlogPostList(props) {
         // Otherwise, fetch from WordPress
         ToggleLoading({ show: true });
         (async () => {
-            const data = (await getWordPressItems({ site, count, baseURL })) ?? [];
+            const params = { site };
+            if (count !== null && count !== undefined)
+                params.count = count;
+            if (baseURL !== null && baseURL !== undefined)
+                params.baseURL = baseURL;
+            const data = (await getWordPressItems(params)) ?? [];
             const sorted = data.sort((a, b) => ((a.date ?? '') < (b.date ?? '')) ? 1 : -1);
             setPosts(sorted);
             ToggleLoading({ show: false });
@@ -42,20 +55,33 @@ export function BlogPostList(props) {
     }, [site, baseURL, count, cachedPosts]);
     return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(PageGridItem, { children: _jsx(BlogPostSummary, { ID: post.ID, title: post.title, date: post.date, excerpt: post.excerpt, URL: post.URL, categories: post.categories, featured_image: post.featured_image, showCategories: showCategories }) }, post.ID)))] }));
 }
+BlogPostSummary.propTypes = {
+    ID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    title: PropTypes.string,
+    date: PropTypes.string,
+    excerpt: PropTypes.string,
+    URL: PropTypes.string,
+    categories: PropTypes.object,
+    featured_image: PropTypes.string,
+    showCategories: PropTypes.bool,
+};
 export function BlogPostSummary(props) {
-    const myCategoryImages = Object.entries(props.categories).map(([category, index]) => [category.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort();
+    const myCategoryImages = props.categories ? Object.entries(props.categories).map(([category, index]) => [category?.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort() : [];
     const config = usePixelatedConfig();
-    const myExcerpt = decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + props.URL + '" target="_blank" rel="noopener noreferrer">[…]</a>');
-    return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL, target: "_blank", rel: "noopener noreferrer", children: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", new Date(props.date).toLocaleDateString()] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: decodeString(props.title), title: decodeString(props.title), style: {}, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
+    const myExcerpt = props.excerpt ? decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + (props.URL || '') + '" target="_blank" rel="noopener noreferrer">[…]</a>') : '';
+    return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL || '', target: "_blank", rel: "noopener noreferrer", children: props.title ? decodeString(props.title) : '' }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", props.date ? new Date(props.date).toLocaleDateString() : ''] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: props.title ? decodeString(props.title) : '', title: props.title ? decodeString(props.title) : '', style: {}, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
                     _jsx("div", { className: "article-excerpt grid-s1-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) }), props.showCategories !== false && (_jsxs("div", { children: ["Categories:", myCategoryImages.map(([categoryImg, index]) => (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)))] }))] }) }, props.ID));
 }
+BlogPostCategories.propTypes = {
+    categories: PropTypes.arrayOf(PropTypes.string),
+};
 export function BlogPostCategories(props) {
     if (!props.categories || props.categories.length === 0) {
         return null;
     }
-    const myCategoryImages = props.categories.map((category) => (category !== "Uncategorized")
+    const myCategoryImages = props.categories.map((category) => (category && category !== "Uncategorized")
         ? category.trim().toLowerCase().replace(/[ /]+/g, '-')
-        : undefined).sort();
+        : undefined).filter(Boolean).sort();
     const config = usePixelatedConfig();
     return (_jsxs("div", { className: "blogPostCategories", children: [_jsx("div", { children: "Categories: " }), myCategoryImages.map((categoryImg, index) => categoryImg ? (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { className: "u-photo", src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)) : null)] }));
 }

package/dist/components/cms/yelp.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import PropTypes from 'prop-types';
 /*
 NOTE : development has stopped for this component
 as Yelp Base API Access costs $229 per month.
@@ -12,6 +13,10 @@ https://www.google.com/search?q=yelp+reviews+react+component&oq=yelp+reviews+rea
 https://www.reddit.com/r/nextjs/comments/16smhqa/next_js_fetching_data_from_yelp_api/
 https://helloputnam.medium.com/easiest-way-to-include-business-reviews-on-a-web-app-google-facebook-yelp-etc-de3e243bbe75
 */
+YelpReviews.propTypes = {
+    businessID: PropTypes.string.isRequired,
+    key: PropTypes.string,
+};
 export function YelpReviews(props) {
     const [reviews, setReviews] = useState([]);
     const [loading, setLoading] = useState(true);

package/dist/components/config/config.server.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 import { getClientOnlyPixelatedConfig } from './config';
 // Server wrapper: reads server env blob and sanitizes it, then mounts the client provider.
 // Important: do NOT import client components at module scope — dynamically import
 // the client provider inside the function so this module remains server-safe.
-export async function PixelatedServerConfigProvider({ config, children, }) {
+PixelatedServerConfigProvider.propTypes = {
+    config: PropTypes.object,
+    children: PropTypes.node.isRequired,
+};
+export async function PixelatedServerConfigProvider(props) {
+    const { config, children } = props;
     const cfg = config ?? getClientOnlyPixelatedConfig();
     const mod = await import('./config.client');
     const Provider = mod.PixelatedClientConfigProvider;

package/dist/components/general/accordion.js

@@ -5,10 +5,11 @@ import './accordion.css';
 Accordion.propTypes = {
     items: PropTypes.arrayOf(PropTypes.shape({
         title: PropTypes.string.isRequired,
-        content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+        content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         open: PropTypes.bool,
     })).isRequired,
+    onToggle: PropTypes.func,
 };
-export function Accordion({ items }) {
-    return (_jsx("div", { className: "accordion", children: items?.map((item, index) => (item ? (_jsxs("details", { className: "accordion-item", open: item.open ?? undefined, children: [_jsx("summary", { className: "accordion-title", children: _jsx("h3", { id: `accordion-header-${index}`, children: item.title }) }), _jsx("div", { className: "accordion-content", role: "region", "aria-labelledby": `accordion-header-${index}`, children: typeof item.content === 'string' ? (_jsx("p", { children: item.content })) : (item.content) })] }, index)) : null)) }));
+export function Accordion({ items, onToggle }) {
+    return (_jsx("div", { className: "accordion", children: items?.map((item, index) => (item ? (_jsxs("details", { className: "accordion-item", open: item.open ?? undefined, onToggle: onToggle ? (e) => onToggle(index, e.target.open) : undefined, children: [_jsx("summary", { className: "accordion-title", children: _jsx("h3", { id: `accordion-header-${index}`, children: item.title }) }), _jsx("div", { className: "accordion-content", role: "region", "aria-labelledby": `accordion-header-${index}`, children: typeof item.content === 'string' ? (_jsx("p", { children: item.content })) : (item.content) })] }, index)) : null)) }));
 }

package/dist/components/general/css.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isPartialMatchInArray(searchString, array) {
     // Convert both the search string and array items to lowercase for case-insensitive matching
     const lowerCaseSearchString = searchString.toLowerCase();

package/dist/components/general/image.js

@@ -20,7 +20,6 @@
         imageObserver.observe(image);
     });
 } */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isInViewport(el) {
     const rect = el.getBoundingClientRect();
     return (rect.top >= 0 &&

package/dist/components/general/loading.js

@@ -7,7 +7,8 @@ https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webk
 https://www.andreaverlicchi.eu/blog/css-3-only-spinning-loading-animation/
 */
 /* ========== MARKDOWN ========== */
-export function Loading() {
+Loading.propTypes = {};
+export function Loading(props) {
     return (_jsx(_Fragment, { children: _jsx("div", { id: "loadingSpinner", className: "loading", children: _jsxs("div", { className: "spinner", children: [_jsx("div", { className: "bar1" }), _jsx("div", { className: "bar2" }), _jsx("div", { className: "bar3" }), _jsx("div", { className: "bar4" }), _jsx("div", { className: "bar5" }), _jsx("div", { className: "bar6" }), _jsx("div", { className: "bar7" }), _jsx("div", { className: "bar8" }), _jsx("div", { className: "bar9" }), _jsx("div", { className: "bar10" }), _jsx("div", { className: "bar11" }), _jsx("div", { className: "bar12" })] }) }) }));
 }
 ToggleLoading.propTypes = {

package/dist/components/general/microinteractions.js

@@ -29,7 +29,6 @@ export function MicroInteractions(props) {
     if (props.scrollfadeElements)
         ScrollFade(props.scrollfadeElements);
 }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isElementInViewport(el) {
     const rect = el.getBoundingClientRect();
     return (rect.top >= 0 &&

package/dist/components/general/modal.css

@@ -1,11 +1,9 @@
 
 .modal {
-
     position: fixed; /* Stay in place */
     z-index: 1000; /* Sit on top */
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */

package/dist/components/general/modal.js

@@ -1,45 +1,87 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import './modal.css';
 /*
 https://www.w3schools.com/howto/howto_css_modals.asp
 */
-export function Modal(props) {
-    const myModalID = "myModal" + (props.modalID ?? '');
-    const myModalCloseID = "myModalClose" + (props.modalID ?? '');
+Modal.propTypes = {
+    modalContent: PropTypes.node.isRequired,
+    modalID: PropTypes.string,
+    isOpen: PropTypes.bool,
+    handleCloseEvent: PropTypes.func,
+};
+export function Modal({ modalContent, modalID, isOpen = false, handleCloseEvent }) {
+    const myModalID = "myModal" + (modalID ?? '');
+    const myModalCloseID = "myModalClose" + (modalID ?? '');
+    const modalRef = useRef(null);
     useEffect(() => {
-        const handleModalClose = (event) => {
-            event.preventDefault();
-            const myModal = document.getElementById(myModalID);
-            if (myModal) {
-                myModal.style.display = 'none';
-            }
-        };
-        const myModalClose = document.getElementById(myModalCloseID);
-        if (myModalClose) {
-            myModalClose.addEventListener('click', handleModalClose);
-        }
-        ;
-        const handleWindowOnClick = (event) => {
-            const myModal = document.getElementById(myModalID);
-            if (event.target == myModal) {
+        // Only use DOM event listeners for backward compatibility when handleCloseEvent is not provided
+        if (!handleCloseEvent) {
+            const handleModalClose = (event) => {
+                event.preventDefault();
+                const myModal = document.getElementById(myModalID);
                 if (myModal) {
-                    myModal.style.display = "none";
+                    myModal.style.display = 'none';
                 }
-                ;
-            }
-        };
-        window.addEventListener('click', handleWindowOnClick);
-        return () => {
-            window.removeEventListener('click', handleWindowOnClick);
+            };
+            const myModalClose = document.getElementById(myModalCloseID);
             if (myModalClose) {
-                myModalClose.removeEventListener('click', handleModalClose);
+                myModalClose.addEventListener('click', handleModalClose);
             }
             ;
-        };
-    }, []);
-    return (_jsx("div", { id: myModalID, className: "modal", style: { display: 'none' }, children: _jsxs("div", { className: "modal-content", children: [_jsx("span", { id: myModalCloseID, className: "modal-close", "aria-hidden": "true", children: "\u00D7" }), props.modalContent] }) }));
+            const handleWindowOnClick = (event) => {
+                const myModal = document.getElementById(myModalID);
+                if (event.target == myModal) {
+                    if (myModal) {
+                        myModal.style.display = 'none';
+                    }
+                }
+            };
+            window.addEventListener('click', handleWindowOnClick);
+            return () => {
+                window.removeEventListener('click', handleWindowOnClick);
+                if (myModalClose) {
+                    myModalClose.removeEventListener('click', handleModalClose);
+                }
+                ;
+            };
+        }
+        else {
+            // For React approach, add escape key listener
+            const handleEscape = (event) => {
+                if (event.key === 'Escape') {
+                    handleCloseEvent();
+                }
+            };
+            document.addEventListener('keydown', handleEscape);
+            return () => {
+                document.removeEventListener('keydown', handleEscape);
+            };
+        }
+    }, [myModalID, myModalCloseID, handleCloseEvent]);
+    const handleCloseClick = handleCloseEvent ? (event) => {
+        event.preventDefault();
+        handleCloseEvent();
+    } : undefined;
+    const handleCloseKeyDown = handleCloseEvent ? (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleCloseEvent();
+        }
+    } : undefined;
+    const handleModalClick = handleCloseEvent ? (event) => {
+        if (event.target === modalRef.current) {
+            handleCloseEvent();
+        }
+    } : undefined;
+    const handleModalKeyDown = handleCloseEvent ? (event) => {
+        if (event.key === 'Escape' && event.target === modalRef.current) {
+            handleCloseEvent();
+        }
+    } : undefined;
+    return (_jsx("div", { id: myModalID, className: "modal", style: { display: isOpen ? 'block' : 'none' }, ref: modalRef, onClick: handleModalClick, onKeyDown: handleModalKeyDown, tabIndex: -1, "aria-label": "Modal overlay", children: _jsxs("div", { className: "modal-content", role: "dialog", "aria-modal": "true", children: [_jsx("button", { id: myModalCloseID, className: "modal-close", "aria-label": "Close modal", onClick: handleCloseClick, onKeyDown: handleCloseKeyDown, type: "button", children: "\u00D7" }), modalContent] }) }));
 }
 export const handleModalOpen = (event, modalID) => {
     const myModalID = "myModal" + (modalID ?? '');

package/dist/components/general/sidepanel.js

@@ -3,7 +3,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 import './sidepanel.css';
+// Define const arrays for options - used by both PropTypes and form generation
+export const positions = ['left', 'right'];
+SidePanel.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onToggle: PropTypes.func,
+    position: PropTypes.oneOf([...positions]),
+    width: PropTypes.string,
+    showOverlay: PropTypes.bool,
+    showTab: PropTypes.bool,
+    tabIcon: PropTypes.node,
+    tabLabel: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
 export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon /* = "≡" */, tabLabel, children, className = '' }) {
     const portalRootRef = useRef(null);
     const wrapperRef = useRef(null);

package/dist/components/general/tab.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import PropTypes from 'prop-types';

package/dist/components/menu/menu-accordion.css

@@ -26,7 +26,7 @@
 .panelMenuButton .hamburger{
     cursor: pointer;
    	font-family: Verdana;
-	font-size: 1.5rem;
+	font-size: 1.75rem;
     color: #CCC;
 
 }

package/dist/components/menu/menu-accordion.js

@@ -4,6 +4,15 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-accordion.css';
 const hamburgerIcon = "≡"; /* (U+2261) */ /* ||| */
+const menuItemShape = PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    target: PropTypes.string,
+    routes: PropTypes.array, // Will be refined after function declaration
+    hidden: PropTypes.bool,
+});
+// Update the recursive reference after the shape is defined
+menuItemShape.routes = PropTypes.arrayOf(menuItemShape);
 function generateMenuItems({ menuData, state = "hide" }) {
     const myItems = [];
     let index = 0;
@@ -27,9 +36,8 @@ function generateMenuItems({ menuData, state = "hide" }) {
     }
     return myItems;
 }
-/* ========== MENU ========== */
 MenuAccordion.propTypes = {
-    menuItems: PropTypes.any.isRequired,
+    menuItems: PropTypes.arrayOf(menuItemShape).isRequired,
     showHidden: PropTypes.bool,
 };
 export function MenuAccordion(props) {
@@ -145,7 +153,10 @@ export function MenuAccordion(props) {
 }
 /* ========== MENU GROUP ========== */
 MenuAccordionGroup.propTypes = {
-    menuItems: PropTypes.object.isRequired,
+    menuItems: PropTypes.oneOfType([
+        menuItemShape,
+        PropTypes.arrayOf(menuItemShape)
+    ]).isRequired,
     state: PropTypes.string,
 };
 export function MenuAccordionGroup(props) {
@@ -168,7 +179,7 @@ export function MenuAccordionItem(props) {
 https://www.unclebigbay.com/blog/building-the-world-simplest-hamburger-with-html-and-css
 */
 MenuAccordionButton.propTypes = {};
-export function MenuAccordionButton() {
+export function MenuAccordionButton(props) {
     function slideMobilePanel() {
         if (typeof window !== 'undefined' && window.moveMenu) {
             window.moveMenu();

package/dist/components/menu/menu-expando.js

@@ -1,9 +1,18 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-expando.css';
+MenuExpando.propTypes = {
+    menuItems: PropTypes.oneOfType([
+        PropTypes.objectOf(PropTypes.string),
+        PropTypes.arrayOf(PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            path: PropTypes.string.isRequired,
+            routes: PropTypes.array,
+        }))
+    ]).isRequired
+};
 export function MenuExpando(props) {
     const detailsRef = useRef(null);
     const ulRef = useRef(null);
@@ -91,11 +100,11 @@ export function MenuExpando(props) {
         if (Array.isArray(props.menuItems)) {
             // Array format like MenuAccordion
             for (const item of props.menuItems) {
-                if (item.routes && item.routes.length > 0) {
+                if (item && item.routes && item.routes.length > 0) {
                     // Item has nested routes - create expandable submenu
                     myItems.push(_jsx("li", { children: _jsxs("details", { className: "menuExpandoNested", children: [_jsx("summary", { children: _jsx("a", { href: item.path, children: item.name }) }), _jsx("ul", { children: item.routes.map((route) => (_jsx(MenuExpandoItem, { name: route.name, href: route.path }, route.name))) })] }) }, item.name));
                 }
-                else {
+                else if (item) {
                     // Regular item without nested routes
                     myItems.push(_jsx(MenuExpandoItem, { name: item.name, href: item.path }, item.name));
                 }
@@ -104,31 +113,25 @@ export function MenuExpando(props) {
         else {
             // Object format
             for (const itemKey in props.menuItems) {
-                myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: props.menuItems[itemKey] }, itemKey));
+                const href = props.menuItems[itemKey];
+                if (typeof href === 'string') {
+                    myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: href }, itemKey));
+                }
             }
         }
         return myItems;
     }
     return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menu-expando-wrapper", id: "menu-expando-wrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));
 }
-MenuExpando.propTypes = {
-    menuItems: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.arrayOf(PropTypes.shape({
-            name: PropTypes.string.isRequired,
-            path: PropTypes.string.isRequired,
-            routes: PropTypes.array,
-        }))
-    ]).isRequired
-};
-export function MenuExpandoItem(props) {
-    return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
-}
 MenuExpandoItem.propTypes = {
     name: PropTypes.string.isRequired,
     href: PropTypes.string.isRequired
 };
-export function MenuExpandoButton() {
+export function MenuExpandoItem(props) {
+    return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
+}
+MenuExpandoButton.propTypes = {};
+export function MenuExpandoButton(props) {
     function handleMenuExpandoButtonClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -144,4 +147,3 @@ export function MenuExpandoButton() {
     }
     return (_jsx("div", { className: "menuExpandoButton", id: "menuExpandoButton", onClick: handleMenuExpandoButtonClick, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Toggle mobile menu", children: _jsx("img", { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
 }
-MenuExpandoButton.propTypes = {};

package/dist/components/menu/menu-simple.js

@@ -3,26 +3,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import PropTypes from "prop-types";
 import './menu-simple.css';
-/* ========== MENU ========== */
+const menuItemShape = PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    target: PropTypes.string,
+    hidden: PropTypes.bool,
+    routes: PropTypes.array,
+});
 MenuSimple.propTypes = {
-    // 	menuItems: PropTypes.object.isRequired,
-    menuItems: PropTypes.arrayOf(PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        path: PropTypes.string.isRequired,
-        target: PropTypes.string,
-        hidden: PropTypes.bool,
-        routes: PropTypes.array,
-    })).isRequired,
+    menuItems: PropTypes.arrayOf(menuItemShape).isRequired,
 };
 export function MenuSimple(props) {
     function generateMenuItems() {
         const myItems = [];
         for (const itemKey in props.menuItems) {
             const myItem = props.menuItems[itemKey];
-            if (myItem && myItem.routes) {
-                continue;
-            } // Skip nested routes
-            myItems.push(_jsx(MenuSimpleItem, { name: myItem.name, path: myItem.path, target: myItem.target || undefined, hidden: myItem.hidden || undefined }, itemKey));
+            if (!myItem)
+                continue; // Skip null/undefined items
+            if (myItem.routes)
+                continue; // Skip nested routes
+            myItems.push(_jsx(MenuSimpleItem, { name: myItem.name, path: myItem.path || '', target: myItem.target || undefined, hidden: myItem.hidden || undefined }, itemKey));
         }
         return myItems;
     }
@@ -45,7 +45,7 @@ export function MenuSimple(props) {
 /* ========== MENU ITEM ========== */
 MenuSimpleItem.propTypes = {
     name: PropTypes.string.isRequired,
-    path: PropTypes.string,
+    path: PropTypes.string.isRequired,
     target: PropTypes.string,
     hidden: PropTypes.bool,
     routes: PropTypes.array,

package/dist/components/nerdjoke/nerdjoke.js

@@ -7,7 +7,7 @@ import "./nerdjoke.css";
 const debug = false;
 const TIME_LIMIT = 15;
 NerdJoke.propTypes = {};
-export function NerdJoke( /* props: NerdJokeType */) {
+export function NerdJoke(props) {
     const [joke, setJoke] = useState({ question: "", answer: "" });
     const timerIntervalRef = useRef(null);
     const jokeIntervalRef = useRef(null);