@planningcenter/tapestry 4.4.0 → 4.4.1-rc.1

package/dist/components/DataTable/ViewSettingsToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSettingsToggle.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ViewSettingsToggle.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAExD,MAAM,WAAW,uBAAuB;IACtC,iEAAiE;IACjE,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,wBAAwB,EAAE,CAAC,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAChE,kBAAkB,EAAE,MAAM,EAAE,CAAA;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,wBAAwB,EACxB,kBAAkB,GACnB,EAAE,uBAAuB,qBAuCzB;yBA3Ce,kBAAkB"}
+{"version":3,"file":"ViewSettingsToggle.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/ViewSettingsToggle.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAExD,MAAM,WAAW,uBAAuB;IACtC,iEAAiE;IACjE,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,wBAAwB,EAAE,CAAC,kBAAkB,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAChE,kBAAkB,EAAE,MAAM,EAAE,CAAA;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,wBAAwB,EACxB,kBAAkB,GACnB,EAAE,uBAAuB,qBAyCzB;yBA7Ce,kBAAkB"}

package/dist/components/DataTable/ViewSettingsToggle.js

@@ -6,9 +6,9 @@ import { IconButton } from '../button/IconButton.js';
 import '../button/LoadingButton.js';
 import '../button/PageHeaderActionsDropdownButton.js';
 import { FilterableListBox, FilterableListBoxItem } from '../internal/filterable-list-box/FilterableListBox.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../popover/Popover.js';
 import Icon from '../../utilities/Icon.js';
 import React__default from 'react';
-import { DialogTrigger, Pressable, Popover, Dialog } from 'react-aria-components/Popover';
 import { Tooltip } from '../internal/tooltip/Tooltip.js';
 
 /**
@@ -19,12 +19,11 @@ import { Tooltip } from '../internal/tooltip/Tooltip.js';
  */
 function ViewSettingsToggle({ columns, onColumnVisibilityChange, visibleColumnNames, }) {
     return (React__default.createElement("div", { className: "tds-data-table-view-settings-toggle" },
-        React__default.createElement(DialogTrigger, null,
+        React__default.createElement(Popover, null,
             React__default.createElement(Tooltip, { content: "View settings", placement: "bottom end" },
-                React__default.createElement(Pressable, null,
+                React__default.createElement(PopoverTrigger, null,
                     React__default.createElement(IconButton, { "aria-label": "View settings", className: "tds-data-table-popover-trigger", icon: React__default.createElement(Icon, { "aria-hidden": true, symbol: "general#faders" }) }))),
-            React__default.createElement(Popover, { className: "tds-data-table-popover", placement: "bottom end" },
-                React__default.createElement(Dialog, null, columns.length > 0 && (React__default.createElement(FilterableListBox, { hideLabel: true, items: columns, label: "Column visibility", onSelectionChange: (keys) => onColumnVisibilityChange(keys), placeholder: "Search columns", selectedKeys: visibleColumnNames, selectionMode: "multiple" }, (column) => (React__default.createElement(FilterableListBoxItem, { id: column.name }, column.headerLabel)))))))));
+            React__default.createElement(PopoverContent, { className: "tds-data-table-popover", modal: false, placement: "bottom end" }, columns.length > 0 && (React__default.createElement(FilterableListBox, { hideLabel: true, items: columns, label: "Column visibility", onSelectionChange: (keys) => onColumnVisibilityChange(keys), placeholder: "Search columns", selectedKeys: visibleColumnNames, selectionMode: "multiple" }, (column) => (React__default.createElement(FilterableListBoxItem, { id: column.name }, column.headerLabel))))))));
 }
 ViewSettingsToggle.displayName = "ViewSettingsToggle";
 

