@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 = _interopRequireDefault(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 _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function shouldFocusContentFromClick(event) {
  if (event.detail === 0) {
    return true;
  }
  const {
    documentElement
  } = document;
  return documentElement.getAttribute('data-whatinput') === 'keyboard' || documentElement.getAttribute('data-whatintent') === 'keyboard';
}
function AccordionTertiary(props) {
  var _data$expanded, _data$shouldFocusCont;
  const {
    title,
    expanded: expandedProp,
    noAnimation,
    className,
    children,
    onChange,
    icon = _index.chevron_down,
    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 === null || data === void 0 ? void 0 : data.expanded) !== null && _data$expanded !== void 0 ? _data$expanded : false;
  const shouldFocusContent = (_data$shouldFocusCont = data === null || data === void 0 ? void 0 : data.shouldFocusContent) !== null && _data$shouldFocusCont !== void 0 ? _data$shouldFocusCont : false;
  const handleClick = (0, _react.useCallback)(event => {
    const next = !expanded;
    set({
      expanded: next,
      shouldFocusContent: shouldFocusContentFromClick(event)
    });
    onChange === null || onChange === void 0 || onChange({
      expanded: next,
      event
    });
  }, [expanded, set, onChange]);
  const mainParams = (0, _SpacingUtils.useSpacing)(props, {
    className: (0, _clsx.default)("dnb-accordion dnb-accordion__variant--tertiary", className, expanded && 'dnb-accordion--expanded')
  });
  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',
      "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