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

DNB Eufemia Design System UI Library

"use client";

import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import { extendPropsWithContext, isTrue, validateDOMAttributes } from "../../shared/component-helper.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import { createSkeletonClass, skeletonDOMAttributes } from "../skeleton/SkeletonHelper.js";
import { pickFormElementProps } from "../../shared/helpers/filterValidProps.js";
import { convertSnakeCaseProps } from "../../shared/helpers/withSnakeCaseProps.js";
import { omitSpacingProps } from "../flex/utils.js";
import Context from "../../shared/Context.js";
export default function FormLabel(localProps) {
  const context = React.useContext(Context);
  const props = convertSnakeCaseProps(extendPropsWithContext(localProps, null, {
    skeleton: context?.skeleton
  }, pickFormElementProps(context?.FormRow), pickFormElementProps(context?.formElement), context?.FormLabel));
  const nestedContent = props?.text || props?.children;
  const nestedNode = nestedContent?.['type'] === FormLabel ? nestedContent?.['type'] : null;
  const nestedElement = nestedNode ? () => React.createElement(nestedNode, nestedContent['props']) : null;
  const {
    forId,
    text,
    srOnly,
    vertical,
    labelDirection,
    size,
    skeleton,
    element: Element = nestedElement || 'label',
    innerRef,
    className,
    children,
    ...attributes
  } = props;
  const content = text || children;
  const isInteractive = Boolean(!props.disabled && !srOnly && (typeof props.onClick === 'function' || forId));
  const params = {
    className: classnames('dnb-form-label', (isTrue(vertical) || labelDirection === 'vertical') && `dnb-form-label--vertical`, createSkeletonClass('font', skeleton, context), createSpacingClasses(content ? {
      right: 'small',
      ...props
    } : omitSpacingProps(props)), className, srOnly && 'dnb-sr-only', size && `dnb-h--${size}`, isInteractive && 'dnb-form-label--interactive'),
    htmlFor: forId,
    ...attributes
  };
  const labelRef = useRef(null);
  const ref = innerRef || labelRef;
  if (!nestedNode) {
    params['ref'] = ref;
  }
  useEffect(() => {
    if (!forId) {
      return;
    }
    const forElem = document.querySelector(`#${forId}`);
    const target = forElem?.closest('.dnb-input__border--root') || forElem?.closest('.dnb-input__border');
    if (target && ref.current) {
      const elem = ref.current;
      const buttonEnter = () => {
        target.classList.add('no-hover');
        target.classList.remove('hover');
      };
      const buttonLeave = () => {
        target.classList.remove('no-hover');
        enter();
      };
      const enter = () => {
        target.classList.add('hover');
        const button = elem.querySelector('button');
        button?.addEventListener?.('mouseenter', buttonEnter, {
          once: true
        });
        button?.addEventListener?.('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 = () => {
        target.classList.remove('hover');
        const button = elem.querySelector('button');
        button?.removeEventListener?.('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) {
          elem.removeEventListener('mouseenter', enter);
          elem.removeEventListener('mouseleave', leave);
          const button = elem.querySelector('button');
          button?.removeEventListener?.('mouseleave', buttonLeave);
          const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
          interactiveElements.forEach(interactiveElem => {
            interactiveElem.removeEventListener('mouseenter', buttonEnter);
            interactiveElem.removeEventListener('mouseleave', buttonLeave);
          });
        }
      };
    }
  }, [forId, ref]);
  skeletonDOMAttributes(params, skeleton, context);
  validateDOMAttributes(localProps, params);
  return React.createElement(Element, params, content);
}
FormLabel._formElement = true;
FormLabel._supportsSpacingProps = true;
//# sourceMappingURL=FormLabel.js.map