@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
380 lines (371 loc) • 17.3 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useRef, useEffect, forwardRef, useState } from 'react';
import Tippy from '@tippyjs/react';
import classnames from 'classnames';
import Down from '@bigbinary/neeto-icons/Down';
import { isNil } from 'ramda';
import Button from './Button.js';
import { u as useId } from './useId-Jj9hXm-g.js';
import { Link } from 'react-router-dom';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import { g as getContentDir, h as hyphenize, n as noop } from './index-DzZtLRHp.js';
import 'qs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { isPresent } from '@bigbinary/neeto-cist';
import Tooltip from './Tooltip.js';
import './Spinner.js';
import 'tippy.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import './index-DyUNP5G9.js';
import '@babel/runtime/helpers/toConsumableArray';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import 'i18next';
import './usePrefersReducedMotion-n4ZJtExQ.js';
import './en-DVlE9xuu.js';
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Divider = function Divider(props) {
return /*#__PURE__*/jsx("li", _objectSpread$4({
"aria-orientation": "horizontal",
className: "neeto-ui-dropdown__popup-divider",
role: "separator"
}, props));
};
var _excluded$3 = ["children", "className"];
function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var itemClassName = "neeto-ui-dropdown__popup-menu-item-btn";
var Menu = function Menu(_ref) {
var children = _ref.children,
className = _ref.className,
otherProps = _objectWithoutProperties(_ref, _excluded$3);
var activeIndexRef = useRef(-1);
var menuRef = useRef(null);
var onKeyDown = function onKeyDown(event) {
var _event$key;
var menu = menuRef.current;
var key = (_event$key = event.key) === null || _event$key === void 0 ? void 0 : _event$key.toLowerCase();
var activeIndex = activeIndexRef.current;
var eventHandled = false;
var items = menu.getElementsByClassName(itemClassName);
var itemsCount = items.length;
if (itemsCount === 0) return;
if (key === "arrowdown") {
activeIndex = activeIndex >= itemsCount - 1 ? 0 : activeIndex + 1;
items[activeIndex].focus();
eventHandled = true;
} else if (key === "arrowup") {
activeIndex = activeIndex <= 0 ? itemsCount - 1 : activeIndex - 1;
items[activeIndex].focus();
eventHandled = true;
} else if (key === "enter") {
items[activeIndex].click();
eventHandled = true;
}
if (!eventHandled) return;
activeIndexRef.current = activeIndex;
event.preventDefault();
event.stopPropagation();
};
useEffect(function () {
var menu = menuRef.current;
if (menu) menu.focus();
}, [menuRef]);
return /*#__PURE__*/jsx("ul", _objectSpread$3(_objectSpread$3({
onKeyDown: onKeyDown,
className: classnames("neeto-ui-dropdown__popup-menu", className),
ref: menuRef,
tabIndex: 0
}, otherProps), {}, {
children: children
}));
};
var _excluded$2 = ["children", "className", "tooltipProps"];
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MenuItem = function MenuItem(_ref) {
var children = _ref.children,
className = _ref.className,
tooltipProps = _ref.tooltipProps,
otherProps = _objectWithoutProperties(_ref, _excluded$2);
var renderMenuItem = function renderMenuItem() {
return /*#__PURE__*/jsx("li", _objectSpread$2(_objectSpread$2({
className: classnames("neeto-ui-dropdown__popup-menu-item", className),
role: "menuitem"
}, otherProps), {}, {
children: children
}));
};
if (isPresent(tooltipProps)) {
return /*#__PURE__*/jsx(Tooltip, _objectSpread$2(_objectSpread$2({}, tooltipProps), {}, {
children: renderMenuItem()
}));
}
return renderMenuItem();
};
var _excluded$1 = ["children", "className", "isActive", "isDisabled", "style", "prefix", "suffix", "type", "to", "href", "tooltipProps"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ITEM_BTN_STYLES = {
"default": "default",
danger: "danger"
};
var BUTTON_TYPES = {
button: "button"};
var MenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
var children = _ref.children,
className = _ref.className,
isActive = _ref.isActive,
isDisabled = _ref.isDisabled,
_ref$style = _ref.style,
style = _ref$style === void 0 ? ITEM_BTN_STYLES["default"] : _ref$style,
prefix = _ref.prefix,
suffix = _ref.suffix,
_ref$type = _ref.type,
type = _ref$type === void 0 ? BUTTON_TYPES.button : _ref$type,
_ref$to = _ref.to,
to = _ref$to === void 0 ? "" : _ref$to,
_ref$href = _ref.href,
href = _ref$href === void 0 ? "" : _ref$href,
tooltipProps = _ref.tooltipProps,
otherProps = _objectWithoutProperties(_ref, _excluded$1);
var Parent, elementSpecificProps;
if (to) {
Parent = Link;
elementSpecificProps = {
to: to
};
} else if (href) {
Parent = "a";
elementSpecificProps = {
href: href
};
} else {
Parent = "button";
elementSpecificProps = {
type: type
};
}
return /*#__PURE__*/jsx(MenuItem, {
tooltipProps: tooltipProps,
children: /*#__PURE__*/jsxs(Parent, _objectSpread$1(_objectSpread$1({
disabled: isDisabled,
className: classnames("neeto-ui-dropdown__popup-menu-item-btn", className, {
"neeto-ui-dropdown__popup-menu-item-btn--active": isActive,
"neeto-ui-dropdown__popup-menu-item-btn--disabled": isDisabled,
"neeto-ui-dropdown__popup-menu-item-btn--style-danger": style === ITEM_BTN_STYLES.danger
})
}, _objectSpread$1(_objectSpread$1({
ref: ref
}, otherProps), elementSpecificProps)), {}, {
children: [prefix && /*#__PURE__*/jsx("div", {
className: "neeto-ui-dropdown__popup-menu-item-btn__prefix",
children: prefix
}), children, suffix && /*#__PURE__*/jsx("div", {
className: "neeto-ui-dropdown__popup-menu-item-btn__suffix",
children: suffix
})]
}))
});
});
MenuItemButton.displayName = "MenuItemButton";
MenuItem.Button = MenuItemButton;
var getDropdownPlacement = function getDropdownPlacement(placement) {
if (typeof placement !== "string") return placement;
if (getContentDir() !== "rtl") return placement;
if (placement.endsWith("-start")) return placement.replace(/-start$/, "-end");
if (placement.endsWith("-end")) return placement.replace(/-end$/, "-start");
return placement;
};
var _excluded = ["style", "size"],
_excluded2 = ["icon", "label", "isOpen", "onClose", "dropdownProps", "position", "placement", "children", "className", "buttonStyle", "buttonSize", "buttonProps", "customTarget", "disabled", "closeOnEsc", "closeOnSelect", "closeOnOutsideClick", "dropdownModifiers", "trigger", "strategy", "onClick"],
_excluded3 = ["classNames", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BTN_STYLES = {
primary: "primary"};
var BTN_SIZES = {
medium: "medium"};
var STRATEGY = {
absolute: "absolute"};
var PLACEMENT = {
bottomEnd: "bottom-end"};
var TRIGGERS = {
click: "click",
hover: "mouseenter focus",
all: "mouseenter focus click",
manual: "manual"
};
var hideOnEsc = {
name: "hideOnEsc",
defaultValue: true,
fn: function fn(_ref) {
var hide = _ref.hide,
hideOnEsc = _ref.props.hideOnEsc;
function onKeyDown(event) {
var _event$key;
if (((_event$key = event.key) === null || _event$key === void 0 ? void 0 : _event$key.toLowerCase()) === "escape" && hideOnEsc) hide();
}
return {
onShow: function onShow() {
document.addEventListener("keydown", onKeyDown);
},
onHide: function onHide() {
document.removeEventListener("keydown", onKeyDown);
}
};
}
};
var plugins = [hideOnEsc];
var Dropdown = function Dropdown(_ref2) {
var icon = _ref2.icon,
label = _ref2.label,
isOpen = _ref2.isOpen,
_ref2$onClose = _ref2.onClose,
onClose = _ref2$onClose === void 0 ? noop : _ref2$onClose,
_ref2$dropdownProps = _ref2.dropdownProps,
dropdownProps = _ref2$dropdownProps === void 0 ? {} : _ref2$dropdownProps,
_ref2$position = _ref2.position,
position = _ref2$position === void 0 ? PLACEMENT.bottomEnd : _ref2$position,
_ref2$placement = _ref2.placement,
placement = _ref2$placement === void 0 ? position : _ref2$placement,
children = _ref2.children,
className = _ref2.className,
_ref2$buttonStyle = _ref2.buttonStyle,
buttonStyle = _ref2$buttonStyle === void 0 ? BTN_STYLES.primary : _ref2$buttonStyle,
_ref2$buttonSize = _ref2.buttonSize,
buttonSize = _ref2$buttonSize === void 0 ? BTN_SIZES.medium : _ref2$buttonSize,
_ref2$buttonProps = _ref2.buttonProps,
_ref2$buttonProps2 = _ref2$buttonProps === void 0 ? {} : _ref2$buttonProps,
style = _ref2$buttonProps2.style,
size = _ref2$buttonProps2.size,
buttonProps = _objectWithoutProperties(_ref2$buttonProps2, _excluded),
customTarget = _ref2.customTarget,
_ref2$disabled = _ref2.disabled,
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
_ref2$closeOnEsc = _ref2.closeOnEsc,
closeOnEsc = _ref2$closeOnEsc === void 0 ? true : _ref2$closeOnEsc,
_ref2$closeOnSelect = _ref2.closeOnSelect,
closeOnSelect = _ref2$closeOnSelect === void 0 ? true : _ref2$closeOnSelect,
_ref2$closeOnOutsideC = _ref2.closeOnOutsideClick,
closeOnOutsideClick = _ref2$closeOnOutsideC === void 0 ? true : _ref2$closeOnOutsideC,
_ref2$dropdownModifie = _ref2.dropdownModifiers,
dropdownModifiers = _ref2$dropdownModifie === void 0 ? [] : _ref2$dropdownModifie,
_ref2$trigger = _ref2.trigger,
trigger = _ref2$trigger === void 0 ? TRIGGERS.click : _ref2$trigger,
_ref2$strategy = _ref2.strategy,
strategy = _ref2$strategy === void 0 ? STRATEGY.absolute : _ref2$strategy,
onClick = _ref2.onClick,
otherProps = _objectWithoutProperties(_ref2, _excluded2);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
instance = _useState2[0],
setInstance = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
mounted = _useState4[0],
setMounted = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isExpanded = _useState6[0],
setIsExpanded = _useState6[1];
var menuId = useId();
var isControlled = !isNil(isOpen);
var controlledProps = isControlled ? {
visible: isOpen
} : {
onClickOutside: function onClickOutside() {
return closeOnOutsideClick;
}
};
var dropdownClassnames = dropdownProps.classNames,
dropdownClassName = dropdownProps.className,
otherDropdownProps = _objectWithoutProperties(dropdownProps, _excluded3);
var close = function close() {
return instance.hide();
};
return /*#__PURE__*/jsx(Tippy, _objectSpread(_objectSpread({
interactive: true,
animation: false,
aria: {
content: null,
expanded: false
},
arrow: false,
duration: 0
// hideOnClick determines whether the dropdown should be hidden when the user clicks outside of the dropdown.
// https://atomiks.github.io/tippyjs/v6/all-props/#hideonclick
,
hideOnClick: isControlled ? undefined : closeOnOutsideClick || "toggle",
hideOnEsc: closeOnEsc,
maxWidth: "none",
offset: 0,
placement: getDropdownPlacement(placement),
popperOptions: {
strategy: strategy,
modifiers: dropdownModifiers
},
theme: "light",
trigger: isControlled ? undefined : TRIGGERS[trigger],
className: classnames("neeto-ui-dropdown", _defineProperty({}, className, className)),
content: mounted ? /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
"data-testid": "".concat(hyphenize(label), "-dropdown-container"),
id: menuId,
role: "menu",
className: classnames("neeto-ui-dropdown__popup", _defineProperty(_defineProperty({}, dropdownClassName, dropdownClassName), dropdownClassnames, dropdownClassnames)),
onClick: closeOnSelect ? close : noop
}, otherDropdownProps), {}, {
children: children
})) : null,
onCreate: function onCreate(instance) {
return instance && setInstance(instance);
},
onMount: function onMount() {
return setMounted(true);
},
onShow: function onShow() {
return setIsExpanded(true);
},
onHidden: function onHidden() {
onClose();
setMounted(false);
setIsExpanded(false);
}
}, _objectSpread(_objectSpread({
disabled: disabled,
plugins: plugins
}, otherProps), controlledProps)), {}, {
children: customTarget ? /*#__PURE__*/jsx("span", {
onClick: onClick,
className: classnames({
"neeto-ui-cursor-not-allowed": disabled
}),
children: typeof customTarget === "function" ? customTarget() : customTarget
}) : /*#__PURE__*/jsx(Button, _objectSpread({
label: label,
onClick: onClick,
"aria-controls": menuId,
"aria-expanded": isControlled ? isOpen : isExpanded,
"aria-haspopup": "true",
"data-testid": "".concat(hyphenize(label), "-dropdown-icon"),
disabled: disabled || (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled),
icon: icon || Down,
iconPosition: "right",
size: size !== null && size !== void 0 ? size : buttonSize,
style: style !== null && style !== void 0 ? style : buttonStyle
}, buttonProps))
}));
};
Dropdown.Menu = Menu;
Dropdown.MenuItem = MenuItem;
Dropdown.Divider = Divider;
export { Dropdown as default };
//# sourceMappingURL=Dropdown.js.map