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

DNB Eufemia Design System UI Library

"use client";

import React, { useEffect, useRef, useState } from 'react';
import { validateDOMAttributes, combineLabelledBy } from "../../shared/component-helper.js";
import { applySpacing } from "../space/SpacingUtils.js";
import Section from "../section/Section.js";
import { createSharedState } from "../../shared/helpers/useSharedState.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import { jsx as _jsx } from "react/jsx-runtime";
export default function ContentWrapper({
  id,
  children = null,
  selectedKey = null,
  contentStyle = null,
  animate = null,
  contentInnerSpace = {
    top: 'large'
  },
  ...rest
}) {
  const sharedStateRef = useRef(null);
  const [state, setState] = useState(() => {
    if (id) {
      const shared = createSharedState(id);
      sharedStateRef.current = shared;
      return shared.get() || {
        key: null
      };
    }
    return {
      key: null
    };
  });
  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]);
  if (!children) {
    return null;
  }
  const params = {
    ...rest
  };
  const activeKey = state.key !== null ? state.key : selectedKey;
  if (activeKey) {
    params['aria-labelledby'] = combineLabelledBy(params, `${id}-tab-${activeKey}`);
  }
  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);
  }
  const resolvedInnerSpace = contentInnerSpace === true ? 'large' : contentInnerSpace;
  return _jsx(HeightAnimation, {
    role: "tabpanel",
    tabIndex: -1,
    id: `${id}-content`,
    element: contentStyle ? ({
      ref,
      ...props
    }) => {
      return _jsx(Section, {
        variant: contentStyle ? contentStyle : undefined,
        innerSpace: resolvedInnerSpace || undefined,
        ref: ref,
        ...props
      });
    } : 'div',
    ...applySpacing({
      ...rest,
      innerSpace: !contentStyle && resolvedInnerSpace ? resolvedInnerSpace : undefined
    }, {
      className: "dnb-tabs__content dnb-no-focus" + (!contentStyle && resolvedInnerSpace ? " dnb-space" : "")
    }),
    duration: 600,
    animate: animate === true,
    ...params,
    children: content
  });
}
//# sourceMappingURL=TabsContentWrapper.js.map