@react-spectrum/s2
Version:
Spectrum 2 UI components in React
278 lines (267 loc) • 12 kB
JavaScript
import "./Popover.css";
import {ColorSchemeContext as $9affbfa4e13b9582$export$374e0245597d19a3} from "./Provider.mjs";
import {mergeStyles as $feb886035e0d4633$export$e618dc39ac9ad607} from "../icons/runtime.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $ggIy9$jsx, jsxs as $ggIy9$jsxs, Fragment as $ggIy9$Fragment} from "react/jsx-runtime";
import {useLocale as $ggIy9$useLocale, Popover as $ggIy9$Popover, composeRenderProps as $ggIy9$composeRenderProps, OverlayArrow as $ggIy9$OverlayArrow, OverlayTriggerStateContext as $ggIy9$OverlayTriggerStateContext} from "react-aria-components";
import {createContext as $ggIy9$createContext, forwardRef as $ggIy9$forwardRef, useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback, useMemo as $ggIy9$useMemo} from "react";
import {mergeRefs as $ggIy9$mergeRefs} from "@react-aria/utils";
import {useDOMRef as $ggIy9$useDOMRef} from "@react-spectrum/utils";
/*
* 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 $88b746eba92c8d0d$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|_6|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 += ' _pa1';
else if (props.colorScheme === "light") rules += ' _pb1';
else if (props.colorScheme === "light dark") rules += ' _pc1';
else rules += ' _pN79Hzc1';
rules += ' -Ovbhqd-g_g1';
rules += ' -Ovbhqd-lga1';
rules += ' gEzkoQe1';
rules += ' oc1';
rules += ' nc1';
rules += ' kc1';
rules += ' jc1';
if (props.isArrowShown) rules += ' _rgr5H3d1';
if (props.isArrowShown) rules += ' _nd1';
else rules += ' _nLeasBb1';
rules += ' _Lf1';
rules += ' _Mb1';
rules += ' Oye39g1';
rules += ' Ola1';
if (props.size === "L") {
if (!width) rules += ' ZE1';
} else if (props.size === "M") {
if (!width) rules += ' ZB1';
} else if (props.size === "S") {
if (!width) rules += ' Zz1';
}
if (!maxWidth) rules += ' LEmL1Zb1';
rules += ' _oa1';
rules += ' sd1';
if (props.isExiting) rules += ' _Ia1';
else if (props.isEntering) rules += ' _Ia1';
if (props.isSubmenu) {
rules += ' -_8PloMd-s1';
rules += ' __Ya1';
} else if (props.placement === "bottom") {
if (props.isExiting) {
rules += ' -_8PloMd-l1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_8PloMd-l1';
rules += ' __Ya1';
}
} else if (props.placement === "top") {
if (props.isExiting) {
rules += ' -_8PloMd-F1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_8PloMd-F1';
rules += ' __Ya1';
}
}
if (props.isSubmenu) {
rules += ' -_7PloMd-s1';
rules += ' __Ya1';
} else if (props.placement === "right") {
if (props.isExiting) {
rules += ' -_7PloMd-m1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_7PloMd-m1';
rules += ' __Ya1';
}
} else if (props.placement === "left") {
if (props.isExiting) {
rules += ' -_7PloMd-G1';
rules += ' __Ya1';
} else if (props.isEntering) {
rules += ' -_7PloMd-G1';
rules += ' __Ya1';
}
}
rules += ' YmenWad1';
rules += ' Xc1';
if (props.isExiting) rules += ' _2c1';
rules += ' _Bb1';
if (props.isExiting) rules += ' _Ob1';
return rules;
};
// TODO: animations and real Popover Arrow
let $88b746eba92c8d0d$var$arrow = function anonymous(props) {
let rules = " ";
rules += ' sb1';
rules += ' tEzkoQe1';
rules += ' Zl1';
rules += ' Fh1';
if (props.placement === "right") rules += ' _Sd1';
else if (props.placement === "left") rules += ' _Sa1';
else if (props.placement === "bottom") rules += ' _Sc1';
else if (props.placement === "top") rules += ' _Sb1';
else rules += ' _Sc1';
if (props.placement === "right") {
rules += ' -_7PloMd-y1';
rules += ' __Ya1';
} else if (props.placement === "left") {
rules += ' -_7PloMd-e1';
rules += ' __Ya1';
}
rules += ' _Vb1';
rules += ' Vye39g1';
rules += ' Vlb1';
return rules;
};
const $88b746eba92c8d0d$export$9b9a0cd73afb7ca4 = /*#__PURE__*/ (0, $ggIy9$createContext)(null);
const $88b746eba92c8d0d$export$60dfb2c3202ad27d = /*#__PURE__*/ (0, $ggIy9$createContext)(false);
const $88b746eba92c8d0d$export$fde1b04c590741a3 = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function PopoverBase(props, ref) {
let { hideArrow: hideArrow = false, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, size: size } = props;
let colorScheme = (0, $ggIy9$useContext)((0, $9affbfa4e13b9582$export$374e0245597d19a3));
let { locale: locale, direction: direction } = (0, $ggIy9$useLocale)();
// TODO: should we pass through lang and dir props in RAC?
let popoverRef = (0, $ggIy9$useCallback)((el)=>{
if (el) {
el.lang = locale;
el.dir = direction;
}
}, [
locale,
direction
]);
// Memoed so it doesn't break ComboBox/Picker scrolling
let mergedRef = (0, $ggIy9$useMemo)(()=>(0, $ggIy9$mergeRefs)(popoverRef, ref), [
ref,
popoverRef
]);
// 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, $ggIy9$jsx)((0, $ggIy9$Popover), {
...props,
offset: (props.offset ?? 8) + (hideArrow ? 0 : 8),
ref: mergedRef,
style: {
...UNSAFE_style,
// Override default z-index from useOverlayPosition. We use isolation: isolate instead.
zIndex: undefined
},
className: (renderProps)=>UNSAFE_className + (0, $feb886035e0d4633$export$e618dc39ac9ad607)($88b746eba92c8d0d$var$popover({
...renderProps,
size: size,
isArrowShown: !hideArrow,
colorScheme: colorScheme,
isSubmenu: renderProps.trigger === 'SubmenuTrigger'
}), styles),
children: (0, $ggIy9$composeRenderProps)(props.children, (children, renderProps)=>/*#__PURE__*/ (0, $ggIy9$jsxs)((0, $ggIy9$Fragment), {
children: [
!hideArrow && /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$OverlayArrow), {
className: "",
children: /*#__PURE__*/ (0, $ggIy9$jsx)("svg", {
viewBox: "0 0 18 10",
className: $88b746eba92c8d0d$var$arrow(renderProps),
children: /*#__PURE__*/ (0, $ggIy9$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"
})
})
}),
/*#__PURE__*/ (0, $ggIy9$jsx)($88b746eba92c8d0d$export$60dfb2c3202ad27d.Provider, {
value: true,
children: children
})
]
}))
});
});
const $88b746eba92c8d0d$var$innerDivStyle = 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|_6|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];
}
if (props.padding === "none") rules += ' Td1';
else if (props.padding === "default") rules += ' Tt1';
if (props.padding === "none") rules += ' Qd1';
else if (props.padding === "default") rules += ' Qt1';
if (props.padding === "none") rules += ' Sd1';
else if (props.padding === "default") rules += ' St1';
if (props.padding === "none") rules += ' Rd1';
else if (props.padding === "default") rules += ' Rt1';
rules += ' _oa1';
rules += ' _Le1';
rules += ' oi1';
rules += ' ni1';
rules += ' ki1';
rules += ' ji1';
rules += ' _Na1';
rules += ' Pa1';
if (!position) rules += ' _Pc1';
if (!width) rules += ' Za1';
if (!maxWidth) rules += ' L40ub4c1';
if (!maxHeight) rules += ' K40ub4c1';
return rules;
};
const $88b746eba92c8d0d$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function Popover(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $88b746eba92c8d0d$export$9b9a0cd73afb7ca4);
let domRef = (0, $ggIy9$useDOMRef)(ref);
let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, styles: styles, padding: padding = 'default', ...otherProps } = props;
return /*#__PURE__*/ (0, $ggIy9$jsx)($88b746eba92c8d0d$export$fde1b04c590741a3, {
...otherProps,
ref: domRef,
children: (0, $ggIy9$composeRenderProps)(props.children, (children)=>/*#__PURE__*/ (0, $ggIy9$jsx)("div", {
style: UNSAFE_style,
className: (UNSAFE_className || '') + $88b746eba92c8d0d$var$innerDivStyle({
padding: padding
}, styles),
children: /*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$OverlayTriggerStateContext).Provider, {
value: null,
children: children
})
}))
});
});
export {$88b746eba92c8d0d$export$9b9a0cd73afb7ca4 as PopoverContext, $88b746eba92c8d0d$export$60dfb2c3202ad27d as InPopoverContext, $88b746eba92c8d0d$export$fde1b04c590741a3 as PopoverBase, $88b746eba92c8d0d$export$5b6b19405a83ff9d as Popover};
//# sourceMappingURL=Popover.mjs.map