@clicktap/ui 0.43.3 → 0.43.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use client";import{jsxs as l,Fragment as h,jsx as e}from"react/jsx-runtime";import{useMemo as b,Suspense as x,useState as v}from"react";import{Accordion as g}from"../../Accordion/Accordion.js";import{AccordionItem as w}from"@heroui/accordion";import{Button as f}from"../../Button/Button.js";import"../../../utils/cn.js";import{ModalOverlay as y}from"../../ModalOverlay/ModalOverlay.js";import{Modal as N}from"../../Modal/Modal.js";import{Drawer as k}from"../../Drawer/Drawer.js";import{Cross as C}from"../../Icon/Cross.js";import{CrossSmall as A}from"../../Icon/CrossSmall.js";import{Search as D}from"../../Icon/Search.js";import{FilterRenderer as I}from"../FilterRenderer/FilterRenderer.js";import{mergeFilters as S}from"../../../utils/collection/mergeFilters.js";import{FilterAccordionTitle as j}from"../FilterAccordionTitle/FilterAccordionTitle.js";import{EmptyResults as L}from"../EmptyResults/EmptyResults.js";import"../../Icon/DownArrow.js";import"react-aria-components";import"framer-motion";import"../../DialogTrigger/DialogTrigger.js";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";function M(){return e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function V({value:a,onChange:r}){const[o,c]=v(a),m=()=>{r(o.trim())};return l("div",{className:"relative",children:[e("input",{type:"search",value:o,onChange:i=>c(i.target.value),onKeyDown:i=>{i.key==="Enter"&&(i.preventDefault(),m())},onBlur:m,placeholder:"Search products...","aria-label":"Search products",autoComplete:"off",className:"w-full h-9 pl-8 pr-8 rounded-md border border-border bg-white text-sm text-fg placeholder:text-fg-subtle focus:outline-none focus:border-border-emphasis [&::-webkit-search-cancel-button]:hidden"}),o&&e("button",{type:"button",onClick:()=>{c(""),r("")},"aria-label":"Clear search",className:"absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded-full hover:bg-surface-subtle transition-colors",children:e(A,{})}),e("span",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 [&>svg]:w-full [&>svg]:h-full text-fg-subtle",children:e(D,{})})]})}function fe({availableFilters:a,appliedFilters:r,onFilterChange:o,showMobileFilters:c,setShowMobileFilters:m,searchQuery:s,onSearchChange:n,totalItems:i}){const u=b(()=>S(r,a).filter(t=>t.includeInFilters!==!1),[r,a]),d=n&&e(V,{value:s??"",onChange:n},s),p=()=>u.length>0&&e(g,{selectionMode:"multiple",defaultSelectedKeys:"all",className:"pt-2 mt-3",showDivider:!1,itemClasses:{base:"py-1",title:"text-sm font-medium leading-7",trigger:"py-2 border-b border-gray-200",indicator:'data-[open="true"]:rotate-180',content:"pt-2 pb-3"},children:u.map(t=>e(w,{textValue:t.label,title:e(j,{filter:t,appliedFilters:r,onFilterChange:o}),disableIndicatorAnimation:!0,indicator:M,children:e("div",{className:"pt-2",children:e(I,{filter:t,onFilterChange:o,appliedFilters:r,variant:"sidebar"})})},t.code))});return l(h,{children:[l("div",{className:"hidden lg:flex lg:flex-col lg:basis-[16.5rem] lg:shrink-0",children:[d,p(),r.length>0&&e("button",{type:"button",className:"text-sm text-fg-muted hover:text-slate-700 transition-colors mt-4 mb-8",onClick:()=>o([]),children:"Clear all filters"})]}),e("div",{className:"lg:hidden",children:e(x,{children:e(y,{isOpen:c,onOpenChange:t=>m(t),isDismissable:!0,children:e(N,{children:e(k,{size:"30rem",direction:"left","aria-label":"Filters",className:"p-5",children:({close:t})=>l("div",{className:"flex flex-col w-full h-full overflow-hidden",children:[l("div",{className:"flex items-center w-full justify-between",children:[e("span",{className:"text-xl font-bold text-slate-800",children:"Filters"}),e(f,{variant:"ghost","aria-label":"Close",onPress:()=>t(),className:"justify-start size-auto p-0",children:e(C,{})})]}),l("div",{className:"flex flex-col flex-1 overflow-x-hidden overflow-y-auto [scrollbar-width:none] [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden",children:[d&&e("div",{className:"mt-3",children:d}),p(),i===0&&e(L,{searchQuery:s,hasFilters:r.length>0,onClearFilters:()=>o([]),onClearSearch:s&&n?()=>n(""):void 0})]}),l("div",{className:"shrink-0 pt-3 flex flex-col gap-3 border-t border-gray-200",children:[r.length>0&&e("button",{type:"button",className:"text-sm py-2 text-fg-muted hover:text-slate-700 transition-colors",onClick:()=>o([]),children:"Clear all"}),e(f,{className:"w-full py-6 text-base rounded-xl",variant:"primary",onPress:()=>t(),children:"View Results"})]})]})})})})})})]})}export{fe as CollectionFilters};
1
+ "use client";import{jsxs as l,Fragment as h,jsx as e}from"react/jsx-runtime";import{useMemo as b,Suspense as x,useState as v}from"react";import{Accordion as g}from"../../Accordion/Accordion.js";import{AccordionItem as w}from"@heroui/accordion";import{Button as f}from"../../Button/Button.js";import"../../../utils/cn.js";import{ModalOverlay as y}from"../../ModalOverlay/ModalOverlay.js";import{Modal as N}from"../../Modal/Modal.js";import{Drawer as k}from"../../Drawer/Drawer.js";import{Cross as C}from"../../Icon/Cross.js";import{CrossSmall as A}from"../../Icon/CrossSmall.js";import{Search as D}from"../../Icon/Search.js";import{FilterRenderer as I}from"../FilterRenderer/FilterRenderer.js";import{mergeFilters as S}from"../../../utils/collection/mergeFilters.js";import{FilterAccordionTitle as j}from"../FilterAccordionTitle/FilterAccordionTitle.js";import{EmptyResults as L}from"../EmptyResults/EmptyResults.js";import"../../Icon/DownArrow.js";import"react-aria-components";import"framer-motion";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";function M(){return e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function V({value:a,onChange:r}){const[o,c]=v(a),m=()=>{r(o.trim())};return l("div",{className:"relative",children:[e("input",{type:"search",value:o,onChange:i=>c(i.target.value),onKeyDown:i=>{i.key==="Enter"&&(i.preventDefault(),m())},onBlur:m,placeholder:"Search products...","aria-label":"Search products",autoComplete:"off",className:"w-full h-9 pl-8 pr-8 rounded-md border border-border bg-white text-sm text-fg placeholder:text-fg-subtle focus:outline-none focus:border-border-emphasis [&::-webkit-search-cancel-button]:hidden"}),o&&e("button",{type:"button",onClick:()=>{c(""),r("")},"aria-label":"Clear search",className:"absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded-full hover:bg-surface-subtle transition-colors",children:e(A,{})}),e("span",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 [&>svg]:w-full [&>svg]:h-full text-fg-subtle",children:e(D,{})})]})}function pe({availableFilters:a,appliedFilters:r,onFilterChange:o,showMobileFilters:c,setShowMobileFilters:m,searchQuery:s,onSearchChange:n,totalItems:i}){const u=b(()=>S(r,a).filter(t=>t.includeInFilters!==!1),[r,a]),d=n&&e(V,{value:s??"",onChange:n},s),p=()=>u.length>0&&e(g,{selectionMode:"multiple",defaultSelectedKeys:"all",className:"pt-2 mt-3",showDivider:!1,itemClasses:{base:"py-1",title:"text-sm font-medium leading-7",trigger:"py-2 border-b border-gray-200",indicator:'data-[open="true"]:rotate-180',content:"pt-2 pb-3"},children:u.map(t=>e(w,{textValue:t.label,title:e(j,{filter:t,appliedFilters:r,onFilterChange:o}),disableIndicatorAnimation:!0,indicator:M,children:e("div",{className:"pt-2",children:e(I,{filter:t,onFilterChange:o,appliedFilters:r,variant:"sidebar"})})},t.code))});return l(h,{children:[l("div",{className:"hidden lg:flex lg:flex-col lg:basis-[16.5rem] lg:shrink-0",children:[d,p(),r.length>0&&e("button",{type:"button",className:"text-sm text-fg-muted hover:text-slate-700 transition-colors mt-4 mb-8",onClick:()=>o([]),children:"Clear all filters"})]}),e("div",{className:"lg:hidden",children:e(x,{children:e(y,{isOpen:c,onOpenChange:t=>m(t),isDismissable:!0,children:e(N,{children:e(k,{size:"30rem",direction:"left","aria-label":"Filters",className:"p-5",children:({close:t})=>l("div",{className:"flex flex-col w-full h-full overflow-hidden",children:[l("div",{className:"flex items-center w-full justify-between",children:[e("span",{className:"text-xl font-bold text-slate-800",children:"Filters"}),e(f,{variant:"ghost","aria-label":"Close",onPress:()=>t(),className:"justify-start size-auto p-0",children:e(C,{})})]}),l("div",{className:"flex flex-col flex-1 overflow-x-hidden overflow-y-auto [scrollbar-width:none] [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden",children:[d&&e("div",{className:"mt-3",children:d}),p(),i===0&&e(L,{searchQuery:s,hasFilters:r.length>0,onClearFilters:()=>o([]),onClearSearch:s&&n?()=>n(""):void 0})]}),l("div",{className:"shrink-0 pt-3 flex flex-col gap-3 border-t border-gray-200",children:[r.length>0&&e("button",{type:"button",className:"text-sm py-2 text-fg-muted hover:text-slate-700 transition-colors",onClick:()=>o([]),children:"Clear all"}),e(f,{className:"w-full py-6 text-base rounded-xl",variant:"primary",onPress:()=>t(),children:"View Results"})]})]})})})})})})]})}export{pe as CollectionFilters};
@@ -1 +1 @@
1
- import{CollectionFilters as L}from"./CollectionFilters.js";import"react/jsx-runtime";import"react";import"../../Accordion/Accordion.js";import"@heroui/accordion";import"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"../../Button/Button.js";import"react-aria-components";import"../../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../../DialogTrigger/DialogTrigger.js";import"../../Modal/Modal.js";import"../../Drawer/Drawer.js";import"../../Icon/Cross.js";import"../../Icon/CrossSmall.js";import"../../Icon/Search.js";import"../FilterRenderer/FilterRenderer.js";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";import"../../../utils/collection/mergeFilters.js";import"../FilterAccordionTitle/FilterAccordionTitle.js";import"../EmptyResults/EmptyResults.js";export{L as CollectionFilters};
1
+ import{CollectionFilters as K}from"./CollectionFilters.js";import"react/jsx-runtime";import"react";import"../../Accordion/Accordion.js";import"@heroui/accordion";import"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"../../Button/Button.js";import"react-aria-components";import"../../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../../Modal/Modal.js";import"../../Drawer/Drawer.js";import"../../Icon/Cross.js";import"../../Icon/CrossSmall.js";import"../../Icon/Search.js";import"../FilterRenderer/FilterRenderer.js";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";import"../../../utils/collection/mergeFilters.js";import"../FilterAccordionTitle/FilterAccordionTitle.js";import"../EmptyResults/EmptyResults.js";export{K as CollectionFilters};
@@ -1 +1 @@
1
- import{AttributeDataProvider as V,useAttributeData as W}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as Y}from"./EmptyResults/EmptyResults.js";import{ProductPrice as _}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as rr}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as tr}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as pr}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as er}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as cr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as xr}from"./CollectionToolbar/CollectionToolbar.js";import"react/jsx-runtime";import"react";import"../../utils/env.js";import"../../utils/swatch.js";import"./FilterRenderer/Renderer/Option.js";import"../Checkbox/Checkbox.js";import"react-aria-components";import"../../utils/cn.js";import"./FilterRenderer/Renderer/useOptionFilterToggle.js";import"./FilterRenderer/Renderer/Swatch.js";import"./FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../Icon/CheckIcon.js";import"../../utils/color.js";import"./FilterRenderer/Renderer/Swatch/SwatchImage.js";import"./FilterRenderer/Renderer/Swatch/SwatchText.js";import"./FilterRenderer/Renderer/Boolean.js";import"../RadioGroup/RadioGroup.js";import"../Radio/Radio.js";import"./FilterRenderer/Renderer/Range.js";import"../Button/Button.js";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"@heroui/accordion";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../DialogTrigger/DialogTrigger.js";import"../Modal/Modal.js";import"../Drawer/Drawer.js";import"../Icon/Cross.js";import"../Icon/Search.js";import"../../utils/collection/mergeFilters.js";import"../Select/Option.js";import"react-stately";import"../Select/Select.js";import"../Select/ButtonSelect.js";import"react-aria";import"@react-aria/interactions";import"../Select/parts.js";import"../Select/ComboBoxSelect.js";import"../Loader/Pulse.js";import"../Select/MultiButtonSelect.js";import"../Icon/FilterIcon.js";export{V as AttributeDataProvider,tr as CollectionFilterChips,cr as CollectionFilters,xr as CollectionToolbar,Y as EmptyResults,pr as FilterAccordionTitle,rr as FilterRenderer,er as ProductCardSwatches,_ as ProductPrice,W as useAttributeData};
1
+ import{AttributeDataProvider as U,useAttributeData as V}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as X}from"./EmptyResults/EmptyResults.js";import{ProductPrice as Z}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as $}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as or}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as ir}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as mr}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as lr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as fr}from"./CollectionToolbar/CollectionToolbar.js";import"react/jsx-runtime";import"react";import"../../utils/env.js";import"../../utils/swatch.js";import"./FilterRenderer/Renderer/Option.js";import"../Checkbox/Checkbox.js";import"react-aria-components";import"../../utils/cn.js";import"./FilterRenderer/Renderer/useOptionFilterToggle.js";import"./FilterRenderer/Renderer/Swatch.js";import"./FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../Icon/CheckIcon.js";import"../../utils/color.js";import"./FilterRenderer/Renderer/Swatch/SwatchImage.js";import"./FilterRenderer/Renderer/Swatch/SwatchText.js";import"./FilterRenderer/Renderer/Boolean.js";import"../RadioGroup/RadioGroup.js";import"../Radio/Radio.js";import"./FilterRenderer/Renderer/Range.js";import"../Button/Button.js";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"@heroui/accordion";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../Modal/Modal.js";import"../Drawer/Drawer.js";import"../Icon/Cross.js";import"../Icon/Search.js";import"../../utils/collection/mergeFilters.js";import"../Select/Option.js";import"react-stately";import"../Select/Select.js";import"../Select/ButtonSelect.js";import"react-aria";import"@react-aria/interactions";import"../Select/parts.js";import"../Select/ComboBoxSelect.js";import"../Loader/Pulse.js";import"../Select/MultiButtonSelect.js";import"../Icon/FilterIcon.js";export{U as AttributeDataProvider,or as CollectionFilterChips,lr as CollectionFilters,fr as CollectionToolbar,X as EmptyResults,ir as FilterAccordionTitle,$ as FilterRenderer,mr as ProductCardSwatches,Z as ProductPrice,V as useAttributeData};
@@ -1,10 +1,29 @@
1
- import { Dispatch, SetStateAction } from 'react';
2
1
  import { DialogTriggerProps } from 'react-aria-components';
