@kushagradhawan/kookie-ui 0.1.122 → 0.1.124
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/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 +2 -2
- package/dist/cjs/components/_internal/shell-handles.js +1 -1
- package/dist/cjs/components/_internal/shell-handles.js.map +2 -2
- 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 +2 -2
- package/dist/cjs/components/_internal/shell-prop-helpers.js.map +2 -2
- 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 +2 -2
- package/dist/cjs/components/sheet.d.ts +3 -3
- package/dist/cjs/components/sheet.d.ts.map +1 -1
- package/dist/cjs/components/sheet.js +1 -1
- package/dist/cjs/components/sheet.js.map +2 -2
- package/dist/cjs/components/shell.context.d.ts +2 -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 +2 -2
- 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/shell.types.d.ts +11 -0
- package/dist/cjs/components/shell.types.d.ts.map +1 -1
- package/dist/cjs/components/shell.types.js +1 -1
- package/dist/cjs/components/shell.types.js.map +1 -1
- 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 +2 -2
- package/dist/esm/components/_internal/shell-handles.js +1 -1
- package/dist/esm/components/_internal/shell-handles.js.map +2 -2
- 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 +2 -2
- package/dist/esm/components/_internal/shell-prop-helpers.js.map +2 -2
- 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 +2 -2
- package/dist/esm/components/sheet.d.ts +3 -3
- package/dist/esm/components/sheet.d.ts.map +1 -1
- package/dist/esm/components/sheet.js +1 -1
- package/dist/esm/components/sheet.js.map +2 -2
- package/dist/esm/components/shell.context.d.ts +2 -0
- package/dist/esm/components/shell.context.d.ts.map +1 -1
- package/dist/esm/components/shell.context.js.map +2 -2
- 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/shell.types.d.ts +11 -0
- package/dist/esm/components/shell.types.d.ts.map +1 -1
- package/dist/esm/components/shell.types.js.map +1 -1
- 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/shell-bottom.tsx +5 -5
- package/src/components/_internal/shell-handles.tsx +26 -26
- package/src/components/_internal/shell-inspector.tsx +5 -5
- package/src/components/_internal/shell-prop-helpers.ts +1 -1
- package/src/components/_internal/shell-sidebar.tsx +10 -10
- package/src/components/sheet.tsx +6 -9
- package/src/components/shell.context.tsx +12 -10
- package/src/components/shell.tsx +21 -20
- package/src/components/shell.types.ts +13 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import
|
|
1
|
+
import*as t from"react";import ze from"classnames";import*as B from"../sheet.js";import{VisuallyHidden as Re}from"../visually-hidden.js";import{useShell as ne,useInset as ve}from"../shell.context.js";import{useResponsivePresentation as xe,useResponsiveInitialState as Ce}from"../shell.hooks.js";import{PaneResizeContext as Ee}from"./shell-resize.js";import{extractPaneDomProps as Te}from"./shell-prop-helpers.js";import{SidebarHandle as $,PaneHandle as ke}from"./shell-handles.js";import"../shell.types.js";import{normalizeToPx as we}from"../../helpers/normalize-to-px.js";const Ne=["className","children","state","defaultState","onStateChange","thinSize","toggleModes","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style","inset"],re=t.forwardRef((U,f)=>{const{className:oe,presentation:ae={initial:"overlay",md:"fixed"},expandedSize:d=288,minSize:l=200,maxSize:u=400,resizable:v=!1,collapsible:ie=!0,onExpand:_,onCollapse:A,onResize:x,onResizeStart:se,onResizeEnd:de,snapPoints:le,snapTolerance:ue,collapseThreshold:ce,paneId:C,persistence:E,children:pe,style:fe,thinSize:b=64,toggleModes:T,state:c,defaultState:m,onStateChange:h,size:L,defaultSize:W,onSizeChange:k,sizeUpdate:w,sizeUpdateMs:N=50,inset:D}=U,be=Te(U,Ne),n=ne(),{registerInset:F,unregisterInset:j}=ve();t.useEffect(()=>{if(D)return F("sidebar"),()=>j("sidebar")},[D,F,j]);const V=xe(ae),S=V==="overlay",Se=V==="stacked",i=t.useRef(null),me=t.useCallback(e=>{i.current=e,typeof f=="function"?f(e):f&&(f.current=e)},[f]),q=t.Children.toArray(pe),K=q.filter(e=>t.isValidElement(e)&&e.type===$),Y=q.filter(e=>!(t.isValidElement(e)&&e.type===$)),p=t.useRef(null);t.useEffect(()=>()=>{p.current&&(clearTimeout(p.current),p.current=null)},[k,w,N]);const M=t.useMemo(()=>{const e=k,r=w,o=N??50;if(!e)return()=>{};if(r==="debounce")return(a,s)=>{p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{e(a,s),p.current=null},o)};if(r==="throttle"){let a=0;return(s,Pe)=>{const te=Date.now();te-a>=o&&(a=te,e(s,Pe))}}return(a,s)=>e(a,s)},[k,w,N]),he=t.useId();t.useEffect(()=>(n.setHasSidebar(!0),()=>{n.setHasSidebar(!1)}),[n,he]);const y=t.useRef(null);t.useEffect(()=>{const e=typeof c<"u";if(y.current===null){y.current=e;return}y.current!==e&&(console.warn("Shell.Sidebar: Switching between controlled and uncontrolled `state` is not supported."),y.current=e)},[c]);const Me=typeof c=="object"&&c!==null,{resolvedDefault:G}=Ce({controlledValue:c,defaultValue:m,currentValue:n.sidebarMode,setValue:n.setSidebarMode,breakpointReady:n.currentBreakpointReady,controlledIsResponsive:Me,onResponsiveChange:e=>h?.(e,{reason:"responsive"}),onInit:e=>h?.(e,{reason:"init"})}),g=t.useRef(null);t.useEffect(()=>{typeof c>"u"&&(g.current===null?g.current=n.sidebarMode:g.current!==n.sidebarMode&&(g.current=n.sidebarMode,h?.(n.sidebarMode,{reason:"toggle"})))},[n.sidebarMode,c,h]);const J=t.useRef(_),Q=t.useRef(A);t.useLayoutEffect(()=>{J.current=_,Q.current=A});const P=t.useRef(null),X=t.useRef(!1);t.useEffect(()=>{const e=n.sidebarMode;if(!n.currentBreakpointReady){P.current=e;return}if(!X.current){X.current=!0,P.current=e;return}const r=P.current;r!==null&&r!==e&&(r==="collapsed"&&e!=="collapsed"?J.current?.():e==="collapsed"&&Q.current?.(),P.current=e)},[n.sidebarMode,n.currentBreakpointReady]);const Z=n.sidebarMode!=="collapsed",z=t.useMemo(()=>{if(!C||E)return E;const e=`kookie-ui:shell:sidebar:${C}`;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{}}}},[C,E]);t.useEffect(()=>{let e=!0;return(async()=>{if(!v||!z?.load||S)return;const r=await z.load();e&&typeof r=="number"&&i.current&&(i.current.style.setProperty("--sidebar-size",`${r}px`),x?.(r))})(),()=>{e=!1}},[v,z,x,S]);const R=ne(),I=t.useCallback(()=>{const e=G??(typeof m=="string"?m:void 0)??"expanded";return e==="thin"||e==="expanded"?e:"expanded"},[G,m]);t.useEffect(()=>{if(!R.setSidebarToggleComputer)return;const e=T??"both",r=o=>{if(e==="both")return o==="collapsed"?"thin":o==="thin"?"expanded":"collapsed";const a=I();return o==="collapsed"?a:o===a?"collapsed":a};return R.setSidebarToggleComputer(r),()=>{R.setSidebarToggleComputer?.(o=>o==="collapsed"?"thin":o==="thin"?"expanded":"collapsed")}},[R,T,I]);const ee=t.useRef(d),ye=t.useRef("expanded");t.useEffect(()=>{n.sidebarMode!=="collapsed"&&(ye.current=n.sidebarMode,ee.current=n.sidebarMode==="thin"?b:d)},[n.sidebarMode,b,d]);const ge=v&&!S&&n.sidebarMode==="expanded"?t.createElement(Ee.Provider,{value:{containerRef:i,cssVarName:"--sidebar-size",minSize:l,maxSize:u,defaultSize:d,orientation:"vertical",edge:"end",computeNext:(e,r,o)=>{const a=getComputedStyle(i.current).direction==="rtl",s=e-r;return o+(a?-s:s)},onResize:x,onResizeStart:se,onResizeEnd:e=>{de?.(e),M(e,{reason:"resize"}),z?.save?.(e)},target:"sidebar",collapsible:ie,snapPoints:le,snapTolerance:ue??8,collapseThreshold:ce,requestCollapse:()=>n.setSidebarMode("collapsed"),requestToggle:()=>n.togglePane("sidebar")}},K.length>0?K.map((e,r)=>t.cloneElement(e,{key:e.key??r})):t.createElement(ke,null)):null,H=t.useCallback(e=>we(e,"horizontal"),[]);t.useEffect(()=>{if(i.current&&typeof L>"u"&&typeof W<"u"){const e=H(W);if(typeof e=="number"&&Number.isFinite(e)){const a=Math.min((typeof u=="number"?u:void 0)??e,Math.max((typeof l=="number"?l:void 0)??e,e));i.current.style.setProperty("--sidebar-size",`${a}px`),M(a,{reason:"init"})}}},[]);const O=L;if(t.useEffect(()=>{if(!i.current||typeof O>"u")return;const e=H(O);if(typeof e=="number"&&Number.isFinite(e)){const a=Math.min((typeof u=="number"?u:void 0)??e,Math.max((typeof l=="number"?l:void 0)??e,e));i.current.style.setProperty("--sidebar-size",`${a}px`),M(a,{reason:"controlled"})}},[O,l,u,H,M]),S){const e=n.sidebarMode!=="collapsed";return t.createElement(B.Root,{open:e,onOpenChange:r=>n.setSidebarMode(r?"expanded":"collapsed")},t.createElement(B.Content,{side:"start",style:{padding:0},width:{initial:`${e?n.sidebarMode==="thin"?b:d:ee.current}px`}},t.createElement(Re,null,t.createElement(B.Title,null,"Navigation")),Y))}return t.createElement("div",{...be,ref:me,className:ze("rt-ShellSidebar",oe),"data-mode":n.sidebarMode,"data-peek":n.peekTarget==="sidebar"||void 0,"data-presentation":n.currentBreakpointReady?V:void 0,"data-open":n.currentBreakpointReady&&Se&&Z||void 0,"data-inset":D||void 0,style:{...fe,"--sidebar-size":`${d}px`,"--sidebar-thin-size":`${b}px`,"--sidebar-min-size":`${l}px`,"--sidebar-max-size":`${u}px`,...n.peekTarget==="sidebar"&&n.sidebarMode==="collapsed"&&!S?(()=>{const e=T??"both",r=n.sidebarMode;let o;if(e==="both")o=r==="collapsed"?"thin":r==="thin"?"expanded":"collapsed";else{const a=I();o=r==="collapsed"?a:"collapsed"}return o==="thin"?{"--peek-sidebar-width":`${b}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${d}px)`}})():{}}},t.createElement("div",{className:"rt-ShellSidebarContent","data-visible":Z||void 0},Y),ge)});re.displayName="Shell.Sidebar",re.Handle=$;export{re as Sidebar};
|
|
2
2
|
//# sourceMappingURL=shell-sidebar.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/_internal/shell-sidebar.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, useInset } from '../shell.context.js';\nimport { useResponsivePresentation, useResponsiveInitialState } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { extractPaneDomProps } from './shell-prop-helpers.js';\nimport { SidebarHandle, PaneHandle } from './shell-handles.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive, PaneBaseProps } from '../shell.types.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport { normalizeToPx } from '../../helpers/normalize-to-px.js';\n\ntype SidebarPaneProps = PaneBaseProps & {\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode | SidebarMode) => void;\n};\n\ntype SidebarStateChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype SidebarControlledProps = { state: Responsive<SidebarMode>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; defaultState?: never };\ntype SidebarUncontrolledProps = { defaultState?: SidebarMode | Partial<Record<Breakpoint, SidebarMode>>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; state?: never };\ntype SidebarPublicProps = Omit<SidebarPaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {\n // removed legacy mode props\n thinSize?: number;\n toggleModes?: 'both' | 'single';\n // size API (width when expanded)\n size?: number | string;\n defaultSize?: number | string;\n onSizeChange?: (size: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n /** When true, adds margin and triggers gray backdrop on Shell. */\n inset?: boolean;\n} & (SidebarControlledProps | SidebarUncontrolledProps);\n\ntype SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof SidebarHandle };\n\nconst SIDEBAR_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'state',\n 'defaultState',\n 'onStateChange',\n 'thinSize',\n 'toggleModes',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n 'inset',\n] as const satisfies readonly (keyof SidebarPublicProps)[];\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = { initial: 'overlay', md: 'fixed' },\n expandedSize = 288,\n minSize = 200,\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 thinSize = 64,\n toggleModes,\n state,\n defaultState,\n onStateChange,\n size,\n defaultSize,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n inset,\n } = initialProps;\n const sidebarDomProps = extractPaneDomProps(initialProps, SIDEBAR_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('sidebar');\n return () => unregisterInset('sidebar');\n }\n }, [inset, registerInset, unregisterInset]);\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n // Phase sequencing is now CSS-driven; no JS-managed phase\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 === SidebarHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === SidebarHandle));\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: { reason: 'init' | 'resize' | 'controlled' }) => 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: { reason: 'init' | 'resize' | 'controlled' }) => {\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: { reason: 'init' | 'resize' | 'controlled' }) => {\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: { reason: 'init' | 'resize' | 'controlled' }) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Register with shell\n const sidebarId = React.useId();\n React.useEffect(() => {\n shell.setHasSidebar(true);\n return () => {\n shell.setHasSidebar(false);\n };\n }, [shell, sidebarId]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof state !== 'undefined' && typeof defaultState !== 'undefined') {\n console.error('Shell.Sidebar: Do not pass both `state` and `defaultState`. Choose one.');\n }\n if (typeof size !== 'undefined' && typeof defaultSize !== 'undefined') {\n console.error('Shell.Sidebar: Do not pass both `size` and `defaultSize`. Choose one.');\n }\n }\n\n // Warn on mode switch between controlled/uncontrolled\n React.useEffect(() => {\n const isControlled = typeof state !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Sidebar: Switching between controlled and uncontrolled `state` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [state]);\n\n // Resolve responsive controlled state at top level\n const stateIsResponsive = typeof state === 'object' && state !== null;\n const { resolvedDefault: resolvedSidebarDefault } = useResponsiveInitialState<SidebarMode>({\n controlledValue: state,\n defaultValue: defaultState,\n currentValue: shell.sidebarMode as SidebarMode,\n setValue: shell.setSidebarMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: stateIsResponsive,\n onResponsiveChange: (next) => onStateChange?.(next, { reason: 'responsive' }),\n onInit: (initial) => onStateChange?.(initial, { reason: 'init' }),\n });\n\n // Emit mode changes\n const lastNotifyModeRef = React.useRef<SidebarMode | null>(null);\n React.useEffect(() => {\n // notify new API when uncontrolled; skip first run to avoid masking init\n if (typeof state === 'undefined') {\n if (lastNotifyModeRef.current === null) {\n lastNotifyModeRef.current = shell.sidebarMode as SidebarMode;\n } else if (lastNotifyModeRef.current !== shell.sidebarMode) {\n lastNotifyModeRef.current = shell.sidebarMode as SidebarMode;\n onStateChange?.(shell.sidebarMode as SidebarMode, { reason: 'toggle' });\n }\n }\n }, [shell.sidebarMode, state, onStateChange]);\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 prevSidebarModeRef = React.useRef<SidebarMode | null>(null);\n const hasInitializedRef = React.useRef(false);\n React.useEffect(() => {\n const currentMode = shell.sidebarMode as SidebarMode;\n\n // Wait for breakpoint to be ready before enabling callbacks\n if (!shell.currentBreakpointReady) {\n prevSidebarModeRef.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 prevSidebarModeRef.current = currentMode;\n return;\n }\n\n const prevMode = prevSidebarModeRef.current;\n\n // Only fire on actual state transitions\n if (prevMode !== null && prevMode !== currentMode) {\n // onExpand: when becoming visible (collapsed \u2192 thin/expanded)\n if (prevMode === 'collapsed' && currentMode !== 'collapsed') {\n onExpandRef.current?.();\n }\n // onCollapse: when becoming hidden (any \u2192 collapsed)\n else if (currentMode === 'collapsed') {\n onCollapseRef.current?.();\n }\n prevSidebarModeRef.current = currentMode;\n }\n }, [shell.sidebarMode, shell.currentBreakpointReady]);\n\n // Option A: thin is width-only; content remains visible whenever not collapsed\n const isContentVisible = shell.sidebarMode !== 'collapsed';\n\n // Default persistence if paneId provided and none supplied (fixed only)\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:sidebar:${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.Sidebar: 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.Sidebar: 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 (async () => {\n if (!resizable || !persistenceAdapter?.load || isOverlay) return;\n const loaded = await persistenceAdapter.load();\n if (mounted && typeof loaded === 'number' && localRef.current) {\n localRef.current.style.setProperty('--sidebar-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n // Register custom toggle behavior based on toggleModes (both|single)\n const shellForToggle = useShell();\n const resolveDefaultSidebarMode = React.useCallback((): SidebarMode => {\n const resolved = resolvedSidebarDefault ?? (typeof defaultState === 'string' ? defaultState : undefined) ?? 'expanded';\n return resolved === 'thin' || resolved === 'expanded' ? resolved : 'expanded';\n }, [resolvedSidebarDefault, defaultState]);\n\n React.useEffect(() => {\n if (!shellForToggle.setSidebarToggleComputer) return;\n const strategy: 'both' | 'single' = toggleModes ?? 'both';\n const compute = (current: SidebarMode): SidebarMode => {\n if (strategy === 'both') {\n if (current === 'collapsed') return 'thin';\n if (current === 'thin') return 'expanded';\n return 'collapsed';\n }\n const target = resolveDefaultSidebarMode();\n if (current === 'collapsed') return target;\n if (current === target) return 'collapsed';\n return target;\n };\n shellForToggle.setSidebarToggleComputer(compute);\n return () => {\n shellForToggle.setSidebarToggleComputer?.((cur) => (cur === 'collapsed' ? 'thin' : cur === 'thin' ? 'expanded' : 'collapsed'));\n };\n }, [shellForToggle, toggleModes, resolveDefaultSidebarMode]);\n\n const lastOverlayWidthRef = React.useRef<number>(expandedSize);\n const lastOverlayModeRef = React.useRef<SidebarMode>('expanded');\n React.useEffect(() => {\n if (shell.sidebarMode !== 'collapsed') {\n lastOverlayModeRef.current = shell.sidebarMode as SidebarMode;\n lastOverlayWidthRef.current = shell.sidebarMode === 'thin' ? thinSize : expandedSize;\n }\n }, [shell.sidebarMode, thinSize, expandedSize]);\n\n // Remove responsive default mode behavior entirely\n\n const handleEl =\n resizable && !isOverlay && shell.sidebarMode === 'expanded' ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--sidebar-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'end',\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: 'sidebar',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setSidebarMode('collapsed'),\n requestToggle: () => shell.togglePane('sidebar'),\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('--sidebar-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('--sidebar-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.sidebarMode !== 'collapsed';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setSidebarMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content\n side=\"start\"\n style={{ padding: 0 }}\n width={{\n initial: `${open ? (shell.sidebarMode === 'thin' ? thinSize : expandedSize) : lastOverlayWidthRef.current}px`,\n }}\n >\n <VisuallyHidden>\n <Sheet.Title>Navigation</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n return (\n <div\n {...sidebarDomProps}\n ref={setRef}\n className={classNames('rt-ShellSidebar', className)}\n data-mode={shell.sidebarMode}\n data-peek={shell.peekTarget === 'sidebar' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isContentVisible) || undefined}\n data-inset={inset || undefined}\n style={{\n ...style,\n ['--sidebar-size' as any]: `${expandedSize}px`,\n ['--sidebar-thin-size' as any]: `${thinSize}px`,\n ['--sidebar-min-size' as any]: `${minSize}px`,\n ['--sidebar-max-size' as any]: `${maxSize}px`,\n ...(shell.peekTarget === 'sidebar' && shell.sidebarMode === 'collapsed' && !isOverlay\n ? (() => {\n const strategy: 'both' | 'single' = toggleModes ?? 'both';\n const current = shell.sidebarMode as SidebarMode;\n let next: SidebarMode;\n if (strategy === 'both') {\n next = current === 'collapsed' ? 'thin' : current === 'thin' ? 'expanded' : 'collapsed';\n } else {\n const target = resolveDefaultSidebarMode();\n next = current === 'collapsed' ? target : 'collapsed';\n }\n if (next === 'thin') {\n return {\n ['--peek-sidebar-width' as any]: `${thinSize}px`,\n } as React.CSSProperties;\n }\n return {\n ['--peek-sidebar-width' as any]: `var(--sidebar-size, ${expandedSize}px)`,\n } as React.CSSProperties;\n })()\n : {}),\n }}\n >\n <div className=\"rt-ShellSidebarContent\" data-visible={isContentVisible || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as SidebarComponent;\n\nSidebar.displayName = 'Shell.Sidebar';\nSidebar.Handle = SidebarHandle;\n"],
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,OAAgB,aACvB,UAAYC,MAAW,cACvB,OAAS,kBAAAC,OAAsB,wBAC/B,OAAS,YAAAC,GAAU,YAAAC,OAAgB,sBACnC,OAAS,6BAAAC,GAA2B,6BAAAC,OAAiC,oBACrE,OAAS,qBAAAC,OAAyB,oBAClC,OAAS,uBAAAC,OAA2B,0BACpC,OAAS,iBAAAC,EAAe,cAAAC,OAAkB,qBAE1C,MAA6B,oBAC7B,OAAS,iBAAAC,OAAqB,mCA2B9B,MAAMC,GAAwB,CAC5B,YACA,WACA,QACA,eACA,gBACA,WACA,cACA,OACA,cACA,eACA,aACA,eACA,QACA,OACF,EAEaC,GAAUd,EAAM,WAA+C,CAACe,EAAcC,IAAQ,CACjG,KAAM,CACJ,UAAAC,GACA,aAAAC,GAAe,CAAE,QAAS,UAAW,GAAI,OAAQ,EACjD,aAAAC,EAAe,IACf,QAAAC,EAAU,IACV,QAAAC,EAAU,IACV,UAAAC,EAAY,GACZ,YAAAC,GAAc,GACd,SAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,GACA,YAAAC,GACA,WAAAC,GACA,cAAAC,GACA,kBAAAC,GACA,OAAAC,EACA,YAAAC,EACA,SAAAC,GACA,MAAAC,GACA,SAAAC,EAAW,GACX,YAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EAAe,GACf,MAAAC,CACF,EAAI/B,EACEgC,GAAkBtC,GAAoBM,EAAcF,EAAqB,EACzEmC,EAAQ5C,GAAS,EACjB,CAAE,cAAA6C,EAAe,gBAAAC,CAAgB,EAAI7C,GAAS,EAGpDL,EAAM,UAAU,IAAM,CACpB,GAAI8C,EACF,OAAAG,EAAc,SAAS,EAChB,IAAMC,EAAgB,SAAS,CAE1C,EAAG,CAACJ,EAAOG,EAAeC,CAAe,CAAC,EAC1C,MAAMC,EAAuB7C,GAA0BY,EAAY,EAC7DkC,EAAYD,IAAyB,UACrCE,GAAYF,IAAyB,UAErCG,EAAWtD,EAAM,OAA8B,IAAI,EACnDuD,GAASvD,EAAM,YAClBwD,GAAgC,CAC/BF,EAAS,QAAUE,EACf,OAAOxC,GAAQ,WAAYA,EAAIwC,CAAI,EAC9BxC,IAAMA,EAAsD,QAAUwC,EACjF,EACA,CAACxC,CAAG,CACN,EACMyC,EAAazD,EAAM,SAAS,QAAQkC,EAAQ,EAC5CwB,EAAiBD,EAAW,OAAQE,GAA2B3D,EAAM,eAAe2D,CAAE,GAAKA,EAAG,OAASjD,CAAa,EACpHkD,EAAkBH,EAAW,OAAQE,GAA2B,EAAE3D,EAAM,eAAe2D,CAAE,GAAKA,EAAG,OAASjD,EAAc,EAGxHmD,EAAqB7D,EAAM,OAA6C,IAAI,EAElFA,EAAM,UAAU,IACP,IAAM,CACP6D,EAAmB,UACrB,aAAaA,EAAmB,OAAO,EACvCA,EAAmB,QAAU,KAEjC,EACC,CAAClB,EAAcC,EAAYC,CAAY,CAAC,EAE3C,MAAMiB,EAAiB9D,EAAM,QAAQ,IAAM,CACzC,MAAM+D,EAAKpB,EACLqB,EAAWpB,EACXqB,EAAKpB,GAAgB,GAC3B,GAAI,CAACkB,EAAI,MAAO,IAAM,CAAC,EACvB,GAAIC,IAAa,WACf,MAAO,CAACE,EAAWC,IAAuD,CACpEN,EAAmB,SAAS,aAAaA,EAAmB,OAAO,EACvEA,EAAmB,QAAU,WAAW,IAAM,CAC5CE,EAAGG,EAAGC,CAAI,EACVN,EAAmB,QAAU,IAC/B,EAAGI,CAAE,CACP,EAEF,GAAID,IAAa,WAAY,CAC3B,IAAII,EAAO,EACX,MAAO,
|
|
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 { extractPaneDomProps } from './shell-prop-helpers.js';\nimport { SidebarHandle, PaneHandle } from './shell-handles.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive, PaneBaseProps, CSSPropertiesWithVars } from '../shell.types.js';\nimport { _BREAKPOINTS } from '../shell.types.js';\nimport { normalizeToPx } from '../../helpers/normalize-to-px.js';\n\ntype SidebarPaneProps = PaneBaseProps & {\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode | SidebarMode) => void;\n};\n\ntype SidebarStateChangeMeta = { reason: 'init' | 'toggle' | 'responsive' };\ntype SidebarControlledProps = { state: Responsive<SidebarMode>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; defaultState?: never };\ntype SidebarUncontrolledProps = { defaultState?: SidebarMode | Partial<Record<Breakpoint, SidebarMode>>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; state?: never };\ntype SidebarPublicProps = Omit<SidebarPaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {\n // removed legacy mode props\n thinSize?: number;\n toggleModes?: 'both' | 'single';\n // size API (width when expanded)\n size?: number | string;\n defaultSize?: number | string;\n onSizeChange?: (size: number, meta: { reason: 'init' | 'resize' | 'controlled' }) => void;\n sizeUpdate?: 'throttle' | 'debounce';\n sizeUpdateMs?: number;\n /** When true, adds margin and triggers gray backdrop on Shell. */\n inset?: boolean;\n} & (SidebarControlledProps | SidebarUncontrolledProps);\n\ntype SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof SidebarHandle };\n\nconst SIDEBAR_DOM_PROP_KEYS = [\n 'className',\n 'children',\n 'state',\n 'defaultState',\n 'onStateChange',\n 'thinSize',\n 'toggleModes',\n 'size',\n 'defaultSize',\n 'onSizeChange',\n 'sizeUpdate',\n 'sizeUpdateMs',\n 'style',\n 'inset',\n] as const satisfies readonly (keyof SidebarPublicProps)[];\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((initialProps, ref) => {\n const {\n className,\n presentation = { initial: 'overlay', md: 'fixed' },\n expandedSize = 288,\n minSize = 200,\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 thinSize = 64,\n toggleModes,\n state,\n defaultState,\n onStateChange,\n size,\n defaultSize,\n onSizeChange,\n sizeUpdate,\n sizeUpdateMs = 50,\n inset,\n } = initialProps;\n const sidebarDomProps = extractPaneDomProps(initialProps, SIDEBAR_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('sidebar');\n return () => unregisterInset('sidebar');\n }\n }, [inset, registerInset, unregisterInset]);\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n // Phase sequencing is now CSS-driven; no JS-managed phase\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 === SidebarHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === SidebarHandle));\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: { reason: 'init' | 'resize' | 'controlled' }) => 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: { reason: 'init' | 'resize' | 'controlled' }) => {\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: { reason: 'init' | 'resize' | 'controlled' }) => {\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: { reason: 'init' | 'resize' | 'controlled' }) => cb(s, meta);\n }, [onSizeChange, sizeUpdate, sizeUpdateMs]);\n\n // Register with shell\n const sidebarId = React.useId();\n React.useEffect(() => {\n shell.setHasSidebar(true);\n return () => {\n shell.setHasSidebar(false);\n };\n }, [shell, sidebarId]);\n\n // Dev guards\n const wasControlledRef = React.useRef<boolean | null>(null);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof state !== 'undefined' && typeof defaultState !== 'undefined') {\n console.error('Shell.Sidebar: Do not pass both `state` and `defaultState`. Choose one.');\n }\n if (typeof size !== 'undefined' && typeof defaultSize !== 'undefined') {\n console.error('Shell.Sidebar: Do not pass both `size` and `defaultSize`. Choose one.');\n }\n }\n\n // Warn on mode switch between controlled/uncontrolled\n React.useEffect(() => {\n const isControlled = typeof state !== 'undefined';\n if (wasControlledRef.current === null) {\n wasControlledRef.current = isControlled;\n return;\n }\n if (wasControlledRef.current !== isControlled) {\n console.warn('Shell.Sidebar: Switching between controlled and uncontrolled `state` is not supported.');\n wasControlledRef.current = isControlled;\n }\n }, [state]);\n\n // Resolve responsive controlled state at top level\n const stateIsResponsive = typeof state === 'object' && state !== null;\n const { resolvedDefault: resolvedSidebarDefault } = useResponsiveInitialState<SidebarMode>({\n controlledValue: state,\n defaultValue: defaultState,\n currentValue: shell.sidebarMode as SidebarMode,\n setValue: shell.setSidebarMode,\n breakpointReady: shell.currentBreakpointReady,\n controlledIsResponsive: stateIsResponsive,\n onResponsiveChange: (next) => onStateChange?.(next, { reason: 'responsive' }),\n onInit: (initial) => onStateChange?.(initial, { reason: 'init' }),\n });\n\n // Emit mode changes\n const lastNotifyModeRef = React.useRef<SidebarMode | null>(null);\n React.useEffect(() => {\n // notify new API when uncontrolled; skip first run to avoid masking init\n if (typeof state === 'undefined') {\n if (lastNotifyModeRef.current === null) {\n lastNotifyModeRef.current = shell.sidebarMode as SidebarMode;\n } else if (lastNotifyModeRef.current !== shell.sidebarMode) {\n lastNotifyModeRef.current = shell.sidebarMode as SidebarMode;\n onStateChange?.(shell.sidebarMode as SidebarMode, { reason: 'toggle' });\n }\n }\n }, [shell.sidebarMode, state, onStateChange]);\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 prevSidebarModeRef = React.useRef<SidebarMode | null>(null);\n const hasInitializedRef = React.useRef(false);\n React.useEffect(() => {\n const currentMode = shell.sidebarMode as SidebarMode;\n\n // Wait for breakpoint to be ready before enabling callbacks\n if (!shell.currentBreakpointReady) {\n prevSidebarModeRef.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 prevSidebarModeRef.current = currentMode;\n return;\n }\n\n const prevMode = prevSidebarModeRef.current;\n\n // Only fire on actual state transitions\n if (prevMode !== null && prevMode !== currentMode) {\n // onExpand: when becoming visible (collapsed \u2192 thin/expanded)\n if (prevMode === 'collapsed' && currentMode !== 'collapsed') {\n onExpandRef.current?.();\n }\n // onCollapse: when becoming hidden (any \u2192 collapsed)\n else if (currentMode === 'collapsed') {\n onCollapseRef.current?.();\n }\n prevSidebarModeRef.current = currentMode;\n }\n }, [shell.sidebarMode, shell.currentBreakpointReady]);\n\n // Option A: thin is width-only; content remains visible whenever not collapsed\n const isContentVisible = shell.sidebarMode !== 'collapsed';\n\n // Default persistence if paneId provided and none supplied (fixed only)\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:sidebar:${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.Sidebar: 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.Sidebar: 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 (async () => {\n if (!resizable || !persistenceAdapter?.load || isOverlay) return;\n const loaded = await persistenceAdapter.load();\n if (mounted && typeof loaded === 'number' && localRef.current) {\n localRef.current.style.setProperty('--sidebar-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n // Register custom toggle behavior based on toggleModes (both|single)\n const shellForToggle = useShell();\n const resolveDefaultSidebarMode = React.useCallback((): SidebarMode => {\n const resolved = resolvedSidebarDefault ?? (typeof defaultState === 'string' ? defaultState : undefined) ?? 'expanded';\n return resolved === 'thin' || resolved === 'expanded' ? resolved : 'expanded';\n }, [resolvedSidebarDefault, defaultState]);\n\n React.useEffect(() => {\n if (!shellForToggle.setSidebarToggleComputer) return;\n const strategy: 'both' | 'single' = toggleModes ?? 'both';\n const compute = (current: SidebarMode): SidebarMode => {\n if (strategy === 'both') {\n if (current === 'collapsed') return 'thin';\n if (current === 'thin') return 'expanded';\n return 'collapsed';\n }\n const target = resolveDefaultSidebarMode();\n if (current === 'collapsed') return target;\n if (current === target) return 'collapsed';\n return target;\n };\n shellForToggle.setSidebarToggleComputer(compute);\n return () => {\n shellForToggle.setSidebarToggleComputer?.((cur) => (cur === 'collapsed' ? 'thin' : cur === 'thin' ? 'expanded' : 'collapsed'));\n };\n }, [shellForToggle, toggleModes, resolveDefaultSidebarMode]);\n\n const lastOverlayWidthRef = React.useRef<number>(expandedSize);\n const lastOverlayModeRef = React.useRef<SidebarMode>('expanded');\n React.useEffect(() => {\n if (shell.sidebarMode !== 'collapsed') {\n lastOverlayModeRef.current = shell.sidebarMode as SidebarMode;\n lastOverlayWidthRef.current = shell.sidebarMode === 'thin' ? thinSize : expandedSize;\n }\n }, [shell.sidebarMode, thinSize, expandedSize]);\n\n // Remove responsive default mode behavior entirely\n\n const handleEl =\n resizable && !isOverlay && shell.sidebarMode === 'expanded' ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--sidebar-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'end',\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: 'sidebar',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setSidebarMode('collapsed'),\n requestToggle: () => shell.togglePane('sidebar'),\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('--sidebar-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('--sidebar-size', `${clamped}px`);\n emitSizeChange(clamped, { reason: 'controlled' });\n }\n }, [controlledSize, minSize, maxSize, normalizeSizeToPx, emitSizeChange]);\n\n if (isOverlay) {\n const open = shell.sidebarMode !== 'collapsed';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setSidebarMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content\n side=\"start\"\n style={{ padding: 0 }}\n width={{\n initial: `${open ? (shell.sidebarMode === 'thin' ? thinSize : expandedSize) : lastOverlayWidthRef.current}px`,\n }}\n >\n <VisuallyHidden>\n <Sheet.Title>Navigation</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n return (\n <div\n {...sidebarDomProps}\n ref={setRef}\n className={classNames('rt-ShellSidebar', className)}\n data-mode={shell.sidebarMode}\n data-peek={shell.peekTarget === 'sidebar' || undefined}\n data-presentation={shell.currentBreakpointReady ? resolvedPresentation : undefined}\n data-open={(shell.currentBreakpointReady && isStacked && isContentVisible) || undefined}\n data-inset={inset || undefined}\n style={{\n ...style,\n '--sidebar-size': `${expandedSize}px`,\n '--sidebar-thin-size': `${thinSize}px`,\n '--sidebar-min-size': `${minSize}px`,\n '--sidebar-max-size': `${maxSize}px`,\n ...(shell.peekTarget === 'sidebar' && shell.sidebarMode === 'collapsed' && !isOverlay\n ? (() => {\n const strategy: 'both' | 'single' = toggleModes ?? 'both';\n const current = shell.sidebarMode as SidebarMode;\n let next: SidebarMode;\n if (strategy === 'both') {\n next = current === 'collapsed' ? 'thin' : current === 'thin' ? 'expanded' : 'collapsed';\n } else {\n const target = resolveDefaultSidebarMode();\n next = current === 'collapsed' ? target : 'collapsed';\n }\n if (next === 'thin') {\n return {\n '--peek-sidebar-width': `${thinSize}px`,\n } as CSSPropertiesWithVars;\n }\n return {\n '--peek-sidebar-width': `var(--sidebar-size, ${expandedSize}px)`,\n } as CSSPropertiesWithVars;\n })()\n : {}),\n } as CSSPropertiesWithVars}\n >\n <div className=\"rt-ShellSidebarContent\" data-visible={isContentVisible || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n}) as SidebarComponent;\n\nSidebar.displayName = 'Shell.Sidebar';\nSidebar.Handle = SidebarHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "classNames", "Sheet", "VisuallyHidden", "useShell", "useInset", "useResponsivePresentation", "useResponsiveInitialState", "PaneResizeContext", "extractPaneDomProps", "SidebarHandle", "PaneHandle", "normalizeToPx", "SIDEBAR_DOM_PROP_KEYS", "Sidebar", "initialProps", "ref", "className", "presentation", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "thinSize", "toggleModes", "state", "defaultState", "onStateChange", "size", "defaultSize", "onSizeChange", "sizeUpdate", "sizeUpdateMs", "inset", "sidebarDomProps", "shell", "registerInset", "unregisterInset", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "debounceTimeoutRef", "emitSizeChange", "cb", "strategy", "ms", "s", "meta", "last", "now", "sidebarId", "wasControlledRef", "isControlled", "stateIsResponsive", "resolvedSidebarDefault", "next", "initial", "lastNotifyModeRef", "onExpandRef", "onCollapseRef", "prevSidebarModeRef", "hasInitializedRef", "currentMode", "prevMode", "isContentVisible", "persistenceAdapter", "key", "v", "mounted", "loaded", "shellForToggle", "resolveDefaultSidebarMode", "resolved", "compute", "current", "target", "cur", "lastOverlayWidthRef", "lastOverlayModeRef", "handleEl", "client", "startClient", "startSize", "isRtl", "delta", "i", "normalizeSizeToPx", "value", "px", "clamped", "controlledSize", "open", "o"]
|
|
7
7
|
}
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
import * as React from 'react';
|
|
34
34
|
import { Dialog as DialogPrimitive } from 'radix-ui';
|
|
35
35
|
import type { DialogContentOwnProps } from './dialog.props.js';
|
|
36
|
+
import { Text } from './text.js';
|
|
36
37
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
37
38
|
import type { HeadingProps } from './heading.js';
|
|
38
|
-
import type { TextProps } from './text.js';
|
|
39
39
|
/**
|
|
40
40
|
* Supported sides for the Sheet.
|
|
41
41
|
* Aliases are normalized RTL-aware: `left` → `start`, `right` → `end`.
|
|
@@ -71,9 +71,9 @@ interface SheetTitleProps extends HeadingProps {
|
|
|
71
71
|
}
|
|
72
72
|
/** Accessible title for the Sheet. Renders as Heading with sensible defaults. */
|
|
73
73
|
declare const Title: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
74
|
-
type SheetDescriptionProps =
|
|
74
|
+
type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof Text>;
|
|
75
75
|
/** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */
|
|
76
|
-
declare const Description: React.ForwardRefExoticComponent<
|
|
76
|
+
declare const Description: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
|
|
77
77
|
interface SheetCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {
|
|
78
78
|
}
|
|
79
79
|
/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG/D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAKjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD;;;GAGG;AACH,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE;;;GAGG;AAGH;;GAEG;AACH,UAAU,cAAe,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,IAAI,EAAE,OAAO,CAAC;CAAG;AAC/F,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAwD,CAAC;AAM5F,kEAAkE;AAClE,UAAU,iBACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC;CAAG;AAChF,QAAA,MAAM,OAAO,6FAMZ,CAAC;AAMF,UAAU,iBACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,EACzE,qBAAqB;IACvB,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;CACxF;AAED;;;;GAIG;AACH,QAAA,MAAM,OAAO,0FA4JZ,CAAC;AAKF,UAAU,eAAgB,SAAQ,YAAY;CAAG;AACjD,iFAAiF;AACjF,QAAA,MAAM,KAAK,4FAMV,CAAC;AAKF,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;AACzE,gGAAgG;AAChG,QAAA,MAAM,WAAW,+FAMhB,CAAC;AAIF,UAAU,eACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC;CAAG;AAC9E,yFAAyF;AACzF,QAAA,MAAM,KAAK,2FAMV,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;AAC7D,YAAY,EACV,cAAc,IAAI,SAAS,EAC3B,iBAAiB,IAAI,YAAY,EACjC,iBAAiB,IAAI,YAAY,EACjC,eAAe,IAAI,UAAU,EAC7B,qBAAqB,IAAI,gBAAgB,EACzC,eAAe,IAAI,UAAU,GAC9B,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import*as e from"react";import
|
|
1
|
+
"use client";import*as e from"react";import z from"classnames";import{Dialog as n}from"radix-ui";import{dialogContentPropDefs as A}from"./dialog.props.js";import{Theme as V}from"./theme.js";import{Heading as _}from"./heading.js";import{Text as K}from"./text.js";import{extractProps as u}from"../helpers/extract-props.js";import{requireReactElement as y}from"../helpers/require-react-element.js";import{useBodyPointerEventsCleanup as q}from"../hooks/use-body-pointer-events-cleanup.js";const D=o=>e.createElement(n.Root,{...o,modal:!0});D.displayName="Sheet.Root";const S=e.forwardRef(({children:o,...t},r)=>e.createElement(n.Trigger,{...t,ref:r,asChild:!0},y(o)));S.displayName="Sheet.Trigger";const C=e.forwardRef((o,t)=>{const{side:r="start",forceMount:a,container:R,className:b,panelBackground:x,material:N,...k}=o,M={left:"start",right:"end",start:"start",end:"end",top:"top",bottom:"bottom"}[r],{align:F,panelBackground:w,material:B,...d}=A,{panelBackground:m,material:f}=u({panelBackground:x,material:N},{panelBackground:w,material:B}),h=e.useMemo(()=>f??m,[f,m]),{default:U,...W}=d.maxWidth,O={...d,maxWidth:W},{className:H,...L}=u(k,O),g=e.useRef(null),j=e.useMemo(()=>i=>{g.current=i,typeof t=="function"?t(i):t&&(t.current=i)},[t]);return q(),e.useEffect(()=>{if(typeof window>"u")return;const i=g.current;if(!i)return;const s=i.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(s.length===0)return;const l=s[0],c=s[s.length-1],P=p=>{p.key==="Tab"&&(p.shiftKey?document.activeElement===l&&(p.preventDefault(),c.focus()):document.activeElement===c&&(p.preventDefault(),l.focus()))};return i.addEventListener("keydown",P),l.focus(),()=>{i.removeEventListener("keydown",P)}},[]),e.createElement(n.Portal,{container:R,forceMount:a},e.createElement(V,{asChild:!0},e.createElement(n.Overlay,{className:"rt-BaseDialogOverlay rt-DialogOverlay rt-SheetOverlay"},e.createElement(n.Content,{...L,ref:j,className:z("rt-BaseDialogContent","rt-SheetContent",b,H),"data-side":M,"data-material":h,"data-panel-background":h,tabIndex:-1,role:"dialog","aria-modal":"true"}))))});C.displayName="Sheet.Content";const v=e.forwardRef(({size:o="4",weight:t="medium",...r},a)=>e.createElement(n.Title,{asChild:!0},e.createElement(_,{ref:a,size:o,weight:t,...r})));v.displayName="Sheet.Title";const T=e.forwardRef(({size:o="2",color:t="gray",...r},a)=>e.createElement(n.Description,{asChild:!0},e.createElement(K,{ref:a,size:o,color:t,...r})));T.displayName="Sheet.Description";const E=e.forwardRef(({children:o,...t},r)=>e.createElement(n.Close,{...t,ref:r,asChild:!0},y(o)));E.displayName="Sheet.Close";export{E as Close,C as Content,T as Description,D as Root,v as Title,S as Trigger};
|
|
2
2
|
//# sourceMappingURL=sheet.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/sheet.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\n/**\n * Sheet\n *\n * A side-placed overlay built on top of Radix Dialog. It inherits accessibility,\n * focus management, overlay behavior, and sizing scales from the base dialog, and\n * adds side placement and slide motion suited for navigation panels and drawers.\n *\n * Structure mirrors Dialog:\n * - Root, Trigger, Content, Title, Description, Close\n *\n * Notes\n * - Side: set with `side` on `Sheet.Content`. Aliases: `left` \u2192 `start`, `right` \u2192 `end`.\n * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog\n * maxWidth clamping is removed for Sheets.\n * - Material: use `material` (solid | translucent). Deprecated `panelBackground` falls back\n * in dev with a warning.\n * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.\n *\n * Example\n * <Sheet.Root>\n * <Sheet.Trigger>\n * <Button>Open</Button>\n * </Sheet.Trigger>\n * <Sheet.Content side=\"end\" width={{ initial: '280px', md: '360px' }}>\n * <Sheet.Title>Details</Sheet.Title>\n * ...\n * <Sheet.Close>\n * <Button>Close</Button>\n * </Sheet.Close>\n * </Sheet.Content>\n * </Sheet.Root>\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nimport { dialogContentPropDefs } from './dialog.props.js';\nimport type { DialogContentOwnProps } from './dialog.props.js';\nimport { Theme } from './theme.js';\nimport { Heading } from './heading.js';\nimport { Text } from './text.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { HeadingProps } from './heading.js';\nimport type { TextProps } from './text.js';\n\n/**\n * Supported sides for the Sheet.\n * Aliases are normalized RTL-aware: `left` \u2192 `start`, `right` \u2192 `end`.\n */\ntype SheetSide = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Sheet is a side-placed overlay built on the Dialog primitive.\n * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement and slide motion.\n */\n\n// Root\n/**\n * Props for `Sheet.Root` (Radix Dialog root with `modal` forced on).\n */\ninterface SheetRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}\nconst Root: React.FC<SheetRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;\nRoot.displayName = 'Sheet.Root';\n\n// Trigger\n/** Element type for `Sheet.Trigger`. */\ntype SheetTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\n/** Props for `Sheet.Trigger` (expects a single element child). */\ninterface SheetTriggerProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}\nconst Trigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Trigger {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Trigger>\n ),\n);\nTrigger.displayName = 'Sheet.Trigger';\n\n// Content\n/** Element type for `Sheet.Content`. */\ntype SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ninterface SheetContentProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,\n DialogContentOwnProps {\n /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */\n side?: SheetSide;\n /** Optional DOM container to portal into. Defaults to `document.body`. */\n container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];\n}\n\n/**\n * Renders the Sheet panel. Normalizes left/right to logical start/end and\n * forwards dialog sizing props. Provide an accessible name via `Sheet.Title`\n * or `aria-label`.\n */\nconst Content = React.forwardRef<SheetContentElement, SheetContentProps>(\n (allProps, forwardedRef) => {\n const {\n side = 'start',\n forceMount,\n container,\n className,\n panelBackground: panelBackgroundProp,\n material: materialProp,\n ...restProps\n } = allProps;\n const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {\n left: 'start',\n right: 'end',\n start: 'start',\n end: 'end',\n top: 'top',\n bottom: 'bottom',\n };\n const normalizedSide = normalizedSideMap[side];\n // Reuse dialog content prop defs for size/width/height tokens, but handle\n // material/panelBackground explicitly to avoid forwarding unknown DOM props.\n const {\n align: _alignPropDef,\n panelBackground: panelBackgroundPropDef,\n material: materialPropDef,\n ...propDefs\n } = dialogContentPropDefs;\n\n // Extract panelBackground and material together (remove from DOM props)\n const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(\n { panelBackground: panelBackgroundProp, material: materialProp },\n { panelBackground: panelBackgroundPropDef, material: materialPropDef },\n );\n\n const materialValue = React.useMemo(() => {\n if (resolvedPanelBackground !== undefined) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use the `material` prop instead.',\n );\n }\n }\n return resolvedMaterial ?? resolvedPanelBackground;\n }, [resolvedMaterial, resolvedPanelBackground]);\n\n // Now extract remaining props using dialog defs so size/width/height classnames are applied\n // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default\n // Match dialog.tsx: extract once and avoid leaking panel/material\n const { default: _mwDefault, ...maxWidthWithoutDefault } = propDefs.maxWidth;\n const sheetPropDefs = {\n ...propDefs,\n maxWidth: maxWidthWithoutDefault,\n } as typeof propDefs;\n const { className: extractedClassName, ...contentProps } = extractProps(\n restProps,\n sheetPropDefs,\n );\n\n // Dev-only a11y guard: ensure label is provided via Title or aria-label\n if (process.env.NODE_ENV !== 'production') {\n const children = (contentProps as any).children as React.ReactNode;\n const hasAriaLabel = typeof (contentProps as any)['aria-label'] === 'string';\n let hasTitle = false;\n if (children) {\n for (const child of React.Children.toArray(children)) {\n if (React.isValidElement(child) && child.type === Title) {\n hasTitle = true;\n break;\n }\n }\n }\n if (!hasTitle && !hasAriaLabel) {\n console.warn(\n 'Sheet.Content: Missing accessible name. Include Sheet.Title as a child or provide aria-label.',\n );\n }\n }\n\n // Focus management and stuck pointer-events cleanup like Dialog\n const contentRef = React.useRef<HTMLDivElement>(null);\n const combinedRef = React.useMemo(\n () => (node: HTMLDivElement | null) => {\n contentRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [forwardedRef],\n );\n\n useBodyPointerEventsCleanup();\n\n React.useEffect(() => {\n if (typeof window === 'undefined') return;\n const content = contentRef.current;\n if (!content) return;\n\n const focusableElements = content.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n\n if (focusableElements.length === 0) return;\n\n const firstElement = focusableElements[0] as HTMLElement;\n const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n } else if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n content.addEventListener('keydown', handleKeyDown);\n firstElement.focus();\n\n return () => {\n content.removeEventListener('keydown', handleKeyDown);\n };\n }, []);\n\n return (\n <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DialogPrimitive.Overlay className=\"rt-BaseDialogOverlay rt-DialogOverlay rt-SheetOverlay\">\n <DialogPrimitive.Content\n {...contentProps}\n ref={combinedRef}\n className={classNames(\n 'rt-BaseDialogContent',\n 'rt-SheetContent',\n className,\n extractedClassName,\n )}\n data-side={normalizedSide}\n data-material={materialValue}\n data-panel-background={materialValue}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n />\n </DialogPrimitive.Overlay>\n </Theme>\n </DialogPrimitive.Portal>\n );\n },\n);\nContent.displayName = 'Sheet.Content';\n\n// Title - renders as Heading with sensible defaults\ntype SheetTitleElement = React.ElementRef<typeof Heading>;\ninterface SheetTitleProps extends HeadingProps {}\n/** Accessible title for the Sheet. Renders as Heading with sensible defaults. */\nconst Title = React.forwardRef<SheetTitleElement, SheetTitleProps>(\n ({ size = '4', weight = 'medium', ...props }, ref) => (\n <DialogPrimitive.Title asChild>\n <Heading ref={ref} size={size} weight={weight} {...props} />\n </DialogPrimitive.Title>\n ),\n);\nTitle.displayName = 'Sheet.Title';\n\n// Description - renders as Text with sensible defaults\ntype SheetDescriptionElement = React.ElementRef<typeof Text>;\ntype SheetDescriptionProps = TextProps;\n/** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */\nconst Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(\n (props, ref) => {\n const { size = '2', color = 'gray', ...rest } = props as any;\n return (\n <DialogPrimitive.Description asChild>\n <Text ref={ref} size={size} color={color} {...rest} />\n </DialogPrimitive.Description>\n );\n },\n);\nDescription.displayName = 'Sheet.Description';\n\ntype SheetCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface SheetCloseProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}\n/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */\nconst Close = React.forwardRef<SheetCloseElement, SheetCloseProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Close {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Close>\n ),\n);\nClose.displayName = 'Sheet.Close';\n\nexport { Root, Trigger, Content, Title, Description, Close };\nexport type {\n SheetRootProps as RootProps,\n SheetTriggerProps as TriggerProps,\n SheetContentProps as ContentProps,\n SheetTitleProps as TitleProps,\n SheetDescriptionProps as DescriptionProps,\n SheetCloseProps as CloseProps,\n};\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["'use client';\n\n/**\n * Sheet\n *\n * A side-placed overlay built on top of Radix Dialog. It inherits accessibility,\n * focus management, overlay behavior, and sizing scales from the base dialog, and\n * adds side placement and slide motion suited for navigation panels and drawers.\n *\n * Structure mirrors Dialog:\n * - Root, Trigger, Content, Title, Description, Close\n *\n * Notes\n * - Side: set with `side` on `Sheet.Content`. Aliases: `left` \u2192 `start`, `right` \u2192 `end`.\n * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog\n * maxWidth clamping is removed for Sheets.\n * - Material: use `material` (solid | translucent). Deprecated `panelBackground` falls back\n * in dev with a warning.\n * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.\n *\n * Example\n * <Sheet.Root>\n * <Sheet.Trigger>\n * <Button>Open</Button>\n * </Sheet.Trigger>\n * <Sheet.Content side=\"end\" width={{ initial: '280px', md: '360px' }}>\n * <Sheet.Title>Details</Sheet.Title>\n * ...\n * <Sheet.Close>\n * <Button>Close</Button>\n * </Sheet.Close>\n * </Sheet.Content>\n * </Sheet.Root>\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nimport { dialogContentPropDefs } from './dialog.props.js';\nimport type { DialogContentOwnProps } from './dialog.props.js';\nimport { Theme } from './theme.js';\nimport { Heading } from './heading.js';\nimport { Text } from './text.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { HeadingProps } from './heading.js';\nimport type { TextProps } from './text.js';\n\n/**\n * Supported sides for the Sheet.\n * Aliases are normalized RTL-aware: `left` \u2192 `start`, `right` \u2192 `end`.\n */\ntype SheetSide = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Sheet is a side-placed overlay built on the Dialog primitive.\n * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement and slide motion.\n */\n\n// Root\n/**\n * Props for `Sheet.Root` (Radix Dialog root with `modal` forced on).\n */\ninterface SheetRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}\nconst Root: React.FC<SheetRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;\nRoot.displayName = 'Sheet.Root';\n\n// Trigger\n/** Element type for `Sheet.Trigger`. */\ntype SheetTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\n/** Props for `Sheet.Trigger` (expects a single element child). */\ninterface SheetTriggerProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}\nconst Trigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Trigger {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Trigger>\n ),\n);\nTrigger.displayName = 'Sheet.Trigger';\n\n// Content\n/** Element type for `Sheet.Content`. */\ntype SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ninterface SheetContentProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,\n DialogContentOwnProps {\n /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */\n side?: SheetSide;\n /** Optional DOM container to portal into. Defaults to `document.body`. */\n container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];\n}\n\n/**\n * Renders the Sheet panel. Normalizes left/right to logical start/end and\n * forwards dialog sizing props. Provide an accessible name via `Sheet.Title`\n * or `aria-label`.\n */\nconst Content = React.forwardRef<SheetContentElement, SheetContentProps>(\n (allProps, forwardedRef) => {\n const {\n side = 'start',\n forceMount,\n container,\n className,\n panelBackground: panelBackgroundProp,\n material: materialProp,\n ...restProps\n } = allProps;\n const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {\n left: 'start',\n right: 'end',\n start: 'start',\n end: 'end',\n top: 'top',\n bottom: 'bottom',\n };\n const normalizedSide = normalizedSideMap[side];\n // Reuse dialog content prop defs for size/width/height tokens, but handle\n // material/panelBackground explicitly to avoid forwarding unknown DOM props.\n const {\n align: _alignPropDef,\n panelBackground: panelBackgroundPropDef,\n material: materialPropDef,\n ...propDefs\n } = dialogContentPropDefs;\n\n // Extract panelBackground and material together (remove from DOM props)\n const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(\n { panelBackground: panelBackgroundProp, material: materialProp },\n { panelBackground: panelBackgroundPropDef, material: materialPropDef },\n );\n\n const materialValue = React.useMemo(() => {\n if (resolvedPanelBackground !== undefined) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use the `material` prop instead.',\n );\n }\n }\n return resolvedMaterial ?? resolvedPanelBackground;\n }, [resolvedMaterial, resolvedPanelBackground]);\n\n // Now extract remaining props using dialog defs so size/width/height classnames are applied\n // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default\n // Match dialog.tsx: extract once and avoid leaking panel/material\n const { default: _mwDefault, ...maxWidthWithoutDefault } = propDefs.maxWidth;\n const sheetPropDefs = {\n ...propDefs,\n maxWidth: maxWidthWithoutDefault,\n } as typeof propDefs;\n const { className: extractedClassName, ...contentProps } = extractProps(\n restProps,\n sheetPropDefs,\n );\n\n // Dev-only a11y guard: ensure label is provided via Title or aria-label\n if (process.env.NODE_ENV !== 'production') {\n const children = (contentProps as any).children as React.ReactNode;\n const hasAriaLabel = typeof (contentProps as any)['aria-label'] === 'string';\n let hasTitle = false;\n if (children) {\n for (const child of React.Children.toArray(children)) {\n if (React.isValidElement(child) && child.type === Title) {\n hasTitle = true;\n break;\n }\n }\n }\n if (!hasTitle && !hasAriaLabel) {\n console.warn(\n 'Sheet.Content: Missing accessible name. Include Sheet.Title as a child or provide aria-label.',\n );\n }\n }\n\n // Focus management and stuck pointer-events cleanup like Dialog\n const contentRef = React.useRef<HTMLDivElement>(null);\n const combinedRef = React.useMemo(\n () => (node: HTMLDivElement | null) => {\n contentRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [forwardedRef],\n );\n\n useBodyPointerEventsCleanup();\n\n React.useEffect(() => {\n if (typeof window === 'undefined') return;\n const content = contentRef.current;\n if (!content) return;\n\n const focusableElements = content.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n\n if (focusableElements.length === 0) return;\n\n const firstElement = focusableElements[0] as HTMLElement;\n const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n } else if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n content.addEventListener('keydown', handleKeyDown);\n firstElement.focus();\n\n return () => {\n content.removeEventListener('keydown', handleKeyDown);\n };\n }, []);\n\n return (\n <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DialogPrimitive.Overlay className=\"rt-BaseDialogOverlay rt-DialogOverlay rt-SheetOverlay\">\n <DialogPrimitive.Content\n {...contentProps}\n ref={combinedRef}\n className={classNames(\n 'rt-BaseDialogContent',\n 'rt-SheetContent',\n className,\n extractedClassName,\n )}\n data-side={normalizedSide}\n data-material={materialValue}\n data-panel-background={materialValue}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n />\n </DialogPrimitive.Overlay>\n </Theme>\n </DialogPrimitive.Portal>\n );\n },\n);\nContent.displayName = 'Sheet.Content';\n\n// Title - renders as Heading with sensible defaults\ntype SheetTitleElement = React.ElementRef<typeof Heading>;\ninterface SheetTitleProps extends HeadingProps {}\n/** Accessible title for the Sheet. Renders as Heading with sensible defaults. */\nconst Title = React.forwardRef<SheetTitleElement, SheetTitleProps>(\n ({ size = '4', weight = 'medium', ...props }, ref) => (\n <DialogPrimitive.Title asChild>\n <Heading ref={ref} size={size} weight={weight} {...props} />\n </DialogPrimitive.Title>\n ),\n);\nTitle.displayName = 'Sheet.Title';\n\n// Description - renders as Text with sensible defaults\ntype SheetDescriptionElement = React.ElementRef<typeof Text>;\ntype SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof Text>;\n/** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */\nconst Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(\n ({ size = '2', color = 'gray', ...rest }, ref) => (\n <DialogPrimitive.Description asChild>\n <Text ref={ref} size={size} color={color} {...rest} />\n </DialogPrimitive.Description>\n ),\n);\nDescription.displayName = 'Sheet.Description';\n\ntype SheetCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface SheetCloseProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}\n/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */\nconst Close = React.forwardRef<SheetCloseElement, SheetCloseProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Close {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Close>\n ),\n);\nClose.displayName = 'Sheet.Close';\n\nexport { Root, Trigger, Content, Title, Description, Close };\nexport type {\n SheetRootProps as RootProps,\n SheetTriggerProps as TriggerProps,\n SheetContentProps as ContentProps,\n SheetTitleProps as TitleProps,\n SheetDescriptionProps as DescriptionProps,\n SheetCloseProps as CloseProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "classNames", "DialogPrimitive", "dialogContentPropDefs", "Theme", "Heading", "Text", "extractProps", "requireReactElement", "useBodyPointerEventsCleanup", "Root", "props", "Trigger", "children", "ref", "Content", "allProps", "forwardedRef", "side", "forceMount", "container", "className", "panelBackgroundProp", "materialProp", "restProps", "normalizedSide", "_alignPropDef", "panelBackgroundPropDef", "materialPropDef", "propDefs", "resolvedPanelBackground", "resolvedMaterial", "materialValue", "_mwDefault", "maxWidthWithoutDefault", "sheetPropDefs", "extractedClassName", "contentProps", "contentRef", "combinedRef", "node", "content", "focusableElements", "firstElement", "lastElement", "handleKeyDown", "event", "Title", "size", "weight", "Description", "color", "rest", "Close"]
|
|
7
7
|
}
|
|
@@ -28,6 +28,8 @@ export interface ShellContextValue {
|
|
|
28
28
|
setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;
|
|
29
29
|
onLeftPres?: (p: PresentationValue) => void;
|
|
30
30
|
onLeftDefaults?: (size: number) => void;
|
|
31
|
+
onRailDefaults?: (size: number) => void;
|
|
32
|
+
onPanelDefaults?: (size: number) => void;
|
|
31
33
|
}
|
|
32
34
|
/** @internal Shell root context. Prefer slice hooks (useSidebarMode, useShellActions, etc.). */
|
|
33
35
|
export declare function useShell(): ShellContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.context.d.ts","sourceRoot":"","sources":["../../../src/components/shell.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,QAAQ,CAAC;IACxB,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,QAAQ,CAAC;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAGxC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,IAAI,CAAC;IAGtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAGtC,iBAAiB,EAAE,UAAU,CAAC;IAC9B,sBAAsB,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,iBAAiB,CAAC;IAG7C,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAE3C,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,KAAK,IAAI,CAAC;IAE/E,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"shell.context.d.ts","sourceRoot":"","sources":["../../../src/components/shell.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzG,MAAM,WAAW,iBAAiB;IAEhC,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,QAAQ,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,QAAQ,CAAC;IACxB,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,QAAQ,CAAC;IACrB,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAGxC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,IAAI,CAAC;IAGtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAGtC,iBAAiB,EAAE,UAAU,CAAC;IAC9B,sBAAsB,EAAE,OAAO,CAAC;IAChC,wBAAwB,CAAC,EAAE,iBAAiB,CAAC;IAG7C,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAE3C,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,KAAK,IAAI,CAAC;IAE/E,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAID,gGAAgG;AAChG,wBAAgB,QAAQ,sBAIvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEzG;AAKD,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;AAEvC,eAAO,MAAM,eAAe;cAAmC,QAAQ;iBAAe,UAAU,CAAC,QAAQ,CAAC;SAAgB,CAAC;AAC3H,wBAAgB,WAAW;cADoC,QAAQ;iBAAe,UAAU,CAAC,QAAQ,CAAC;EAKzG;AAED,eAAO,MAAM,gBAAgB;eAAoC,QAAQ;kBAAgB,UAAU,CAAC,QAAQ,CAAC;SAAgB,CAAC;AAC9H,wBAAgB,YAAY;eADqC,QAAQ;kBAAgB,UAAU,CAAC,QAAQ,CAAC;EAK5G;AAED,eAAO,MAAM,kBAAkB;iBAAsC,WAAW;oBAAkB,UAAU,CAAC,WAAW,CAAC;SAAgB,CAAC;AAC1I,wBAAgB,cAAc;iBADuC,WAAW;oBAAkB,UAAU,CAAC,WAAW,CAAC;EAKxH;AAED,eAAO,MAAM,oBAAoB;mBAAwC,QAAQ;sBAAoB,UAAU,CAAC,QAAQ,CAAC;SAAgB,CAAC;AAC1I,wBAAgB,gBAAgB;mBADyC,QAAQ;sBAAoB,UAAU,CAAC,QAAQ,CAAC;EAKxH;AAED,eAAO,MAAM,iBAAiB;gBAAqC,QAAQ;mBAAiB,UAAU,CAAC,QAAQ,CAAC;SAAgB,CAAC;AACjI,wBAAgB,aAAa;gBADsC,QAAQ;mBAAiB,UAAU,CAAC,QAAQ,CAAC;EAK/G;AAGD,eAAO,MAAM,mBAAmB;uBAA4C,UAAU;4BAA0B,OAAO;+BAA6B,iBAAiB;SAAgB,CAAC;AACtL,wBAAgB,eAAe;uBAD6C,UAAU;4BAA0B,OAAO;+BAA6B,iBAAiB;EAKpK;AAGD,eAAO,MAAM,WAAW;gBAAqC,UAAU,GAAG,IAAI;mBAAiB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI;cAAY,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;eAAa,MAAM,IAAI;SAEtL,CAAC;AACF,wBAAgB,OAAO;gBAHsC,UAAU,GAAG,IAAI;mBAAiB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI;cAAY,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;eAAa,MAAM,IAAI;EAOtL;AAGD,eAAO,MAAM,cAAc;gBACb,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;gBACvB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;kBACrB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;+BACV,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,KAAK,IAAI;SACjE,CAAC;AAChB,wBAAgB,eAAe;gBALjB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;gBACvB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;kBACrB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;+BACV,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,KAAK,IAAI;EAM/E;AAGD,eAAO,MAAM,kBAAkB;aAAkC,OAAO;gBAAc,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI;gBAAc,OAAO;mBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI;SAAgB,CAAC;AACrL,wBAAgB,cAAc;aADmC,OAAO;gBAAc,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI;gBAAc,OAAO;mBAAiB,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI;EAKnK;AAGD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAClF,eAAO,MAAM,YAAY;gBACX,GAAG,CAAC,WAAW,CAAC;mBACb,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI;qBACvB,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI;iBAC7B,OAAO;SACP,CAAC;AAChB,wBAAgB,QAAQ;gBALV,GAAG,CAAC,WAAW,CAAC;mBACb,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI;qBACvB,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI;iBAC7B,OAAO;EAMrB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/shell.context.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport type { Breakpoint, PresentationValue, SidebarMode, PaneMode, PaneTarget } from './shell.types.js';\n\nexport interface ShellContextValue {\n // Pane states\n leftMode: PaneMode;\n setLeftMode: (mode: PaneMode) => void;\n panelMode: PaneMode; // Panel state within left container\n setPanelMode: (mode: PaneMode) => void;\n sidebarMode: SidebarMode;\n setSidebarMode: (mode: SidebarMode) => void;\n inspectorMode: PaneMode;\n setInspectorMode: (mode: PaneMode) => void;\n bottomMode: PaneMode;\n setBottomMode: (mode: PaneMode) => void;\n\n // Peek state (layout-only, ephemeral)\n peekTarget: PaneTarget | null;\n setPeekTarget: (target: PaneTarget | null) => void;\n peekPane: (target: PaneTarget) => void;\n clearPeek: () => void;\n\n // Composition detection\n hasLeft: boolean;\n setHasLeft: (has: boolean) => void;\n hasSidebar: boolean;\n setHasSidebar: (has: boolean) => void;\n\n // Presentation resolution\n currentBreakpoint: Breakpoint;\n currentBreakpointReady: boolean;\n leftResolvedPresentation?: PresentationValue;\n\n // Actions\n togglePane: (target: PaneTarget) => void;\n expandPane: (target: PaneTarget) => void;\n collapsePane: (target: PaneTarget) => void;\n // Toggle customization\n setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;\n // Dev-only hooks for presentation warnings\n onLeftPres?: (p: PresentationValue) => void;\n // Sizing info for overlay grouping\n onLeftDefaults?: (size: number) => void;\n}\n\nconst ShellContext = React.createContext<ShellContextValue | null>(null);\n\n/** @internal Shell root context. Prefer slice hooks (useSidebarMode, useShellActions, etc.). */\nexport function useShell() {\n const ctx = React.useContext(ShellContext);\n if (!ctx) throw new Error('Shell components must be used within <Shell.Root>');\n return ctx;\n}\n\nexport function ShellProvider({ value, children }: { value: ShellContextValue; children: React.ReactNode }) {\n return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;\n}\n\n// Phase 7: Split contexts for render isolation\n\n// Pane mode slice contexts\ntype ModeSetter<T> = (mode: T) => void;\n\nexport const LeftModeContext = React.createContext<{ leftMode: PaneMode; setLeftMode: ModeSetter<PaneMode> } | null>(null
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport type { Breakpoint, PresentationValue, SidebarMode, PaneMode, PaneTarget } from './shell.types.js';\n\nexport interface ShellContextValue {\n // Pane states\n leftMode: PaneMode;\n setLeftMode: (mode: PaneMode) => void;\n panelMode: PaneMode; // Panel state within left container\n setPanelMode: (mode: PaneMode) => void;\n sidebarMode: SidebarMode;\n setSidebarMode: (mode: SidebarMode) => void;\n inspectorMode: PaneMode;\n setInspectorMode: (mode: PaneMode) => void;\n bottomMode: PaneMode;\n setBottomMode: (mode: PaneMode) => void;\n\n // Peek state (layout-only, ephemeral)\n peekTarget: PaneTarget | null;\n setPeekTarget: (target: PaneTarget | null) => void;\n peekPane: (target: PaneTarget) => void;\n clearPeek: () => void;\n\n // Composition detection\n hasLeft: boolean;\n setHasLeft: (has: boolean) => void;\n hasSidebar: boolean;\n setHasSidebar: (has: boolean) => void;\n\n // Presentation resolution\n currentBreakpoint: Breakpoint;\n currentBreakpointReady: boolean;\n leftResolvedPresentation?: PresentationValue;\n\n // Actions\n togglePane: (target: PaneTarget) => void;\n expandPane: (target: PaneTarget) => void;\n collapsePane: (target: PaneTarget) => void;\n // Toggle customization\n setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;\n // Dev-only hooks for presentation warnings\n onLeftPres?: (p: PresentationValue) => void;\n // Sizing info for overlay grouping\n onLeftDefaults?: (size: number) => void;\n onRailDefaults?: (size: number) => void;\n onPanelDefaults?: (size: number) => void;\n}\n\nconst ShellContext = React.createContext<ShellContextValue | null>(null);\n\n/** @internal Shell root context. Prefer slice hooks (useSidebarMode, useShellActions, etc.). */\nexport function useShell() {\n const ctx = React.useContext(ShellContext);\n if (!ctx) throw new Error('Shell components must be used within <Shell.Root>');\n return ctx;\n}\n\nexport function ShellProvider({ value, children }: { value: ShellContextValue; children: React.ReactNode }) {\n return <ShellContext.Provider value={value}>{children}</ShellContext.Provider>;\n}\n\n// Phase 7: Split contexts for render isolation\n\n// Pane mode slice contexts\ntype ModeSetter<T> = (mode: T) => void;\n\nexport const LeftModeContext = React.createContext<{ leftMode: PaneMode; setLeftMode: ModeSetter<PaneMode> } | null>(null);\nexport function useLeftMode() {\n const ctx = React.useContext(LeftModeContext);\n if (!ctx) throw new Error('useLeftMode must be used within Shell.Root');\n return ctx;\n}\n\nexport const PanelModeContext = React.createContext<{ panelMode: PaneMode; setPanelMode: ModeSetter<PaneMode> } | null>(null);\nexport function usePanelMode() {\n const ctx = React.useContext(PanelModeContext);\n if (!ctx) throw new Error('usePanelMode must be used within Shell.Root');\n return ctx;\n}\n\nexport const SidebarModeContext = React.createContext<{ sidebarMode: SidebarMode; setSidebarMode: ModeSetter<SidebarMode> } | null>(null);\nexport function useSidebarMode() {\n const ctx = React.useContext(SidebarModeContext);\n if (!ctx) throw new Error('useSidebarMode must be used within Shell.Root');\n return ctx;\n}\n\nexport const InspectorModeContext = React.createContext<{ inspectorMode: PaneMode; setInspectorMode: ModeSetter<PaneMode> } | null>(null);\nexport function useInspectorMode() {\n const ctx = React.useContext(InspectorModeContext);\n if (!ctx) throw new Error('useInspectorMode must be used within Shell.Root');\n return ctx;\n}\n\nexport const BottomModeContext = React.createContext<{ bottomMode: PaneMode; setBottomMode: ModeSetter<PaneMode> } | null>(null);\nexport function useBottomMode() {\n const ctx = React.useContext(BottomModeContext);\n if (!ctx) throw new Error('useBottomMode must be used within Shell.Root');\n return ctx;\n}\n\n// Presentation slice\nexport const PresentationContext = React.createContext<{ currentBreakpoint: Breakpoint; currentBreakpointReady: boolean; leftResolvedPresentation?: PresentationValue } | null>(null);\nexport function usePresentation() {\n const ctx = React.useContext(PresentationContext);\n if (!ctx) throw new Error('usePresentation must be used within Shell.Root');\n return ctx;\n}\n\n// Peek slice\nexport const PeekContext = React.createContext<{ peekTarget: PaneTarget | null; setPeekTarget: (t: PaneTarget | null) => void; peekPane: (t: PaneTarget) => void; clearPeek: () => void } | null>(\n null,\n);\nexport function usePeek() {\n const ctx = React.useContext(PeekContext);\n if (!ctx) throw new Error('usePeek must be used within Shell.Root');\n return ctx;\n}\n\n// Actions slice (stable callbacks)\nexport const ActionsContext = React.createContext<{\n togglePane: (t: PaneTarget) => void;\n expandPane: (t: PaneTarget) => void;\n collapsePane: (t: PaneTarget) => void;\n setSidebarToggleComputer?: (fn: (current: SidebarMode) => SidebarMode) => void;\n} | null>(null);\nexport function useShellActions() {\n const ctx = React.useContext(ActionsContext);\n if (!ctx) throw new Error('useShellActions must be used within Shell.Root');\n return ctx;\n}\n\n// Composition slice\nexport const CompositionContext = React.createContext<{ hasLeft: boolean; setHasLeft: (v: boolean) => void; hasSidebar: boolean; setHasSidebar: (v: boolean) => void } | null>(null);\nexport function useComposition() {\n const ctx = React.useContext(CompositionContext);\n if (!ctx) throw new Error('useComposition must be used within Shell.Root');\n return ctx;\n}\n\n// Inset slice - tracks which panes have inset for gray backdrop\nexport type InsetPaneId = 'left' | 'sidebar' | 'content' | 'inspector' | 'bottom';\nexport const InsetContext = React.createContext<{\n insetPanes: Set<InsetPaneId>;\n registerInset: (id: InsetPaneId) => void;\n unregisterInset: (id: InsetPaneId) => void;\n hasAnyInset: boolean;\n} | null>(null);\nexport function useInset() {\n const ctx = React.useContext(InsetContext);\n if (!ctx) throw new Error('useInset must be used within Shell.Root');\n return ctx;\n}\n"],
|
|
5
|
+
"mappings": "AAAA,UAAYA,MAAW,QA+CvB,MAAMC,EAAeD,EAAM,cAAwC,IAAI,EAGhE,SAASE,GAAW,CACzB,MAAMC,EAAMH,EAAM,WAAWC,CAAY,EACzC,GAAI,CAACE,EAAK,MAAM,IAAI,MAAM,mDAAmD,EAC7E,OAAOA,CACT,CAEO,SAASC,EAAc,CAAE,MAAAC,EAAO,SAAAC,CAAS,EAA4D,CAC1G,OAAON,EAAA,cAACC,EAAa,SAAb,CAAsB,MAAOI,GAAQC,CAAS,CACxD,CAOO,MAAMC,EAAkBP,EAAM,cAAgF,IAAI,EAClH,SAASQ,GAAc,CAC5B,MAAML,EAAMH,EAAM,WAAWO,CAAe,EAC5C,GAAI,CAACJ,EAAK,MAAM,IAAI,MAAM,4CAA4C,EACtE,OAAOA,CACT,CAEO,MAAMM,EAAmBT,EAAM,cAAkF,IAAI,EACrH,SAASU,GAAe,CAC7B,MAAMP,EAAMH,EAAM,WAAWS,CAAgB,EAC7C,GAAI,CAACN,EAAK,MAAM,IAAI,MAAM,6CAA6C,EACvE,OAAOA,CACT,CAEO,MAAMQ,EAAqBX,EAAM,cAA4F,IAAI,EACjI,SAASY,GAAiB,CAC/B,MAAMT,EAAMH,EAAM,WAAWW,CAAkB,EAC/C,GAAI,CAACR,EAAK,MAAM,IAAI,MAAM,+CAA+C,EACzE,OAAOA,CACT,CAEO,MAAMU,EAAuBb,EAAM,cAA0F,IAAI,EACjI,SAASc,GAAmB,CACjC,MAAMX,EAAMH,EAAM,WAAWa,CAAoB,EACjD,GAAI,CAACV,EAAK,MAAM,IAAI,MAAM,iDAAiD,EAC3E,OAAOA,CACT,CAEO,MAAMY,EAAoBf,EAAM,cAAoF,IAAI,EACxH,SAASgB,GAAgB,CAC9B,MAAMb,EAAMH,EAAM,WAAWe,CAAiB,EAC9C,GAAI,CAACZ,EAAK,MAAM,IAAI,MAAM,8CAA8C,EACxE,OAAOA,CACT,CAGO,MAAMc,EAAsBjB,EAAM,cAAuI,IAAI,EAC7K,SAASkB,GAAkB,CAChC,MAAMf,EAAMH,EAAM,WAAWiB,CAAmB,EAChD,GAAI,CAACd,EAAK,MAAM,IAAI,MAAM,gDAAgD,EAC1E,OAAOA,CACT,CAGO,MAAMgB,EAAcnB,EAAM,cAC/B,IACF,EACO,SAASoB,GAAU,CACxB,MAAMjB,EAAMH,EAAM,WAAWmB,CAAW,EACxC,GAAI,CAAChB,EAAK,MAAM,IAAI,MAAM,wCAAwC,EAClE,OAAOA,CACT,CAGO,MAAMkB,EAAiBrB,EAAM,cAK1B,IAAI,EACP,SAASsB,GAAkB,CAChC,MAAMnB,EAAMH,EAAM,WAAWqB,CAAc,EAC3C,GAAI,CAAClB,EAAK,MAAM,IAAI,MAAM,gDAAgD,EAC1E,OAAOA,CACT,CAGO,MAAMoB,EAAqBvB,EAAM,cAAuI,IAAI,EAC5K,SAASwB,GAAiB,CAC/B,MAAMrB,EAAMH,EAAM,WAAWuB,CAAkB,EAC/C,GAAI,CAACpB,EAAK,MAAM,IAAI,MAAM,+CAA+C,EACzE,OAAOA,CACT,CAIO,MAAMsB,EAAezB,EAAM,cAKxB,IAAI,EACP,SAAS0B,GAAW,CACzB,MAAMvB,EAAMH,EAAM,WAAWyB,CAAY,EACzC,GAAI,CAACtB,EAAK,MAAM,IAAI,MAAM,yCAAyC,EACnE,OAAOA,CACT",
|
|
6
6
|
"names": ["React", "ShellContext", "useShell", "ctx", "ShellProvider", "value", "children", "LeftModeContext", "useLeftMode", "PanelModeContext", "usePanelMode", "SidebarModeContext", "useSidebarMode", "InspectorModeContext", "useInspectorMode", "BottomModeContext", "useBottomMode", "PresentationContext", "usePresentation", "PeekContext", "usePeek", "ActionsContext", "useShellActions", "CompositionContext", "useComposition", "InsetContext", "useInset"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../src/components/shell.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAA6B,MAAM,kBAAkB,CAAC;AAIxF,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,KAAK,EAAqB,sBAAsB,EAAE,QAAQ,EAAE,WAAW,EAAuB,UAAU,EAAE,UAAU,EAAc,aAAa,
|
|
1
|
+
{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../src/components/shell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import*as e from"react";import X from"classnames";import*as he from"./sheet.js";import{VisuallyHidden as $e}from"./visually-hidden.js";import{useResponsivePresentation as Oe,useResponsiveInitialState as Le}from"./shell.hooks.js";import{PaneResizeContext as We}from"./_internal/shell-resize.js";import{PaneHandle as qe,PanelHandle as Se}from"./_internal/shell-handles.js";import{omitPaneProps as Ge,extractPaneDomProps as Qe,mapResponsiveBooleanToPaneMode as Ee}from"./_internal/shell-prop-helpers.js";import{Sidebar as ue}from"./_internal/shell-sidebar.js";import{Bottom as ve}from"./_internal/shell-bottom.js";import{Inspector as Ce}from"./_internal/shell-inspector.js";import{_BREAKPOINTS as Ke}from"./shell.types.js";import{normalizeToPx as Xe}from"../helpers/normalize-to-px.js";import{ShellProvider as Ye,useShell as ie,LeftModeContext as Je,PanelModeContext as Ze,SidebarModeContext as en,InspectorModeContext as nn,BottomModeContext as tn,PresentationContext as on,PeekContext as an,ActionsContext as ln,CompositionContext as sn,InsetContext as rn,useInset as ke}from"./shell.context.js";function dn(){const[t,a]=e.useState("initial"),[i,C]=e.useState(!1);return e.useEffect(()=>{if(typeof window>"u")return;const P=Object.entries(Ke).map(([f,l])=>[f,window.matchMedia(l)]),S=()=>{const f=P.filter(([,c])=>c.matches).map(([c])=>c),l=f[f.length-1]??"initial";a(l),C(!0)};S();const b=[];return P.forEach(([,f])=>{const l=f;typeof l.addEventListener=="function"&&typeof l.removeEventListener=="function"?(l.addEventListener("change",S),b.push(()=>l.removeEventListener?.("change",S))):typeof l.addListener=="function"&&typeof l.removeListener=="function"&&(l.addListener(S),b.push(()=>l.removeListener?.(S)))}),()=>{b.forEach(f=>{try{f()}catch{}})}},[]),{bp:t,ready:i}}const fe=Symbol("rtShellSlot");function Y(t,a){return t[fe]=a,t}function Rn(t,a){if(!e.isValidElement(t))return!1;const i=t.type;if(i===a)return!0;const C=a?.[fe];return!!(i?.[fe]&&C&&i[fe]===C)}Y(ue,"Shell.Sidebar"),Y(Ce,"Shell.Inspector"),Y(ve,"Shell.Bottom");function pn(t,a){switch(a.type){case"SET_LEFT_MODE":return a.mode==="collapsed"?{...t,leftMode:"collapsed",panelMode:"collapsed"}:{...t,leftMode:a.mode};case"SET_PANEL_MODE":return a.mode==="expanded"&&t.leftMode!=="expanded"?{...t,leftMode:"expanded",panelMode:"expanded"}:{...t,panelMode:a.mode};case"SET_SIDEBAR_MODE":return{...t,sidebarMode:a.mode};case"SET_INSPECTOR_MODE":return{...t,inspectorMode:a.mode};case"SET_BOTTOM_MODE":return{...t,bottomMode:a.mode};case"TOGGLE_PANE":{switch(a.target){case"left":case"rail":return{...t,leftMode:t.leftMode==="expanded"?"collapsed":"expanded",panelMode:t.leftMode==="expanded"?"collapsed":t.panelMode};case"panel":return t.leftMode==="collapsed"?{...t,leftMode:"expanded",panelMode:"expanded"}:{...t,panelMode:t.panelMode==="expanded"?"collapsed":"expanded"};case"sidebar":{const i=t.sidebarMode==="collapsed"?"expanded":t.sidebarMode==="expanded"?"collapsed":"expanded";return{...t,sidebarMode:i}}case"inspector":return{...t,inspectorMode:t.inspectorMode==="expanded"?"collapsed":"expanded"};case"bottom":return{...t,bottomMode:t.bottomMode==="expanded"?"collapsed":"expanded"};default:return t}return t}case"EXPAND_PANE":{switch(a.target){case"left":case"rail":return{...t,leftMode:"expanded"};case"panel":return{...t,leftMode:"expanded",panelMode:"expanded"};case"sidebar":return{...t,sidebarMode:"expanded"};case"inspector":return{...t,inspectorMode:"expanded"};case"bottom":return{...t,bottomMode:"expanded"};default:return t}return t}case"COLLAPSE_PANE":{switch(a.target){case"left":case"rail":return{...t,leftMode:"collapsed",panelMode:"collapsed"};case"panel":return{...t,panelMode:"collapsed"};case"sidebar":return{...t,sidebarMode:"collapsed"};case"inspector":return{...t,inspectorMode:"collapsed"};case"bottom":return{...t,bottomMode:"collapsed"};default:return t}return t}}return t}const ze=e.forwardRef(({className:t,children:a,height:i="full",...C},M)=>{const{bp:P,ready:S}=dn(),b=e.Children.toArray(a),f=b.some(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Panel"&&!!n.props?.defaultOpen),l=b.find(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Rail"),c=l?l.props?.defaultOpen:void 0,z=l?c===void 0?!0:typeof c=="boolean"?c:typeof c=="object"?c.initial??Object.values(c)[0]??!0:!0:!1,j=b.some(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Inspector"&&!!n.props?.defaultOpen),_=b.some(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Inspector"&&typeof n.props?.open<"u"&&!!n.props?.open),h=()=>{const n=b.find(u=>e.isValidElement(u)&&u.type?.displayName==="Shell.Sidebar");if(!n)return"expanded";const d=n.props;if(typeof d?.state<"u"){if(typeof d.state=="string")return d.state;if(typeof d.state=="object")return d.state.initial??Object.values(d.state)[0]??"expanded"}if(typeof d?.defaultState<"u"){if(typeof d.defaultState=="string")return d.defaultState;if(typeof d.defaultState=="object")return d.defaultState.initial??Object.values(d.defaultState)[0]??"expanded"}return"expanded"},L=()=>{const n=b.find(u=>e.isValidElement(u)&&u.type?.displayName==="Shell.Bottom");if(!n)return"collapsed";const d=n.props;if(typeof d?.open<"u"){if(typeof d.open=="boolean")return d.open?"expanded":"collapsed";if(typeof d.open=="object")return d.open.initial??Object.values(d.open)[0]?"expanded":"collapsed"}return typeof d?.defaultOpen<"u"&&d.defaultOpen?"expanded":"collapsed"},[p,r]=e.useReducer(pn,{leftMode:f||z?"expanded":"collapsed",panelMode:f?"expanded":"collapsed",sidebarMode:h(),inspectorMode:j||_?"expanded":"collapsed",bottomMode:L()}),g=e.useCallback(n=>r({type:"SET_LEFT_MODE",mode:n}),[]),F=e.useCallback(n=>r({type:"SET_PANEL_MODE",mode:n}),[]),k=e.useCallback(n=>r({type:"SET_SIDEBAR_MODE",mode:n}),[]),w=e.useCallback(n=>r({type:"SET_INSPECTOR_MODE",mode:n}),[]),A=e.useCallback(n=>r({type:"SET_BOTTOM_MODE",mode:n}),[]),[D,ee]=e.useState(!1),[T,I]=e.useState(!1),$=e.useRef(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed"),R=e.useCallback(n=>{$.current=n},[]);e.useEffect(()=>{T&&D&&console.warn("Shell: Sidebar cannot coexist with Rail or Panel. Use either Rail+Panel OR Sidebar.")},[T,D]);const[x,B]=e.useState(void 0),s=e.useCallback(n=>B(n),[]),N=e.useRef(64),W=e.useRef(288),ne=e.useCallback(n=>{N.current=n},[]),q=e.useCallback(n=>{W.current=n},[]),te=e.useMemo(()=>{const n=e.Children.toArray(a),d=(u,K)=>e.isValidElement(u)&&(u.type===K||u.type?.displayName===K.displayName);return n.some(u=>d(u,J)||d(u,Z))},[a]),oe=e.useMemo(()=>{const n=e.Children.toArray(a),d=(u,K)=>e.isValidElement(u)&&(u.type===K||u.type?.displayName===K.displayName);return n.some(u=>d(u,ue))},[a]),m=e.useCallback(n=>{if(n==="sidebar"){const d=$.current(p.sidebarMode);k(d);return}r({type:"TOGGLE_PANE",target:n})},[p.sidebarMode,k]),y=e.useCallback(n=>{if(n==="sidebar")return k("expanded");r({type:"EXPAND_PANE",target:n})},[k]),ae=e.useCallback(n=>{if(n==="sidebar")return k("collapsed");r({type:"COLLAPSE_PANE",target:n})},[k]),re=e.useMemo(()=>({leftMode:p.leftMode,setLeftMode:g,panelMode:p.panelMode,setPanelMode:F,sidebarMode:p.sidebarMode,setSidebarMode:k,inspectorMode:p.inspectorMode,setInspectorMode:w,bottomMode:p.bottomMode,setBottomMode:A,hasLeft:D,setHasLeft:ee,hasSidebar:T,setHasSidebar:I,currentBreakpoint:P,currentBreakpointReady:S,leftResolvedPresentation:x,togglePane:m,expandPane:y,collapsePane:ae,setSidebarToggleComputer:R,onLeftPres:s,onRailDefaults:ne,onPanelDefaults:q}),[p.leftMode,g,p.panelMode,F,p.sidebarMode,k,p.inspectorMode,w,p.bottomMode,A,D,T,P,S,x,m,y,ae,R,s,ne,q]),H=e.Children.toArray(a),U=(n,d)=>e.isValidElement(n)&&(n.type===d||n.type?.displayName===d.displayName),le=H.filter(n=>U(n,xe)),G=H.filter(n=>U(n,J)),Q=H.filter(n=>U(n,Z)),de=H.filter(n=>U(n,ue)),ye=H.filter(n=>U(n,Me)),o=H.filter(n=>U(n,Ce)),E=H.filter(n=>U(n,ve)),v=G[0]?.props?.open;e.useEffect(()=>{if(typeof v>"u")return;g(!!v?"expanded":"collapsed")},[v,g]);const O=e.useMemo(()=>i==="full"?{height:"100vh"}:i==="auto"?{height:"auto"}:typeof i=="string"?{height:i}:typeof i=="number"?{height:`${i}px`}:{},[i]),[V,se]=e.useState(null),pe=e.useCallback(n=>se(n),[]),ce=e.useCallback(()=>se(null),[]),_e=e.useMemo(()=>({currentBreakpoint:P,currentBreakpointReady:S,leftResolvedPresentation:x}),[P,S,x]),De=e.useMemo(()=>({leftMode:p.leftMode,setLeftMode:g}),[p.leftMode,g]),Be=e.useMemo(()=>({panelMode:p.panelMode,setPanelMode:F}),[p.panelMode,F]),Ae=e.useMemo(()=>({sidebarMode:p.sidebarMode,setSidebarMode:k}),[p.sidebarMode,k]),we=e.useMemo(()=>({inspectorMode:p.inspectorMode,setInspectorMode:w}),[p.inspectorMode,w]),Ie=e.useMemo(()=>({bottomMode:p.bottomMode,setBottomMode:A}),[p.bottomMode,A]),He=e.useMemo(()=>({hasLeft:D,setHasLeft:ee,hasSidebar:T,setHasSidebar:I}),[D,ee,T,I]),[Pe,Re]=e.useState(new Set),ge=e.useCallback(n=>{Re(d=>{if(d.has(n))return d;const u=new Set(d);return u.add(n),u})},[]),Te=e.useCallback(n=>{Re(d=>{if(!d.has(n))return d;const u=new Set(d);return u.delete(n),u})},[]),be=Pe.size>0,Ve=e.useMemo(()=>({insetPanes:Pe,registerInset:ge,unregisterInset:Te,hasAnyInset:be}),[Pe,ge,Te,be]),je=e.useMemo(()=>({peekTarget:V,setPeekTarget:se,peekPane:pe,clearPeek:ce}),[V,se,pe,ce]),Ue=e.useMemo(()=>({togglePane:m,expandPane:y,collapsePane:ae,setSidebarToggleComputer:R}),[m,y,ae,R]),Fe=e.useMemo(()=>({...re,peekTarget:V,setPeekTarget:se,peekPane:pe,clearPeek:ce}),[re,V,se,pe,ce]);return e.createElement("div",{...C,ref:M,className:X("rt-ShellRoot",t),style:{...O,...C.style}},e.createElement(Ye,{value:Fe},e.createElement(on.Provider,{value:_e},e.createElement(Je.Provider,{value:De},e.createElement(Ze.Provider,{value:Be},e.createElement(en.Provider,{value:Ae},e.createElement(nn.Provider,{value:we},e.createElement(tn.Provider,{value:Ie},e.createElement(sn.Provider,{value:He},e.createElement(an.Provider,{value:je},e.createElement(ln.Provider,{value:Ue},e.createElement(rn.Provider,{value:Ve},le,e.createElement("div",{className:"rt-ShellBody","data-peek-target":V??void 0,"data-has-inset":be||void 0,style:V==="rail"||V==="panel"?{"--peek-rail-width":`${N.current}px`}:void 0},te&&!oe?(()=>{const n=G[0],d=Q[0],u=!!n?.props?.inset||!!d?.props?.inset,K=n?{onOpenChange:n.props?.onOpenChange,open:n.props?.open,defaultOpen:n.props?.defaultOpen,presentation:n.props?.presentation,collapsible:n.props?.collapsible,onExpand:n.props?.onExpand,onCollapse:n.props?.onCollapse,inset:u}:{defaultOpen:f?!0:void 0,inset:u};return e.createElement(me,{...K},G,Q)})():de,ye,o),E))))))))))))});ze.displayName="Shell.Root";const xe=e.forwardRef(({className:t,height:a=64,style:i,...C},M)=>e.createElement("header",{...C,ref:M,className:X("rt-ShellHeader",t),style:{...i,"--shell-header-height":`${a}px`}}));xe.displayName="Shell.Header";const cn=["open","defaultOpen","onOpenChange","mode","defaultMode","onModeChange"],me=e.forwardRef((t,a)=>{const{className:i,presentation:C={initial:"fixed",sm:"fixed"},collapsible:M=!0,onExpand:P,onCollapse:S,children:b,style:f,inset:l,...c}=t,{registerInset:z,unregisterInset:j}=ke();e.useEffect(()=>{if(l)return z("left"),()=>j("left")},[l,z,j]);const _=c.open,h=c.defaultOpen,L=c.onOpenChange,p=Ge(c,cn),r=ie(),g=Oe(C),F=g==="overlay",k=g==="stacked",w=e.useRef(null);e.useEffect(()=>{r.onLeftPres?.(g)},[r,g]);const A=e.useCallback(R=>{w.current=R,typeof a=="function"?a(R):a&&(a.current=R)},[a]);e.useEffect(()=>(r.setHasLeft(!0),()=>r.setHasLeft(!1)),[r]);const D=e.useRef(null),ee=e.useRef(!1),T=e.useMemo(()=>{if(!(typeof _>"u"))return _?"expanded":"collapsed"},[_]),I=e.useMemo(()=>Ee(h),[h]);Le({controlledValue:T,defaultValue:I,currentValue:r.leftMode,setValue:r.setLeftMode,breakpointReady:r.currentBreakpointReady,onInit:R=>L?.(R==="expanded",{reason:"init"})}),e.useEffect(()=>{typeof _<"u"||(D.current!==null&&D.current!==r.leftMode&&L?.(r.leftMode==="expanded",{reason:"toggle"}),D.current=r.leftMode)},[r,L,_]),e.useEffect(()=>{r.leftMode==="expanded"?P?.():S?.()},[r.leftMode,P,S]);const $=r.leftMode==="expanded";if(F){const R=r.leftMode==="expanded",x=e.Children.toArray(b),B=(m,y)=>e.isValidElement(m)&&m.type===y,s=x.find(m=>B(m,J)),N=x.find(m=>B(m,Z)),W=typeof s?.props?.expandedSize=="number"?s.props.expandedSize:64,ne=typeof N?.props?.expandedSize=="number"?N.props.expandedSize:288,q=!!s,te=!!N,oe=(q?W:0)+(r.panelMode==="expanded"&&te?ne:0);return e.createElement(he.Root,{open:R,onOpenChange:m=>r.setLeftMode(m?"expanded":"collapsed")},e.createElement(he.Content,{side:"start",style:{padding:0},width:{initial:`${oe}px`}},e.createElement($e,null,e.createElement(he.Title,null,"Navigation")),e.createElement("div",{className:"rt-ShellLeft"},b)))}if(k){const R=r.leftMode==="expanded",x=e.Children.toArray(b),B=(m,y)=>e.isValidElement(m)&&m.type===y,s=x.find(m=>B(m,J)),N=x.find(m=>B(m,Z)),W=typeof s?.props?.expandedSize=="number"?s.props.expandedSize:64,ne=typeof N?.props?.expandedSize=="number"?N.props.expandedSize:288,q=!!s,oe=!!N&&(r.panelMode==="expanded"||r.peekTarget==="panel");return e.createElement("div",{...p,ref:A,className:X("rt-ShellLeft",i),"data-mode":r.leftMode,"data-peek":r.peekTarget==="left"||r.peekTarget==="rail"||r.peekTarget==="panel"||void 0,"data-presentation":g,"data-inset":l||void 0,style:{...f},"data-open":R||void 0},b)}return e.createElement("div",{...p,ref:A,className:X("rt-ShellLeft",i),"data-mode":r.leftMode,"data-peek":r.peekTarget==="left"||r.peekTarget==="rail"||r.peekTarget==="panel"||void 0,"data-presentation":g,"data-inset":l||void 0,style:{...f}},b)});me.displayName="Shell.Left",Y(me,"Shell.Left");const J=e.forwardRef((t,a)=>{const{className:i,presentation:C,expandedSize:M=64,collapsible:P,onExpand:S,onCollapse:b,children:f,style:l,open:c,defaultOpen:z,onOpenChange:j,..._}=t,h=ie(),L=e.useRef(null);e.useEffect(()=>{const r=typeof c<"u";if(L.current===null){L.current=r;return}L.current!==r&&(console.warn("Shell.Rail: Switching between controlled and uncontrolled `open` is not supported."),L.current=r)},[c]),e.useEffect(()=>{h.onRailDefaults?.(M)},[h,M]);const p=h.leftMode==="expanded";return e.createElement("div",{..._,ref:a,className:X("rt-ShellRail",i),"data-mode":h.leftMode,"data-peek":h.currentBreakpointReady&&h.leftResolvedPresentation!=="overlay"&&h.peekTarget==="rail"||void 0,style:{...l,"--rail-size":`${M}px`}},e.createElement("div",{className:"rt-ShellRailContent","data-visible":h.currentBreakpointReady&&(p||h.leftResolvedPresentation!=="overlay"&&h.peekTarget==="rail")||void 0},f))});J.displayName="Shell.Rail",Y(J,"Shell.Rail");const un=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style"],Z=Y(e.forwardRef((t,a)=>{const{className:i,defaultOpen:C,open:M,onOpenChange:P,size:S,defaultSize:b,expandedSize:f=288,minSize:l,maxSize:c,resizable:z,collapsible:j=!0,onExpand:_,onCollapse:h,onResize:L,onResizeStart:p,onResizeEnd:r,snapPoints:g,snapTolerance:F,collapseThreshold:k,paneId:w,persistence:A,children:D,style:ee,onSizeChange:T,sizeUpdate:I,sizeUpdateMs:$=50}=t,R=Qe(t,un),x=e.useRef(null);e.useEffect(()=>()=>{x.current&&(clearTimeout(x.current),x.current=null)},[T,I,$]);const B=e.useMemo(()=>{if(!T)return()=>{};if(I==="debounce")return(E,v)=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{T?.(E,v),x.current=null},$)};if(I==="throttle"){let o=0;return(E,v)=>{const O=Date.now();O-o>=$&&(o=O,T?.(E,v))}}return(o,E)=>T?.(o,E)},[T,I,$]),s=ie(),N=e.useRef(null),W=e.useRef(null),ne=e.useRef(!1),q=e.useMemo(()=>Ee(M),[M]),te=e.useMemo(()=>Ee(C),[C]),oe=typeof M=="object"&&M!==null;Le({controlledValue:q,defaultValue:te,currentValue:s.panelMode,setValue:o=>{o==="expanded"&&s.leftMode!=="expanded"&&s.setLeftMode("expanded"),s.setPanelMode(o)},breakpointReady:s.currentBreakpointReady,controlledIsResponsive:oe,onResponsiveChange:o=>P?.(o==="expanded",{reason:"responsive"}),onInit:o=>{typeof M>"u"&&P?.(o==="expanded",{reason:"init"})}});const m=e.useRef(null);e.useEffect(()=>{const o=typeof M<"u";if(m.current===null){m.current=o;return}m.current!==o&&(console.warn("Shell.Panel: Switching between controlled and uncontrolled `open` is not supported."),m.current=o)},[M]),e.useEffect(()=>{s.onPanelDefaults?.(f)},[s,f]);const y=e.useRef(null),ae=e.useCallback(o=>{y.current=o,typeof a=="function"?a(o):a&&(a.current=o)},[a]),re=e.Children.toArray(D),H=re.filter(o=>e.isValidElement(o)&&o.type===Se),U=re.filter(o=>!(e.isValidElement(o)&&o.type===Se)),le=s.leftResolvedPresentation==="overlay",G=e.useCallback(o=>Xe(o,"horizontal"),[]),Q=e.useMemo(()=>{if(!w||A)return A;const o=`kookie-ui:shell:panel:${w}`;return{load:()=>{if(typeof window>"u")return;const v=window.localStorage.getItem(o);return v?Number(v):void 0},save:v=>{typeof window>"u"||window.localStorage.setItem(o,String(v))}}},[w,A]);e.useEffect(()=>{let o=!0;return(async()=>{if(!z||!Q?.load||le)return;const E=await Q.load();o&&typeof E=="number"&&y.current&&(y.current.style.setProperty("--panel-size",`${E}px`),L?.(E))})(),()=>{o=!1}},[z,Q,L,le]),e.useEffect(()=>{y.current&&le&&y.current.style.setProperty("--panel-size",`${f}px`)},[le,f]),e.useEffect(()=>{if(y.current&&typeof S>"u"&&typeof b<"u"){const o=G(b);if(typeof o=="number"&&Number.isFinite(o)){const O=Math.min((typeof c=="number"?c:void 0)??o,Math.max((typeof l=="number"?l:void 0)??o,o));y.current.style.setProperty("--panel-size",`${O}px`),B(O,{reason:"init"})}}},[]),e.useEffect(()=>{if(!y.current||typeof S>"u")return;const o=G(S);if(typeof o=="number"&&Number.isFinite(o)){const O=Math.min((typeof c=="number"?c:void 0)??o,Math.max((typeof l=="number"?l:void 0)??o,o));y.current.style.setProperty("--panel-size",`${O}px`),B(O,{reason:"controlled"})}},[S,l,c,G,B]),e.useEffect(()=>{if(y.current&&s.leftResolvedPresentation!=="overlay"&&s.leftMode==="expanded"&&s.panelMode==="expanded"){const o=y.current.parentElement||null;try{o?.style.removeProperty("width")}catch{}}},[s.leftResolvedPresentation,s.leftMode,s.panelMode]);const de=s.leftMode==="expanded"&&s.panelMode==="expanded";e.useEffect(()=>{const o=N.current,E=W.current;if(o!==null&&o!==s.panelMode){const v=s.panelMode==="expanded";let O="toggle";E!==s.leftMode&&s.leftMode==="collapsed"&&!v&&(O="left"),P?.(v,{reason:O})}N.current=s.panelMode,W.current=s.leftMode},[s.panelMode,s.leftMode,P]);const ye=z&&s.leftResolvedPresentation!=="overlay"&&de?e.createElement(We.Provider,{value:{containerRef:y,cssVarName:"--panel-size",minSize:typeof l=="number"?l:100,maxSize:typeof c=="number"?c:800,defaultSize:f,orientation:"vertical",edge:"end",computeNext:(o,E,v)=>{const O=getComputedStyle(y.current).direction==="rtl",V=o-E;return v+(O?-V:V)},onResize:L,onResizeStart:o=>{const v=y.current?.parentElement;try{v?.style.removeProperty("width")}catch{}p?.(o)},onResizeEnd:o=>{r?.(o),B(o,{reason:"resize"}),Q?.save?.(o)},target:"panel",collapsible:!!j,snapPoints:g,snapTolerance:F??8,collapseThreshold:k,requestCollapse:()=>s.setPanelMode("collapsed"),requestToggle:()=>s.togglePane("panel")}},H.length>0?H.map((o,E)=>e.cloneElement(o,{key:o.key??E})):e.createElement(qe,null)):null;return e.createElement("div",{...R,ref:ae,className:X("rt-ShellPanel",i),"data-mode":s.panelMode,"data-visible":s.currentBreakpointReady&&(de||s.leftResolvedPresentation!=="overlay"&&s.peekTarget==="panel")||void 0,"data-peek":s.currentBreakpointReady&&s.leftResolvedPresentation!=="overlay"&&s.peekTarget==="panel"||void 0,style:{...ee,"--panel-size":`${f}px`}},e.createElement("div",{className:"rt-ShellPanelContent","data-visible":de||void 0},U),ye)}),"Shell.Panel");Z.displayName="Shell.Panel",Z.Handle=Se;const Me=e.forwardRef(({className:t,inset:a,...i},C)=>{const{registerInset:M,unregisterInset:P}=ke();return e.useEffect(()=>{if(a)return M("content"),()=>P("content")},[a,M,P]),e.createElement("main",{...i,ref:C,className:X("rt-ShellContent",t),"data-inset":a||void 0})});Me.displayName="Shell.Content",Y(Me,"Shell.Content");const Ne=e.forwardRef(({target:t,action:a="toggle",peekOnHover:i,onClick:C,onMouseEnter:M,onMouseLeave:P,children:S,...b},f)=>{const l=ie(),c=e.useCallback(h=>{switch(C?.(h),l.peekTarget===t&&l.clearPeek(),a){case"toggle":l.togglePane(t);break;case"expand":l.expandPane(t);break;case"collapse":l.collapsePane(t);break}},[l,t,a,C]),z=(()=>{switch(t){case"left":case"rail":return l.leftMode==="collapsed";case"panel":return l.leftMode==="collapsed"||l.panelMode==="collapsed";case"sidebar":return l.sidebarMode==="collapsed";case"inspector":return l.inspectorMode==="collapsed";case"bottom":return l.bottomMode==="collapsed"}})(),j=e.useCallback(h=>{M?.(h),!(!i||!z)&&l.peekPane(t)},[M,i,z,l,t]),_=e.useCallback(h=>{P?.(h),i&&l.peekTarget===t&&l.clearPeek()},[P,i,l,t]);return e.createElement("button",{...b,ref:f,onClick:c,onMouseEnter:j,onMouseLeave:_,"data-shell-trigger":t,"data-shell-action":a,"aria-expanded":!z},S)});Ne.displayName="Shell.Trigger";export{ve as Bottom,Me as Content,xe as Header,Ce as Inspector,me as Left,Z as Panel,J as Rail,ze as Root,ue as Sidebar,Ne as Trigger,Oe as useResponsivePresentation,ie as useShell};
|
|
1
|
+
"use client";import*as e from"react";import X from"classnames";import*as he from"./sheet.js";import{VisuallyHidden as Fe}from"./visually-hidden.js";import{useResponsivePresentation as Oe,useResponsiveInitialState as Le}from"./shell.hooks.js";import{PaneResizeContext as $e}from"./_internal/shell-resize.js";import{PaneHandle as Ge,PanelHandle as Se}from"./_internal/shell-handles.js";import{omitPaneProps as Qe,extractPaneDomProps as qe,mapResponsiveBooleanToPaneMode as Ee}from"./_internal/shell-prop-helpers.js";import{Sidebar as ue}from"./_internal/shell-sidebar.js";import{Bottom as Ce}from"./_internal/shell-bottom.js";import{Inspector as ve}from"./_internal/shell-inspector.js";import{_BREAKPOINTS as Ke}from"./shell.types.js";import{normalizeToPx as Xe}from"../helpers/normalize-to-px.js";import{ShellProvider as Ye,useShell as ie,LeftModeContext as Je,PanelModeContext as Ze,SidebarModeContext as en,InspectorModeContext as nn,BottomModeContext as tn,PresentationContext as on,PeekContext as an,ActionsContext as ln,CompositionContext as rn,InsetContext as sn,useInset as ke}from"./shell.context.js";function dn(){const[t,l]=e.useState("initial"),[i,v]=e.useState(!1);return e.useEffect(()=>{if(typeof window>"u")return;const y=Object.entries(Ke).map(([m,a])=>[m,window.matchMedia(a)]),S=m=>{const a=y.filter(([,R])=>R.matches).map(([R])=>R),u=a[a.length-1]??"initial";l(u),v(!0)};S();const b=[];return y.forEach(([,m])=>{const a=m;typeof a.addEventListener=="function"&&typeof a.removeEventListener=="function"?(a.addEventListener("change",S),b.push(()=>a.removeEventListener?.("change",S))):typeof a.addListener=="function"&&typeof a.removeListener=="function"&&(a.addListener(S),b.push(()=>a.removeListener?.(S)))}),()=>{b.forEach(m=>{try{m()}catch{}})}},[]),{bp:t,ready:i}}const fe=Symbol("rtShellSlot");function Y(t,l){return t[fe]=l,t}function Rn(t,l){if(!e.isValidElement(t))return!1;const i=t.type;if(i===l)return!0;const v=l?.[fe];return!!(i?.[fe]&&v&&i[fe]===v)}Y(ue,"Shell.Sidebar"),Y(ve,"Shell.Inspector"),Y(Ce,"Shell.Bottom");function pn(t,l){switch(l.type){case"SET_LEFT_MODE":return l.mode==="collapsed"?{...t,leftMode:"collapsed",panelMode:"collapsed"}:{...t,leftMode:l.mode};case"SET_PANEL_MODE":return l.mode==="expanded"&&t.leftMode!=="expanded"?{...t,leftMode:"expanded",panelMode:"expanded"}:{...t,panelMode:l.mode};case"SET_SIDEBAR_MODE":return{...t,sidebarMode:l.mode};case"SET_INSPECTOR_MODE":return{...t,inspectorMode:l.mode};case"SET_BOTTOM_MODE":return{...t,bottomMode:l.mode};case"TOGGLE_PANE":{switch(l.target){case"left":case"rail":return{...t,leftMode:t.leftMode==="expanded"?"collapsed":"expanded",panelMode:t.leftMode==="expanded"?"collapsed":t.panelMode};case"panel":return t.leftMode==="collapsed"?{...t,leftMode:"expanded",panelMode:"expanded"}:{...t,panelMode:t.panelMode==="expanded"?"collapsed":"expanded"};case"sidebar":{const i=t.sidebarMode==="collapsed"?"expanded":t.sidebarMode==="expanded"?"collapsed":"expanded";return{...t,sidebarMode:i}}case"inspector":return{...t,inspectorMode:t.inspectorMode==="expanded"?"collapsed":"expanded"};case"bottom":return{...t,bottomMode:t.bottomMode==="expanded"?"collapsed":"expanded"};default:return t}return t}case"EXPAND_PANE":{switch(l.target){case"left":case"rail":return{...t,leftMode:"expanded"};case"panel":return{...t,leftMode:"expanded",panelMode:"expanded"};case"sidebar":return{...t,sidebarMode:"expanded"};case"inspector":return{...t,inspectorMode:"expanded"};case"bottom":return{...t,bottomMode:"expanded"};default:return t}return t}case"COLLAPSE_PANE":{switch(l.target){case"left":case"rail":return{...t,leftMode:"collapsed",panelMode:"collapsed"};case"panel":return{...t,panelMode:"collapsed"};case"sidebar":return{...t,sidebarMode:"collapsed"};case"inspector":return{...t,inspectorMode:"collapsed"};case"bottom":return{...t,bottomMode:"collapsed"};default:return t}return t}}return t}const ze=e.forwardRef(({className:t,children:l,height:i="full",...v},M)=>{const{bp:y,ready:S}=dn(),b=e.Children.toArray(l),m=b.some(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Panel"&&!!n.props?.defaultOpen),a=b.find(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Rail"),u=a?a.props?.defaultOpen:void 0,R=a?u===void 0?!0:typeof u=="boolean"?u:typeof u=="object"?u.initial??Object.values(u)[0]??!0:!0:!1,j=b.some(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Inspector"&&!!n.props?.defaultOpen),_=b.some(n=>e.isValidElement(n)&&n.type?.displayName==="Shell.Inspector"&&typeof n.props?.open<"u"&&!!n.props?.open),h=()=>{const n=b.find(c=>e.isValidElement(c)&&c.type?.displayName==="Shell.Sidebar");if(!n)return"expanded";const d=n.props;if(typeof d?.state<"u"){if(typeof d.state=="string")return d.state;if(typeof d.state=="object")return d.state.initial??Object.values(d.state)[0]??"expanded"}if(typeof d?.defaultState<"u"){if(typeof d.defaultState=="string")return d.defaultState;if(typeof d.defaultState=="object")return d.defaultState.initial??Object.values(d.defaultState)[0]??"expanded"}return"expanded"},k=()=>{const n=b.find(c=>e.isValidElement(c)&&c.type?.displayName==="Shell.Bottom");if(!n)return"collapsed";const d=n.props;if(typeof d?.open<"u"){if(typeof d.open=="boolean")return d.open?"expanded":"collapsed";if(typeof d.open=="object")return d.open.initial??Object.values(d.open)[0]?"expanded":"collapsed"}return typeof d?.defaultOpen<"u"&&d.defaultOpen?"expanded":"collapsed"},[p,s]=e.useReducer(pn,{leftMode:m||R?"expanded":"collapsed",panelMode:m?"expanded":"collapsed",sidebarMode:h(),inspectorMode:j||_?"expanded":"collapsed",bottomMode:k()}),T=e.useCallback(n=>s({type:"SET_LEFT_MODE",mode:n}),[]),W=e.useCallback(n=>s({type:"SET_PANEL_MODE",mode:n}),[]),z=e.useCallback(n=>s({type:"SET_SIDEBAR_MODE",mode:n}),[]),w=e.useCallback(n=>s({type:"SET_INSPECTOR_MODE",mode:n}),[]),A=e.useCallback(n=>s({type:"SET_BOTTOM_MODE",mode:n}),[]),[D,ee]=e.useState(!1),[O,I]=e.useState(!1),F=e.useRef(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed"),g=e.useCallback(n=>{F.current=n},[]);e.useEffect(()=>{O&&D&&console.warn("Shell: Sidebar cannot coexist with Rail or Panel. Use either Rail+Panel OR Sidebar.")},[O,D]);const[x,B]=e.useState(void 0),r=e.useCallback(n=>B(n),[]),N=e.useRef(64),$=e.useRef(288),ne=e.useCallback(n=>{N.current=n},[]),G=e.useCallback(n=>{$.current=n},[]),te=e.useMemo(()=>{const n=e.Children.toArray(l),d=(c,K)=>e.isValidElement(c)&&(c.type===K||c.type?.displayName===K.displayName);return n.some(c=>d(c,J)||d(c,Z))},[l]),oe=e.useMemo(()=>{const n=e.Children.toArray(l),d=(c,K)=>e.isValidElement(c)&&(c.type===K||c.type?.displayName===K.displayName);return n.some(c=>d(c,ue))},[l]),f=e.useCallback(n=>{if(n==="sidebar"){const d=F.current(p.sidebarMode);z(d);return}s({type:"TOGGLE_PANE",target:n})},[p.sidebarMode,z]),P=e.useCallback(n=>{if(n==="sidebar")return z("expanded");s({type:"EXPAND_PANE",target:n})},[z]),ae=e.useCallback(n=>{if(n==="sidebar")return z("collapsed");s({type:"COLLAPSE_PANE",target:n})},[z]),se=e.useMemo(()=>({leftMode:p.leftMode,setLeftMode:T,panelMode:p.panelMode,setPanelMode:W,sidebarMode:p.sidebarMode,setSidebarMode:z,inspectorMode:p.inspectorMode,setInspectorMode:w,bottomMode:p.bottomMode,setBottomMode:A,hasLeft:D,setHasLeft:ee,hasSidebar:O,setHasSidebar:I,currentBreakpoint:y,currentBreakpointReady:S,leftResolvedPresentation:x,togglePane:f,expandPane:P,collapsePane:ae,setSidebarToggleComputer:g,onLeftPres:r,onRailDefaults:ne,onPanelDefaults:G}),[p.leftMode,T,p.panelMode,W,p.sidebarMode,z,p.inspectorMode,w,p.bottomMode,A,D,O,y,S,x,f,P,ae,g,r,ne,G]),V=e.Children.toArray(l),U=(n,d)=>e.isValidElement(n)&&(n.type===d||n.type?.displayName===d.displayName),le=V.filter(n=>U(n,xe)),Q=V.filter(n=>U(n,J)),q=V.filter(n=>U(n,Z)),de=V.filter(n=>U(n,ue)),Pe=V.filter(n=>U(n,Me)),o=V.filter(n=>U(n,ve)),E=V.filter(n=>U(n,Ce)),C=Q[0]?.props?.open;e.useEffect(()=>{if(typeof C>"u")return;T(!!C?"expanded":"collapsed")},[C,T]);const L=e.useMemo(()=>i==="full"?{height:"100vh"}:i==="auto"?{height:"auto"}:typeof i=="string"?{height:i}:typeof i=="number"?{height:`${i}px`}:{},[i]),[H,re]=e.useState(null),pe=e.useCallback(n=>re(n),[]),ce=e.useCallback(()=>re(null),[]),_e=e.useMemo(()=>({currentBreakpoint:y,currentBreakpointReady:S,leftResolvedPresentation:x}),[y,S,x]),De=e.useMemo(()=>({leftMode:p.leftMode,setLeftMode:T}),[p.leftMode,T]),Be=e.useMemo(()=>({panelMode:p.panelMode,setPanelMode:W}),[p.panelMode,W]),Ae=e.useMemo(()=>({sidebarMode:p.sidebarMode,setSidebarMode:z}),[p.sidebarMode,z]),we=e.useMemo(()=>({inspectorMode:p.inspectorMode,setInspectorMode:w}),[p.inspectorMode,w]),Ie=e.useMemo(()=>({bottomMode:p.bottomMode,setBottomMode:A}),[p.bottomMode,A]),Ve=e.useMemo(()=>({hasLeft:D,setHasLeft:ee,hasSidebar:O,setHasSidebar:I}),[D,ee,O,I]),[ye,Re]=e.useState(new Set),ge=e.useCallback(n=>{Re(d=>{if(d.has(n))return d;const c=new Set(d);return c.add(n),c})},[]),Te=e.useCallback(n=>{Re(d=>{if(!d.has(n))return d;const c=new Set(d);return c.delete(n),c})},[]),be=ye.size>0,He=e.useMemo(()=>({insetPanes:ye,registerInset:ge,unregisterInset:Te,hasAnyInset:be}),[ye,ge,Te,be]),je=e.useMemo(()=>({peekTarget:H,setPeekTarget:re,peekPane:pe,clearPeek:ce}),[H,re,pe,ce]),Ue=e.useMemo(()=>({togglePane:f,expandPane:P,collapsePane:ae,setSidebarToggleComputer:g}),[f,P,ae,g]),We=e.useMemo(()=>({...se,peekTarget:H,setPeekTarget:re,peekPane:pe,clearPeek:ce}),[se,H,re,pe,ce]);return e.createElement("div",{...v,ref:M,className:X("rt-ShellRoot",t),style:{...L,...v.style}},e.createElement(Ye,{value:We},e.createElement(on.Provider,{value:_e},e.createElement(Je.Provider,{value:De},e.createElement(Ze.Provider,{value:Be},e.createElement(en.Provider,{value:Ae},e.createElement(nn.Provider,{value:we},e.createElement(tn.Provider,{value:Ie},e.createElement(rn.Provider,{value:Ve},e.createElement(an.Provider,{value:je},e.createElement(ln.Provider,{value:Ue},e.createElement(sn.Provider,{value:He},le,e.createElement("div",{className:"rt-ShellBody","data-peek-target":H??void 0,"data-has-inset":be||void 0,style:H==="rail"||H==="panel"?{"--peek-rail-width":`${N.current}px`}:void 0},te&&!oe?(()=>{const n=Q[0],d=q[0],c=!!n?.props?.inset||!!d?.props?.inset,K=n?{onOpenChange:n.props?.onOpenChange,open:n.props?.open,defaultOpen:n.props?.defaultOpen,presentation:n.props?.presentation,collapsible:n.props?.collapsible,onExpand:n.props?.onExpand,onCollapse:n.props?.onCollapse,inset:c}:{defaultOpen:m?!0:void 0,inset:c};return e.createElement(me,{...K},Q,q)})():de,Pe,o),E))))))))))))});ze.displayName="Shell.Root";const xe=e.forwardRef(({className:t,height:l=64,style:i,...v},M)=>e.createElement("header",{...v,ref:M,className:X("rt-ShellHeader",t),style:{...i,"--shell-header-height":`${l}px`}}));xe.displayName="Shell.Header";const cn=["open","defaultOpen","onOpenChange","mode","defaultMode","onModeChange"],me=e.forwardRef((t,l)=>{const{className:i,presentation:v={initial:"fixed",sm:"fixed"},collapsible:M=!0,onExpand:y,onCollapse:S,children:b,style:m,inset:a,...u}=t,{registerInset:R,unregisterInset:j}=ke();e.useEffect(()=>{if(a)return R("left"),()=>j("left")},[a,R,j]);const _=u.open,h=u.defaultOpen,k=u.onOpenChange,p=Qe(u,cn),s=ie(),T=Oe(v),W=T==="overlay",z=T==="stacked",w=e.useRef(null);e.useEffect(()=>{s.onLeftPres?.(T)},[s,T]);const A=e.useCallback(g=>{w.current=g,typeof l=="function"?l(g):l&&(l.current=g)},[l]);e.useEffect(()=>(s.setHasLeft(!0),()=>s.setHasLeft(!1)),[s]);const D=e.useRef(null),ee=e.useRef(!1),O=e.useMemo(()=>{if(!(typeof _>"u"))return _?"expanded":"collapsed"},[_]),I=e.useMemo(()=>Ee(h),[h]);Le({controlledValue:O,defaultValue:I,currentValue:s.leftMode,setValue:s.setLeftMode,breakpointReady:s.currentBreakpointReady,onInit:g=>k?.(g==="expanded",{reason:"init"})}),e.useEffect(()=>{typeof _<"u"||(D.current!==null&&D.current!==s.leftMode&&k?.(s.leftMode==="expanded",{reason:"toggle"}),D.current=s.leftMode)},[s,k,_]),e.useEffect(()=>{s.leftMode==="expanded"?y?.():S?.()},[s.leftMode,y,S]);const F=s.leftMode==="expanded";if(W){const g=s.leftMode==="expanded",x=e.Children.toArray(b),B=(f,P)=>e.isValidElement(f)&&f.type===P,r=x.find(f=>B(f,J)),N=x.find(f=>B(f,Z)),$=typeof r?.props?.expandedSize=="number"?r.props.expandedSize:64,ne=typeof N?.props?.expandedSize=="number"?N.props.expandedSize:288,G=!!r,te=!!N,oe=(G?$:0)+(s.panelMode==="expanded"&&te?ne:0);return e.createElement(he.Root,{open:g,onOpenChange:f=>s.setLeftMode(f?"expanded":"collapsed")},e.createElement(he.Content,{side:"start",style:{padding:0},width:{initial:`${oe}px`}},e.createElement(Fe,null,e.createElement(he.Title,null,"Navigation")),e.createElement("div",{className:"rt-ShellLeft"},b)))}if(z){const g=s.leftMode==="expanded",x=e.Children.toArray(b),B=(f,P)=>e.isValidElement(f)&&f.type===P,r=x.find(f=>B(f,J)),N=x.find(f=>B(f,Z)),$=typeof r?.props?.expandedSize=="number"?r.props.expandedSize:64,ne=typeof N?.props?.expandedSize=="number"?N.props.expandedSize:288,G=!!r,oe=!!N&&(s.panelMode==="expanded"||s.peekTarget==="panel");return e.createElement("div",{...p,ref:A,className:X("rt-ShellLeft",i),"data-mode":s.leftMode,"data-peek":s.peekTarget==="left"||s.peekTarget==="rail"||s.peekTarget==="panel"||void 0,"data-presentation":T,"data-inset":a||void 0,style:{...m},"data-open":g||void 0},b)}return e.createElement("div",{...p,ref:A,className:X("rt-ShellLeft",i),"data-mode":s.leftMode,"data-peek":s.peekTarget==="left"||s.peekTarget==="rail"||s.peekTarget==="panel"||void 0,"data-presentation":T,"data-inset":a||void 0,style:{...m}},b)});me.displayName="Shell.Left",Y(me,"Shell.Left");const J=e.forwardRef((t,l)=>{const{className:i,presentation:v,expandedSize:M=64,collapsible:y,onExpand:S,onCollapse:b,children:m,style:a,open:u,defaultOpen:R,onOpenChange:j,..._}=t,h=ie(),k=e.useRef(null);e.useEffect(()=>{const s=typeof u<"u";if(k.current===null){k.current=s;return}k.current!==s&&(console.warn("Shell.Rail: Switching between controlled and uncontrolled `open` is not supported."),k.current=s)},[u]),e.useEffect(()=>{h.onRailDefaults?.(M)},[h,M]);const p=h.leftMode==="expanded";return e.createElement("div",{..._,ref:l,className:X("rt-ShellRail",i),"data-mode":h.leftMode,"data-peek":h.currentBreakpointReady&&h.leftResolvedPresentation!=="overlay"&&h.peekTarget==="rail"||void 0,style:{...a,"--rail-size":`${M}px`}},e.createElement("div",{className:"rt-ShellRailContent","data-visible":h.currentBreakpointReady&&(p||h.leftResolvedPresentation!=="overlay"&&h.peekTarget==="rail")||void 0},m))});J.displayName="Shell.Rail",Y(J,"Shell.Rail");const un=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style"],Z=Y(e.forwardRef((t,l)=>{const{className:i,defaultOpen:v,open:M,onOpenChange:y,size:S,defaultSize:b,expandedSize:m=288,minSize:a,maxSize:u,resizable:R,collapsible:j=!0,onExpand:_,onCollapse:h,onResize:k,onResizeStart:p,onResizeEnd:s,snapPoints:T,snapTolerance:W,collapseThreshold:z,paneId:w,persistence:A,children:D,style:ee,onSizeChange:O,sizeUpdate:I,sizeUpdateMs:F=50}=t,g=qe(t,un),x=e.useRef(null);e.useEffect(()=>()=>{x.current&&(clearTimeout(x.current),x.current=null)},[O,I,F]);const B=e.useMemo(()=>{if(!O)return()=>{};if(I==="debounce")return(E,C)=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{O?.(E,C),x.current=null},F)};if(I==="throttle"){let o=0;return(E,C)=>{const L=Date.now();L-o>=F&&(o=L,O?.(E,C))}}return(o,E)=>O?.(o,E)},[O,I,F]),r=ie(),N=e.useRef(null),$=e.useRef(null),ne=e.useRef(!1),G=e.useMemo(()=>Ee(M),[M]),te=e.useMemo(()=>Ee(v),[v]),oe=typeof M=="object"&&M!==null;Le({controlledValue:G,defaultValue:te,currentValue:r.panelMode,setValue:o=>{o==="expanded"&&r.leftMode!=="expanded"&&r.setLeftMode("expanded"),r.setPanelMode(o)},breakpointReady:r.currentBreakpointReady,controlledIsResponsive:oe,onResponsiveChange:o=>y?.(o==="expanded",{reason:"responsive"}),onInit:o=>{typeof M>"u"&&y?.(o==="expanded",{reason:"init"})}});const f=e.useRef(null);e.useEffect(()=>{const o=typeof M<"u";if(f.current===null){f.current=o;return}f.current!==o&&(console.warn("Shell.Panel: Switching between controlled and uncontrolled `open` is not supported."),f.current=o)},[M]),e.useEffect(()=>{r.onPanelDefaults?.(m)},[r,m]);const P=e.useRef(null),ae=e.useCallback(o=>{P.current=o,typeof l=="function"?l(o):l&&(l.current=o)},[l]),se=e.Children.toArray(D),V=se.filter(o=>e.isValidElement(o)&&o.type===Se),U=se.filter(o=>!(e.isValidElement(o)&&o.type===Se)),le=r.leftResolvedPresentation==="overlay",Q=e.useCallback(o=>Xe(o,"horizontal"),[]),q=e.useMemo(()=>{if(!w||A)return A;const o=`kookie-ui:shell:panel:${w}`;return{load:()=>{if(typeof window>"u")return;const C=window.localStorage.getItem(o);return C?Number(C):void 0},save:C=>{typeof window>"u"||window.localStorage.setItem(o,String(C))}}},[w,A]);e.useEffect(()=>{let o=!0;return(async()=>{if(!R||!q?.load||le)return;const E=await q.load();o&&typeof E=="number"&&P.current&&(P.current.style.setProperty("--panel-size",`${E}px`),k?.(E))})(),()=>{o=!1}},[R,q,k,le]),e.useEffect(()=>{P.current&&le&&P.current.style.setProperty("--panel-size",`${m}px`)},[le,m]),e.useEffect(()=>{if(P.current&&typeof S>"u"&&typeof b<"u"){const o=Q(b);if(typeof o=="number"&&Number.isFinite(o)){const L=Math.min((typeof u=="number"?u:void 0)??o,Math.max((typeof a=="number"?a:void 0)??o,o));P.current.style.setProperty("--panel-size",`${L}px`),B(L,{reason:"init"})}}},[]),e.useEffect(()=>{if(!P.current||typeof S>"u")return;const o=Q(S);if(typeof o=="number"&&Number.isFinite(o)){const L=Math.min((typeof u=="number"?u:void 0)??o,Math.max((typeof a=="number"?a:void 0)??o,o));P.current.style.setProperty("--panel-size",`${L}px`),B(L,{reason:"controlled"})}},[S,a,u,Q,B]),e.useEffect(()=>{if(P.current&&r.leftResolvedPresentation!=="overlay"&&r.leftMode==="expanded"&&r.panelMode==="expanded"){const o=P.current.parentElement||null;try{o?.style.removeProperty("width")}catch{}}},[r.leftResolvedPresentation,r.leftMode,r.panelMode]);const de=r.leftMode==="expanded"&&r.panelMode==="expanded";e.useEffect(()=>{const o=N.current,E=$.current;if(o!==null&&o!==r.panelMode){const C=r.panelMode==="expanded";let L="toggle";E!==r.leftMode&&r.leftMode==="collapsed"&&!C&&(L="left"),y?.(C,{reason:L})}N.current=r.panelMode,$.current=r.leftMode},[r.panelMode,r.leftMode,y]);const Pe=R&&r.leftResolvedPresentation!=="overlay"&&de?e.createElement($e.Provider,{value:{containerRef:P,cssVarName:"--panel-size",minSize:typeof a=="number"?a:100,maxSize:typeof u=="number"?u:800,defaultSize:m,orientation:"vertical",edge:"end",computeNext:(o,E,C)=>{const L=getComputedStyle(P.current).direction==="rtl",H=o-E;return C+(L?-H:H)},onResize:k,onResizeStart:o=>{const C=P.current?.parentElement;try{C?.style.removeProperty("width")}catch{}p?.(o)},onResizeEnd:o=>{s?.(o),B(o,{reason:"resize"}),q?.save?.(o)},target:"panel",collapsible:!!j,snapPoints:T,snapTolerance:W??8,collapseThreshold:z,requestCollapse:()=>r.setPanelMode("collapsed"),requestToggle:()=>r.togglePane("panel")}},V.length>0?V.map((o,E)=>e.cloneElement(o,{key:o.key??E})):e.createElement(Ge,null)):null;return e.createElement("div",{...g,ref:ae,className:X("rt-ShellPanel",i),"data-mode":r.panelMode,"data-visible":r.currentBreakpointReady&&(de||r.leftResolvedPresentation!=="overlay"&&r.peekTarget==="panel")||void 0,"data-peek":r.currentBreakpointReady&&r.leftResolvedPresentation!=="overlay"&&r.peekTarget==="panel"||void 0,style:{...ee,"--panel-size":`${m}px`}},e.createElement("div",{className:"rt-ShellPanelContent","data-visible":de||void 0},U),Pe)}),"Shell.Panel");Z.displayName="Shell.Panel",Z.Handle=Se;const Me=e.forwardRef(({className:t,inset:l,...i},v)=>{const{registerInset:M,unregisterInset:y}=ke();return e.useEffect(()=>{if(l)return M("content"),()=>y("content")},[l,M,y]),e.createElement("main",{...i,ref:v,className:X("rt-ShellContent",t),"data-inset":l||void 0})});Me.displayName="Shell.Content",Y(Me,"Shell.Content");const Ne=e.forwardRef(({target:t,action:l="toggle",peekOnHover:i,onClick:v,onMouseEnter:M,onMouseLeave:y,children:S,...b},m)=>{const a=ie(),u=e.useCallback(h=>{switch(v?.(h),a.peekTarget===t&&a.clearPeek(),l){case"toggle":a.togglePane(t);break;case"expand":a.expandPane(t);break;case"collapse":a.collapsePane(t);break}},[a,t,l,v]),R=(()=>{switch(t){case"left":case"rail":return a.leftMode==="collapsed";case"panel":return a.leftMode==="collapsed"||a.panelMode==="collapsed";case"sidebar":return a.sidebarMode==="collapsed";case"inspector":return a.inspectorMode==="collapsed";case"bottom":return a.bottomMode==="collapsed"}})(),j=e.useCallback(h=>{M?.(h),!(!i||!R)&&a.peekPane(t)},[M,i,R,a,t]),_=e.useCallback(h=>{y?.(h),i&&a.peekTarget===t&&a.clearPeek()},[y,i,a,t]);return e.createElement("button",{...b,ref:m,onClick:u,onMouseEnter:j,onMouseLeave:_,"data-shell-trigger":t,"data-shell-action":l,"aria-expanded":!R},S)});Ne.displayName="Shell.Trigger";export{Ce as Bottom,Me as Content,xe as Header,ve as Inspector,me as Left,Z as Panel,J as Rail,ze as Root,ue as Sidebar,Ne as Trigger,Oe as useResponsivePresentation,ie as useShell};
|
|
2
2
|
//# sourceMappingURL=shell.js.map
|