@razorpay/blade
Version:
The Design System that powers Razorpay
146 lines (142 loc) • 7.82 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { useFloating, offset, flip, size as size$1, autoUpdate, useDismiss, useInteractions, useTransitionStyles, FloatingPortal } from '@floating-ui/react';
import { useDropdown } from './useDropdown.js';
import { StyledDropdownOverlay } from './StyledDropdownOverlay.js';
import { dropdownComponentIds } from './dropdownComponentIds.js';
import '../BladeProvider/index.js';
import '../../tokens/global/index.js';
import '../../utils/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import { useBottomSheetAndDropdownGlue } from '../BottomSheet/BottomSheetContext.js';
import '../Box/BaseBox/index.js';
import { componentZIndices } from '../../utils/componentZIndices.js';
import { OVERLAY_OFFSET, OVERLAY_TRANSITION_OFFSET } from '../BaseMenu/tokens.js';
import { jsx } from 'react/jsx-runtime';
import { size } from '../../tokens/global/size.js';
import useTheme from '../BladeProvider/useTheme.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
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) { _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 OVERLAY_PADDING = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom
/**
* Overlay of dropdown
*
* Wrap your ActionList within this component
*/
var _DropdownOverlay = function _DropdownOverlay(_ref) {
var _ref2, _referenceRef$current;
var children = _ref.children,
testID = _ref.testID,
_ref$zIndex = _ref.zIndex,
zIndex = _ref$zIndex === void 0 ? componentZIndices.dropdownOverlay : _ref$zIndex,
width = _ref.width,
minWidth = _ref.minWidth,
maxWidth = _ref.maxWidth,
referenceRef = _ref.referenceRef,
_ref$defaultPlacement = _ref.defaultPlacement,
defaultPlacement = _ref$defaultPlacement === void 0 ? 'bottom-start' : _ref$defaultPlacement;
var _useDropdown = useDropdown(),
isOpen = _useDropdown.isOpen,
triggererRef = _useDropdown.triggererRef,
triggererWrapperRef = _useDropdown.triggererWrapperRef,
dropdownTriggerer = _useDropdown.dropdownTriggerer,
setIsOpen = _useDropdown.setIsOpen;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
var isMenu = dropdownTriggerer !== dropdownComponentIds.triggers.SelectInput && dropdownTriggerer !== dropdownComponentIds.triggers.SearchInput && dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete && referenceRef == undefined;
var _useFloating = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
strategy: 'fixed',
placement: defaultPlacement,
elements: {
// Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed
// We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed
// Checkout: https://github.com/razorpay/blade/pull/1559#discussion_r1305438920
reference: (_ref2 = (_referenceRef$current = referenceRef === null || referenceRef === void 0 ? void 0 : referenceRef.current) !== null && _referenceRef$current !== void 0 ? _referenceRef$current : triggererWrapperRef.current) !== null && _ref2 !== void 0 ? _ref2 : triggererRef.current
},
middleware: [offset({
mainAxis: OVERLAY_OFFSET
}), flip({
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
padding: OVERLAY_OFFSET + OVERLAY_PADDING
}), size$1({
apply: function apply(_ref3) {
var rects = _ref3.rects,
elements = _ref3.elements;
var overlayWidth = isMenu ? undefined : makeSize(rects.reference.width);
var overlayMinWidth = isMenu ? makeSize(size['240']) : undefined;
var overlayMaxWidth = isMenu ? makeSize(size['400']) : undefined;
Object.assign(elements.floating.style, {
// in menu, we have flexible width between min and max
// in input triggers, we just take width of trigger
width: width !== null && width !== void 0 ? width : overlayWidth,
minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : overlayMinWidth,
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : overlayMaxWidth
});
}
})],
whileElementsMounted: autoUpdate
}),
refs = _useFloating.refs,
floatingStyles = _useFloating.floatingStyles,
context = _useFloating.context;
var dismiss = useDismiss(context);
var _useInteractions = useInteractions([dismiss]),
getFloatingProps = _useInteractions.getFloatingProps;
var _useTransitionStyles = useTransitionStyles(context, {
duration: theme.motion.duration.quick,
initial: function initial() {
return {
transform: "translateY(-".concat(makeSize(OVERLAY_TRANSITION_OFFSET), ")"),
opacity: 0
};
}
}),
isMounted = _useTransitionStyles.isMounted,
styles = _useTransitionStyles.styles;
React__default.useEffect(function () {
if (isOpen) {
var _triggererRef$current;
// On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261
(_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen]);
return /*#__PURE__*/jsx(FloatingPortal, {
children: /*#__PURE__*/jsx(BaseBox
// eslint-disable-next-line @typescript-eslint/no-explicit-any
, _objectSpread(_objectSpread({
ref: refs.setFloating,
style: floatingStyles,
zIndex: zIndex,
display: isMounted ? 'flex' : 'none'
}, getFloatingProps()), {}, {
children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread(_objectSpread({
isInBottomSheet: bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.dropdownHasBottomSheet,
elevation: bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet ? undefined : 'midRaised',
style: _objectSpread({}, styles),
width: width ? width : '100%',
minWidth: minWidth,
maxWidth: maxWidth
}, metaAttribute({
name: MetaConstants.DropdownOverlay,
testID: testID
})), {}, {
children: children
}))
}))
});
};
var DropdownOverlay = /*#__PURE__*/assignWithoutSideEffects(_DropdownOverlay, {
componentId: dropdownComponentIds.DropdownOverlay
});
export { DropdownOverlay };
//# sourceMappingURL=DropdownOverlay.web.js.map