@atlaskit/side-navigation
Version:
A highly composable side navigation component that supports nested views.
56 lines (53 loc) • 2.39 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef } from 'react';
import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
import { useShouldNestedElementRender } from '../NestableNavigationContent/use-should-nested-element-render';
/**
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
const outerContainerCSS = null;
const innerContainerCSS = {
basic: "_1reo1wug _18m91wug _1e0c1txw _vchhusvi _1bsb1osq _kqswh2mm _2lx21bp4 _14mjlb4i _1ywu1ule _1qdgyh40 _18poh2mm _1bqqcs5v _tua5idpf _1hfk1q2g _aetrb3bt _3mxo1wug",
topScrollIndicator: "_rfx3lb4i _cfu11ule _kfgtyh40 _1cs8stnw _1g0vcs5v _1rus1q2g _1kt9b3bt _1enwidpf _z5wtidpf"
};
const containerCSS = {
basic: "_kqswh2mm _12l2u2gc _ahbqu2gc _1pfhidpf _1p3h12x7 _1l6bpxbi _auo4rdoj _hp2110yn",
marginBlockStart: "_1pfhv77o"
};
/**
* __Navigation content__
*
* A navigation content is used as the container for navigation items.
*
* - [Examples](https://atlassian.design/components/side-navigation/examples#content)
* - [Code](https://atlassian.design/components/side-navigation/code)
*
* @deprecated `@atlaskit/side-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
*/
export const NavigationContent = /*#__PURE__*/forwardRef((props, ref) => {
const {
showTopScrollIndicator,
children,
testId
} = props;
const {
shouldRender
} = useShouldNestedElementRender();
const scrollbar = useScrollbarWidth();
if (!shouldRender) {
return children;
}
const typedRef = ref;
return /*#__PURE__*/React.createElement("div", {
ref: typedRef,
"data-testid": testId,
className: ax(["_1reo15vq _18m915vq _1e0c1txw _4t3i1osq _kqswh2mm _rfx3lb4i _cfu11ule _kfgtyh40 _1cs8stnw _1g0vkb7n _1rusvpsx _1kt9b3bt _1enwftgi _z5wtu2gc _14mjlb4i _1ywu1ule _1qdgyh40 _18postnw _1bqqkb7n _tua5idpf _1hfkvpsx _aetrb3bt _1gufidpf _1czdftgi _g0nfu2gc"])
}, /*#__PURE__*/React.createElement("div", {
ref: scrollbar.ref,
className: ax([innerContainerCSS.basic, !showTopScrollIndicator && innerContainerCSS.topScrollIndicator])
}, /*#__PURE__*/React.createElement("div", {
className: ax([containerCSS.basic, showTopScrollIndicator && containerCSS.marginBlockStart])
}, children)));
});