@phpsoftbox/react-softbox 1.13.1 → 1.14.0

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -19,6 +19,10 @@ type Props = {
     separator?: React.ReactNode;
     className?: string;
     as?: LinkComponent;
+    maxVisibleItems?: number;
+    overflowTailCount?: number;
+    overflowLabel?: React.ReactNode;
+    overflowAriaLabel?: string;
 };
-export default function Breadcrumbs({ items, separator, className, as }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Breadcrumbs({ items, separator, className, as, maxVisibleItems, overflowTailCount, overflowLabel, overflowAriaLabel, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,15 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Dropdown from '../Menu/Dropdown';
 import styles from './Breadcrumbs.module.css';
-export default function Breadcrumbs({ items, separator = '›', className, as }) {
+function resolveRenderNodes(items, maxVisibleItems, overflowTailCount) {
+    if (maxVisibleItems < 3 || items.length <= maxVisibleItems) {
+        return items.map((item, index) => ({ type: 'item', item, index }));
+    }
+    const safeTailCount = Math.max(1, Math.min(overflowTailCount, maxVisibleItems - 2));
+    const tailStart = Math.max(1, items.length - safeTailCount);
+    const hidden = items.slice(1, tailStart).map((item, hiddenIndex) => ({
+        item,
+        index: hiddenIndex + 1,
+    }));
+    if (hidden.length === 0) {
+        return items.map((item, index) => ({ type: 'item', item, index }));
+    }
+    const tail = items.slice(tailStart).map((item, tailIndex) => ({
+        type: 'item',
+        item,
+        index: tailStart + tailIndex,
+    }));
+    return [{ type: 'item', item: items[0], index: 0 }, { type: 'overflow', items: hidden }, ...tail];
+}
+export default function Breadcrumbs({ items, separator = '›', className, as, maxVisibleItems = 4, overflowTailCount = 2, overflowLabel = '...', overflowAriaLabel = 'Show hidden breadcrumbs', }) {
     const hasExplicitCurrent = items.some((item) => item.current);
-    return (_jsx("nav", { className: [styles.breadcrumbs, className].filter(Boolean).join(' '), "aria-label": "Breadcrumbs", children: _jsx("ol", { className: styles.list, children: items.map((item, index) => {
-                const key = item.id ?? `${index}-${typeof item.label === 'string' ? item.label : 'item'}`;
-                const isLast = index === items.length - 1;
-                const isCurrent = item.current ?? (!hasExplicitCurrent && isLast);
+    const renderNodes = resolveRenderNodes(items, maxVisibleItems, overflowTailCount);
+    return (_jsx("nav", { className: [styles.breadcrumbs, className].filter(Boolean).join(' '), "aria-label": "Breadcrumbs", children: _jsx("ol", { className: styles.list, children: renderNodes.map((node, index) => {
+                const isLastNode = index === renderNodes.length - 1;
+                if (node.type === 'overflow') {
+                    return (_jsxs("li", { className: [styles.item, styles.overflowItem].join(' '), children: [_jsx(Dropdown, { align: "left", placement: "auto", className: styles.overflowDropdown, trigger: (_jsxs("span", { className: styles.overflowTrigger, children: [overflowLabel, _jsx("span", { className: styles.visuallyHidden, children: overflowAriaLabel })] })), children: _jsx(Dropdown.Nav, { className: styles.overflowMenu, children: node.items.map(({ item, index: originalIndex }) => {
+                                        const isCurrent = item.current ?? (!hasExplicitCurrent && originalIndex === items.length - 1);
+                                        const isDisabled = item.disabled ?? false;
+                                        const canFollowLink = Boolean(item.href && !isDisabled && !isCurrent);
+                                        const itemKey = item.id ?? `hidden-${originalIndex}`;
+                                        return (_jsx(Dropdown.Item, { className: styles.overflowMenuItem, href: canFollowLink ? item.href : undefined, onClick: !isDisabled ? item.onClick : undefined, as: canFollowLink ? (item.as ?? as) : undefined, disabled: isDisabled, static: !canFollowLink, children: item.label }, itemKey));
+                                    }) }) }), !isLastNode ? (_jsx("span", { className: styles.separator, "aria-hidden": "true", children: separator })) : null] }, `overflow-${node.items[0]?.index ?? index}`));
+                }
+                const item = node.item;
+                const key = item.id ?? `${node.index}-${typeof item.label === 'string' ? item.label : 'item'}`;
+                const isCurrent = item.current ?? (!hasExplicitCurrent && node.index === items.length - 1);
                 const isDisabled = item.disabled ?? false;
                 const LinkTag = item.as ?? as ?? 'a';
                 const content = (_jsx("span", { className: styles.label, "aria-current": isCurrent ? 'page' : undefined, children: item.label }));
-                return (_jsxs("li", { className: styles.item, children: [item.href && !isDisabled && !isCurrent ? (_jsx(LinkTag, { href: item.href, className: styles.link, onClick: item.onClick, children: content })) : (_jsx("span", { className: [styles.link, isDisabled ? styles.disabled : null].filter(Boolean).join(' '), onClick: isDisabled ? undefined : item.onClick, "aria-disabled": isDisabled ? 'true' : undefined, children: content })), !isLast ? _jsx("span", { className: styles.separator, "aria-hidden": "true", children: separator }) : null] }, key));
+                return (_jsxs("li", { className: styles.item, children: [item.href && !isDisabled && !isCurrent ? (_jsx(LinkTag, { href: item.href, className: styles.link, onClick: item.onClick, children: content })) : (_jsx("span", { className: [styles.link, isDisabled ? styles.disabled : null].filter(Boolean).join(' '), onClick: isDisabled ? undefined : item.onClick, "aria-disabled": isDisabled ? 'true' : undefined, children: content })), !isLastNode ? (_jsx("span", { className: styles.separator, "aria-hidden": "true", children: separator })) : null] }, key));
             }) }) }));
 }
 //# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,0BAA0B,CAAC;AA0B9C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,EAAE,EAAS;IAClF,MAAM,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAE9D,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAa,aAAa,YACjG,aAAI,SAAS,EAAE,MAAM,CAAC,IAAI,YACvB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;gBAC1F,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,kBAAkB,IAAI,MAAM,CAAC,CAAC;gBAClE,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;gBAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC;gBAErC,MAAM,OAAO,GAAG,CACd,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,kBAAgB,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YACxE,IAAI,CAAC,KAAK,GACN,CACR,CAAC;gBAEF,OAAO,CACL,cAAc,SAAS,EAAE,MAAM,CAAC,IAAI,aACjC,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACxC,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,YACpE,OAAO,GACA,CACX,CAAC,CAAC,CAAC,CACF,eACE,SAAS,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvF,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,mBAC/B,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAE7C,OAAO,GACH,CACR,EACA,CAAC,MAAM,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,iBAAc,MAAM,YAAE,SAAS,GAAQ,CAAC,CAAC,CAAC,IAAI,KAdnF,GAAG,CAeP,CACN,CAAC;YACJ,CAAC,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"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"}

package/dist/components/Breadcrumbs/Breadcrumbs.module.css

@@ -1,21 +1,26 @@
 .breadcrumbs {
   width: 100%;
+  min-width: 0;
 }
 
 .list {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 6px;
   list-style: none;
   padding: 0;
   margin: 0;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
+  flex: 0 1 auto;
 }
 
 .link {
@@ -23,6 +28,8 @@
   text-decoration: none;
   font-size: 13px;
   transition: color 0.2s ease;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .link:hover {
@@ -32,11 +39,17 @@
 .label {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+  max-width: min(42vw, 360px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .separator {
   color: var(--color-muted-2);
   font-size: 12px;
+  flex: 0 0 auto;
 }
 
 .disabled {
@@ -44,6 +57,48 @@
   cursor: not-allowed;
 }
 
+.overflowItem {
+  flex: 0 0 auto;
+}
+
+.overflowDropdown {
+  display: inline-flex;
+}
+
+.overflowTrigger {
+  color: var(--color-muted);
+  text-decoration: none;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.overflowTrigger:hover {
+  color: var(--color-teal);
+}
+
+.overflowMenu {
+  max-width: min(90vw, 420px);
+}
+
+.overflowMenuItem {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 [aria-current="page"] {
   color: var(--color-text);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phpsoftbox/react-softbox",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",