@dnb/eufemia/components/help-button/HelpButtonInline.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Fragment;
const _excluded = ["contentId", "size", "help", "focusWhenOpen", "className", "children"],
  _excluded2 = ["contentId", "className", "element", "children", "help", "breakout", "outset", "roundedCorner", "focusWhenOpen"];
import React, { useCallback, useContext, useEffect, useRef } from 'react';
import classnames from 'classnames';
import HelpButtonInstance from './HelpButtonInstance';
import HeightAnimation from '../HeightAnimation';
import { useSharedState } from '../../shared/helpers/useSharedState';
import { convertJsxToString } from '../../shared/component-helper';
import useId from '../../shared/helpers/useId';
import Section from '../Section';
import { P } from '../../elements';
import Flex from '../Flex';
import CardContext from '../card/CardContext';
import Dialog from '../Dialog';
import { question as QuestionIcon, close as CloseIcon } from '../../icons';
export default function HelpButtonInline(props) {
  var _help$open;
  const {
      contentId,
      size,
      help,
      focusWhenOpen,
      className,
      children
    } = props,
    rest = _objectWithoutProperties(props, _excluded);
  const controlId = useId(contentId);
  const {
    data,
    update
  } = useSharedState(controlId, {
    isOpen: (_help$open = help === null || help === void 0 ? void 0 : help.open) !== null && _help$open !== void 0 ? _help$open : false
  });
  const {
    isOpen,
    isUserIntent
  } = data || {};
  const wasOpenRef = useRef(undefined);
  const buttonRef = useRef(null);
  const toggleOpen = useCallback(() => {
    update({
      isOpen: !isOpen,
      isUserIntent: !isOpen,
      buttonRef,
      focusWhenOpen
    });
    wasOpenRef.current = !isOpen;
  }, [focusWhenOpen, isOpen, update]);
  const onClickHandler = useCallback(_ref => {
    let {
      event
    } = _ref;
    event.preventDefault();
    toggleOpen();
  }, [toggleOpen]);
  const onKeyDownHandler = useCallback(event => {
    if (event.currentTarget === event.target) {
      switch (event.key.trim() || event.code) {
        case 'Escape':
          if (isOpen) {
            event.preventDefault();
            window.requestAnimationFrame(() => {
              toggleOpen();
            });
          }
          break;
      }
    }
  }, [isOpen, toggleOpen]);
  const title = convertJsxToString(help === null || help === void 0 ? void 0 : help.title);
  return React.createElement(React.Fragment, null, React.createElement(HelpButtonInstance, _extends({
    bounding: true,
    size: size !== null && size !== void 0 ? size : 'small',
    icon: HelpButtonIcon,
    title: !isOpen && !wasOpenRef.current ? title : undefined
  }, rest, {
    id: controlId,
    className: classnames('dnb-help-button__inline', className, isOpen && 'dnb-help-button__inline--open', isUserIntent && 'dnb-help-button__inline--user-intent', typeof wasOpenRef.current === 'boolean' && 'dnb-help-button__inline--was-open'),
    "aria-controls": `${controlId}-content`,
    "aria-expanded": isOpen,
    "aria-label": title,
    on_click: onClickHandler,
    onKeyDown: onKeyDownHandler,
    innerRef: buttonRef
  })), !contentId && React.createElement(HelpButtonInlineContent, {
    contentId: controlId,
    help: help,
    focusWhenOpen: focusWhenOpen
  }, children));
}
export function HelpButtonInlineContent(props) {
  var _ref2;
  const {
      contentId,
      className,
      element,
      children,
      help: helpProp,
      breakout = true,
      outset = true,
      roundedCorner,
      focusWhenOpen: focusWhenOpenProp
    } = props,
    rest = _objectWithoutProperties(props, _excluded2);
  const {
    data,
    update
  } = useSharedState(contentId);
  const {
    isOpen,
    focusWhenOpen = focusWhenOpenProp,
    isUserIntent,
    buttonRef
  } = data || {};
  const {
    open,
    title,
    content,
    renderAs,
    breakout: breakoutProp = true,
    outset: outsetProp = true
  } = helpProp || {};
  const innerRef = useRef(null);
  const cardContext = useContext(CardContext);
  const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
  const outsetFromLayout = outset && outsetProp;
  useEffect(() => {
    if (isOpen && isUserIntent && focusWhenOpen) {
      window.requestAnimationFrame(() => {
        var _innerRef$current;
        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus({
          preventScroll: true
        });
      });
    }
  }, [focusWhenOpen, isOpen, isUserIntent]);
  const onClose = useCallback(() => {
    update({
      isOpen: false,
      isUserIntent: false
    });
  }, [update]);
  const onKeyDown = useCallback(event => {
    if (event.currentTarget === event.target) {
      switch (event.key.trim() || event.code) {
        case 'Enter':
        case 'Space':
        case 'Escape':
          event.preventDefault();
          window.requestAnimationFrame(() => {
            var _buttonRef$current;
            onClose();
            (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
          });
          break;
      }
    }
  }, [buttonRef, onClose]);
  if (renderAs === 'dialog') {
    return React.createElement(Dialog, {
      title: title,
      omitTriggerButton: true,
      openState: isOpen !== null && isOpen !== void 0 ? isOpen : open,
      onClose: onClose
    }, content, children);
  }
  const focusParams = focusWhenOpen ? {
    'aria-label': convertJsxToString(title),
    className: 'dnb-no-focus',
    tabIndex: -1,
    onKeyDown
  } : {
    'aria-live': 'polite',
    'aria-atomic': 'true'
  };
  return React.createElement(HeightAnimation, {
    element: element,
    className: classnames('dnb-help-button__content', className),
    open: (_ref2 = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref2 !== void 0 ? _ref2 : false
  }, React.createElement(Section, _extends({
    id: `${contentId}-content`
  }, focusParams, {
    innerRef: innerRef,
    outset: outsetFromLayout,
    breakout: breakoutFromLayout,
    roundedCorner: roundedCorner !== null && roundedCorner !== void 0 ? roundedCorner : !breakoutFromLayout,
    innerSpace: breakoutFromLayout ? {
      top: 'small',
      bottom: 'medium'
    } : {
      top: 'small',
      bottom: 'medium',
      left: 'medium',
      right: 'x-small'
    },
    backgroundColor: "lavender"
  }, rest), React.createElement(Flex.Vertical, {
    gap: "x-small"
  }, title && React.createElement(P, {
    weight: "medium"
  }, title), content && React.createElement(P, null, content)), children));
}
function HelpButtonIcon() {
  return _Fragment || (_Fragment = React.createElement(React.Fragment, null, React.createElement(QuestionIcon, null), React.createElement(CloseIcon, null)));
}
HelpButtonInline._supportsSpacingProps = true;
HelpButtonInlineContent._supportsSpacingProps = true;
//# sourceMappingURL=HelpButtonInline.js.map