package/dist/components/DataTable/ViewSettingsToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSettingsToggle.js","sources":["../../../src/components/DataTable/ViewSettingsToggle.tsx"],"sourcesContent":["import { IconButton } from \"@components/button\"\nimport {\n  FilterableListBox,\n  FilterableListBoxItem,\n} from \"@components/internal/filterable-list-box\"\nimport Icon from \"@utilities/Icon\"\nimport React from \"react\"\nimport {\n  Dialog,\n  DialogTrigger,\n  Popover,\n  Pressable,\n} from \"react-aria-components/Popover\"\n\nimport { Tooltip } from \"../internal/tooltip/Tooltip\"\nimport type { DataTableColumn } from \"./DataTableColumn\"\n\nexport interface ViewSettingsToggleProps {\n  /** The columns opted into visibility toggling via `hideable`. */\n  columns: DataTableColumn[]\n  onColumnVisibilityChange: (visibleColumnNames: string[]) => void\n  visibleColumnNames: string[]\n}\n\n/**\n * A trigger + popover for table view settings. Today it only holds column\n * visibility (via `FilterableListBox`), but the panel is meant to grow to\n * include other view-related settings (e.g. a Table/Card display toggle, a\n * Compact View switch) as siblings inside the same dialog.\n */\nexport function ViewSettingsToggle({\n  columns,\n  onColumnVisibilityChange,\n  visibleColumnNames,\n}: ViewSettingsToggleProps) {\n  return (\n    <div className=\"tds-data-table-view-settings-toggle\">\n      <DialogTrigger>\n        <Tooltip content=\"View settings\" placement=\"bottom end\">\n          <Pressable>\n            <IconButton\n              aria-label=\"View settings\"\n              className=\"tds-data-table-popover-trigger\"\n              icon={<Icon aria-hidden symbol=\"general#faders\" />}\n            />\n          </Pressable>\n        </Tooltip>\n        <Popover className=\"tds-data-table-popover\" placement=\"bottom end\">\n          <Dialog>\n            {columns.length > 0 && (\n              <FilterableListBox\n                hideLabel\n                items={columns}\n                label=\"Column visibility\"\n                onSelectionChange={(keys) =>\n                  onColumnVisibilityChange(keys as string[])\n                }\n                placeholder=\"Search columns\"\n                selectedKeys={visibleColumnNames}\n                selectionMode=\"multiple\"\n              >\n                {(column) => (\n                  <FilterableListBoxItem id={column.name}>\n                    {column.headerLabel}\n                  </FilterableListBoxItem>\n                )}\n              </FilterableListBox>\n            )}\n          </Dialog>\n        </Popover>\n      </DialogTrigger>\n    </div>\n  )\n}\n\nViewSettingsToggle.displayName = \"ViewSettingsToggle\"\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAwBA;;;;;AAKG;AACG,SAAU,kBAAkB,CAAC,EACjC,OAAO,EACP,wBAAwB,EACxB,kBAAkB,GACM,EAAA;AACxB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA;AAClD,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;YACZA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAC,YAAY,EAAA;AACrD,gBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA;AACR,oBAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,eAAe,EAC1B,SAAS,EAAC,gCAAgC,EAC1C,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAClD,CACQ,CACJ;YACVA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,SAAS,EAAC,wBAAwB,EAAC,SAAS,EAAC,YAAY,EAAA;AAChE,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EACJ,OAAO,CAAC,MAAM,GAAG,CAAC,KACjBA,6BAAC,iBAAiB,EAAA,EAChB,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,OAAO,EACd,KAAK,EAAC,mBAAmB,EACzB,iBAAiB,EAAE,CAAC,IAAI,KACtB,wBAAwB,CAAC,IAAgB,CAAC,EAE5C,WAAW,EAAC,gBAAgB,EAC5B,YAAY,EAAE,kBAAkB,EAChC,aAAa,EAAC,UAAU,EAAA,EAEvB,CAAC,MAAM,MACNA,6BAAC,qBAAqB,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,IAAI,EAAA,EACnC,MAAM,CAAC,WAAW,CACG,CACzB,CACiB,CACrB,CACM,CACD,CACI,CACZ;AAEV;AAEA,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"ViewSettingsToggle.js","sources":["../../../src/components/DataTable/ViewSettingsToggle.tsx"],"sourcesContent":["import { IconButton } from \"@components/button\"\nimport {\n  FilterableListBox,\n  FilterableListBoxItem,\n} from \"@components/internal/filterable-list-box\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@components/popover\"\nimport Icon from \"@utilities/Icon\"\nimport React from \"react\"\n\nimport { Tooltip } from \"../internal/tooltip/Tooltip\"\nimport type { DataTableColumn } from \"./DataTableColumn\"\n\nexport interface ViewSettingsToggleProps {\n  /** The columns opted into visibility toggling via `hideable`. */\n  columns: DataTableColumn[]\n  onColumnVisibilityChange: (visibleColumnNames: string[]) => void\n  visibleColumnNames: string[]\n}\n\n/**\n * A trigger + popover for table view settings. Today it only holds column\n * visibility (via `FilterableListBox`), but the panel is meant to grow to\n * include other view-related settings (e.g. a Table/Card display toggle, a\n * Compact View switch) as siblings inside the same dialog.\n */\nexport function ViewSettingsToggle({\n  columns,\n  onColumnVisibilityChange,\n  visibleColumnNames,\n}: ViewSettingsToggleProps) {\n  return (\n    <div className=\"tds-data-table-view-settings-toggle\">\n      <Popover>\n        <Tooltip content=\"View settings\" placement=\"bottom end\">\n          <PopoverTrigger>\n            <IconButton\n              aria-label=\"View settings\"\n              className=\"tds-data-table-popover-trigger\"\n              icon={<Icon aria-hidden symbol=\"general#faders\" />}\n            />\n          </PopoverTrigger>\n        </Tooltip>\n        <PopoverContent\n          className=\"tds-data-table-popover\"\n          modal={false}\n          placement=\"bottom end\"\n        >\n          {columns.length > 0 && (\n            <FilterableListBox\n              hideLabel\n              items={columns}\n              label=\"Column visibility\"\n              onSelectionChange={(keys) =>\n                onColumnVisibilityChange(keys as string[])\n              }\n              placeholder=\"Search columns\"\n              selectedKeys={visibleColumnNames}\n              selectionMode=\"multiple\"\n            >\n              {(column) => (\n                <FilterableListBoxItem id={column.name}>\n                  {column.headerLabel}\n                </FilterableListBoxItem>\n              )}\n            </FilterableListBox>\n          )}\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n\nViewSettingsToggle.displayName = \"ViewSettingsToggle\"\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAmBA;;;;;AAKG;AACG,SAAU,kBAAkB,CAAC,EACjC,OAAO,EACP,wBAAwB,EACxB,kBAAkB,GACM,EAAA;AACxB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA;AAClD,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;YACNA,cAAA,CAAA,aAAA,CAAC,OAAO,IAAC,OAAO,EAAC,eAAe,EAAC,SAAS,EAAC,YAAY,EAAA;AACrD,gBAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,oBAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,YAAA,EACE,eAAe,EAC1B,SAAS,EAAC,gCAAgC,EAC1C,IAAI,EAAEA,cAAA,CAAA,aAAA,CAAC,IAAI,yBAAa,MAAM,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAClD,CACa,CACT;AACV,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,YAAY,EAAA,EAErB,OAAO,CAAC,MAAM,GAAG,CAAC,KACjBA,cAAA,CAAA,aAAA,CAAC,iBAAiB,EAAA,EAChB,SAAS,QACT,KAAK,EAAE,OAAO,EACd,KAAK,EAAC,mBAAmB,EACzB,iBAAiB,EAAE,CAAC,IAAI,KACtB,wBAAwB,CAAC,IAAgB,CAAC,EAE5C,WAAW,EAAC,gBAAgB,EAC5B,YAAY,EAAE,kBAAkB,EAChC,aAAa,EAAC,UAAU,EAAA,EAEvB,CAAC,MAAM,MACNA,cAAA,CAAA,aAAA,CAAC,qBAAqB,IAAC,EAAE,EAAE,MAAM,CAAC,IAAI,IACnC,MAAM,CAAC,WAAW,CACG,CACzB,CACiB,CACrB,CACc,CACT,CACN;AAEV;AAEA,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,93 @@
+import "./index.css";
+import React, { type ReactElement, type ReactNode } from "react";
+import type { PopoverProps as AriaPopoverProps } from "react-aria-components/Popover";
+export interface PopoverProps {
+    /** A `<PopoverTrigger>` followed by a `<PopoverContent>`. */
+    children: ReactNode;
+    /** Initial open state for the uncontrolled case. Useful for stories and tests. */
+    defaultOpen?: boolean;
+    /**
+     * Fires whenever the surface opens or closes — trigger press, Escape,
+     * outside press, or `close()`. Required when `open` is set.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled open state. Renamed from React Aria's `isOpen`. Omit for uncontrolled. */
+    open?: boolean;
+}
+export type PopoverElementProps = PopoverProps;
+/**
+ * A generic popover surface anchored to a trigger button. Unlike `Dropdown`
+ * (a semantic `role="menu"` action list), `Popover` renders arbitrary content
+ * — a search field, a form, a list, plain text.
+ *
+ * **Rule of thumb:** a flat list of actions or links → `Dropdown`. Anything
+ * else anchored to a button → `Popover`. Owns the screen until resolved →
+ * `Modal`.
+ *
+ * @component
+ * @see {@link https://app.notion.com/p/planningcenter/RFC-Tapestry-Popover-3baabbce69a2802e8fe8e65a7f72821c | RFC}
+ */
+export declare function Popover({ children, defaultOpen, onOpenChange, open, }: PopoverElementProps): React.JSX.Element;
+export interface PopoverTriggerProps {
+    /**
+     * Exactly one Tapestry button element — `Button`, `IconButton`,
+     * `DropdownButton`, `DropdownIconButton`, `ActionsDropdownIconButton`, or
+     * `PageHeaderActionsDropdownButton`. Receives `aria-expanded`,
+     * `aria-controls`, `id`, and press wiring via `Pressable` — the same RAC
+     * mechanism `Dropdown`'s trigger already uses. Must render a real `<button>`.
+     */
+    children: ReactElement;
+}
+export type PopoverTriggerElementProps = PopoverTriggerProps;
+/**
+ * Wraps a single Tapestry button and bridges it to React Aria's
+ * `DialogTrigger` via `<Pressable>`.
+ *
+ * @component
+ */
+export declare function PopoverTrigger({ children }: PopoverTriggerElementProps): React.JSX.Element;
+/**
+ * Returns the enclosing `<PopoverContent>`'s `close` function. Call it from
+ * any descendant to close the surface — e.g. a plain `<Button onClick={close}>`.
+ */
+export declare function usePopoverClose(): () => void;
+export interface PopoverContentProps {
+    /**
+     * Accessible name for the surface. Defaults to the trigger's accessible
+     * name (React Aria points `aria-labelledby` at the trigger's id). Set this
+     * when the surface needs a different name than the trigger.
+     */
+    "aria-label"?: string;
+    /** Arbitrary content. */
+    children: ReactNode;
+    /** Appended to `tds-popover` on the positioned surface. */
+    className?: string;
+    /**
+     * Defaults to `true`. When `true`, the surface contains focus, hides
+     * outside content from assistive tech, and blocks page scroll while open —
+     * the right default for most popovers. Set to `false` for lighter-weight
+     * dismissal behavior (maps to React Aria's `isNonModal`, whose own doc
+     * comment scopes it to "components such as combobox" — this is why it
+     * isn't the default). `<Dialog>` always renders regardless of this prop;
+     * `modal` only toggles containment, not whether a dialog role exists.
+     *
+     * `modal={false}` still blocks page scroll while open — React Aria's own
+     * scroll-close behavior for non-modal popovers can't be disabled, so
+     * scrolling is locked instead, the same way `Dropdown`'s menu does.
+     */
+    modal?: boolean;
+    /**
+     * Position relative to the trigger, in React Aria's space-separated form.
+     * Defaults to `'bottom start'`. Flips automatically when there isn't room.
+     */
+    placement?: AriaPopoverProps["placement"];
+}
+export type PopoverContentElementProps = PopoverContentProps;
+/**
+ * The popover surface for a `<Popover>`. Wraps React Aria's `<Popover>` and
+ * `<Dialog>` and contains arbitrary content.
+ *
+ * @component
+ */
+export declare function PopoverContent({ "aria-label": ariaLabel, children, className, modal, placement, }: PopoverContentElementProps): React.JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/components/popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AASrF,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAA;IACnB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,wFAAwF;IACxF,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAA;AAE9C;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,GACL,EAAE,mBAAmB,qBAUrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAA;AAI5D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,0BAA0B,qBAEtE;AAID;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,IAAI,CAE5C;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yBAAyB;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C;AAED,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAA;AAE5D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,KAAY,EACZ,SAA0B,GAC3B,EAAE,0BAA0B,qBAsC5B"}

