Feature: Close Disclosure Manually

[vinverdy]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v1.1.1

What browser are you using?
Chrome

Reproduction repository
Describe your issue
At the moment it is not possible to manually close the disclosure. I have a case where where another disclosure open, it will close the other. This is not possible currently. Thanks a lot, kudos

[kb1995]

@RobinMalfait Is there anything we can do about this? I also have several Disclosures and all other needs to close when one opens

[pdevito3]

Yeah agreed. could really use this right now. think this could be alleviated by adding an onClick event to the button so we can tell it what we want it to do on click but still preserve the accessibility controls

[knightspore]

I'm also looking for this feature - I think a autoToggle option or something similar could work too?

[sontiO]

did yall find a workaround for this? currently looking to close all disclosures on a page too

[Jaycreated]

Is there a solution to this now?

[Caduceus22]

https://stackoverflow.com/questions/72131620/group-disclosures-accordian-from-headless-ui

[sinau123]

in vue it can be done with some tricky way

https://codesandbox.io/s/headless-ui-vue-disclosure-close-others-xb0gd?file=/src/components/Accordion.vue

[PavelZhuravlev]

Hello, guys
Any updates here?
I think it's the general purpose of disclosure,
funny that it was not handled from the box.

[noahKind]

This would be a nice feature

[relatkrusodotdk]

Its is actually (partially) possible. Its a very ugly solution but

  // make accordions close when one is opened.
  const AccordionRefs = useRef([]); // store accordion buttons as Refs
  const [currentAccordion, setCurrentAccordion] = useState(0); // set the current
  function closeCurrent(e) {
    const button = e.target.closest('button'); // get the button
    const buttonParent = button.parentElement; // get the buttons parent
    const parent = buttonParent.parentElement; // get the buttons parent parent
    const index = Array.prototype.indexOf.call(parent.children, buttonParent); // find the index of the button in container
    for (let i = 0; i < AccordionRefs.current.length; i++) {
      // loop throug
      if (
        AccordionRefs.current[i] &&
        AccordionRefs.current[i].getAttribute('aria-expanded') === 'true' &&
        currentAccordion !== index // if it is opened and not the current
      ) {
        AccordionRefs.current[i].click(); // then trigger a click to close it.
      }
    }
    setCurrentAccordion(index); // and set the current
  }

  return (
    <div className="py-3">
      {accordionContent.map((accordion, index) => (
        <Disclosure key={index} defaultOpen={index === 0 ? true : false}>
          {({ open }) => (
            <div className={classNames(index !== 0 ? 'border-t' : '')}>
              <Disclosure.Button
                onMouseDown={closeCurrent}
                onTouchStart={closeCurrent}
                ref={(el) => (AccordionRefs.current[index] = el)} // set refs THIS IS IMPORTANT
                className={classNames(open ? 'border-b' : '', 'block w-full text-left py-5 px-2')}
              >

[sontiO]

thank you for the suggestion, do you have any pointers to me why the index always is 0 in my example trying to implement your solution? thanks in advance

https://codesandbox.io/s/hover-popover-flyout-menu-using-headless-ui-and-tailwindcss-with-react-live-demo-by-doctorderek-forked-xvmtj?file=/src/App.js

[relatkrusodotdk]

Yes, you need to attach the onMouseDown handler to your DT, and in this case you can use onClick instead since its not taken over by the disclosure component. And then you need to add some other selectors to fin the button and the correct parents in closeCurrent since you have an "extra" element wrapping the button

https://codesandbox.io/s/hover-popover-flyout-menu-using-headless-ui-and-tailwindcss-with-react-live-demo-by-doctorderek-forked-cz6vi?file=/src/App.js

[AlisahibAmiraslan]

Yes, you need to attach the onMouseDown handler to your DT, and in this case you can use onClick instead since its not taken over by the disclosure component. And then you need to add some other selectors to fin the button and the correct parents in closeCurrent since you have an "extra" element wrapping the button

https://codesandbox.io/s/hover-popover-flyout-menu-using-headless-ui-and-tailwindcss-with-react-live-demo-by-doctorderek-forked-cz6vi?file=/src/App.js

it is very useful, Thank you

[dakavisa]

Is this going to be done at some point?

[brian-enkor]

I'm waiting on this lol

[itstimwhite]

Definitely would love to see this. As it stands it's just a bad user experience that forces unnecessary scrolling and clutter.

[kevinfluegel]

I've come up with a pretty simple workaround. Maybe there are drawbacks I'm not aware of so far, but it works good for me.
I store the close function from the currently opened panel as ref and call it when the next panel opens.

My solution comes quite close to that what @relatkrusodotdk was suggesting.

Additionaly I would advise onMouseUp/onTouchEnd instead of onMouseDown/onTouchStart for less jittering

function SomeComponent() {
  const closeRecent = useRef<CloseFn>(undefined);

// this is stored in useCallback to impede unnecessary rerenders.
// Calling this function with the close function available from disclosure will return a proper callback
  const closeCurrent = useCallback((close) => () => {
    if (closeRecent.current) {
      closeRecent.current();
    }
    closeRecent.current = close;
/* 
eslint warning is expected, but closeRecent.current has to be in the hook deps. 
The value of useCallback will recalculate on call. 
If you dont like this and dont want to disable the warning, just use the function inline...
*/
  }, [closeRecent.current]) 
  
  return (
        <Disclosure>
          {({ close }) => (
            <>
              <Disclosure.Button
                onMouseUp={closeCurrent(close)}
                onTouchEnd={closeCurrent(close)}
              >
                // label
              </Disclosure.Button>
              <Disclosure.Panel
              >
                // content
              </Disclosure.Panel>
            </>
          )}
        </Disclosure>
  );
}

edit: forgot to pass close as args in closeCurrent

[kevinfluegel]

This approach had some timing issues which leads to weird behavior. A barely equal simple and working approach. Inspired by @relatkrusodotdk

function Akkordion({ items }) {
  const buttonRefs = useRef([]);
  const openedRef = useRef(null);

  const clickRecent = (index) => {
    const clickedButton = buttonRefs.current[index];
    if (clickedButton === openedRef.current) {
      openedRef.current = null;
      return;
    }
    if (Boolean(openedRef.current?.getAttribute("data-value"))) {
      openedRef.current?.click();
    }
    openedRef.current = clickedButton;
  };

  return (
    <div>
      {items.map((item, idx) => (
        <Disclosure key={item.id}>
          {({ open }) => (
            <div>
              <Disclosure.Button as="div">
                <button
                  data-value={open}
                  ref={(ref) => {
                    buttonRefs.current[idx] = ref;
                  }}
                  onClick={() => clickRecent(idx)}
                >
                  {item.label}
                </button>
              </Disclosure.Button>
              <Disclosure.Panel
              >
                {item.content}
              </Disclosure.Panel>
            </div>
          )}
        </Disclosure>
      ))}
    </div>
  );
}

[codefromahmad]

Thanks for sharing! This worked for me. @kevinfluegel

[julioflima]

@kevinfluegel right now the challenge it's make the defaultOpen work together.

[abrevinci]

I tried the solution(s) proposed by @kevinfluegel but am not able to get it to work reliably with keyboard navigation. Sometimes I simply wish that more could be exposed from the library. If we would have access to the Disclosure Context from the outside this library would be much simpler to use. I am finding myself constantly battling the components as they are today since I like to have programmatic control over them. Maybe I'll just end up copying the code.

[loomchild]

The fact that Disclosure component doesn't expose its open state via an event and doesn't allow to change it via prop makes it extremely hard to use when building accordions. I will try native <details> tag - at least it communicates with outside world via native events and attributes.

[kashyapshiv]

Hey Guys, I also had the same issue and this works perfect. Check this out.

Headless UI collapse

[Moelafi]

Dunno if this issue is still relevant but i managed to solve it with a straight forward solution.

I used the onClickOutside hook logic. Basically, wrap the content in the function as you do to have access to the close().

Then instead of adding the content directly there in the function make it a component, call it PanelContent

This component can receive the close() as a prop

Inside the content component add the onClick outside hook and make it so that when you click outside the content - ex: on the disclosure button or any other element, the close() is called... and there you go.

useEffect(() => {
const handler = (e) => {
const target = e.target;
const cardContent = contentRef.current;

  if (target === cardContent) return;
  if (cardContent!.contains(target)) return;
  close();
};

window.addEventListener('click', handler);

return () => window.removeEventListener('click', handler);

}, []);

[zanami]

I haven't tried your code but it's like using Popover instead (without absolute positioning of Popover.Panels). Popover also closes on Esc, though.
I'm trying to make a component which expands content on mobile (like Disclosure) and pops up on desktops.

function SpecPopover({ data }) {
  const { title, price, text, text2 } = data;
  return (
    <div className="w-full">
      <div className="mx-auto w-full max-w-md rounded-2xl bg-white p-2">
        <Popover className="lg:relative">
          {({ open }) => (
            <>
              <Popover.Button className="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">
                <span>{title}</span>
                <ChevronUpIcon
                  className={`${
                    open ? "rotate-180 transform" : ""
                  } h-5 w-5 text-purple-500`}
                />
              </Popover.Button>
              <Popover.Panel className="lg:absolute lg:z-10 lg:bg-white pt-4 pb-2 text-sm text-gray-500">
                {text}
                {text2}
              </Popover.Panel>
            </>
          )}
        </Popover>
      </div>
    </div>
  );
}

[EdvardSire]

This works for two Disclosures:

const [lastDropdownClose, setLastDropdownClose] = useState<VoidFunction>();

function exclusiveDropdown(isOpen: boolean, close: VoidFunction) {
  if (lastDropdownClose && !(close === lastDropdownClose)) {
    lastDropdownClose();
  }
  setLastDropdownClose(() => close);
}


<Disclosure as="div" key={label}>
{({ open: isOpen, close }) => (
  <>
    <Disclosure.Button
      onClick={() => {
        if (exclusiveDropdown) {
          exclusiveDropdown(isOpen, close);
        }
      }}
    >
    </Disclosure.Button>

      <Disclosure.Panel>
        something here
      </Disclosure.Panel>
   </>
)}
</Disclosure>

[sha237gh]

this works for us but honestly, quite hacky to set it in the onclick handler. would love a more elegant solution to close disclosures from the outside in general

[mroussel-rhinos]

Hi, the way I used for vue3

<template>
  <div>   
    <Disclosure
      v-for="(item, index) in items"
      :key="item.id"
      v-slot="{ open, close }"
    >
      <DisclosureButton
        :ref="_ => (elements[index] = close)"
        @click="hideOther(index)"
      >
        <span>{{ item.title }}</span>
      </DisclosureButton>
      <DisclosurePanel
        :class="open"
      >
        <div>
          {{ item.content }}
        </div>
      </DisclosurePanel>
    </Disclosure>
  </div>
</template>

<script lang="ts" setup>
const elements = ref<any>([]);
function hideOther(index: number) {
  elements.value.filter((_:any, key: number) => key !== index).forEach((close: () => any) => close());
}
</script>

Hope this will help :)

[ladderschool]

So let's say I have a ton of disclosures that each handle their own state with open. Why can't I just assign an open={useOpen} prop to the Disclosures and handle it inside an object, preferably through context? Then you can do cool things like collapse or uncollapse all the disclosures with the click of a button, using again the context's setter.

The fact it's a render prop and doesn't allow the developer to make decisions on the UI functionality to me is a huge drawback of this component.

[Shofol]

This is what if we follow @mroussel-rhinos's solution in React-

// creating a list of refs to reference Disclosure buttons
const refs = useRef([]);

const handleClick = (index) => {
  refs.current.map((closeFunction, refIndex) => {
   // calling close() function for the other disclosures 
    if (refIndex !== index) {
      closeFunction();
    }
  });
};


{featuresData.map((feature, index) => {
          return (
            <Disclosure key={feature.heading}>
              {({ open, close }) => (
                <>
                  <Disclosure.Button
                    ref={(el) => (refs.current[index] = close)}
                    onClick={() => handleClick(index)} >
                    <span>
                      {feature.heading}
                    </span>
                    {open ? ChevronUpIcon : ChevronDownIcon}
                  </Disclosure.Button>
                    <Disclosure.Panel >
                      <div>{feature.content}</div>
                    </Disclosure.Panel>
                </>
              )}
            </Disclosure>
          );
        })}

[trainoasis]

I wonder why are we using headlessui in this case at all when this has to be hacked? For more flexibility with the UI/accessibility, or something else too? Feels bad to have to hack our way around this :)

[khanakia]

@Shofol It's saying closefunction not defined do you have the working example?

[AlaaMX]

Hello the Disclosure.panel exposes a render props "close" that we can use to close other tabs depending on the current opened index with a simplified and semantic implementation hope that helps.

const [disclosureState, setDisclosureState] = React.useState(0);

function handleDisclosureChange(i) {
setDisclosureState(i); // close all of them
}

`{productionMatches.map((elem, i) => (

                            <Disclosure.Button
                              as="div"
                              onClick={() => handleDisclosureChange(i)}
                            >
                            </Disclosure.Button>
                            <Disclosure.Panel>
                              {({ close }) =>
                                disclosureState === i ? (
                                  <div />
                                ) : (
                                  close()
                                )
                              }
                            </Disclosure.Panel>
                          
                        
                      </Disclosure>
                    ))} `

[rodrigo-arias]

@RobinMalfait Are there any plans to implement a new feature/component with the ability to open one disclosure at a time? I think it's a pretty common requirement that other libraries have solved. The workarounds shared here in the last two years are quite intricate. Thank you.

[dushakov92]

This is how i was able to do so.

1. Add this to your component.

  /**
   * This is done to prevent Next.js from throwing an error when using
   * document.querySelector() in the useEffect hook.
   */
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  /**
   * Close all other accordions when one is clicked.
   */
  function closeOtherAccordions() {
    // Find all buttons with an open state.
    const buttons = document.querySelectorAll(
      'button[data-headlessui-state="open"]'
    )

    // Re-run click on each open button to close them.
    buttons.forEach((button) => {
      button.click()
    })
  }

2. Add this to your Disclosure.Button

<Disclosure.Button 
   onMouseDown={() => {mounted && closeOtherAccordions()}}
>

[CptKokao]

I think we need to add ref and the condition ref.current !== button && button.click() to not make an additional click on the current button.

const ToggledBlock = () => {
	const [mounted, setMounted] = useState(false);
	const ref = useRef(null);

	useEffect(() => {
		setMounted(true);
	}, []);

	const closeOtherAccordions = useCallback(() => {
		const buttons = document.querySelectorAll(
			'button[data-headlessui-state="open"]',
		);

		buttons.forEach((button) => {
			ref.current !== button && button.click();
		});
	}, []);

	return (
		<Disclosure>
			<Disclosure.Button
				ref={ref}
				onMouseDown={() => {
					mounted && closeOtherAccordions();
				}}
			>...</Disclosure.Button>

			<Disclosure.Panel>..</Disclosure.Panel>
		</Disclosure>
	);
};

[ivan-kleshnin]

It's a shame that we have to hack around such basic functionality 😞

---

Here's an alternative implementation for @Moelafi 's great idea to use on-Click-Outside logic. This version uses real onClickOutside and does not mess with window directly:

export function YourSinglePanelDisclosureComponent() {
  const disclosureRef = useRef(null)
  const closeFnRef = useRef<() => void>()

  function onClickOutside() {
    if (closeFnRef.current) {
      closeFnRef.current()
    }
  }

  useOnClickOutside(disclosureRef, onClickOutside, "mouseup") // "mousedown" -> "mouseup" to avoid (race condition?) bug

  return (
    <Disclosure
      as="div"
      ...
      ref={disclosureRef}
    >
      {({open, close}) => {
        closeFnRef.current = close
        return ...
      }}
    </Disclosure>
  )
})

---

With reusable hook:

hooks

function useExclusiveDisclosure<T extends HTMLElement>() {
  const disclosureRef = useRef<T>(null)
  const closeFnRef = useRef<() => void>()

  function onClickOutside() {
    if (closeFnRef.current) {
      closeFnRef.current()
    }
  }

  useOnClickOutside(disclosureRef, onClickOutside, "mouseup")

  return {disclosureRef, closeFnRef}
}

components

export function YourSinglePanelDisclosureComponent() {
  const {disclosureRef, closeFnRef} = useExclusiveDisclosure()
  return (
    <Disclosure
      as="div"
      ...
      ref={disclosureRef}
    >
      {({open, close}) => {
        closeFnRef.current = close
        return ...
      }}
    </Disclosure>
  )
})

[ishpreet95]

There is a defaultOpen prop for the Disclosure component, it's not working properly. Has anyone else come across this?

[muzaffar622]

If you have multiple disclosures in different components here a tricky solution without using ref or useState

`

const hideOtherDisclosuresHandle = (_id: string) => {

const buttons = document.querySelectorAll('button[data-headlessui-state="open"]');
buttons.forEach(button => {
  if (button?.id !== _id) {
    //@ts-ignore: Unreachable code error
    button?.click();
  }
});};`

return (
`    items.map((item, index) => ( 
      <Disclosure>
       {({ open, close }) => (
       <Disclosure.Button id={item.id} onClick={() => hideOtherDisclosuresHandle(item.id)} 
       </Disclosure.Button> 
      )}
 )})`

[davoodfox]

I figured I should use the close() function in every other Disclosure instance when I click on a particular instance. I would save the current active one in a useState and check with each instance if the ref is equal to the active state and call the close() function if it's not.

function Menu() {
  const refs = useRef(new Array());
   const [focused, setFocused] = useState(null);
  return (
      <MyDisclosure refs={refs} focused={focused} setFocused={setFocused} title="1">
          <Disclosure.Panel>1</Disclosure.Panel>
      </MyDisclosure>
      <MyDisclosure refs={refs} focused={focused} setFocused={setFocused} title="2">
          <Disclosure.Panel>2</Disclosure.Panel>
      </MyDisclosure>
      <MyDisclosure refs={refs
      <MyDisclosure refs={refs} focused={focused} setFocused={setFocused} title="3">
          <Disclosure.Panel>3</Disclosure.Panel>
      </MyDisclosure>
      <MyDisclosure refs={refs
  )
}

function MyDisclosure( props, refs, focused, setFocused, title, children) {
   const ref = useRef(null);
   return (
      <Disclosure
          as="div"
          ref={(element) => {
              refs.current.push(element);
              ref.current = element;
          }}
      >
        {({ open, close }) => (
          <>
            <ShouldClose
              focused={focused}
              current={ref.current}
              close={close}
            />
           <Disclosure.Button onClick={() => setFocused(ref.current)}>{title}</Disclosure.Button>
           {children}
         </>
       )}
    </Disclosure>
  )
}

function ShouldClose({ focused, current, close }) {
  useEffect(() => {
    if (current != focused) {
      close();
    }
  }, [focused, current, close]);
  return <></>;
}

It might be a little messy, but I'm using the provided close() function to close the Disclosures which is better than writing a custom close function imo.

[DylanDorvilmaOrigins]

Hello, I have a lot of problem with a precise usecase, but with my friend, we found a solution.
If you want to make a custom hook, here is a way to start :

import { MutableRefObject, useRef } from 'react';
export type toggleAccordionItemFunction = (index: number) => void;

export function useAccordionItemToggler(): {
  toggleAccordionItem: toggleAccordionItemFunction;
  buttonRefs: MutableRefObject<HTMLButtonElement[]>;
} {
  const buttonRefs = useRef<HTMLButtonElement[]>([]);

  const toggleAccordionItem: toggleAccordionItemFunction = (index: number) => {
    const clickedButton = buttonRefs.current[index];

    const openedButton = buttonRefs.current.find(
      (currentRef) => currentRef && currentRef.getAttribute('data-value') === 'true',
    );
    if (openedButton) {
      openedButton.click();
    }
    if (clickedButton === openedButton) {
      clickedButton.click();
    }
  };
  return { toggleAccordionItem, buttonRefs };
}

It's really useful with headlessUI accordion

[julioflima]

Finally resolved as a charm with a lot of help of some guys here, in special, @kevinfluegel:

import { useInView } from 'framer-motion';
import {
  FC,
  MouseEvent,
  PropsWithChildren,
  ReactNode,
  useCallback,
  useEffect,
  useRef,
  useState
} from 'react';
import { delay } from 'utils/delay';
import Accordion from './Accordion';
import Entering from './Entering';

type TAcordion = {
  title?: ReactNode;
  children?: ReactNode;
  defaultOpen?: boolean;
};

interface IAcordions {
  acordions?: TAcordion[];
}

const Accordions: FC<PropsWithChildren<IAcordions>> = ({ acordions }) => {
  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const refDiv = useRef<HTMLDivElement | null>(null);
  const openedRef = useRef<HTMLButtonElement | null>(null);
  const inView = useInView(refDiv, {
    once: true,
    amount: 'all'
  });

  const [tryToOpen, setTryToOpen] = useState(true);

  const handleClick = (index: number) => async (e: MouseEvent<HTMLButtonElement>) => {
    if (!!buttonRefs.current?.length) {
      const clickedButton = buttonRefs.current[index];

      if (clickedButton === openedRef.current) return (openedRef.current = null);

      if (openedRef.current && !!openedRef.current?.getAttribute('data-value')) {
        openedRef.current?.click();

        e.preventDefault();
        e.stopPropagation();

        await delay(450);
        clickedButton?.click();
      }

      openedRef.current = clickedButton;
    }
  };

  const getRef = (index: number) => (ref: HTMLButtonElement | null) =>
    (buttonRefs.current[index] = ref);

  const handler = () => {
    if (typeof window !== 'undefined') {
      const elements = window?.document?.querySelectorAll(
        'div[aria-expanded="false"]'
      ) as NodeListOf<HTMLDivElement>;

      if (!!elements.length) elements[0]?.click();
    }
  };

  const handlerTimer = useCallback(async () => {
    await delay(200);
    handler();
    await delay(200);
    handler();
    if (buttonRefs.current) openedRef.current = buttonRefs.current[0];
    setTryToOpen(false);
  }, []);

  useEffect(() => {
    if (tryToOpen && inView) handlerTimer();
  }, [handlerTimer, inView, tryToOpen]);

  return (
    <div ref={refDiv}>
      {acordions?.map(({ children, title }, index) => (
        <Entering key={'acordion' + index} initial={false}>
          <Accordion title={title} onClick={handleClick(index)} ref={getRef(index)}>
            {children}
          </Accordion>
        </Entering>
      ))}
    </div>
  );
};

export default Accordions;

import { Disclosure, Transition } from '@headlessui/react';
import Arrow from 'components/Arrow';
import {
  forwardRef,
  ForwardRefRenderFunction,
  MouseEvent,
  PropsWithChildren,
  ReactNode
} from 'react';
import { cn } from 'utils/cn';

interface IAccordion {
  title?: ReactNode;
  defaultOpen?: boolean;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
}

const Accordion: ForwardRefRenderFunction<HTMLButtonElement, PropsWithChildren<IAccordion>> = (
  { children, title, onClick, defaultOpen },
  ref
) => {
  return (
    <div className=" my-4 w-full">
      <div className="w-full">
        <Disclosure defaultOpen={defaultOpen}>
          {({ open }) => (
            <div
              className={cn(
                'rounded-6xl  transition-colors duration-200 ease-in-out',
                'border-1 border-tolq-gray-100 bg-white',
                open && ' shadow-custom-light-gray outline-none'
              )}
            >
              <Disclosure.Button as="div">
                <button
                  onClick={onClick}
                  className={cn(
                    'transition-colors duration-200 ease-in-out',
                    'group flex w-full items-center justify-between',
                    'text-left text-sm font-medium',
                    'focus-visible:ring-offset-primary-blue-500/75',
                    'focus:outline-none focus-visible:ring',
                    'px-4 py-2',
                    'text-tertiary-100 hover:bg-tolq-gray-200',
                    'rounded-6xl  bg-white',
                    open && 'rounded-b-none '
                  )}
                  data-value={open}
                  ref={ref}
                >
                  {typeof title === 'string' ? (
                    <h2>{title}</h2>
                  ) : (
                    <>{title}</>
                  )}
                  <Arrow open={!open} className="size-7 !text-tolq-black-200" />
                </button>
              </Disclosure.Button>
              <Transition
                enter="transition duration-100 ease-out"
                enterFrom="transform scale-95 opacity-0 h-0"
                enterTo="transform scale-100 opacity-100 h-full"
                leave="transition duration-75 ease-out"
                leaveFrom="transform scale-100 opacity-100 h-full"
                leaveTo="transform scale-95 opacity-0 h-0"
              >
                <Disclosure.Panel className="px-6 py-4 text-sm">{children}</Disclosure.Panel>
              </Transition>
            </div>
          )}
        </Disclosure>
      </div>
    </div>
  );
};

export default forwardRef(Accordion);

import { AnimatePresence, motion, useInView, Variants } from 'framer-motion';
import { FC, HTMLAttributes, PropsWithChildren, useMemo, useRef } from 'react';
import { cn } from 'utils/cn';

export interface IEntering extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
  offset?: number;
  position?: 'left' | 'right' | 'top' | 'bottom';
  stiffness?: number;
  duration?: number;
  damping?: number;
  mass?: number;
  amount?: 'some' | 'all' | number;
  delay?: number;
  initial?: boolean;
}

const Entering: FC<IEntering> = ({
  offset = 50,
  position: initPosition = 'bottom',
  duration = 0.2,
  stiffness = 100,
  damping = 12,
  mass = 1,
  delay = 0.0,
  amount = 0.7,
  children,
  initial = true,
  className = '',
  style = {}
}) => {
  const ref = useRef(null);
  const inView = useInView(ref, {
    once: true,
    amount
  });

  const isActive = initial || inView;

  const position = useMemo(() => {
    if (initPosition === 'left') {
      return { x: -1 * offset * 2 };
    }
    if (initPosition === 'right') {
      return { x: offset };
    }
    if (initPosition === 'top') {
      return { y: -1 * offset };
    }
    if (initPosition === 'bottom') {
      return { y: offset };
    }
  }, [offset, initPosition]);

  const variants: Variants = {
    inactive: {
      opacity: 1,
      y: 0,
      x: 0
    },
    out: {
      opacity: 0
    },
    in: {
      ...position,
      opacity: 0
    }
  };

  return (
    <AnimatePresence mode="wait" initial={initial}>
      <div ref={ref} className={cn(className, isActive ? 'hidden' : 'opacity-0')} style={style}>
        {children}
      </div>
      {isActive && (
        <motion.div
          variants={variants}
          initial="in"
          animate="inactive"
          exit="out"
          className={className}
          style={style}
          transition={{
            type: 'spring',
            damping,
            stiffness,
            restDelta: 0.01,
            mass,
            duration,
            delay
          }}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default Entering;