3
2
  import { DriverAnimationState } from './DialogTrigger.types';
3
+ /**
4
+ * @deprecated The overlay animation state now lives in ModalOverlay, derived from react-aria's
5
+ * `OverlayTriggerStateContext` (CTAP-1210) — read that context directly instead. This shim keeps
6
+ * the old shape working: `animation` reflects the settled open state only (the transient `hidden`
7
+ * exit phase is overlay-internal), `setAnimation` is a no-op, and `onOpenChange` drives the
8
+ * react-aria state.
9
+ */
4
10
  export declare const useDialogTrigger: () => {
5
11
  animation: DriverAnimationState;
6
- setAnimation: Dispatch<SetStateAction<DriverAnimationState>>;
12
+ setAnimation: (animation: DriverAnimationState) => void;
7
13
  onOpenChange: (isOpen: boolean) => void;
8
14
  };
15
+ /**
16
+ * Thin wrapper over react-aria's DialogTrigger, kept as the package's stable import point.
17
+ *
18
+ * Deliberately NO module-scoped context here. The previous version mirrored the open state into
19
+ * its own `createContext` for the overlay's enter/exit animation — and a module-scoped context
20
+ * only works when every consumer resolves the SAME package instance. With two @clicktap/ui copies
21
+ * installed (an ordinary pnpm-workspace version skew), the trigger wrote into one context copy
22
+ * while the overlay read the other's default, so every trigger-driven modal mounted at
23
+ * `opacity: 0` with zero errors (CTAP-1210, reported by noco). The animation state now lives in
24
+ * ModalOverlay itself, derived from react-aria's `OverlayTriggerStateContext` — the one context
25
+ * that is reliably shared, because everything fails loudly if react-aria-components itself is
26
+ * duplicated.
27
+ */
9
28
  export declare function DialogTrigger(props: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
10
29
  export default DialogTrigger;
@@ -1 +1 @@
1
- "use client";import{jsx as r}from"react/jsx-runtime";import{createContext as u,useState as c,useMemo as l,useContext as p}from"react";import{DialogTrigger as d}from"react-aria-components";const a=u({animation:"unmounted",setAnimation:()=>{},onOpenChange:()=>{}}),x=()=>p(a);function D(g){const{onOpenChange:e,...s}=g,[n,o]=c("unmounted"),t=i=>{o(i?"visible":"hidden"),e?.(i)},m=l(()=>({animation:n,setAnimation:o,onOpenChange:t}),[n,e]);return r(a.Provider,{value:m,children:r(d,{...s,onOpenChange:t})})}export{D as DialogTrigger,D as default,x as useDialogTrigger};
1
+ "use client";import{jsx as r}from"react/jsx-runtime";import{useContext as i}from"react";import{DialogTrigger as n,OverlayTriggerStateContext as o}from"react-aria-components";const m=()=>{const e=i(o);return{animation:e?.isOpen?"visible":"unmounted",setAnimation:()=>{},onOpenChange:t=>e?.setOpen(t)}};function u(e){return r(n,{...e})}export{u as DialogTrigger,u as default,m as useDialogTrigger};
@@ -1,3 +1,23 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ import { OverlayTriggerState } from 'react-stately';
3
+ import { DriverAnimationState } from '../DialogTrigger/DialogTrigger.types';
1
4
  import { ModalOverlayProps } from './ModalOverlay.types';
5
+ /**
6
+ * The overlay's enter/exit animation tri-state, derived from react-aria's own trigger state:
7
+ * open → `visible`; close-while-visible → `hidden` (the exit phase — `isExiting` keeps the
8
+ * react-aria overlay mounted while framer-motion plays it); `onAnimationComplete` then settles
9
+ * `hidden` → `unmounted`, letting react-aria unmount the portal.
10
+ *
11
+ * Derived HERE, from `OverlayTriggerStateContext`, and not mirrored through a package-owned
12
+ * context on DialogTrigger: a module-scoped context exists once PER PACKAGE INSTANCE, so with two
13
+ * @clicktap/ui copies installed (ordinary pnpm version skew) the trigger wrote `visible` into one
14
+ * copy while the overlay read the other's `unmounted` default — `animate="unmounted"` names no
15
+ * variant, framer-motion holds `initial: "hidden"`, and every trigger-driven modal sat mounted at
16
+ * `opacity: 0` with zero errors (CTAP-1210, noco). react-aria's context is the safe dependency:
17
+ * if react-aria-components itself is duplicated, everything breaks loudly.
18
+ *
19
+ * Exported for unit tests only.
20
+ */
21
+ export declare function useOverlayAnimationState(overlayState: OverlayTriggerState | null | undefined): [DriverAnimationState, Dispatch<SetStateAction<DriverAnimationState>>];
2
22
  export declare function ModalOverlay(props: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;
3
23
  export default ModalOverlay;
@@ -1 +1 @@
1
- "use client";import{jsx as i}from"react/jsx-runtime";import{forwardRef as P,useId as I,useEffect as N,useCallback as p,useContext as S}from"react";import{ModalOverlay as M,OverlayTriggerStateContext as k}from"react-aria-components";import{motion as T,AnimatePresence as R}from"framer-motion";import{useDialogTrigger as F}from"../DialogTrigger/DialogTrigger.js";import{cn as j}from"../../utils/cn.js";const q="body > [inert]:not(#__next):not([data-overlay-container])";function z(e){return Object.keys(e).some(n=>n.startsWith("__react"))}function O(){document.querySelectorAll(q).forEach(e=>e.removeAttribute("inert"))}function D(e){return!!(e.closest("[data-overlay-container]")||e.closest("#__next"))}const L=P(({style:e,children:n,...o},r)=>{const l=typeof e=="function"?e(o):e;return i(M,{...o,ref:r,style:l,children:n})});let m=null;function W(){return typeof window>"u"?null:(m||(m=T.create(L)),m)}const h=W();function g({animate:e,animation:n,setAnimation:o,className:r,animationVariants:l,isDismissable:u=!0,children:v,...E}){const w=I();N(()=>{O();const t=new MutationObserver(s=>{for(const d of s)if(d.type==="attributes"&&d.attributeName==="inert"){const f=d.target;f.parentElement===document.body?O():z(f)||f.removeAttribute("inert")}});return t.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>t.disconnect()},[]);const{key:x,shouldCloseOnInteractOutside:c,onOpenChange:a,...C}=E,_=p(t=>c?c(t):D(t),[c]),y=S(k),A=p(t=>{!u||t.target!==t.currentTarget||(a?a(!1):y?.close())},[u,a,y]),b={isDismissable:u,shouldCloseOnInteractOutside:_,onOpenChange:a,onPointerDown:A,className:j("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",r),...C};return h?i(h,{isExiting:n==="hidden",onAnimationComplete:t=>{o(s=>t==="hidden"&&s==="hidden"?"unmounted":s)},variants:l||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:e,exit:"hidden",...b,children:v},x||w):i(M,{...b,children:v})}function Q(e){const{isOpen:n}=e,{animation:o,setAnimation:r}=F();return n!==void 0?i(R,{children:n&&i(g,{...e,animate:"visible",animation:o,setAnimation:r})}):i(g,{...e,animate:o,animation:o,setAnimation:r})}export{Q as ModalOverlay,Q as default};
1
+ "use client";import{jsx as a}from"react/jsx-runtime";import{forwardRef as N,useContext as M,useState as k,useEffect as A,useId as R,useCallback as O}from"react";import{ModalOverlay as E,OverlayTriggerStateContext as w}from"react-aria-components";import{motion as T,AnimatePresence as F}from"framer-motion";import{cn as j}from"../../utils/cn.js";const q="body > [inert]:not(#__next):not([data-overlay-container])";function z(e){return Object.keys(e).some(t=>t.startsWith("__react"))}function p(){document.querySelectorAll(q).forEach(e=>e.removeAttribute("inert"))}function L(e){return!!(e.closest("[data-overlay-container]")||e.closest("#__next"))}const W=N(({style:e,children:t,...i},n)=>{const r=typeof e=="function"?e(i):e;return a(E,{...i,ref:n,style:r,children:t})});let m=null;function $(){return typeof window>"u"?null:(m||(m=T.create(W)),m)}const h=$();function g({animate:e,animation:t,setAnimation:i,className:n,animationVariants:r,isDismissable:u=!0,children:v,...x}){const C=R();A(()=>{p();const o=new MutationObserver(l=>{for(const d of l)if(d.type==="attributes"&&d.attributeName==="inert"){const f=d.target;f.parentElement===document.body?p():z(f)||f.removeAttribute("inert")}});return o.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>o.disconnect()},[]);const{key:S,shouldCloseOnInteractOutside:c,onOpenChange:s,..._}=x,P=O(o=>c?c(o):L(o),[c]),y=M(w),I=O(o=>{!u||o.target!==o.currentTarget||(s?s(!1):y?.close())},[u,s,y]),b={isDismissable:u,shouldCloseOnInteractOutside:P,onOpenChange:s,onPointerDown:I,className:j("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",n),..._};return h?a(h,{isExiting:t==="hidden",onAnimationComplete:o=>{i(l=>o==="hidden"&&l==="hidden"?"unmounted":l)},variants:r||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:e,exit:"hidden",...b,children:v},S||C):a(E,{...b,children:v})}function B(e){const t=e?.isOpen??!1,[i,n]=k(t?"visible":"unmounted");return A(()=>{n(t?"visible":r=>r==="visible"?"hidden":r)},[t]),[i,n]}function Q(e){const{isOpen:t}=e,i=M(w),[n,r]=B(i);return t!==void 0?a(F,{children:t&&a(g,{...e,animate:"visible",animation:n,setAnimation:r})}):a(g,{...e,animate:n,animation:n,setAnimation:r})}export{Q as ModalOverlay,Q as default,B as useOverlayAnimationState};
@@ -1 +1 @@
1
- import{ModalOverlay as l}from"./ModalOverlay.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"framer-motion";import"../DialogTrigger/DialogTrigger.js";import"../../utils/cn.js";export{l as ModalOverlay};
1
+ import{ModalOverlay as e}from"./ModalOverlay.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"framer-motion";import"../../utils/cn.js";export{e as ModalOverlay};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clicktap/ui",
3
- "version": "0.43.3",
3
+ "version": "0.43.4",
4
4
  "private": false,
5
5
  "author": "Clicktap",
6
6
  "description": "A library of React UI components and low-level hooks.",