@atlaskit/navigation-system/dist/es2019/ui/page-layout/side-nav/toggle-button-provider.js

The latest navigation system for Atlassian apps.

import React, { useState } from 'react';
import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
import { SideNavToggleButtonElement } from './side-nav-toggle-button-element';

/**
 * Provider for the side nav toggle button contexts.
 *
 * We are using a [ref callback](https://react.dev/reference/react-dom/components/common#ref-callback) along with a state
 * for storing the button element once it has mounted, so that the side nav can bind event listeners to the button
 * once it is mounted.
 *
 * Otherwise, the side nav can be mounted before the button (e.g. if the button is lazy loaded), which would prevent the
 * event listeners from being set up.
 *
 * State is required as opposed to just a ref so that the effects in the side nav can react the element actually being mounted,
 * as ref values cannot be added as effect dependencies.
 */
export const SideNavToggleButtonProvider = ({
  children
}) => {
  const [element, setElement] = useState(null);
  return /*#__PURE__*/React.createElement(SideNavToggleButtonElement.Provider, {
    value: element
  }, /*#__PURE__*/React.createElement(SideNavToggleButtonAttachRef.Provider, {
    value: setElement
  }, children));
};