@dnb/eufemia/cjs/components/breadcrumb/Breadcrumb.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "BreadcrumbItem", {
  enumerable: true,
  get: function () {
    return _BreadcrumbItem.default;
  }
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _Icon = _interopRequireDefault(require("../icon/Icon.js"));
var _Accordion = _interopRequireDefault(require("../accordion/Accordion.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _index = require("../../icons/index.js");
var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _BreadcrumbMultiple = require("./BreadcrumbMultiple.js");
var _index2 = require("../../shared/index.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const toggleIcon = _Icon.default.transition({
  collapsed: _index.chevron_down,
  expanded: _index.chevron_up
});
const breadcrumbDefaultProps = {
  skeleton: false,
  collapsed: true,
  spacing: false
};
const Breadcrumb = localProps => {
  const context = (0, _react.useContext)(_Context.default);
  const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, breadcrumbDefaultProps, context?.translation?.Breadcrumb, context?.Breadcrumb, {
    skeleton: context?.skeleton
  });
  const {
    className,
    skeleton,
    children: items,
    variant,
    onClick,
    navText,
    goBackText,
    homeText,
    backToText,
    collapsed: overrideCollapsed,
    spacing,
    noAnimation,
    data,
    href,
    onToggle,
    ...props
  } = allProps;
  const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
  const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
  const isCollapsedRef = (0, _react.useRef)(overrideCollapsed);
  const {
    isSmall
  } = (0, _index2.useMedia)();
  (0, _react.useEffect)(() => {
    if (overrideCollapsed !== isCollapsedRef.current) {
      isCollapsedRef.current = overrideCollapsed;
      forceUpdate();
    }
  }, [overrideCollapsed]);
  (0, _react.useEffect)(() => {
    if (!isSmall && overrideCollapsed !== false) {
      if (isCollapsedRef.current === false) {
        onToggle?.(true);
      }
      isCollapsedRef.current = true;
      forceUpdate();
    }
  }, [isSmall, overrideCollapsed, onToggle]);
  const onClickHandler = (0, _react.useCallback)(() => {
    isCollapsedRef.current = !isCollapsedRef.current;
    forceUpdate();
    onToggle?.(isCollapsedRef.current);
  }, [onToggle]);
  const currentVariant = (0, _react.useMemo)(() => {
    if (!variant) {
      if (items || data) {
        return 'responsive';
      } else {
        return 'single';
      }
    }
    return variant;
  }, [data, items, variant]);
  (0, _componentHelper.validateDOMAttributes)(allProps, props);
  const navProps = (0, _SpacingUtils.useSpacing)(allProps, {
    ...props,
    'aria-label': (0, _componentHelper.convertJsxToString)(navText),
    className: (0, _clsx.clsx)('dnb-breadcrumb', `dnb-breadcrumb--variant-${currentVariant}`, skeletonClasses, className)
  });
  return (0, _jsxRuntime.jsxs)("nav", {
    ...navProps,
    children: [(0, _jsxRuntime.jsx)("div", {
      className: "dnb-breadcrumb__bar",
      children: currentVariant === 'single' ? (0, _jsxRuntime.jsx)(_Button.default, {
        text: goBackText,
        variant: "tertiary",
        icon: "chevron_left",
        iconPosition: "left",
        onClick: onClick,
        href: href
      }) : currentVariant === 'collapse' ? (0, _jsxRuntime.jsx)(_Accordion.default, {
        variant: "tertiary",
        title: backToText,
        expanded: !isCollapsedRef.current,
        noAnimation: noAnimation,
        onChange: ({
          expanded,
          event
        }) => {
          onClick?.(event);
          isCollapsedRef.current = !expanded;
          onToggle?.(!expanded);
        },
        children: (0, _jsxRuntime.jsx)("div", {
          className: "dnb-breadcrumb__collapse",
          children: (0, _jsxRuntime.jsx)(_BreadcrumbMultiple.BreadcrumbMultiple, {
            data: data,
            items: items,
            collapsed: false,
            noAnimation: noAnimation
          })
        })
      }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [currentVariant === 'responsive' && (0, _jsxRuntime.jsx)(_Button.default, {
          className: "dnb-breadcrumb__toggle",
          text: backToText,
          variant: "tertiary",
          icon: toggleIcon,
          transitionState: !isCollapsedRef.current ? 'expanded' : 'collapsed',
          iconPosition: "left",
          onClick: onClick !== null && onClick !== void 0 ? onClick : onClickHandler,
          "aria-expanded": !isCollapsedRef.current,
          bounding: true
        }), (0, _jsxRuntime.jsx)(_BreadcrumbMultiple.BreadcrumbMultiple, {
          data: data,
          items: items,
          collapsed: false,
          noAnimation: noAnimation
        })]
      })
    }), currentVariant === 'responsive' && (0, _jsxRuntime.jsx)("div", {
      className: "dnb-breadcrumb__collapse",
      children: (0, _jsxRuntime.jsx)(_BreadcrumbMultiple.BreadcrumbMultiple, {
        data: data,
        items: items,
        collapsed: isCollapsedRef.current,
        noAnimation: noAnimation
      })
    })]
  });
};
Breadcrumb.Item = _BreadcrumbItem.default;
(0, _withComponentMarkers.default)(Breadcrumb, {
  _supportsSpacingProps: true
});
var _default = exports.default = Breadcrumb;
//# sourceMappingURL=Breadcrumb.js.map