@wix/design-system
Version:
@wix/design-system
265 lines (263 loc) • 10.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.usePopover = usePopover;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@floating-ui/react");
var _PopoverNext = require("../PopoverNext.constants");
var _ZIndex = require("../../common/ZIndex");
var _usePositioning = require("./usePositioning");
var _deprecationLog = _interopRequireDefault(require("../../utils/deprecationLog"));
var _useTransition = require("./useTransition");
var _useArrow = require("./useArrow");
var _context = require("../../WixDesignSystemProvider/context");
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), !0).forEach(function (r) { (0, _defineProperty2.default)(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 ANIMATED_DURATION = {
open: 150,
close: 100
};
var formatWidth = value => typeof value === 'number' ? "".concat(value, "px") : value;
function usePopover(_ref) {
var _moveBy$y, _moveBy$x, _ref3, _ref4, _ref5, _transitionSettings$d, _transitionSettings$c, _transitionSettings$o;
var {
dataHook,
open = false,
onOpenChange: _onOpenChange,
focusManagerEnabled = true,
appendTo = _PopoverNext.APPEND_TO.parent,
dynamicWidth = false,
zIndex = _ZIndex.ZIndex.popover,
width,
minWidth,
maxWidth,
excludeClass,
moveBy,
flip: shouldFlip = true,
placement = 'bottom',
fixed = false,
rootRef,
showDelay,
hideDelay,
timeout: duration,
skin,
transitionSettings,
onClickOutside,
overlay = false,
role,
tabIndex,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-describedby': ariaDescribedBy,
id,
style,
onClick,
animate,
showArrow = false,
customArrow,
contentClassName,
onMouseEnter,
onMouseLeave,
autoUpdateOptions
} = _ref;
var {
contextClassName
} = (0, _react.useContext)(_context.WixDesignSystemContext);
var isHoverMode = Boolean(onMouseEnter && onMouseLeave);
var isHybridMode = Boolean(onMouseEnter) !== Boolean(onMouseLeave);
(0, _react.useEffect)(() => {
if (showDelay) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `showDelay` is deprecated. Use `transitionSettings` instead.');
}
if (hideDelay) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `hideDelay` is deprecated. Use `transitionSettings` instead.');
}
if (duration) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `timeout` is deprecated. Use `transitionSettings` instead.');
}
if (animate) {
(0, _deprecationLog.default)('<PopoverNext /> - prop `animate` is deprecated. Use `transitionSettings` instead.');
}
}, [showDelay, hideDelay, duration, animate]);
var positioning = (0, _usePositioning.usePositioning)({
flip: shouldFlip,
fixed,
placement,
appendTo,
rootRef
});
var {
getArrowProps,
arrowMiddleware,
getContentWithArrowStyles
} = (0, _useArrow.useArrow)(showArrow);
var {
context,
middlewareData,
floatingStyles,
placement: floatingPlacement
} = (0, _react2.useFloating)({
open,
onOpenChange: (newOpen, event, reason) => {
_onOpenChange(newOpen, reason);
if (reason === 'hover' || reason === 'safe-polygon') {
if (newOpen && onMouseEnter && event) {
onMouseEnter(event);
} else if (!newOpen && onMouseLeave && event) {
onMouseLeave(event);
}
}
},
whileElementsMounted: (referenceEl, floatingEl, update) => {
var _autoUpdateOptions$an;
return (0, _react2.autoUpdate)(referenceEl, floatingEl, update, {
animationFrame: (_autoUpdateOptions$an = autoUpdateOptions == null ? void 0 : autoUpdateOptions.animationFrame) !== null && _autoUpdateOptions$an !== void 0 ? _autoUpdateOptions$an : false
});
},
placement: positioning.placement,
middleware: [(0, _react2.size)({
apply(_ref2) {
var {
rects,
elements
} = _ref2;
var styles = {
wordBreak: 'normal',
display: 'flex',
justifyContent: 'center'
};
if (width) {
styles.width = formatWidth(width);
if (minWidth) {
styles.minWidth = formatWidth(minWidth);
}
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
} else if (dynamicWidth) {
styles.minWidth = formatWidth(rects.reference.width);
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
} else {
if (minWidth) {
styles.minWidth = formatWidth(minWidth);
}
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
}
if (appendTo === 'window' || appendTo === 'scrollParent') {
styles.minWidth = !!minWidth ? formatWidth(minWidth) : 'fit-content';
styles.width = !!width ? formatWidth(width) : formatWidth(rects.reference.width);
if (maxWidth) {
styles.maxWidth = formatWidth(maxWidth);
}
}
Object.assign(elements.floating.style, styles);
}
}), !!positioning.flip ? (0, _react2.flip)(positioning.flip) : undefined, !!positioning.autoPlacement ? (0, _react2.autoPlacement)(positioning.autoPlacement) : undefined, (0, _react2.shift)(positioning.shift), moveBy ? (0, _react2.offset)({
mainAxis: (_moveBy$y = moveBy == null ? void 0 : moveBy.y) !== null && _moveBy$y !== void 0 ? _moveBy$y : 0,
crossAxis: (_moveBy$x = moveBy == null ? void 0 : moveBy.x) !== null && _moveBy$x !== void 0 ? _moveBy$x : 0
}) : undefined, arrowMiddleware].filter(Boolean)
});
var hover = (0, _react2.useHover)(context, {
enabled: Boolean(onMouseEnter) || Boolean(onMouseLeave),
delay: {
open: (_ref3 = showDelay !== null && showDelay !== void 0 ? showDelay : transitionSettings == null ? void 0 : transitionSettings.openDelay) !== null && _ref3 !== void 0 ? _ref3 : 0,
close: (_ref4 = hideDelay !== null && hideDelay !== void 0 ? hideDelay : transitionSettings == null ? void 0 : transitionSettings.closeDelay) !== null && _ref4 !== void 0 ? _ref4 : 0
},
handleClose: (0, _react2.safePolygon)({
requireIntent: true
})
});
var click = (0, _react2.useClick)(context, {
enabled: !isHoverMode
});
var dismiss = (0, _react2.useDismiss)(context, {
outsidePress: event => {
var target = event.target;
var classes = target.classList;
var referenceElement = context.refs.reference.current;
var floatingElement = context.refs.floating.current;
if (referenceElement instanceof Element && referenceElement.contains(target)) {
return false;
}
// Under React 16 the floating ref can be unset when Floating UI's
// outside-press listener evaluates the click that just opened the
// popover, causing it to fire onClickOutside on an inside click.
if (floatingElement instanceof Element && floatingElement.contains(target)) {
return false;
}
if (excludeClass && classes.contains(excludeClass)) {
return false;
}
onClickOutside == null || onClickOutside(event);
return true;
},
escapeKey: true
});
var roleSetting = (0, _react2.useRole)(context, {
role
});
var interactions = (0, _react2.useInteractions)([hover, click, dismiss, roleSetting, {
reference: {
onClick
},
floating: _objectSpread({
id,
tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : -1,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-describedby': ariaDescribedBy
}, isHybridMode ? {
onMouseEnter,
onMouseLeave
} : {})
}]);
var convertToTransitionSettings = duration => {
if (!duration || typeof duration === 'number') {
return duration;
}
return {
open: duration.enter,
close: duration.exit
};
};
var {
isMounted,
styles: transitionStyles
} = (0, _useTransition.useTransition)(_objectSpread(_objectSpread({}, transitionSettings), {}, {
duration: (_ref5 = (_transitionSettings$d = transitionSettings == null ? void 0 : transitionSettings.duration) !== null && _transitionSettings$d !== void 0 ? _transitionSettings$d : convertToTransitionSettings(duration)) !== null && _ref5 !== void 0 ? _ref5 : animate ? ANIMATED_DURATION : undefined,
closeDelay: (_transitionSettings$c = transitionSettings == null ? void 0 : transitionSettings.closeDelay) !== null && _transitionSettings$c !== void 0 ? _transitionSettings$c : hideDelay,
openDelay: (_transitionSettings$o = transitionSettings == null ? void 0 : transitionSettings.openDelay) !== null && _transitionSettings$o !== void 0 ? _transitionSettings$o : showDelay,
context
}));
return (0, _react.useMemo)(() => ({
dataHook,
focusManagerEnabled,
interactions,
context,
appendTo,
zIndex,
open: isMounted,
popoverStyles: _objectSpread(_objectSpread(_objectSpread({}, context.floatingStyles), floatingStyles), getContentWithArrowStyles(floatingPlacement)),
transitionStyles,
portalRoot: positioning.portalRoot,
contextClassName,
skin,
overlay,
style,
rootRef,
middlewareData,
placement,
arrowProps: getArrowProps(context),
showArrow,
contentClassName,
customArrow,
onMouseEnter,
onMouseLeave
}), [dataHook, focusManagerEnabled, interactions, floatingPlacement, context, onMouseEnter, onMouseLeave, isMounted, zIndex, appendTo, positioning, transitionStyles, contextClassName, skin, overlay, style, middlewareData, placement, showArrow, rootRef, floatingStyles, contentClassName, customArrow, getArrowProps, getContentWithArrowStyles]);
}
//# sourceMappingURL=usePopover.js.map