@evermade/overflow-slider 4.2.2 → 4.2.3

package/.github/workflows/npm-publish.yml

@@ -1,33 +1,51 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
+# Publish to npm using Trusted Publishers (OIDC)
 name: Publish to NPM
 
 on:
   release:
     types: [created]
+  workflow_dispatch:
+    inputs:
+      dry_run:
+        description: 'Run in dry-run mode (no actual publish)'
+        required: false
+        default: false
+        type: boolean
 
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-      - run: npm test
+      - name: Checkout
+        uses: actions/checkout@v4
 
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Debug authentication
+        run: |
+          echo "=== Environment Check ==="
+          echo "ACTIONS_ID_TOKEN_REQUEST_TOKEN: ${ACTIONS_ID_TOKEN_REQUEST_TOKEN:+SET}"
+          echo "ACTIONS_ID_TOKEN_REQUEST_URL: ${ACTIONS_ID_TOKEN_REQUEST_URL:+SET}"
+          echo "NPM_CONFIG_REGISTRY: $NPM_CONFIG_REGISTRY"
+          echo "=== npm whoami ==="
+          npm whoami || echo "Failed to authenticate"
+          echo "=== npm ping ==="
+          npm ping
+          echo "=== Check registry ==="
+          npm config get registry
+
+      - name: Publish to npm
+        run: npm publish --access public ${{ github.event.inputs.dry_run == 'true' && '--dry-run' || '' }}

package/.github/workflows/publish.yml

