@dnb/eufemia/es/shared/IsolatedStyleScope.js

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useContext, useRef } from 'react';
import { getStyleScopeHash } from '../plugins/postcss-isolated-style-scope/plugin-scope-hash.js';
import { getSha } from './build-info/BuildInfo.js';
export { getStyleScopeHash };
export const IsolatedStyleScopeContext = React.createContext(undefined);
const parentScopeContextMap = new Map();
export default function IsolatedStyleScope(props) {
  const styleScopeContext = useContext(IsolatedStyleScopeContext);
  const {
    scopeHash = 'auto',
    disableCoreStyleWrapper = false,
    uniqueKey = 'default',
    innerRef,
    children,
    style
  } = props;
  const localRef = useRef();
  const scopeElementRef = innerRef || localRef;
  const generatedScopeHash = scopeHash === 'auto' ? styleScopeContext?.generatedScopeHash || getStyleScopeHash() : scopeHash;
  const isNestedWithNewScope = styleScopeContext && styleScopeContext.generatedScopeHash && styleScopeContext.generatedScopeHash !== generatedScopeHash;
  const parentContextMap = styleScopeContext?.parentContextMap || parentScopeContextMap;
  if (styleScopeContext?.generatedScopeHash) {
    parentContextMap.set(styleScopeContext.generatedScopeHash, styleScopeContext);
  }
  if (styleScopeContext?.generatedScopeHash ? props.scopeHash : true) {
    if (uniqueKey === false || !styleScopeContext?.internalKeys?.has(uniqueKey) || isNestedWithNewScope) {
      var _styleScopeContext$sc;
      const internalKeys = new Set(styleScopeContext?.internalKeys || []);
      if (typeof uniqueKey === 'string') {
        internalKeys.add(uniqueKey);
      }
      return React.createElement(IsolatedStyleScopeContext.Provider, {
        value: {
          scopeHash,
          generatedScopeHash,
          disableCoreStyleWrapper,
          style,
          scopeElementRef,
          internalKeys: internalKeys,
          parentContextMap
        }
      }, React.createElement("div", {
        "data-scope-hash": scopeHash === 'auto' ? (_styleScopeContext$sc = styleScopeContext?.scopeHash) !== null && _styleScopeContext$sc !== void 0 ? _styleScopeContext$sc : scopeHash : scopeHash,
        "data-scope-hash-id": uniqueKey || undefined,
        "data-scope-sha": uniqueKey ? getSha() : undefined,
        className: generatedScopeHash,
        style: style || styleScopeContext?.style,
        ref: scopeElementRef
      }, disableCoreStyleWrapper ? children : React.createElement("div", {
        className: "dnb-core-style"
      }, children)));
    }
  }
  return children;
}
export function getCurrentStyleScopeElement(currentElement, scopeHash = 'auto', fallback = null) {
  if (scopeHash === 'auto') {
    scopeHash = getStyleScopeHash();
  }
  if (typeof window === 'undefined') {
    return undefined;
  }
  if (scopeHash) {
    return currentElement.closest(`.${scopeHash}`);
  }
  return fallback || document.body;
}
export function useIsolatedStyleScope(scopeHash) {
  const styleScopeContext = useContext(IsolatedStyleScopeContext);
  const {
    scopeElementRef,
    generatedScopeHash,
    parentContextMap
  } = styleScopeContext || {};
  const getScopeElement = useCallback(() => {
    if (!scopeHash || scopeHash === generatedScopeHash) {
      return scopeElementRef?.current;
    }
    const map = parentContextMap || parentScopeContextMap;
    const parentCtx = map.get(scopeHash);
    return parentCtx?.scopeElementRef?.current;
  }, [scopeElementRef, generatedScopeHash, parentContextMap, scopeHash]);
  return {
    getScopeElement
  };
}
//# sourceMappingURL=IsolatedStyleScope.js.map