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

The latest navigation system for Atlassian apps.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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 var SideNavToggleButtonProvider = function SideNavToggleButtonProvider(_ref) {
  var children = _ref.children;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    element = _useState2[0],
    setElement = _useState2[1];
  return /*#__PURE__*/React.createElement(SideNavToggleButtonElement.Provider, {
    value: element
  }, /*#__PURE__*/React.createElement(SideNavToggleButtonAttachRef.Provider, {
    value: setElement
  }, children));
};