@@ -0,0 +1,35 @@
+# Publish to npm using Trusted Publishers (OIDC)
+name: Publish to NPM
+
+permissions:
+  id-token: write  # Required for OIDC
+  contents: read
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      dry_run:
+        description: 'Run in dry-run mode (no actual publish)'
+        required: false
+        default: false
+        type: boolean
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm ci
+      - run: npm test
+      - run: npm whoami || echo "OIDC auth failed"
+      - run: npm publish ${{ github.event.inputs.dry_run == 'true' && '--dry-run' || '' }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -0,0 +1,116 @@
+# Changelog
+
+### 4.2.3
+
+* Add: React example in README.md
+* Change: Move changelog to separate file to make README.md more compact
+* Fix: ThumbnailPlugin not setting first item active when navigatin back to it when thumbnails are not overflowing
+* Fix: moving slider to keyboard focused item work better with slide's inner focusable elements
+
+### 4.2.2
+
+* Add: `justify-content: flex-start` to overflow-slider base styles to prevent centering of slides or other unexpected behavior when slider container is wider than its content.
+
+### 4.2.1
+
+* Fix: currentPage and amountOfPages not being calculated correctly with FullWidthPlugin causin last page no to activate properly.
+
+### 4.2.0
+
+* Add: View mode in DotsPlugin in addition to previous "slide mode"
+* Fix: Remove forgotten console.log from ClassNamesPlugin
+
+### 4.1.0
+
+* Add: ClassNamesPlugin to add classes to visible/partly visible/hidden slides.
+* Add: targetWidth property to core level (backwards compatible with FullWidthPlugin implementation)
+* Fix: Scroll snapping for FullWidthPlugin
+* Fix: Possible issues where plugin changed some details and that was not applied for first render
+* Fix: Rendering issue where transition on slides could prevent calculations initially from working
+
+### 4.0.0
+
+* Add: AutoPlayPlugin to allow auto-playing slides
+* Add: Mixins that can be imported to SCSS projects
+* Add: CSS variable: `--slider-container-height`
+* Add: CSS variable: `--slider-x-offset`
+* Add: Option `cssVariableContainer` to expose CSS variables for example higher container
+* Add: `canMoveToSlide` method to check if slider can move to a specific slide (does it exist, is it already in view)
+* Add: `targetWidth` to slider options as relying on `--slider-container-target-width` can be more solid to calculate fractional slide widths on (at least when there is only few slides)
+* Fix: Export TypeScript types properly from core and plugins to be available automatically
+* Fix: ScrollIndicatorPlugin click to scroll bar didn't always detect click position correctly
+* Fix: snapToClosestSlide method edge cases on DragScrollingPlugin sometimes not snapping on right slide
+
+### 3.3.1
+
+* Fix: FullWidthPlugin margin calculation not being run if there's too few slides for overflow and you resize screen without container width changing
+
+### 3.3.0
+
+* Add: Ability to move each direction by one slide at a time via `moveToSlideInDirection` prev/next
+* Add: Support for ArrowsPlugin to move by one slide at a time (default is still one view at a time)
+* Fix: Remove console logs
+* Refactor: Plugin build paths to match import paths. Might fix some eslint warnings. If you are not using import but directly referencing the plugin files under `dist/` you might need to update your paths.
+
+### 3.2.1
+
+* Add: Documentation on plugins
+* Fix: Make types more strict and remove all "any" types
+
+### 3.2.0
+
+* Add: RTL support
+* Add: `--slider-container-target-width` for FullWidthPlugin to allow CSS based on target size
+* Add: Documentation how to set slides per view in CSS
+* Fix: Attach ThumbnailsPlugin to scrollEnd which skips in-between slides when multiple slides are scrolled at once
+
+### 3.1.0
+
+* Add: slider.getInclusiveScrollWidth and slider.getInclusiveScrollHeight methods to get widths including outermost childs outermost margins
+* Fix: Lot of bugs related to subpixel widths
+* Fix: Don't run arrow click action if there are no more slides to scroll to
+* Fix: FullWidthPlugin bugs where arrows were not detecting start or end properly (because of child margins not taken into account)
+* Fix: Attach ThumbnailsPlugin to activeSlideChanged which is more appropriate hook
+
+### 3.0.0
+
+* Breaking: Change dot plugin to calculate dots based on slides instead of container width "pages"
+* Add: FadePlugin to hint that there are more slides to scroll to
+* Add: Scroll snap emulation method
+* Add: Scroll snap emulation for DragScrollingPlugin
+* Add: Hooks for different types of scrolling (any, native, programmatic)
+* Add: Hooks for different states of scrolling (start, scroll, end) for above types
+* Refactor: Scroll snapping exceptions to be handled by the core slider
+* Fix: Enhance performance by hooking some plugins only when scrolling has ended
+* Fix: Full width alignment to take into account the container offset
+
+### 2.0.2
+
+* Fix: Import style.css from correct path
+
+### 2.0.1
+
+* Fix: Smooth scrolling for moveToSlide method
+* Fix: Prev arrow sometimes leaving visible although there are no more slides to scroll to
+
+### 2.0.0
+
+* Breaking: Separate plugins to their own imports/files
+* Add: FullWidthPlugin to allow full width sliders
+* Add: ThumbnailsPlugin to show synchronized thumbnails
+* Add: Slider container 'data-ready' attribute when initialized to help writing CSS
+* Add: Support for optional separate containers for prev and next arrows
+* Add: Slides as array to Slider instance
+* Add: Active slide ID to Slider instance as activeSlideIdx and hook activeSlideChanged
+* Fix: DragScrollingPlugin dragging clickable slides in Firefox
+* Fix: DragScrollingPlugin dragging outside of container bugs in Firefox/Safari
+* Fix: ScrollIndicatorPlugin width calculation when scrollbar and container are not same width
+
+### 1.1.0
+
+* Add: Grab cursor when hovering slider that has DragScrollingPlugin
+* Add: Example of using entrance and exit animations for slides
+* Fix: ScrollIndicatorPlugin dragging works now with touch
+* Fix: Hide native scrollbar also in Firefox + Edge
+* Docs: Add more info on required markup and limitations
+

package/README.md

@@ -102,6 +102,59 @@ You can use the CSS variables to override some values easily.
 
 Note that you can easily write styles from scratch if you want to. See source code from `src/overflow-slider.scss` for reference.
 
+## Using in React
+
+Overflow Slider can be used with React. There is no separate core or plugins for React so usage is very similar to vanilla JS. Overflow Slider depends on expanding existing DOM and adding DOM elements so it needs reliable access to these elements.
+
+In React the way to give this access is `useRef`.
+
+```js
+import { useRef, useEffect } from 'react';
+import { OverflowSlider } from '@evermade/overflow-slider';
+import DragScrollingPlugin from '@evermade/overflow-slider/plugins/drag-scrolling';
+import ArrowsPlugin from '@evermade/overflow-slider/plugins/arrows';
+
+const ImageSlider = () => {
+	const sliderElement = useRef(null);
+	const sliderControls = useRef(null);
+
+	useEffect(() => {
+		if (!sliderElement.current || !sliderControls.current) {
+			return; 
+		}
+
+		const slider = new OverflowSlider(
+			sliderElement.current,
+			{
+				emulateScrollSnap: true,
+			},
+			[
+				DragScrollingPlugin(),
+				ArrowsPlugin({
+					container: sliderControls.current
+				}),
+			]
+		);
+	}, []);
+
+	return (
+		<div className="slider-container">
+			<div className="overflow-slider" ref={sliderElement}>
+				<div className="overflow-slider__slider-item"><h2>Slide 1</h2></div>
+				<div className="overflow-slider__slider-item"><h2>Slide 2</h2></div>
+				<div className="overflow-slider__slider-item"><h2>Slide 3</h2></div>
+			</div>
+			<div className="slider-controls" ref={sliderControls}>
+			</div>
+		</div>
+	);
+};
+
+export default ImageSlider;
+```
+
+Note that Overflow Slider does not have destroy() function. If not having it turns out to be a big issue for React we could add it but that is something affecting all core/plugins and can increase bundle size ~25% as it can be a lot of code.
+
 ## Mixins
 
 If you are using SCSS, you can use these helpers.
@@ -562,112 +615,7 @@ Infinite scroll is not supported and likely never will be. It is not accessible
 
 ## Changelog
 
-### 4.2.2
-
-* Add: `justify-content: flex-start` to overflow-slider base styles to prevent centering of slides or other unexpected behavior when slider container is wider than its content.
-
-### 4.2.1
-
-* Fix: currentPage and amountOfPages not being calculated correctly with FullWidthPlugin causin last page no to activate properly.
-
-### 4.2.0
-
-* Add: View mode in DotsPlugin in addition to previous "slide mode"
-* Fix: Remove forgotten console.log from ClassNamesPlugin
-
-### 4.1.0
-
-* Add: ClassNamesPlugin to add classes to visible/partly visible/hidden slides.
-* Add: targetWidth property to core level (backwards compatible with FullWidthPlugin implementation)
-* Fix: Scroll snapping for FullWidthPlugin
-* Fix: Possible issues where plugin changed some details and that was not applied for first render
-* Fix: Rendering issue where transition on slides could prevent calculations initially from working
-
-### 4.0.0
-
-* Add: AutoPlayPlugin to allow auto-playing slides
-* Add: Mixins that can be imported to SCSS projects
-* Add: CSS variable: `--slider-container-height`
-* Add: CSS variable: `--slider-x-offset`
-* Add: Option `cssVariableContainer` to expose CSS variables for example higher container
-* Add: `canMoveToSlide` method to check if slider can move to a specific slide (does it exist, is it already in view)
-* Add: `targetWidth` to slider options as relying on `--slider-container-target-width` can be more solid to calculate fractional slide widths on (at least when there is only few slides)
-* Fix: Export TypeScript types properly from core and plugins to be available automatically
-* Fix: ScrollIndicatorPlugin click to scroll bar didn't always detect click position correctly
-* Fix: snapToClosestSlide method edge cases on DragScrollingPlugin sometimes not snapping on right slide
-
-### 3.3.1
-
-* Fix: FullWidthPlugin margin calculation not being run if there's too few slides for overflow and you resize screen without container width changing
-
-### 3.3.0
-
-* Add: Ability to move each direction by one slide at a time via `moveToSlideInDirection` prev/next
-* Add: Support for ArrowsPlugin to move by one slide at a time (default is still one view at a time)
-* Fix: Remove console logs
-* Refactor: Plugin build paths to match import paths. Might fix some eslint warnings. If you are not using import but directly referencing the plugin files under `dist/` you might need to update your paths.
-
-### 3.2.1
-
-* Add: Documentation on plugins
-* Fix: Make types more strict and remove all "any" types
-
-### 3.2.0
-
-* Add: RTL support
-* Add: `--slider-container-target-width` for FullWidthPlugin to allow CSS based on target size
-* Add: Documentation how to set slides per view in CSS
-* Fix: Attach ThumbnailsPlugin to scrollEnd which skips in-between slides when multiple slides are scrolled at once
-
-### 3.1.0
-
-* Add: slider.getInclusiveScrollWidth and slider.getInclusiveScrollHeight methods to get widths including outermost childs outermost margins
-* Fix: Lot of bugs related to subpixel widths
-* Fix: Don't run arrow click action if there are no more slides to scroll to
-* Fix: FullWidthPlugin bugs where arrows were not detecting start or end properly (because of child margins not taken into account)
-* Fix: Attach ThumbnailsPlugin to activeSlideChanged which is more appropriate hook
-
-### 3.0.0
-
-* Breaking: Change dot plugin to calculate dots based on slides instead of container width "pages"
-* Add: FadePlugin to hint that there are more slides to scroll to
-* Add: Scroll snap emulation method
-* Add: Scroll snap emulation for DragScrollingPlugin
-* Add: Hooks for different types of scrolling (any, native, programmatic)
-* Add: Hooks for different states of scrolling (start, scroll, end) for above types
-* Refactor: Scroll snapping exceptions to be handled by the core slider
-* Fix: Enhance performance by hooking some plugins only when scrolling has ended
-* Fix: Full width alignment to take into account the container offset
-
-### 2.0.2
-
-* Fix: Import style.css from correct path
-
-### 2.0.1
-
-* Fix: Smooth scrolling for moveToSlide method
-* Fix: Prev arrow sometimes leaving visible although there are no more slides to scroll to
-
-### 2.0.0
-
-* Breaking: Separate plugins to their own imports/files
-* Add: FullWidthPlugin to allow full width sliders
-* Add: ThumbnailsPlugin to show synchronized thumbnails
-* Add: Slider container 'data-ready' attribute when initialized to help writing CSS
-* Add: Support for optional separate containers for prev and next arrows
-* Add: Slides as array to Slider instance
-* Add: Active slide ID to Slider instance as activeSlideIdx and hook activeSlideChanged
-* Fix: DragScrollingPlugin dragging clickable slides in Firefox
-* Fix: DragScrollingPlugin dragging outside of container bugs in Firefox/Safari
-* Fix: ScrollIndicatorPlugin width calculation when scrollbar and container are not same width
-
-### 1.1.0
-
-* Add: Grab cursor when hovering slider that has DragScrollingPlugin
-* Add: Example of using entrance and exit animations for slides
-* Fix: ScrollIndicatorPlugin dragging works now with touch
-* Fix: Hide native scrollbar also in Firefox + Edge
-* Docs: Add more info on required markup and limitations
+See [CHANGELOG.md](./CHANGELOG.md)
 
 ## Development
 
@@ -675,8 +623,4 @@ Install tools `npm install` and build `npm run build` or develop with `npm run w
 
 Releasing new version:
 
-* Update version in `package.json`
-* Commit to master
-* Set tag with version number to git
-* Create new release in GitHub
-* NPM package is automatically published from GitHub
+See [RELEASE.md](./RELEASE.md)

package/RELEASE.md

@@ -0,0 +1,44 @@
+# Release Process
+
+This project uses a manual release process.
+
+## Steps to Release
+
+1. **Update version in package.json**
+
+2. **Build the package**
+   ```bash
+   npm run build
+   ```
+   
+3. **Push changes and create GitHub release**
+   ```bash
+   git push
+   git push --tags
+   ```
+   
+4. **Create GitHub Release**
+   - Go to GitHub repository
+   - Click "Releases" → "Create a new release"
+   - Select the version tag
+   - Write release notes
+   - Publish release
+
+5. **Publish to npm**
+   ```bash
+   npm publish --access public
+   ```
+
+## Prerequisites
+
+- Make sure you're logged into npm: `npm whoami`
+- Make sure you have write access to the `@evermade/overflow-slider` package
+- Make sure you're on the main branch with latest changes
+
+## Notes
+
+- The `npm version` command automatically updates package.json and creates a git tag
+- Use `npm publish --dry-run` first if you want to test without actually publishing
+- The package is public, so `--access public` ensures it's published correctly
+
+That's it! Simple and reliable manual process.

package/dist/index.esm.js

@@ -252,21 +252,38 @@ function Slider(container, options, plugins) {
             wasInteractedWith = true;
         }, { passive: true });
         slider.container.addEventListener('focusin', (e) => {
-            // move target parents as long as they are not the container
-            // but only if focus didn't start from mouse or touch
-            if (!wasInteractedWith) {
-                let target = e.target;
-                while (target.parentElement !== slider.container) {
-                    if (target.parentElement) {
-                        target = target.parentElement;
-                    }
-                    else {
-                        break;
-                    }
-                }
-                ensureSlideIsInView(target, 'auto');
+            // Only handle keyboard-initiated focus (not mouse or touch)
+            if (wasInteractedWith) {
+                wasInteractedWith = false;
+                return;
             }
             wasInteractedWith = false;
+            // No scrolling needed if there is no overflow
+            if (!slider.details.hasOverflow) {
+                return;
+            }
+            const focusedElement = e.target;
+            // Walk up from the focused element to find the direct child (slide) of the container
+            let slide = focusedElement;
+            while (slide.parentElement !== slider.container) {
+                if (slide.parentElement) {
+                    slide = slide.parentElement;
+                }
+                else {
+                    // Focused element is not inside the slider container
+                    return;
+                }
+            }
+            // Emit programmaticScrollStart immediately so the browser's native focus
+            // scroll events are classified as programmatic (not native). This prevents
+            // nativeScrollStart from restoring scrollSnapType and fighting our correction.
+            slider.emit('programmaticScrollStart');
+            // Use setTimeout to let the browser's native focus scroll complete,
+            // then override with our WCAG-compliant scroll positioning
+            setTimeout(() => {
+                scrollFocusedSlideIntoView(slide, focusedElement);
+                slider.emit('focusScroll');
+            }, 50);
         });
     }
     function setCSSVariables() {
@@ -313,6 +330,82 @@ function Slider(container, options, plugins) {
             }, 50, scrollTarget);
         }
     }
+    /**
+     * Scrolls a focused slide (or child element) into view for WCAG AA compliance.
+     * Priority:
+     *   1. Show the full slide if it fits in the container
+     *   2. If the slide is wider than the container, show the focused element
+     *   3. If neither fits, align the leading edge (left for LTR, right for RTL)
+     */
+    function scrollFocusedSlideIntoView(slide, focusedElement) {
+        const isRtl = slider.options.rtl;
+        const containerRect = slider.container.getBoundingClientRect();
+        const containerWidth = slider.container.offsetWidth;
+        const slideRect = slide.getBoundingClientRect();
+        const scrollLeft = slider.container.scrollLeft;
+        // Calculate visual offsets relative to the container viewport
+        const slideLeftOffset = slideRect.left - containerRect.left;
+        const slideRightOffset = slideRect.right - containerRect.right;
+        // Check if slide is already fully visible (1px tolerance for sub-pixel rounding)
+        if (slideLeftOffset >= -1 && slideRightOffset <= 1) {
+            slider.container.style.scrollSnapType = '';
+            slider.emit('programmaticScrollEnd');
+            return;
+        }
+        let scrollTarget;
+        if (slideRect.width <= containerWidth) {
+            // Slide fits in container — align its leading edge to show it fully
+            if (isRtl) {
+                // RTL: align slide's right edge with container's right edge
+                scrollTarget = scrollLeft + slideRightOffset;
+            }
+            else {
+                // LTR: align slide's left edge with container's left edge
+                scrollTarget = scrollLeft + slideLeftOffset;
+            }
+        }
+        else if (focusedElement !== slide) {
+            // Slide is wider than container — try to show the focused child element
+            const focusRect = focusedElement.getBoundingClientRect();
+            const focusLeftOffset = focusRect.left - containerRect.left;
+            const focusRightOffset = focusRect.right - containerRect.right;
+            // Check if focused element is already fully visible
+            if (focusLeftOffset >= -1 && focusRightOffset <= 1) {
+                slider.container.style.scrollSnapType = '';
+                slider.emit('programmaticScrollEnd');
+                return;
+            }
+            if (focusRect.width <= containerWidth) {
+                // Focused element fits in container — align its leading edge
+                if (isRtl) {
+                    scrollTarget = scrollLeft + focusRightOffset;
+                }
+                else {
+                    scrollTarget = scrollLeft + focusLeftOffset;
+                }
+            }
+            else {
+                // Focused element is also wider than container — align leading edge
+                if (isRtl) {
+                    scrollTarget = scrollLeft + focusRightOffset;
+                }
+                else {
+                    scrollTarget = scrollLeft + focusLeftOffset;
+                }
+            }
+        }
+        else {
+            // Slide is the focused element and wider than container — align leading edge
+            if (isRtl) {
+                scrollTarget = scrollLeft + slideRightOffset;
+            }
+            else {
+                scrollTarget = scrollLeft + slideLeftOffset;
+            }
+        }
+        slider.emit('programmaticScrollStart');
+        slider.container.scrollTo({ left: scrollTarget, behavior: 'auto' });
+    }
     function setActiveSlideIdx() {
         const sliderRect = slider.container.getBoundingClientRect();
         const scrollLeft = slider.getScrollLeft();