@dnb/eufemia/cjs/components/tabs/TabsContentWrapper.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ContentWrapper;
var _react = require("react");
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _Section = _interopRequireDefault(require("../section/Section.js"));
var _useSharedState = require("../../shared/helpers/useSharedState.js");
var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ContentWrapper({
  id,
  children = null,
  selectedKey = null,
  contentStyle = null,
  animate = null,
  contentInnerSpace = {
    top: 'large'
  },
  ...rest
}) {
  const sharedStateRef = (0, _react.useRef)(null);
  const [state, setState] = (0, _react.useState)(() => {
    if (id) {
      const shared = (0, _useSharedState.createSharedState)(id);
      sharedStateRef.current = shared;
      return shared.get() || {
        key: null
      };
    }
    return {
      key: null
    };
  });
  (0, _react.useEffect)(() => {
    if (!id || !sharedStateRef.current) {
      return undefined;
    }
    const sharedState = sharedStateRef.current;
    const subscriber = () => {
      const params = sharedState.get();
      if ((params === null || params === void 0 ? void 0 : params.key) !== undefined) {
        setState(prev => {
          if (params.key !== prev.key) {
            return params;
          }
          return prev;
        });
      }
    };
    sharedState.subscribe(subscriber);
    return () => {
      sharedState.unsubscribe(subscriber);
      sharedStateRef.current = null;
    };
  }, [id]);
  const resolvedInnerSpace = contentInnerSpace === true ? 'large' : contentInnerSpace;
  const spacingProps = (0, _SpacingUtils.useSpacing)({
    ...rest,
    innerSpace: !contentStyle && resolvedInnerSpace ? resolvedInnerSpace : undefined
  }, {
    className: "dnb-tabs__content dnb-no-focus" + (!contentStyle && resolvedInnerSpace ? " dnb-space" : "")
  });
  if (!children) {
    return null;
  }
  const params = {
    ...rest
  };
  const activeKey = state.key !== null ? state.key : selectedKey;
  if (activeKey) {
    params['aria-labelledby'] = (0, _componentHelper.combineLabelledBy)(params, `${id}-tab-${activeKey}`);
  }
  (0, _componentHelper.validateDOMAttributes)({
    id,
    children,
    selectedKey,
    contentStyle,
    animate,
    contentInnerSpace,
    ...rest
  }, params);
  let content = children;
  if (typeof children === 'function') {
    const stateToPass = state.key !== null ? state : {
      ...state,
      key: activeKey
    };
    content = children(stateToPass);
  }
  return (0, _jsxRuntime.jsx)(_HeightAnimation.default, {
    role: "tabpanel",
    tabIndex: -1,
    id: `${id}-content`,
    element: contentStyle ? ({
      ref,
      ...props
    }) => {
      return (0, _jsxRuntime.jsx)(_Section.default, {
        variant: contentStyle ? contentStyle : undefined,
        innerSpace: resolvedInnerSpace || undefined,
        ref: ref,
        ...props
      });
    } : 'div',
    ...spacingProps,
    duration: 600,
    animate: animate === true,
    ...params,
    children: content
  });
}
//# sourceMappingURL=TabsContentWrapper.js.map