@patternfly/patternfly-doc-core 1.4.0 → 1.5.0

package/src/components/Navigation.astro

@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content'
 
 import { Navigation as ReactNav } from './Navigation.tsx'
+import { TextContentEntry } from './NavEntry.tsx'
 
 import { content } from '../content'
 
@@ -13,12 +14,56 @@ const collections = await Promise.all(
   ),
 )
 
-const navEntries = collections.flat()
+const navDataRaw = collections.flat();
+const uniqueSections = new Set(navDataRaw.map((entry) => entry.data.section));
+const navData: Record<string, TextContentEntry[]> = {};
+
+const [orderedSections, unorderedSections] = Array.from(uniqueSections).reduce(
+    (acc, section) => {
+      if (!config.navSectionOrder) {
+        acc[1].push(section)
+        return acc
+      }
+
+      const index = config.navSectionOrder.indexOf(section)
+      if (index > -1) {
+        acc[0][index] = section
+      } else {
+        acc[1].push(section)
+      }
+      return acc
+    },
+    [[], []] as [string[], string[]],
+  )
+
+const sortedSections = [...orderedSections, ...unorderedSections.sort()]
+sortedSections.map((section) => {
+  const entries = navDataRaw
+    .filter((entry) => entry.data.section === section)
+    .map(entry => ({ id: entry.id, data: { id: entry.data.id, section }} as TextContentEntry))
+
+  const sortedEntries = entries.sort((a, b) =>
+    a.data.id.localeCompare(b.data.id),
+  )
+
+  let navEntries = sortedEntries
+  if (section === 'components' || section === 'layouts') {
+    // only display unique entry.data.id in the nav list if the section is components
+    navEntries = [
+      ...sortedEntries
+        .reduce((map, entry) => {
+          if (!map.has(entry.data.id)) {
+            map.set(entry.data.id, entry)
+          }
+          return map
+        }, new Map())
+        .values(),
+    ]
+  }
+
+  navData[section] = navEntries;
+})
+
 ---
 
-<ReactNav
-  client:only="react"
-  navEntries={navEntries}
-  navSectionOrder={config.navSectionOrder}
-  transition:animate="fade"
-/>
+<ReactNav client:only="react" navData={navData} transition:animate="fade" />

package/src/components/Navigation.tsx

