suomifi-ui-components
Version:
Suomi.fi UI component library
308 lines (302 loc) • 11.1 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var common = require('../../../utils/common/common.js');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
require('../../theme/SpacingProvider/SpacingProvider.js');
require('../../../reset/HtmlA/HtmlA.js');
require('../../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
require('../../../reset/HtmlInput/HtmlInput.js');
require('../../../reset/HtmlLabel/HtmlLabel.js');
require('../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../reset/HtmlLi/HtmlLi.js');
require('../../../reset/HtmlNav/HtmlNav.js');
require('../../../reset/HtmlOl/HtmlOl.js');
require('../../../reset/HtmlSpan/HtmlSpan.js');
require('../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../reset/HtmlUl/HtmlUl.js');
require('../../../reset/HtmlTable/HtmlTable.js');
require('../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../reset/HtmlTable/HtmlTableCell.js');
var logger = require('../../../utils/log/logger.js');
var ActionMenuPopover_baseStyles = require('./ActionMenuPopover.baseStyles.js');
var reactDom = require('@floating-ui/react-dom');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var baseClassName = 'fi-action-menu-popover';
var actionMenuClassNames = {
baseClassName: baseClassName,
hidden: "".concat(baseClassName, "--hidden"),
list: "".concat(baseClassName, "_list"),
floatinguiArrow: "".concat(baseClassName, "_floatingui-arrow")
};
var defaultProviderValue = {
onItemClick: function onItemClick() {
return null;
},
onItemMouseOver: function onItemMouseOver() {
return null;
},
activeDescendantIndex: -1,
parentId: ''
};
var _a = /*#__PURE__*/React__default.default.createContext(defaultProviderValue),
ActionMenuProvider = _a.Provider,
ActionMenuConsumer = _a.Consumer;
var BaseActionMenuPopover = function BaseActionMenuPopover(props) {
var _a;
var _b, _c, _d;
var openButtonRef = props.openButtonRef,
onClose = props.onClose,
className = props.className,
children = props.children,
menuId = props.menuId,
buttonId = props.buttonId,
initialActiveDescendant = props.initialActiveDescendant,
fullWidth = props.fullWidth,
isOpen = props.isOpen;
var _e = React.useState(null),
mountNode = _e[0],
setMountNode = _e[1];
var _f = React.useState(null),
dialogElement = _f[0],
setDialogElement = _f[1];
var _g = React.useState(-1),
activeChild = _g[0],
setActiveChild = _g[1];
var divRef = React.useRef(null);
var arrowRef = React.useRef(null);
common.useEnhancedEffect(function () {
setMountNode(window.document.body);
}, []);
React.useEffect(function () {
if (isOpen) {
document.addEventListener('keydown', globalKeyDownHandler, {
capture: true
});
return function () {
document.removeEventListener('keydown', globalKeyDownHandler, {
capture: true
});
};
}
}, [isOpen]);
React.useEffect(function () {
if (isOpen) {
document.addEventListener('click', globalClickHandler, {
capture: true
});
return function () {
document.removeEventListener('click', globalClickHandler, {
capture: true
});
};
}
}, [isOpen]);
React.useEffect(function () {
var isSubscribed = true;
setTimeout(function () {
if (isSubscribed) {
if (initialActiveDescendant === 'first') {
setActiveChild(0);
} else if (initialActiveDescendant === 'last') {
setActiveChild(React__default.default.Children.count(children) - 1);
}
}
}, 0);
return function () {
setActiveChild(-1);
isSubscribed = false;
};
}, [isOpen]);
var globalClickHandler = function globalClickHandler(nativeEvent) {
var _a, _b;
if (!((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.contains(nativeEvent.target)) && !((_b = openButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(nativeEvent.target))) {
handleClose(false);
}
};
var isActivable = function isActivable(child) {
var _a;
return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'ActionMenuItem';
};
var nextActivable = function nextActivable(current) {
var nextActivableIndex = -1;
var firstActivableIndex = -1;
var startFrom = 0;
if (current) {
startFrom = current;
}
React__default.default.Children.forEach(children, function (child, index) {
if (isActivable(child) && firstActivableIndex === -1) {
firstActivableIndex = index;
}
if (index > startFrom && isActivable(child) && nextActivableIndex === -1) {
nextActivableIndex = index;
}
});
if (nextActivableIndex !== -1) {
return nextActivableIndex;
}
return firstActivableIndex;
};
var previousActivable = function previousActivable(current) {
var result = -1;
var lastActivable = -1;
React__default.default.Children.forEach(children, function (child, index) {
if (isActivable(child)) {
lastActivable = index;
}
if (index < current && isActivable(child)) {
result = index;
}
});
if (result !== -1) {
return result;
}
return lastActivable;
};
var globalKeyDownHandler = function globalKeyDownHandler(event) {
if (event.key === 'Escape') {
handleClose(true);
event.preventDefault();
}
if (event.key === 'Tab') {
handleClose(true);
}
if (event.key === 'ArrowDown') {
event.preventDefault();
setActiveChild(function (previous) {
return nextActivable(previous);
});
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setActiveChild(function (previous) {
return previousActivable(previous);
});
}
};
var _h = reactDom.useFloating({
open: isOpen,
middleware: tslib.__spreadArray([reactDom.offset(10), reactDom.flip(), reactDom.shift(), reactDom.arrow({
element: arrowRef
})], fullWidth ? [reactDom.size({
apply: function apply(_a) {
var rects = _a.rects,
elements = _a.elements;
var floatingElement = elements.floating;
floatingElement.style.width = "".concat(rects.reference.width, "px");
}
})] : [], true),
whileElementsMounted: reactDom.autoUpdate,
placement: 'bottom-end'
}),
floatingUiRefs = _h.refs,
floatingStyles = _h.floatingStyles,
middlewareData = _h.middlewareData;
React.useEffect(function () {
if (openButtonRef.current) {
floatingUiRefs.setReference(openButtonRef.current);
}
}, [floatingUiRefs, openButtonRef]);
React.useEffect(function () {
if (dialogElement) {
floatingUiRefs.setFloating(dialogElement);
}
}, [floatingUiRefs, dialogElement]);
var handleClose = function handleClose(moveFocus) {
onClose(moveFocus);
};
if (React__default.default.Children.count(children) < 1) {
logger.getLogger().warn("Action Menu does not contain items");
return null;
}
var menuItems = function menuItems(childs) {
return React__default.default.Children.map(childs, function (child, index) {
if ( /*#__PURE__*/React__default.default.isValidElement(child) && isActivable(child)) {
return /*#__PURE__*/React__default.default.cloneElement(child, {
itemIndex: index
});
}
return child;
});
};
var itemMouseOver = function itemMouseOver(value) {
setActiveChild(value);
};
if (!mountNode) {
return null;
}
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
className: classnames__default.default(className, baseClassName, (_a = {}, _a[actionMenuClassNames.hidden] = !isOpen, _a)),
style: floatingStyles,
forwardedRef: setDialogElement,
tabIndex: -1,
role: "none"
}, /*#__PURE__*/React__default.default.createElement(ActionMenuProvider, {
value: {
onItemClick: function onItemClick() {
return handleClose(true);
},
onItemMouseOver: function onItemMouseOver(itemIndex) {
itemMouseOver(itemIndex);
},
activeDescendantIndex: activeChild,
parentId: menuId
}
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
role: "menu",
forwardedRef: divRef,
id: menuId,
"aria-labelledby": buttonId,
tabIndex: -1,
className: actionMenuClassNames.list
}, menuItems(children))), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
forwardedRef: arrowRef,
className: actionMenuClassNames.floatinguiArrow,
"data-floatingui-placement": (_b = middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.offset) === null || _b === void 0 ? void 0 : _b.placement,
"aria-hidden": true,
style: {
position: 'absolute',
left: (_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.x,
top: (_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.y
}
}));
};
var StyledActionMenuPopover = styled.styled(function (_a) {
_a.theme;
var passProps = tslib.__rest(_a, ["theme"]);
return /*#__PURE__*/React__default.default.createElement(BaseActionMenuPopover, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1cahlko-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return ActionMenuPopover_baseStyles.baseStyles(theme);
});
var ActionMenuPopover = function ActionMenuPopover(props) {
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(StyledActionMenuPopover, tslib.__assign({
theme: suomifiTheme
}, props));
});
};
ActionMenuPopover.displayName = 'ActionMenuPopover';
var templateObject_1;
exports.ActionMenuConsumer = ActionMenuConsumer;
exports.ActionMenuPopover = ActionMenuPopover;
exports.ActionMenuProvider = ActionMenuProvider;
exports.BaseActionMenuPopover = BaseActionMenuPopover;
exports.actionMenuClassNames = actionMenuClassNames;
//# sourceMappingURL=ActionMenuPopover.js.map