@dnb/eufemia/cjs/extensions/forms/ValueBlock/ValueBlock.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.isValueEmpty = isValueEmpty;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _helpers = require("../../../shared/helpers.js");
var _index = require("../../../elements/index.js");
var _index2 = require("../../../components/index.js");
var _SummaryListContext = _interopRequireDefault(require("../Value/SummaryList/SummaryListContext.js"));
var _ValueProviderContext = _interopRequireDefault(require("../Value/Provider/ValueProviderContext.js"));
var _ValueBlockContext = _interopRequireDefault(require("./ValueBlockContext.js"));
var _Context = _interopRequireDefault(require("../DataContext/Context.js"));
var _utils = require("../../../components/flex/utils.js");
var _IterateItemContext = _interopRequireDefault(require("../Iterate/IterateItemContext.js"));
var _index3 = require("../Iterate/ItemNo/index.js");
var _componentHelper = require("../../../shared/component-helper.js");
var _VisibilityContext = _interopRequireDefault(require("../Form/Visibility/VisibilityContext.js"));
var _Visibility = _interopRequireDefault(require("../Form/Visibility/Visibility.js"));
var _HelpButtonInline = _interopRequireWildcard(require("../../../components/help-button/HelpButtonInline.js"));
var _useId = _interopRequireDefault(require("../../../shared/helpers/useId.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function ValueBlock(localProps) {
  var _props$id;
  const summaryListContext = (0, _react.useContext)(_SummaryListContext.default);
  const valueBlockContext = (0, _react.useContext)(_ValueBlockContext.default);
  const {
    prerenderFieldProps
  } = (0, _react.useContext)(_Context.default) || {};
  const {
    index: iterateIndex
  } = (0, _react.useContext)(_IterateItemContext.default) || {};
  const {
    extend
  } = (0, _react.useContext)(_ValueProviderContext.default);
  const props = extend(localProps);
  const id = (0, _useId.default)((_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : props.forId);
  const defaultLayout = summaryListContext !== null && summaryListContext !== void 0 && summaryListContext.isNested ? 'horizontal' : 'vertical';
  const {
    className,
    label: labelProp,
    path,
    itemPath,
    labelSrOnly,
    transformLabel = label => label,
    inline,
    maxWidth = props.composition ? props.maxWidth : 'large',
    placeholder,
    showEmpty,
    children,
    composition,
    help,
    layout = defaultLayout,
    gap = 'xx-small'
  } = props;
  const label = (0, _react.useMemo)(() => {
    if (inline) {
      return null;
    }
    let label = labelProp;
    if (iterateIndex !== undefined) {
      label = (0, _index3.replaceItemNo)(labelProp, iterateIndex);
    }
    const canRenderToString = _react.default.isValidElement(label) ? typeof label.type === 'string' : true;
    return canRenderToString ? transformLabel(label, transformLabelParameters) : label;
  }, [inline, iterateIndex, labelProp, transformLabel]);
  const hide = prerenderFieldProps || isValueEmpty(children) && !showEmpty && !placeholder;
  const hasHelp = (help === null || help === void 0 ? void 0 : help.title) || (help === null || help === void 0 ? void 0 : help.content);
  const isComposition = composition === true;
  const isCompositionInContext = valueBlockContext === null || valueBlockContext === void 0 ? void 0 : valueBlockContext.composition;
  const isCompositionInContextWithoutLabel = !label && isCompositionInContext;
  const ref = (0, _react.useRef)(null);
  useNotInSummaryList(isCompositionInContext ? null : ref, label, path, itemPath);
  const summaryListLayout = summaryListContext === null || summaryListContext === void 0 ? void 0 : summaryListContext.layout;
  const getHelpContent = (0, _react.useCallback)((layout, {
    renderOnNextLine = false
  } = {}) => {
    const breakout = layout === 'vertical' || summaryListLayout === 'vertical';
    const content = hasHelp && (0, _jsxRuntime.jsx)(_HelpButtonInline.HelpButtonInlineContent, {
      element: "span",
      contentId: `${id}-help`,
      className: "dnb-forms-value-block__help",
      help: help,
      breakout: breakout,
      outset: breakout
    });
    return hasHelp && renderOnNextLine ? (0, _jsxRuntime.jsx)("span", {
      className: "dnb-forms-value-block__help--next-line",
      children: content
    }) : content;
  }, [hasHelp, help, id, summaryListLayout]);
  let content = null;
  const defaultClass = `dnb-forms-value-block__content dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}` + (maxWidth ? ` dnb-forms-value-block__content--max-width-${maxWidth}` : "");
  const compositionClass = isComposition && 'dnb-forms-value-block__composition--horizontal';
  if (hide) {
    return null;
  }
  if (summaryListContext && !isCompositionInContextWithoutLabel) {
    const Item = summaryListContext.isNested ? _index.Dl : summaryListContext.layout === 'horizontal' ? _index.Dl.Item : _react.Fragment;
    if (!label && !hasHelp && isCompositionInContext) {
      content = children ? (0, _jsxRuntime.jsx)("span", {
        className: defaultClass,
        children: children
      }) : (0, _jsxRuntime.jsx)("span", {
        className: "dnb-forms-value-block__placeholder",
        children: placeholder
      });
    } else {
      const defaultLayout = isCompositionInContext && label ? 'horizontal' : 'vertical';
      const {
        layout = defaultLayout
      } = summaryListContext;
      content = (0, _jsxRuntime.jsxs)(_SummaryListContext.default, {
        value: {
          ...summaryListContext,
          isNested: true
        },
        children: [(0, _jsxRuntime.jsxs)(Item, {
          children: [(0, _jsxRuntime.jsx)(_index.Dt, {
            className: (0, _clsx.default)('dnb-forms-value-block__label', (!label && !hasHelp || labelSrOnly) && 'dnb-sr-only', className),
            children: (0, _jsxRuntime.jsxs)(VisibilityWrapper, {
              children: [label && (0, _jsxRuntime.jsx)("strong", {
                children: label
              }), hasHelp && (0, _jsxRuntime.jsx)("span", {
                className: "dnb-help-button__word-joiner",
                children: (0, _jsxRuntime.jsx)(_HelpButtonInline.default, {
                  contentId: `${id}-help`,
                  help: help
                })
              })]
            })
          }), (0, _jsxRuntime.jsx)(_index.Dd, {
            className: (0, _clsx.default)(compositionClass, maxWidth && `dnb-forms-value-block__content--max-width-${maxWidth}`),
            children: (0, _jsxRuntime.jsxs)(VisibilityWrapper, {
              children: [!isCompositionInContextWithoutLabel ? getHelpContent(layout) : null, children ? (0, _jsxRuntime.jsx)("span", {
                className: defaultClass,
                children: children
              }) : (0, _jsxRuntime.jsx)("span", {
                className: "dnb-forms-value-block__placeholder",
                children: placeholder
              })]
            })
          })]
        }), isCompositionInContextWithoutLabel && hasHelp ? getHelpContent(layout, {
          renderOnNextLine: true
        }) : null]
      });
    }
  } else {
    content = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(0, _jsxRuntime.jsxs)(_index.Span, {
        ref: ref,
        className: (0, _clsx.default)('dnb-forms-value-block', compositionClass, className, inline && 'dnb-forms-value-block--inline'),
        ...(0, _utils.pickSpacingProps)(props),
        children: [(label || hasHelp) && (0, _jsxRuntime.jsxs)(_index2.FormLabel, {
          element: "strong",
          className: 'dnb-forms-value-block__label',
          labelDirection: inline ? 'horizontal' : 'vertical',
          srOnly: labelSrOnly,
          children: [label && (0, _jsxRuntime.jsx)("span", {
            className: "dnb-forms-value-block__label__content",
            children: label
          }), hasHelp && (0, _jsxRuntime.jsx)("span", {
            className: "dnb-help-button__word-joiner",
            children: (0, _jsxRuntime.jsx)(_HelpButtonInline.default, {
              contentId: `${id}-help`,
              help: help
            })
          })]
        }), !isCompositionInContextWithoutLabel ? getHelpContent(layout) : null, children ? (0, _jsxRuntime.jsx)("span", {
          className: defaultClass,
          children: children
        }) : (0, _jsxRuntime.jsx)("span", {
          className: "dnb-forms-value-block__placeholder",
          children: placeholder
        })]
      }), isCompositionInContextWithoutLabel && hasHelp ? getHelpContent(layout, {
        renderOnNextLine: true
      }) : null]
    });
  }
  return (0, _jsxRuntime.jsx)(_ValueBlockContext.default, {
    value: props,
    children: content
  });
}
function useNotInSummaryList(ref, label, path, itemPath) {
  (0, _react.useEffect)(() => {
    if (ref !== null && ref !== void 0 && ref.current) {
      try {
        const sibling = ref.current.previousElementSibling;
        if (sibling !== null && sibling !== void 0 && sibling.classList.contains('dnb-forms-value-block') && !ref.current.closest('.dnb-forms-summary-list')) {
          _helpers.warn.apply(_helpers.warn, ['Value components as siblings should be wrapped inside a Value.SummaryList:', {
            label,
            path,
            itemPath
          }].filter(Boolean));
        }
      } catch (error) {}
    }
  }, [itemPath, label, path, ref]);
}
(0, _withComponentMarkers.default)(ValueBlock, {
  _supportsSpacingProps: true
});
var _default = exports.default = ValueBlock;
const transformLabelParameters = {
  convertJsxToString: _componentHelper.convertJsxToString
};
function VisibilityWrapper({
  children
}) {
  const visibilityContext = (0, _react.useContext)(_VisibilityContext.default);
  if (visibilityContext) {
    return (0, _jsxRuntime.jsx)(_Visibility.default, {
      element: "span",
      ...visibilityContext.props,
      children: children
    });
  }
  return children;
}
function isValueEmpty(value) {
  return value === undefined || value === null || value === false;
}
//# sourceMappingURL=ValueBlock.js.map