@patternfly/patternfly-doc-core 1.3.0 → 1.4.0

package/src/components/Navigation.tsx

@@ -5,10 +5,12 @@ import { type TextContentEntry } from './NavEntry'
 
 interface NavigationProps {
   navEntries: TextContentEntry[]
+  navSectionOrder?: string[]
 }
 
 export const Navigation: React.FunctionComponent<NavigationProps> = ({
   navEntries,
+  navSectionOrder,
 }: NavigationProps) => {
   const [activeItem, setActiveItem] = useState('')
 
@@ -24,9 +26,31 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     setActiveItem(selectedItem.itemId.toString())
   }
 
-  const sections = new Set(navEntries.map((entry) => entry.data.section))
+  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 = Array.from(sections).map((section) => {
+  const navSections = sortedSections.map((section) => {
     const entries = navEntries.filter((entry) => entry.data.section === section)
 
     return (

package/src/pf-docs.config.mjs

@@ -0,0 +1,21 @@
+export const config = {
+  content: [
+    // example content entry for local content, this would feed all markdown files in the content directory to the
+    // documentation core with a content identifier of 'content':
+    // {
+    //   base: 'content',
+    //   pattern: "*.md",
+    //   name: 'content'
+    // },
+    //
+    // example content entry for remote content, this would fetch all markdown files matching the glob in 'pattern'
+    // from the specified npm package and serve them with a content identifier of 'react-component-docs':
+    // {
+    //   packageName: "@patternfly/react-core",
+    //   pattern: "**/components/**/*.md",
+    //   name: "react-component-docs",
+    // },
+  ],
+  outputDir: "./dist/docs",
+  navSectionOrder: ["get-started", "design-foundations"]
+};

package/dist/client/_astro/Navigation.Cede__Ud.js

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