@atlaskit/drawer/dist/esm/drawer-panel/drawer-content.js

A drawer is a panel that slides in from the left side of the screen.

/* drawer-content.tsx generated by @compiled/babel-plugin v3.0.2 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./drawer-content.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useEffect, useRef, useState } from 'react';
import ScrollLock from 'react-scrolllock';
import { mergeRefs } from 'use-callback-ref';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { useEnsureIsInsideDrawer } from '../use-ensure-is-inside-drawer';
import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
var styles = {
  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug _19pk1ejb"
};
var DrawerContentBase = /*#__PURE__*/forwardRef(function (_ref, scrollableRef) {
  var children = _ref.children,
    _ref$scrollContentLab = _ref.scrollContentLabel,
    scrollContentLabel = _ref$scrollContentLab === void 0 ? 'Scrollable content' : _ref$scrollContentLab,
    xcss = _ref.xcss;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showContentFocus = _useState2[0],
    setContentFocus = _useState2[1];
  var ref = useRef(null);
  useEffect(function () {
    var setLazyContentFocus = function setLazyContentFocus() {
      var target = ref.current;
      target && setContentFocus(target.scrollHeight > target.clientHeight);
    };
    setLazyContentFocus();
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: ax([styles.default, xcss]),
    ref: mergeRefs([ref, scrollableRef])
    // tabindex is allowed here so that keyboard users can scroll content
    ,
    tabIndex: showContentFocus ? 0 : undefined,
    role: showContentFocus ? 'region' : undefined,
    "aria-label": showContentFocus ? scrollContentLabel : undefined,
    "data-testid": "drawer-contents"
  }, children);
});

/**
 * __Drawer content__
 *
 * The main content section of the drawer panel.
 */
export var DrawerContent = function DrawerContent(_ref2) {
  var children = _ref2.children,
    scrollContentLabel = _ref2.scrollContentLabel,
    xcss = _ref2.xcss;
  useEnsureIsInsideDrawer();
  usePreventProgrammaticScroll();
  var content = /*#__PURE__*/React.createElement(DrawerContentBase, {
    scrollContentLabel: scrollContentLabel,
    xcss: xcss
  }, children);

  // Under the top-layer flag, background scroll is handled by `DialogScrollLock`
  // (rendered by `DrawerTopLayer`), so we skip `react-scrolllock` here to avoid
  // double-locking the body. See the top-layer migration scroll decision.
  if (fg('platform-dst-top-layer')) {
    return content;
  }
  return /*#__PURE__*/React.createElement(ScrollLock, null, content);
};