@dnb/eufemia/cjs/components/stat/Root.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Space = _interopRequireDefault(require("../space/Space.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _StatRootContext = _interopRequireDefault(require("./StatRootContext.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Root(props) {
  const {
    children,
    id = null,
    className = null,
    style = null,
    visualOrder = 'label-content',
    skeleton = null,
    ...rest
  } = props;
  if (!hasOnlySupportedChildren(children)) {
    (0, _componentHelper.warn)('Stat.Root should only contain Stat.Label and Stat.Content.');
  }
  const hasLabel = hasRequiredLabel(children);
  if (!hasLabel) {
    (0, _componentHelper.warn)('Stat.Root should contain a Stat.Label.');
  }
  if (hasLabel && !hasValidLabelContentOrder(children)) {
    (0, _componentHelper.warn)('Stat.Root: every Stat.Content should be preceded by a Stat.Label for valid dt/dd pairing.');
  }
  return (0, _jsxRuntime.jsx)(_StatRootContext.default, {
    value: {
      inRoot: true,
      skeleton
    },
    children: (0, _jsxRuntime.jsx)(_Space.default, {
      element: "dl",
      id: id,
      style: style,
      className: (0, _clsx.default)(`dnb-stat dnb-stat__root dnb-stat__root--${visualOrder}`, className),
      ...rest,
      children: children
    })
  });
}
Root._supportsSpacingProps = true;
var _default = exports.default = Root;
function hasOnlySupportedChildren(children) {
  return _react.default.Children.toArray(children).every(child => isSupportedChild(child));
}
function isSupportedChild(child) {
  var _child$type;
  if (!_react.default.isValidElement(child)) {
    if (typeof child === 'string') {
      return child.trim().length === 0;
    }
    return true;
  }
  if (child.type === _react.default.Fragment) {
    return hasOnlySupportedChildren(child.props.children);
  }
  const role = (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type._statRole;
  return role === 'label' || role === 'content';
}
function hasRequiredLabel(children) {
  return _react.default.Children.toArray(children).some(child => hasLabelChild(child));
}
function hasLabelChild(child) {
  var _child$type2;
  if (!_react.default.isValidElement(child)) {
    return false;
  }
  if (child.type === _react.default.Fragment) {
    return hasRequiredLabel(child.props.children);
  }
  const role = (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2._statRole;
  return role === 'label';
}
function flattenRoles(children) {
  const roles = [];
  for (const child of _react.default.Children.toArray(children)) {
    var _child$type3;
    if (!_react.default.isValidElement(child)) {
      continue;
    }
    if (child.type === _react.default.Fragment) {
      (0, _push.default)(roles).call(roles, ...flattenRoles(child.props.children));
      continue;
    }
    const role = (_child$type3 = child.type) === null || _child$type3 === void 0 ? void 0 : _child$type3._statRole;
    if (role === 'label' || role === 'content') {
      (0, _push.default)(roles).call(roles, role);
    }
  }
  return roles;
}
function hasValidLabelContentOrder(children) {
  const roles = flattenRoles(children);
  let hasSeenLabel = false;
  for (const role of roles) {
    if (role === 'label') {
      hasSeenLabel = true;
    } else if (role === 'content') {
      if (!hasSeenLabel) {
        return false;
      }
    }
  }
  return true;
}
//# sourceMappingURL=Root.js.map