@uipath/apollo-wind 2.64.0 → 2.65.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/index.cjs +101 -90
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/components/ui/index.js +1 -0
- package/dist/components/ui/json-tree-view/JsonTree.cjs +1 -1
- package/dist/components/ui/json-tree-view/JsonTree.d.ts +2 -2
- package/dist/components/ui/json-tree-view/JsonTree.js +1 -1
- package/dist/components/ui/json-tree-view/JsonTree.types.d.ts +6 -0
- package/dist/components/ui/json-tree-view/JsonTreeRow.cjs +1 -1
- package/dist/components/ui/json-tree-view/JsonTreeRow.d.ts +2 -2
- package/dist/components/ui/json-tree-view/JsonTreeRow.js +1 -1
- package/dist/components/ui/sidebar/index.cjs +113 -0
- package/dist/components/ui/sidebar/index.d.ts +10 -0
- package/dist/components/ui/sidebar/index.js +7 -0
- package/dist/components/ui/sidebar/sidebar-context.cjs +151 -0
- package/dist/components/ui/sidebar/sidebar-context.d.ts +39 -0
- package/dist/components/ui/sidebar/sidebar-context.js +108 -0
- package/dist/components/ui/sidebar/sidebar-group.cjs +87 -0
- package/dist/components/ui/sidebar/sidebar-group.d.ts +10 -0
- package/dist/components/ui/sidebar/sidebar-group.js +44 -0
- package/dist/components/ui/sidebar/sidebar-layout.cjs +92 -0
- package/dist/components/ui/sidebar/sidebar-layout.d.ts +7 -0
- package/dist/components/ui/sidebar/sidebar-layout.js +46 -0
- package/dist/components/ui/sidebar/sidebar-menu-sub.cjs +79 -0
- package/dist/components/ui/sidebar/sidebar-menu-sub.d.ts +11 -0
- package/dist/components/ui/sidebar/sidebar-menu-sub.js +39 -0
- package/dist/components/ui/sidebar/sidebar-menu.cjs +185 -0
- package/dist/components/ui/sidebar/sidebar-menu.d.ts +26 -0
- package/dist/components/ui/sidebar/sidebar-menu.js +133 -0
- package/dist/components/ui/sidebar/sidebar.cjs +220 -0
- package/dist/components/ui/sidebar/sidebar.d.ts +22 -0
- package/dist/components/ui/sidebar/sidebar.js +177 -0
- package/dist/index.cjs +94 -18
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -1
- package/dist/styles.css +626 -0
- package/package.json +1 -1
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
(()=>{
|
|
5
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
6
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: definition[key]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
14
|
+
})();
|
|
15
|
+
(()=>{
|
|
16
|
+
__webpack_require__.r = (exports1)=>{
|
|
17
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
18
|
+
value: 'Module'
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
21
|
+
value: true
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
var __webpack_exports__ = {};
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
28
|
+
Sidebar: ()=>Sidebar,
|
|
29
|
+
SidebarRail: ()=>SidebarRail,
|
|
30
|
+
SidebarTrigger: ()=>SidebarTrigger,
|
|
31
|
+
SidebarInset: ()=>SidebarInset
|
|
32
|
+
});
|
|
33
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
34
|
+
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
35
|
+
const external_react_namespaceObject = require("react");
|
|
36
|
+
const external_button_cjs_namespaceObject = require("../button.cjs");
|
|
37
|
+
const external_sheet_cjs_namespaceObject = require("../sheet.cjs");
|
|
38
|
+
const index_cjs_namespaceObject = require("../../../lib/index.cjs");
|
|
39
|
+
const external_sidebar_context_cjs_namespaceObject = require("./sidebar-context.cjs");
|
|
40
|
+
const HIDING_ATTRIBUTES = [
|
|
41
|
+
{
|
|
42
|
+
name: 'inert',
|
|
43
|
+
value: ''
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: 'aria-hidden',
|
|
47
|
+
value: 'true'
|
|
48
|
+
}
|
|
49
|
+
];
|
|
50
|
+
const Sidebar = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref)=>{
|
|
51
|
+
const { isMobile, state, openMobile, setOpenMobile } = (0, external_sidebar_context_cjs_namespaceObject.useSidebar)();
|
|
52
|
+
const containerRef = external_react_namespaceObject.useRef(null);
|
|
53
|
+
const setContainerRef = external_react_namespaceObject.useMemo(()=>(0, index_cjs_namespaceObject.composeRefs)(containerRef, ref), [
|
|
54
|
+
ref
|
|
55
|
+
]);
|
|
56
|
+
const hiddenOffcanvas = 'offcanvas' === collapsible && 'collapsed' === state;
|
|
57
|
+
external_react_namespaceObject.useEffect(()=>{
|
|
58
|
+
const inner = containerRef.current?.querySelector('[data-slot="sidebar-inner"]');
|
|
59
|
+
if (!inner || isMobile) return;
|
|
60
|
+
const sync = ()=>{
|
|
61
|
+
for (const child of Array.from(inner.children))if (!child.matches('[data-sidebar="rail"]')) for (const attr of HIDING_ATTRIBUTES){
|
|
62
|
+
const marker = `data-sidebar-set-${attr.name}`;
|
|
63
|
+
if (hiddenOffcanvas) {
|
|
64
|
+
if (!child.hasAttribute(attr.name)) {
|
|
65
|
+
child.setAttribute(attr.name, attr.value);
|
|
66
|
+
child.setAttribute(marker, '');
|
|
67
|
+
}
|
|
68
|
+
} else if (child.hasAttribute(marker)) {
|
|
69
|
+
child.removeAttribute(attr.name);
|
|
70
|
+
child.removeAttribute(marker);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
sync();
|
|
75
|
+
if (!hiddenOffcanvas || "u" < typeof MutationObserver) return;
|
|
76
|
+
const observer = new MutationObserver(sync);
|
|
77
|
+
observer.observe(inner, {
|
|
78
|
+
childList: true
|
|
79
|
+
});
|
|
80
|
+
return ()=>observer.disconnect();
|
|
81
|
+
}, [
|
|
82
|
+
hiddenOffcanvas,
|
|
83
|
+
isMobile
|
|
84
|
+
]);
|
|
85
|
+
if ('none' === collapsible) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
86
|
+
ref: ref,
|
|
87
|
+
"data-slot": "sidebar",
|
|
88
|
+
"data-sidebar": "sidebar",
|
|
89
|
+
className: (0, index_cjs_namespaceObject.cn)('flex h-full w-(--sidebar-width) flex-col text-foreground', className),
|
|
90
|
+
...props,
|
|
91
|
+
children: children
|
|
92
|
+
});
|
|
93
|
+
if (isMobile) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_sheet_cjs_namespaceObject.Sheet, {
|
|
94
|
+
open: openMobile,
|
|
95
|
+
onOpenChange: setOpenMobile,
|
|
96
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_sheet_cjs_namespaceObject.SheetContent, {
|
|
97
|
+
ref: ref,
|
|
98
|
+
...props,
|
|
99
|
+
"data-sidebar": "sidebar",
|
|
100
|
+
"data-slot": "sidebar",
|
|
101
|
+
"data-mobile": "true",
|
|
102
|
+
className: (0, index_cjs_namespaceObject.cn)('w-(--sidebar-width) max-w-none bg-surface p-0 text-foreground sm:max-w-none [&>button]:hidden', className),
|
|
103
|
+
style: {
|
|
104
|
+
'--sidebar-width': external_sidebar_context_cjs_namespaceObject.SIDEBAR_WIDTH_MOBILE,
|
|
105
|
+
...props.style
|
|
106
|
+
},
|
|
107
|
+
side: side,
|
|
108
|
+
children: [
|
|
109
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_sheet_cjs_namespaceObject.SheetHeader, {
|
|
110
|
+
className: "sr-only",
|
|
111
|
+
children: [
|
|
112
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_sheet_cjs_namespaceObject.SheetTitle, {
|
|
113
|
+
children: "Sidebar"
|
|
114
|
+
}),
|
|
115
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_sheet_cjs_namespaceObject.SheetDescription, {
|
|
116
|
+
children: "Displays the mobile sidebar."
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
}),
|
|
120
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
121
|
+
className: "flex h-full w-full flex-col",
|
|
122
|
+
children: children
|
|
123
|
+
})
|
|
124
|
+
]
|
|
125
|
+
})
|
|
126
|
+
});
|
|
127
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
128
|
+
className: "group peer hidden text-foreground data-[side=right]:order-last md:block",
|
|
129
|
+
"data-state": state,
|
|
130
|
+
"data-collapsible": 'collapsed' === state ? collapsible : '',
|
|
131
|
+
"data-variant": variant,
|
|
132
|
+
"data-side": side,
|
|
133
|
+
"data-slot": "sidebar",
|
|
134
|
+
children: [
|
|
135
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
136
|
+
"data-slot": "sidebar-gap",
|
|
137
|
+
className: (0, index_cjs_namespaceObject.cn)('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', 'floating' === variant || 'inset' === variant ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)')
|
|
138
|
+
}),
|
|
139
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
140
|
+
ref: setContainerRef,
|
|
141
|
+
"data-slot": "sidebar-container",
|
|
142
|
+
className: (0, index_cjs_namespaceObject.cn)('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', 'left' === side ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 'floating' === variant || 'inset' === variant ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' : 'border-border-subtle group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className),
|
|
143
|
+
...props,
|
|
144
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
145
|
+
"data-sidebar": "sidebar",
|
|
146
|
+
"data-slot": "sidebar-inner",
|
|
147
|
+
className: "flex h-full w-full flex-col bg-surface group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow-sm",
|
|
148
|
+
children: children
|
|
149
|
+
})
|
|
150
|
+
})
|
|
151
|
+
]
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
Sidebar.displayName = 'Sidebar';
|
|
155
|
+
const SidebarTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, onClick, ...props }, ref)=>{
|
|
156
|
+
const { toggleSidebar, open, openMobile, isMobile } = (0, external_sidebar_context_cjs_namespaceObject.useSidebar)();
|
|
157
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
|
|
158
|
+
ref: ref,
|
|
159
|
+
"aria-expanded": isMobile ? openMobile : open,
|
|
160
|
+
"data-sidebar": "trigger",
|
|
161
|
+
"data-slot": "sidebar-trigger",
|
|
162
|
+
variant: "ghost",
|
|
163
|
+
size: "2xs",
|
|
164
|
+
icon: true,
|
|
165
|
+
className: className,
|
|
166
|
+
onClick: (event)=>{
|
|
167
|
+
onClick?.(event);
|
|
168
|
+
toggleSidebar();
|
|
169
|
+
},
|
|
170
|
+
...props,
|
|
171
|
+
children: [
|
|
172
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.PanelLeftIcon, {}),
|
|
173
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
174
|
+
className: "sr-only",
|
|
175
|
+
children: "Toggle Sidebar"
|
|
176
|
+
})
|
|
177
|
+
]
|
|
178
|
+
});
|
|
179
|
+
});
|
|
180
|
+
SidebarTrigger.displayName = 'SidebarTrigger';
|
|
181
|
+
const SidebarRail = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, onClick, ...props }, ref)=>{
|
|
182
|
+
const { toggleSidebar, open } = (0, external_sidebar_context_cjs_namespaceObject.useSidebar)();
|
|
183
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
184
|
+
ref: ref,
|
|
185
|
+
"aria-expanded": open,
|
|
186
|
+
type: "button",
|
|
187
|
+
"data-sidebar": "rail",
|
|
188
|
+
"data-slot": "sidebar-rail",
|
|
189
|
+
"aria-label": "Toggle Sidebar",
|
|
190
|
+
tabIndex: -1,
|
|
191
|
+
onClick: (event)=>{
|
|
192
|
+
onClick?.(event);
|
|
193
|
+
toggleSidebar();
|
|
194
|
+
},
|
|
195
|
+
title: "Toggle Sidebar",
|
|
196
|
+
className: (0, index_cjs_namespaceObject.cn)('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border-subtle md:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className),
|
|
197
|
+
...props
|
|
198
|
+
});
|
|
199
|
+
});
|
|
200
|
+
SidebarRail.displayName = 'SidebarRail';
|
|
201
|
+
const SidebarInset = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
|
|
202
|
+
ref: ref,
|
|
203
|
+
"data-slot": "sidebar-inset",
|
|
204
|
+
className: (0, index_cjs_namespaceObject.cn)('relative flex w-full flex-1 flex-col bg-background', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', 'md:peer-data-[variant=inset]:peer-data-[side=right]:mr-0 md:peer-data-[variant=inset]:peer-data-[side=right]:ml-2 md:peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2', className),
|
|
205
|
+
...props
|
|
206
|
+
}));
|
|
207
|
+
SidebarInset.displayName = 'SidebarInset';
|
|
208
|
+
exports.Sidebar = __webpack_exports__.Sidebar;
|
|
209
|
+
exports.SidebarInset = __webpack_exports__.SidebarInset;
|
|
210
|
+
exports.SidebarRail = __webpack_exports__.SidebarRail;
|
|
211
|
+
exports.SidebarTrigger = __webpack_exports__.SidebarTrigger;
|
|
212
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
213
|
+
"Sidebar",
|
|
214
|
+
"SidebarInset",
|
|
215
|
+
"SidebarRail",
|
|
216
|
+
"SidebarTrigger"
|
|
217
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
218
|
+
Object.defineProperty(exports, '__esModule', {
|
|
219
|
+
value: true
|
|
220
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface SidebarProps extends React.ComponentProps<'div'> {
|
|
3
|
+
side?: 'left' | 'right';
|
|
4
|
+
variant?: 'sidebar' | 'floating' | 'inset';
|
|
5
|
+
/**
|
|
6
|
+
* - `offcanvas`: slides fully out of view when collapsed.
|
|
7
|
+
* - `icon`: collapses to an icon rail.
|
|
8
|
+
* - `none`: static panel for embedding (dialogs, split panes).
|
|
9
|
+
*/
|
|
10
|
+
collapsible?: 'offcanvas' | 'icon' | 'none';
|
|
11
|
+
}
|
|
12
|
+
declare const Sidebar: React.ForwardRefExoticComponent<Omit<SidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("../button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
/**
|
|
15
|
+
* A thin, pointer-only toggle along the sidebar's edge. It's left out of the tab
|
|
16
|
+
* order on purpose (as in shadcn), so it doesn't add an invisible tab stop beside
|
|
17
|
+
* every sidebar. Keyboard users toggle with `SidebarTrigger`, so a layout should
|
|
18
|
+
* always include one. The rail still reports `aria-expanded` for assistive tech.
|
|
19
|
+
*/
|
|
20
|
+
declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
22
|
+
export { Sidebar, SidebarInset, SidebarRail, SidebarTrigger };
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { PanelLeftIcon } from "lucide-react";
|
|
4
|
+
import { forwardRef, useEffect, useMemo, useRef } from "react";
|
|
5
|
+
import { Button } from "../button.js";
|
|
6
|
+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../sheet.js";
|
|
7
|
+
import { cn, composeRefs } from "../../../lib/index.js";
|
|
8
|
+
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./sidebar-context.js";
|
|
9
|
+
const HIDING_ATTRIBUTES = [
|
|
10
|
+
{
|
|
11
|
+
name: 'inert',
|
|
12
|
+
value: ''
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: 'aria-hidden',
|
|
16
|
+
value: 'true'
|
|
17
|
+
}
|
|
18
|
+
];
|
|
19
|
+
const Sidebar = /*#__PURE__*/ forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref)=>{
|
|
20
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
21
|
+
const containerRef = useRef(null);
|
|
22
|
+
const setContainerRef = useMemo(()=>composeRefs(containerRef, ref), [
|
|
23
|
+
ref
|
|
24
|
+
]);
|
|
25
|
+
const hiddenOffcanvas = 'offcanvas' === collapsible && 'collapsed' === state;
|
|
26
|
+
useEffect(()=>{
|
|
27
|
+
const inner = containerRef.current?.querySelector('[data-slot="sidebar-inner"]');
|
|
28
|
+
if (!inner || isMobile) return;
|
|
29
|
+
const sync = ()=>{
|
|
30
|
+
for (const child of Array.from(inner.children))if (!child.matches('[data-sidebar="rail"]')) for (const attr of HIDING_ATTRIBUTES){
|
|
31
|
+
const marker = `data-sidebar-set-${attr.name}`;
|
|
32
|
+
if (hiddenOffcanvas) {
|
|
33
|
+
if (!child.hasAttribute(attr.name)) {
|
|
34
|
+
child.setAttribute(attr.name, attr.value);
|
|
35
|
+
child.setAttribute(marker, '');
|
|
36
|
+
}
|
|
37
|
+
} else if (child.hasAttribute(marker)) {
|
|
38
|
+
child.removeAttribute(attr.name);
|
|
39
|
+
child.removeAttribute(marker);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
sync();
|
|
44
|
+
if (!hiddenOffcanvas || "u" < typeof MutationObserver) return;
|
|
45
|
+
const observer = new MutationObserver(sync);
|
|
46
|
+
observer.observe(inner, {
|
|
47
|
+
childList: true
|
|
48
|
+
});
|
|
49
|
+
return ()=>observer.disconnect();
|
|
50
|
+
}, [
|
|
51
|
+
hiddenOffcanvas,
|
|
52
|
+
isMobile
|
|
53
|
+
]);
|
|
54
|
+
if ('none' === collapsible) return /*#__PURE__*/ jsx("div", {
|
|
55
|
+
ref: ref,
|
|
56
|
+
"data-slot": "sidebar",
|
|
57
|
+
"data-sidebar": "sidebar",
|
|
58
|
+
className: cn('flex h-full w-(--sidebar-width) flex-col text-foreground', className),
|
|
59
|
+
...props,
|
|
60
|
+
children: children
|
|
61
|
+
});
|
|
62
|
+
if (isMobile) return /*#__PURE__*/ jsx(Sheet, {
|
|
63
|
+
open: openMobile,
|
|
64
|
+
onOpenChange: setOpenMobile,
|
|
65
|
+
children: /*#__PURE__*/ jsxs(SheetContent, {
|
|
66
|
+
ref: ref,
|
|
67
|
+
...props,
|
|
68
|
+
"data-sidebar": "sidebar",
|
|
69
|
+
"data-slot": "sidebar",
|
|
70
|
+
"data-mobile": "true",
|
|
71
|
+
className: cn('w-(--sidebar-width) max-w-none bg-surface p-0 text-foreground sm:max-w-none [&>button]:hidden', className),
|
|
72
|
+
style: {
|
|
73
|
+
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
|
74
|
+
...props.style
|
|
75
|
+
},
|
|
76
|
+
side: side,
|
|
77
|
+
children: [
|
|
78
|
+
/*#__PURE__*/ jsxs(SheetHeader, {
|
|
79
|
+
className: "sr-only",
|
|
80
|
+
children: [
|
|
81
|
+
/*#__PURE__*/ jsx(SheetTitle, {
|
|
82
|
+
children: "Sidebar"
|
|
83
|
+
}),
|
|
84
|
+
/*#__PURE__*/ jsx(SheetDescription, {
|
|
85
|
+
children: "Displays the mobile sidebar."
|
|
86
|
+
})
|
|
87
|
+
]
|
|
88
|
+
}),
|
|
89
|
+
/*#__PURE__*/ jsx("div", {
|
|
90
|
+
className: "flex h-full w-full flex-col",
|
|
91
|
+
children: children
|
|
92
|
+
})
|
|
93
|
+
]
|
|
94
|
+
})
|
|
95
|
+
});
|
|
96
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
97
|
+
className: "group peer hidden text-foreground data-[side=right]:order-last md:block",
|
|
98
|
+
"data-state": state,
|
|
99
|
+
"data-collapsible": 'collapsed' === state ? collapsible : '',
|
|
100
|
+
"data-variant": variant,
|
|
101
|
+
"data-side": side,
|
|
102
|
+
"data-slot": "sidebar",
|
|
103
|
+
children: [
|
|
104
|
+
/*#__PURE__*/ jsx("div", {
|
|
105
|
+
"data-slot": "sidebar-gap",
|
|
106
|
+
className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', 'floating' === variant || 'inset' === variant ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)')
|
|
107
|
+
}),
|
|
108
|
+
/*#__PURE__*/ jsx("div", {
|
|
109
|
+
ref: setContainerRef,
|
|
110
|
+
"data-slot": "sidebar-container",
|
|
111
|
+
className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex', 'left' === side ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 'floating' === variant || 'inset' === variant ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' : 'border-border-subtle group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className),
|
|
112
|
+
...props,
|
|
113
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
114
|
+
"data-sidebar": "sidebar",
|
|
115
|
+
"data-slot": "sidebar-inner",
|
|
116
|
+
className: "flex h-full w-full flex-col bg-surface group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border-subtle group-data-[variant=floating]:shadow-sm",
|
|
117
|
+
children: children
|
|
118
|
+
})
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
Sidebar.displayName = 'Sidebar';
|
|
124
|
+
const SidebarTrigger = /*#__PURE__*/ forwardRef(({ className, onClick, ...props }, ref)=>{
|
|
125
|
+
const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
|
|
126
|
+
return /*#__PURE__*/ jsxs(Button, {
|
|
127
|
+
ref: ref,
|
|
128
|
+
"aria-expanded": isMobile ? openMobile : open,
|
|
129
|
+
"data-sidebar": "trigger",
|
|
130
|
+
"data-slot": "sidebar-trigger",
|
|
131
|
+
variant: "ghost",
|
|
132
|
+
size: "2xs",
|
|
133
|
+
icon: true,
|
|
134
|
+
className: className,
|
|
135
|
+
onClick: (event)=>{
|
|
136
|
+
onClick?.(event);
|
|
137
|
+
toggleSidebar();
|
|
138
|
+
},
|
|
139
|
+
...props,
|
|
140
|
+
children: [
|
|
141
|
+
/*#__PURE__*/ jsx(PanelLeftIcon, {}),
|
|
142
|
+
/*#__PURE__*/ jsx("span", {
|
|
143
|
+
className: "sr-only",
|
|
144
|
+
children: "Toggle Sidebar"
|
|
145
|
+
})
|
|
146
|
+
]
|
|
147
|
+
});
|
|
148
|
+
});
|
|
149
|
+
SidebarTrigger.displayName = 'SidebarTrigger';
|
|
150
|
+
const SidebarRail = /*#__PURE__*/ forwardRef(({ className, onClick, ...props }, ref)=>{
|
|
151
|
+
const { toggleSidebar, open } = useSidebar();
|
|
152
|
+
return /*#__PURE__*/ jsx("button", {
|
|
153
|
+
ref: ref,
|
|
154
|
+
"aria-expanded": open,
|
|
155
|
+
type: "button",
|
|
156
|
+
"data-sidebar": "rail",
|
|
157
|
+
"data-slot": "sidebar-rail",
|
|
158
|
+
"aria-label": "Toggle Sidebar",
|
|
159
|
+
tabIndex: -1,
|
|
160
|
+
onClick: (event)=>{
|
|
161
|
+
onClick?.(event);
|
|
162
|
+
toggleSidebar();
|
|
163
|
+
},
|
|
164
|
+
title: "Toggle Sidebar",
|
|
165
|
+
className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-border-subtle md:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className),
|
|
166
|
+
...props
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
SidebarRail.displayName = 'SidebarRail';
|
|
170
|
+
const SidebarInset = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("main", {
|
|
171
|
+
ref: ref,
|
|
172
|
+
"data-slot": "sidebar-inset",
|
|
173
|
+
className: cn('relative flex w-full flex-1 flex-col bg-background', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', 'md:peer-data-[variant=inset]:peer-data-[side=right]:mr-0 md:peer-data-[variant=inset]:peer-data-[side=right]:ml-2 md:peer-data-[variant=inset]:peer-data-[side=right]:peer-data-[state=collapsed]:mr-2', className),
|
|
174
|
+
...props
|
|
175
|
+
}));
|
|
176
|
+
SidebarInset.displayName = 'SidebarInset';
|
|
177
|
+
export { Sidebar, SidebarInset, SidebarRail, SidebarTrigger };
|