@pallasoft/ps-core-components 2.8.1 → 2.10.0

package/dist/components/ps-site-header.js

@@ -4,12 +4,15 @@ exports.PsSiteHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_site_header_config_1 = require("../constants/ps-site-header-config");
+const use_ps_published_height_1 = require("../hooks/use-ps-published-height");
 const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
 const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
+    const headerRef = (0, use_ps_published_height_1.usePsPublishedHeight)(ps_site_header_config_1.PsSiteHeaderConfig.heightVariable);
     const logoLabel = `${label} home`;
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), src: src }));
     const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), (0, jsx_runtime_1.jsx)("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, to: homeHref, children: logoContent })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return ((0, jsx_runtime_1.jsx)("header", { className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };
 exports.PsSiteHeader = PsSiteHeader;

package/dist/constants/ps-site-header-config.d.ts

@@ -0,0 +1,3 @@
+export declare const PsSiteHeaderConfig: {
+    readonly heightVariable: "--ps-site-header-height";
+};

package/dist/constants/ps-site-header-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSiteHeaderConfig = void 0;
+exports.PsSiteHeaderConfig = {
+    heightVariable: '--ps-site-header-height',
+};

package/dist/esm/components/ps-site-header.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsSiteHeaderConfig } from '../constants/ps-site-header-config';
+import { usePsPublishedHeight } from '../hooks/use-ps-published-height';
 const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
 export const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
+    const headerRef = usePsPublishedHeight(PsSiteHeaderConfig.heightVariable);
     const logoLabel = `${label} home`;
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), src: src }), _jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), src: darkSrc })] })) : (_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, logoClassName), src: src }));
     const logoContent = logoSrcMobile ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), _jsx("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : (_jsxs(_Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? (_jsx(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, to: homeHref, children: logoContent })) : (_jsx("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return (_jsx("header", { className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };

package/dist/esm/constants/ps-site-header-config.js

@@ -0,0 +1,3 @@
+export const PsSiteHeaderConfig = {
+    heightVariable: '--ps-site-header-height',
+};

package/dist/esm/hooks/use-ps-debounced-value.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { Client } from '@pallasoft/ps-utilities';
+export const usePsDebouncedValue = (value, waitMs) => {
+    const [settled, setSettled] = useState(value);
+    useEffect(() => {
+        const debounced = Client.DebounceService.create((next) => setSettled(next), waitMs);
+        debounced.run(value);
+        return debounced.cancel;
+    }, [value, waitMs]);
+    return settled;
+};

package/dist/esm/hooks/use-ps-published-height.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+export const usePsPublishedHeight = (variableName) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return;
+        const publish = () => document.documentElement.style.setProperty(variableName, `${element.offsetHeight}px`);
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [variableName]);
+    return elementRef;
+};

package/dist/esm/index.js

@@ -19,6 +19,8 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
+export * from './hooks/use-ps-published-height';
+export * from './constants/ps-site-header-config';
 export * from './components/ps-skeleton';
 export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
@@ -41,6 +43,7 @@ export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-voice-orb';
 export * from './models/ps-navigation-progress';
+export * from './hooks/use-ps-debounced-value';
 export * from './hooks/use-ps-navigation-progress';
 export * from './models/ps-draggable-grid';
 export * from './constants/ps-draggable-grid';

package/dist/hooks/use-ps-debounced-value.d.ts

@@ -0,0 +1 @@
+export declare const usePsDebouncedValue: <T>(value: T, waitMs: number) => T;

package/dist/hooks/use-ps-debounced-value.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsDebouncedValue = void 0;
+const react_1 = require("react");
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
+const usePsDebouncedValue = (value, waitMs) => {
+    const [settled, setSettled] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        const debounced = ps_utilities_1.Client.DebounceService.create((next) => setSettled(next), waitMs);
+        debounced.run(value);
+        return debounced.cancel;
+    }, [value, waitMs]);
+    return settled;
+};
+exports.usePsDebouncedValue = usePsDebouncedValue;

package/dist/hooks/use-ps-published-height.d.ts

@@ -0,0 +1 @@
+export declare const usePsPublishedHeight: <T extends HTMLElement>(variableName: string) => import("react").MutableRefObject<T | null>;

package/dist/hooks/use-ps-published-height.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsPublishedHeight = void 0;
+const react_1 = require("react");
+const usePsPublishedHeight = (variableName) => {
+    const elementRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const element = elementRef.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return;
+        const publish = () => document.documentElement.style.setProperty(variableName, `${element.offsetHeight}px`);
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [variableName]);
+    return elementRef;
+};
+exports.usePsPublishedHeight = usePsPublishedHeight;

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
+export * from './hooks/use-ps-published-height';
+export * from './constants/ps-site-header-config';
 export * from './components/ps-skeleton';
 export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
@@ -41,6 +43,7 @@ export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-voice-orb';
 export * from './models/ps-navigation-progress';
+export * from './hooks/use-ps-debounced-value';
 export * from './hooks/use-ps-navigation-progress';
 export * from './models/ps-draggable-grid';
 export * from './constants/ps-draggable-grid';

package/dist/index.js

@@ -35,6 +35,8 @@ __exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-step-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
+__exportStar(require("./hooks/use-ps-published-height"), exports);
+__exportStar(require("./constants/ps-site-header-config"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
 __exportStar(require("./constants/ps-skeleton-shape"), exports);
 __exportStar(require("./components/ps-skeleton-card"), exports);
@@ -57,6 +59,7 @@ __exportStar(require("./hooks/use-ps-viewport"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);
 __exportStar(require("./models/ps-navigation-progress"), exports);
+__exportStar(require("./hooks/use-ps-debounced-value"), exports);
 __exportStar(require("./hooks/use-ps-navigation-progress"), exports);
 __exportStar(require("./models/ps-draggable-grid"), exports);
 __exportStar(require("./constants/ps-draggable-grid"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.8.1",
+	"version": "2.10.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -36,6 +36,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.1.0",
+		"@pallasoft/ps-utilities": "^2.2.0",
 		"@portabletext/react": "^3.2.4",
 		"@portabletext/types": "^2.0.13",
 		"@radix-ui/react-accordion": "^1.2.12",