pallote-react 0.16.12 → 0.16.14

package/dist/components/CardHeader.d.ts

@@ -1,12 +1,15 @@
 import React, { HTMLAttributes, ReactElement } from 'react';
+type CardHeaderTitleComponent = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     icon?: ReactElement<{
         className?: string;
     }>;
     label?: string;
     title: string;
-    subtitle?: string;
+    titleComponent?: CardHeaderTitleComponent;
+    subtitle?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
 }
-export declare const CardHeader: ({ icon, label, title, subtitle, actions, className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeader: ({ icon, label, title, titleComponent, subtitle, actions, className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as e$9 from 'react';
-import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId, useMemo } from 'react';
+import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId, useMemo, useCallback } from 'react';
 import classnames from 'classnames';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -389,11 +389,11 @@ const CardContent = ({ fullWidth, className, children, ...props }) => {
         ]), ...props, children: children }));
 };
 
-const CardHeader = ({ icon, label, title, subtitle, actions, className, ...props }) => {
+const CardHeader = ({ icon, label, title, titleComponent = 'h3', subtitle, actions, className, ...props }) => {
     return (jsxs("div", { className: classnames([
             'card_header',
             className
-        ]), ...props, children: [actions && (jsx("div", { className: "card_headerActions", children: actions })), icon ? e__default.cloneElement(icon, { className: `${icon.props.className ?? ''} card_icon` }) : null, label ? (jsx(Text, { className: classnames('card_label'), children: label })) : null, jsx(Text, { className: classnames('card_title'), children: title }), subtitle ? (jsx(Text, { className: classnames('card_subtitle'), children: subtitle })) : null] }));
+        ]), ...props, children: [actions && (jsx("div", { className: "card_headerActions", children: actions })), icon ? e__default.cloneElement(icon, { className: `${icon.props.className ?? ''} card_icon` }) : null, label ? (jsx(Text, { className: classnames('card_label'), children: label })) : null, jsx(Text, { component: titleComponent, className: classnames('card_title'), children: title }), subtitle ? (jsx(Text, { className: classnames('card_subtitle'), children: subtitle })) : null] }));
 };
 
 const CardMedia = ({ width, height, image, fullWidth, className, ...props }) => {
@@ -981,6 +981,15 @@ const NavBar = ({ logo, align, className, children, ...props }) => {
         setIsOpen(!isOpen);
         document.body.classList.toggle('js-navbar', !isOpen);
     };
+    const closeNav = useCallback(() => {
+        setIsOpen(false);
+        document.body.classList.remove('js-navbar');
+    }, []);
+    const handleNavClick = useCallback((e) => {
+        const target = e.target.closest('a, [role="link"]');
+        if (target)
+            closeNav();
+    }, [closeNav]);
     return (jsx("header", { children: jsxs(Section, { className: classnames([
                 'navbar',
                 {
@@ -988,7 +997,7 @@ const NavBar = ({ logo, align, className, children, ...props }) => {
                     'js-opened': isOpen
                 },
                 className
-            ]), ...props, children: [jsxs("div", { className: "navbar_main", children: [jsx("div", { className: "navbar_logo", children: logo }), jsx("button", { type: "button", "aria-label": isOpen ? "Close mobile menu" : "Open mobile menu", "aria-expanded": isOpen, "aria-controls": "navbar-nav", className: classnames('navbar_button', { 'js-opened': isOpen }), onClick: toggleNav, children: jsx("span", { "aria-hidden": "true" }) })] }), jsx("nav", { id: "navbar-nav", "aria-label": "Main navigation", className: classnames('navbar_nav nav', { 'js-opened': isOpen }), children: jsx("div", { className: 'nav_container', children: children }) })] }) }));
+            ]), ...props, children: [jsxs("div", { className: "navbar_main", children: [jsx("div", { className: "navbar_logo", children: logo }), jsx("button", { type: "button", "aria-label": isOpen ? "Close mobile menu" : "Open mobile menu", "aria-expanded": isOpen, "aria-controls": "navbar-nav", className: classnames('navbar_button', { 'js-opened': isOpen }), onClick: toggleNav, children: jsx("span", { "aria-hidden": "true" }) })] }), jsx("nav", { id: "navbar-nav", "aria-label": "Main navigation", className: classnames('navbar_nav nav', { 'js-opened': isOpen }), onClick: handleNavClick, children: jsx("div", { className: 'nav_container', children: children }) })] }) }));
 };
 
 const NavItem = ({ component, label, active, dropdown, icon, end, to, className, ...props }) => {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.12",
+  "version": "0.16.14",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pallote-react",
-  "version": "0.16.12",
+  "version": "0.16.14",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "classnames": "^2.5.1",
     "react-syntax-highlighter": "^15.6.1",
     "sass": "^1.71.1",
-    "pallote-css": "^0.10.7"
+    "pallote-css": "^0.10.9"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",