fannypack-v5/es/Breadcrumb/Breadcrumb.js

An accessible, composable, and friendly React UI Kit

import { createContext, useMemo, createElement as createElement$1, Children, isValidElement, cloneElement, useContext, 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 } 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 '../Text/styles-00cf45ec.js';
import { Text } from '../Text/Text.js';
import { B as Breadcrumb$1, a as BreadcrumbItem$1, b as BreadcrumbSeparator$1, c as BreadcrumbLink$1 } from './styles-fcb3ea92.js';
import '../Link/styles-07f6febf.js';
import { Link } from '../Link/Link.js';
import '../List/styles-0ea4ce9d.js';
import '../List/List.js';
import '../List/ListItem.js';
import { List } from '../List/index.js';
import '../Navigation/styles-44d9eac2.js';
import { Navigation } from '../Navigation/Navigation.js';

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

  var hasSeparator = props.hasSeparator,
      overrides = props.overrides,
      separator = props.separator,
      restProps = _objectWithoutPropertiesLoose(props, ["hasSeparator", "overrides", "separator"]);

  var navigationProps = Navigation.useProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
    overrides: overrides
  }));
  var className = useClassName({
    style: Breadcrumb$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: navigationProps.className
  });
  var context = useMemo(function () {
    return {
      overrides: props.overrides
    };
  }, [props.overrides]);
  var children = /*#__PURE__*/createElement$1(BreadcrumbContext.Provider, {
    value: context
  }, /*#__PURE__*/createElement$1(List, {
    isOrdered: true,
    orientation: "horizontal",
    listStyleType: "none",
    overrides: overrides
  }, Children.map(props.children, function (child, index) {
    if (!isValidElement(child)) return child;
    var isLastChild = Children.count(props.children) - 1 === index;
    return cloneElement(child, _objectSpread2({
      hasSeparator: typeof hasSeparator !== 'undefined' ? hasSeparator : !isLastChild,
      separator: separator
    }, child.props));
  })));
  return _objectSpread2(_objectSpread2({}, navigationProps), {}, {
    'aria-label': 'Breadcrumb',
    className: className,
    children: children
  });
}, {
  themeKey: 'Breadcrumb'
});
var Breadcrumb = createComponent(function (props) {
  var breadcrumbProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: breadcrumbProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Breadcrumb'
  },
  defaultProps: {
    use: 'nav'
  },
  themeKey: 'Breadcrumb'
}); //////////////////////////////

var useBreadcrumbItemProps = createHook(function (props, _ref2) {
  var themeKey = _ref2.themeKey,
      themeKeyOverride = _ref2.themeKeyOverride;

  var hasSeparator = props.hasSeparator,
      isCurrent = props.isCurrent,
      overrides = props.overrides,
      separator = props.separator,
      restProps = _objectWithoutPropertiesLoose(props, ["hasSeparator", "isCurrent", "overrides", "separator"]);

  var boxProps = List.Item.useProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
    overrides: overrides
  }));
  var contextProps = useContext(BreadcrumbContext);
  var className = useClassName({
    style: BreadcrumbItem$1,
    styleProps: _objectSpread2(_objectSpread2({}, contextProps), props),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  var children = /*#__PURE__*/createElement$1(Fragment, null, Children.count(props.children) > 0 ? Children.map(props.children, function (child) {
    if (!isValidElement(child)) return child;

    if (child.type === BreadcrumbLink) {
      return cloneElement(child, _objectSpread2({
        isCurrent: isCurrent
      }, child.props));
    }

    return child;
  }) : props.children, hasSeparator && /*#__PURE__*/createElement$1(BreadcrumbSeparator, null, separator));
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    children: children
  });
}, {
  themeKey: 'Breadcrumb.Item'
});
var BreadcrumbItem = createComponent(function (props) {
  var breadcrumbItemProps = useBreadcrumbItemProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: breadcrumbItemProps
  });
}, {
  attach: {
    useProps: useBreadcrumbItemProps
  },
  defaultProps: {
    use: 'li'
  },
  themeKey: 'Breadcrumb.Item'
}); //////////////////////////////

var useBreadcrumbSeparatorProps = createHook(function (props, _ref3) {
  var themeKey = _ref3.themeKey,
      themeKeyOverride = _ref3.themeKeyOverride;
  var boxProps = Box$1.useProps(props);
  var contextProps = useContext(BreadcrumbContext);
  var className = useClassName({
    style: BreadcrumbSeparator$1,
    styleProps: _objectSpread2(_objectSpread2({}, contextProps), props),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    role: 'presentation',
    children: boxProps.children || '/'
  });
}, {
  themeKey: 'Breadcrumb.Separator'
});
var BreadcrumbSeparator = createComponent(function (props) {
  var breadcrumbItemProps = useBreadcrumbSeparatorProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: breadcrumbItemProps
  });
}, {
  attach: {
    useProps: useBreadcrumbSeparatorProps
  },
  themeKey: 'Breadcrumb.Separator'
}); //////////////////////////////

var useBreadcrumbLinkProps = createHook(function (props, _ref4) {
  var themeKey = _ref4.themeKey,
      themeKeyOverride = _ref4.themeKeyOverride;

  var isCurrent = props.isCurrent,
      restProps = _objectWithoutPropertiesLoose(props, ["isCurrent"]);

  var linkProps = isCurrent ? Text.useProps(restProps) : Link.useProps(restProps);
  var contextProps = useContext(BreadcrumbContext);
  var className = useClassName({
    style: BreadcrumbLink$1,
    styleProps: _objectSpread2(_objectSpread2({}, contextProps), props),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: linkProps.className
  });
  return _objectSpread2(_objectSpread2({}, linkProps), {}, {
    className: className,
    'aria-current': isCurrent ? 'page' : linkProps['aria-current'],
    href: isCurrent ? undefined : linkProps.href
  });
}, {
  themeKey: 'Breadcrumb.Link'
});
var BreadcrumbLink = createComponent(function (props) {
  var breadcrumbItemProps = useBreadcrumbLinkProps(props);
  var use = props.use;

  if (props.isCurrent) {
    use = Text;
  }

  return createElement({
    children: props.children,
    component: Box,
    use: use,
    htmlProps: breadcrumbItemProps
  });
}, {
  attach: {
    useProps: useBreadcrumbLinkProps
  },
  defaultProps: {
    use: 'a'
  },
  themeKey: 'Breadcrumb.Link'
});

export { Breadcrumb, BreadcrumbContext, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator };