@react-spectrum/s2
Version:
Spectrum 2 UI components in React
278 lines (267 loc) • 11.3 kB
JavaScript
require("./Popover.css");
var $914a06b3a1c679bc$exports = require("./Provider.cjs");
var $308b180f49d82d28$exports = require("../icons/runtime.cjs");
var $16fRD$reactjsxruntime = require("react/jsx-runtime");
var $16fRD$reactariacomponents = require("react-aria-components");
var $16fRD$react = require("react");
var $16fRD$reactspectrumutils = require("@react-spectrum/utils");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "PopoverBase", () => $493371ef39bf7a55$export$fde1b04c590741a3);
$parcel$export(module.exports, "Popover", () => $493371ef39bf7a55$export$5b6b19405a83ff9d);
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
let $493371ef39bf7a55$var$popover = function anonymous(props, overrides) {
let rules = " ";
let width = false;
let maxWidth = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "Z") width = true;
if (p[1] === "L") maxWidth = true;
rules += p[0];
}
if (props.colorScheme === "dark") rules += ' _pa91';
else if (props.colorScheme === "light") rules += ' _pb91';
else if (props.colorScheme === "light dark") rules += ' _pc91';
else rules += ' _pN79Hzc91';
rules += ' -Ovbhqd-g_g91';
rules += ' gEzkoQe91';
rules += ' oc91';
rules += ' nc91';
rules += ' kc91';
rules += ' jc91';
if (props.isArrowShown) rules += ' _rb91';
if (props.isArrowShown) rules += ' _nd91';
else rules += ' _nb91';
rules += ' _jf91';
rules += ' _kb91';
rules += ' hb91';
rules += ' mb91';
rules += ' lb91';
rules += ' ir91';
rules += ' ila91';
if (props.size === "L") {
if (!width) rules += ' ZE91';
} else if (props.size === "M") {
if (!width) rules += ' ZB91';
} else if (props.size === "S") {
if (!width) rules += ' Zz91';
}
if (!maxWidth) rules += ' LEmL1Zb91';
rules += ' _oa91';
rules += ' sd91';
if (props.isExiting) rules += ' _Ia91';
else if (props.isEntering) rules += ' _Ia91';
if (props.isSubmenu) {
rules += ' -_8PloMd-s91';
rules += ' __Ya91';
} else if (props.placement === "bottom") {
if (props.isExiting) {
rules += ' -_8PloMd-l91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_8PloMd-l91';
rules += ' __Ya91';
}
} else if (props.placement === "top") {
if (props.isExiting) {
rules += ' -_8PloMd-F91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_8PloMd-F91';
rules += ' __Ya91';
}
}
if (props.isSubmenu) {
rules += ' -_7PloMd-s91';
rules += ' __Ya91';
} else if (props.placement === "right") {
if (props.isExiting) {
rules += ' -_7PloMd-m91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_7PloMd-m91';
rules += ' __Ya91';
}
} else if (props.placement === "left") {
if (props.isExiting) {
rules += ' -_7PloMd-G91';
rules += ' __Ya91';
} else if (props.isEntering) {
rules += ' -_7PloMd-G91';
rules += ' __Ya91';
}
}
rules += ' YmenWad91';
rules += ' Xc91';
if (props.isExiting) rules += ' _2c91';
rules += ' _Bb91';
if (props.isExiting) rules += ' _Ob91';
return rules;
};
// TODO: animations and real Popover Arrow
let $493371ef39bf7a55$var$arrow = function anonymous(props) {
let rules = " ";
rules += ' sb91';
rules += ' tEzkoQe91';
rules += ' Zl91';
rules += ' Fh91';
if (props.placement === "right") rules += ' _Sd91';
else if (props.placement === "left") rules += ' _Sa91';
else if (props.placement === "bottom") rules += ' _Sc91';
else if (props.placement === "top") rules += ' _Sb91';
else rules += ' _Sc91';
if (props.placement === "right") {
rules += ' -_7PloMd-G91';
rules += ' __Ya91';
} else if (props.placement === "left") {
rules += ' -_7PloMd-m91';
rules += ' __Ya91';
}
rules += ' _Vb91';
rules += ' Vg91';
rules += ' Vlb91';
return rules;
};
const $493371ef39bf7a55$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $16fRD$react.forwardRef)(function PopoverBase(props, ref) {
let { hideArrow: hideArrow = false, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, size: size } = props;
let domRef = (0, $16fRD$reactspectrumutils.useDOMRef)(ref);
let colorScheme = (0, $16fRD$react.useContext)((0, $914a06b3a1c679bc$exports.ColorSchemeContext));
let { locale: locale, direction: direction } = (0, $16fRD$reactariacomponents.useLocale)();
// TODO: should we pass through lang and dir props in RAC?
let popoverRef = (0, $16fRD$react.useCallback)((el)=>{
domRef.current = el;
if (el) {
el.lang = locale;
el.dir = direction;
}
}, [
locale,
direction,
domRef
]);
// On small devices, show a modal (or eventually a tray) instead of a popover.
// TODO: reverted this until we have trays.
// let isMobile = useIsMobileDevice();
// if (isMobile && process.env.NODE_ENV !== 'test') {
// let mappedChildren = typeof children === 'function'
// ? (renderProps: ModalRenderProps) => children({...renderProps, defaultChildren: null, trigger, placement: 'bottom'})
// : children;
// return (
// <Modal size={size} isDismissable>
// {composeRenderProps(mappedChildren, (children, {state}) => (
// <>
// {children}
// {/* Add additional dismiss button at the end to match popovers. */}
// <DismissButton onDismiss={state.close} />
// </>
// ))}
// </Modal>
// );
// }
// TODO: this still isn't the final popover 'tip', copying various ones out of the designs files yields different results
// containerPadding not working as expected
return /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.Popover), {
...props,
offset: (props.offset ?? 8) + (hideArrow ? 0 : 8),
ref: popoverRef,
style: {
...UNSAFE_style,
// Override default z-index from useOverlayPosition. We use isolation: isolate instead.
zIndex: undefined
},
className: (renderProps)=>UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)($493371ef39bf7a55$var$popover({
...renderProps,
size: size,
isArrowShown: !hideArrow,
colorScheme: colorScheme,
isSubmenu: renderProps.trigger === 'SubmenuTrigger'
}), styles),
children: (0, $16fRD$reactariacomponents.composeRenderProps)(props.children, (children, renderProps)=>/*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsxs)((0, $16fRD$reactjsxruntime.Fragment), {
children: [
!hideArrow && /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.OverlayArrow), {
children: /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)("svg", {
viewBox: "0 0 18 10",
className: $493371ef39bf7a55$var$arrow(renderProps),
children: /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)("path", {
transform: "translate(0 -1)",
d: "M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1"
})
})
}),
children
]
}))
});
});
const $493371ef39bf7a55$var$dialogStyle = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let width = false;
let maxWidth = false;
let maxHeight = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
if (p[1] === "Z") width = true;
if (p[1] === "L") maxWidth = true;
if (p[1] === "K") maxHeight = true;
rules += p[0];
}
rules += ' Tt91';
rules += ' Qt91';
rules += ' St91';
rules += ' Rt91';
rules += ' _oa91';
rules += ' _Le91';
rules += ' oi91';
rules += ' ni91';
rules += ' ki91';
rules += ' ji91';
rules += ' _Na91';
rules += ' Pa91';
if (!position) rules += ' _Pc91';
if (!width) rules += ' Za91';
if (!maxWidth) rules += ' L40ub4c91';
if (!maxHeight) rules += ' K40ub4c91';
return rules;
};
const $493371ef39bf7a55$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $16fRD$react.forwardRef)(function Popover(props, ref) {
let domRef = (0, $16fRD$reactspectrumutils.useDOMRef)(ref);
const { triggerRef: triggerRef, isOpen: isOpen, onOpenChange: onOpenChange, ...otherProps } = props;
return /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)($493371ef39bf7a55$export$fde1b04c590741a3, {
isOpen: isOpen,
onOpenChange: onOpenChange,
triggerRef: triggerRef,
size: props.size,
hideArrow: props.hideArrow,
placement: props.placement,
shouldFlip: props.shouldFlip,
containerPadding: props.containerPadding,
offset: props.offset,
crossOffset: props.crossOffset,
children: /*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.Dialog), {
...otherProps,
ref: domRef,
style: props.UNSAFE_style,
className: (props.UNSAFE_className || '') + $493371ef39bf7a55$var$dialogStyle(null, props.styles),
children: (0, $16fRD$reactariacomponents.composeRenderProps)(props.children, (children)=>// Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
/*#__PURE__*/ (0, $16fRD$reactjsxruntime.jsx)((0, $16fRD$reactariacomponents.OverlayTriggerStateContext).Provider, {
value: null,
children: children
}))
})
});
});
//# sourceMappingURL=Popover.cjs.map