@planningcenter/tapestry 4.6.1 → 4.7.0-rc.0

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { InputTextBase } from \"@components/input-text-base\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type InputHTMLAttributes } from \"react\"\n\nexport type InputSize = \"lg\" | \"md\"\n\nexport type InputType =\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\"\n\ninterface InputBaseProps {\n  /** Helper text displayed below the input. Styled as an error when `invalid`. */\n  description?: React.ReactNode\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** If true, all text is selected when the input receives focus. */\n  selectTextOnFocus?: boolean\n  /** The size of the input. */\n  size?: InputSize\n  /** Supported input types — defaults to 'text' */\n  type?: InputType\n}\n\ninterface InputWithAutoWidth {\n  /** If true, the input width grows to fit content. Mutually exclusive with `expand`. */\n  autoWidth?: boolean\n  expand?: never\n}\n\ninterface InputWithExpand {\n  autoWidth?: never\n  /** If true, sets `data-flex-expand` so the input grows/shrinks to fill a `Flex` row. Mutually exclusive with `autoWidth`. */\n  expand?: boolean\n}\n\ntype InputSizingProps = InputWithAutoWidth | InputWithExpand\n\ninterface InputWithVisibleLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel?: false\n  /** The label text for the input. */\n  label: React.ReactNode\n}\n\ninterface InputWithHiddenLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel: true\n  /** The label text for the input. Must be a string when hidden. */\n  label: string\n}\n\ninterface InputWithAriaLabelledBy extends InputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type InputProps =\n  | InputWithAriaLabelledBy\n  | InputWithHiddenLabel\n  | InputWithVisibleLabel\n\n/**\n * Combines standard HTML input attributes with custom Input props.\n * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.\n */\nexport type InputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof InputProps | keyof InputSizingProps | \"size\" | \"type\"\n> &\n  InputProps &\n  InputSizingProps\n\n/**\n * A text input component that renders as an HTML `<input>` with a label and\n * optional description. Supports the standard text-like input types\n * (`text`, `email`, `password`, `search`, `tel`, `url`, `number`), invalid\n * state, and `lg`/`md` sizing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-input--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Input = forwardRef<HTMLInputElement, InputElementProps>(\n  function Input(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      autoComplete,\n      autoWidth,\n      className,\n      description,\n      expand,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onFocus,\n      selectTextOnFocus,\n      size = \"md\",\n      type = \"text\",\n      ...restProps\n    }: InputElementProps,\n    ref\n  ) {\n    const autoCompleteBlockingProps =\n      autoComplete === \"off\"\n        ? {\n            \"data-1p-ignore\": true,\n            \"data-bwignore\": true,\n            \"data-form-type\": \"other\",\n            \"data-lpignore\": true,\n          }\n        : {}\n\n    const handleFocus = selectTextOnFocus\n      ? (event: React.FocusEvent<HTMLInputElement>) => {\n          try {\n            event.currentTarget.select()\n          } catch {\n            // Some input types (e.g. number) do not support text selection.\n          }\n          onFocus?.(event)\n        }\n      : onFocus\n\n    const wrapperClassName = classNames(\n      { \"tds-input--auto-width\": autoWidth },\n      className\n    )\n\n    return (\n      <InputTextBase\n        className={wrapperClassName}\n        description={description}\n        expand={expand}\n        hideLabel={hideLabel || !!ariaLabelledBy}\n        id={id}\n        invalid={invalid}\n        label={label}\n        size={size}\n      >\n        {({ descriptionId, inputId }) => (\n          <input\n            {...restProps}\n            {...autoCompleteBlockingProps}\n            aria-describedby={descriptionId}\n            aria-invalid={invalid || undefined}\n            aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            autoComplete={autoComplete}\n            id={inputId}\n            onFocus={handleFocus}\n            ref={ref}\n            type={type}\n          />\n        )}\n      </InputTextBase>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n"],"names":["React"],"mappings":";;;;AAgFA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,MAAM,EACN,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,yBAAyB,GAC7B,YAAY,KAAK;AACf,UAAE;AACE,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,eAAe,EAAE,IAAI;AACtB;UACD,EAAE;IAER,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAyC,KAAI;AAC5C,YAAA,IAAI;AACF,gBAAA,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B;AAAE,YAAA,MAAM;;YAER;AACA,YAAA,OAAO,GAAG,KAAK,CAAC;QAClB;UACA,OAAO;AAEX,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,EAAE,uBAAuB,EAAE,SAAS,EAAE,EACtC,SAAS,CACV;IAED,QACEA,6BAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,cAAc,EACxC,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IAET,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAC1BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,KACT,yBAAyB,EAAA,kBAAA,EACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,EAAA,iBAAA,EACjD,cAAc,EAC/B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACa;AAEpB,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport { InputTextBase } from \"@components/input-text-base\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, type InputHTMLAttributes } from \"react\"\n\nexport type InputSize = \"lg\" | \"md\"\n\nexport type InputType =\n  | \"email\"\n  | \"file\"\n  | \"number\"\n  | \"password\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\"\n\ninterface InputBaseProps {\n  /** Helper text displayed below the input. Styled as an error when `invalid`. */\n  description?: React.ReactNode\n  /** Whether the input is in an invalid state. */\n  invalid?: boolean\n  /** If true, all text is selected when the input receives focus. */\n  selectTextOnFocus?: boolean\n  /** The size of the input. */\n  size?: InputSize\n  /** Supported input types — defaults to 'text' */\n  type?: InputType\n}\n\ninterface InputWithAutoWidth {\n  /** If true, the input width grows to fit content. Mutually exclusive with `expand`. */\n  autoWidth?: boolean\n  expand?: never\n}\n\ninterface InputWithExpand {\n  autoWidth?: never\n  /** If true, sets `data-flex-expand` so the input grows/shrinks to fill a `Flex` row. Mutually exclusive with `autoWidth`. */\n  expand?: boolean\n}\n\ntype InputSizingProps = InputWithAutoWidth | InputWithExpand\n\ninterface InputWithVisibleLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel?: false\n  /** The label text for the input. */\n  label: React.ReactNode\n}\n\ninterface InputWithHiddenLabel extends InputBaseProps {\n  /** If true, the label is visually hidden and set as aria-label. */\n  hideLabel: true\n  /** The label text for the input. Must be a string when hidden. */\n  label: string\n}\n\ninterface InputWithAriaLabelledBy extends InputBaseProps {\n  \"aria-labelledby\": string\n  hideLabel?: never\n  label?: never\n}\n\nexport type InputProps =\n  | InputWithAriaLabelledBy\n  | InputWithHiddenLabel\n  | InputWithVisibleLabel\n\n/**\n * Combines standard HTML input attributes with custom Input props.\n * Omits 'size' and 'type' from HTML attributes to avoid conflict with our strict types.\n */\nexport type InputElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof InputProps | keyof InputSizingProps | \"size\" | \"type\"\n> &\n  InputProps &\n  InputSizingProps\n\n/**\n * A text input component that renders as an HTML `<input>` with a label and\n * optional description. Supports the standard native input types\n * (`text`, `email`, `password`, `search`, `tel`, `url`, `number`, `file`),\n * invalid state, and `lg`/`md` sizing.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-input--docs | Storybook Documentation}\n * @see {@link https://github.com/planningcenter/tapestry/tree/main/packages/tapestry-migration-cli | Migration CLI: Available}\n */\nexport const Input = forwardRef<HTMLInputElement, InputElementProps>(\n  function Input(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      autoComplete,\n      autoWidth,\n      className,\n      description,\n      expand,\n      hideLabel,\n      id,\n      invalid,\n      label,\n      onFocus,\n      selectTextOnFocus,\n      size = \"md\",\n      type = \"text\",\n      ...restProps\n    }: InputElementProps,\n    ref\n  ) {\n    const autoCompleteBlockingProps =\n      autoComplete === \"off\"\n        ? {\n            \"data-1p-ignore\": true,\n            \"data-bwignore\": true,\n            \"data-form-type\": \"other\",\n            \"data-lpignore\": true,\n          }\n        : {}\n\n    const handleFocus = selectTextOnFocus\n      ? (event: React.FocusEvent<HTMLInputElement>) => {\n          try {\n            event.currentTarget.select()\n          } catch {\n            // Some input types (e.g. number) do not support text selection.\n          }\n          onFocus?.(event)\n        }\n      : onFocus\n\n    const wrapperClassName = classNames(\n      { \"tds-input--auto-width\": autoWidth },\n      className\n    )\n\n    return (\n      <InputTextBase\n        className={wrapperClassName}\n        description={description}\n        expand={expand}\n        hideLabel={hideLabel || !!ariaLabelledBy}\n        id={id}\n        invalid={invalid}\n        label={label}\n        size={size}\n      >\n        {({ descriptionId, inputId }) => (\n          <input\n            {...restProps}\n            {...autoCompleteBlockingProps}\n            aria-describedby={descriptionId}\n            aria-invalid={invalid || undefined}\n            aria-label={hideLabel ? ariaLabel || (label as string) : ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            autoComplete={autoComplete}\n            id={inputId}\n            onFocus={handleFocus}\n            ref={ref}\n            type={type}\n          />\n        )}\n      </InputTextBase>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n"],"names":["React"],"mappings":";;;;AAiFA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CACZ,EACE,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,MAAM,EACN,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,MAAM,EACb,GAAG,SAAS,EACM,EACpB,GAAG,EAAA;AAEH,IAAA,MAAM,yBAAyB,GAC7B,YAAY,KAAK;AACf,UAAE;AACE,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,OAAO;AACzB,YAAA,eAAe,EAAE,IAAI;AACtB;UACD,EAAE;IAER,MAAM,WAAW,GAAG;AAClB,UAAE,CAAC,KAAyC,KAAI;AAC5C,YAAA,IAAI;AACF,gBAAA,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B;AAAE,YAAA,MAAM;;YAER;AACA,YAAA,OAAO,GAAG,KAAK,CAAC;QAClB;UACA,OAAO;AAEX,IAAA,MAAM,gBAAgB,GAAG,UAAU,CACjC,EAAE,uBAAuB,EAAE,SAAS,EAAE,EACtC,SAAS,CACV;IAED,QACEA,6BAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,cAAc,EACxC,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IAET,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,MAC1BA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,KACT,yBAAyB,EAAA,kBAAA,EACX,aAAa,EAAA,cAAA,EACjB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,GAAG,SAAS,IAAK,KAAgB,GAAG,SAAS,EAAA,iBAAA,EACjD,cAAc,EAC/B,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EAAA,CACV,CACH,CACa;AAEpB,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -25,7 +25,7 @@ export type PopoverElementProps = PopoverProps;
  * `Modal`.
  *
  * @component
