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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.HelpButtonInlineContent = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _HelpButtonInstance = _interopRequireDefault(require("./HelpButtonInstance.js"));
var _HeightAnimation = _interopRequireDefault(require("../HeightAnimation.js"));
var _useSharedState = require("../../shared/helpers/useSharedState.js");
var _componentHelper = require("../../shared/component-helper.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _Section = _interopRequireDefault(require("../Section.js"));
var _index = require("../../elements/index.js");
var _Flex = _interopRequireDefault(require("../Flex.js"));
var _CardContext = _interopRequireDefault(require("../card/CardContext.js"));
var _Dialog = _interopRequireDefault(require("../Dialog.js"));
var _index2 = require("../../icons/index.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _Fragment2;
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 HelpButtonInline(props) {
  var _help$open;
  const {
    contentId,
    size,
    help,
    focusOnOpen,
    className,
    children,
    ...rest
  } = props;
  const controlId = (0, _useId.default)(contentId);
  const {
    data,
    update
  } = (0, _useSharedState.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 = (0, _react.useRef)(undefined);
  const buttonRef = (0, _react.useRef)(null);
  const toggleOpen = (0, _react.useCallback)(() => {
    update({
      isOpen: !isOpen,
      isUserIntent: !isOpen,
      buttonRef,
      focusOnOpen
    });
    wasOpenRef.current = !isOpen;
  }, [focusOnOpen, isOpen, update]);
  if (isUserIntent === undefined && !isOpen) {
    wasOpenRef.current = undefined;
  }
  const onClickHandler = (0, _react.useCallback)(({
    event
  }) => {
    event.preventDefault();
    toggleOpen();
  }, [toggleOpen]);
  const onKeyDownHandler = (0, _react.useCallback)(event => {
    if (event.currentTarget === event.target) {
      switch (event.key) {
        case 'Escape':
          if (isOpen) {
            event.preventDefault();
            event.stopPropagation();
            window.requestAnimationFrame(() => {
              toggleOpen();
            });
          }
          break;
      }
    }
  }, [isOpen, toggleOpen]);
  const title = (0, _componentHelper.convertJsxToString)(help === null || help === void 0 ? void 0 : help.title);
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_HelpButtonInstance.default, {
      bounding: true,
      size: size !== null && size !== void 0 ? size : 'small',
      icon: HelpButtonIcon,
      title: !isOpen && !wasOpenRef.current ? title : undefined,
      ...rest,
      id: controlId,
      className: (0, _clsx.default)('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'),
      selected: isOpen,
      "aria-controls": `${controlId}-content`,
      "aria-expanded": isOpen,
      "aria-label": title || undefined,
      onClick: onClickHandler,
      onKeyDown: onKeyDownHandler,
      ref: buttonRef
    }), !contentId && (0, _jsxRuntime.jsx)(HelpButtonInlineContent, {
      contentId: controlId,
      help: help,
      focusOnOpen: focusOnOpen,
      children: children
    })]
  });
}
function HelpButtonInlineContentComponent(props) {
  var _ref;
  const {
    contentId,
    className,
    element,
    children,
    help: helpProp,
    breakout = true,
    outset = false,
    roundedCorner,
    focusOnOpen: focusOnOpenProp,
    ...rest
  } = props;
  const {
    data,
    update,
    extend
  } = (0, _useSharedState.useSharedState)(contentId);
  const {
    isOpen,
    focusOnOpen = focusOnOpenProp,
    isUserIntent,
    buttonRef
  } = data || {};
  const {
    open,
    title,
    content,
    renderAs,
    noAnimation,
    breakout: breakoutProp = true,
    outset: outsetProp = true
  } = helpProp || {};
  const contentRef = (0, _react.useRef)(null);
  const cardContext = (0, _react.useContext)(_CardContext.default);
  const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
  const outsetFromLayout = outset && outsetProp;
  (0, _react.useEffect)(() => {
    if (isOpen && isUserIntent && focusOnOpen) {
      window.requestAnimationFrame(() => {
        var _contentRef$current;
        (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus({
          preventScroll: true
        });
      });
    }
  }, [focusOnOpen, isOpen, isUserIntent]);
  const onClose = (0, _react.useCallback)(() => {
    update({
      isOpen: false,
      isUserIntent: false
    });
  }, [update]);
  const onKeyDown = (0, _react.useCallback)(event => {
    if (event.currentTarget === event.target) {
      switch (event.key) {
        case 'Enter':
        case ' ':
        case 'Escape':
          event.preventDefault();
          event.stopPropagation();
          window.requestAnimationFrame(() => {
            var _buttonRef$current;
            onClose();
            buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus({
              preventScroll: true
            });
          });
          break;
      }
    }
  }, [buttonRef, onClose]);
  const onAnimationEnd = (0, _react.useCallback)(() => {
    extend({
      isUserIntent: undefined
    });
  }, [extend]);
  if (renderAs === 'dialog') {
    return (0, _jsxRuntime.jsxs)(_Dialog.default, {
      title: title,
      omitTriggerButton: true,
      open: isOpen !== null && isOpen !== void 0 ? isOpen : open,
      onClose: onClose,
      noAnimation: noAnimation,
      children: [content, children]
    });
  }
  const focusParams = focusOnOpen ? {
    'aria-label': (0, _componentHelper.convertJsxToString)(title),
    className: 'dnb-no-focus',
    tabIndex: -1,
    onKeyDown
  } : {
    'aria-live': 'polite',
    'aria-atomic': 'true'
  };
  return (0, _jsxRuntime.jsx)(_HeightAnimation.default, {
    element: element,
    className: (0, _clsx.default)('dnb-help-button__content', className),
    open: (_ref = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref !== void 0 ? _ref : false,
    onAnimationEnd: onAnimationEnd,
    children: (0, _jsxRuntime.jsxs)(_Section.default, {
      id: `${contentId}-content`,
      ...focusParams,
      ref: contentRef,
      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,
      children: [(0, _jsxRuntime.jsxs)(_Flex.default.Vertical, {
        gap: "x-small",
        children: [title && (0, _jsxRuntime.jsx)(_index.P, {
          weight: "medium",
          children: title
        }), content && (0, _jsxRuntime.jsx)(_index.P, {
          children: content
        })]
      }), children]
    })
  });
}
function HelpButtonIcon() {
  return _Fragment2 || (_Fragment2 = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_index2.question, {}), (0, _jsxRuntime.jsx)(_index2.close, {})]
  }));
}
const MemoizedHelpButtonInline = _react.default.memo(HelpButtonInline);
var _default = exports.default = MemoizedHelpButtonInline;
const HelpButtonInlineContent = exports.HelpButtonInlineContent = _react.default.memo(HelpButtonInlineContentComponent);
(0, _withComponentMarkers.default)(MemoizedHelpButtonInline, {
  _supportsSpacingProps: true
});
(0, _withComponentMarkers.default)(HelpButtonInlineContent, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=HelpButtonInline.js.map