✨ feat: add disable scroll into view option to accordion

Author: e1en0r

src/components/InteractiveGroup/useInteractiveGroupItem.ts

@@ -2,8 +2,9 @@ import { useEffect } from 'react';
 import { useScrollIntoView, UseScrollIntoViewProps } from './../../hooks/useScrollIntoView';
 
 export type UseInteractiveGroupItemProps<E extends HTMLElement> = Omit<UseScrollIntoViewProps<E>, 'behavior'> & {
-  scrollBehavior?: UseScrollIntoViewProps<E>['behavior'];
+  disableScrollIntoView?: boolean;
   moveBrowserFocus?: boolean | ((props: { ref: React.MutableRefObject<E | null>; focused?: boolean }) => boolean);
+  scrollBehavior?: UseScrollIntoViewProps<E>['behavior'];
 };
 
 /**
@@ -12,12 +13,13 @@ export type UseInteractiveGroupItemProps<E extends HTMLElement> = Omit<UseScroll
  * view and changes the active element to that ref element.
  */
 export function useInteractiveGroupItem<E extends HTMLElement>({
+  disableScrollIntoView = false,
   focused = false,
   moveBrowserFocus = false,
   ref,
   scrollBehavior,
 }: UseInteractiveGroupItemProps<E>): void {
-  useScrollIntoView<E>({ behavior: scrollBehavior, ref, focused });
+  useScrollIntoView<E>({ behavior: scrollBehavior, disabled: disableScrollIntoView, ref, focused });
 
   useEffect(() => {
     if (focused && document.activeElement !== ref.current) {

src/compositions/Accordion/Accordion.tsx

@@ -23,7 +23,10 @@ export type AccordionProps = Pick<
   InteractiveGroupProviderProps,
   'maxSelect' | 'minSelect' | 'initialSelected' | 'onKeyDown' | 'onSelect'
 > &
-  Pick<AccordionListProps, 'duration' | 'easing' | 'flush' | 'items' | 'orientation' | 'unstyled' | 'variant'> &
+  Pick<
+    AccordionListProps,
+    'disableScrollIntoView' | 'duration' | 'easing' | 'flush' | 'items' | 'orientation' | 'unstyled' | 'variant'
+  > &
   ThemeProps & {
     children?: AccordionRenderChildren;
     className?: string;
@@ -73,6 +76,7 @@ export function Accordion({
   children,
   className,
   contrast = false,
+  disableScrollIntoView = false,
   duration,
   easing,
   flush = false,
@@ -135,6 +139,7 @@ export function Accordion({
                 <AccordionList
                   componentId={componentId}
                   contrast={contrast}
+                  disableScrollIntoView={disableScrollIntoView}
                   duration={duration}
                   easing={easing}
                   flush={flush}

src/compositions/Accordion/AccordionLabel.tsx

@@ -10,6 +10,7 @@ export type LocalAccordionLabelProps = AccordionItemStateProps & {
   children: React.ReactNode;
   className?: string;
   contentRef?: React.RefObject<HTMLDivElement>;
+  disableScrollIntoView?: boolean;
   flush?: boolean;
   iconOnly?: boolean;
   id: string;
@@ -34,6 +35,7 @@ export function AccordionLabel({
   className,
   contentRef,
   disabled = false,
+  disableScrollIntoView = false,
   flush = false,
   focused = false,
   iconOnly = false,
@@ -53,7 +55,13 @@ export function AccordionLabel({
     return true;
   }, [contentRef]);
 
-  useInteractiveGroupItem<HTMLDivElement>({ focused, ref, moveBrowserFocus, scrollBehavior: 'smooth' });
+  useInteractiveGroupItem<HTMLDivElement>({
+    disableScrollIntoView,
+    focused,
+    ref,
+    moveBrowserFocus,
+    scrollBehavior: 'smooth',
+  });
   useListRegistryItem({ id, ref });
 
   // wrap the content in a class so the content opacity can change without affecting the pseudo elements

src/compositions/Accordion/AccordionList.tsx

@@ -15,6 +15,7 @@ export type AccordionListProps = React.HTMLAttributes<HTMLDivElement> &
   ThemeProps & {
     className?: string;
     componentId: string;
+    disableScrollIntoView?: boolean;
     flush?: boolean;
     items: readonly AccordionItemType[];
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
@@ -37,6 +38,7 @@ export const AccordionList = React.forwardRef<HTMLDivElement, AccordionListProps
       className,
       componentId,
       contrast = false,
+      disableScrollIntoView = false,
       duration,
       easing,
       flush,
@@ -104,6 +106,7 @@ export const AccordionList = React.forwardRef<HTMLDivElement, AccordionListProps
           items.map(({ id, ...item }, index) => (
             <AccordionListItem
               componentId={componentId}
+              disableScrollIntoView={disableScrollIntoView}
               duration={duration}
               easing={easing}
               flush={flush}

src/compositions/Accordion/AccordionListItem.tsx

@@ -15,6 +15,7 @@ export type AccordionListItemProps = React.HTMLAttributes<HTMLDivElement> &
   Pick<AccordionContentProps, 'duration' | 'easing' | 'orientation'> &
   AccordionItemType & {
     componentId: string;
+    disableScrollIntoView?: boolean;
     flush?: boolean;
     /** The accordion's focus state */
     focused?: boolean;
@@ -39,6 +40,7 @@ export const AccordionListItem = React.forwardRef<HTMLDivElement, AccordionListI
       content,
       contentProps,
       disabled,
+      disableScrollIntoView,
       duration,
       easing,
       flush,
@@ -127,6 +129,7 @@ export const AccordionListItem = React.forwardRef<HTMLDivElement, AccordionListI
           aria-disabled={disabled}
           aria-expanded={!!stateProps.selected}
           contentRef={contentRef}
+          disableScrollIntoView={disableScrollIntoView}
           flush={flush}
           iconOnly={iconOnly}
           id={generateComponentId(id)}

src/compositions/Accordion/stories/Accordion.stories.tsx

@@ -88,6 +88,11 @@ export default {
         category: 'Uncommon',
       },
     },
+    disableScrollIntoView: {
+      table: {
+        category: 'Uncommon',
+      },
+    },
     id: {
       table: {
         category: 'Uncommon',

src/hooks/useScrollIntoView.ts

@@ -2,6 +2,7 @@ import { useLayoutEffect, useRef } from 'react';
 
 export type UseScrollIntoViewProps<E extends HTMLElement> = {
   behavior?: 'auto' | 'smooth';
+  disabled?: boolean;
   focused?: boolean;
   ref: React.MutableRefObject<E | null>;
 };
@@ -12,6 +13,7 @@ export type UseScrollIntoViewProps<E extends HTMLElement> = {
  * view.
  */
 export function useScrollIntoView<E extends HTMLElement>({
+  disabled = false,
   focused = false,
   ref,
   behavior = 'smooth',
@@ -20,9 +22,9 @@ export function useScrollIntoView<E extends HTMLElement>({
 
   // make sure focused has previously been set so this doesn't scroll the whole page to this element on load
   useLayoutEffect((): void => {
-    if (focused && previous.current !== undefined) {
+    if (focused && previous.current !== undefined && !disabled) {
       ref.current?.scrollIntoView({ behavior, block: 'nearest', inline: 'start' });
     }
     previous.current = !!focused;
-  }, [behavior, focused, ref]);
+  }, [behavior, disabled, focused, ref]);
 }