11.3.scrollable tabs

.github/workflows/main.yml

@@ -0,0 +1,70 @@
+name: NPM Publish.
+
+on:
+  push:
+    branches:
+      - 11.3.scrollable-tabs
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Configure Git identity
+        run: |
+          git config user.email "$(git log -1 --pretty=format:'%ae')"
+          git config user.name "$(git log -1 --pretty=format:'%an')"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Bump version
+        continue-on-error: true
+        uses: remorses/bump-version@js
+        with:
+            version_file: ./VERSION
+        env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Read VERSION
+        id: package
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./VERSION
+      - name: Echo VERSION
+        run: echo "${{ steps.package.outputs.content }}"
+
+      - name: Install jq
+        run: sudo apt-get install jq
+
+
+
+      - name: Set env vars
+        id: setEnvVars
+        run: |
+            echo "VERSION=${{ steps.package.outputs.content }}" >> $GITHUB_ENV;
+
+
+      - name: Bump version in package.json
+        run: |
+          current_version=$(jq -r .version package.json)
+          new_version=$(node -p "require('semver').inc('$current_version', 'patch')")
+          jq ".version |= \"$VERSION\"" package.json > package.json.tmp
+          mv package.json.tmp package.json
+
+
+      - name: Publish to GitHub Packages
+        run: npm publish
+        env:
+          AUTH_GITHUB_TOKEN: ${{ secrets.AUTH_GITHUB_TOKEN }}
+
+      - name: Push tags to GitHub
+        run: git push origin --tags

.npmignore

@@ -0,0 +1,32 @@
+# Source files - we only want to publish the build folder
+src/
+assets/
+docs/
+eslint-plugin-custom/
+i18n/
+jest/
+lib/
+scripts/
+storybook-static/
+
+# Config files
+.eslintrc
+.gitignore
+.prettierrc
+jest.config.js
+jsconfig.json
+webpack.config*.js
+dev-server.js
+postcss.config.js
+*.md
+!build/
+
+# Development dependencies
+node_modules/
+.git/
+.vscode/
+
+# Test files
+**/*.test.js
+**/*.spec.js
+__tests__/

.npmrc

@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+@madisoncres:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${AUTH_GITHUB_TOKEN}

VERSION

@@ -0,0 +1 @@
+11.3.4

docs/README.md

@@ -0,0 +1,33 @@
+# Documentation
+
+This directory contains project documentation.
+
+## Structure
+
+```
+docs/
+├── changes/          # Documentation for all project changes
+│   ├── README.md     # Guidelines and index
+│   └── YYYY-MM-DD-*.md  # Individual change documents
+└── README.md         # This file
+```
+
+## Directories
+
+### changes/
+Contains detailed documentation for all significant changes made to the project. Each change is documented in a separate markdown file with a date prefix.
+
+See [changes/README.md](./changes/README.md) for guidelines and the full index.
+
+## Contributing
+
+When making significant changes to the project:
+
+1. Create a new markdown file in `docs/changes/` with the format `YYYY-MM-DD-brief-description.md`
+2. Follow the template provided in `docs/changes/README.md`
+3. Update the index in `docs/changes/README.md`
+4. Commit the documentation with your changes
+
+---
+
+**Last Updated:** October 28, 2025

docs/changes/2025-10-28-tabs-scrollable.md

