@dnb/eufemia/cjs/components/accordion/AccordionTertiary.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AccordionTertiary;
var _react = require("react");
var _clsx = require("clsx");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _useSharedState = require("../../shared/helpers/useSharedState.js");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _AccordionTertiaryContent = _interopRequireDefault(require("./AccordionTertiaryContent.js"));
var _index = require("../../icons/index.js");
var _Icon = _interopRequireDefault(require("../icon/Icon.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const chevronIcon = _Icon.default.transition({
  collapsed: _index.chevron_down,
  expanded: _index.chevron_up
});
function shouldFocusContentFromClick(event) {
  if (event.detail === 0) {
    return true;
  }
  const {
    documentElement
  } = document;
  return documentElement.getAttribute('data-whatinput') === 'keyboard';
}
function AccordionTertiary(props) {
  var _data$expanded, _data$shouldFocusCont;
  const {
    title,
    expanded: expandedProp,
    noAnimation,
    className,
    children,
    onChange,
    icon = chevronIcon,
    iconPosition,
    ...rest
  } = props;
  const id = (0, _useId.default)(props.id);
  const contentId = `${id}-content`;
  const {
    data,
    set
  } = (0, _useSharedState.useSharedState)(id, {
    expanded: expandedProp !== null && expandedProp !== void 0 ? expandedProp : false
  });
  (0, _react.useEffect)(() => {
    if (expandedProp !== undefined) {
      set({
        expanded: expandedProp,
        shouldFocusContent: false
      });
    }
  }, [expandedProp, set]);
  const expanded = (_data$expanded = data?.expanded) !== null && _data$expanded !== void 0 ? _data$expanded : false;
  const shouldFocusContent = (_data$shouldFocusCont = data?.shouldFocusContent) !== null && _data$shouldFocusCont !== void 0 ? _data$shouldFocusCont : false;
  const handleClick = (0, _react.useCallback)(event => {
    const next = !expanded;
    set({
      expanded: next,
      shouldFocusContent: next && shouldFocusContentFromClick(event)
    });
    onChange?.({
      expanded: next,
      event
    });
  }, [expanded, set, onChange]);
  const mainParams = (0, _SpacingUtils.useSpacing)(props, {
    className: (0, _clsx.clsx)('dnb-accordion', 'dnb-accordion__variant--tertiary', expanded && 'dnb-accordion--expanded', className)
  });
  const WrapperElement = children ? 'div' : 'span';
  return (0, _jsxRuntime.jsxs)(WrapperElement, {
    ...mainParams,
    children: [(0, _jsxRuntime.jsx)(_Button.default, {
      ...rest,
      variant: "tertiary",
      icon: icon,
      iconPosition: iconPosition !== null && iconPosition !== void 0 ? iconPosition : 'left',
      transitionState: expanded ? 'expanded' : 'collapsed',
      "aria-expanded": expanded,
      "aria-controls": contentId,
      onClick: handleClick,
      className: "dnb-accordion__tertiary-button",
      children: title
    }), children && (0, _jsxRuntime.jsx)(_AccordionTertiaryContent.default, {
      contentId: contentId,
      expanded: expanded,
      noAnimation: noAnimation,
      shouldFocusContent: shouldFocusContent,
      onFocusHandled: () => set({
        ...data,
        shouldFocusContent: false
      }),
      children: children
    })]
  });
}
//# sourceMappingURL=AccordionTertiary.js.map