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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IsolatedStyleScopeContext = void 0;
exports.default = IsolatedStyleScope;
exports.getCurrentStyleScopeElement = getCurrentStyleScopeElement;
Object.defineProperty(exports, "getStyleScopeHash", {
  enumerable: true,
  get: function () {
    return _pluginScopeHash.getStyleScopeHash;
  }
});
exports.useIsolatedStyleScope = useIsolatedStyleScope;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _pluginScopeHash = require("../plugins/postcss-isolated-style-scope/plugin-scope-hash.js");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const IsolatedStyleScopeContext = exports.IsolatedStyleScopeContext = _react.default.createContext(undefined);
const parentScopeContextMap = new Map();
function IsolatedStyleScope(props) {
  const styleScopeContext = (0, _react.useContext)(IsolatedStyleScopeContext);
  const {
    scopeHash = 'auto',
    disableCoreStyleWrapper = false,
    uniqueKey = 'default',
    innerRef,
    children,
    style
  } = props;
  const localRef = (0, _react.useRef)();
  const scopeElementRef = innerRef || localRef;
  const generatedScopeHash = scopeHash === 'auto' ? (styleScopeContext === null || styleScopeContext === void 0 ? void 0 : styleScopeContext.generatedScopeHash) || (0, _pluginScopeHash.getStyleScopeHash)() : scopeHash;
  const isNestedWithNewScope = styleScopeContext && styleScopeContext.generatedScopeHash && styleScopeContext.generatedScopeHash !== generatedScopeHash;
  const parentContextMap = (styleScopeContext === null || styleScopeContext === void 0 ? void 0 : styleScopeContext.parentContextMap) || parentScopeContextMap;
  if (styleScopeContext !== null && styleScopeContext !== void 0 && styleScopeContext.generatedScopeHash) {
    parentContextMap.set(styleScopeContext.generatedScopeHash, styleScopeContext);
  }
  if (styleScopeContext !== null && styleScopeContext !== void 0 && styleScopeContext.generatedScopeHash ? props.scopeHash : true) {
    var _styleScopeContext$in;
    if (uniqueKey === false || !(styleScopeContext !== null && styleScopeContext !== void 0 && (_styleScopeContext$in = styleScopeContext.internalKeys) !== null && _styleScopeContext$in !== void 0 && _styleScopeContext$in.has(uniqueKey)) || isNestedWithNewScope) {
      var _styleScopeContext$sc;
      const internalKeys = new Set((styleScopeContext === null || styleScopeContext === void 0 ? void 0 : styleScopeContext.internalKeys) || []);
      if (typeof uniqueKey === 'string') {
        internalKeys.add(uniqueKey);
      }
      return _react.default.createElement(IsolatedStyleScopeContext.Provider, {
        value: {
          scopeHash,
          generatedScopeHash,
          disableCoreStyleWrapper,
          style,
          scopeElementRef,
          internalKeys: internalKeys,
          parentContextMap
        }
      }, _react.default.createElement("div", {
        "data-scope-hash": scopeHash === 'auto' ? (_styleScopeContext$sc = styleScopeContext === null || styleScopeContext === void 0 ? void 0 : styleScopeContext.scopeHash) !== null && _styleScopeContext$sc !== void 0 ? _styleScopeContext$sc : scopeHash : scopeHash,
        "data-scope-hash-id": uniqueKey || undefined,
        className: generatedScopeHash,
        style: style || (styleScopeContext === null || styleScopeContext === void 0 ? void 0 : styleScopeContext.style),
        ref: scopeElementRef
      }, disableCoreStyleWrapper ? children : _react.default.createElement("div", {
        className: "dnb-core-style"
      }, children)));
    }
  }
  return children;
}
function getCurrentStyleScopeElement(currentElement) {
  let scopeHash = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
  let fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  if (scopeHash === 'auto') {
    scopeHash = (0, _pluginScopeHash.getStyleScopeHash)();
  }
  if (typeof window === 'undefined') {
    return undefined;
  }
  if (scopeHash) {
    return currentElement.closest(`.${scopeHash}`);
  }
  return fallback || document.body;
}
function useIsolatedStyleScope(scopeHash) {
  const styleScopeContext = (0, _react.useContext)(IsolatedStyleScopeContext);
  const {
    scopeElementRef,
    generatedScopeHash,
    parentContextMap
  } = styleScopeContext || {};
  const getScopeElement = (0, _react.useCallback)(() => {
    var _parentCtx$scopeEleme;
    if (!scopeHash || scopeHash === generatedScopeHash) {
      return scopeElementRef === null || scopeElementRef === void 0 ? void 0 : scopeElementRef.current;
    }
    const map = parentContextMap || parentScopeContextMap;
    const parentCtx = map.get(scopeHash);
    return parentCtx === null || parentCtx === void 0 ? void 0 : (_parentCtx$scopeEleme = parentCtx.scopeElementRef) === null || _parentCtx$scopeEleme === void 0 ? void 0 : _parentCtx$scopeEleme.current;
  }, [scopeElementRef, generatedScopeHash, parentContextMap, scopeHash]);
  return {
    getScopeElement
  };
}
//# sourceMappingURL=IsolatedStyleScope.js.map