@dnb/eufemia/cjs/components/form-label/FormLabel.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _utils = require("../flex/utils.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FormLabel(localProps) {
  var _context$theme;
  const context = (0, _react.useContext)(_Context.default);
  const props = (0, _componentHelper.extendPropsWithContext)(localProps, null, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  }, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context === null || context === void 0 ? void 0 : context.FormLabel);
  const nestedContent = (props === null || props === void 0 ? void 0 : props.text) || (props === null || props === void 0 ? void 0 : props.children);
  const nestedNode = (nestedContent === null || nestedContent === void 0 ? void 0 : nestedContent['type']) === FormLabel ? nestedContent === null || nestedContent === void 0 ? void 0 : nestedContent['type'] : null;
  const nestedElement = nestedNode ? () => (0, _react.createElement)(nestedNode, nestedContent['props']) : null;
  const {
    forId,
    text,
    srOnly,
    vertical,
    labelDirection,
    size,
    skeleton,
    element: Element = nestedElement || 'label',
    ref: refProp,
    className,
    children,
    ...attributes
  } = props;
  const content = text || children;
  const isInteractive = Boolean(!props.disabled && !srOnly && (typeof props.onClick === 'function' || forId));
  const params = (0, _SpacingUtils.useSpacing)(content ? {
    right: 'small',
    ...props
  } : (0, _utils.omitSpacingProps)(props), {
    className: (0, _clsx.default)('dnb-form-label', (vertical || vertical !== false && labelDirection !== 'horizontal') && `dnb-form-label--vertical`, (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context), className, srOnly && 'dnb-sr-only', size && `dnb-h--${size}`, isInteractive && 'dnb-form-label--interactive', (context === null || context === void 0 || (_context$theme = context.theme) === null || _context$theme === void 0 ? void 0 : _context$theme.surface) === 'dark' && 'dnb-form-label--surface-dark'),
    htmlFor: forId,
    ...attributes
  });
  const labelRef = (0, _react.useRef)(null);
  const combinedRef = (0, _react.useCallback)(node => {
    labelRef.current = node;
    if (typeof refProp === 'function') {
      refProp(node);
    } else if (refProp) {
      ;
      refProp.current = node;
    }
  }, [refProp]);
  if (!nestedNode) {
    params['ref'] = combinedRef;
  }
  (0, _react.useEffect)(() => {
    if (!forId) {
      return undefined;
    }
    const forElem = document.querySelector(`#${forId}`);
    const target = (forElem === null || forElem === void 0 ? void 0 : forElem.closest('.dnb-input__border--root')) || (forElem === null || forElem === void 0 ? void 0 : forElem.closest('.dnb-input__border'));
    if (target && labelRef.current) {
      const elem = labelRef.current;
      const buttonEnter = () => {
        target.classList.add('no-hover');
        target.classList.remove('hover');
      };
      const buttonLeave = () => {
        target.classList.remove('no-hover');
        enter();
      };
      const enter = () => {
        var _button$addEventListe, _button$addEventListe2;
        target.classList.add('hover');
        const button = elem.querySelector('button');
        button === null || button === void 0 || (_button$addEventListe = button.addEventListener) === null || _button$addEventListe === void 0 || _button$addEventListe.call(button, 'mouseenter', buttonEnter, {
          once: true
        });
        button === null || button === void 0 || (_button$addEventListe2 = button.addEventListener) === null || _button$addEventListe2 === void 0 || _button$addEventListe2.call(button, 'mouseleave', buttonLeave, {
          once: true
        });
        const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
        interactiveElements.forEach(interactiveElem => {
          interactiveElem.addEventListener('mouseenter', buttonEnter, {
            once: true
          });
          interactiveElem.addEventListener('mouseleave', buttonLeave, {
            once: true
          });
        });
      };
      const leave = () => {
        var _button$removeEventLi;
        target.classList.remove('hover');
        const button = elem.querySelector('button');
        button === null || button === void 0 || (_button$removeEventLi = button.removeEventListener) === null || _button$removeEventLi === void 0 || _button$removeEventLi.call(button, 'mouseenter', buttonEnter);
        const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
        interactiveElements.forEach(interactiveElem => {
          interactiveElem.removeEventListener('mouseenter', buttonEnter);
          interactiveElem.removeEventListener('mouseleave', buttonLeave);
        });
      };
      elem.addEventListener('mouseenter', enter);
      elem.addEventListener('mouseleave', leave);
      return () => {
        if (elem) {
          var _button$removeEventLi2;
          elem.removeEventListener('mouseenter', enter);
          elem.removeEventListener('mouseleave', leave);
          const button = elem.querySelector('button');
          button === null || button === void 0 || (_button$removeEventLi2 = button.removeEventListener) === null || _button$removeEventLi2 === void 0 || _button$removeEventLi2.call(button, 'mouseleave', buttonLeave);
          const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
          interactiveElements.forEach(interactiveElem => {
            interactiveElem.removeEventListener('mouseenter', buttonEnter);
            interactiveElem.removeEventListener('mouseleave', buttonLeave);
          });
        }
      };
    }
    return undefined;
  }, [forId, labelRef]);
  (0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, context);
  (0, _componentHelper.validateDOMAttributes)(localProps, params);
  return (0, _jsxRuntime.jsx)(Element, {
    ...params,
    children: content
  });
}
(0, _withComponentMarkers.default)(FormLabel, {
  _formElement: true,
  _supportsSpacingProps: true
});
var _default = exports.default = FormLabel;
//# sourceMappingURL=FormLabel.js.map