fannypack-v5/es/Page/PageWithSidebar.js

An accessible, composable, and friendly React UI Kit

import { useContext, useEffect, createElement as createElement$1, Fragment } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import { Box } from 'reakit';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Disclosure/styles-05d33dce.js';
import '../Disclosure/DisclosureState.js';
import '../Disclosure/Disclosure.js';
import '../Disclosure/DisclosureContent.js';
import { Disclosure } from '../Disclosure/index.js';
import '../Modal/styles-70c71d7d.js';
import '../Modal/ModalState.js';
import '../Modal/ModalBackdrop.js';
import '../Modal/Modal.js';
import '../Modal/ModalDisclosure.js';
import '../Modal/index.js';
import '../Drawer/styles-49ed4789.js';
import '../Drawer/Drawer.js';
import '../Drawer/DrawerDisclosure.js';
import '../Drawer/DrawerState.js';
import { Drawer } from '../Drawer/index.js';
import { b as PageWithSidebar$1, e as PageWithSidebarSidebar, f as PageWithSidebarSidebarExpandedWrapper, g as PageWithSidebarSidebarCollapsedWrapper, d as PageWithSidebarContent } from './styles-08c82482.js';
import { PageContext } from './PageContext.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var children = props.children,
      collapsedSidebarProps = props.collapsedSidebarProps,
      defaultIsVisible = props.defaultIsVisible,
      expandedSidebarProps = props.expandedSidebarProps,
      overrides = props.overrides,
      sidebar = props.sidebar,
      restProps = _objectWithoutPropertiesLoose(props, ["children", "collapsedSidebarProps", "defaultIsVisible", "expandedSidebarProps", "overrides", "sidebar"]);

  var boxProps = Box$1.useProps(_objectSpread2({}, restProps));

  var _React$useContext = useContext(PageContext),
      collapseBelow = _React$useContext.collapseBelow,
      isCollapsed = _React$useContext.isCollapsed,
      sidebarState = _React$useContext.sidebar;

  var className = useClassName({
    style: PageWithSidebar$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  var sidebarClassName = useClassName({
    style: PageWithSidebarSidebar,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      collapseBelow: collapseBelow,
      isCollapsed: isCollapsed,
      isSidebarMinimized: sidebarState.isMinimized
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Sidebar'
  });
  var sidebarExpandedWrapperClassName = useClassName({
    style: PageWithSidebarSidebarExpandedWrapper,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      collapseBelow: collapseBelow
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'SidebarExpandedWrapper'
  });
  var sidebarCollapsedWrapperClassName = useClassName({
    style: PageWithSidebarSidebarCollapsedWrapper,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      collapseBelow: collapseBelow
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'SidebarCollapsedWrapper'
  });
  var contentClassName = useClassName({
    style: PageWithSidebarContent,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      collapseBelow: collapseBelow,
      isCollapsed: isCollapsed,
      isSidebarMinimized: sidebarState.isMinimized,
      isSidebarOpen: sidebarState.isOpen
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Content'
  });
  useEffect(function () {
    if (!defaultIsVisible) {
      sidebarState.disclosure.hide();
    }
  }, [defaultIsVisible, sidebarState.disclosure]);
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    children: /*#__PURE__*/createElement$1(Fragment, null, /*#__PURE__*/createElement$1(Box$1, null, /*#__PURE__*/createElement$1(Drawer, _extends({
      className: sidebarCollapsedWrapperClassName,
      overrides: overrides
    }, collapsedSidebarProps, sidebarState.drawer), /*#__PURE__*/createElement$1(Box$1, {
      className: sidebarClassName,
      overrides: overrides
    }, sidebar))), /*#__PURE__*/createElement$1(Disclosure.Content, _extends({
      overrides: overrides
    }, expandedSidebarProps, sidebarState.disclosure), /*#__PURE__*/createElement$1(Box$1, {
      className: sidebarExpandedWrapperClassName,
      overrides: overrides
    }, /*#__PURE__*/createElement$1(Box$1, {
      className: sidebarClassName,
      overrides: overrides
    }, sidebar))), /*#__PURE__*/createElement$1(Box$1, {
      className: contentClassName,
      overrides: overrides
    }, children))
  });
}, {
  defaultProps: {
    collapsedSidebarProps: {},
    expandedSidebarProps: {},
    defaultIsVisible: true,
    minimizedSidebarWidth: '60px',
    sidebarWidth: '250px',
    collapsedSidebarWidth: '320px'
  },
  themeKey: 'PageWithSidebar'
});
var PageWithSidebar = createComponent(function (props) {
  var pageWithSidebarProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: pageWithSidebarProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'PageWithSidebar'
  },
  themeKey: 'PageWithSidebar'
});

export { PageWithSidebar };