@atlaskit/drawer/dist/es2019/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 "./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';
const styles = {
  default: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug _19pk1ejb"
};
const DrawerContentBase = /*#__PURE__*/forwardRef(({
  children,
  scrollContentLabel = 'Scrollable content',
  xcss
}, scrollableRef) => {
  const [showContentFocus, setContentFocus] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const setLazyContentFocus = () => {
      const 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 const DrawerContent = ({
  children,
  scrollContentLabel,
  xcss
}) => {
  useEnsureIsInsideDrawer();
  usePreventProgrammaticScroll();
  const 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);
};