@otl-core/next-navigation 1.1.21 → 1.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from "react";
|
|
3
2
|
import { resolveItemVisibility } from "../../lib/navigation.utils";
|
|
4
3
|
import { MobileMenuToggle } from "../mobile/mobile-menu-toggle";
|
|
5
4
|
import { NavigationItem } from "./navigation-item";
|
|
@@ -13,12 +12,10 @@ const NavbarSections = ({
|
|
|
13
12
|
site,
|
|
14
13
|
mobileMenuId
|
|
15
14
|
}) => {
|
|
16
|
-
const hasLogo =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}, [section.items]);
|
|
21
|
-
const sectionStyle = useMemo(() => {
|
|
15
|
+
const hasLogo = section?.items?.some(
|
|
16
|
+
(item) => item.type === "logo"
|
|
17
|
+
);
|
|
18
|
+
const sectionStyle = (() => {
|
|
22
19
|
let flexValue = section.flex;
|
|
23
20
|
if (flexValue === "0" || flexValue === void 0) {
|
|
24
21
|
if (hasLogo) {
|
|
@@ -35,13 +32,13 @@ const NavbarSections = ({
|
|
|
35
32
|
// For non-logo sections, ensure they can shrink below content width
|
|
36
33
|
...!hasLogo ? { minWidth: 0 } : {}
|
|
37
34
|
};
|
|
38
|
-
}
|
|
39
|
-
const shouldHide =
|
|
35
|
+
})();
|
|
36
|
+
const shouldHide = (() => {
|
|
40
37
|
if (!section.hideWhenEmpty) return false;
|
|
41
|
-
const
|
|
38
|
+
const sectionHasLogo = section.items?.some(
|
|
42
39
|
(item) => item.type === "logo"
|
|
43
40
|
);
|
|
44
|
-
if (
|
|
41
|
+
if (sectionHasLogo) return false;
|
|
45
42
|
const hasAlwaysVisibleItems = section.items?.some(
|
|
46
43
|
(item) => resolveItemVisibility(item) === "navbar-only" || resolveItemVisibility(item) === "both"
|
|
47
44
|
);
|
|
@@ -52,15 +49,15 @@ const NavbarSections = ({
|
|
|
52
49
|
if (collapsibleItems && collapsibleItems.length > 0) return false;
|
|
53
50
|
if (isTogglerSection) return false;
|
|
54
51
|
return true;
|
|
55
|
-
}
|
|
56
|
-
const sectionVisibilityClass =
|
|
52
|
+
})();
|
|
53
|
+
const sectionVisibilityClass = (() => {
|
|
57
54
|
if (!section.hideWhenEmpty) return "";
|
|
58
55
|
const alwaysVisibleItems = section.items?.filter(
|
|
59
56
|
(item) => item.type === "logo" || resolveItemVisibility(item) === "navbar-only" || resolveItemVisibility(item) === "both"
|
|
60
57
|
);
|
|
61
58
|
if (alwaysVisibleItems && alwaysVisibleItems.length > 0) return "";
|
|
62
59
|
return itemsShowClass;
|
|
63
|
-
}
|
|
60
|
+
})();
|
|
64
61
|
if (shouldHide) {
|
|
65
62
|
return null;
|
|
66
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/sections/navbar-sections.tsx"],"sourcesContent":["import {\n Site,\n HeaderConfig,\n HeaderNavigationItem,\n HeaderSection,\n} from \"@otl-core/cms-types\";\nimport React
|
|
1
|
+
{"version":3,"sources":["../../../src/components/sections/navbar-sections.tsx"],"sourcesContent":["import {\n Site,\n HeaderConfig,\n HeaderNavigationItem,\n HeaderSection,\n} from \"@otl-core/cms-types\";\nimport React from \"react\";\nimport { resolveItemVisibility } from \"../../lib/navigation.utils\";\nimport { MobileMenuToggle } from \"../mobile/mobile-menu-toggle\";\nimport { NavigationItem } from \"./navigation-item\";\n\ninterface NavbarSectionProps {\n section: HeaderSection;\n logo?: {\n text?: string;\n url?: string;\n alt?: string;\n width?: number;\n height?: number;\n };\n navigation?: HeaderConfig;\n resolvedColors: Record<string, string | undefined>;\n itemsShowClass?: string;\n togglerHideClass?: string;\n isTogglerSection?: boolean;\n site: Site;\n mobileMenuId?: string;\n}\n\nexport const NavbarSections: React.FC<NavbarSectionProps> = ({\n section,\n navigation,\n resolvedColors,\n itemsShowClass,\n togglerHideClass,\n isTogglerSection,\n site,\n mobileMenuId,\n}) => {\n // Check if this section contains a logo\n const hasLogo = section?.items?.some(\n (item: HeaderNavigationItem) => item.type === \"logo\",\n );\n\n const sectionStyle: React.CSSProperties = (() => {\n let flexValue = section.flex;\n\n // Smart flex handling for better logo and navigation behavior\n if (flexValue === \"0\" || flexValue === undefined) {\n if (hasLogo) {\n // Logo section: Don't shrink, take natural size\n flexValue = \"0 0 auto\";\n } else {\n // Other sections with flex: 0 - allow shrinking if needed\n flexValue = \"0 1 auto\";\n }\n }\n\n return {\n flex: flexValue,\n justifyContent: section.justify || \"flex-start\",\n alignItems: section.align || \"center\",\n gap: section.gap || \"0\",\n // For non-logo sections, ensure they can shrink below content width\n ...(!hasLogo ? { minWidth: 0 } : {}),\n };\n })();\n\n // Check if section should be hidden when empty\n const shouldHide = (() => {\n if (!section.hideWhenEmpty) return false;\n\n // Never hide if there's a logo - logos are always visible\n const sectionHasLogo = section.items?.some(\n (item: HeaderNavigationItem) => item.type === \"logo\",\n );\n if (sectionHasLogo) return false;\n\n // Never hide if there are items with visibility: navbar-only or both - they're always visible\n const hasAlwaysVisibleItems = section.items?.some(\n (item: HeaderNavigationItem) =>\n resolveItemVisibility(item) === \"navbar-only\" ||\n resolveItemVisibility(item) === \"both\",\n );\n if (hasAlwaysVisibleItems) return false;\n\n // Check if there are any collapsible items (responsive or mobile-only)\n const collapsibleItems = section.items?.filter(\n (item: HeaderNavigationItem) =>\n item.type !== \"logo\" &&\n resolveItemVisibility(item) !== \"navbar-only\" &&\n resolveItemVisibility(item) !== \"both\",\n );\n\n // If there are collapsible items, section is not empty\n if (collapsibleItems && collapsibleItems.length > 0) return false;\n\n // Don't hide if this is the toggler section (toggler button should show)\n if (isTogglerSection) return false;\n\n return true;\n })();\n\n // Apply the same visibility class as items if hideWhenEmpty is enabled\n const sectionVisibilityClass = (() => {\n if (!section.hideWhenEmpty) return \"\";\n\n // Check if there are any items that are always visible (logos or navbar-only/both)\n const alwaysVisibleItems = section.items?.filter(\n (item: HeaderNavigationItem) =>\n item.type === \"logo\" ||\n resolveItemVisibility(item) === \"navbar-only\" ||\n resolveItemVisibility(item) === \"both\",\n );\n\n // If there are always visible items, don't apply visibility class\n if (alwaysVisibleItems && alwaysVisibleItems.length > 0) return \"\";\n\n // If all items collapse, apply the same visibility class\n return itemsShowClass;\n })();\n\n if (shouldHide) {\n return null;\n }\n\n return (\n <div\n className={`flex flex-row ${sectionVisibilityClass}`}\n style={sectionStyle}\n data-section-id={section.id}\n >\n {section.items?.map((item: HeaderNavigationItem) => {\n return (\n <NavigationItem\n key={item.id}\n item={item}\n navigation={navigation}\n resolvedColors={resolvedColors}\n itemsShowClass={itemsShowClass}\n site={site}\n />\n );\n })}\n {isTogglerSection && navigation && mobileMenuId && (\n <div className={`flex flex-shrink-0 ${togglerHideClass}`}>\n <MobileMenuToggle\n navigation={navigation}\n resolvedColors={resolvedColors}\n toggleId={`toggler-${section.id}`}\n mobileMenuId={mobileMenuId}\n />\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"AA+HI,SAOM,KAPN;AAxHJ,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAoBxB,MAAM,iBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,UAAU,SAAS,OAAO;AAAA,IAC9B,CAAC,SAA+B,KAAK,SAAS;AAAA,EAChD;AAEA,QAAM,gBAAqC,MAAM;AAC/C,QAAI,YAAY,QAAQ;AAGxB,QAAI,cAAc,OAAO,cAAc,QAAW;AAChD,UAAI,SAAS;AAEX,oBAAY;AAAA,MACd,OAAO;AAEL,oBAAY;AAAA,MACd;AAAA,IACF;AAEA,WAAO;AAAA,MACL,MAAM;AAAA,MACN,gBAAgB,QAAQ,WAAW;AAAA,MACnC,YAAY,QAAQ,SAAS;AAAA,MAC7B,KAAK,QAAQ,OAAO;AAAA;AAAA,MAEpB,GAAI,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC;AAAA,IACpC;AAAA,EACF,GAAG;AAGH,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,QAAQ,cAAe,QAAO;AAGnC,UAAM,iBAAiB,QAAQ,OAAO;AAAA,MACpC,CAAC,SAA+B,KAAK,SAAS;AAAA,IAChD;AACA,QAAI,eAAgB,QAAO;AAG3B,UAAM,wBAAwB,QAAQ,OAAO;AAAA,MAC3C,CAAC,SACC,sBAAsB,IAAI,MAAM,iBAChC,sBAAsB,IAAI,MAAM;AAAA,IACpC;AACA,QAAI,sBAAuB,QAAO;AAGlC,UAAM,mBAAmB,QAAQ,OAAO;AAAA,MACtC,CAAC,SACC,KAAK,SAAS,UACd,sBAAsB,IAAI,MAAM,iBAChC,sBAAsB,IAAI,MAAM;AAAA,IACpC;AAGA,QAAI,oBAAoB,iBAAiB,SAAS,EAAG,QAAO;AAG5D,QAAI,iBAAkB,QAAO;AAE7B,WAAO;AAAA,EACT,GAAG;AAGH,QAAM,0BAA0B,MAAM;AACpC,QAAI,CAAC,QAAQ,cAAe,QAAO;AAGnC,UAAM,qBAAqB,QAAQ,OAAO;AAAA,MACxC,CAAC,SACC,KAAK,SAAS,UACd,sBAAsB,IAAI,MAAM,iBAChC,sBAAsB,IAAI,MAAM;AAAA,IACpC;AAGA,QAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAGhE,WAAO;AAAA,EACT,GAAG;AAEH,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,sBAAsB;AAAA,MAClD,OAAO;AAAA,MACP,mBAAiB,QAAQ;AAAA,MAExB;AAAA,gBAAQ,OAAO,IAAI,CAAC,SAA+B;AAClD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,YALK,KAAK;AAAA,UAMZ;AAAA,QAEJ,CAAC;AAAA,QACA,oBAAoB,cAAc,gBACjC,oBAAC,SAAI,WAAW,sBAAsB,gBAAgB,IACpD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,WAAW,QAAQ,EAAE;AAAA,YAC/B;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@otl-core/next-navigation",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.23",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Reusable navigation components for OTL CMS",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -48,13 +48,13 @@
|
|
|
48
48
|
"tailwind-merge": "^3.3.1"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@otl-core/cms-utils": "^1.1.
|
|
52
|
-
"@otl-core/style-utils": "^1.1.
|
|
51
|
+
"@otl-core/cms-utils": "^1.1.23",
|
|
52
|
+
"@otl-core/style-utils": "^1.1.23"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@eslint/eslintrc": "^3.3.1",
|
|
56
|
-
"@otl-core/cms-types": "^1.1.
|
|
57
|
-
"@otl-core/cms-utils": "^1.1.
|
|
56
|
+
"@otl-core/cms-types": "^1.1.23",
|
|
57
|
+
"@otl-core/cms-utils": "^1.1.23",
|
|
58
58
|
"@radix-ui/react-focus-scope": "^1.1.7",
|
|
59
59
|
"@radix-ui/react-slot": "^1.2.3",
|
|
60
60
|
"@testing-library/jest-dom": "^6.9.1",
|