@itwin/itwinui-react/cjs/core/SideNavigation/SideNavigation.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
function _export(target, all) {
  for (var name in all)
    Object.defineProperty(target, name, {
      enumerable: true,
      get: all[name],
    });
}
_export(exports, {
  SideNavigation: function () {
    return SideNavigation;
  },
  SidenavExpandedContext: function () {
    return SidenavExpandedContext;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const _IconButton = require('../Buttons/IconButton.js');
const _react1 = require('@floating-ui/react');
const _Tooltip = require('../Tooltip/Tooltip.js');
const SidenavExpandedContext = _react.createContext(void 0);
const SideNavigation = _react.forwardRef((props, forwardedRef) => {
  let {
    items,
    secondaryItems,
    expanderPlacement = 'top',
    className,
    isExpanded: isExpandedProp,
    onExpanderClick,
    submenu,
    isSubmenuOpen = false,
    wrapperProps,
    contentProps,
    topProps,
    bottomProps,
    ...rest
  } = props;
  let [isExpanded, setIsExpanded] = (0, _index.useControlledState)(
    false,
    isExpandedProp,
  );
  let ExpandButton = _react.createElement(
    _IconButton.IconButton,
    {
      label: 'Toggle icon labels',
      'aria-expanded': isExpanded,
      className: 'iui-sidenav-button iui-expand',
      size: 'small',
      onClick: _react.useCallback(() => {
        setIsExpanded(!isExpanded);
        onExpanderClick?.();
      }, [isExpanded, onExpanderClick, setIsExpanded]),
    },
    _react.createElement(_index.SvgChevronRight, null),
  );
  return _react.createElement(
    SidenavExpandedContext.Provider,
    {
      value: isExpanded,
    },
    _react.createElement(
      _index.Box,
      {
        as: 'nav',
        ...wrapperProps,
        className: (0, _classnames.default)(
          'iui-side-navigation-wrapper',
          wrapperProps?.className,
        ),
        ref: forwardedRef,
      },
      _react.createElement(
        _react1.FloatingDelayGroup,
        {
          delay: _Tooltip.defaultTooltipDelay,
        },
        _react.createElement(
          _index.Box,
          {
            className: (0, _classnames.default)(
              'iui-side-navigation',
              {
                'iui-expanded': isExpanded,
                'iui-collapsed': !isExpanded,
              },
              className,
            ),
            ...rest,
          },
          'top' === expanderPlacement && ExpandButton,
          _react.createElement(
            _index.Box,
            {
              as: 'div',
              ...contentProps,
              className: (0, _classnames.default)(
                'iui-sidenav-content',
                contentProps?.className,
              ),
            },
            _react.createElement(
              _index.Box,
              {
                as: 'div',
                ...topProps,
                className: (0, _classnames.default)(
                  'iui-top',
                  topProps?.className,
                ),
              },
              items,
            ),
            _react.createElement(
              _index.Box,
              {
                as: 'div',
                ...bottomProps,
                className: (0, _classnames.default)(
                  'iui-bottom',
                  bottomProps?.className,
                ),
              },
              secondaryItems,
            ),
          ),
          'bottom' === expanderPlacement && ExpandButton,
        ),
      ),
      submenu && isSubmenuOpen ? submenu : null,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  SideNavigation.displayName = 'SideNavigation';