retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 2.48 kB
JavaScript
import{__rest as e}from"../../_virtual/_tslib.js";import t,{forwardRef as a}from"react";import{jsxs as i,jsx as r}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as s}from"../../utils/classNames.js";import o from"../../constants/commonClassNames.js";import{TruncationIndicator as n,BreadcrumbActive as c,BreadcrumbIcon as l,BreadcrumbAnchor as d,Breadcrumb as m,BreadcrumbSeparator as b,CopyButton as h,BreadcrumbsWrapper as u}from"./Breadcrumbs.styled.js";const p=a(((a,p)=>{var{id:v,className:f,children:g,items:j=[],maxItems:x,separator:y="arrow",showCopyButton:C=!1,onCopy:N,sx:k}=a,w=e(a,["id","className","children","items","maxItems","separator","showCopyButton","onCopy","sx"]);const O=e=>t=>{e.disabled?t.preventDefault():(e.href&&""!==e.href||t.preventDefault(),e.onClick&&e.onClick(t))},B=e=>t=>{e.disabled||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),e.onClick?e.onClick(t):e.href&&(window.location.href=e.href))},$=(()=>{if(!x||j.length<=x)return j;return[j[0],{text:"...",disabled:!0},...j.slice(-(x-2))]})(),D=e=>{switch(e){case"arrow":default:return">";case"backslash":return"\\";case"dot":return"•";case"pipe":return"|"}};return i(u,Object.assign({ref:p,id:v,className:s("breadcrumbs-root",f,o),role:"navigation","aria-label":"Breadcrumb navigation"},w,{children:[$.map(((e,a)=>i(t.Fragment,{children:[r(m,Object.assign({$active:e.active,$disabled:e.disabled,className:"breadcrumb",role:"listitem"},{children:"..."===e.text?r(n,Object.assign({title:j.length-x+1+" items hidden","aria-label":j.length-x+1+" items hidden"},{children:"..."}),void 0):e.active?i(c,Object.assign({className:"breadcrumb-active","aria-current":"page"},{children:[e.icon&&r(l,{children:e.icon},void 0),e.text||""]}),void 0):i(d,Object.assign({href:e.href,$disabled:e.disabled,onClick:O(e),onKeyDown:B(e),className:"breadcrumb-anchor",tabIndex:e.disabled?-1:0,"aria-label":`Navigate to ${e.text}`},{children:[e.icon&&r(l,{children:e.icon},void 0),e.text||""]}),void 0)}),void 0),a<$.length-1&&r(b,Object.assign({$type:y,"aria-hidden":"true"},{children:D(y)}),void 0)]},a))),C&&r(h,Object.assign({onClick:()=>{var e;const t=j.map((e=>e.text)).join(" > ");null===(e=navigator.clipboard)||void 0===e||e.writeText(t).then((()=>{N&&N(t)}))},title:"Copy path to clipboard","aria-label":"Copy breadcrumb path to clipboard",type:"button"},{children:"📋"}),void 0)]}),void 0)}));p.displayName="Breadcrumbs";export{p as Breadcrumbs};