panelui-native 0.51.1 → 0.54.0

package/src/components/menu/index.tsx

@@ -341,7 +341,7 @@ export interface MenuBackgroundProps extends ViewProps {
  * `overflow-hidden` on the panel is what keeps whatever that is inside the
  * corner radius.
  */
-function MenuBackground({ className, children, ...props }: MenuBackgroundProps) {
+export function MenuBackground({ className, children, ...props }: MenuBackgroundProps) {
   const { background } = menuVariants();
 
   return (
@@ -365,7 +365,7 @@ export interface MenuLabelProps extends ViewProps {
 }
 
 /** Non-interactive heading over a run of rows. */
-function MenuLabel({ className, inset, children, ...props }: MenuLabelProps) {
+export function MenuLabel({ className, inset, children, ...props }: MenuLabelProps) {
   const { label } = menuVariants({ inset });
 
   return (
@@ -384,7 +384,7 @@ export interface MenuSeparatorProps extends ViewProps {
 }
 
 /** Hairline between two runs of rows. */
-function MenuSeparator({ className, ...props }: MenuSeparatorProps) {
+export function MenuSeparator({ className, ...props }: MenuSeparatorProps) {
   const { separator } = menuVariants();
 
   return (
@@ -435,7 +435,7 @@ export interface MenuItemProps extends Omit<PressableProps, 'children' | 'style'
  * that a row which is disabled or which opts out via `closeOnSelect` behaves
  * the same either way.
  */
-function MenuItem({
+export function MenuItem({
   className,
   children,
   icon,
@@ -540,7 +540,7 @@ export interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'icon' | 'ins
  * deliberately so: a set of toggles is nearly always set more than one at a
  * time, and closing after each one turns three taps into six.
  */
-function MenuCheckboxItem({
+export function MenuCheckboxItem({
   checked = false,
   onCheckedChange,
   onSelect,
@@ -592,7 +592,7 @@ export interface MenuRadioGroupProps extends ViewProps {
 }
 
 /** A run of rows of which exactly one is chosen. */
-function MenuRadioGroup({ value, onValueChange, className, children, ...props }: MenuRadioGroupProps) {
+export function MenuRadioGroup({ value, onValueChange, className, children, ...props }: MenuRadioGroupProps) {
   const context = useMemo(
     () => ({ value, select: (next: string) => onValueChange?.(next) }),
     [value, onValueChange]
@@ -616,7 +616,7 @@ export interface MenuRadioItemProps extends Omit<MenuItemProps, 'icon' | 'inset'
 }
 
 /** One option inside a `Menu.RadioGroup`. */
-function MenuRadioItem({
+export function MenuRadioItem({
   value,
   indicator = 'check',
   onSelect,
@@ -694,7 +694,7 @@ export interface MenuSubProps {
 }
 
 /** Groups a `Menu.SubTrigger` with the rows it reveals. */
-function MenuSub({ children, defaultOpen = false, open, onOpenChange }: MenuSubProps) {
+export function MenuSub({ children, defaultOpen = false, open, onOpenChange }: MenuSubProps) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = open !== undefined;
   const resolved = isControlled ? open : internalOpen;
@@ -723,7 +723,7 @@ export interface MenuSubTriggerProps
  * point down once open, so the row states which way its rows will appear
  * rather than only that it has some.
  */
-function MenuSubTrigger({ className, children, icon, onSelect, ...props }: MenuSubTriggerProps) {
+export function MenuSubTrigger({ className, children, icon, onSelect, ...props }: MenuSubTriggerProps) {
   const { open, toggle } = useMenuSub('Menu.SubTrigger');
   const sign = useDirectionSign();
   const direction = useDirection();
@@ -790,7 +790,7 @@ export interface MenuSubContentProps extends ViewProps {
  * would otherwise report the animated height back, and the panel would settle
  * at whatever it happened to measure on the first frame.
  */
-function MenuSubContent({ className, children, ...props }: MenuSubContentProps) {
+export function MenuSubContent({ className, children, ...props }: MenuSubContentProps) {
   const { open } = useMenuSub('Menu.SubContent');
   const reducedMotion = useReducedMotion();
   const [height, setHeight] = useState(0);
@@ -841,6 +841,13 @@ MenuSub.displayName = 'Menu.Sub';
 MenuSubTrigger.displayName = 'Menu.SubTrigger';
 MenuSubContent.displayName = 'Menu.SubContent';
 
+/*
+ * The parts above are exported individually as well as hung off `Menu`, and the
+ * reason is `ContextMenu`: it presents these same components as its own rows, so
+ * the emitted type declarations for it have to be able to name them. `Menu` is
+ * still the only thing the package exports, so nothing about how these are
+ * reached from outside has changed.
+ */
 export const Menu = Object.assign(MenuRoot, {
   Trigger: MenuTrigger,
   Content: MenuContent,

package/src/components/popover/index.tsx

@@ -72,17 +72,37 @@ const DEFAULT_OFFSET = 8;
 const SCREEN_MARGIN = 12;
 /** Side of the arrow square before it is rotated 45°. */
 const ARROW_SIZE = 12;
+/**
+ * Headroom the sheet presentation leaves for the close button.
+ *
+ * That button floats over the sheet's top-end corner rather than sitting in the
+ * flow, so nothing below it is pushed out of its way. The sheet's own padding
+ * and grabber put the first child 24 points down; the button's lower edge is at
+ * 44. This is the difference, plus a little air — enough that a panel's first
+ * row clears the button instead of being drawn under it.
+ */
+const SHEET_CLOSE_CLEARANCE = 24;
 
 export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
 export type PopoverAlign = 'start' | 'center' | 'end';
 
-interface TriggerRect {
+/**
+ * The rectangle the panel is placed against, in window coordinates.
+ *
+ * Normally the trigger's own bounds. A zero-sized rect is meaningful too: it
+ * anchors the panel to a single point, which is what a menu opened by a long
+ * press on arbitrary content needs — there the interesting position is where
+ * the finger landed, not the bounds of whatever it landed on.
+ */
+export interface PopoverAnchorRect {
   x: number;
   y: number;
   width: number;
   height: number;
 }
 
+type TriggerRect = PopoverAnchorRect;
+
 interface PopoverContextValue {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -110,6 +130,38 @@ function usePopover(component: string): PopoverContextValue {
   return context;
 }
 
+export interface PopoverAnchorControls {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  /**
+   * Place the panel against an explicit rect rather than against a measured
+   * trigger. Pass a zero-sized rect to anchor it to a point.
+   */
+  anchorTo: (rect: PopoverAnchorRect) => void;
+}
+
+/**
+ * For a trigger that opens the panel on something other than a plain press, or
+ * anchors it to something other than its own bounds.
+ *
+ * `Popover.Trigger` covers the ordinary case — press the thing, measure the
+ * thing, open next to it. A component built on this one may need neither half
+ * of that: a context menu opens on a long press and belongs at the point the
+ * finger landed. Rather than have it own a second copy of the placing,
+ * flipping and edge-clamping this file already does, it borrows them by
+ * setting the anchor itself.
+ *
+ * Only useful inside a `Popover`, which is the same rule every other part here
+ * follows.
+ */
+export function usePopoverAnchor(component: string): PopoverAnchorControls {
+  const { open, setOpen, setTrigger } = usePopover(component);
+  return useMemo(
+    () => ({ open, setOpen, anchorTo: setTrigger }),
+    [open, setOpen, setTrigger]
+  );
+}
+
 export interface PopoverProps {
   children: ReactNode;
   /** Controlled open state. */
@@ -271,6 +323,18 @@ export interface PopoverContentProps extends ViewProps {
    * not, so it is safe to pass either way.
    */
   blur?: boolean;
+  /**
+   * Dim the screen behind the panel.
+   *
+   * Off by default: a popover is a panel *beside* something, and dimming the
+   * page says the thing behind it has stopped being available — which is a
+   * dialog's claim, not a popover's. Worth turning on when the panel is the
+   * only thing that matters while it is up, which is what a menu opened on the
+   * content itself is. Ignored under `blur`, which draws its own dim.
+   */
+  scrim?: boolean;
+  /** The dim's classes, when `scrim` is set. */
+  scrimClassName?: string;
   children?: ReactNode;
 }
 
@@ -288,6 +352,8 @@ function PopoverContent({
   background,
   dismissible = true,
   blur = false,
+  scrim = false,
+  scrimClassName = 'bg-black/30',
   children,
   onLayout: onLayoutProp,
   style,
@@ -342,6 +408,23 @@ function PopoverContent({
       ? Math.min(Math.max(requestedWidth, minWidth), available)
       : requestedWidth;
 
+  /*
+   * The floor also has to reach a panel sized to its own contents, which is the
+   * case it matters most in — a panel with a width already knows how wide it is.
+   *
+   * Folding it into `width` would be wrong: that pins the panel open at exactly
+   * the floor and stops it growing for content that needs more. It is a real
+   * minimum instead, left off when there is nothing to enforce so a content-fit
+   * panel keeps shrinking to fit.
+   *
+   * Without this a `content-fit` panel takes its width from whatever inside it
+   * is *not* flexible. A row of a flexible label and a fixed glyph collapses to
+   * the glyph, and the panel comes up as a strip of icons with the words
+   * squeezed out of it.
+   */
+  const resolvedMinWidth =
+    minWidth === undefined ? undefined : Math.min(minWidth, available);
+
   /*
    * The cap is what keeps a tall panel reachable. `place` clamps the panel
    * inside the bounds, but a panel taller than the bounds cannot be clamped
@@ -434,9 +517,7 @@ function PopoverContent({
                 width === 'full' || width === 'trigger' ? { width: '100%' } : null,
                 typeof width === 'number' ? { width } : null,
                 minWidth === undefined ? null : { minWidth },
-                // Clear of the close button, which floats over the top-end
-                // corner of the sheet rather than sitting in the flow.
-                { paddingTop: 8 },
+                { paddingTop: SHEET_CLOSE_CLEARANCE },
                 style,
               ]}
             >
@@ -458,8 +539,14 @@ function PopoverContent({
       <PopoverContext.Provider value={context}>
         <View className="absolute inset-0">
           {/* A popover does not dim the screen by default — the backdrop is
-              there only to catch the outside tap. `blur` opts into a frost. */}
-          {blur ? <Scrim blur intensity={20} dimClassName="bg-black/30" /> : null}
+              there only to catch the outside tap. `blur` opts into a frost,
+              `scrim` into a plain dim; the frost already draws one of its own,
+              so asking for both is not two dims. */}
+          {blur ? (
+            <Scrim blur intensity={20} dimClassName={scrimClassName} />
+          ) : scrim ? (
+            <Scrim dimClassName={scrimClassName} />
+          ) : null}
           <Pressable
             accessibilityLabel="Close"
             className="absolute inset-0"
@@ -486,6 +573,7 @@ function PopoverContent({
               maxWidth: bounds.right - bounds.left,
               maxHeight: resolvedMaxHeight,
               width: resolvedWidth,
+              minWidth: resolvedMinWidth,
             }}
           >
             <Animated.View