@a3s-lab/office 0.1.0 → 0.2.1

package/dist/0~4595.js

@@ -706,6 +706,7 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
     const selectedLabel = tabs.find((tab)=>tab.id === selectedTab)?.label ?? tabs[0]?.label ?? '';
     const selectedPanel = panels[selectedTab];
     const hasSelectedPanel = null != selectedPanel;
+    const hasRibbonOverflow = ribbonOverflow.backward || ribbonOverflow.forward;
     const updateRibbonOverflow = useCallback(()=>{
         const toolbar = toolbarRef.current;
         if (!toolbar) return;
@@ -909,10 +910,11 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                 "aria-labelledby": `${reactId}-tab-${selectedTab}`,
                 children: hasSelectedPanel && /*#__PURE__*/ jsxs(jsx_runtime_Fragment, {
                     children: [
-                        ribbonOverflow.backward && /*#__PURE__*/ jsx("button", {
+                        hasRibbonOverflow && /*#__PURE__*/ jsx("button", {
                             type: "button",
                             className: "work-office-ribbon-scroll previous",
                             "aria-label": `向左查看更多${selectedLabel}工具`,
+                            disabled: !ribbonOverflow.backward,
                             onClick: ()=>scrollRibbon(-1),
                             children: /*#__PURE__*/ jsx(ChevronLeft, {
                                 size: 15
@@ -921,16 +923,17 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                         /*#__PURE__*/ jsx("div", {
                             ref: toolbarRef,
                             className: `work-office-toolbar ${toolbarClassName}`.trim(),
-                            "data-has-overflow": ribbonOverflow.backward || ribbonOverflow.forward ? 'true' : void 0,
+                            "data-has-overflow": hasRibbonOverflow ? 'true' : void 0,
                             role: "toolbar",
                             "aria-label": `${selectedLabel}工具栏`,
                             onScroll: updateRibbonOverflow,
                             children: selectedPanel
                         }),
-                        ribbonOverflow.forward && /*#__PURE__*/ jsx("button", {
+                        hasRibbonOverflow && /*#__PURE__*/ jsx("button", {
                             type: "button",
                             className: "work-office-ribbon-scroll next",
                             "aria-label": `向右查看更多${selectedLabel}工具`,
+                            disabled: !ribbonOverflow.forward,
                             onClick: ()=>scrollRibbon(1),
                             children: /*#__PURE__*/ jsx(ChevronRight, {
                                 size: 15
@@ -944,12 +947,16 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
 }
 function ribbonItemGeometry(toolbar) {
     return Array.from(toolbar.children).flatMap((element)=>element instanceof HTMLElement ? [
-            {
-                left: element.offsetLeft,
-                right: element.offsetLeft + element.offsetWidth
-            }
+            ribbonItemBounds(toolbar, element)
         ] : []);
 }
+function ribbonItemBounds(toolbar, element) {
+    const left = element.offsetParent === toolbar ? element.offsetLeft : element.offsetLeft - toolbar.offsetLeft;
+    return {
+        left,
+        right: left + element.offsetWidth
+    };
+}
 function scrollSelectedRibbonTabIntoView(tabList, selectedTab) {
     const selected = Array.from(tabList.children).find((element)=>element instanceof HTMLElement && element.dataset.tabId === selectedTab);
     if (!selected || tabList.clientWidth <= 0) return;