@kushagradhawan/kookie-ui 0.1.108 → 0.1.110
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.css +187 -133
- package/dist/cjs/components/_internal/shell-bottom.d.ts +2 -0
- package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-bottom.js +1 -1
- package/dist/cjs/components/_internal/shell-bottom.js.map +3 -3
- package/dist/cjs/components/_internal/shell-inspector.d.ts +2 -0
- package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-inspector.js +1 -1
- package/dist/cjs/components/_internal/shell-inspector.js.map +3 -3
- package/dist/cjs/components/_internal/shell-sidebar.d.ts +2 -0
- package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -1
- package/dist/cjs/components/_internal/shell-sidebar.js +1 -1
- package/dist/cjs/components/_internal/shell-sidebar.js.map +3 -3
- package/dist/cjs/components/shell.context.d.ts +13 -0
- package/dist/cjs/components/shell.context.d.ts.map +1 -1
- package/dist/cjs/components/shell.context.js +1 -1
- package/dist/cjs/components/shell.context.js.map +3 -3
- package/dist/cjs/components/shell.d.ts +14 -6
- package/dist/cjs/components/shell.d.ts.map +1 -1
- package/dist/cjs/components/shell.js +1 -1
- package/dist/cjs/components/shell.js.map +3 -3
- package/dist/cjs/components/sidebar.d.ts.map +1 -1
- package/dist/cjs/components/sidebar.js +1 -1
- package/dist/cjs/components/sidebar.js.map +3 -3
- package/dist/cjs/components/sidebar.props.d.ts +1 -1
- package/dist/cjs/components/sidebar.props.js +1 -1
- package/dist/cjs/components/sidebar.props.js.map +2 -2
- package/dist/esm/components/_internal/shell-bottom.d.ts +2 -0
- package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-bottom.js +1 -1
- package/dist/esm/components/_internal/shell-bottom.js.map +3 -3
- package/dist/esm/components/_internal/shell-inspector.d.ts +2 -0
- package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-inspector.js +1 -1
- package/dist/esm/components/_internal/shell-inspector.js.map +3 -3
- package/dist/esm/components/_internal/shell-sidebar.d.ts +2 -0
- package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -1
- package/dist/esm/components/_internal/shell-sidebar.js +1 -1
- package/dist/esm/components/_internal/shell-sidebar.js.map +3 -3
- package/dist/esm/components/shell.context.d.ts +13 -0
- package/dist/esm/components/shell.context.d.ts.map +1 -1
- package/dist/esm/components/shell.context.js +1 -1
- package/dist/esm/components/shell.context.js.map +3 -3
- package/dist/esm/components/shell.d.ts +14 -6
- package/dist/esm/components/shell.d.ts.map +1 -1
- package/dist/esm/components/shell.js +1 -1
- package/dist/esm/components/shell.js.map +3 -3
- package/dist/esm/components/sidebar.d.ts.map +1 -1
- package/dist/esm/components/sidebar.js +1 -1
- package/dist/esm/components/sidebar.js.map +3 -3
- package/dist/esm/components/sidebar.props.d.ts +1 -1
- package/dist/esm/components/sidebar.props.js +1 -1
- package/dist/esm/components/sidebar.props.js.map +2 -2
- package/package.json +1 -1
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/_internal/base-button.css +6 -32
- package/src/components/_internal/base-card.css +0 -3
- package/src/components/_internal/base-checkbox.css +0 -2
- package/src/components/_internal/base-radio.css +0 -2
- package/src/components/_internal/shell-bottom.tsx +15 -1
- package/src/components/_internal/shell-inspector.tsx +15 -1
- package/src/components/_internal/shell-sidebar.tsx +15 -1
- package/src/components/avatar.css +0 -1
- package/src/components/segmented-control.css +37 -37
- package/src/components/select.css +0 -2
- package/src/components/shell.context.tsx +14 -0
- package/src/components/shell.css +51 -28
- package/src/components/shell.tsx +150 -81
- package/src/components/sidebar.css +110 -6
- package/src/components/sidebar.props.tsx +1 -1
- package/src/components/sidebar.tsx +45 -2
- package/src/components/text-area.css +0 -1
- package/src/components/text-field.css +0 -1
- package/styles.css +187 -133
|
@@ -29,6 +29,8 @@ type BottomPublicProps = PaneBaseProps & (BottomControlledProps | BottomUncontro
|
|
|
29
29
|
onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;
|
|
30
30
|
sizeUpdate?: 'throttle' | 'debounce';
|
|
31
31
|
sizeUpdateMs?: number;
|
|
32
|
+
/** When true, adds margin and triggers gray backdrop on Shell. */
|
|
33
|
+
inset?: boolean;
|
|
32
34
|
};
|
|
33
35
|
type BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & {
|
|
34
36
|
Handle: typeof BottomHandle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI1H,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,qBAAqB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC/K,KAAK,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC3I,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAChF,KAAK,2BAA2B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,iBAAiB,GAAG,aAAa,GACpC,CAAC,qBAAqB,GAAG,uBAAuB,CAAC,GACjD,CAAC,yBAAyB,GAAG,2BAA2B,CAAC,GAAG;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI1H,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,qBAAqB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC/K,KAAK,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC3I,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAChF,KAAK,2BAA2B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,iBAAiB,GAAG,aAAa,GACpC,CAAC,qBAAqB,GAAG,uBAAuB,CAAC,GACjD,CAAC,yBAAyB,GAAG,2BAA2B,CAAC,GAAG;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,KAAK,eAAe,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,YAAY,CAAA;CAAE,CAAC;AAiBlJ,eAAO,MAAM,MAAM,EAsWb,eAAe,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Ce=Object.create;var g=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,Te=Object.prototype.hasOwnProperty;var Ne=(s,i)=>{for(var l in i)g(s,l,{get:i[l],enumerable:!0})},se=(s,i,l,P)=>{if(i&&typeof i=="object"||typeof i=="function")for(let d of Ee(i))!Te.call(s,d)&&d!==l&&g(s,d,{get:()=>i[d],enumerable:!(P=ve(i,d))||P.enumerable});return s};var A=(s,i,l)=>(l=s!=null?Ce(Oe(s)):{},se(i||!s||!s.__esModule?g(l,"default",{value:s,enumerable:!0}):l,s)),ke=s=>se(g({},"__esModule",{value:!0}),s);var De={};Ne(De,{Bottom:()=>F});module.exports=ke(De);var t=A(require("react")),ie=A(require("classnames")),j=A(require("../sheet.js")),ae=require("../visually-hidden.js"),C=require("../shell.context.js"),v=require("../shell.hooks.js"),le=require("./shell-resize.js"),b=require("./shell-handles.js"),He=require("../shell.types.js"),z=require("./shell-prop-helpers.js"),de=require("../../helpers/normalize-to-px.js");const we=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style","inset"],F=t.forwardRef((s,i)=>{const{className:l,presentation:P="fixed",defaultOpen:d,open:u,onOpenChange:y,expandedSize:E=200,minSize:c=100,maxSize:m=400,resizable:O=!1,collapsible:ue=!0,onExpand:q,onCollapse:K,onResize:T,onResizeStart:pe,onResizeEnd:ce,snapPoints:me,snapTolerance:fe,collapseThreshold:be,paneId:N,persistence:k,children:ye,style:he,size:Y,defaultSize:G,onSizeChange:w,sizeUpdate:D,sizeUpdateMs:V=50,inset:H}=s,ze=(0,z.extractPaneDomProps)(s,we),o=(0,C.useShell)(),{registerInset:J,unregisterInset:Q}=(0,C.useInset)();t.useEffect(()=>{if(H)return J("bottom"),()=>Q("bottom")},[H,J,Q]);const I=(0,v.useResponsivePresentation)(P),B=I==="overlay",Pe=I==="stacked",p=t.useRef(null),Be=t.useCallback(e=>{p.current=e,typeof i=="function"?i(e):i&&(i.current=e)},[i]),W=t.Children.toArray(ye),X=W.filter(e=>t.isValidElement(e)&&e.type===b.BottomHandle),Z=W.filter(e=>!(t.isValidElement(e)&&e.type===b.BottomHandle)),Me=t.useMemo(()=>(0,z.mapResponsiveBooleanToPaneMode)(u),[u]),Re=t.useMemo(()=>(0,z.mapResponsiveBooleanToPaneMode)(d),[d]),Se=typeof u=="object"&&u!==null;(0,v.useResponsiveInitialState)({controlledValue:Me,defaultValue:Re,currentValue:o.bottomMode,setValue:o.setBottomMode,breakpointReady:o.currentBreakpointReady,controlledIsResponsive:Se,onResponsiveChange:e=>y?.(e==="expanded",{reason:"responsive"}),onInit:e=>{typeof u>"u"&&y?.(e==="expanded",{reason:"init"})}});const f=t.useRef(null);t.useEffect(()=>()=>{f.current&&(clearTimeout(f.current),f.current=null)},[w,D,V]);const M=t.useMemo(()=>{const e=w,r=D,a=V??50;if(!e)return()=>{};if(r==="debounce")return(n,h)=>{f.current&&clearTimeout(f.current),f.current=setTimeout(()=>{e(n,h),f.current=null},a)};if(r==="throttle"){let n=0;return(h,ge)=>{const re=Date.now();re-n>=a&&(n=re,e(h,ge))}}return(n,h)=>e(n,h)},[w,D,V]),R=t.useRef(null);t.useEffect(()=>{const e=typeof u<"u";if(R.current===null){R.current=e;return}R.current!==e&&(console.warn("Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported."),R.current=e)},[u]);const ee=t.useRef(!1),U=t.useRef(null);t.useEffect(()=>{!ee.current&&typeof u>"u"&&d&&o.bottomMode==="expanded"&&(y?.(!0,{reason:"init"}),ee.current=!0),typeof u>"u"&&(U.current!==null&&U.current!==o.bottomMode&&y?.(o.bottomMode==="expanded",{reason:"toggle"}),U.current=o.bottomMode)},[o.bottomMode,u,d,y]);const te=t.useRef(q),oe=t.useRef(K);t.useLayoutEffect(()=>{te.current=q,oe.current=K});const S=t.useRef(null),ne=t.useRef(!1);t.useEffect(()=>{const e=o.bottomMode;if(!o.currentBreakpointReady){S.current=e;return}if(!ne.current){ne.current=!0,S.current=e;return}const r=S.current;r!==null&&r!==e&&(e==="expanded"?te.current?.():e==="collapsed"&&oe.current?.(),S.current=e)},[o.bottomMode,o.currentBreakpointReady]);const _=o.bottomMode==="expanded",x=t.useMemo(()=>{if(!N||k)return k;const e=`kookie-ui:shell:bottom:${N}`;return{load:()=>{if(!(typeof window>"u"))try{const a=window.localStorage.getItem(e);return a?Number(a):void 0}catch{return}},save:a=>{if(!(typeof window>"u"))try{window.localStorage.setItem(e,String(a))}catch{}}}},[N,k]);t.useEffect(()=>{let e=!0;if(!O||!x?.load||B)return;const r=x.load(),a=n=>{!e||typeof n!="number"||!p.current||(p.current.style.setProperty("--bottom-size",`${n}px`),T?.(n))};return r instanceof Promise?r.then(a).catch(n=>{}):a(r),()=>{e=!1}},[O,x,T,B]);const xe=O&&!B&&_?t.createElement(le.PaneResizeContext.Provider,{value:{containerRef:p,cssVarName:"--bottom-size",minSize:c,maxSize:m,defaultSize:E,orientation:"horizontal",edge:"start",computeNext:(e,r,a)=>{const n=e-r;return a-n},onResize:T,onResizeStart:pe,onResizeEnd:e=>{ce?.(e),M(e,{reason:"resize"}),x?.save?.(e)},target:"bottom",collapsible:ue,snapPoints:me,snapTolerance:fe??8,collapseThreshold:be,requestCollapse:()=>o.setBottomMode("collapsed"),requestToggle:()=>o.togglePane("bottom")}},X.length>0?X.map((e,r)=>t.cloneElement(e,{key:e.key??r})):t.createElement(b.PaneHandle,null)):null,$=t.useCallback(e=>(0,de.normalizeToPx)(e,"vertical"),[]);t.useEffect(()=>{if(p.current&&typeof Y>"u"&&typeof G<"u"){const e=$(G);if(typeof e=="number"&&Number.isFinite(e)){const n=Math.min((typeof m=="number"?m:void 0)??e,Math.max((typeof c=="number"?c:void 0)??e,e));p.current.style.setProperty("--bottom-size",`${n}px`),M(n,{reason:"init"})}}},[]);const L=Y;if(t.useEffect(()=>{if(!p.current||typeof L>"u")return;const e=$(L);if(typeof e=="number"&&Number.isFinite(e)){const n=Math.min((typeof m=="number"?m:void 0)??e,Math.max((typeof c=="number"?c:void 0)??e,e));p.current.style.setProperty("--bottom-size",`${n}px`),M(n,{reason:"controlled"})}},[L,c,m,$,M]),B){const e=o.bottomMode==="expanded";return t.createElement(j.Root,{open:e,onOpenChange:r=>o.setBottomMode(r?"expanded":"collapsed")},t.createElement(j.Content,{side:"bottom",style:{padding:0},height:{initial:`${E}px`}},t.createElement(ae.VisuallyHidden,null,t.createElement(j.Title,null,"Bottom panel")),Z))}return t.createElement("div",{...ze,ref:Be,className:(0,ie.default)("rt-ShellBottom",l),"data-mode":o.bottomMode,"data-peek":o.peekTarget==="bottom"||void 0,"data-presentation":o.currentBreakpointReady?I:void 0,"data-open":o.currentBreakpointReady&&Pe&&_||void 0,"data-inset":H||void 0,style:{...he,"--bottom-size":`${E}px`,"--bottom-min-size":`${c}px`,"--bottom-max-size":`${m}px`}},t.createElement("div",{className:"rt-ShellBottomContent","data-visible":_||void 0},Z),xe)});F.displayName="Shell.Bottom",F.Handle=b.BottomHandle;
|
|
2
2
|
//# sourceMappingURL=shell-bottom.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/_internal/shell-bottom.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { BottomHandle, PaneHandle } from './shell-handles.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';\nimport { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';\nimport { normalizeToPx } from '../../helpers/normalize-to-px.js';\n\ntype BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };\ntype BottomUncontrolledProps = { defaultOpen?: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };\ntype BottomSizeControlledProps = { size: number | string; defaultSize?: never };\ntype BottomSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype BottomSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };\ntype BottomPublicProps = PaneBaseProps &\n (BottomControlledProps | BottomUncontrolledProps) &\n (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {\n onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n };\n\ntype BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };\n\nconst BOTTOM_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'defaultOpen',\n 'open',\n 'onOpenChange',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n] as const satisfies readonly (keyof BottomPublicProps)[];\n\nexport const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = 'fixed',\n defaultOpen,\n open,\n onOpenChange,\n expandedSize = 200,\n minSize = 100,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n size,\n defaultSize,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n } = initialProps;\n const bottomDomProps = extractPaneDomProps(initialProps, BOTTOM_DOM_PROP_KEYS);\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));\n\n // Throttled/debounced emitter for onSizeChange\n const normalizedControlledOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(open), [open]);\n const normalizedDefaultOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(defaultOpen), [defaultOpen]);\n const openIsResponsive = typeof open === 'object' && open !== null;\n useResponsiveInitialState<PaneMode>({\n controlledValue: normalizedControlledOpen,\n defaultValue: normalizedDefaultOpen,\n currentValue: shell.bottomMode,\n setValue: shell.setBottomMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: openIsResponsive,\n onResponsiveChange: (next) => onOpenChange?.(next === 'expanded', { reason: 'responsive' }),\n onInit: (initial) => {\n if (typeof open === 'undefined') {\n onOpenChange?.(initial === 'expanded', { reason: 'init' });\n }\n },\n });\n\n // Ref for debounce cleanup\n const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n // Cleanup debounce timeout on unmount or when dependencies change\n React.useEffect(() => {\n return () => {\n if (debounceTimeoutRef.current) {\n clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = null;\n }\n };\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n // Throttled/debounced emitter for onSizeChange\n const emitSizeChange = React.useMemo(() => {\n const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);\n const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';\n const ms = sizeUpdateMs ?? 50;\n if (!cb) return () => {};\n if (strategy === 'debounce') {\n return (s: number, meta: BottomSizeChangeMeta) => {\n if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = setTimeout(() => {\n cb(s, meta);\n debounceTimeoutRef.current = null;\n }, ms);\n };\n }\n if (strategy === 'throttle') {\n let last = 0;\n return (s: number, meta: BottomSizeChangeMeta) => {\n const now = Date.now();\n if (now - last >= ms) {\n last = now;\n cb(s, meta);\n }\n };\n }\n return (s: number, meta: BottomSizeChangeMeta) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `open` and `defaultOpen`. Choose one.');\n }\n if (typeof size !== 'undefined' && typeof defaultSize !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `size` and `defaultSize`. Choose one.');\n }\n }\n\n React.useEffect(() => {\n const isControlled = typeof open !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [open]);\n\n const initNotifiedRef = React.useRef(false);\n const lastBottomModeRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.bottomMode === 'expanded') {\n onOpenChange?.(true, { reason: 'init' });\n initNotifiedRef.current = true;\n }\n if (typeof open === 'undefined') {\n if (lastBottomModeRef.current !== null && lastBottomModeRef.current !== shell.bottomMode) {\n onOpenChange?.(shell.bottomMode === 'expanded', { reason: 'toggle' });\n }\n lastBottomModeRef.current = shell.bottomMode;\n }\n }, [shell.bottomMode, open, defaultOpen, onOpenChange]);\n\n // Track previous mode to only fire callbacks on actual user-initiated state transitions.\n // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState\n // is complete before enabling callbacks. This avoids spurious callbacks during initialization.\n // Use callback refs to avoid re-running effect when inline callbacks change.\n const onExpandRef = React.useRef(onExpand);\n const onCollapseRef = React.useRef(onCollapse);\n React.useLayoutEffect(() => {\n onExpandRef.current = onExpand;\n onCollapseRef.current = onCollapse;\n });\n\n const prevBottomModeRef = React.useRef<PaneMode | null>(null);\n const hasInitializedRef = React.useRef(false);\n React.useEffect(() => {\n const currentMode = shell.bottomMode;\n\n // Wait for breakpoint to be ready before enabling callbacks\n if (!shell.currentBreakpointReady) {\n prevBottomModeRef.current = currentMode;\n return;\n }\n\n // Skip the first run after breakpoint is ready - this captures the post-sync state\n if (!hasInitializedRef.current) {\n hasInitializedRef.current = true;\n prevBottomModeRef.current = currentMode;\n return;\n }\n\n const prevMode = prevBottomModeRef.current;\n\n // Only fire on actual state transitions\n if (prevMode !== null && prevMode !== currentMode) {\n if (currentMode === 'expanded') {\n onExpandRef.current?.();\n } else if (currentMode === 'collapsed') {\n onCollapseRef.current?.();\n }\n prevBottomModeRef.current = currentMode;\n }\n }, [shell.bottomMode, shell.currentBreakpointReady]);\n\n const isExpanded = shell.bottomMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:bottom:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n try {\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to load persisted size', err);\n }\n return undefined;\n }\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n try {\n window.localStorage.setItem(key, String(size));\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to save persisted size', err);\n }\n }\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n if (!resizable || !persistenceAdapter?.load || isOverlay) return undefined;\n const loaded = persistenceAdapter.load();\n const applyLoaded = (value?: number) => {\n if (!mounted || typeof value !== 'number' || !localRef.current) return;\n localRef.current.style.setProperty('--bottom-size', `${value}px`);\n onResize?.(value);\n };\n if (loaded instanceof Promise) {\n loaded.then(applyLoaded).catch((err) => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to load persisted size', err);\n }\n });\n } else {\n applyLoaded(loaded);\n }\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--bottom-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'horizontal',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const delta = client - startClient;\n return startSize - delta;\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n emitSizeChange(size, { reason: 'resize' });\n persistenceAdapter?.save?.(size);\n },\n target: 'bottom',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setBottomMode('collapsed'),\n requestToggle: () => shell.togglePane('bottom'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)\n // Normalize CSS lengths to px helper\n const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'vertical'), []);\n\n // Apply defaultSize on mount when uncontrolled (moved above overlay return)\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {\n const px = normalizeSizeToPx(defaultSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'init' });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled size sync (moved above overlay return)\n const controlledSize = size;\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof controlledSize === 'undefined') return;\n const px = normalizeSizeToPx(controlledSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.bottomMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"bottom\" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Bottom panel</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...bottomDomProps}\n ref={setRef}\n className={classNames('rt-ShellBottom', className)}\n data-mode={shell.bottomMode}\n data-peek={shell.peekTarget === 'bottom' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--bottom-size' as any]: `${expandedSize}px`,\n ['--bottom-min-size' as any]: `${minSize}px`,\n ['--bottom-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellBottomContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as BottomComponent;\nBottom.displayName = 'Shell.Bottom';\nBottom.Handle = BottomHandle;\n"],
|
|
5
|
-
"mappings": "ykBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,YAAAE,IAAA,eAAAC,GAAAH,IAAA,IAAAI,EAAuB,oBACvBC,GAAuB,yBACvBC,EAAuB,0BACvBC,GAA+B,iCAC/BC,
|
|
6
|
-
"names": ["shell_bottom_exports", "__export", "Bottom", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "import_shell_prop_helpers", "import_normalize_to_px", "BOTTOM_DOM_PROP_KEYS", "initialProps", "ref", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "size", "defaultSize", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "bottomDomProps", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "normalizedControlledOpen", "normalizedDefaultOpen", "openIsResponsive", "next", "initial", "debounceTimeoutRef", "emitSizeChange", "cb", "strategy", "ms", "s", "meta", "last", "now", "wasControlledRef", "isControlled", "initNotifiedRef", "lastBottomModeRef", "onExpandRef", "onCollapseRef", "prevBottomModeRef", "hasInitializedRef", "currentMode", "prevMode", "isExpanded", "persistenceAdapter", "key", "v", "mounted", "loaded", "applyLoaded", "value", "err", "handleEl", "client", "startClient", "startSize", "delta", "i", "normalizeSizeToPx", "px", "clamped", "controlledSize", "o", "classNames"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell, useInset } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { BottomHandle, PaneHandle } from './shell-handles.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';\nimport { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';\nimport { normalizeToPx } from '../../helpers/normalize-to-px.js';\n\ntype BottomOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype BottomControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; defaultOpen?: never };\ntype BottomUncontrolledProps = { defaultOpen?: boolean; onOpenChange?: (open: boolean, meta: BottomOpenChangeMeta) => void; open?: never };\ntype BottomSizeControlledProps = { size: number | string; defaultSize?: never };\ntype BottomSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype BottomSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };\ntype BottomPublicProps = PaneBaseProps &\n (BottomControlledProps | BottomUncontrolledProps) &\n (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {\n onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n /** When true, adds margin and triggers gray backdrop on Shell. */\n inset?: boolean;\n };\n\ntype BottomComponent = React.ForwardRefExoticComponent<BottomPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };\n\nconst BOTTOM_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'defaultOpen',\n 'open',\n 'onOpenChange',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n 'inset',\n] as const satisfies readonly (keyof BottomPublicProps)[];\n\nexport const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = 'fixed',\n defaultOpen,\n open,\n onOpenChange,\n expandedSize = 200,\n minSize = 100,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n size,\n defaultSize,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n inset,\n } = initialProps;\n const bottomDomProps = extractPaneDomProps(initialProps, BOTTOM_DOM_PROP_KEYS);\n const shell = useShell();\n const { registerInset, unregisterInset } = useInset();\n\n // Register/unregister inset\n React.useEffect(() => {\n if (inset) {\n registerInset('bottom');\n return () => unregisterInset('bottom');\n }\n }, [inset, registerInset, unregisterInset]);\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));\n\n // Throttled/debounced emitter for onSizeChange\n const normalizedControlledOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(open), [open]);\n const normalizedDefaultOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(defaultOpen), [defaultOpen]);\n const openIsResponsive = typeof open === 'object' && open !== null;\n useResponsiveInitialState<PaneMode>({\n controlledValue: normalizedControlledOpen,\n defaultValue: normalizedDefaultOpen,\n currentValue: shell.bottomMode,\n setValue: shell.setBottomMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: openIsResponsive,\n onResponsiveChange: (next) => onOpenChange?.(next === 'expanded', { reason: 'responsive' }),\n onInit: (initial) => {\n if (typeof open === 'undefined') {\n onOpenChange?.(initial === 'expanded', { reason: 'init' });\n }\n },\n });\n\n // Ref for debounce cleanup\n const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n // Cleanup debounce timeout on unmount or when dependencies change\n React.useEffect(() => {\n return () => {\n if (debounceTimeoutRef.current) {\n clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = null;\n }\n };\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n // Throttled/debounced emitter for onSizeChange\n const emitSizeChange = React.useMemo(() => {\n const cb = onSizeChange as undefined | ((s: number, meta: BottomSizeChangeMeta) => void);\n const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';\n const ms = sizeUpdateMs ?? 50;\n if (!cb) return () => {};\n if (strategy === 'debounce') {\n return (s: number, meta: BottomSizeChangeMeta) => {\n if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = setTimeout(() => {\n cb(s, meta);\n debounceTimeoutRef.current = null;\n }, ms);\n };\n }\n if (strategy === 'throttle') {\n let last = 0;\n return (s: number, meta: BottomSizeChangeMeta) => {\n const now = Date.now();\n if (now - last >= ms) {\n last = now;\n cb(s, meta);\n }\n };\n }\n return (s: number, meta: BottomSizeChangeMeta) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `open` and `defaultOpen`. Choose one.');\n }\n if (typeof size !== 'undefined' && typeof defaultSize !== 'undefined') {\n console.error('Shell.Bottom: Do not pass both `size` and `defaultSize`. Choose one.');\n }\n }\n\n React.useEffect(() => {\n const isControlled = typeof open !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [open]);\n\n const initNotifiedRef = React.useRef(false);\n const lastBottomModeRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.bottomMode === 'expanded') {\n onOpenChange?.(true, { reason: 'init' });\n initNotifiedRef.current = true;\n }\n if (typeof open === 'undefined') {\n if (lastBottomModeRef.current !== null && lastBottomModeRef.current !== shell.bottomMode) {\n onOpenChange?.(shell.bottomMode === 'expanded', { reason: 'toggle' });\n }\n lastBottomModeRef.current = shell.bottomMode;\n }\n }, [shell.bottomMode, open, defaultOpen, onOpenChange]);\n\n // Track previous mode to only fire callbacks on actual user-initiated state transitions.\n // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState\n // is complete before enabling callbacks. This avoids spurious callbacks during initialization.\n // Use callback refs to avoid re-running effect when inline callbacks change.\n const onExpandRef = React.useRef(onExpand);\n const onCollapseRef = React.useRef(onCollapse);\n React.useLayoutEffect(() => {\n onExpandRef.current = onExpand;\n onCollapseRef.current = onCollapse;\n });\n\n const prevBottomModeRef = React.useRef<PaneMode | null>(null);\n const hasInitializedRef = React.useRef(false);\n React.useEffect(() => {\n const currentMode = shell.bottomMode;\n\n // Wait for breakpoint to be ready before enabling callbacks\n if (!shell.currentBreakpointReady) {\n prevBottomModeRef.current = currentMode;\n return;\n }\n\n // Skip the first run after breakpoint is ready - this captures the post-sync state\n if (!hasInitializedRef.current) {\n hasInitializedRef.current = true;\n prevBottomModeRef.current = currentMode;\n return;\n }\n\n const prevMode = prevBottomModeRef.current;\n\n // Only fire on actual state transitions\n if (prevMode !== null && prevMode !== currentMode) {\n if (currentMode === 'expanded') {\n onExpandRef.current?.();\n } else if (currentMode === 'collapsed') {\n onCollapseRef.current?.();\n }\n prevBottomModeRef.current = currentMode;\n }\n }, [shell.bottomMode, shell.currentBreakpointReady]);\n\n const isExpanded = shell.bottomMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:bottom:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n try {\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to load persisted size', err);\n }\n return undefined;\n }\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n try {\n window.localStorage.setItem(key, String(size));\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to save persisted size', err);\n }\n }\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n if (!resizable || !persistenceAdapter?.load || isOverlay) return undefined;\n const loaded = persistenceAdapter.load();\n const applyLoaded = (value?: number) => {\n if (!mounted || typeof value !== 'number' || !localRef.current) return;\n localRef.current.style.setProperty('--bottom-size', `${value}px`);\n onResize?.(value);\n };\n if (loaded instanceof Promise) {\n loaded.then(applyLoaded).catch((err) => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Bottom: failed to load persisted size', err);\n }\n });\n } else {\n applyLoaded(loaded);\n }\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--bottom-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'horizontal',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const delta = client - startClient;\n return startSize - delta;\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n emitSizeChange(size, { reason: 'resize' });\n persistenceAdapter?.save?.(size);\n },\n target: 'bottom',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setBottomMode('collapsed'),\n requestToggle: () => shell.togglePane('bottom'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n // Strip control/size props from DOM spread (moved above overlay return to keep hook order consistent)\n // Normalize CSS lengths to px helper\n const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'vertical'), []);\n\n // Apply defaultSize on mount when uncontrolled (moved above overlay return)\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {\n const px = normalizeSizeToPx(defaultSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'init' });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled size sync (moved above overlay return)\n const controlledSize = size;\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof controlledSize === 'undefined') return;\n const px = normalizeSizeToPx(controlledSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--bottom-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.bottomMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"bottom\" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Bottom panel</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...bottomDomProps}\n ref={setRef}\n className={classNames('rt-ShellBottom', className)}\n data-mode={shell.bottomMode}\n data-peek={shell.peekTarget === 'bottom' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}\n data-inset={inset || undefined}\n style={{\n ...style,\n ['--bottom-size' as any]: `${expandedSize}px`,\n ['--bottom-min-size' as any]: `${minSize}px`,\n ['--bottom-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellBottomContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as BottomComponent;\nBottom.displayName = 'Shell.Bottom';\nBottom.Handle = BottomHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["shell_bottom_exports", "__export", "Bottom", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "import_shell_prop_helpers", "import_normalize_to_px", "BOTTOM_DOM_PROP_KEYS", "initialProps", "ref", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "size", "defaultSize", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "inset", "bottomDomProps", "shell", "registerInset", "unregisterInset", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "normalizedControlledOpen", "normalizedDefaultOpen", "openIsResponsive", "next", "initial", "debounceTimeoutRef", "emitSizeChange", "cb", "strategy", "ms", "s", "meta", "last", "now", "wasControlledRef", "isControlled", "initNotifiedRef", "lastBottomModeRef", "onExpandRef", "onCollapseRef", "prevBottomModeRef", "hasInitializedRef", "currentMode", "prevMode", "isExpanded", "persistenceAdapter", "key", "v", "mounted", "loaded", "applyLoaded", "value", "err", "handleEl", "client", "startClient", "startSize", "delta", "i", "normalizeSizeToPx", "px", "clamped", "controlledSize", "o", "classNames"]
|
|
7
7
|
}
|
|
@@ -29,6 +29,8 @@ type InspectorPublicProps = PaneBaseProps & (InspectorControlledProps | Inspecto
|
|
|
29
29
|
onSizeChange?: (size: number, meta: InspectorSizeChangeMeta) => void;
|
|
30
30
|
sizeUpdate?: 'throttle' | 'debounce';
|
|
31
31
|
sizeUpdateMs?: number;
|
|
32
|
+
/** When true, adds margin and triggers gray backdrop on Shell. */
|
|
33
|
+
inset?: boolean;
|
|
32
34
|
};
|
|
33
35
|
type InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & {
|
|
34
36
|
Handle: typeof InspectorHandle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell-inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI1H,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC5E,KAAK,wBAAwB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrL,KAAK,0BAA0B,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACxL,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC5E,KAAK,4BAA4B,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,8BAA8B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACtF,KAAK,oBAAoB,GAAG,aAAa,GACvC,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,GACvD,CAAC,4BAA4B,GAAG,8BAA8B,CAAC,GAAG;IAChE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"shell-inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI1H,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC5E,KAAK,wBAAwB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrL,KAAK,0BAA0B,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACxL,KAAK,uBAAuB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC5E,KAAK,4BAA4B,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,8BAA8B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACtF,KAAK,oBAAoB,GAAG,aAAa,GACvC,CAAC,wBAAwB,GAAG,0BAA0B,CAAC,GACvD,CAAC,4BAA4B,GAAG,8BAA8B,CAAC,GAAG;IAChE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,KAAK,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,eAAe,CAAA;CAAE,CAAC;AAiB3J,eAAO,MAAM,SAAS,EAwWhB,kBAAkB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Ce=Object.create;var g=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var Oe=Object.getPrototypeOf,Te=Object.prototype.hasOwnProperty;var Ne=(s,i)=>{for(var l in i)g(s,l,{get:i[l],enumerable:!0})},se=(s,i,l,R)=>{if(i&&typeof i=="object"||typeof i=="function")for(let c of Ee(i))!Te.call(s,c)&&c!==l&&g(s,c,{get:()=>i[c],enumerable:!(R=ve(i,c))||R.enumerable});return s};var A=(s,i,l)=>(l=s!=null?Ce(Oe(s)):{},se(i||!s||!s.__esModule?g(l,"default",{value:s,enumerable:!0}):l,s)),ke=s=>se(g({},"__esModule",{value:!0}),s);var De={};Ne(De,{Inspector:()=>F});module.exports=ke(De);var n=A(require("react")),ie=A(require("classnames")),j=A(require("../sheet.js")),ae=require("../visually-hidden.js"),C=require("../shell.context.js"),v=require("../shell.hooks.js"),le=require("./shell-resize.js"),h=require("./shell-handles.js"),Be=require("../shell.types.js"),z=require("./shell-prop-helpers.js"),ce=require("../../helpers/normalize-to-px.js");const we=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style","inset"],F=n.forwardRef((s,i)=>{const{className:l,presentation:R={initial:"overlay",lg:"fixed"},defaultOpen:c,open:p,onOpenChange:P,expandedSize:E=320,minSize:f=200,maxSize:m=500,resizable:O=!1,collapsible:pe=!0,onExpand:q,onCollapse:K,onResize:T,onResizeStart:de,onResizeEnd:ue,snapPoints:fe,snapTolerance:me,collapseThreshold:ye,paneId:N,persistence:k,children:he,style:Pe,onSizeChange:w,sizeUpdate:D,sizeUpdateMs:V=50,size:Y,defaultSize:G,inset:B}=s,ze=(0,z.extractPaneDomProps)(s,we),t=(0,C.useShell)(),{registerInset:J,unregisterInset:Q}=(0,C.useInset)();n.useEffect(()=>{if(B)return J("inspector"),()=>Q("inspector")},[B,J,Q]);const H=(0,v.useResponsivePresentation)(R),I=H==="overlay",Re=H==="stacked",d=n.useRef(null),Ie=n.useCallback(e=>{d.current=e,typeof i=="function"?i(e):i&&(i.current=e)},[i]),W=n.Children.toArray(he),X=W.filter(e=>n.isValidElement(e)&&e.type===h.InspectorHandle),Z=W.filter(e=>!(n.isValidElement(e)&&e.type===h.InspectorHandle)),be=n.useMemo(()=>(0,z.mapResponsiveBooleanToPaneMode)(p),[p]),Me=n.useMemo(()=>(0,z.mapResponsiveBooleanToPaneMode)(c),[c]),Se=typeof p=="object"&&p!==null;(0,v.useResponsiveInitialState)({controlledValue:be,defaultValue:Me,currentValue:t.inspectorMode,setValue:t.setInspectorMode,breakpointReady:t.currentBreakpointReady,controlledIsResponsive:Se,onResponsiveChange:e=>P?.(e==="expanded",{reason:"responsive"}),onInit:e=>{typeof p>"u"&&P?.(e==="expanded",{reason:"init"})}});const y=n.useRef(null);n.useEffect(()=>()=>{y.current&&(clearTimeout(y.current),y.current=null)},[w,D,V]);const b=n.useMemo(()=>{const e=w,r=D,a=V??50;if(!e)return()=>{};if(r==="debounce")return(o,u)=>{y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{e(o,u),y.current=null},a)};if(r==="throttle"){let o=0;return(u,ge)=>{const re=Date.now();re-o>=a&&(o=re,e(u,ge))}}return(o,u)=>e(o,u)},[w,D,V]),M=n.useRef(null);n.useEffect(()=>{const e=typeof p<"u";if(M.current===null){M.current=e;return}M.current!==e&&(console.warn("Shell.Inspector: Switching between controlled and uncontrolled `open` is not supported."),M.current=e)},[p]);const ee=n.useRef(!1),U=n.useRef(null);n.useEffect(()=>{!ee.current&&typeof p>"u"&&c&&t.inspectorMode==="expanded"&&(P?.(!0,{reason:"init"}),ee.current=!0),typeof p>"u"&&(U.current!==null&&U.current!==t.inspectorMode&&P?.(t.inspectorMode==="expanded",{reason:"toggle"}),U.current=t.inspectorMode)},[t.inspectorMode,p,c,P]);const ne=n.useRef(q),te=n.useRef(K);n.useLayoutEffect(()=>{ne.current=q,te.current=K});const S=n.useRef(null),oe=n.useRef(!1);n.useEffect(()=>{const e=t.inspectorMode;if(!t.currentBreakpointReady){S.current=e;return}if(!oe.current){oe.current=!0,S.current=e;return}const r=S.current;r!==null&&r!==e&&(e==="expanded"?ne.current?.():e==="collapsed"&&te.current?.(),S.current=e)},[t.inspectorMode,t.currentBreakpointReady]);const _=t.inspectorMode==="expanded",x=n.useMemo(()=>{if(!N||k)return k;const e=`kookie-ui:shell:inspector:${N}`;return{load:()=>{if(!(typeof window>"u"))try{const a=window.localStorage.getItem(e);return a?Number(a):void 0}catch{return}},save:a=>{if(!(typeof window>"u"))try{window.localStorage.setItem(e,String(a))}catch{}}}},[N,k]);n.useEffect(()=>{let e=!0;if(!O||!x?.load||I)return;const r=x.load(),a=o=>{!e||typeof o!="number"||!d.current||(d.current.style.setProperty("--inspector-size",`${o}px`),T?.(o))};return r instanceof Promise?r.then(a).catch(o=>{}):a(r),()=>{e=!1}},[O,x,T,I]);const xe=O&&!I&&_?n.createElement(le.PaneResizeContext.Provider,{value:{containerRef:d,cssVarName:"--inspector-size",minSize:f,maxSize:m,defaultSize:E,orientation:"vertical",edge:"start",computeNext:(e,r,a)=>{const o=getComputedStyle(d.current).direction==="rtl",u=e-r;return a+(o?u:-u)},onResize:T,onResizeStart:de,onResizeEnd:e=>{ue?.(e),b(e,{reason:"resize"}),x?.save?.(e)},target:"inspector",collapsible:pe,snapPoints:fe,snapTolerance:me??8,collapseThreshold:ye,requestCollapse:()=>t.setInspectorMode("collapsed"),requestToggle:()=>t.togglePane("inspector")}},X.length>0?X.map((e,r)=>n.cloneElement(e,{key:e.key??r})):n.createElement(h.PaneHandle,null)):null,$=n.useCallback(e=>(0,ce.normalizeToPx)(e,"horizontal"),[]);n.useEffect(()=>{if(d.current&&typeof Y>"u"&&typeof G<"u"){const e=$(G);if(typeof e=="number"&&Number.isFinite(e)){const o=Math.min((typeof m=="number"?m:void 0)??e,Math.max((typeof f=="number"?f:void 0)??e,e));d.current.style.setProperty("--inspector-size",`${o}px`),b(o,{reason:"init"})}}},[]);const L=Y;if(n.useEffect(()=>{if(!d.current||typeof L>"u")return;const e=$(L);if(typeof e=="number"&&Number.isFinite(e)){const o=Math.min((typeof m=="number"?m:void 0)??e,Math.max((typeof f=="number"?f:void 0)??e,e));d.current.style.setProperty("--inspector-size",`${o}px`),b(o,{reason:"controlled"})}},[L,f,m,$,b]),I){const e=t.inspectorMode==="expanded";return n.createElement(j.Root,{open:e,onOpenChange:r=>t.setInspectorMode(r?"expanded":"collapsed")},n.createElement(j.Content,{side:"end",style:{padding:0},width:{initial:`${E}px`}},n.createElement(ae.VisuallyHidden,null,n.createElement(j.Title,null,"Inspector")),Z))}return n.createElement("div",{...ze,ref:Ie,className:(0,ie.default)("rt-ShellInspector",l),"data-mode":t.inspectorMode,"data-peek":t.peekTarget==="inspector"||void 0,"data-presentation":t.currentBreakpointReady?H:void 0,"data-open":t.currentBreakpointReady&&Re&&_||void 0,"data-inset":B||void 0,style:{...Pe,"--inspector-size":`${E}px`,"--inspector-min-size":`${f}px`,"--inspector-max-size":`${m}px`}},n.createElement("div",{className:"rt-ShellInspectorContent","data-visible":_||void 0},Z),xe)});F.displayName="Shell.Inspector",F.Handle=h.InspectorHandle;
|
|
2
2
|
//# sourceMappingURL=shell-inspector.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/_internal/shell-inspector.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { InspectorHandle, PaneHandle } from './shell-handles.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';\nimport { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';\nimport { normalizeToPx } from '../../helpers/normalize-to-px.js';\n\ntype InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };\ntype InspectorUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; open?: never };\ntype InspectorSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };\ntype InspectorSizeControlledProps = { size: number | string; defaultSize?: never };\ntype InspectorSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype InspectorPublicProps = PaneBaseProps &\n (InspectorControlledProps | InspectorUncontrolledProps) &\n (InspectorSizeControlledProps | InspectorSizeUncontrolledProps) & {\n onSizeChange?: (size: number, meta: InspectorSizeChangeMeta) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n };\n\ntype InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };\n\nconst INSPECTOR_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'defaultOpen',\n 'open',\n 'onOpenChange',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n] as const satisfies readonly (keyof InspectorPublicProps)[];\n\nexport const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = { initial: 'overlay', lg: 'fixed' },\n defaultOpen,\n open,\n onOpenChange,\n expandedSize = 320,\n minSize = 200,\n maxSize = 500,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n size,\n defaultSize,\n } = initialProps;\n const inspectorDomProps = extractPaneDomProps(initialProps, INSPECTOR_DOM_PROP_KEYS);\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === InspectorHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === InspectorHandle));\n\n // Throttled/debounced emitter for onSizeChange\n const normalizedControlledOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(open), [open]);\n const normalizedDefaultOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(defaultOpen), [defaultOpen]);\n const openIsResponsive = typeof open === 'object' && open !== null;\n useResponsiveInitialState<PaneMode>({\n controlledValue: normalizedControlledOpen,\n defaultValue: normalizedDefaultOpen,\n currentValue: shell.inspectorMode,\n setValue: shell.setInspectorMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: openIsResponsive,\n onResponsiveChange: (next) => onOpenChange?.(next === 'expanded', { reason: 'responsive' }),\n onInit: (initial) => {\n if (typeof open === 'undefined') {\n onOpenChange?.(initial === 'expanded', { reason: 'init' });\n }\n },\n });\n\n // Ref for debounce cleanup\n const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n // Cleanup debounce timeout on unmount or when dependencies change\n React.useEffect(() => {\n return () => {\n if (debounceTimeoutRef.current) {\n clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = null;\n }\n };\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n // Throttled/debounced emitter for onSizeChange\n const emitSizeChange = React.useMemo(() => {\n const cb = onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);\n const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';\n const ms = sizeUpdateMs ?? 50;\n if (!cb) return () => {};\n if (strategy === 'debounce') {\n return (s: number, meta: InspectorSizeChangeMeta) => {\n if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = setTimeout(() => {\n cb(s, meta);\n debounceTimeoutRef.current = null;\n }, ms);\n };\n }\n if (strategy === 'throttle') {\n let last = 0;\n return (s: number, meta: InspectorSizeChangeMeta) => {\n const now = Date.now();\n if (now - last >= ms) {\n last = now;\n cb(s, meta);\n }\n };\n }\n return (s: number, meta: InspectorSizeChangeMeta) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {\n console.error('Shell.Inspector: Do not pass both `open` and `defaultOpen`. Choose one.');\n }\n }\n\n // Warn on controlled/uncontrolled mode switch\n React.useEffect(() => {\n const isControlled = typeof open !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Inspector: Switching between controlled and uncontrolled `open` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [open]);\n\n const initNotifiedRef = React.useRef(false);\n const lastInspectorModeRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n // Notify init open\n if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.inspectorMode === 'expanded') {\n onOpenChange?.(true, { reason: 'init' });\n initNotifiedRef.current = true;\n }\n\n // Notify toggles when uncontrolled (avoid double-notify after responsive change)\n if (typeof open === 'undefined') {\n if (lastInspectorModeRef.current !== null && lastInspectorModeRef.current !== shell.inspectorMode) {\n onOpenChange?.(shell.inspectorMode === 'expanded', { reason: 'toggle' });\n }\n lastInspectorModeRef.current = shell.inspectorMode;\n }\n }, [shell.inspectorMode, open, defaultOpen, onOpenChange]);\n\n // Track previous mode to only fire callbacks on actual user-initiated state transitions.\n // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState\n // is complete before enabling callbacks. This avoids spurious callbacks during initialization.\n // Use callback refs to avoid re-running effect when inline callbacks change.\n const onExpandRef = React.useRef(onExpand);\n const onCollapseRef = React.useRef(onCollapse);\n React.useLayoutEffect(() => {\n onExpandRef.current = onExpand;\n onCollapseRef.current = onCollapse;\n });\n\n const prevInspectorModeRef = React.useRef<PaneMode | null>(null);\n const hasInitializedRef = React.useRef(false);\n React.useEffect(() => {\n const currentMode = shell.inspectorMode;\n\n // Wait for breakpoint to be ready before enabling callbacks\n if (!shell.currentBreakpointReady) {\n prevInspectorModeRef.current = currentMode;\n return;\n }\n\n // Skip the first run after breakpoint is ready - this captures the post-sync state\n if (!hasInitializedRef.current) {\n hasInitializedRef.current = true;\n prevInspectorModeRef.current = currentMode;\n return;\n }\n\n const prevMode = prevInspectorModeRef.current;\n\n // Only fire on actual state transitions\n if (prevMode !== null && prevMode !== currentMode) {\n if (currentMode === 'expanded') {\n onExpandRef.current?.();\n } else if (currentMode === 'collapsed') {\n onCollapseRef.current?.();\n }\n prevInspectorModeRef.current = currentMode;\n }\n }, [shell.inspectorMode, shell.currentBreakpointReady]);\n\n const isExpanded = shell.inspectorMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:inspector:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n try {\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Inspector: failed to load persisted size', err);\n }\n return undefined;\n }\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n try {\n window.localStorage.setItem(key, String(size));\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Inspector: failed to save persisted size', err);\n }\n }\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n if (!resizable || !persistenceAdapter?.load || isOverlay) return undefined;\n const loaded = persistenceAdapter.load();\n const applyLoaded = (value?: number) => {\n if (!mounted || typeof value !== 'number' || !localRef.current) return;\n localRef.current.style.setProperty('--inspector-size', `${value}px`);\n onResize?.(value);\n };\n if (loaded instanceof Promise) {\n loaded.then(applyLoaded).catch((err) => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Inspector: failed to load persisted size', err);\n }\n });\n } else {\n applyLoaded(loaded);\n }\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--inspector-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const isRtl = getComputedStyle(localRef.current!).direction === 'rtl';\n const delta = client - startClient;\n return startSize + (isRtl ? delta : -delta);\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n emitSizeChange(size, { reason: 'resize' });\n persistenceAdapter?.save?.(size);\n },\n target: 'inspector',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setInspectorMode('collapsed'),\n requestToggle: () => shell.togglePane('inspector'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n // Normalize CSS lengths to px helper\n const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);\n\n // Apply defaultSize on mount when uncontrolled\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {\n const px = normalizeSizeToPx(defaultSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--inspector-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'init' });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled size sync\n const controlledSize = size;\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof controlledSize === 'undefined') return;\n const px = normalizeSizeToPx(controlledSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--inspector-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.inspectorMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setInspectorMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"end\" style={{ padding: 0 }} width={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Inspector</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n // Strip control/size props from DOM spread\n return (\n <div\n {...inspectorDomProps}\n ref={setRef}\n className={classNames('rt-ShellInspector', className)}\n data-mode={shell.inspectorMode}\n data-peek={shell.peekTarget === 'inspector' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--inspector-size' as any]: `${expandedSize}px`,\n ['--inspector-min-size' as any]: `${minSize}px`,\n ['--inspector-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellInspectorContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as InspectorComponent;\n\nInspector.displayName = 'Shell.Inspector';\nInspector.Handle = InspectorHandle;\n"],
|
|
5
|
-
"mappings": "ykBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,eAAAE,IAAA,eAAAC,GAAAH,IAAA,IAAAI,EAAuB,oBACvBC,GAAuB,yBACvBC,EAAuB,0BACvBC,GAA+B,iCAC/BC,
|
|
6
|
-
"names": ["shell_inspector_exports", "__export", "Inspector", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "import_shell_prop_helpers", "import_normalize_to_px", "INSPECTOR_DOM_PROP_KEYS", "initialProps", "ref", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "size", "defaultSize", "inspectorDomProps", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "normalizedControlledOpen", "normalizedDefaultOpen", "openIsResponsive", "next", "initial", "debounceTimeoutRef", "emitSizeChange", "cb", "strategy", "ms", "s", "meta", "last", "now", "wasControlledRef", "isControlled", "initNotifiedRef", "lastInspectorModeRef", "onExpandRef", "onCollapseRef", "prevInspectorModeRef", "hasInitializedRef", "currentMode", "prevMode", "isExpanded", "persistenceAdapter", "key", "v", "mounted", "loaded", "applyLoaded", "value", "err", "handleEl", "client", "startClient", "startSize", "isRtl", "delta", "i", "normalizeSizeToPx", "px", "clamped", "controlledSize", "o", "classNames"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell, useInset } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { InspectorHandle, PaneHandle } from './shell-handles.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, PaneBaseProps } from '../shell.types.js';\nimport { extractPaneDomProps, mapResponsiveBooleanToPaneMode } from './shell-prop-helpers.js';\nimport { normalizeToPx } from '../../helpers/normalize-to-px.js';\n\ntype InspectorOpenChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype InspectorControlledProps = { open: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; defaultOpen?: never };\ntype InspectorUncontrolledProps = { defaultOpen?: boolean | Partial<Record<Breakpoint, boolean>>; onOpenChange?: (open: boolean, meta: InspectorOpenChangeMeta) => void; open?: never };\ntype InspectorSizeChangeMeta = { reason: 'init' | 'resize' | 'controlled' };\ntype InspectorSizeControlledProps = { size: number | string; defaultSize?: never };\ntype InspectorSizeUncontrolledProps = { defaultSize?: number | string; size?: never };\ntype InspectorPublicProps = PaneBaseProps &\n (InspectorControlledProps | InspectorUncontrolledProps) &\n (InspectorSizeControlledProps | InspectorSizeUncontrolledProps) & {\n onSizeChange?: (size: number, meta: InspectorSizeChangeMeta) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n /** When true, adds margin and triggers gray backdrop on Shell. */\n inset?: boolean;\n };\n\ntype InspectorComponent = React.ForwardRefExoticComponent<InspectorPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };\n\nconst INSPECTOR_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'defaultOpen',\n 'open',\n 'onOpenChange',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n 'inset',\n] as const satisfies readonly (keyof InspectorPublicProps)[];\n\nexport const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = { initial: 'overlay', lg: 'fixed' },\n defaultOpen,\n open,\n onOpenChange,\n expandedSize = 320,\n minSize = 200,\n maxSize = 500,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n size,\n defaultSize,\n inset,\n } = initialProps;\n const inspectorDomProps = extractPaneDomProps(initialProps, INSPECTOR_DOM_PROP_KEYS);\n const shell = useShell();\n const { registerInset, unregisterInset } = useInset();\n\n // Register/unregister inset\n React.useEffect(() => {\n if (inset) {\n registerInset('inspector');\n return () => unregisterInset('inspector');\n }\n }, [inset, registerInset, unregisterInset]);\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === InspectorHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === InspectorHandle));\n\n // Throttled/debounced emitter for onSizeChange\n const normalizedControlledOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(open), [open]);\n const normalizedDefaultOpen = React.useMemo(() => mapResponsiveBooleanToPaneMode(defaultOpen), [defaultOpen]);\n const openIsResponsive = typeof open === 'object' && open !== null;\n useResponsiveInitialState<PaneMode>({\n controlledValue: normalizedControlledOpen,\n defaultValue: normalizedDefaultOpen,\n currentValue: shell.inspectorMode,\n setValue: shell.setInspectorMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: openIsResponsive,\n onResponsiveChange: (next) => onOpenChange?.(next === 'expanded', { reason: 'responsive' }),\n onInit: (initial) => {\n if (typeof open === 'undefined') {\n onOpenChange?.(initial === 'expanded', { reason: 'init' });\n }\n },\n });\n\n // Ref for debounce cleanup\n const debounceTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n // Cleanup debounce timeout on unmount or when dependencies change\n React.useEffect(() => {\n return () => {\n if (debounceTimeoutRef.current) {\n clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = null;\n }\n };\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n // Throttled/debounced emitter for onSizeChange\n const emitSizeChange = React.useMemo(() => {\n const cb = onSizeChange as undefined | ((s: number, meta: InspectorSizeChangeMeta) => void);\n const strategy = sizeUpdate as undefined | 'throttle' | 'debounce';\n const ms = sizeUpdateMs ?? 50;\n if (!cb) return () => {};\n if (strategy === 'debounce') {\n return (s: number, meta: InspectorSizeChangeMeta) => {\n if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);\n debounceTimeoutRef.current = setTimeout(() => {\n cb(s, meta);\n debounceTimeoutRef.current = null;\n }, ms);\n };\n }\n if (strategy === 'throttle') {\n let last = 0;\n return (s: number, meta: InspectorSizeChangeMeta) => {\n const now = Date.now();\n if (now - last >= ms) {\n last = now;\n cb(s, meta);\n }\n };\n }\n return (s: number, meta: InspectorSizeChangeMeta) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof open !== 'undefined' && typeof defaultOpen !== 'undefined') {\n console.error('Shell.Inspector: Do not pass both `open` and `defaultOpen`. Choose one.');\n }\n }\n\n // Warn on controlled/uncontrolled mode switch\n React.useEffect(() => {\n const isControlled = typeof open !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Inspector: Switching between controlled and uncontrolled `open` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [open]);\n\n const initNotifiedRef = React.useRef(false);\n const lastInspectorModeRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n // Notify init open\n if (!initNotifiedRef.current && typeof open === 'undefined' && defaultOpen && shell.inspectorMode === 'expanded') {\n onOpenChange?.(true, { reason: 'init' });\n initNotifiedRef.current = true;\n }\n\n // Notify toggles when uncontrolled (avoid double-notify after responsive change)\n if (typeof open === 'undefined') {\n if (lastInspectorModeRef.current !== null && lastInspectorModeRef.current !== shell.inspectorMode) {\n onOpenChange?.(shell.inspectorMode === 'expanded', { reason: 'toggle' });\n }\n lastInspectorModeRef.current = shell.inspectorMode;\n }\n }, [shell.inspectorMode, open, defaultOpen, onOpenChange]);\n\n // Track previous mode to only fire callbacks on actual user-initiated state transitions.\n // We wait for breakpointReady to ensure the initial state sync from useResponsiveInitialState\n // is complete before enabling callbacks. This avoids spurious callbacks during initialization.\n // Use callback refs to avoid re-running effect when inline callbacks change.\n const onExpandRef = React.useRef(onExpand);\n const onCollapseRef = React.useRef(onCollapse);\n React.useLayoutEffect(() => {\n onExpandRef.current = onExpand;\n onCollapseRef.current = onCollapse;\n });\n\n const prevInspectorModeRef = React.useRef<PaneMode | null>(null);\n const hasInitializedRef = React.useRef(false);\n React.useEffect(() => {\n const currentMode = shell.inspectorMode;\n\n // Wait for breakpoint to be ready before enabling callbacks\n if (!shell.currentBreakpointReady) {\n prevInspectorModeRef.current = currentMode;\n return;\n }\n\n // Skip the first run after breakpoint is ready - this captures the post-sync state\n if (!hasInitializedRef.current) {\n hasInitializedRef.current = true;\n prevInspectorModeRef.current = currentMode;\n return;\n }\n\n const prevMode = prevInspectorModeRef.current;\n\n // Only fire on actual state transitions\n if (prevMode !== null && prevMode !== currentMode) {\n if (currentMode === 'expanded') {\n onExpandRef.current?.();\n } else if (currentMode === 'collapsed') {\n onCollapseRef.current?.();\n }\n prevInspectorModeRef.current = currentMode;\n }\n }, [shell.inspectorMode, shell.currentBreakpointReady]);\n\n const isExpanded = shell.inspectorMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:inspector:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n try {\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Inspector: failed to load persisted size', err);\n }\n return undefined;\n }\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n try {\n window.localStorage.setItem(key, String(size));\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Inspector: failed to save persisted size', err);\n }\n }\n },\n };\n return adapter;\n }, [paneId, persistence]);\n\n React.useEffect(() => {\n let mounted = true;\n if (!resizable || !persistenceAdapter?.load || isOverlay) return undefined;\n const loaded = persistenceAdapter.load();\n const applyLoaded = (value?: number) => {\n if (!mounted || typeof value !== 'number' || !localRef.current) return;\n localRef.current.style.setProperty('--inspector-size', `${value}px`);\n onResize?.(value);\n };\n if (loaded instanceof Promise) {\n loaded.then(applyLoaded).catch((err) => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('Shell.Inspector: failed to load persisted size', err);\n }\n });\n } else {\n applyLoaded(loaded);\n }\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--inspector-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const isRtl = getComputedStyle(localRef.current!).direction === 'rtl';\n const delta = client - startClient;\n return startSize + (isRtl ? delta : -delta);\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n emitSizeChange(size, { reason: 'resize' });\n persistenceAdapter?.save?.(size);\n },\n target: 'inspector',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setInspectorMode('collapsed'),\n requestToggle: () => shell.togglePane('inspector'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n // Normalize CSS lengths to px helper\n const normalizeSizeToPx = React.useCallback((value: number | string | undefined) => normalizeToPx(value, 'horizontal'), []);\n\n // Apply defaultSize on mount when uncontrolled\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof size === 'undefined' && typeof defaultSize !== 'undefined') {\n const px = normalizeSizeToPx(defaultSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--inspector-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'init' });\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Controlled size sync\n const controlledSize = size;\n React.useEffect(() => {\n if (!localRef.current) return;\n if (typeof controlledSize === 'undefined') return;\n const px = normalizeSizeToPx(controlledSize);\n if (typeof px === 'number' && Number.isFinite(px)) {\n const minPx = typeof minSize === 'number' ? minSize : undefined;\n const maxPx = typeof maxSize === 'number' ? maxSize : undefined;\n const clamped = Math.min(maxPx ?? px, Math.max(minPx ?? px, px));\n localRef.current.style.setProperty('--inspector-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.inspectorMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setInspectorMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"end\" style={{ padding: 0 }} width={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Inspector</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n // Strip control/size props from DOM spread\n return (\n <div\n {...inspectorDomProps}\n ref={setRef}\n className={classNames('rt-ShellInspector', className)}\n data-mode={shell.inspectorMode}\n data-peek={shell.peekTarget === 'inspector' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isExpanded) || undefined}\n data-inset={inset || undefined}\n style={{\n ...style,\n ['--inspector-size' as any]: `${expandedSize}px`,\n ['--inspector-min-size' as any]: `${minSize}px`,\n ['--inspector-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellInspectorContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as InspectorComponent;\n\nInspector.displayName = 'Shell.Inspector';\nInspector.Handle = InspectorHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["shell_inspector_exports", "__export", "Inspector", "__toCommonJS", "React", "import_classnames", "Sheet", "import_visually_hidden", "import_shell_context", "import_shell_hooks", "import_shell_resize", "import_shell_handles", "import_shell_types", "import_shell_prop_helpers", "import_normalize_to_px", "INSPECTOR_DOM_PROP_KEYS", "initialProps", "ref", "className", "presentation", "defaultOpen", "open", "onOpenChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "size", "defaultSize", "inset", "inspectorDomProps", "shell", "registerInset", "unregisterInset", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "normalizedControlledOpen", "normalizedDefaultOpen", "openIsResponsive", "next", "initial", "debounceTimeoutRef", "emitSizeChange", "cb", "strategy", "ms", "s", "meta", "last", "now", "wasControlledRef", "isControlled", "initNotifiedRef", "lastInspectorModeRef", "onExpandRef", "onCollapseRef", "prevInspectorModeRef", "hasInitializedRef", "currentMode", "prevMode", "isExpanded", "persistenceAdapter", "key", "v", "mounted", "loaded", "applyLoaded", "value", "err", "handleEl", "client", "startClient", "startSize", "isRtl", "delta", "i", "normalizeSizeToPx", "px", "clamped", "controlledSize", "o", "classNames"]
|
|
7
7
|
}
|
|
@@ -29,6 +29,8 @@ type SidebarPublicProps = Omit<SidebarPaneProps, 'mode' | 'defaultMode' | 'onMod
|
|
|
29
29
|
}) => void;
|
|
30
30
|
sizeUpdate?: 'throttle' | 'debounce';
|
|
31
31
|
sizeUpdateMs?: number;
|
|
32
|
+
/** When true, adds margin and triggers gray backdrop on Shell. */
|
|
33
|
+
inset?: boolean;
|
|
32
34
|
} & (SidebarControlledProps | SidebarUncontrolledProps);
|
|
33
35
|
type SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & {
|
|
34
36
|
Handle: typeof SidebarHandle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAA+C,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAInJ,KAAK,gBAAgB,GAAG,aAAa,GAAG;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC3E,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnK,KAAK,wBAAwB,GAAG;IAAE,YAAY,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrM,KAAK,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IAE1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAEhC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1F,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAA+C,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAInJ,KAAK,gBAAgB,GAAG,aAAa,GAAG;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AAC3E,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnK,KAAK,wBAAwB,GAAG;IAAE,YAAY,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACrM,KAAK,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IAE1F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAEhC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1F,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,CAAC;AAExD,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CAAC,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAmBrJ,eAAO,MAAM,OAAO,EA0ad,gBAAgB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var Ne=Object.create;var k=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,Ve=Object.prototype.hasOwnProperty;var Oe=(s,i)=>{for(var l in i)k(s,l,{get:i[l],enumerable:!0})},le=(s,i,l,g)=>{if(i&&typeof i=="object"||typeof i=="function")for(let d of Ie(i))!Ve.call(s,d)&&d!==l&&k(s,d,{get:()=>i[d],enumerable:!(g=De(i,d))||g.enumerable});return s};var j=(s,i,l)=>(l=s!=null?Ne(He(s)):{},le(i||!s||!s.__esModule?k(l,"default",{value:s,enumerable:!0}):l,s)),Be=s=>le(k({},"__esModule",{value:!0}),s);var Ue={};Oe(Ue,{Sidebar:()=>K});module.exports=Be(Ue);var t=j(require("react")),ue=j(require("classnames")),q=j(require("../sheet.js")),ce=require("../visually-hidden.js"),M=require("../shell.context.js"),w=require("../shell.hooks.js"),fe=require("./shell-resize.js"),pe=require("./shell-prop-helpers.js"),m=require("./shell-handles.js"),Ae=require("../shell.types.js"),be=require("../../helpers/normalize-to-px.js");const $e=["className","children","state","defaultState","onStateChange","thinSize","toggleModes","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style","inset"],K=t.forwardRef((s,i)=>{const{className:l,presentation:g={initial:"overlay",md:"fixed"},expandedSize:d=288,minSize:f=200,maxSize:p=400,resizable:N=!1,collapsible:Se=!0,onExpand:W,onCollapse:Y,onResize:D,onResizeStart:me,onResizeEnd:he,snapPoints:ye,snapTolerance:Me,collapseThreshold:ge,paneId:I,persistence:H,children:ze,style:Pe,thinSize:h=64,toggleModes:V,state:b,defaultState:z,onStateChange:P,size:G,defaultSize:J,onSizeChange:O,sizeUpdate:B,sizeUpdateMs:$=50,inset:U}=s,Re=(0,pe.extractPaneDomProps)(s,$e),n=(0,M.useShell)(),{registerInset:Q,unregisterInset:X}=(0,M.useInset)();t.useEffect(()=>{if(U)return Q("sidebar"),()=>X("sidebar")},[U,Q,X]);const _=(0,w.useResponsivePresentation)(g),y=_==="overlay",ve=_==="stacked",u=t.useRef(null),xe=t.useCallback(e=>{u.current=e,typeof i=="function"?i(e):i&&(i.current=e)},[i]),Z=t.Children.toArray(ze),ee=Z.filter(e=>t.isValidElement(e)&&e.type===m.SidebarHandle),te=Z.filter(e=>!(t.isValidElement(e)&&e.type===m.SidebarHandle)),S=t.useRef(null);t.useEffect(()=>()=>{S.current&&(clearTimeout(S.current),S.current=null)},[O,B,$]);const R=t.useMemo(()=>{const e=O,r=B,o=$??50;if(!e)return()=>{};if(r==="debounce")return(a,c)=>{S.current&&clearTimeout(S.current),S.current=setTimeout(()=>{e(a,c),S.current=null},o)};if(r==="throttle"){let a=0;return(c,we)=>{const de=Date.now();de-a>=o&&(a=de,e(c,we))}}return(a,c)=>e(a,c)},[O,B,$]),Ce=t.useId();t.useEffect(()=>(n.setHasSidebar(!0),()=>{n.setHasSidebar(!1)}),[n,Ce]);const v=t.useRef(null);t.useEffect(()=>{const e=typeof b<"u";if(v.current===null){v.current=e;return}v.current!==e&&(console.warn("Shell.Sidebar: Switching between controlled and uncontrolled `state` is not supported."),v.current=e)},[b]);const Ee=typeof b=="object"&&b!==null,{resolvedDefault:ne}=(0,w.useResponsiveInitialState)({controlledValue:b,defaultValue:z,currentValue:n.sidebarMode,setValue:n.setSidebarMode,breakpointReady:n.currentBreakpointReady,controlledIsResponsive:Ee,onResponsiveChange:e=>P?.(e,{reason:"responsive"}),onInit:e=>P?.(e,{reason:"init"})}),x=t.useRef(null);t.useEffect(()=>{typeof b>"u"&&(x.current===null?x.current=n.sidebarMode:x.current!==n.sidebarMode&&(x.current=n.sidebarMode,P?.(n.sidebarMode,{reason:"toggle"})))},[n.sidebarMode,b,P]);const re=t.useRef(W),oe=t.useRef(Y);t.useLayoutEffect(()=>{re.current=W,oe.current=Y});const C=t.useRef(null),ae=t.useRef(!1);t.useEffect(()=>{const e=n.sidebarMode;if(!n.currentBreakpointReady){C.current=e;return}if(!ae.current){ae.current=!0,C.current=e;return}const r=C.current;r!==null&&r!==e&&(r==="collapsed"&&e!=="collapsed"?re.current?.():e==="collapsed"&&oe.current?.(),C.current=e)},[n.sidebarMode,n.currentBreakpointReady]);const se=n.sidebarMode!=="collapsed",E=t.useMemo(()=>{if(!I||H)return H;const e=`kookie-ui:shell:sidebar:${I}`;return{load:()=>{if(!(typeof window>"u"))try{const o=window.localStorage.getItem(e);return o?Number(o):void 0}catch{return}},save:o=>{if(!(typeof window>"u"))try{window.localStorage.setItem(e,String(o))}catch{}}}},[I,H]);t.useEffect(()=>{let e=!0;return(async()=>{if(!N||!E?.load||y)return;const r=await E.load();e&&typeof r=="number"&&u.current&&(u.current.style.setProperty("--sidebar-size",`${r}px`),D?.(r))})(),()=>{e=!1}},[N,E,D,y]);const T=(0,M.useShell)(),A=t.useCallback(()=>{const e=ne??(typeof z=="string"?z:void 0)??"expanded";return e==="thin"||e==="expanded"?e:"expanded"},[ne,z]);t.useEffect(()=>{if(!T.setSidebarToggleComputer)return;const e=V??"both",r=o=>{if(e==="both")return o==="collapsed"?"thin":o==="thin"?"expanded":"collapsed";const a=A();return o==="collapsed"?a:o===a?"collapsed":a};return T.setSidebarToggleComputer(r),()=>{T.setSidebarToggleComputer?.(o=>o==="collapsed"?"thin":o==="thin"?"expanded":"collapsed")}},[T,V,A]);const ie=t.useRef(d),Te=t.useRef("expanded");t.useEffect(()=>{n.sidebarMode!=="collapsed"&&(Te.current=n.sidebarMode,ie.current=n.sidebarMode==="thin"?h:d)},[n.sidebarMode,h,d]);const ke=N&&!y&&n.sidebarMode==="expanded"?t.createElement(fe.PaneResizeContext.Provider,{value:{containerRef:u,cssVarName:"--sidebar-size",minSize:f,maxSize:p,defaultSize:d,orientation:"vertical",edge:"end",computeNext:(e,r,o)=>{const a=getComputedStyle(u.current).direction==="rtl",c=e-r;return o+(a?-c:c)},onResize:D,onResizeStart:me,onResizeEnd:e=>{he?.(e),R(e,{reason:"resize"}),E?.save?.(e)},target:"sidebar",collapsible:Se,snapPoints:ye,snapTolerance:Me??8,collapseThreshold:ge,requestCollapse:()=>n.setSidebarMode("collapsed"),requestToggle:()=>n.togglePane("sidebar")}},ee.length>0?ee.map((e,r)=>t.cloneElement(e,{key:e.key??r})):t.createElement(m.PaneHandle,null)):null,L=t.useCallback(e=>(0,be.normalizeToPx)(e,"horizontal"),[]);t.useEffect(()=>{if(u.current&&typeof G>"u"&&typeof J<"u"){const e=L(J);if(typeof e=="number"&&Number.isFinite(e)){const a=Math.min((typeof p=="number"?p:void 0)??e,Math.max((typeof f=="number"?f:void 0)??e,e));u.current.style.setProperty("--sidebar-size",`${a}px`),R(a,{reason:"init"})}}},[]);const F=G;if(t.useEffect(()=>{if(!u.current||typeof F>"u")return;const e=L(F);if(typeof e=="number"&&Number.isFinite(e)){const a=Math.min((typeof p=="number"?p:void 0)??e,Math.max((typeof f=="number"?f:void 0)??e,e));u.current.style.setProperty("--sidebar-size",`${a}px`),R(a,{reason:"controlled"})}},[F,f,p,L,R]),y){const e=n.sidebarMode!=="collapsed";return t.createElement(q.Root,{open:e,onOpenChange:r=>n.setSidebarMode(r?"expanded":"collapsed")},t.createElement(q.Content,{side:"start",style:{padding:0},width:{initial:`${e?n.sidebarMode==="thin"?h:d:ie.current}px`}},t.createElement(ce.VisuallyHidden,null,t.createElement(q.Title,null,"Navigation")),te))}return t.createElement("div",{...Re,ref:xe,className:(0,ue.default)("rt-ShellSidebar",l),"data-mode":n.sidebarMode,"data-peek":n.peekTarget==="sidebar"||void 0,"data-presentation":n.currentBreakpointReady?_:void 0,"data-open":n.currentBreakpointReady&&ve&&se||void 0,"data-inset":U||void 0,style:{...Pe,"--sidebar-size":`${d}px`,"--sidebar-thin-size":`${h}px`,"--sidebar-min-size":`${f}px`,"--sidebar-max-size":`${p}px`,...n.peekTarget==="sidebar"&&n.sidebarMode==="collapsed"&&!y?(()=>{const e=V??"both",r=n.sidebarMode;let o;if(e==="both")o=r==="collapsed"?"thin":r==="thin"?"expanded":"collapsed";else{const a=A();o=r==="collapsed"?a:"collapsed"}return o==="thin"?{"--peek-sidebar-width":`${h}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${d}px)`}})():{}}},t.createElement("div",{className:"rt-ShellSidebarContent","data-visible":se||void 0},te),ke)});K.displayName="Shell.Sidebar",K.Handle=m.SidebarHandle;
|
|
2
2
|
//# sourceMappingURL=shell-sidebar.js.map
|