@kushagradhawan/kookie-ui 0.1.48 → 0.1.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +1094 -95
- package/dist/cjs/components/_internal/shell-bottom.d.ts +31 -0
- package/dist/cjs/components/_internal/shell-bottom.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-bottom.js +2 -0
- package/dist/cjs/components/_internal/shell-bottom.js.map +7 -0
- package/dist/cjs/components/_internal/shell-handles.d.ts +7 -0
- package/dist/cjs/components/_internal/shell-handles.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-handles.js +2 -0
- package/dist/cjs/components/_internal/shell-handles.js.map +7 -0
- package/dist/cjs/components/_internal/shell-inspector.d.ts +31 -0
- package/dist/cjs/components/_internal/shell-inspector.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-inspector.js +2 -0
- package/dist/cjs/components/_internal/shell-inspector.js.map +7 -0
- package/dist/cjs/components/_internal/shell-resize.d.ts +24 -0
- package/dist/cjs/components/_internal/shell-resize.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-resize.js +2 -0
- package/dist/cjs/components/_internal/shell-resize.js.map +7 -0
- package/dist/cjs/components/_internal/shell-sidebar.d.ts +37 -0
- package/dist/cjs/components/_internal/shell-sidebar.d.ts.map +1 -0
- package/dist/cjs/components/_internal/shell-sidebar.js +2 -0
- package/dist/cjs/components/_internal/shell-sidebar.js.map +7 -0
- package/dist/cjs/components/schemas/index.d.ts +2 -0
- package/dist/cjs/components/schemas/index.d.ts.map +1 -1
- package/dist/cjs/components/schemas/index.js +1 -1
- package/dist/cjs/components/schemas/index.js.map +3 -3
- package/dist/cjs/components/schemas/shell.schema.d.ts +1025 -0
- package/dist/cjs/components/schemas/shell.schema.d.ts.map +1 -0
- package/dist/cjs/components/schemas/shell.schema.js +2 -0
- package/dist/cjs/components/schemas/shell.schema.js.map +7 -0
- package/dist/cjs/components/shell.context.d.ts +38 -0
- package/dist/cjs/components/shell.context.d.ts.map +1 -0
- package/dist/cjs/components/shell.context.js +2 -0
- package/dist/cjs/components/shell.context.js.map +7 -0
- package/dist/cjs/components/shell.d.ts +6 -68
- package/dist/cjs/components/shell.d.ts.map +1 -1
- package/dist/cjs/components/shell.hooks.d.ts +3 -0
- package/dist/cjs/components/shell.hooks.d.ts.map +1 -0
- package/dist/cjs/components/shell.hooks.js +2 -0
- package/dist/cjs/components/shell.hooks.js.map +7 -0
- 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 +20 -0
- package/dist/cjs/components/shell.types.d.ts.map +1 -0
- package/dist/cjs/components/shell.types.js +2 -0
- package/dist/cjs/components/shell.types.js.map +7 -0
- package/dist/cjs/components/sidebar.d.ts +8 -2
- package/dist/cjs/components/sidebar.d.ts.map +1 -1
- package/dist/cjs/components/sidebar.js +1 -1
- package/dist/cjs/components/sidebar.js.map +3 -3
- package/dist/esm/components/_internal/shell-bottom.d.ts +31 -0
- package/dist/esm/components/_internal/shell-bottom.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-bottom.js +2 -0
- package/dist/esm/components/_internal/shell-bottom.js.map +7 -0
- package/dist/esm/components/_internal/shell-handles.d.ts +7 -0
- package/dist/esm/components/_internal/shell-handles.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-handles.js +2 -0
- package/dist/esm/components/_internal/shell-handles.js.map +7 -0
- package/dist/esm/components/_internal/shell-inspector.d.ts +31 -0
- package/dist/esm/components/_internal/shell-inspector.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-inspector.js +2 -0
- package/dist/esm/components/_internal/shell-inspector.js.map +7 -0
- package/dist/esm/components/_internal/shell-resize.d.ts +24 -0
- package/dist/esm/components/_internal/shell-resize.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-resize.js +2 -0
- package/dist/esm/components/_internal/shell-resize.js.map +7 -0
- package/dist/esm/components/_internal/shell-sidebar.d.ts +37 -0
- package/dist/esm/components/_internal/shell-sidebar.d.ts.map +1 -0
- package/dist/esm/components/_internal/shell-sidebar.js +2 -0
- package/dist/esm/components/_internal/shell-sidebar.js.map +7 -0
- package/dist/esm/components/schemas/index.d.ts +2 -0
- package/dist/esm/components/schemas/index.d.ts.map +1 -1
- package/dist/esm/components/schemas/index.js +1 -1
- package/dist/esm/components/schemas/index.js.map +3 -3
- package/dist/esm/components/schemas/shell.schema.d.ts +1025 -0
- package/dist/esm/components/schemas/shell.schema.d.ts.map +1 -0
- package/dist/esm/components/schemas/shell.schema.js +2 -0
- package/dist/esm/components/schemas/shell.schema.js.map +7 -0
- package/dist/esm/components/shell.context.d.ts +38 -0
- package/dist/esm/components/shell.context.d.ts.map +1 -0
- package/dist/esm/components/shell.context.js +2 -0
- package/dist/esm/components/shell.context.js.map +7 -0
- package/dist/esm/components/shell.d.ts +6 -68
- package/dist/esm/components/shell.d.ts.map +1 -1
- package/dist/esm/components/shell.hooks.d.ts +3 -0
- package/dist/esm/components/shell.hooks.d.ts.map +1 -0
- package/dist/esm/components/shell.hooks.js +2 -0
- package/dist/esm/components/shell.hooks.js.map +7 -0
- 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 +20 -0
- package/dist/esm/components/shell.types.d.ts.map +1 -0
- package/dist/esm/components/shell.types.js +2 -0
- package/dist/esm/components/shell.types.js.map +7 -0
- package/dist/esm/components/sidebar.d.ts +8 -2
- package/dist/esm/components/sidebar.d.ts.map +1 -1
- package/dist/esm/components/sidebar.js +1 -1
- package/dist/esm/components/sidebar.js.map +3 -3
- package/layout/utilities.css +168 -84
- package/layout.css +168 -84
- package/package.json +2 -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/shell-bottom.json +168 -0
- package/schemas/shell-content.json +34 -0
- package/schemas/shell-handle.json +34 -0
- package/schemas/shell-header.json +42 -0
- package/schemas/shell-inspector.json +171 -0
- package/schemas/shell-panel.json +167 -0
- package/schemas/shell-rail.json +132 -0
- package/schemas/shell-root.json +54 -0
- package/schemas/shell-sidebar.json +182 -0
- package/schemas/shell-trigger.json +76 -0
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/_internal/base-menu.css +4 -5
- package/src/components/_internal/base-sidebar-menu.css +0 -1
- package/src/components/_internal/base-sidebar.css +7 -0
- package/src/components/_internal/shell-bottom.tsx +251 -0
- package/src/components/_internal/shell-handles.tsx +193 -0
- package/src/components/_internal/shell-inspector.tsx +242 -0
- package/src/components/_internal/shell-resize.tsx +30 -0
- package/src/components/_internal/shell-sidebar.tsx +370 -0
- package/src/components/schemas/index.ts +46 -0
- package/src/components/schemas/shell.schema.ts +403 -0
- package/src/components/shell.context.tsx +59 -0
- package/src/components/shell.css +33 -18
- package/src/components/shell.hooks.ts +31 -0
- package/src/components/shell.tsx +387 -1682
- package/src/components/shell.types.ts +27 -0
- package/src/components/sidebar.css +233 -33
- package/src/components/sidebar.tsx +248 -214
- package/src/styles/tokens/blur.css +2 -2
- package/src/styles/tokens/color.css +2 -2
- package/styles.css +1267 -181
- package/tokens/base.css +5 -2
- package/tokens.css +5 -2
- package/utilities.css +168 -84
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/sidebar.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n content: React.ReactNode;\n variant?: BadgeProps['variant'];\n size?: BadgeProps['size'];\n color?: BadgeProps['color'];\n highContrast?: BadgeProps['highContrast'];\n radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n size: '1' | '2';\n menuVariant: 'solid' | 'soft';\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n return React.useContext(SidebarVisualContext);\n}\n\n// Sidebar is now independent of Shell - no integration needed\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n const {\n size = sidebarPropDefs.size.default,\n variant = sidebarPropDefs.variant.default,\n menuVariant = sidebarPropDefs.menuVariant.default,\n layout = sidebarPropDefs.layout.default,\n // type = sidebarPropDefs.type.default,\n // side = sidebarPropDefs.side.default,\n // collapsible = sidebarPropDefs.collapsible.default,\n panelBackground,\n color,\n highContrast = sidebarPropDefs.highContrast.default,\n } = props;\n\n const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n const resolvedColor = color || themeContext.accentColor;\n\n // Resolve layout (default to 'panel')\n const resolvedLayout = layout || 'panel';\n\n // Update context with current props - we'll pass the resolved values\n const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n return (\n <div\n {...safeRootProps}\n ref={forwardedRef}\n data-accent-color={resolvedColor}\n className={classNames('rt-SidebarRoot', className)}\n >\n <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant }}>\n <div\n className={classNames(\n 'rt-SidebarContainer',\n `rt-variant-${variant}`,\n `rt-r-size-${resolvedSize}`,\n `rt-menu-variant-${menuVariant}`,\n resolvedLayout && `rt-layout-${resolvedLayout}`,\n )}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-panel-background={panelBackground}\n data-layout={resolvedLayout}\n >\n {children}\n </div>\n </SidebarVisualContext.Provider>\n </div>\n );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n id?: string;\n role?: 'navigation' | 'none';\n 'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n (\n {\n className,\n children,\n role = 'navigation',\n 'aria-label': ariaLabel = 'Main navigation',\n id,\n ...props\n },\n forwardedRef,\n ) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <ScrollArea type=\"hover\">\n <div\n {...props}\n ref={forwardedRef}\n id={id}\n role={role}\n aria-label={ariaLabel}\n className={classNames(\n 'rt-BaseMenuContent',\n 'rt-SidebarContent',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n className,\n )}\n >\n <div className=\"rt-BaseMenuViewport\">{children}</div>\n </div>\n </ScrollArea>\n );\n },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarHeader',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarHeader--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarFooter',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarFooter--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n React.ComponentRef<typeof Separator>,\n SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <Separator\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarSeparator', className)}\n />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n ({ className, ...props }, forwardedRef) => (\n <ul\n {...props}\n ref={forwardedRef}\n role=\"menu\"\n className={classNames('rt-SidebarMenu', className)}\n />\n ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n ({ className, ...props }, forwardedRef) => (\n <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n asChild?: boolean;\n isActive?: boolean;\n shortcut?: React.ReactNode;\n badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n asChild = false,\n isActive = false,\n shortcut,\n badge,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const visual = useSidebarVisual();\n const sidebarSize = visual?.size ?? '2';\n\n const Comp = asChild ? Slot : 'button';\n\n const { onClick } = props;\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (onClick) onClick(event as any);\n break;\n case 'ArrowDown': {\n event.preventDefault();\n // Focus next menu item\n const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(\n '[role=\"menuitem\"]',\n ) as HTMLElement;\n if (nextItem) nextItem.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n // Focus previous menu item\n const prevItem = (\n event.currentTarget as HTMLElement\n ).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (prevItem) prevItem.focus();\n break;\n }\n }\n onKeyDown?.(event);\n },\n [onClick, onKeyDown],\n );\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"menuitem\"\n aria-current={isActive ? 'page' : undefined}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n data-active={isActive || undefined}\n data-highlighted={isHighlighted || undefined}\n onKeyDown={handleKeyDown}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n {/* Badge with soft variant default and size mapping to sidebar size */}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge\n size={badge.size || sidebarSize}\n variant={badge.variant || 'soft'}\n color={badge.color}\n highContrast={badge.highContrast}\n radius={badge.radius}\n >\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n return (\n <div {...props} ref={forwardedRef}>\n <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n <Accordion.Item value=\"item\">{children}</Accordion.Item>\n </Accordion.Root>\n </div>\n );\n },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof Accordion.Trigger>,\n SidebarMenuSubTriggerProps\n>(\n (\n { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n return (\n <Accordion.Header asChild>\n <div>\n <Accordion.Trigger\n {...props}\n ref={forwardedRef}\n asChild={asChild}\n role=\"menuitem\"\n aria-haspopup=\"true\"\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-SidebarMenuButton',\n 'rt-SidebarMenuSubTrigger',\n className,\n )}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <ThickChevronRightIcon\n className={classNames(\n 'rt-BaseMenuSubTriggerIcon',\n 'rt-SidebarMenuSubTriggerIcon',\n )}\n />\n </>\n )}\n </Accordion.Trigger>\n </div>\n </Accordion.Header>\n );\n },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n React.ElementRef<typeof Accordion.Content>,\n SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n return (\n <Accordion.Content\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarMenuSubContent', className)}\n >\n <div className=\"rt-SidebarMenuSubList\">{children}</div>\n </Accordion.Content>\n );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n />\n ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n ({ asChild = false, className, ...props }, forwardedRef) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"group\"\n className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n />\n );\n },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarGroupContent', className)}\n />\n ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n Sidebar as Root,\n SidebarContent as Content,\n SidebarHeader as Header,\n SidebarFooter as Footer,\n SidebarSeparator as Separator,\n SidebarMenu as Menu,\n SidebarMenuItem as MenuItem,\n SidebarMenuButton as MenuButton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubTrigger as MenuSubTrigger,\n SidebarMenuSubContent as MenuSubContent,\n SidebarGroup as Group,\n SidebarGroupLabel as GroupLabel,\n SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n * <Logo />\n * <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n * <Logo />\n * <Sidebar.MenuButton>\n * <SettingsIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n * <div className=\"rt-flex rt-items-center rt-gap-2\">\n * <Logo />\n * <span>App Name</span>\n * </div>\n * <Sidebar.MenuButton>\n * <UserAvatar />\n * <span>John Doe</span>\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n * <Sidebar.MenuButton>\n * <UserIcon />\n * <span>Settings</span>\n * <ChevronUpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n * <span>v1.0.0</span>\n * <Sidebar.MenuButton>\n * <HelpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n SidebarProps as RootProps,\n SidebarContentProps as ContentProps,\n SidebarHeaderProps as HeaderProps,\n SidebarFooterProps as FooterProps,\n BadgeConfig,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["sidebar_exports", "__export", "SidebarContent", "SidebarFooter", "SidebarGroup", "SidebarGroupContent", "SidebarGroupLabel", "SidebarHeader", "SidebarMenu", "SidebarMenuButton", "SidebarMenuItem", "SidebarMenuSub", "SidebarMenuSubContent", "SidebarMenuSubTrigger", "Sidebar", "SidebarSeparator", "__toCommonJS", "React", "import_classnames", "import_slot", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport * as Accordion from '@radix-ui/react-accordion';\nimport * as DropdownMenu from './dropdown-menu.js';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n content: React.ReactNode;\n variant?: BadgeProps['variant'];\n size?: BadgeProps['size'];\n color?: BadgeProps['color'];\n highContrast?: BadgeProps['highContrast'];\n radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n size: '1' | '2';\n menuVariant: 'solid' | 'soft';\n presentation?: 'thin' | 'expanded';\n color?: string;\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n return React.useContext(SidebarVisualContext);\n}\n\n// Sidebar is now independent of Shell - no integration needed\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {\n /**\n * Presentational mode independent of Shell.\n * 'thin' renders a rail-style sidebar, 'expanded' renders a panel-style sidebar.\n * If both `presentation` and `layout` are provided, `presentation` takes precedence.\n */\n presentation?: 'thin' | 'expanded';\n}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n const {\n size = sidebarPropDefs.size.default,\n variant = sidebarPropDefs.variant.default,\n menuVariant = sidebarPropDefs.menuVariant.default,\n layout = sidebarPropDefs.layout.default,\n presentation,\n // type = sidebarPropDefs.type.default,\n // side = sidebarPropDefs.side.default,\n // collapsible = sidebarPropDefs.collapsible.default,\n panelBackground,\n color,\n highContrast = sidebarPropDefs.highContrast.default,\n } = props;\n\n const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n // Remove internal-only props from DOM\n const { asChild: _, panelBackground: __, presentation: ___, ...safeRootProps } = rootProps;\n const resolvedColor = color || themeContext.accentColor;\n\n // Resolve layout (default to 'panel'). `presentation` takes precedence over `layout`.\n const resolvedLayout = presentation === 'thin' ? 'rail' : presentation === 'expanded' ? 'panel' : layout || 'panel';\n\n // Update context with current props - we'll pass the resolved values\n const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n return (\n <div {...safeRootProps} ref={forwardedRef} data-accent-color={resolvedColor} className={classNames('rt-SidebarRoot', className)}>\n <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant, presentation, color: resolvedColor }}>\n <div\n className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${resolvedSize}`, `rt-menu-variant-${menuVariant}`, resolvedLayout && `rt-layout-${resolvedLayout}`)}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-panel-background={panelBackground}\n data-presentation={presentation}\n data-layout={resolvedLayout}\n >\n {children}\n </div>\n </SidebarVisualContext.Provider>\n </div>\n );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n id?: string;\n role?: 'navigation' | 'none';\n 'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n ({ className, children, role = 'navigation', 'aria-label': ariaLabel = 'Main navigation', id, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <ScrollArea type=\"hover\">\n <div\n {...props}\n ref={forwardedRef}\n id={id}\n role={role}\n aria-label={ariaLabel}\n className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`, className)}\n >\n <div className=\"rt-BaseMenuViewport\">{children}</div>\n </div>\n </ScrollArea>\n );\n },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarHeader',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarHeader--container': asContainer,\n },\n className,\n )}\n />\n );\n});\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarFooter',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarFooter--container': asContainer,\n },\n className,\n )}\n />\n );\n});\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, SidebarSeparatorProps>(({ className, ...props }, forwardedRef) => (\n <Separator {...props} ref={forwardedRef} className={classNames('rt-SidebarSeparator', className)} />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(({ className, ...props }, forwardedRef) => (\n <ul {...props} ref={forwardedRef} role=\"menu\" className={classNames('rt-SidebarMenu', className)} />\n));\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(({ className, ...props }, forwardedRef) => (\n <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n));\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n asChild?: boolean;\n isActive?: boolean;\n shortcut?: React.ReactNode;\n badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n ({ asChild = false, isActive = false, shortcut, badge, className, children, onMouseEnter, onMouseLeave, onKeyDown, ...props }, forwardedRef) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const visual = useSidebarVisual();\n const sidebarSize = visual?.size ?? '2';\n\n const Comp = asChild ? Slot : 'button';\n\n const { onClick } = props;\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (onClick) onClick(event as any);\n break;\n case 'ArrowDown': {\n event.preventDefault();\n // Focus next menu item\n const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (nextItem) nextItem.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n // Focus previous menu item\n const prevItem = (event.currentTarget as HTMLElement).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (prevItem) prevItem.focus();\n break;\n }\n }\n onKeyDown?.(event);\n },\n [onClick, onKeyDown],\n );\n\n // Wrap bare text nodes so CSS can target labels (e.g., for truncation in thin mode)\n const wrapTextNodes = (node: React.ReactNode): React.ReactNode => {\n if (typeof node === 'string' || typeof node === 'number') {\n return <span className=\"rt-SidebarMenuLabel\">{node}</span>;\n }\n if (Array.isArray(node)) {\n return node.map((child, index) => <React.Fragment key={index}>{wrapTextNodes(child)}</React.Fragment>);\n }\n if (React.isValidElement(node)) {\n const el = node as React.ReactElement<any>;\n const className: string = (el.props && (el.props as any).className) || '';\n const isAlreadyLabel = typeof el.type === 'string' && className.split(' ').includes('rt-SidebarMenuLabel');\n if (isAlreadyLabel) return el;\n const newChildren = wrapTextNodes((el.props as any)?.children);\n return React.cloneElement(el, { ...(el.props as any) }, newChildren);\n }\n return node;\n };\n\n const processedChildren = wrapTextNodes(children);\n\n // When rendering asChild, Slot expects a single child element. We still want to\n // append optional badge/shortcut inside that element so they render with Link.\n const slottedChildren = React.useMemo(() => {\n if (!asChild) return null;\n try {\n const onlyChild = React.Children.only(processedChildren as React.ReactElement<any>) as React.ReactElement<any>;\n const originalInnerChildren = (onlyChild.props as any)?.children;\n const enhancedInnerChildren = (\n <>\n {originalInnerChildren}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} highContrast={badge.highContrast} radius={badge.radius}>\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n );\n return React.cloneElement(onlyChild, { ...(onlyChild.props as any) }, enhancedInnerChildren);\n } catch {\n // Fallback: if multiple children were passed incorrectly, just return processedChildren\n return processedChildren as React.ReactNode;\n }\n }, [asChild, processedChildren, badge, shortcut, sidebarSize]);\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"menuitem\"\n aria-current={isActive ? 'page' : undefined}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n data-active={isActive || undefined}\n data-highlighted={isHighlighted || undefined}\n onKeyDown={handleKeyDown}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n slottedChildren\n ) : (\n <>\n {processedChildren}\n {/* Badge with soft variant default and size mapping to sidebar size */}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} highContrast={badge.highContrast} radius={badge.radius}>\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components: Accordion in expanded, Dropdown in thin\nconst SidebarSubMenuModeContext = React.createContext<'accordion' | 'dropdown'>('accordion');\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(({ defaultOpen = false, children, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const mode: 'accordion' | 'dropdown' = visual?.presentation === 'thin' ? 'dropdown' : 'accordion';\n\n if (mode === 'dropdown') {\n return (\n <div {...props} ref={forwardedRef}>\n <DropdownMenu.Root>\n <SidebarSubMenuModeContext.Provider value=\"dropdown\">{children}</SidebarSubMenuModeContext.Provider>\n </DropdownMenu.Root>\n </div>\n );\n }\n\n return (\n <div {...props} ref={forwardedRef}>\n <SidebarSubMenuModeContext.Provider value=\"accordion\">\n <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n <Accordion.Item value=\"item\">{children}</Accordion.Item>\n </Accordion.Root>\n </SidebarSubMenuModeContext.Provider>\n </div>\n );\n});\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion.Trigger>, SidebarMenuSubTriggerProps>(\n ({ asChild = false, className, children, onMouseEnter, onMouseLeave, ...props }, forwardedRef) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const mode = React.useContext(SidebarSubMenuModeContext);\n\n if (mode === 'dropdown') {\n return (\n <DropdownMenu.Trigger>\n <button\n {...(props as any)}\n ref={forwardedRef as any}\n type=\"button\"\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event as any);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event as any);\n }}\n >\n {children}\n </button>\n </DropdownMenu.Trigger>\n );\n }\n\n return (\n <Accordion.Header asChild>\n <div>\n <Accordion.Trigger\n {...props}\n ref={forwardedRef}\n asChild={asChild}\n role=\"menuitem\"\n aria-haspopup=\"true\"\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <ThickChevronRightIcon className={classNames('rt-BaseMenuSubTriggerIcon', 'rt-SidebarMenuSubTriggerIcon')} />\n </>\n )}\n </Accordion.Trigger>\n </div>\n </Accordion.Header>\n );\n },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion.Content>, SidebarMenuSubContentProps>(({ className, children, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const mode = React.useContext(SidebarSubMenuModeContext);\n\n if (mode === 'dropdown') {\n const unwrapMenuButton = (node: React.ReactNode): React.ReactNode => {\n if (Array.isArray(node)) {\n return node.map((n, i) => <React.Fragment key={i}>{unwrapMenuButton(n)}</React.Fragment>);\n }\n if (React.isValidElement(node)) {\n const typeDisplay = (node.type as any)?.displayName;\n if (typeDisplay === 'Sidebar.MenuButton') {\n return (node.props as any)?.children;\n }\n const child = (node.props as any)?.children;\n if (child !== undefined) {\n return React.cloneElement(node as any, { ...(node.props as any), children: unwrapMenuButton(child) });\n }\n }\n return node;\n };\n\n const normalized = React.Children.map(children as React.ReactNode, (child, index) => {\n if (React.isValidElement(child) && (child.type as any)?.displayName === 'Sidebar.MenuItem') {\n const itemChildren = (child.props as any)?.children;\n const content = unwrapMenuButton(itemChildren);\n return (\n <DropdownMenu.Item key={index} asChild>\n {content as any}\n </DropdownMenu.Item>\n );\n }\n // Fallback: wrap raw nodes too for consistent menu styling\n return (\n <DropdownMenu.Item key={index} asChild>\n {unwrapMenuButton(child) as any}\n </DropdownMenu.Item>\n );\n });\n\n return (\n <DropdownMenu.Content size={visual?.size} variant={visual?.menuVariant} className={classNames(className)}>\n <DropdownMenu.Group>{normalized}</DropdownMenu.Group>\n </DropdownMenu.Content>\n );\n }\n\n return (\n <Accordion.Content {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuSubContent', className)}>\n <div className=\"rt-SidebarMenuSubList\">{children}</div>\n </Accordion.Content>\n );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(({ className, ...props }, forwardedRef) => (\n <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)} />\n));\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(({ asChild = false, className, ...props }, forwardedRef) => {\n const Comp = asChild ? Slot : 'div';\n\n return <Comp {...props} ref={forwardedRef} role=\"group\" className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)} />;\n});\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(({ className, ...props }, forwardedRef) => (\n <div {...props} ref={forwardedRef} className={classNames('rt-SidebarGroupContent', className)} />\n));\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n Sidebar as Root,\n SidebarContent as Content,\n SidebarHeader as Header,\n SidebarFooter as Footer,\n SidebarSeparator as Separator,\n SidebarMenu as Menu,\n SidebarMenuItem as MenuItem,\n SidebarMenuButton as MenuButton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubTrigger as MenuSubTrigger,\n SidebarMenuSubContent as MenuSubContent,\n SidebarGroup as Group,\n SidebarGroupLabel as GroupLabel,\n SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n * <Logo />\n * <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n * <Logo />\n * <Sidebar.MenuButton>\n * <SettingsIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n * <div className=\"rt-flex rt-items-center rt-gap-2\">\n * <Logo />\n * <span>App Name</span>\n * </div>\n * <Sidebar.MenuButton>\n * <UserAvatar />\n * <span>John Doe</span>\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n * <Sidebar.MenuButton>\n * <UserIcon />\n * <span>Settings</span>\n * <ChevronUpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n * <span>v1.0.0</span>\n * <Sidebar.MenuButton>\n * <HelpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type { SidebarProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, BadgeConfig };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["sidebar_exports", "__export", "SidebarContent", "SidebarFooter", "SidebarGroup", "SidebarGroupContent", "SidebarGroupLabel", "SidebarHeader", "SidebarMenu", "SidebarMenuButton", "SidebarMenuItem", "SidebarMenuSub", "SidebarMenuSubContent", "SidebarMenuSubTrigger", "Sidebar", "SidebarSeparator", "__toCommonJS", "React", "import_classnames", "import_slot", "Accordion", "DropdownMenu", "import_sidebar_props", "import_theme", "import_scroll_area", "import_separator", "import_icons", "import_extract_props", "import_kbd", "import_badge", "SidebarVisualContext", "useSidebarVisual", "props", "forwardedRef", "themeContext", "size", "variant", "menuVariant", "layout", "presentation", "panelBackground", "color", "highContrast", "className", "children", "rootProps", "_", "__", "___", "safeRootProps", "resolvedColor", "resolvedLayout", "resolvedSize", "classNames", "role", "ariaLabel", "id", "visual", "asContainer", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "onClick", "handleKeyDown", "event", "nextItem", "prevItem", "wrapTextNodes", "node", "child", "index", "el", "newChildren", "processedChildren", "slottedChildren", "onlyChild", "originalInnerChildren", "enhancedInnerChildren", "SidebarSubMenuModeContext", "defaultOpen", "unwrapMenuButton", "n", "i", "normalized", "itemChildren", "content"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { BottomHandle } from './shell-handles.js';
|
|
3
|
+
import type { PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
|
|
4
|
+
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
presentation?: ResponsivePresentation;
|
|
6
|
+
mode?: PaneMode;
|
|
7
|
+
defaultMode?: any;
|
|
8
|
+
onModeChange?: (mode: PaneMode) => void;
|
|
9
|
+
expandedSize?: number;
|
|
10
|
+
minSize?: number;
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
onExpand?: () => void;
|
|
15
|
+
onCollapse?: () => void;
|
|
16
|
+
onResize?: (size: number) => void;
|
|
17
|
+
resizer?: React.ReactNode;
|
|
18
|
+
onResizeStart?: (size: number) => void;
|
|
19
|
+
onResizeEnd?: (size: number) => void;
|
|
20
|
+
snapPoints?: number[];
|
|
21
|
+
snapTolerance?: number;
|
|
22
|
+
collapseThreshold?: number;
|
|
23
|
+
paneId?: string;
|
|
24
|
+
persistence?: PaneSizePersistence;
|
|
25
|
+
}
|
|
26
|
+
type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & {
|
|
27
|
+
Handle: typeof BottomHandle;
|
|
28
|
+
};
|
|
29
|
+
export declare const Bottom: BottomComponent;
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=shell-bottom.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3G,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,YAAY,CAAA;CAAE,CAAC;AAE1I,eAAO,MAAM,MAAM,EAoNd,eAAe,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as o from"react";import X from"classnames";import*as k from"../sheet.js";import{VisuallyHidden as Y}from"../visually-hidden.js";import{useShell as Z}from"../shell.context.js";import{useResponsivePresentation as _}from"../shell.hooks.js";import{PaneResizeContext as ee}from"./shell-resize.js";import{BottomHandle as M,PaneHandle as te}from"./shell-handles.js";import{BREAKPOINTS as oe}from"../shell.types.js";const O=o.forwardRef(({className:$,presentation:D="fixed",mode:a,defaultMode:i="collapsed",onModeChange:h,expandedSize:c=200,minSize:E=100,maxSize:x=400,resizable:m=!1,collapsible:I=!0,onExpand:g,onCollapse:S,onResize:p,onResizeStart:L,onResizeEnd:V,snapPoints:K,snapTolerance:j,collapseThreshold:q,paneId:f,persistence:b,children:F,style:W,...G},s)=>{const t=Z(),B=_(D),l=B==="overlay",J=B==="stacked",d=o.useRef(null),Q=o.useCallback(e=>{d.current=e,typeof s=="function"?s(e):s&&(s.current=e)},[s]),C=o.Children.toArray(F),z=C.filter(e=>o.isValidElement(e)&&e.type===M),T=C.filter(e=>!(o.isValidElement(e)&&e.type===M)),y=o.useCallback(()=>{if(typeof i=="string")return i;const e=i;if(e&&e[t.currentBreakpoint])return e[t.currentBreakpoint];const r=[...Object.keys(oe)].reverse().concat("initial"),R=r.indexOf(t.currentBreakpoint);for(let v=R+1;v<r.length;v++){const A=r[v];if(e&&e[A])return e[A]}return"collapsed"},[i,t.currentBreakpoint]),H=o.useRef(!1);o.useEffect(()=>{if(!H.current&&(H.current=!0,a===void 0)){const e=y();t.bottomMode!==e&&t.setBottomMode(e)}},[]);const w=o.useRef(null),N=o.useRef(null);o.useEffect(()=>{if(a!==void 0||!t.currentBreakpointReady||w.current===t.currentBreakpoint)return;w.current=t.currentBreakpoint;const e=y();N.current!==e&&(N.current=e,e!==t.bottomMode&&t.setBottomMode(e))},[a,t.currentBreakpoint,t.currentBreakpointReady,y,t.bottomMode,t.setBottomMode]),o.useEffect(()=>{a!==void 0&&t.bottomMode!==a&&t.setBottomMode(a)},[a,t]),o.useEffect(()=>{a===void 0&&h?.(t.bottomMode)},[t.bottomMode,a,h]),o.useEffect(()=>{t.bottomMode==="expanded"?g?.():S?.()},[t.bottomMode,g,S]);const P=t.bottomMode==="expanded",u=o.useMemo(()=>{if(!f||b)return b;const e=`kookie-ui:shell:bottom:${f}`;return{load:()=>{if(typeof window>"u")return;const r=window.localStorage.getItem(e);return r?Number(r):void 0},save:r=>{typeof window>"u"||window.localStorage.setItem(e,String(r))}}},[f,b]);o.useEffect(()=>{let e=!0;return(async()=>{if(!m||!u?.load||l)return;const n=await u.load();e&&typeof n=="number"&&d.current&&(d.current.style.setProperty("--bottom-size",`${n}px`),p?.(n))})(),()=>{e=!1}},[m,u,p,l]);const U=m&&!l&&P?o.createElement(ee.Provider,{value:{containerRef:d,cssVarName:"--bottom-size",minSize:E,maxSize:x,defaultSize:c,orientation:"horizontal",edge:"start",computeNext:(e,n,r)=>{const R=e-n;return r-R},onResize:p,onResizeStart:L,onResizeEnd:e=>{V?.(e),u?.save?.(e)},target:"bottom",collapsible:I,snapPoints:K,snapTolerance:j??8,collapseThreshold:q,requestCollapse:()=>t.setBottomMode("collapsed"),requestToggle:()=>t.togglePane("bottom")}},z.length>0?z.map((e,n)=>o.cloneElement(e,{key:e.key??n})):o.createElement(te,null)):null;if(l){const e=t.bottomMode==="expanded";return o.createElement(k.Root,{open:e,onOpenChange:n=>t.setBottomMode(n?"expanded":"collapsed")},o.createElement(k.Content,{side:"bottom",style:{padding:0},height:{initial:`${c}px`}},o.createElement(Y,null,o.createElement(k.Title,null,"Bottom panel")),T))}return o.createElement("div",{...G,ref:Q,className:X("rt-ShellBottom",$),"data-mode":t.bottomMode,"data-peek":t.peekTarget==="bottom"||void 0,"data-presentation":B,"data-open":J&&P||void 0,style:{...W,"--bottom-size":`${c}px`,"--bottom-min-size":`${E}px`,"--bottom-max-size":`${x}px`}},o.createElement("div",{className:"rt-ShellBottomContent","data-visible":P||void 0},T),U)});O.displayName="Shell.Bottom",O.Handle=M;export{O as Bottom};
|
|
2
|
+
//# sourceMappingURL=shell-bottom.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-bottom.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { BottomHandle, PaneHandle } from './shell-handles.js';\nimport { BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';\n\ninterface PaneProps extends React.ComponentPropsWithoutRef<'div'> {\n presentation?: ResponsivePresentation;\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode) => void;\n expandedSize?: number;\n minSize?: number;\n maxSize?: number;\n resizable?: boolean;\n collapsible?: boolean;\n onExpand?: () => void;\n onCollapse?: () => void;\n onResize?: (size: number) => void;\n resizer?: React.ReactNode;\n onResizeStart?: (size: number) => void;\n onResizeEnd?: (size: number) => void;\n snapPoints?: number[];\n snapTolerance?: number;\n collapseThreshold?: number;\n paneId?: string;\n persistence?: PaneSizePersistence;\n}\n\ntype BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof BottomHandle };\n\nexport const Bottom = React.forwardRef<HTMLDivElement, PaneProps>(\n (\n {\n className,\n presentation = 'fixed',\n mode,\n defaultMode = 'collapsed',\n onModeChange,\n expandedSize = 200,\n minSize = 100,\n maxSize = 400,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === BottomHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === BottomHandle));\n\n const resolveResponsiveMode = React.useCallback((): PaneMode => {\n if (typeof defaultMode === 'string') return defaultMode as PaneMode;\n const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;\n if (dm && dm[shell.currentBreakpoint as Breakpoint]) {\n return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;\n }\n const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;\n const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);\n const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);\n for (let i = startIdx + 1; i < order.length; i++) {\n const bp = order[i];\n if (dm && dm[bp]) {\n return dm[bp] as PaneMode;\n }\n }\n return 'collapsed';\n }, [defaultMode, shell.currentBreakpoint]);\n\n const didInitRef = React.useRef(false);\n React.useEffect(() => {\n if (didInitRef.current) return;\n didInitRef.current = true;\n if (mode === undefined) {\n const initial = resolveResponsiveMode();\n if (shell.bottomMode !== initial) shell.setBottomMode(initial);\n }\n }, []);\n\n const lastBottomBpRef = React.useRef<Breakpoint | null>(null);\n const lastResolvedBottomRef = React.useRef<PaneMode | null>(null);\n React.useEffect(() => {\n if (mode !== undefined) return;\n if (!shell.currentBreakpointReady) return;\n if (lastBottomBpRef.current === shell.currentBreakpoint) return;\n lastBottomBpRef.current = shell.currentBreakpoint as Breakpoint;\n const next = resolveResponsiveMode();\n if (lastResolvedBottomRef.current === next) return;\n lastResolvedBottomRef.current = next;\n if (next !== shell.bottomMode) shell.setBottomMode(next);\n }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.bottomMode, shell.setBottomMode]);\n\n React.useEffect(() => {\n if (mode !== undefined && shell.bottomMode !== mode) {\n shell.setBottomMode(mode);\n }\n }, [mode, shell]);\n\n React.useEffect(() => {\n if (mode === undefined) {\n onModeChange?.(shell.bottomMode);\n }\n }, [shell.bottomMode, mode, onModeChange]);\n\n React.useEffect(() => {\n if (shell.bottomMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.bottomMode, onExpand, onCollapse]);\n\n const isExpanded = shell.bottomMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:bottom:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n window.localStorage.setItem(key, String(size));\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('--bottom-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--bottom-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'horizontal',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const delta = client - startClient;\n return startSize - delta;\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n persistenceAdapter?.save?.(size);\n },\n target: 'bottom',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setBottomMode('collapsed'),\n requestToggle: () => shell.togglePane('bottom'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n if (isOverlay) {\n const open = shell.bottomMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setBottomMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"bottom\" style={{ padding: 0 }} height={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Bottom panel</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...props}\n ref={setRef}\n className={classNames('rt-ShellBottom', className)}\n data-mode={shell.bottomMode}\n data-peek={shell.peekTarget === 'bottom' || undefined}\n data-presentation={resolvedPresentation}\n data-open={(isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--bottom-size' as any]: `${expandedSize}px`,\n ['--bottom-min-size' as any]: `${minSize}px`,\n ['--bottom-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellBottomContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n },\n) as BottomComponent;\nBottom.displayName = 'Shell.Bottom';\nBottom.Handle = BottomHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "classNames", "Sheet", "VisuallyHidden", "useShell", "useResponsivePresentation", "PaneResizeContext", "BottomHandle", "PaneHandle", "BREAKPOINTS", "Bottom", "className", "presentation", "mode", "defaultMode", "onModeChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "props", "ref", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "resolveResponsiveMode", "dm", "order", "startIdx", "i", "bp", "didInitRef", "initial", "lastBottomBpRef", "lastResolvedBottomRef", "next", "isExpanded", "persistenceAdapter", "key", "v", "size", "mounted", "loaded", "handleEl", "client", "startClient", "startSize", "delta", "open", "o"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare const PaneHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
3
|
+
export declare const PanelHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export declare const SidebarHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const InspectorHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export declare const BottomHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
//# sourceMappingURL=shell-handles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-handles.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-handles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,UAAU,mKA+KrB,CAAC;AAGH,eAAO,MAAM,WAAW,mKAA+H,CAAC;AAGxJ,eAAO,MAAM,aAAa,mKAA+H,CAAC;AAG1J,eAAO,MAAM,eAAe,mKAA+H,CAAC;AAG5J,eAAO,MAAM,YAAY,mKAA+H,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as s from"react";import B from"classnames";import{usePaneResize as X}from"./shell-resize.js";const E=s.forwardRef(({className:i,children:l,...N},$)=>{const{containerRef:g,cssVarName:c,minSize:P,maxSize:b,defaultSize:x,orientation:p,edge:M,computeNext:I,onResize:w,onResizeStart:H,onResizeEnd:h,snapPoints:L,snapTolerance:W,collapseThreshold:T,collapsible:C,target:J,requestCollapse:K,requestToggle:V}=X(),S=s.useRef(null);s.useEffect(()=>()=>{try{S.current?.()}catch{}S.current=null},[]);const F=p;return s.createElement("div",{...N,ref:$,className:B("rt-ShellResizer",i),"data-orientation":p,"data-edge":M,role:"slider","aria-orientation":F,"aria-valuemin":P,"aria-valuemax":b,"aria-valuenow":x,tabIndex:0,onPointerDown:e=>{if(!g.current)return;e.preventDefault();const r=g.current,a=e.currentTarget,d=e.pointerId;try{S.current?.()}catch{}r.setAttribute("data-resizing","");try{a.setPointerCapture(d)}catch{}const y=p==="vertical"?e.clientX:e.clientY,n=parseFloat(getComputedStyle(r).getPropertyValue(c)||`${x}`),t=o=>Math.min(Math.max(o,P),b),m=document.body,U=m.style.cursor,q=m.style.userSelect;m.style.cursor=p==="vertical"?"col-resize":"row-resize",m.style.userSelect="none",H?.(n);const z=o=>{const u=p==="vertical"?o.clientX:o.clientY,f=t(I(u,y,n));r.style.setProperty(c,`${f}px`),a.setAttribute("aria-valuenow",String(f)),w?.(f)},R=()=>{try{a.releasePointerCapture(d)}catch{}window.removeEventListener("pointermove",z),window.removeEventListener("pointerup",v),window.removeEventListener("pointercancel",v),window.removeEventListener("keydown",D),a.removeEventListener("lostpointercapture",v),r.removeAttribute("data-resizing"),m.style.cursor=U,m.style.userSelect=q,S.current=null},v=()=>{const o=parseFloat(getComputedStyle(r).getPropertyValue(c)||`${x}`);let u=o;if(L&&L.length){const f=L.reduce((A,k)=>Math.abs(k-o)<Math.abs(A-o)?k:A,L[0]);Math.abs(f-o)<=(W??8)&&(u=f,r.style.setProperty(c,`${u}px`),a.setAttribute("aria-valuenow",String(u)),w?.(u))}C&&typeof T=="number"&&o<=T&&K?.(),h?.(u),R()},D=o=>{o.key==="Escape"&&(r.style.setProperty(c,`${n}px`),a.setAttribute("aria-valuenow",String(n)),h?.(n),R())};window.addEventListener("pointermove",z),window.addEventListener("pointerup",v),window.addEventListener("pointercancel",v),window.addEventListener("keydown",D),a.addEventListener("lostpointercapture",v),S.current=R},onDoubleClick:()=>{C&&V?.()},onKeyDown:e=>{if(!g.current)return;const r=g.current,a=parseFloat(getComputedStyle(r).getPropertyValue(c)||`${x}`),d=t=>Math.min(Math.max(t,P),b),y=e.shiftKey?32:8;let n=0;if(p==="vertical"?e.key==="ArrowRight"?n=y:e.key==="ArrowLeft"&&(n=-y):e.key==="ArrowDown"?n=y:e.key==="ArrowUp"&&(n=-y),e.key==="Home"){e.preventDefault(),H?.(a);const t=d(P);r.style.setProperty(c,`${t}px`),e.currentTarget.setAttribute("aria-valuenow",String(t)),w?.(t),h?.(t);return}if(e.key==="End"){e.preventDefault(),H?.(a);const t=d(b);r.style.setProperty(c,`${t}px`),e.currentTarget.setAttribute("aria-valuenow",String(t)),w?.(t),h?.(t);return}if(n!==0){e.preventDefault(),H?.(a);const t=d(a+(M==="start"&&p==="vertical"?-n:n));r.style.setProperty(c,`${t}px`),e.currentTarget.setAttribute("aria-valuenow",String(t)),w?.(t),h?.(t)}}},l)});E.displayName="Shell.Handle";const Y=s.forwardRef((i,l)=>s.createElement(E,{...i,ref:l}));Y.displayName="Shell.Panel.Handle";const O=s.forwardRef((i,l)=>s.createElement(E,{...i,ref:l}));O.displayName="Shell.Sidebar.Handle";const j=s.forwardRef((i,l)=>s.createElement(E,{...i,ref:l}));j.displayName="Shell.Inspector.Handle";const G=s.forwardRef((i,l)=>s.createElement(E,{...i,ref:l}));G.displayName="Shell.Bottom.Handle";export{G as BottomHandle,j as InspectorHandle,E as PaneHandle,Y as PanelHandle,O as SidebarHandle};
|
|
2
|
+
//# sourceMappingURL=shell-handles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-handles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { usePaneResize } from './shell-resize.js';\n\nexport const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(({ className, children, ...props }, ref) => {\n const {\n containerRef,\n cssVarName,\n minSize,\n maxSize,\n defaultSize,\n orientation,\n edge,\n computeNext,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n collapsible,\n target,\n requestCollapse,\n requestToggle,\n } = usePaneResize();\n\n const activeCleanupRef = React.useRef<(() => void) | null>(null);\n React.useEffect(\n () => () => {\n try {\n activeCleanupRef.current?.();\n } catch {}\n activeCleanupRef.current = null;\n },\n [],\n );\n\n const ariaOrientation = orientation;\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames('rt-ShellResizer', className)}\n data-orientation={orientation}\n data-edge={edge}\n role=\"slider\"\n aria-orientation={ariaOrientation}\n aria-valuemin={minSize}\n aria-valuemax={maxSize}\n aria-valuenow={defaultSize}\n tabIndex={0}\n onPointerDown={(e) => {\n if (!containerRef.current) return;\n e.preventDefault();\n const container = containerRef.current;\n const handleEl = e.currentTarget as HTMLElement;\n const pointerId = e.pointerId;\n try {\n activeCleanupRef.current?.();\n } catch {}\n container.setAttribute('data-resizing', '');\n try {\n handleEl.setPointerCapture(pointerId);\n } catch {}\n const startClient = orientation === 'vertical' ? e.clientX : e.clientY;\n const startSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);\n const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);\n const body = document.body;\n const prevCursor = body.style.cursor;\n const prevUserSelect = body.style.userSelect;\n body.style.cursor = orientation === 'vertical' ? 'col-resize' : 'row-resize';\n body.style.userSelect = 'none';\n onResizeStart?.(startSize);\n const handleMove = (ev: PointerEvent) => {\n const client = orientation === 'vertical' ? ev.clientX : ev.clientY;\n const next = clamp(computeNext(client, startClient, startSize));\n container.style.setProperty(cssVarName, `${next}px`);\n handleEl.setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n };\n const cleanup = () => {\n try {\n handleEl.releasePointerCapture(pointerId);\n } catch {}\n window.removeEventListener('pointermove', handleMove as any);\n window.removeEventListener('pointerup', handleUp as any);\n window.removeEventListener('pointercancel', handleUp as any);\n window.removeEventListener('keydown', handleKey as any);\n handleEl.removeEventListener('lostpointercapture', handleUp as any);\n container.removeAttribute('data-resizing');\n body.style.cursor = prevCursor;\n body.style.userSelect = prevUserSelect;\n activeCleanupRef.current = null;\n };\n const handleUp = () => {\n const finalSize = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);\n let snapped = finalSize;\n if (snapPoints && snapPoints.length) {\n const nearest = snapPoints.reduce((acc, p) => (Math.abs(p - finalSize) < Math.abs(acc - finalSize) ? p : acc), snapPoints[0]);\n if (Math.abs(nearest - finalSize) <= (snapTolerance ?? 8)) {\n snapped = nearest;\n container.style.setProperty(cssVarName, `${snapped}px`);\n handleEl.setAttribute('aria-valuenow', String(snapped));\n onResize?.(snapped);\n }\n }\n if (collapsible && typeof collapseThreshold === 'number' && finalSize <= collapseThreshold) {\n requestCollapse?.();\n }\n onResizeEnd?.(snapped);\n cleanup();\n };\n const handleKey = (kev: KeyboardEvent) => {\n if (kev.key === 'Escape') {\n container.style.setProperty(cssVarName, `${startSize}px`);\n handleEl.setAttribute('aria-valuenow', String(startSize));\n onResizeEnd?.(startSize);\n cleanup();\n }\n };\n window.addEventListener('pointermove', handleMove as any);\n window.addEventListener('pointerup', handleUp as any);\n window.addEventListener('pointercancel', handleUp as any);\n window.addEventListener('keydown', handleKey as any);\n handleEl.addEventListener('lostpointercapture', handleUp as any);\n activeCleanupRef.current = cleanup;\n }}\n onDoubleClick={() => {\n if (collapsible) requestToggle?.();\n }}\n onKeyDown={(e) => {\n if (!containerRef.current) return;\n const container = containerRef.current;\n const current = parseFloat(getComputedStyle(container).getPropertyValue(cssVarName) || `${defaultSize}`);\n const clamp = (v: number) => Math.min(Math.max(v, minSize), maxSize);\n const step = e.shiftKey ? 32 : 8;\n let delta = 0;\n if (orientation === 'vertical') {\n if (e.key === 'ArrowRight') delta = step;\n else if (e.key === 'ArrowLeft') delta = -step;\n } else {\n if (e.key === 'ArrowDown') delta = step;\n else if (e.key === 'ArrowUp') delta = -step;\n }\n if (e.key === 'Home') {\n e.preventDefault();\n onResizeStart?.(current);\n const next = clamp(minSize);\n container.style.setProperty(cssVarName, `${next}px`);\n (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n onResizeEnd?.(next);\n return;\n }\n if (e.key === 'End') {\n e.preventDefault();\n onResizeStart?.(current);\n const next = clamp(maxSize);\n container.style.setProperty(cssVarName, `${next}px`);\n (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n onResizeEnd?.(next);\n return;\n }\n if (delta !== 0) {\n e.preventDefault();\n onResizeStart?.(current);\n const next = clamp(current + (edge === 'start' && orientation === 'vertical' ? -delta : delta));\n container.style.setProperty(cssVarName, `${next}px`);\n (e.currentTarget as HTMLElement).setAttribute('aria-valuenow', String(next));\n onResize?.(next);\n onResizeEnd?.(next);\n }\n }}\n >\n {children}\n </div>\n );\n});\nPaneHandle.displayName = 'Shell.Handle';\n\nexport const PanelHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nPanelHandle.displayName = 'Shell.Panel.Handle';\n\nexport const SidebarHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nSidebarHandle.displayName = 'Shell.Sidebar.Handle';\n\nexport const InspectorHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nInspectorHandle.displayName = 'Shell.Inspector.Handle';\n\nexport const BottomHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => <PaneHandle {...props} ref={ref} />);\nBottomHandle.displayName = 'Shell.Bottom.Handle';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "classNames", "usePaneResize", "PaneHandle", "className", "children", "props", "ref", "containerRef", "cssVarName", "minSize", "maxSize", "defaultSize", "orientation", "edge", "computeNext", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "collapsible", "target", "requestCollapse", "requestToggle", "activeCleanupRef", "ariaOrientation", "container", "handleEl", "pointerId", "startClient", "startSize", "clamp", "v", "body", "prevCursor", "prevUserSelect", "handleMove", "ev", "client", "next", "cleanup", "handleUp", "handleKey", "finalSize", "snapped", "nearest", "acc", "p", "kev", "current", "step", "delta", "PanelHandle", "SidebarHandle", "InspectorHandle", "BottomHandle"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { InspectorHandle } from './shell-handles.js';
|
|
3
|
+
import type { PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
|
|
4
|
+
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
presentation?: ResponsivePresentation;
|
|
6
|
+
mode?: PaneMode;
|
|
7
|
+
defaultMode?: any;
|
|
8
|
+
onModeChange?: (mode: PaneMode) => void;
|
|
9
|
+
expandedSize?: number;
|
|
10
|
+
minSize?: number;
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
onExpand?: () => void;
|
|
15
|
+
onCollapse?: () => void;
|
|
16
|
+
onResize?: (size: number) => void;
|
|
17
|
+
resizer?: React.ReactNode;
|
|
18
|
+
onResizeStart?: (size: number) => void;
|
|
19
|
+
onResizeEnd?: (size: number) => void;
|
|
20
|
+
snapPoints?: number[];
|
|
21
|
+
snapTolerance?: number;
|
|
22
|
+
collapseThreshold?: number;
|
|
23
|
+
paneId?: string;
|
|
24
|
+
persistence?: PaneSizePersistence;
|
|
25
|
+
}
|
|
26
|
+
type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & {
|
|
27
|
+
Handle: typeof InspectorHandle;
|
|
28
|
+
};
|
|
29
|
+
export declare const Inspector: InspectorComponent;
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=shell-inspector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-inspector.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3G,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,eAAe,CAAA;CAAE,CAAC;AAEhJ,eAAO,MAAM,SAAS,EA0MjB,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as t from"react";import Q from"classnames";import*as M from"../sheet.js";import{VisuallyHidden as U}from"../visually-hidden.js";import{useShell as X}from"../shell.context.js";import{useResponsivePresentation as Y}from"../shell.hooks.js";import{PaneResizeContext as Z}from"./shell-resize.js";import{InspectorHandle as b,PaneHandle as _}from"./shell-handles.js";import{BREAKPOINTS as ee}from"../shell.types.js";const H=t.forwardRef(({className:N,presentation:A={initial:"overlay",lg:"fixed"},mode:s,defaultMode:p="collapsed",onModeChange:h,expandedSize:u=320,minSize:E=200,maxSize:B=500,resizable:f=!1,collapsible:O=!0,onExpand:x,onCollapse:g,onResize:m,onResizeStart:$,onResizeEnd:D,snapPoints:L,snapTolerance:V,collapseThreshold:K,paneId:y,persistence:P,children:j,style:q,...F},a)=>{const n=X(),v=Y(A),c=v==="overlay",W=v==="stacked",l=t.useRef(null),G=t.useCallback(e=>{l.current=e,typeof a=="function"?a(e):a&&(a.current=e)},[a]),I=t.Children.toArray(j),S=I.filter(e=>t.isValidElement(e)&&e.type===b),C=I.filter(e=>!(t.isValidElement(e)&&e.type===b)),z=t.useCallback(()=>{if(typeof p=="string")return p;const e=p;if(e&&e[n.currentBreakpoint])return e[n.currentBreakpoint];const r=[...Object.keys(ee)].reverse().concat("initial"),R=r.indexOf(n.currentBreakpoint);for(let i=R+1;i<r.length;i++){const w=r[i];if(e&&e[w])return e[w]}return"collapsed"},[p,n.currentBreakpoint]),T=t.useRef(null);t.useEffect(()=>{if(s!==void 0||!n.currentBreakpointReady||T.current===n.currentBreakpoint)return;T.current=n.currentBreakpoint;const e=z();e!==n.inspectorMode&&n.setInspectorMode(e)},[s,n.currentBreakpoint,n.currentBreakpointReady,z,n.inspectorMode,n.setInspectorMode]),t.useEffect(()=>{s!==void 0&&n.inspectorMode!==s&&n.setInspectorMode(s)},[s,n]),t.useEffect(()=>{s===void 0&&h?.(n.inspectorMode)},[n.inspectorMode,s,h]),t.useEffect(()=>{n.inspectorMode==="expanded"?x?.():g?.()},[n.inspectorMode,x,g]);const k=n.inspectorMode==="expanded",d=t.useMemo(()=>{if(!y||P)return P;const e=`kookie-ui:shell:inspector:${y}`;return{load:()=>{if(typeof window>"u")return;const r=window.localStorage.getItem(e);return r?Number(r):void 0},save:r=>{typeof window>"u"||window.localStorage.setItem(e,String(r))}}},[y,P]);t.useEffect(()=>{let e=!0;return(async()=>{if(!f||!d?.load||c)return;const o=await d.load();e&&typeof o=="number"&&l.current&&(l.current.style.setProperty("--inspector-size",`${o}px`),m?.(o))})(),()=>{e=!1}},[f,d,m,c]);const J=f&&!c&&k?t.createElement(Z.Provider,{value:{containerRef:l,cssVarName:"--inspector-size",minSize:E,maxSize:B,defaultSize:u,orientation:"vertical",edge:"start",computeNext:(e,o,r)=>{const R=getComputedStyle(l.current).direction==="rtl",i=e-o;return r+(R?i:-i)},onResize:m,onResizeStart:$,onResizeEnd:e=>{D?.(e),d?.save?.(e)},target:"inspector",collapsible:O,snapPoints:L,snapTolerance:V??8,collapseThreshold:K,requestCollapse:()=>n.setInspectorMode("collapsed"),requestToggle:()=>n.togglePane("inspector")}},S.length>0?S.map((e,o)=>t.cloneElement(e,{key:e.key??o})):t.createElement(_,null)):null;if(c){const e=n.inspectorMode==="expanded";return t.createElement(M.Root,{open:e,onOpenChange:o=>n.setInspectorMode(o?"expanded":"collapsed")},t.createElement(M.Content,{side:"end",style:{padding:0},width:{initial:`${u}px`}},t.createElement(U,null,t.createElement(M.Title,null,"Inspector")),C))}return t.createElement("div",{...F,ref:G,className:Q("rt-ShellInspector",N),"data-mode":n.inspectorMode,"data-peek":n.peekTarget==="inspector"||void 0,"data-presentation":v,"data-open":W&&k||void 0,style:{...q,"--inspector-size":`${u}px`,"--inspector-min-size":`${E}px`,"--inspector-max-size":`${B}px`}},t.createElement("div",{className:"rt-ShellInspectorContent","data-visible":k||void 0},C),J)});H.displayName="Shell.Inspector",H.Handle=b;export{H as Inspector};
|
|
2
|
+
//# sourceMappingURL=shell-inspector.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-inspector.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport * as Sheet from '../sheet.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { useShell } from '../shell.context.js';\nimport { useResponsivePresentation } from '../shell.hooks.js';\nimport { PaneResizeContext } from './shell-resize.js';\nimport { InspectorHandle, PaneHandle } from './shell-handles.js';\nimport { BREAKPOINTS } from '../shell.types.js';\nimport type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';\n\ninterface PaneProps extends React.ComponentPropsWithoutRef<'div'> {\n presentation?: ResponsivePresentation;\n mode?: PaneMode;\n defaultMode?: any;\n onModeChange?: (mode: PaneMode) => void;\n expandedSize?: number;\n minSize?: number;\n maxSize?: number;\n resizable?: boolean;\n collapsible?: boolean;\n onExpand?: () => void;\n onCollapse?: () => void;\n onResize?: (size: number) => void;\n resizer?: React.ReactNode;\n onResizeStart?: (size: number) => void;\n onResizeEnd?: (size: number) => void;\n snapPoints?: number[];\n snapTolerance?: number;\n collapseThreshold?: number;\n paneId?: string;\n persistence?: PaneSizePersistence;\n}\n\ntype InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof InspectorHandle };\n\nexport const Inspector = React.forwardRef<HTMLDivElement, PaneProps>(\n (\n {\n className,\n presentation = { initial: 'overlay', lg: 'fixed' },\n mode,\n defaultMode = 'collapsed',\n onModeChange,\n expandedSize = 320,\n minSize = 200,\n maxSize = 500,\n resizable = false,\n collapsible = true,\n onExpand,\n onCollapse,\n onResize,\n onResizeStart,\n onResizeEnd,\n snapPoints,\n snapTolerance,\n collapseThreshold,\n paneId,\n persistence,\n children,\n style,\n ...props\n },\n ref,\n ) => {\n const shell = useShell();\n const resolvedPresentation = useResponsivePresentation(presentation);\n const isOverlay = resolvedPresentation === 'overlay';\n const isStacked = resolvedPresentation === 'stacked';\n const localRef = React.useRef<HTMLDivElement | null>(null);\n const setRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n localRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref],\n );\n const childArray = React.Children.toArray(children) as React.ReactElement[];\n const handleChildren = childArray.filter((el: React.ReactElement) => React.isValidElement(el) && el.type === InspectorHandle);\n const contentChildren = childArray.filter((el: React.ReactElement) => !(React.isValidElement(el) && el.type === InspectorHandle));\n\n const resolveResponsiveMode = React.useCallback((): PaneMode => {\n if (typeof defaultMode === 'string') return defaultMode as PaneMode;\n const dm = defaultMode as Partial<Record<Breakpoint, PaneMode>> | undefined;\n if (dm && dm[shell.currentBreakpoint as Breakpoint]) {\n return dm[shell.currentBreakpoint as Breakpoint] as PaneMode;\n }\n const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;\n const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);\n const startIdx = order.indexOf(shell.currentBreakpoint as Breakpoint);\n for (let i = startIdx + 1; i < order.length; i++) {\n const bp = order[i];\n if (dm && dm[bp]) {\n return dm[bp] as PaneMode;\n }\n }\n return 'collapsed';\n }, [defaultMode, shell.currentBreakpoint]);\n\n const lastInspectorBpRef = React.useRef<Breakpoint | null>(null);\n React.useEffect(() => {\n if (mode !== undefined) return;\n if (!shell.currentBreakpointReady) return;\n if (lastInspectorBpRef.current === shell.currentBreakpoint) return;\n lastInspectorBpRef.current = shell.currentBreakpoint as Breakpoint;\n const next = resolveResponsiveMode();\n if (next !== shell.inspectorMode) {\n shell.setInspectorMode(next);\n }\n }, [mode, shell.currentBreakpoint, shell.currentBreakpointReady, resolveResponsiveMode, shell.inspectorMode, shell.setInspectorMode]);\n\n React.useEffect(() => {\n if (mode !== undefined && shell.inspectorMode !== mode) {\n shell.setInspectorMode(mode);\n }\n }, [mode, shell]);\n\n React.useEffect(() => {\n if (mode === undefined) {\n onModeChange?.(shell.inspectorMode);\n }\n }, [shell.inspectorMode, mode, onModeChange]);\n\n React.useEffect(() => {\n if (shell.inspectorMode === 'expanded') {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n }, [shell.inspectorMode, onExpand, onCollapse]);\n\n const isExpanded = shell.inspectorMode === 'expanded';\n\n const persistenceAdapter = React.useMemo(() => {\n if (!paneId || persistence) return persistence;\n const key = `kookie-ui:shell:inspector:${paneId}`;\n const adapter: PaneSizePersistence = {\n load: () => {\n if (typeof window === 'undefined') return undefined;\n const v = window.localStorage.getItem(key);\n return v ? Number(v) : undefined;\n },\n save: (size: number) => {\n if (typeof window === 'undefined') return;\n window.localStorage.setItem(key, String(size));\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('--inspector-size', `${loaded}px`);\n onResize?.(loaded);\n }\n })();\n return () => {\n mounted = false;\n };\n }, [resizable, persistenceAdapter, onResize, isOverlay]);\n\n const handleEl =\n resizable && !isOverlay && isExpanded ? (\n <PaneResizeContext.Provider\n value={{\n containerRef: localRef,\n cssVarName: '--inspector-size',\n minSize,\n maxSize,\n defaultSize: expandedSize,\n orientation: 'vertical',\n edge: 'start',\n computeNext: (client, startClient, startSize) => {\n const isRtl = getComputedStyle(localRef.current!).direction === 'rtl';\n const delta = client - startClient;\n return startSize + (isRtl ? delta : -delta);\n },\n onResize,\n onResizeStart,\n onResizeEnd: (size) => {\n onResizeEnd?.(size);\n persistenceAdapter?.save?.(size);\n },\n target: 'inspector',\n collapsible,\n snapPoints,\n snapTolerance: snapTolerance ?? 8,\n collapseThreshold,\n requestCollapse: () => shell.setInspectorMode('collapsed'),\n requestToggle: () => shell.togglePane('inspector'),\n }}\n >\n {handleChildren.length > 0 ? handleChildren.map((el, i) => React.cloneElement(el, { key: el.key ?? i })) : <PaneHandle />}\n </PaneResizeContext.Provider>\n ) : null;\n\n if (isOverlay) {\n const open = shell.inspectorMode === 'expanded';\n return (\n <Sheet.Root open={open} onOpenChange={(o) => shell.setInspectorMode(o ? 'expanded' : 'collapsed')}>\n <Sheet.Content side=\"end\" style={{ padding: 0 }} width={{ initial: `${expandedSize}px` }}>\n <VisuallyHidden>\n <Sheet.Title>Inspector</Sheet.Title>\n </VisuallyHidden>\n {contentChildren}\n </Sheet.Content>\n </Sheet.Root>\n );\n }\n\n return (\n <div\n {...props}\n ref={setRef}\n className={classNames('rt-ShellInspector', className)}\n data-mode={shell.inspectorMode}\n data-peek={shell.peekTarget === 'inspector' || undefined}\n data-presentation={resolvedPresentation}\n data-open={(isStacked && isExpanded) || undefined}\n style={{\n ...style,\n ['--inspector-size' as any]: `${expandedSize}px`,\n ['--inspector-min-size' as any]: `${minSize}px`,\n ['--inspector-max-size' as any]: `${maxSize}px`,\n }}\n >\n <div className=\"rt-ShellInspectorContent\" data-visible={isExpanded || undefined}>\n {contentChildren}\n </div>\n {handleEl}\n </div>\n );\n },\n) as InspectorComponent;\n\nInspector.displayName = 'Shell.Inspector';\nInspector.Handle = InspectorHandle;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "classNames", "Sheet", "VisuallyHidden", "useShell", "useResponsivePresentation", "PaneResizeContext", "InspectorHandle", "PaneHandle", "BREAKPOINTS", "Inspector", "className", "presentation", "mode", "defaultMode", "onModeChange", "expandedSize", "minSize", "maxSize", "resizable", "collapsible", "onExpand", "onCollapse", "onResize", "onResizeStart", "onResizeEnd", "snapPoints", "snapTolerance", "collapseThreshold", "paneId", "persistence", "children", "style", "props", "ref", "shell", "resolvedPresentation", "isOverlay", "isStacked", "localRef", "setRef", "node", "childArray", "handleChildren", "el", "contentChildren", "resolveResponsiveMode", "dm", "order", "startIdx", "bp", "lastInspectorBpRef", "next", "isExpanded", "persistenceAdapter", "key", "v", "size", "mounted", "loaded", "handleEl", "client", "startClient", "startSize", "isRtl", "delta", "i", "open"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface PaneResizeContextValue {
|
|
3
|
+
containerRef: React.RefObject<HTMLDivElement | null>;
|
|
4
|
+
cssVarName: string;
|
|
5
|
+
minSize: number;
|
|
6
|
+
maxSize: number;
|
|
7
|
+
defaultSize: number;
|
|
8
|
+
orientation: 'vertical' | 'horizontal';
|
|
9
|
+
edge: 'start' | 'end';
|
|
10
|
+
computeNext: (clientPos: number, startClientPos: number, startSize: number) => number;
|
|
11
|
+
onResize?: (size: number) => void;
|
|
12
|
+
onResizeStart?: (size: number) => void;
|
|
13
|
+
onResizeEnd?: (size: number) => void;
|
|
14
|
+
target: 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
|
|
15
|
+
collapsible: boolean;
|
|
16
|
+
snapPoints?: number[];
|
|
17
|
+
snapTolerance: number;
|
|
18
|
+
collapseThreshold?: number;
|
|
19
|
+
requestCollapse?: () => void;
|
|
20
|
+
requestToggle?: () => void;
|
|
21
|
+
}
|
|
22
|
+
export declare const PaneResizeContext: React.Context<PaneResizeContextValue | null>;
|
|
23
|
+
export declare function usePaneResize(): PaneResizeContextValue;
|
|
24
|
+
//# sourceMappingURL=shell-resize.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-resize.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-resize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC,IAAI,EAAE,OAAO,GAAG,KAAK,CAAC;IACtB,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACtF,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IACvE,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,8CAA2D,CAAC;AAE1F,wBAAgB,aAAa,2BAI5B"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/components/_internal/shell-resize.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\n\nexport interface PaneResizeContextValue {\n containerRef: React.RefObject<HTMLDivElement | null>;\n cssVarName: string;\n minSize: number;\n maxSize: number;\n defaultSize: number;\n orientation: 'vertical' | 'horizontal';\n edge: 'start' | 'end';\n computeNext: (clientPos: number, startClientPos: number, startSize: number) => number;\n onResize?: (size: number) => void;\n onResizeStart?: (size: number) => void;\n onResizeEnd?: (size: number) => void;\n target: 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n collapsible: boolean;\n snapPoints?: number[];\n snapTolerance: number;\n collapseThreshold?: number;\n requestCollapse?: () => void;\n requestToggle?: () => void;\n}\n\nexport const PaneResizeContext = React.createContext<PaneResizeContextValue | null>(null);\n\nexport function usePaneResize() {\n const ctx = React.useContext(PaneResizeContext);\n if (!ctx) throw new Error('Shell.Handle must be used within a resizable pane');\n return ctx;\n}\n"],
|
|
5
|
+
"mappings": "AAAA,UAAYA,MAAW,QAuBhB,MAAMC,EAAoBD,EAAM,cAA6C,IAAI,EAEjF,SAASE,GAAgB,CAC9B,MAAMC,EAAMH,EAAM,WAAWC,CAAiB,EAC9C,GAAI,CAACE,EAAK,MAAM,IAAI,MAAM,mDAAmD,EAC7E,OAAOA,CACT",
|
|
6
|
+
"names": ["React", "PaneResizeContext", "usePaneResize", "ctx"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { SidebarHandle } from './shell-handles.js';
|
|
3
|
+
import type { PaneMode, PaneSizePersistence, ResponsivePresentation, ResponsiveSidebarMode, SidebarMode } from '../shell.types.js';
|
|
4
|
+
interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
5
|
+
presentation?: ResponsivePresentation;
|
|
6
|
+
mode?: PaneMode;
|
|
7
|
+
defaultMode?: any;
|
|
8
|
+
onModeChange?: (mode: PaneMode | SidebarMode) => void;
|
|
9
|
+
expandedSize?: number;
|
|
10
|
+
minSize?: number;
|
|
11
|
+
maxSize?: number;
|
|
12
|
+
resizable?: boolean;
|
|
13
|
+
collapsible?: boolean;
|
|
14
|
+
onExpand?: () => void;
|
|
15
|
+
onCollapse?: () => void;
|
|
16
|
+
onResize?: (size: number) => void;
|
|
17
|
+
resizer?: React.ReactNode;
|
|
18
|
+
onResizeStart?: (size: number) => void;
|
|
19
|
+
onResizeEnd?: (size: number) => void;
|
|
20
|
+
snapPoints?: number[];
|
|
21
|
+
snapTolerance?: number;
|
|
22
|
+
collapseThreshold?: number;
|
|
23
|
+
paneId?: string;
|
|
24
|
+
persistence?: PaneSizePersistence;
|
|
25
|
+
}
|
|
26
|
+
type SidebarComponent = React.ForwardRefExoticComponent<Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {
|
|
27
|
+
mode?: SidebarMode;
|
|
28
|
+
defaultMode?: ResponsiveSidebarMode;
|
|
29
|
+
onModeChange?: (mode: SidebarMode) => void;
|
|
30
|
+
thinSize?: number;
|
|
31
|
+
toggleModes?: 'both' | 'single';
|
|
32
|
+
} & React.RefAttributes<HTMLDivElement>> & {
|
|
33
|
+
Handle: typeof SidebarHandle;
|
|
34
|
+
};
|
|
35
|
+
export declare const Sidebar: SidebarComponent;
|
|
36
|
+
export {};
|
|
37
|
+
//# sourceMappingURL=shell-sidebar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,aAAa,EAAc,MAAM,oBAAoB,CAAC;AAC/D,OAAO,KAAK,EAAc,QAAQ,EAAE,mBAAmB,EAAqB,sBAAsB,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGlK,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,yBAAyB,CACrD,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACjC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACxC,GAAG;IAAE,MAAM,EAAE,OAAO,aAAa,CAAA;CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAkUf,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as r from"react";import ae from"classnames";import*as C from"../sheet.js";import{VisuallyHidden as ie}from"../visually-hidden.js";import{useShell as L}from"../shell.context.js";import{useResponsivePresentation as oe}from"../shell.hooks.js";import{PaneResizeContext as se}from"./shell-resize.js";import{SidebarHandle as E,PaneHandle as de}from"./shell-handles.js";import{BREAKPOINTS as le}from"../shell.types.js";const K=r.forwardRef(({className:j,presentation:q={initial:"overlay",md:"fixed"},mode:i,defaultMode:c="expanded",onModeChange:x,expandedSize:s=288,minSize:B=200,maxSize:w=400,resizable:S=!1,collapsible:F=!0,onExpand:T,onCollapse:H,onResize:y,onResizeStart:W,onResizeEnd:G,snapPoints:J,snapTolerance:Q,collapseThreshold:U,paneId:g,persistence:v,children:X,style:Y,thinSize:b=64,toggleModes:R,...Z},f)=>{const t=L(),P=oe(q),d=P==="overlay",_=P==="stacked",l=t.sidebarPhase;r.useLayoutEffect(()=>{if(d)return;const e=u.current;if(e){if(l==="hiding")try{const a=e.getBoundingClientRect();e.style.width=`${Math.round(a.width)}px`}catch{}else if(l==="resizing")try{e.style.removeProperty("width")}catch{}else if(l==="idle")try{e.style.removeProperty("width")}catch{}}},[l,d]);const u=r.useRef(null),ee=r.useCallback(e=>{u.current=e,typeof f=="function"?f(e):f&&(f.current=e)},[f]),z=r.Children.toArray(X),O=z.filter(e=>r.isValidElement(e)&&e.type===E),N=z.filter(e=>!(r.isValidElement(e)&&e.type===E)),te=r.useId();r.useEffect(()=>(t.setHasSidebar(!0),()=>{t.setHasSidebar(!1)}),[t,te]);const $=r.useRef(!1);r.useEffect(()=>{$.current||($.current=!0,i===void 0&&t.sidebarMode!==c&&t.setSidebarMode(c))},[]),r.useEffect(()=>{i!==void 0&&t.sidebarMode!==i&&t.setSidebarMode(i)},[i,t]),r.useEffect(()=>{i===void 0&&x?.(t.sidebarMode)},[t.sidebarMode,i,x]),r.useEffect(()=>{t.sidebarMode==="expanded"?T?.():H?.()},[t.sidebarMode,T,H]);const A=t.sidebarMode!=="collapsed",m=r.useMemo(()=>{if(!g||v)return v;const e=`kookie-ui:shell:sidebar:${g}`;return{load:()=>{if(typeof window>"u")return;const n=window.localStorage.getItem(e);return n?Number(n):void 0},save:n=>{typeof window>"u"||window.localStorage.setItem(e,String(n))}}},[g,v]);r.useEffect(()=>{let e=!0;return(async()=>{if(!S||!m?.load||d)return;const a=await m.load();e&&typeof a=="number"&&u.current&&(u.current.style.setProperty("--sidebar-size",`${a}px`),y?.(a))})(),()=>{e=!1}},[S,m,y,d]);const M=r.useCallback(()=>{if(typeof c=="string")return c;const e=c;if(e&&e[t.currentBreakpoint])return e[t.currentBreakpoint];const n=[...Object.keys(le)].reverse().concat("initial"),o=n.indexOf(t.currentBreakpoint);for(let p=o+1;p<n.length;p++){const D=n[p];if(e&&e[D])return e[D]}return"collapsed"},[c,t.currentBreakpoint]),h=L(),k=r.useCallback(()=>{const e=M();return e==="thin"||e==="expanded"?e:"expanded"},[M]);r.useEffect(()=>{if(!h.setSidebarToggleComputer)return;const e=R??"both",a=n=>{if(e==="both")return n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed";const o=k();return n==="collapsed"?o:n===o?"collapsed":o};return h.setSidebarToggleComputer(a),()=>{h.setSidebarToggleComputer?.(n=>n==="collapsed"?"thin":n==="thin"?"expanded":"collapsed")}},[h,R,k]);const I=r.useRef(s),re=r.useRef("expanded");r.useEffect(()=>{t.sidebarMode!=="collapsed"&&(re.current=t.sidebarMode,I.current=t.sidebarMode==="thin"?b:s)},[t.sidebarMode,b,s]);const V=r.useRef(null);r.useEffect(()=>{if(i!==void 0||!t.currentBreakpointReady||V.current===t.currentBreakpoint)return;V.current=t.currentBreakpoint;const e=M();e!==t.sidebarMode&&t.setSidebarMode(e)},[i,t.currentBreakpoint,t.currentBreakpointReady,M,t.sidebarMode,t.setSidebarMode]);const ne=S&&!d&&t.sidebarMode==="expanded"?r.createElement(se.Provider,{value:{containerRef:u,cssVarName:"--sidebar-size",minSize:B,maxSize:w,defaultSize:s,orientation:"vertical",edge:"end",computeNext:(e,a,n)=>{const o=getComputedStyle(u.current).direction==="rtl",p=e-a;return n+(o?-p:p)},onResize:y,onResizeStart:W,onResizeEnd:e=>{G?.(e),m?.save?.(e)},target:"sidebar",collapsible:F,snapPoints:J,snapTolerance:Q??8,collapseThreshold:U,requestCollapse:()=>t.setSidebarMode("collapsed"),requestToggle:()=>t.togglePane("sidebar")}},O.length>0?O.map((e,a)=>r.cloneElement(e,{key:e.key??a})):r.createElement(de,null)):null;if(d){const e=t.sidebarMode!=="collapsed";return r.createElement(C.Root,{open:e,onOpenChange:a=>t.setSidebarMode(a?"expanded":"collapsed")},r.createElement(C.Content,{side:"start",style:{padding:0},width:{initial:`${e?t.sidebarMode==="thin"?b:s:I.current}px`}},r.createElement(ie,null,r.createElement(C.Title,null,"Sidebar")),N))}return r.createElement("div",{...Z,ref:ee,className:ae("rt-ShellSidebar",j),"data-mode":t.sidebarMode,"data-peek":t.peekTarget==="sidebar"||void 0,"data-presentation":P,"data-open":_&&A||void 0,style:{...Y,"--sidebar-size":`${s}px`,"--sidebar-thin-size":`${b}px`,"--sidebar-min-size":`${B}px`,"--sidebar-max-size":`${w}px`,...t.peekTarget==="sidebar"&&t.sidebarMode==="collapsed"&&!d?(()=>{const e=R??"both",a=t.sidebarMode;let n;if(e==="both")n=a==="collapsed"?"thin":a==="thin"?"expanded":"collapsed";else{const o=k();n=a==="collapsed"?o:"collapsed"}return n==="thin"?{"--peek-sidebar-width":`${b}px`}:{"--peek-sidebar-width":`var(--sidebar-size, ${s}px)`}})():{}}},r.createElement("div",{className:"rt-ShellSidebarContent","data-visible":A||void 0,"data-phase":l&&l!=="idle"?l:void 0},N),ne)});K.displayName="Shell.Sidebar",K.Handle=E;export{K as Sidebar};
|
|
2
|
+
//# sourceMappingURL=shell-sidebar.js.map
|