@react-spectrum/s2
Version:
Spectrum 2 UI components in React
272 lines (263 loc) • 11.2 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 {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, Dialog as $ggIy9$Dialog, OverlayTriggerStateContext as $ggIy9$OverlayTriggerStateContext} from "react-aria-components";
import {forwardRef as $ggIy9$forwardRef, useContext as $ggIy9$useContext, useCallback as $ggIy9$useCallback} from "react";
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|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 $88b746eba92c8d0d$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 $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 domRef = (0, $ggIy9$useDOMRef)(ref);
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)=>{
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, $ggIy9$jsx)((0, $ggIy9$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, $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), {
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"
})
})
}),
children
]
}))
});
});
const $88b746eba92c8d0d$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 $88b746eba92c8d0d$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $ggIy9$forwardRef)(function Popover(props, ref) {
let domRef = (0, $ggIy9$useDOMRef)(ref);
const { triggerRef: triggerRef, isOpen: isOpen, onOpenChange: onOpenChange, ...otherProps } = props;
return /*#__PURE__*/ (0, $ggIy9$jsx)($88b746eba92c8d0d$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, $ggIy9$jsx)((0, $ggIy9$Dialog), {
...otherProps,
ref: domRef,
style: props.UNSAFE_style,
className: (props.UNSAFE_className || '') + $88b746eba92c8d0d$var$dialogStyle(null, props.styles),
children: (0, $ggIy9$composeRenderProps)(props.children, (children)=>// Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
/*#__PURE__*/ (0, $ggIy9$jsx)((0, $ggIy9$OverlayTriggerStateContext).Provider, {
value: null,
children: children
}))
})
});
});
export {$88b746eba92c8d0d$export$fde1b04c590741a3 as PopoverBase, $88b746eba92c8d0d$export$5b6b19405a83ff9d as Popover};
//# sourceMappingURL=Popover.mjs.map