@caratlogic/design-system 0.1.2 → 0.1.4

package/dist/lib/overlayBodyLock.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `@radix-ui/react-dismissable-layer` keeps the value it must restore to
+ * `<body>` in a single module-level variable shared by every layer. When two
+ * layers overlap — a modal menu whose item opens a dialog, a select inside a
+ * dialog — the second layer saves `pointer-events: none` and its close writes
+ * that back instead of clearing it, leaving the page unclickable until reload.
+ *
+ * Clearing is only safe once nothing is on screen, so this is a no-op while any
+ * overlay content is still mounted.
+ */
+export declare function releaseStaleOverlayBodyLock(): void;
+//# sourceMappingURL=overlayBodyLock.d.ts.map

package/dist/lib/overlayBodyLock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayBodyLock.d.ts","sourceRoot":"","sources":["../../src/lib/overlayBodyLock.ts"],"names":[],"mappings":"AASA;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,IAAI,IAAI,CAalD"}

package/dist/ui.cjs.js

@@ -2928,10 +2928,84 @@ var U=1,Y$1=.9,H=.8,J=.17,p=.1,u=.999,$=.9999;var k$1=.99,m=/[\\\/_+.#"@\[\(\{&]
 
 var N='[cmdk-group=""]',Y='[cmdk-group-items=""]',be='[cmdk-group-heading=""]',le='[cmdk-item=""]',ce=`${le}:not([aria-disabled="true"])`,Z="cmdk-item-select",T="data-value",Re=(r,o,n)=>W(r,o,n),ue=t__namespace.createContext(void 0),K=()=>t__namespace.useContext(ue),de=t__namespace.createContext(void 0),ee=()=>t__namespace.useContext(de),fe=t__namespace.createContext(void 0),me=t__namespace.forwardRef((r,o)=>{let n=L(()=>{var e,a;return {search:"",value:(a=(e=r.value)!=null?e:r.defaultValue)!=null?a:"",selectedItemId:void 0,filtered:{count:0,items:new Map,groups:new Set}}}),u=L(()=>new Set),c=L(()=>new Map),d=L(()=>new Map),f=L(()=>new Set),p=pe(r),{label:b,children:m,value:R,onValueChange:x,filter:C,shouldFilter:S,loop:A,disablePointerSelection:ge=false,vimBindings:j=true,...O}=r,$=reactId.useId(),q=reactId.useId(),_=reactId.useId(),I=t__namespace.useRef(null),v=ke();k(()=>{if(R!==void 0){let e=R.trim();n.current.value=e,E.emit();}},[R]),k(()=>{v(6,ne);},[]);let E=t__namespace.useMemo(()=>({subscribe:e=>(f.current.add(e),()=>f.current.delete(e)),snapshot:()=>n.current,setState:(e,a,s)=>{var i,l,g,y;if(!Object.is(n.current[e],a)){if(n.current[e]=a,e==="search")J(),z(),v(1,W);else if(e==="value"){if(document.activeElement.hasAttribute("cmdk-input")||document.activeElement.hasAttribute("cmdk-root")){let h=document.getElementById(_);h?h.focus():(i=document.getElementById($))==null||i.focus();}if(v(7,()=>{var h;n.current.selectedItemId=(h=M())==null?void 0:h.id,E.emit();}),s||v(5,ne),((l=p.current)==null?void 0:l.value)!==void 0){let h=a!=null?a:"";(y=(g=p.current).onValueChange)==null||y.call(g,h);return}}E.emit();}},emit:()=>{f.current.forEach(e=>e());}}),[]),U=t__namespace.useMemo(()=>({value:(e,a,s)=>{var i;a!==((i=d.current.get(e))==null?void 0:i.value)&&(d.current.set(e,{value:a,keywords:s}),n.current.filtered.items.set(e,te(a,s)),v(2,()=>{z(),E.emit();}));},item:(e,a)=>(u.current.add(e),a&&(c.current.has(a)?c.current.get(a).add(e):c.current.set(a,new Set([e]))),v(3,()=>{J(),z(),n.current.value||W(),E.emit();}),()=>{d.current.delete(e),u.current.delete(e),n.current.filtered.items.delete(e);let s=M();v(4,()=>{J(),(s==null?void 0:s.getAttribute("id"))===e&&W(),E.emit();});}),group:e=>(c.current.has(e)||c.current.set(e,new Set),()=>{d.current.delete(e),c.current.delete(e);}),filter:()=>p.current.shouldFilter,label:b||r["aria-label"],getDisablePointerSelection:()=>p.current.disablePointerSelection,listId:$,inputId:_,labelId:q,listInnerRef:I}),[]);function te(e,a){var i,l;let s=(l=(i=p.current)==null?void 0:i.filter)!=null?l:Re;return e?s(e,n.current.search,a):0}function z(){if(!n.current.search||p.current.shouldFilter===false)return;let e=n.current.filtered.items,a=[];n.current.filtered.groups.forEach(i=>{let l=c.current.get(i),g=0;l.forEach(y=>{let h=e.get(y);g=Math.max(h,g);}),a.push([i,g]);});let s=I.current;V().sort((i,l)=>{var h,F;let g=i.getAttribute("id"),y=l.getAttribute("id");return ((h=e.get(y))!=null?h:0)-((F=e.get(g))!=null?F:0)}).forEach(i=>{let l=i.closest(Y);l?l.appendChild(i.parentElement===l?i:i.closest(`${Y} > *`)):s.appendChild(i.parentElement===s?i:i.closest(`${Y} > *`));}),a.sort((i,l)=>l[1]-i[1]).forEach(i=>{var g;let l=(g=I.current)==null?void 0:g.querySelector(`${N}[${T}="${encodeURIComponent(i[0])}"]`);l==null||l.parentElement.appendChild(l);});}function W(){let e=V().find(s=>s.getAttribute("aria-disabled")!=="true"),a=e==null?void 0:e.getAttribute(T);E.setState("value",a||void 0);}function J(){var a,s,i,l;if(!n.current.search||p.current.shouldFilter===false){n.current.filtered.count=u.current.size;return}n.current.filtered.groups=new Set;let e=0;for(let g of u.current){let y=(s=(a=d.current.get(g))==null?void 0:a.value)!=null?s:"",h=(l=(i=d.current.get(g))==null?void 0:i.keywords)!=null?l:[],F=te(y,h);n.current.filtered.items.set(g,F),F>0&&e++;}for(let[g,y]of c.current)for(let h of y)if(n.current.filtered.items.get(h)>0){n.current.filtered.groups.add(g);break}n.current.filtered.count=e;}function ne(){var a,s,i;let e=M();e&&(((a=e.parentElement)==null?void 0:a.firstChild)===e&&((i=(s=e.closest(N))==null?void 0:s.querySelector(be))==null||i.scrollIntoView({block:"nearest"})),e.scrollIntoView({block:"nearest"}));}function M(){var e;return (e=I.current)==null?void 0:e.querySelector(`${le}[aria-selected="true"]`)}function V(){var e;return Array.from(((e=I.current)==null?void 0:e.querySelectorAll(ce))||[])}function X(e){let s=V()[e];s&&E.setState("value",s.getAttribute(T));}function Q(e){var g;let a=M(),s=V(),i=s.findIndex(y=>y===a),l=s[i+e];(g=p.current)!=null&&g.loop&&(l=i+e<0?s[s.length-1]:i+e===s.length?s[0]:s[i+e]),l&&E.setState("value",l.getAttribute(T));}function re(e){let a=M(),s=a==null?void 0:a.closest(N),i;for(;s&&!i;)s=e>0?we(s,N):De(s,N),i=s==null?void 0:s.querySelector(ce);i?E.setState("value",i.getAttribute(T)):Q(e);}let oe=()=>X(V().length-1),ie=e=>{e.preventDefault(),e.metaKey?oe():e.altKey?re(1):Q(1);},se=e=>{e.preventDefault(),e.metaKey?X(0):e.altKey?re(-1):Q(-1);};return t__namespace.createElement(reactPrimitive.Primitive.div,{ref:o,tabIndex:-1,...O,"cmdk-root":"",onKeyDown:e=>{var s;(s=O.onKeyDown)==null||s.call(O,e);let a=e.nativeEvent.isComposing||e.keyCode===229;if(!(e.defaultPrevented||a))switch(e.key){case "n":case "j":{j&&e.ctrlKey&&ie(e);break}case "ArrowDown":{ie(e);break}case "p":case "k":{j&&e.ctrlKey&&se(e);break}case "ArrowUp":{se(e);break}case "Home":{e.preventDefault(),X(0);break}case "End":{e.preventDefault(),oe();break}case "Enter":{e.preventDefault();let i=M();if(i){let l=new Event(Z);i.dispatchEvent(l);}}}}},t__namespace.createElement("label",{"cmdk-label":"",htmlFor:U.inputId,id:U.labelId,style:Te},b),B(r,e=>t__namespace.createElement(de.Provider,{value:E},t__namespace.createElement(ue.Provider,{value:U},e))))}),he=t__namespace.forwardRef((r,o)=>{var _,I;let n=reactId.useId(),u=t__namespace.useRef(null),c=t__namespace.useContext(fe),d=K(),f=pe(r),p=(I=(_=f.current)==null?void 0:_.forceMount)!=null?I:c==null?void 0:c.forceMount;k(()=>{if(!p)return d.item(n,c==null?void 0:c.id)},[p]);let b=ve(n,u,[r.value,r.children,u],r.keywords),m=ee(),R=P(v=>v.value&&v.value===b.current),x=P(v=>p||d.filter()===false?true:v.search?v.filtered.items.get(n)>0:true);t__namespace.useEffect(()=>{let v=u.current;if(!(!v||r.disabled))return v.addEventListener(Z,C),()=>v.removeEventListener(Z,C)},[x,r.onSelect,r.disabled]);function C(){var v,E;S(),(E=(v=f.current).onSelect)==null||E.call(v,b.current);}function S(){m.setState("value",b.current,true);}if(!x)return null;let{disabled:A,value:ge,onSelect:j,forceMount:O,keywords:$,...q}=r;return t__namespace.createElement(reactPrimitive.Primitive.div,{ref:reactComposeRefs.composeRefs(u,o),...q,id:n,"cmdk-item":"",role:"option","aria-disabled":!!A,"aria-selected":!!R,"data-disabled":!!A,"data-selected":!!R,onPointerMove:A||d.getDisablePointerSelection()?void 0:S,onClick:A?void 0:C},r.children)}),Ee=t__namespace.forwardRef((r,o)=>{let{heading:n,children:u,forceMount:c,...d}=r,f=reactId.useId(),p=t__namespace.useRef(null),b=t__namespace.useRef(null),m=reactId.useId(),R=K(),x=P(S=>c||R.filter()===false?true:S.search?S.filtered.groups.has(f):true);k(()=>R.group(f),[]),ve(f,p,[r.value,r.heading,b]);let C=t__namespace.useMemo(()=>({id:f,forceMount:c}),[c]);return t__namespace.createElement(reactPrimitive.Primitive.div,{ref:reactComposeRefs.composeRefs(p,o),...d,"cmdk-group":"",role:"presentation",hidden:x?void 0:true},n&&t__namespace.createElement("div",{ref:b,"cmdk-group-heading":"","aria-hidden":true,id:m},n),B(r,S=>t__namespace.createElement("div",{"cmdk-group-items":"",role:"group","aria-labelledby":n?m:void 0},t__namespace.createElement(fe.Provider,{value:C},S))))}),ye=t__namespace.forwardRef((r,o)=>{let{alwaysRender:n,...u}=r,c=t__namespace.useRef(null),d=P(f=>!f.search);return !n&&!d?null:t__namespace.createElement(reactPrimitive.Primitive.div,{ref:reactComposeRefs.composeRefs(c,o),...u,"cmdk-separator":"",role:"separator"})}),Se=t__namespace.forwardRef((r,o)=>{let{onValueChange:n,...u}=r,c=r.value!=null,d=ee(),f=P(m=>m.search),p=P(m=>m.selectedItemId),b=K();return t__namespace.useEffect(()=>{r.value!=null&&d.setState("search",r.value);},[r.value]),t__namespace.createElement(reactPrimitive.Primitive.input,{ref:o,...u,"cmdk-input":"",autoComplete:"off",autoCorrect:"off",spellCheck:false,"aria-autocomplete":"list",role:"combobox","aria-expanded":true,"aria-controls":b.listId,"aria-labelledby":b.labelId,"aria-activedescendant":p,id:b.inputId,type:"text",value:c?r.value:f,onChange:m=>{c||d.setState("search",m.target.value),n==null||n(m.target.value);}})}),Ce=t__namespace.forwardRef((r,o)=>{let{children:n,label:u="Suggestions",...c}=r,d=t__namespace.useRef(null),f=t__namespace.useRef(null),p=P(m=>m.selectedItemId),b=K();return t__namespace.useEffect(()=>{if(f.current&&d.current){let m=f.current,R=d.current,x,C=new ResizeObserver(()=>{x=requestAnimationFrame(()=>{let S=m.offsetHeight;R.style.setProperty("--cmdk-list-height",S.toFixed(1)+"px");});});return C.observe(m),()=>{cancelAnimationFrame(x),C.unobserve(m);}}},[]),t__namespace.createElement(reactPrimitive.Primitive.div,{ref:reactComposeRefs.composeRefs(d,o),...c,"cmdk-list":"",role:"listbox",tabIndex:-1,"aria-activedescendant":p,"aria-label":u,id:b.listId},B(r,m=>t__namespace.createElement("div",{ref:reactComposeRefs.composeRefs(f,b.listInnerRef),"cmdk-list-sizer":""},m)))}),xe=t__namespace.forwardRef((r,o)=>{let{open:n,onOpenChange:u,overlayClassName:c,contentClassName:d,container:f,...p}=r;return t__namespace.createElement(DialogPrimitive__namespace.Root,{open:n,onOpenChange:u},t__namespace.createElement(DialogPrimitive__namespace.Portal,{container:f},t__namespace.createElement(DialogPrimitive__namespace.Overlay,{"cmdk-overlay":"",className:c}),t__namespace.createElement(DialogPrimitive__namespace.Content,{"aria-label":r.label,"cmdk-dialog":"",className:d},t__namespace.createElement(me,{ref:o,...p}))))}),Ie=t__namespace.forwardRef((r,o)=>P(u=>u.filtered.count===0)?t__namespace.createElement(reactPrimitive.Primitive.div,{ref:o,...r,"cmdk-empty":"",role:"presentation"}):null),Pe=t__namespace.forwardRef((r,o)=>{let{progress:n,children:u,label:c="Loading...",...d}=r;return t__namespace.createElement(reactPrimitive.Primitive.div,{ref:o,...d,"cmdk-loading":"",role:"progressbar","aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":100,"aria-label":c},B(r,f=>t__namespace.createElement("div",{"aria-hidden":true},f)))}),_e=Object.assign(me,{List:Ce,Item:he,Input:Se,Group:Ee,Separator:ye,Dialog:xe,Empty:Ie,Loading:Pe});function we(r,o){let n=r.nextElementSibling;for(;n;){if(n.matches(o))return n;n=n.nextElementSibling;}}function De(r,o){let n=r.previousElementSibling;for(;n;){if(n.matches(o))return n;n=n.previousElementSibling;}}function pe(r){let o=t__namespace.useRef(r);return k(()=>{o.current=r;}),o}var k=typeof window=="undefined"?t__namespace.useEffect:t__namespace.useLayoutEffect;function L(r){let o=t__namespace.useRef();return o.current===void 0&&(o.current=r()),o}function P(r){let o=ee(),n=()=>r(o.snapshot());return t__namespace.useSyncExternalStore(o.subscribe,n,n)}function ve(r,o,n,u=[]){let c=t__namespace.useRef(),d=K();return k(()=>{var b;let f=(()=>{var m;for(let R of n){if(typeof R=="string")return R.trim();if(typeof R=="object"&&"current"in R)return R.current?(m=R.current.textContent)==null?void 0:m.trim():c.current}})(),p=u.map(m=>m.trim());d.value(r,f,p),(b=o.current)==null||b.setAttribute(T,f),c.current=f;}),c}var ke=()=>{let[r,o]=t__namespace.useState(),n=L(()=>new Map);return k(()=>{n.current.forEach(u=>u()),n.current=new Map;},[r]),(u,c)=>{n.current.set(u,c),o({});}};function Me(r){let o=r.type;return typeof o=="function"?o(r.props):"render"in o?o.render(r.props):r}function B({asChild:r,children:o},n){return r&&t__namespace.isValidElement(o)?t__namespace.cloneElement(Me(o),{ref:o.ref},n(o.props.children)):n(o)}var Te={position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:"0"};
 
+const OVERLAY_CONTENT_SELECTOR = [
+    '[data-slot="dialog-content"]',
+    '[role="dialog"]',
+    '[role="alertdialog"]',
+    '[role="menu"]',
+    '[role="listbox"]',
+    '[data-radix-popper-content-wrapper]',
+].join(',');
+/**
+ * `@radix-ui/react-dismissable-layer` keeps the value it must restore to
+ * `<body>` in a single module-level variable shared by every layer. When two
+ * layers overlap — a modal menu whose item opens a dialog, a select inside a
+ * dialog — the second layer saves `pointer-events: none` and its close writes
+ * that back instead of clearing it, leaving the page unclickable until reload.
+ *
+ * Clearing is only safe once nothing is on screen, so this is a no-op while any
+ * overlay content is still mounted.
+ */
+function releaseStaleOverlayBodyLock() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.querySelector(OVERLAY_CONTENT_SELECTOR))
+        return;
+    const { body } = document;
+    if (body.style.pointerEvents === 'none') {
+        body.style.pointerEvents = '';
+    }
+    if (body.hasAttribute('data-scroll-locked')) {
+        body.removeAttribute('data-scroll-locked');
+        body.style.overflow = '';
+        body.style.paddingRight = '';
+    }
+}
+
+/** Long enough for the overlay exit animation (200ms) plus a margin. */
+const EXIT_GRACE_MS = 400;
+/**
+ * Clears a leaked Radix `<body>` lock after an overlay closes or unmounts.
+ * Returns a scheduler for overlays that are uncontrolled (no `open` prop), so
+ * their `onOpenChange(false)` can trigger the same check.
+ *
+ * @see releaseStaleOverlayBodyLock for why the lock leaks.
+ */
+function useOverlayBodyLockRelease(open) {
+    const scheduleRelease = t__namespace.useCallback(() => {
+        requestAnimationFrame(() => releaseStaleOverlayBodyLock());
+        window.setTimeout(() => releaseStaleOverlayBodyLock(), EXIT_GRACE_MS);
+    }, []);
+    const wasOpen = t__namespace.useRef(false);
+    t__namespace.useEffect(() => {
+        if (open) {
+            wasOpen.current = true;
+            return;
+        }
+        if (!wasOpen.current)
+            return;
+        wasOpen.current = false;
+        scheduleRelease();
+    }, [open, scheduleRelease]);
+    // Unmounting while open (route change, parent re-render) skips Radix's own
+    // close path entirely, so the check has to outlive this component.
+    t__namespace.useEffect(() => {
+        return () => {
+            window.setTimeout(() => releaseStaleOverlayBodyLock(), EXIT_GRACE_MS);
+        };
+    }, []);
+    return scheduleRelease;
+}
+
 // Utility to merge classes
 // Root
-function Dialog({ ...props }) {
-    return jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+function Dialog({ open, onOpenChange, ...props }) {
+    const scheduleLockRelease = useOverlayBodyLockRelease(open);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props, open: open, onOpenChange: (next) => {
+            onOpenChange?.(next);
+            if (!next)
+                scheduleLockRelease();
+        } }));
 }
 // Trigger
 function DialogTrigger({ ...props }) {