@@ -4,19 +4,17 @@ import { NavSection } from './NavSection'
 import { type TextContentEntry } from './NavEntry'
 
 interface NavigationProps {
-  navEntries: TextContentEntry[]
-  navSectionOrder?: string[]
+  navData: Record<string, TextContentEntry[]>
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
-  navEntries,
-  navSectionOrder,
+  navData,
 }: NavigationProps) => {
   const [activeItem, setActiveItem] = useState('')
 
   useEffect(() => {
     // TODO: Needs an alternate solution because of /tab in the path
-    setActiveItem(window.location.pathname.split('/').reverse()[0]) 
+    setActiveItem(window.location.pathname.split('/').reverse()[0])
   }, [])
 
   const onNavSelect = (
@@ -26,48 +24,20 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     setActiveItem(selectedItem.itemId.toString())
   }
 
-  const uniqueSections = Array.from(
-    new Set(navEntries.map((entry) => entry.data.section)),
-  )
-
-  // We want to list any ordered sections first, followed by any unordered sections sorted alphabetically
-  const [orderedSections, unorderedSections] = uniqueSections.reduce(
-    (acc, section) => {
-      if (!navSectionOrder) {
-        acc[1].push(section)
-        return acc
-      }
-
-      const index = navSectionOrder.indexOf(section)
-      if (index > -1) {
-        acc[0][index] = section
-      } else {
-        acc[1].push(section)
-      }
-      return acc
-    },
-    [[], []] as [string[], string[]],
-  )
-  const sortedSections = [...orderedSections, ...unorderedSections.sort()]
-
-  const navSections = sortedSections.map((section) => {
-    const entries = navEntries.filter((entry) => entry.data.section === section)
-
-    return (
-      <NavSection
-        key={section}
-        entries={entries}
-        sectionId={section}
-        activeItem={activeItem}
-      />
-    )
-  })
-
   return (
     // Can possibly add back PageSidebar wrapper when https://github.com/patternfly/patternfly/issues/7377 goes in
     <PageSidebarBody id="page-sidebar-body">
       <Nav onSelect={onNavSelect}>
-        <NavList>{navSections}</NavList>
+        <NavList>
+          {Object.entries(navData).map(([key, value], index) => (
+            <NavSection
+              key={index}
+              entries={value}
+              sectionId={key}
+              activeItem={activeItem}
+            />
+          ))}
+        </NavList>
       </Nav>
     </PageSidebarBody>
   )

package/dist/client/_astro/Navigation.75VF_8AW.js

@@ -1 +0,0 @@
-import{f as ee,_ as O,d as h,h as te,v as B,w as J,B as Q,u as xe,g as be,j as y}from"./Button.C3_jB5tC.js";import{r as t}from"./index.CTH3fVMn.js";/* empty css                        */import{g as Ie,A as Le,a as $,d as ye,P as Ne,m as Ce}from"./divider.BSD-oFoh.js";import{s as F}from"./page.B65lVdBS.js";const i={modifiers:{expanded:"pf-m-expanded",hover:"pf-m-hover",current:"pf-m-current",flyout:"pf-m-flyout",horizontal:"pf-m-horizontal",subnav:"pf-m-subnav",scrollable:"pf-m-scrollable"},nav:"pf-v6-c-nav",navItem:"pf-v6-c-nav__item",navLink:"pf-v6-c-nav__link",navLinkIcon:"pf-v6-c-nav__link-icon",navList:"pf-v6-c-nav__list",navScrollButton:"pf-v6-c-nav__scroll-button",navSubnav:"pf-v6-c-nav__subnav",navToggle:"pf-v6-c-nav__toggle",navToggleIcon:"pf-v6-c-nav__toggle-icon"},Ae={},A=t.createContext(Ae);class w extends t.Component{constructor(){super(...arguments),this.state={isScrollable:!1,ouiaStateId:ee(w.displayName,this.props.variant),flyoutRef:null},this.navRef=t.createRef()}onSelect(e,n,s,a,l,c){l&&e.preventDefault(),this.props.onSelect(e,{groupId:n,itemId:s,to:a}),c&&c(e,s,n,a)}onToggle(e,n,s){this.props.onToggle(e,{groupId:n,isExpanded:s})}render(){const e=this.props,{"aria-label":n,children:s,className:a,onSelect:l,onToggle:c,ouiaId:d,ouiaSafe:r,variant:p}=e,m=O(e,["aria-label","children","className","onSelect","onToggle","ouiaId","ouiaSafe","variant"]),v=["horizontal","horizontal-subnav"].includes(p);return t.createElement(A.Provider,{value:{onSelect:(g,I,E,R,N,P)=>this.onSelect(g,I,E,R,N,P),onToggle:(g,I,E)=>this.onToggle(g,I,E),updateIsScrollable:g=>this.setState({isScrollable:g}),isHorizontal:["horizontal","horizontal-subnav"].includes(p),flyoutRef:this.state.flyoutRef,setFlyoutRef:g=>this.setState({flyoutRef:g}),navRef:this.navRef}},t.createElement("nav",Object.assign({className:h(i.nav,v&&i.modifiers.horizontal,p==="horizontal-subnav"&&i.modifiers.subnav,this.state.isScrollable&&i.modifiers.scrollable,a),"aria-label":n||(p==="horizontal-subnav"?"Local":"Global"),ref:this.navRef},te(w.displayName,d!==void 0?d:this.state.ouiaStateId,r),m),s))}}w.displayName="Nav";w.defaultProps={onSelect:()=>{},onToggle:()=>{},ouiaSafe:!0};const we={isSidebarOpen:!0},M=t.createContext(we);class U extends t.Component{constructor(){super(...arguments),this.direction="ltr",this.state={scrollViewAtStart:!1,scrollViewAtEnd:!1},this.navList=t.createRef(),this.observer=()=>{},this.handleScrollButtons=()=>{const e=this.navList.current;if(e){const n=B(e,e.firstChild),s=B(e,e.lastChild);this.setState({scrollViewAtStart:n,scrollViewAtEnd:s}),this.context.updateIsScrollable(!n||!s)}},this.scrollBack=()=>{const e=this.navList.current;if(e){const n=Array.from(e.children);let s,a;for(let l=0;l<n.length&&!s;l++)B(e,n[l])&&(s=n[l],a=n[l-1]);a&&(this.direction==="ltr"?e.scrollLeft-=a.scrollWidth:e.scrollLeft+=a.scrollWidth),this.handleScrollButtons()}},this.scrollForward=()=>{const e=this.navList.current;if(e){const n=Array.from(e.children);let s,a;for(let l=n.length-1;l>=0&&!s;l--)B(e,n[l])&&(s=n[l],a=n[l+1]);a&&(this.direction==="ltr"?e.scrollLeft+=a.scrollWidth:e.scrollLeft-=a.scrollWidth),this.handleScrollButtons()}}}componentDidMount(){this.observer=Ie(this.navList.current,this.handleScrollButtons),this.direction=J(this.navList.current),this.handleScrollButtons()}componentWillUnmount(){this.observer()}componentDidUpdate(){this.direction=J(this.navList.current)}render(){const e=this.props,{children:n,className:s,backScrollAriaLabel:a,forwardScrollAriaLabel:l}=e,c=O(e,["children","className","backScrollAriaLabel","forwardScrollAriaLabel"]),{scrollViewAtStart:d,scrollViewAtEnd:r}=this.state;return t.createElement(A.Consumer,null,({isHorizontal:p})=>t.createElement(M.Consumer,null,({isSidebarOpen:m})=>t.createElement(t.Fragment,null,p&&(!d||!r)&&t.createElement("div",{className:h(i.navScrollButton)},t.createElement(Q,{variant:"plain","aria-label":a,onClick:this.scrollBack,isDisabled:d,tabIndex:m?null:-1,icon:t.createElement(Le,null)})),t.createElement("ul",Object.assign({ref:this.navList,className:h(i.navList,s),onScroll:this.handleScrollButtons,role:"list"},c),n),p&&(!d||!r)&&t.createElement("div",{className:h(i.navScrollButton)},t.createElement(Q,{variant:"plain","aria-label":l,onClick:this.scrollForward,isDisabled:r,tabIndex:m?null:-1,icon:t.createElement($,null)})))))}}U.displayName="NavList";U.contextType=A;U.defaultProps={backScrollAriaLabel:"Scroll back",forwardScrollAriaLabel:"Scroll foward"};const W=o=>{var{children:e,styleChildren:n=!0,className:s,to:a,isActive:l=!1,groupId:c=null,itemId:d=null,preventDefault:r=!1,onClick:p,component:m="a",flyout:v,onShowFlyout:g,ouiaId:I,ouiaSafe:E,zIndex:R=9999,icon:N}=o,P=O(o,["children","styleChildren","className","to","isActive","groupId","itemId","preventDefault","onClick","component","flyout","onShowFlyout","ouiaId","ouiaSafe","zIndex","icon"]);const{flyoutRef:T,setFlyoutRef:j,navRef:V}=t.useContext(A),{isSidebarOpen:re}=t.useContext(M),[z,ie]=t.useState(null),[ce,H]=t.useState(!1),L=t.useRef(),x=L===T,C=t.useRef(),S=v!==void 0,de=S?"button":m;a&&S&&console.error('NavItem cannot have both "to" and "flyout" props.');const D=(u,f)=>{(!x||f)&&u?j(L):(x||f)&&!u&&j(null),g&&u&&g()},ue=u=>{const f=u.target.closest(`.${i.navItem}.pf-m-flyout`);S&&!x?D(!0):T!==null&&!f&&j(null)},q=u=>{u.target.closest(".pf-m-flyout")||(S?D(!1,!0):T!==null&&j(null))},pe=u=>{var f,b;const k=u.key,K=u.target;(k===" "||k==="Enter"||k==="ArrowRight")&&S&&(!((f=L?.current)===null||f===void 0)&&f.contains(K))&&(u.stopPropagation(),u.preventDefault(),x||(D(!0),ie(K))),(k==="Escape"||k==="ArrowLeft")&&((b=C?.current)===null||b===void 0?void 0:b.querySelectorAll(`.${Ce.menu}`).length)===1&&x&&(u.stopPropagation(),u.preventDefault(),D(!1))};t.useEffect(()=>(S&&window.addEventListener("click",q),()=>{S&&window.removeEventListener("click",q)}),[]),t.useEffect(()=>{z&&(x?Array.from(C.current.getElementsByTagName("UL")[0].children).filter(f=>!(f.classList.contains("pf-m-disabled")||f.classList.contains(ye.divider)))[0].firstChild.focus():z.focus())},[x,z]);const X=t.createElement("span",{className:h(i.navToggle)},t.createElement("span",{className:h(i.navToggleIcon)},t.createElement($,{"aria-hidden":!0}))),fe={"aria-haspopup":"menu","aria-expanded":x},G=re?null:-1,me=u=>{const f=r||!a;return t.createElement(de,Object.assign({href:a,onClick:b=>u.onSelect(b,c,d,a,f,p),className:h(i.navLink,l&&i.modifiers.current,ce&&i.modifiers.hover,s),"aria-current":l?"page":null,tabIndex:G},S&&Object.assign({},fe),P),N&&t.createElement("span",{className:h(i.navLinkIcon)},N),t.createElement("span",{className:h(`${i.nav}__link-text`)},e),v&&X)},he=(u,f)=>t.cloneElement(f,Object.assign(Object.assign({onClick:b=>u.onSelect(b,c,d,a,r,p),"aria-current":l?"page":null},n&&{className:h(i.navLink,l&&i.modifiers.current,f.props&&f.props.className)}),{tabIndex:f.props.tabIndex||G,children:S?t.createElement(t.Fragment,null,f.props.children,X):f.props.children})),ve=xe(W.displayName,I,E),ge=()=>{H(!0)},Se=()=>{H(!1)},Ee=t.createElement(Ne,{triggerRef:L,popper:t.createElement("div",{ref:C,onMouseEnter:ge,onMouseLeave:Se},v),popperRef:C,placement:"right-start",isVisible:x,onDocumentKeyDown:pe,zIndex:R,appendTo:V?.current});return t.createElement(t.Fragment,null,t.createElement("li",Object.assign({onMouseOver:ue,className:h(i.navItem,S&&i.modifiers.flyout,s),ref:L},ve),t.createElement(A.Consumer,null,u=>t.isValidElement(e)?he(u,e):me(u))),v&&Ee)};W.displayName="NavItem";class _ extends t.Component{constructor(){super(...arguments),this.id=this.props.id||be(),this.state={expandedState:this.props.isExpanded,ouiaStateId:ee(_.displayName)},this.onExpand=(e,n)=>{const{expandedState:s}=this.state;if(this.props.onExpand)this.props.onExpand(e,!s);else{this.setState(l=>({expandedState:!l.expandedState}));const{groupId:a}=this.props;n(e,a,!s)}}}componentDidMount(){this.setState({expandedState:this.props.isExpanded})}componentDidUpdate(e){this.props.isExpanded!==e.isExpanded&&this.setState({expandedState:this.props.isExpanded})}render(){const e=this.props,{title:n,srText:s,children:a,className:l,isActive:c,ouiaId:d,groupId:r,id:p,isExpanded:m,buttonProps:v,onExpand:g}=e,I=O(e,["title","srText","children","className","isActive","ouiaId","groupId","id","isExpanded","buttonProps","onExpand"]),{expandedState:E,ouiaStateId:R}=this.state;return t.createElement(A.Consumer,null,N=>t.createElement("li",Object.assign({className:h(i.navItem,E&&i.modifiers.expanded,c&&i.modifiers.current,l)},te(_.displayName,d!==void 0?d:R),I),t.createElement(M.Consumer,null,({isSidebarOpen:P})=>t.createElement("button",Object.assign({className:h(i.navLink),id:s?null:this.id,onClick:T=>this.onExpand(T,N.onToggle),"aria-expanded":E,tabIndex:P?null:-1},v),typeof n!="string"?t.createElement("span",{className:h(`${i.nav}__link-text`)},n):n,t.createElement("span",{className:h(i.navToggle)},t.createElement("span",{className:h(i.navToggleIcon)},t.createElement($,{"aria-hidden":"true"}))))),t.createElement("section",{className:h(i.navSubnav),"aria-labelledby":this.id,hidden:E?null:!0},s&&t.createElement("h2",{className:"pf-v6-screen-reader",id:this.id},s),t.createElement("ul",{className:h(i.navList),role:"list"},a))))}}_.displayName="NavExpandable";_.defaultProps={srText:"",isExpanded:!1,children:"",className:"",groupId:null,isActive:!1,id:""};const ne=o=>{var{children:e,className:n,usePageInsets:s,isFilled:a,isContextSelector:l}=o,c=O(o,["children","className","usePageInsets","isFilled","isContextSelector"]);return t.createElement("div",Object.assign({className:h(F.pageSidebarBody,s&&F.modifiers.pageInsets,a===!1&&F.modifiers.noFill,a===!0&&F.modifiers.fill,l===!0&&F.modifiers.contextSelector,n)},c),e)};ne.displayName="PageSidebarBody";const _e=/([\p{Ll}\d])(\p{Lu})/gu,Re=/(\p{Lu})([\p{Lu}][\p{Ll}])/gu,Pe=/(\d)\p{Ll}|(\p{L})\d/u,Te=/[^\p{L}\d]+/giu,Y="$1\0$2",Z="";function se(o){let e=o.trim();e=e.replace(_e,Y).replace(Re,Y),e=e.replace(Te,"\0");let n=0,s=e.length;for(;e.charAt(n)==="\0";)n++;if(n===s)return[];for(;e.charAt(s-1)==="\0";)s--;return e.slice(n,s).split(/\0/g)}function ke(o){const e=se(o);for(let n=0;n<e.length;n++){const s=e[n],a=Pe.exec(s);if(a){const l=a.index+(a[1]??a[2]).length;e.splice(n,1,s.slice(0,l),s.slice(l))}}return e}function Fe(o,e){const[n,s,a]=oe(o,e);return n+s.map(le(e?.locale)).join(e?.delimiter??" ")+a}function ae(o,e){return Fe(o,{delimiter:"-",...e})}function Oe(o,e){const[n,s,a]=oe(o,e),l=le(e?.locale),c=je(e?.locale),d=De(l,c);return n+s.map((r,p)=>p===0?d(r):l(r)).join(" ")+a}function le(o){return o===!1?e=>e.toLowerCase():e=>e.toLocaleLowerCase(o)}function je(o){return e=>e.toLocaleUpperCase(o)}function De(o,e){return n=>`${e(n[0])}${o(n.slice(1))}`}function oe(o,e={}){const n=e.split??(e.separateNumbers?ke:se),s=e.prefixCharacters??Z,a=e.suffixCharacters??Z;let l=0,c=o.length;for(;l<o.length;){const d=o.charAt(l);if(!s.includes(d))break;l++}for(;c>l;){const d=c-1,r=o.charAt(d);if(!a.includes(r))break;c=d}return[o.slice(0,l),n(o.slice(l,c)),o.slice(c)]}const Be=({entry:o,isActive:e})=>{const{id:n}=o,{id:s,section:a}=o.data,l=a==="components"||a==="layouts"?ae(s):n;return y.jsx(W,{itemId:l,to:`/${a}/${l}`,isActive:e,id:`nav-entry-${l}`,children:s})},Ue=({entries:o,sectionId:e,activeItem:n})=>{const s=window.location.pathname.includes(e),a=o.sort((r,p)=>r.data.id.localeCompare(p.data.id)),l=a.some(r=>r.id===n);let c=a;(e==="components"||e==="layouts")&&(c=[...a.reduce((r,p)=>(r.has(p.data.id)||r.set(p.data.id,p),r),new Map).values()]);const d=c.map(r=>y.jsx(Be,{entry:r,isActive:n===r.id||window.location.pathname.includes(ae(r.data.id))},r.id));return y.jsx(_,{title:Oe(e),isActive:l,isExpanded:s,id:`nav-section-${e}`,children:d})},qe=({navEntries:o,navSectionOrder:e})=>{const[n,s]=t.useState("");t.useEffect(()=>{s(window.location.pathname.split("/").reverse()[0])},[]);const a=(m,v)=>{s(v.itemId.toString())},l=Array.from(new Set(o.map(m=>m.data.section))),[c,d]=l.reduce((m,v)=>{if(!e)return m[1].push(v),m;const g=e.indexOf(v);return g>-1?m[0][g]=v:m[1].push(v),m},[[],[]]),p=[...c,...d.sort()].map(m=>{const v=o.filter(g=>g.data.section===m);return y.jsx(Ue,{entries:v,sectionId:m,activeItem:n},m)});return y.jsx(ne,{id:"page-sidebar-body",children:y.jsx(w,{onSelect:a,children:y.jsx(U,{children:p})})})};export{qe as Navigation};