@@ -0,0 +1,63 @@
+# TabsHeader Component Changes - Adding Scrollable Tabs with Navigation Buttons
+
+## Summary of Changes
+Added horizontal scrolling functionality to tabs with automatic navigation buttons.
+
+## Changes Made
+
+### 1. **TabsHeader.js**
+- ✅ Added state to track button visibility: `showLeftButton`, `showRightButton`
+- ✅ Added `useEffect` that checks when to display buttons (when there's overflow)
+- ✅ `scrollTabs(direction)` function that scrolls by 200px
+- ✅ Auto-scroll to active tab using `scrollIntoView`
+- ✅ New wrapper `.TabsHeader-wrapper` with scroll buttons on both sides
+- ✅ Dynamic className: `has-left-button`, `has-right-button`
+
+### 2. **TabsHeader.scss**
+- ✅ `.TabsHeader-wrapper` - container with position relative
+- ✅ `.scroll-button` - buttons with absolute positioning and high z-index
+- ✅ `overflow-x: auto` + `scroll-behavior: smooth` on `.TabsHeader`
+- ✅ Hidden scrollbar (webkit, firefox, IE)
+- ✅ `margin-left/right: 32px` when buttons are displayed (to prevent overlap)
+- ✅ box-shadow matching tabs: `inset 0 -1px 0 0 var(--multi-tab-divider)`
+
+### 3. **Tab.scss**
+- ✅ `flex-shrink: 0` - prevents tab shrinking during scrolling
+- ✅ `margin-left: 8px` for first tab - prevents clipping
+- ✅ `.divider { display: none }` - removed dividers (don't work well with scrolling)
+
+## New Features
+
+### Auto-Scroll
+When a new tab is opened or switching to another tab, it automatically scrolls to the center of the view.
+
+### Smart Navigation Buttons
+- **Left button (◀)** - appears only when there's content to scroll left
+- **Right button (▶)** - appears only when there's content to scroll right
+- Each click scrolls 200px
+- Automatically updates with scrolling or window resize
+
+## Usage Example
+No code changes needed - the functionality works automatically:
+1. Open multiple tabs until they exceed the screen width
+2. Scroll buttons will appear automatically
+3. Click the buttons or use the mouse wheel to scroll
+4. Open a new tab - it will automatically scroll into view
+
+## Browser Compatibility
+- ✅ Chrome/Edge - Full
+- ✅ Firefox - Full
+- ✅ Safari - Full
+- ✅ IE11 - Full (with fallback)
+
+## Performance
+- Overflow checking occurs only when:
+  - Tab list changes
+  - Scrolling
+  - Window resize
+- Scrolling with `smooth` behavior for a pleasant experience
+- Optimized z-index to prevent layer issues
+
+---
+**Date:** October 28, 2025  
+**Branch:** 11.3

docs/changes/README.md

@@ -0,0 +1,71 @@
+# Project Changes Documentation
+
+This directory contains documentation for all significant changes made to the webviewer-ui project.
+
+## Structure
+
+Each change should be documented in a separate markdown file with the following naming convention:
+```
+YYYY-MM-DD-brief-description.md
+```
+
+For example:
+- `2025-10-28-tabs-scrollable.md`
+- `2025-11-05-new-feature-name.md`
+
+## Template for New Changes
+
+When documenting a new change, create a new file using this template:
+
+```markdown
+# [Feature/Component Name] - [Brief Description]
+
+## Summary of Changes
+Brief overview of what was changed and why.
+
+## Changes Made
+
+### 1. **File/Component Name**
+- ✅ Change 1
+- ✅ Change 2
+- ✅ Change 3
+
+### 2. **Another File/Component**
+- ✅ Change 1
+- ✅ Change 2
+
+## New Features (if applicable)
+
+### Feature Name
+Description of the feature and how it works.
+
+## Usage Example (if applicable)
+How to use the new feature or how the changes affect existing usage.
+
+## Browser Compatibility (if applicable)
+List of supported browsers and any known issues.
+
+## Performance Considerations (if applicable)
+Any performance impacts or optimizations.
+
+---
+**Date:** [Date]  
+**Branch:** [Branch Name]  
+**Author:** [Your Name]
+```
+
+## Guidelines
+
+1. **Be Specific**: Include file names, function names, and line numbers where relevant.
+2. **Include Code Examples**: Show before/after code when it helps clarify the change.
+3. **Document Breaking Changes**: Clearly mark any breaking changes.
+4. **Add Visual Examples**: Include screenshots or diagrams if they help explain the change.
+5. **Link to Issues/PRs**: Reference related issues or pull requests.
+
+## Index of Changes
+
+- [2025-10-28: Tabs Scrollable with Navigation Buttons](./2025-10-28-tabs-scrollable.md)
+
+---
+
+**Note:** Always update this index when adding a new change document.

package.json

@@ -1,13 +1,28 @@
 {
-  "name": "webviewer-ui",
+  "name": "@madisoncres/webviewer-ui",
   "author": "Apryse Software Inc.",
   "version": "11.3.0",
-  "description": "WebViewer UI built in React",
-  "main": "src/index.js",
+  "description": "WebViewer UI built in React (bundled with all dependencies for Web Component use)",
+  "main": "build/webviewer-ui.min.js",
+  "license": "SEE LICENSE IN LICENSE",
+  "keywords": [
+    "webviewer",
+    "pdf",
+    "viewer",
+    "ui",
+    "react",
+    "document"
+  ],
+  "files": [
+    "build/**/*",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
+    "prepublishOnly": "npm run build",
     "start": "npx babel-node ./dev-server.js",
     "download-webviewer": "npx @pdftron/webviewer-downloader --core-only --path ./lib",
-    "postinstall": "cp ./node_modules/@storybook/react-dom-shim/dist/react-16.js ./node_modules/@storybook/react-dom-shim/dist/react-18.js && cp ./node_modules/@storybook/react-dom-shim/dist/react-16.mjs ./node_modules/@storybook/react-dom-shim/dist/react-18.mjs",
+    "//postinstall": "cp ./node_modules/@storybook/react-dom-shim/dist/react-16.js ./node_modules/@storybook/react-dom-shim/dist/react-18.js && cp ./node_modules/@storybook/react-dom-shim/dist/react-16.mjs ./node_modules/@storybook/react-dom-shim/dist/react-18.mjs",
     "lint": "eslint ./src --fix --ext .js,.jsx,.ts,.tsx",
     "lint:ci": "eslint ./src --quiet --ext .js,.jsx,.ts,.tsx",
     "clean": "rimraf build",
@@ -20,7 +35,7 @@
     "jest:watch": "jest --watch",
     "lint:styles": "stylelint '**/*.scss'"
   },
-  "dependencies": {
+  "devDependencies": {
     "@pdftron/webviewer-react-toolkit": "^0.7.11",
     "autolinker": "^3.11.1",
     "blob-stream": "^0.1.3",
@@ -54,9 +69,7 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "uuid": "^9.0.0"
-  },
-  "devDependencies": {
+    "uuid": "^9.0.0",
     "@babel/cli": "^7.8.3",
     "@babel/core": "^7.8.3",
     "@babel/eslint-parser": "^7.16.0",

src/components/TabsHeader/Tab/Tab.scss

@@ -5,6 +5,7 @@
   display: flex;
   align-items: center;
   padding-top: 2px;
+  flex-shrink: 0;
 
   .Tab {
     height: 30px;