package/dist/components/popover/Popover.js

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import React__default, { createContext, useRef, useContext, useCallback } from 'react';
+import { useInteractOutside, usePreventScroll, FocusScope } from 'react-aria';
+import { OverlayTriggerStateContext } from 'react-aria-components/Dialog';
+import { DialogTrigger, PopoverContext, Popover as Popover$1, Dialog, Pressable } from 'react-aria-components/Popover';
+
+/**
+ * A generic popover surface anchored to a trigger button. Unlike `Dropdown`
+ * (a semantic `role="menu"` action list), `Popover` renders arbitrary content
+ * — a search field, a form, a list, plain text.
+ *
+ * **Rule of thumb:** a flat list of actions or links → `Dropdown`. Anything
+ * else anchored to a button → `Popover`. Owns the screen until resolved →
+ * `Modal`.
+ *
+ * @component
+ * @see {@link https://app.notion.com/p/planningcenter/RFC-Tapestry-Popover-3baabbce69a2802e8fe8e65a7f72821c | RFC}
+ */
+function Popover({ children, defaultOpen, onOpenChange, open, }) {
+    return (React__default.createElement(DialogTrigger, { defaultOpen: defaultOpen, isOpen: open, onOpenChange: onOpenChange }, children));
+}
+/**
+ * Wraps a single Tapestry button and bridges it to React Aria's
+ * `DialogTrigger` via `<Pressable>`.
+ *
+ * @component
+ */
+function PopoverTrigger({ children }) {
+    return React__default.createElement(Pressable, null, children);
+}
+const PopoverCloseContext = createContext(() => { });
+/**
+ * Returns the enclosing `<PopoverContent>`'s `close` function. Call it from
+ * any descendant to close the surface — e.g. a plain `<Button onClick={close}>`.
+ */
+function usePopoverClose() {
+    return useContext(PopoverCloseContext);
+}
+/**
+ * The popover surface for a `<Popover>`. Wraps React Aria's `<Popover>` and
+ * `<Dialog>` and contains arbitrary content.
+ *
+ * @component
+ */
+function PopoverContent({ "aria-label": ariaLabel, children, className, modal = true, placement = "bottom start", }) {
+    const popoverRef = useRef(null);
+    const state = useContext(OverlayTriggerStateContext);
+    const close = useCallback(() => state?.close(), [state]);
+    const popoverContext = useContext(PopoverContext);
+    const triggerRef = popoverContext && "triggerRef" in popoverContext
+        ? popoverContext.triggerRef
+        : undefined;
+    useInteractOutside({
+        isDisabled: modal || !state?.isOpen,
+        onInteractOutside: (event) => {
+            if (triggerRef?.current?.contains(event.target))
+                return;
+            close();
+        },
+        ref: popoverRef,
+    });
+    usePreventScroll({ isDisabled: modal || !state?.isOpen });
+    return (React__default.createElement(Popover$1, { className: classNames("tds-popover", className), isNonModal: !modal, placement: placement, ref: popoverRef, shouldCloseOnInteractOutside: modal ? undefined : () => false },
+        React__default.createElement(FocusScope, { contain: !modal },
+            React__default.createElement(Dialog, { "aria-label": ariaLabel, className: "tds-popover-content" },
+                React__default.createElement(PopoverCloseContext.Provider, { value: close }, children)))));
+}
+
+export { Popover, PopoverContent, PopoverTrigger, usePopoverClose };
+//# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, {\n  type ComponentProps,\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useRef,\n} from \"react\"\nimport { FocusScope, useInteractOutside, usePreventScroll } from \"react-aria\"\nimport { OverlayTriggerStateContext } from \"react-aria-components/Dialog\"\nimport type { PopoverProps as AriaPopoverProps } from \"react-aria-components/Popover\"\nimport {\n  Dialog,\n  DialogTrigger,\n  Popover as AriaPopover,\n  PopoverContext as AriaPopoverContext,\n  Pressable,\n} from \"react-aria-components/Popover\"\n\nexport interface PopoverProps {\n  /** A `<PopoverTrigger>` followed by a `<PopoverContent>`. */\n  children: ReactNode\n  /** Initial open state for the uncontrolled case. Useful for stories and tests. */\n  defaultOpen?: boolean\n  /**\n   * Fires whenever the surface opens or closes — trigger press, Escape,\n   * outside press, or `close()`. Required when `open` is set.\n   */\n  onOpenChange?: (open: boolean) => void\n  /** Controlled open state. Renamed from React Aria's `isOpen`. Omit for uncontrolled. */\n  open?: boolean\n}\n\nexport type PopoverElementProps = PopoverProps\n\n/**\n * A generic popover surface anchored to a trigger button. Unlike `Dropdown`\n * (a semantic `role=\"menu\"` action list), `Popover` renders arbitrary content\n * — a search field, a form, a list, plain text.\n *\n * **Rule of thumb:** a flat list of actions or links → `Dropdown`. Anything\n * else anchored to a button → `Popover`. Owns the screen until resolved →\n * `Modal`.\n *\n * @component\n * @see {@link https://app.notion.com/p/planningcenter/RFC-Tapestry-Popover-3baabbce69a2802e8fe8e65a7f72821c | RFC}\n */\nexport function Popover({\n  children,\n  defaultOpen,\n  onOpenChange,\n  open,\n}: PopoverElementProps) {\n  return (\n    <DialogTrigger\n      defaultOpen={defaultOpen}\n      isOpen={open}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </DialogTrigger>\n  )\n}\n\nexport interface PopoverTriggerProps {\n  /**\n   * Exactly one Tapestry button element — `Button`, `IconButton`,\n   * `DropdownButton`, `DropdownIconButton`, `ActionsDropdownIconButton`, or\n   * `PageHeaderActionsDropdownButton`. Receives `aria-expanded`,\n   * `aria-controls`, `id`, and press wiring via `Pressable` — the same RAC\n   * mechanism `Dropdown`'s trigger already uses. Must render a real `<button>`.\n   */\n  children: ReactElement\n}\n\nexport type PopoverTriggerElementProps = PopoverTriggerProps\n\ntype PressableChild = ComponentProps<typeof Pressable>[\"children\"]\n\n/**\n * Wraps a single Tapestry button and bridges it to React Aria's\n * `DialogTrigger` via `<Pressable>`.\n *\n * @component\n */\nexport function PopoverTrigger({ children }: PopoverTriggerElementProps) {\n  return <Pressable>{children as PressableChild}</Pressable>\n}\n\nconst PopoverCloseContext = createContext<() => void>(() => {})\n\n/**\n * Returns the enclosing `<PopoverContent>`'s `close` function. Call it from\n * any descendant to close the surface — e.g. a plain `<Button onClick={close}>`.\n */\nexport function usePopoverClose(): () => void {\n  return useContext(PopoverCloseContext)\n}\n\nexport interface PopoverContentProps {\n  /**\n   * Accessible name for the surface. Defaults to the trigger's accessible\n   * name (React Aria points `aria-labelledby` at the trigger's id). Set this\n   * when the surface needs a different name than the trigger.\n   */\n  \"aria-label\"?: string\n  /** Arbitrary content. */\n  children: ReactNode\n  /** Appended to `tds-popover` on the positioned surface. */\n  className?: string\n  /**\n   * Defaults to `true`. When `true`, the surface contains focus, hides\n   * outside content from assistive tech, and blocks page scroll while open —\n   * the right default for most popovers. Set to `false` for lighter-weight\n   * dismissal behavior (maps to React Aria's `isNonModal`, whose own doc\n   * comment scopes it to \"components such as combobox\" — this is why it\n   * isn't the default). `<Dialog>` always renders regardless of this prop;\n   * `modal` only toggles containment, not whether a dialog role exists.\n   *\n   * `modal={false}` still blocks page scroll while open — React Aria's own\n   * scroll-close behavior for non-modal popovers can't be disabled, so\n   * scrolling is locked instead, the same way `Dropdown`'s menu does.\n   */\n  modal?: boolean\n  /**\n   * Position relative to the trigger, in React Aria's space-separated form.\n   * Defaults to `'bottom start'`. Flips automatically when there isn't room.\n   */\n  placement?: AriaPopoverProps[\"placement\"]\n}\n\nexport type PopoverContentElementProps = PopoverContentProps\n\n/**\n * The popover surface for a `<Popover>`. Wraps React Aria's `<Popover>` and\n * `<Dialog>` and contains arbitrary content.\n *\n * @component\n */\nexport function PopoverContent({\n  \"aria-label\": ariaLabel,\n  children,\n  className,\n  modal = true,\n  placement = \"bottom start\",\n}: PopoverContentElementProps) {\n  const popoverRef = useRef<HTMLElement>(null)\n  const state = useContext(OverlayTriggerStateContext)\n  const close = useCallback(() => state?.close(), [state])\n\n  const popoverContext = useContext(AriaPopoverContext)\n  const triggerRef =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined\n\n  useInteractOutside({\n    isDisabled: modal || !state?.isOpen,\n    onInteractOutside: (event) => {\n      if (triggerRef?.current?.contains(event.target as Node)) return\n      close()\n    },\n    ref: popoverRef,\n  })\n  usePreventScroll({ isDisabled: modal || !state?.isOpen })\n\n  return (\n    <AriaPopover\n      className={classNames(\"tds-popover\", className)}\n      isNonModal={!modal}\n      placement={placement}\n      ref={popoverRef}\n      shouldCloseOnInteractOutside={modal ? undefined : () => false}\n    >\n      <FocusScope contain={!modal}>\n        <Dialog aria-label={ariaLabel} className=\"tds-popover-content\">\n          <PopoverCloseContext.Provider value={close}>\n            {children}\n          </PopoverCloseContext.Provider>\n        </Dialog>\n      </FocusScope>\n    </AriaPopover>\n  )\n}\n"],"names":["React","AriaPopoverContext","AriaPopover"],"mappings":";;;;;;AAuCA;;;;;;;;;;;AAWG;AACG,SAAU,OAAO,CAAC,EACtB,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,GACgB,EAAA;AACpB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,IACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,YAAY,IAEzB,QAAQ,CACK;AAEpB;AAiBA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,EAAE,QAAQ,EAA8B,EAAA;AACrE,IAAA,OAAOA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,EAAE,QAA0B,CAAa;AAC5D;AAEA,MAAM,mBAAmB,GAAG,aAAa,CAAa,MAAK,EAAE,CAAC,CAAC;AAE/D;;;AAGG;SACa,eAAe,GAAA;AAC7B,IAAA,OAAO,UAAU,CAAC,mBAAmB,CAAC;AACxC;AAoCA;;;;;AAKG;SACa,cAAc,CAAC,EAC7B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,IAAI,EACZ,SAAS,GAAG,cAAc,GACC,EAAA;AAC3B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC;AAC5C,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,0BAA0B,CAAC;AACpD,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AAExD,IAAA,MAAM,cAAc,GAAG,UAAU,CAACC,cAAkB,CAAC;AACrD,IAAA,MAAM,UAAU,GACd,cAAc,IAAI,YAAY,IAAI;UAC9B,cAAc,CAAC;UACf,SAAS;AAEf,IAAA,kBAAkB,CAAC;AACjB,QAAA,UAAU,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,MAAM;AACnC,QAAA,iBAAiB,EAAE,CAAC,KAAK,KAAI;YAC3B,IAAI,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBAAE;AACzD,YAAA,KAAK,EAAE;QACT,CAAC;AACD,QAAA,GAAG,EAAE,UAAU;AAChB,KAAA,CAAC;AACF,IAAA,gBAAgB,CAAC,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;AAEzD,IAAA,QACED,cAAA,CAAA,aAAA,CAACE,SAAW,EAAA,EACV,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAC/C,UAAU,EAAE,CAAC,KAAK,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,UAAU,EACf,4BAA4B,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,KAAK,EAAA;AAE7D,QAAAF,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,CAAC,KAAK,EAAA;AACzB,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,SAAS,EAAC,qBAAqB,EAAA;AAC5D,gBAAAA,cAAA,CAAA,aAAA,CAAC,mBAAmB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EACvC,QAAQ,CACoB,CACxB,CACE,CACD;AAElB;;;;"}

package/dist/components/popover/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { PopoverContentElementProps, PopoverContentProps, PopoverElementProps, PopoverProps, PopoverTriggerElementProps, PopoverTriggerProps, } from "./Popover";
+export { Popover, PopoverContent, PopoverTrigger, usePopoverClose, } from "./Popover";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,0BAA0B,EAC1B,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,eAAe,GAChB,MAAM,WAAW,CAAA"}