@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
245 lines (244 loc) • 7.12 kB
JavaScript
"use client";
var _Fragment2;
import React, { useCallback, useContext, useEffect, useRef } from 'react';
import clsx from 'clsx';
import HelpButtonInstance from "./HelpButtonInstance.js";
import HeightAnimation from "../HeightAnimation.js";
import { useSharedState } from "../../shared/helpers/useSharedState.js";
import { convertJsxToString } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import Section from "../Section.js";
import { P } from "../../elements/index.js";
import Flex from "../Flex.js";
import CardContext from "../card/CardContext.js";
import Dialog from "../Dialog.js";
import { question as QuestionIcon, close as CloseIcon } from "../../icons/index.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function HelpButtonInline(props) {
var _help$open;
const {
contentId,
size,
help,
focusOnOpen,
className,
children,
...rest
} = props;
const controlId = useId(contentId);
const {
data,
update
} = useSharedState(controlId, {
isOpen: (_help$open = 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,
focusOnOpen
});
wasOpenRef.current = !isOpen;
}, [focusOnOpen, isOpen, update]);
if (isUserIntent === undefined && !isOpen) {
wasOpenRef.current = undefined;
}
const onClickHandler = useCallback(({
event
}) => {
event.preventDefault();
toggleOpen();
}, [toggleOpen]);
const onKeyDownHandler = 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 = convertJsxToString(help?.title);
return _jsxs(_Fragment, {
children: [_jsx(HelpButtonInstance, {
bounding: true,
size: size !== null && size !== void 0 ? size : 'small',
icon: HelpButtonIcon,
title: !isOpen && !wasOpenRef.current ? title : undefined,
...rest,
id: controlId,
className: clsx('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 && _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
} = useSharedState(contentId);
const {
isOpen,
focusOnOpen = focusOnOpenProp,
isUserIntent,
buttonRef
} = data || {};
const {
open,
title,
content,
renderAs,
noAnimation,
breakout: breakoutProp = true,
outset: outsetProp = true
} = helpProp || {};
const contentRef = useRef(null);
const cardContext = useContext(CardContext);
const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
const outsetFromLayout = outset && outsetProp;
useEffect(() => {
if (isOpen && isUserIntent && focusOnOpen) {
window.requestAnimationFrame(() => {
contentRef.current?.focus({
preventScroll: true
});
});
}
}, [focusOnOpen, isOpen, isUserIntent]);
const onClose = useCallback(() => {
update({
isOpen: false,
isUserIntent: false
});
}, [update]);
const onKeyDown = useCallback(event => {
if (event.currentTarget === event.target) {
switch (event.key) {
case 'Enter':
case ' ':
case 'Escape':
event.preventDefault();
event.stopPropagation();
window.requestAnimationFrame(() => {
onClose();
buttonRef?.current?.focus({
preventScroll: true
});
});
break;
}
}
}, [buttonRef, onClose]);
const onAnimationEnd = useCallback(() => {
extend({
isUserIntent: undefined
});
}, [extend]);
if (renderAs === 'dialog') {
return _jsxs(Dialog, {
title: title,
omitTriggerButton: true,
open: isOpen !== null && isOpen !== void 0 ? isOpen : open,
onClose: onClose,
noAnimation: noAnimation,
children: [content, children]
});
}
const focusParams = focusOnOpen ? {
'aria-label': convertJsxToString(title),
className: 'dnb-no-focus',
tabIndex: -1,
onKeyDown
} : {
'aria-live': 'polite',
'aria-atomic': 'true'
};
return _jsx(HeightAnimation, {
element: element,
className: clsx('dnb-help-button__content', className),
open: (_ref = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref !== void 0 ? _ref : false,
onAnimationEnd: onAnimationEnd,
children: _jsxs(Section, {
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: [_jsxs(Flex.Vertical, {
gap: "x-small",
children: [title && _jsx(P, {
weight: "medium",
children: title
}), content && _jsx(P, {
children: content
})]
}), children]
})
});
}
function HelpButtonIcon() {
return _Fragment2 || (_Fragment2 = _jsxs(_Fragment, {
children: [_jsx(QuestionIcon, {}), _jsx(CloseIcon, {})]
}));
}
const MemoizedHelpButtonInline = React.memo(HelpButtonInline);
export default MemoizedHelpButtonInline;
export const HelpButtonInlineContent = React.memo(HelpButtonInlineContentComponent);
withComponentMarkers(MemoizedHelpButtonInline, {
_supportsSpacingProps: true
});
withComponentMarkers(HelpButtonInlineContent, {
_supportsSpacingProps: true
});
//# sourceMappingURL=HelpButtonInline.js.map