@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
224 lines (223 loc) • 9.47 kB
JavaScript
"use strict";
"use client";
require("core-js/modules/web.dom-collections.iterator.js");
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"));
var _HeightAnimation = _interopRequireDefault(require("../HeightAnimation"));
var _useSharedState = require("../../shared/helpers/useSharedState");
var _componentHelper = require("../../shared/component-helper");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
var _Section = _interopRequireDefault(require("../Section"));
var _elements = require("../../elements");
var _Flex = _interopRequireDefault(require("../Flex"));
var _CardContext = _interopRequireDefault(require("../card/CardContext"));
var _Dialog = _interopRequireDefault(require("../Dialog"));
var _icons = require("../../icons");
var _Fragment;
const _excluded = ["contentId", "size", "help", "focusWhenOpen", "className", "children"],
_excluded2 = ["contentId", "className", "element", "children", "help", "breakout", "outset", "roundedCorner", "focusWhenOpen"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function HelpButtonInline(props) {
var _help$open;
const {
contentId,
size,
help,
focusWhenOpen,
className,
children
} = props,
rest = _objectWithoutProperties(props, _excluded);
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)(_ref => {
let {
event
} = _ref;
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();
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 _ref2;
const {
contentId,
className,
element,
children,
help: helpProp,
breakout = true,
outset = true,
roundedCorner,
focusWhenOpen: focusWhenOpenProp
} = props,
rest = _objectWithoutProperties(props, _excluded2);
const {
data,
update
} = (0, _useSharedState.useSharedState)(contentId);
const {
isOpen,
focusWhenOpen = focusWhenOpenProp,
isUserIntent,
buttonRef
} = data || {};
const {
open,
title,
content,
renderAs,
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 ? 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();
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.default.createElement(_Dialog.default, {
title: title,
omitTriggerButton: true,
openState: isOpen !== null && isOpen !== void 0 ? isOpen : open,
onClose: onClose
}, 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: (_ref2 = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref2 !== void 0 ? _ref2 : 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(_elements.P, {
weight: "medium"
}, title), content && _react.default.createElement(_elements.P, null, content)), children));
}
function HelpButtonIcon() {
return _Fragment || (_Fragment = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_icons.question, null), _react.default.createElement(_icons.close, null)));
}
HelpButtonInline._supportsSpacingProps = true;
HelpButtonInlineContent._supportsSpacingProps = true;
//# sourceMappingURL=HelpButtonInline.js.map