@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.
- package/components/Collection/CollectionFilters/CollectionFilters.js +1 -1
- package/components/Collection/CollectionFilters/index.js +1 -1
- package/components/Collection/index.js +1 -1
- package/components/DialogTrigger/DialogTrigger.d.ts +21 -2
- package/components/DialogTrigger/DialogTrigger.js +1 -1
- package/components/ModalOverlay/ModalOverlay.d.ts +20 -0
- package/components/ModalOverlay/ModalOverlay.js +1 -1
- package/components/ModalOverlay/index.js +1 -1
- package/package.json +1 -1
|
@@ -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"
|
|
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
|
|
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
|
|
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:
|
|
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{
|
|
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
|
|
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
|
|
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};
|