- * @see {@link https://app.notion.com/p/planningcenter/RFC-Tapestry-Popover-3baabbce69a2802e8fe8e65a7f72821c | RFC}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-popover--docs | Storybook Documentation}
  */
 export declare function Popover({ children, defaultOpen, onOpenChange, open, }: PopoverElementProps): React.JSX.Element;
 export interface PopoverTriggerProps {

package/dist/components/popover/Popover.js

@@ -14,7 +14,7 @@ import { DialogTrigger, PopoverContext, Popover as Popover$1, Dialog, Pressable
  * `Modal`.
  *
  * @component
- * @see {@link https://app.notion.com/p/planningcenter/RFC-Tapestry-Popover-3baabbce69a2802e8fe8e65a7f72821c | RFC}
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-popover--docs | Storybook Documentation}
  */
 function Popover({ children, defaultOpen, onOpenChange, open, }) {
     return (React__default.createElement(DialogTrigger, { defaultOpen: defaultOpen, isOpen: open, onOpenChange: onOpenChange }, children));

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

@@ -1 +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;;;;"}
+{"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://planningcenter.github.io/tapestry/?path=/docs/components-popover--docs | Storybook Documentation}\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/index.css

@@ -3922,8 +3922,10 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 }
 
 .tds-dropdown-popover{
+  inline-size:-moz-max-content;
+  inline-size:max-content;
   min-inline-size:10rem;
-  max-inline-size:24rem;
+  max-inline-size:min(24rem, 100vi);
   padding:var(--t-spacing-1);
   overflow:auto;
   overscroll-behavior:none;
@@ -4757,6 +4759,50 @@ a.tds-dropdown-item:is(:hover, :active){
       inline-size:1em;
       block-size:2em;
     }
+
+[type="file"]:is(.tds-input input){
+      padding-block:var(--t-spacing-half);
+      padding-inline-start:var(--t-spacing-half);
+    }
+
+[type="file"]:is(.tds-input input):not(:disabled){
+        color:var(--t-text-color-secondary);
+      }
+
+[type="file"]:is(.tds-input input)::file-selector-button{
+        --_file-btn-padding-block:3px;
+
+        padding-block:var(--_file-btn-padding-block);
+        padding-inline:12px;
+        margin-inline-end:12px;
+        font:inherit;
+        line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
+        color:var(--t-text-color-status-neutral);
+        cursor:pointer;
+        background-color:var(--t-fill-color-button-neutral-solid);
+        border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
+        border-radius:var(--t-border-radius-md);
+        transition-timing-function:var(--t-ease-in-out);
+        transition-duration:var(--t-duration-200);
+        transition-property:color, background-color, border-color;
+      }
+
+[type="file"]:is(.tds-input input):hover::file-selector-button{
+        background-color:var(--t-fill-color-button-neutral-solid-hover);
+        border-color:var(--t-fill-color-button-neutral-solid-hover);
+      }
+
+[type="file"]:is(.tds-input input):active::file-selector-button{
+        background-color:var(--t-fill-color-button-neutral-solid-active);
+        border-color:var(--t-fill-color-button-neutral-solid-active);
+      }
+
+[type="file"]:is(.tds-input input):disabled::file-selector-button{
+        color:var(--t-text-color-disabled);
+        pointer-events:none;
+        background-color:var(--t-fill-color-button-neutral-solid-disabled);
+        border-color:var(--t-fill-color-button-neutral-solid-disabled);
+      }
 @supports (field-sizing: content){
   .tds-input--auto-width{
     inline-size:-moz-fit-content;
@@ -5115,6 +5161,48 @@ a.tds-dropdown-item:is(:hover, :active){
     margin-inline-end:var(--tds-number-stepper-button-offset);
   }
 
+.tds-popover{
+  max-inline-size:24rem;
+  overflow:auto;
+  overscroll-behavior:none;
+  outline:0;
+  scrollbar-color:#0004 var(--t-surface-color-card);
+  scrollbar-width:thin;
+  background:var(--t-surface-color-card);
+  background-clip:padding-box;
+  border:1px solid var(--t-border-color);
+  border-radius:var(--t-border-radius);
+  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
+}
+
+@media (prefers-reduced-motion: no-preference){
+    .tds-popover[data-entering]{
+      animation:tds-popover var(--t-duration-300) var(--t-ease-out);
+    }
+
+    .tds-popover[data-exiting]{
+      animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
+    }
+
+    .tds-popover[data-entering],.tds-popover[data-exiting]{
+      will-change:opacity, transform;
+    }
+
+  @keyframes tds-popover{
+    from{
+      opacity:0;
+      transform:translateY(-8px);
+    }
+  }
+}
+
+.tds-popover-content{
+  display:flex;
+  flex-direction:column;
+  padding:var(--t-spacing-1);
+  outline:0;
+}
+
 .tds-radio{
   --tds-radio-font-size:var(--t-font-size-md);
   --tds-radio-cursor:pointer;