@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
223 lines (222 loc) • 8.58 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HelpButtonInlineContent = HelpButtonInlineContent;
exports.default = HelpButtonInline;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
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 _Fragment;
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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function HelpButtonInline(props) {
var _help$open;
const {
contentId,
size,
help,
focusWhenOpen,
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,
focusWhenOpen
});
wasOpenRef.current = !isOpen;
}, [focusWhenOpen, isOpen, update]);
const onClickHandler = (0, _react.useCallback)(({
event
}) => {
event.preventDefault();
toggleOpen();
}, [toggleOpen]);
const onKeyDownHandler = (0, _react.useCallback)(event => {
if (event.currentTarget === event.target) {
switch (event.key.trim() || event.code) {
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 _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_HelpButtonInstance.default, _extends({
bounding: true,
size: size !== null && size !== void 0 ? size : 'small',
icon: HelpButtonIcon,
title: !isOpen && !wasOpenRef.current ? title : undefined
}, rest, {
id: controlId,
className: (0, _classnames.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'),
"aria-controls": `${controlId}-content`,
"aria-expanded": isOpen,
"aria-label": title,
on_click: onClickHandler,
onKeyDown: onKeyDownHandler,
innerRef: buttonRef
})), !contentId && _react.default.createElement(HelpButtonInlineContent, {
contentId: controlId,
help: help,
focusWhenOpen: focusWhenOpen
}, children));
}
function HelpButtonInlineContent(props) {
var _ref;
const {
contentId,
className,
element,
children,
help: helpProp,
breakout = true,
outset = true,
roundedCorner,
focusWhenOpen: focusWhenOpenProp,
...rest
} = props;
const {
data,
update
} = (0, _useSharedState.useSharedState)(contentId);
const {
isOpen,
focusWhenOpen = focusWhenOpenProp,
isUserIntent,
buttonRef
} = data || {};
const {
open,
title,
content,
renderAs,
noAnimation,
breakout: breakoutProp = true,
outset: outsetProp = true
} = helpProp || {};
const innerRef = (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 && focusWhenOpen) {
window.requestAnimationFrame(() => {
var _innerRef$current;
(_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 || _innerRef$current.focus({
preventScroll: true
});
});
}
}, [focusWhenOpen, 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.trim() || event.code) {
case 'Enter':
case 'Space':
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]);
if (renderAs === 'dialog') {
return _react.default.createElement(_Dialog.default, {
title: title,
omitTriggerButton: true,
openState: isOpen !== null && isOpen !== void 0 ? isOpen : open,
onClose: onClose,
noAnimation: noAnimation
}, content, children);
}
const focusParams = focusWhenOpen ? {
'aria-label': (0, _componentHelper.convertJsxToString)(title),
className: 'dnb-no-focus',
tabIndex: -1,
onKeyDown
} : {
'aria-live': 'polite',
'aria-atomic': 'true'
};
return _react.default.createElement(_HeightAnimation.default, {
element: element,
className: (0, _classnames.default)('dnb-help-button__content', className),
open: (_ref = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref !== void 0 ? _ref : false
}, _react.default.createElement(_Section.default, _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.default.createElement(_Flex.default.Vertical, {
gap: "x-small"
}, title && _react.default.createElement(_index.P, {
weight: "medium"
}, title), content && _react.default.createElement(_index.P, null, content)), children));
}
function HelpButtonIcon() {
return _Fragment || (_Fragment = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_index2.question, null), _react.default.createElement(_index2.close, null)));
}
HelpButtonInline._supportsSpacingProps = true;
HelpButtonInlineContent._supportsSpacingProps = true;
//# sourceMappingURL=HelpButtonInline.js.map