sticky-file-tree 0.0.3 → 0.0.4
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/README.md +22 -22
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -45,7 +45,7 @@ function App() {
|
|
|
45
45
|
}
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
-
> **Note:** If you want to have
|
|
48
|
+
> **Note:** If you want to have sticky behavior, you must pass the Ref of the parent scrollable element.
|
|
49
49
|
|
|
50
50
|
---
|
|
51
51
|
|
|
@@ -73,7 +73,7 @@ You can replace the default text or icons with your own components. This is usef
|
|
|
73
73
|
|
|
74
74
|
### With a File Icon Library
|
|
75
75
|
|
|
76
|
-
You can also use a file/folder icon library to add file and folder specific icons.
|
|
76
|
+
You can also use it with a file/folder icon library to add file and folder specific icons.
|
|
77
77
|
|
|
78
78
|
```tsx
|
|
79
79
|
import { useRef } from "react";
|
|
@@ -118,15 +118,15 @@ function App() {
|
|
|
118
118
|
}
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
> **Note:**
|
|
121
|
+
> **Note:** When implementing custom file or folder elements, **Sticky File Tree** may not automatically apply the expected node alignment. To ensure correct visual hierarchy, utilize the `depthOffset` callback to define your custom indentation logic.
|
|
122
122
|
|
|
123
123
|
---
|
|
124
124
|
|
|
125
125
|
## API Reference
|
|
126
126
|
|
|
127
|
-
### 1. `
|
|
127
|
+
### 1. `props`
|
|
128
128
|
|
|
129
|
-
These are the
|
|
129
|
+
These are all the props accepted by the `<FileTree />` component.
|
|
130
130
|
|
|
131
131
|
| Prop | Type | Default | Description |
|
|
132
132
|
| -------------------- | ---------------------------------- | --------------------------------- | ----------------------------------------------------------------- |
|
|
@@ -146,33 +146,33 @@ These are the primary props passed to the `<FileTree />` component.
|
|
|
146
146
|
|
|
147
147
|
Global settings applied to every node in the tree.
|
|
148
148
|
|
|
149
|
-
| Option | Type
|
|
150
|
-
| -------------- |
|
|
151
|
-
| `height` | `number`
|
|
152
|
-
| `gap` | `number`
|
|
153
|
-
| `inlineOffset` | `number`
|
|
154
|
-
| `depthOffset` | `(props) => number`
|
|
155
|
-
| `colors` | `BaseColorsProps`
|
|
149
|
+
| Option | Type | Default | Description |
|
|
150
|
+
| -------------- | ---------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------ |
|
|
151
|
+
| `height` | `number` | `28` | Row height in pixels. |
|
|
152
|
+
| `gap` | `number` | `8` | Spacing between the icon and the text label. |
|
|
153
|
+
| `inlineOffset` | `number \| { left?: number; right?: number; }` | `{ left: 12, right: 4 }` | Horizontal padding inside the node row. |
|
|
154
|
+
| `depthOffset` | `(props: DepthOffsetProps) => number` | `({ depth, depthDistance }) => depthDistance * (depth - 1)` | Custom function to calculate indentation per level. |
|
|
155
|
+
| `colors` | `BaseColorsProps` | Theme defaults | Global color states (Default, Hover, Focus, Selected). |
|
|
156
156
|
|
|
157
157
|
### 3. `fileOptions`
|
|
158
158
|
|
|
159
159
|
Specific to files. Inherits options from `nodeOptions`.
|
|
160
160
|
|
|
161
|
-
| Option | Type
|
|
162
|
-
| ------ |
|
|
163
|
-
| `icon` | `
|
|
164
|
-
| `text` | `
|
|
161
|
+
| Option | Type | Description |
|
|
162
|
+
| ------ | ------------------------------------------------------------------- | -------------------------------------------------- |
|
|
163
|
+
| `icon` | `ComponentType<CustomFileProps> \| IconProps` | Custom file icon or props for the default icon. |
|
|
164
|
+
| `text` | `ComponentType<CustomFileProps> \| HTMLAttributes<HTMLSpanElement>` | Custom label renderer or standard span attributes. |
|
|
165
165
|
|
|
166
166
|
### 4. `folderOptions`
|
|
167
167
|
|
|
168
168
|
Specific to folders. Inherits from `nodeOptions` (except `colors` which adds the `stuck` state).
|
|
169
169
|
|
|
170
|
-
| Option | Type
|
|
171
|
-
| --------------- |
|
|
172
|
-
| `icon` | `
|
|
173
|
-
| `text` | `
|
|
174
|
-
| `foldingShadow` | `string`
|
|
175
|
-
| `colors.stuck` | `ColorProps`
|
|
170
|
+
| Option | Type | Description |
|
|
171
|
+
| --------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------ |
|
|
172
|
+
| `icon` | `ComponentType<CustomFolderProps> \| IconProps` | Custom folder icon or props for the default icon. |
|
|
173
|
+
| `text` | `ComponentType<CustomFolderProps> \| HTMLAttributes<HTMLSpanElement>` | Custom label renderer or standard span attributes. |
|
|
174
|
+
| `foldingShadow` | `string` | CSS box-shadow applied when a folder header is "stuck" at the top. |
|
|
175
|
+
| `colors.stuck` | `ColorProps` | Colors applied specifically when the folder is sticky/stuck. |
|
|
176
176
|
|
|
177
177
|
---
|
|
178
178
|
|
package/dist/index.d.ts
CHANGED
|
@@ -187,8 +187,8 @@ interface FileTreeProps {
|
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
/**
|
|
190
|
-
* This component renders a
|
|
191
|
-
*
|
|
190
|
+
* This component renders a customizable tree structure for file system navigation.
|
|
191
|
+
* @see {@link https://www.npmjs.com/package/sticky-file-tree|Full Documentation}
|
|
192
192
|
*/
|
|
193
193
|
declare const FileTree: ({ files, onFileSelect, folding, depthDistance, paddingBottom, backgroundColor, nodeOptions, fileOptions, folderOptions, scrollContainerRef, theme }: FileTreeProps) => react_jsx_runtime.JSX.Element;
|
|
194
194
|
|
package/dist/index.js
CHANGED
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/function d(){return n||(n=1,"production"!==process.env.NODE_ENV&&function(){function o(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===S?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case g:return"Fragment";case h:return"Profiler";case b:return"StrictMode";case x:return"Suspense";case j:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case m:return e.displayName||"Context";case y:return(e._context.displayName||"Context")+".Consumer";case k:var l=e.render;return(e=e.displayName)||(e=""!==(e=l.displayName||l.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case C:return null!==(l=e.displayName||null)?l:o(e.type)||"Memo";case O:l=e._payload,e=e._init;try{return o(e(l))}catch(o){}}return null}function l(o){return""+o}function r(o){try{l(o);var e=!1}catch(o){e=!0}if(e){var r=(e=console).error,n="function"==typeof Symbol&&Symbol.toStringTag&&o[Symbol.toStringTag]||o.constructor.name||"Object";return r.call(e,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),l(o)}}function n(e){if(e===g)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===O)return"<...>";try{var l=o(e);return l?"<"+l+">":"<...>"}catch(o){return"<...>"}}function t(){return Error("react-stack-top-frame")}function d(){var e=o(this.type);return T[e]||(T[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function c(e,l,n,t,i,c){var a,v=l.children;if(void 0!==v)if(t)if(E(v)){for(t=0;t<v.length;t++)u(v[t]);Object.freeze&&Object.freeze(v)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else u(v);if(P.call(l,"key")){v=o(e);var p=Object.keys(l).filter(function(o){return"key"!==o});t=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",B[v+t]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',t,v,p,v),B[v+t]=!0)}if(v=null,void 0!==n&&(r(n),v=""+n),function(o){if(P.call(o,"key")){var e=Object.getOwnPropertyDescriptor(o,"key").get;if(e&&e.isReactWarning)return!1}return void 0!==o.key}(l)&&(r(l.key),v=""+l.key),"key"in l)for(var g in n={},l)"key"!==g&&(n[g]=l[g]);else n=l;return v&&function(o,e){function l(){s||(s=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",e))}l.isReactWarning=!0,Object.defineProperty(o,"key",{get:l,configurable:!0})}(n,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(o,e,l,r,n,t){var i=l.ref;return o={$$typeof:f,type:o,key:e,props:l,_owner:r},null!==(void 0!==i?i:null)?Object.defineProperty(o,"ref",{enumerable:!1,get:d}):Object.defineProperty(o,"ref",{enumerable:!1,value:null}),o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(o,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(o,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:n}),Object.defineProperty(o,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:t}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o}(e,v,n,null===(a=_.A)?null:a.getOwner(),i,c)}function u(o){a(o)?o._store&&(o._store.validated=1):"object"==typeof o&&null!==o&&o.$$typeof===O&&("fulfilled"===o._payload.status?a(o._payload.value)&&o._payload.value._store&&(o._payload.value._store.validated=1):o._store&&(o._store.validated=1))}function a(o){return"object"==typeof o&&null!==o&&o.$$typeof===f}var s,v=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),b=Symbol.for("react.strict_mode"),h=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),m=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),j=Symbol.for("react.suspense_list"),C=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),_=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,E=Array.isArray,R=console.createTask?console.createTask:function(){return null},T={},$=(v={react_stack_bottom_frame:function(o){return o()}}).react_stack_bottom_frame.bind(v,t)(),N=R(n(t)),B={};i.Fragment=g,i.jsx=function(o,e,l){var r=1e4>_.recentlyCreatedOwnerStacks++;return c(o,e,l,!1,r?Error("react-stack-top-frame"):$,r?R(n(o)):N)},i.jsxs=function(o,e,l){var r=1e4>_.recentlyCreatedOwnerStacks++;return c(o,e,l,!0,r?Error("react-stack-top-frame"):$,r?R(n(o)):N)}}()),i}var c=(t||(t=1,"production"===process.env.NODE_ENV?l.exports=function(){if(o)return r;o=1;var e=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function n(o,l,r){var n=null;if(void 0!==r&&(n=""+r),void 0!==l.key&&(n=""+l.key),"key"in l)for(var t in r={},l)"key"!==t&&(r[t]=l[t]);else r=l;return l=r.ref,{$$typeof:e,type:o,key:n,ref:void 0!==l?l:null,props:r}}return r.Fragment=l,r.jsx=n,r.jsxs=n,r}():l.exports=d()),l.exports);function u(o,e){var l={};for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&e.indexOf(r)<0&&(l[r]=o[r]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(o);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(o,r[n])&&(l[r[n]]=o[r[n]])}return l}!function(o,e){void 0===e&&(e={});var l=e.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=o:n.appendChild(document.createTextNode(o))}}('[data-file-tree] [data-folder-node] {\r\n\tcolor: var(--folder-color);\r\n\tborder-color: transparent;\r\n\tbackground-color: var(--folder-background-color);\r\n\r\n\t&:hover {\r\n\t\tcolor: var(--folder-hover-color);\r\n\t\tbackground-color: var(--folder-hover-background-color);\r\n\t}\r\n\t&:focus {\r\n\t\tcolor: var(--folder-focus-color);\r\n\t\tborder-color: var(--folder-focus-border-color);\r\n\t\tbackground-color: var(--folder-focus-background-color);\r\n\t}\r\n\t&[data-selected="true"]:not(:focus) {\r\n\t\tcolor: var(--folder-selected-color);\r\n\t\tbackground-color: var(--folder-selected-background-color);\r\n\t}\r\n\t&[data-folder-node][data-stuck="true"] {\r\n\t\tcolor: var(--stuck-color);\r\n\t\tborder-color: transparent;\r\n\t\tbackground-color: var(--stuck-background-color);\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: "";\r\n\t\t\tposition: absolute;\r\n\t\t\tinset: -1px;\r\n\t\t\tbackground-color: var(--stuck-background-color);\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\t\t&:hover {\r\n\t\t\tcolor: var(--folder-hover-color);\r\n\t\t}\r\n\t\t&:hover::before {\r\n\t\t\tbackground-color: var(--folder-hover-background-color);\r\n\t\t}\r\n\t}\r\n\t&[data-fold="true"] {\r\n\t\tbox-shadow: var(--folding-shadow);\r\n\t}\r\n}\r\n\r\n[data-file-tree] [data-file-node] {\r\n\tcolor: var(--file-color);\r\n\tborder-color: transparent;\r\n\tbackground-color: var(--file-background-color);\r\n\r\n\t&:hover {\r\n\t\tcolor: var(--file-hover-color);\r\n\t\tbackground-color: var(--file-hover-background-color);\r\n\t}\r\n\t&:focus {\r\n\t\tcolor: var(--file-focus-color);\r\n\t\tborder-color: var(--file-focus-border-color);\r\n\t\tbackground-color: var(--file-focus-background-color);\r\n\t}\r\n\t&[data-selected="true"]:not(:focus) {\r\n\t\tcolor: var(--file-selected-color);\r\n\t\tbackground-color: var(--file-selected-background-color);\r\n\t}\r\n}\r\n'),"function"==typeof SuppressedError&&SuppressedError;const a=o=>{var{name:e,style:l}=o,r=u(o,["name","style"]);return c.jsx("span",Object.assign({},r,{"data-node-text":!0,style:Object.assign(Object.assign({fontSize:"14px"},null!=l?l:{}),{flex:1,minWidth:0,textAlign:"left",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),children:e}))},s={light:{color:"#525252",backgroundColor:"#ffffff",hoverColor:"#000000",hoverBackgroundColor:"#f1f1f1",focusColor:"#0a0a0a",focusBorderColor:"#1e40af",focusBackgroundColor:"#dbeafe",selectedColor:"#525252",selectedBackgroundColor:"#e5e5e5",foldingShadow:"0 4px 3px -2px rgb(0 0 0 / 0.12), 0 2px 2px -2px rgb(0 0 0 / 0.12)"},dark:{color:"#adadad",backgroundColor:"#161616",hoverColor:"#fafafa",hoverBackgroundColor:"#212121",focusColor:"#f0f0f0",focusBorderColor:"#3b82f6",focusBackgroundColor:"#172554",selectedColor:"#adadad",selectedBackgroundColor:"#2c2c2c",foldingShadow:"0 4px 3px -2px rgb(0 0 0 / 0.9), 0 2px 2px -2px rgb(0 0 0 / 0.9)"}},v={left:12,right:4},f={position:"relative",width:"100%",minHeight:"100%",boxSizing:"border-box",margin:0,zIndex:1},p={width:"100%",display:"flex",alignItems:"center",justifyContent:"start",whiteSpace:"nowrap",borderWidth:"1px",borderStyle:"solid",cursor:"pointer"},g={position:"relative",zIndex:1},b={position:"sticky",zIndex:10},h=o=>{var{style:e}=o,l=u(o,["style"]);return c.jsx("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:Object.assign({width:"16px",height:"16px",flexShrink:0},e)},l,{children:c.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13.71 4.29L10.71 1.29L10 1H4L3 2V14L4 15H13L14 14V5L13.71 4.29ZM13 14H4V2H9V6H13V14ZM10 5V2L13 5H10Z",fill:"currentColor"})}))},y=o=>{var{style:e}=o,l=u(o,["style"]);return c.jsx("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:Object.assign({width:"16px",height:"16px",flexShrink:0},e)},l,{children:c.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.0719 8.02397L5.7146 3.66666L6.33332 3.04794L11 7.71461V8.33333L6.33332 13L5.7146 12.3813L10.0719 8.02397Z",fill:"currentColor"})}))},m=e.createContext(null),k=({config:o,children:l})=>{const[r,n]=e.useState(null),t=Object.assign(Object.assign({},o),{selectedPath:r,setSelectedPath:n});return c.jsx(m.Provider,{value:t,children:l})},x=()=>{const o=e.useContext(m);if(!o)throw new Error("'useFileTreeConfig' must be used within a FileTreeConfigProvider");return o},j=e.createContext(null),C=({config:o,children:e})=>c.jsx(j.Provider,{value:o,children:e}),O=({node:o,depth:l,open:r,selected:n,currentPath:t,onClick:i})=>{var d,u,s,f,g,h,m,k,C,O,w,S;const _=e.useRef(null),{depthDistance:P,nodeOptions:E}=x(),{folderOptions:R,folding:T,scrollContainerRef:$}=(()=>{const o=e.useContext(j);if(!o)throw new Error("'useFolderNodeConfig' must be used within a FolderNodeConfigProvider");return o})(),{inlineOffset:N=v}=null!=E?E:{},B={path:t,name:o.name,open:r},L=null!==(u=null!==(d=null==R?void 0:R.height)&&void 0!==d?d:null==E?void 0:E.height)&&void 0!==u?u:28,A=L*(l-1),F=P*(l-1),z="number"==typeof N?N:null!==(s=N.left)&&void 0!==s?s:12,I="number"==typeof N?N:null!==(f=N.right)&&void 0!==f?f:4,D=null!==(h=null!==(g=null==R?void 0:R.gap)&&void 0!==g?g:null==E?void 0:E.gap)&&void 0!==h?h:8,V={depth:l,depthDistance:P,gap:D},H=null!==(O=null!==(k=null===(m=null==R?void 0:R.depthOffset)||void 0===m?void 0:m.call(R,V))&&void 0!==k?k:null===(C=null==E?void 0:E.depthOffset)||void 0===C?void 0:C.call(E,V))&&void 0!==O?O:F,M=((o,l,r,n)=>{const[t,i]=e.useState(!1);return e.useEffect(()=>{const e=null==o?void 0:o.current,t=l.current;if(!e||!t)return;let d=!1;const c=()=>{d||(window.requestAnimationFrame(()=>{const o=e.getBoundingClientRect(),l=t.getBoundingClientRect(),c=window.getComputedStyle(e),u=parseFloat(c.borderTopWidth)||0,a=parseFloat(c.paddingTop)||0,s=l.top-o.top-u-a,v=s<=r&&s+l.height>r&&e.scrollTop>0&&n;i(v),d=!1}),d=!0)};return c(),e.addEventListener("scroll",c),()=>{e.removeEventListener("scroll",c)}},[null==o?void 0:o.current,l.current,r,n,i]),t})($,_,A,r);return c.jsxs("button",{ref:_,"data-tree-node":!0,"data-folder-node":!0,"data-open":r,"data-depth":l,"data-selected":n,"data-stuck":M,"data-fold":"false",style:Object.assign(Object.assign(Object.assign({},p),$&&T?Object.assign(Object.assign({},b),{top:`${A}px`}):{}),{height:`${L}px`,paddingLeft:`${H+z}px`,paddingRight:`${I}px`,columnGap:`${D}px`}),onClick:i,children:["function"==typeof(null==R?void 0:R.icon)?c.jsx(R.icon,Object.assign({},B)):c.jsx(y,Object.assign({},null==R?void 0:R.icon,{style:Object.assign(Object.assign({},null!==(S=null===(w=null==R?void 0:R.icon)||void 0===w?void 0:w.style)&&void 0!==S?S:{}),{rotate:r?"90deg":void 0})})),"function"==typeof(null==R?void 0:R.text)?c.jsx(R.text,Object.assign({},B)):c.jsx(a,Object.assign({name:o.name},null==R?void 0:R.text))]})},w=({node:o,depth:l,elevation:r,currentPath:n})=>{var t;const i=e.useRef(null),{selectedPath:d,setSelectedPath:u}=x(),[a,s]=e.useState(!1),v=n===d;return c.jsxs("div",{"data-folder":!0,style:{position:"relative",zIndex:r},children:[c.jsx(O,{node:o,depth:l,open:a,selected:v,currentPath:n,onClick:o=>{o.stopPropagation();const e=i.current,l=null==e?void 0:e.querySelector("[data-folder-node][data-fold=true]");l&&l.setAttribute("data-fold","false"),s(!a),u(n)}}),c.jsx(e.Activity,{mode:a&&o.children?"visible":"hidden",children:c.jsx("div",{ref:i,"data-folder-content":!0,style:g,children:null===(t=o.children)||void 0===t?void 0:t.map((e,r)=>c.jsx(E,{node:e,depth:l+1,elevation:o.children.length-r,parentPath:`${n}/`},r))})})]})},S=e.createContext(null),_=({config:o,children:e})=>c.jsx(S.Provider,{value:o,children:e}),P=({node:o,depth:l,elevation:r,currentPath:n})=>{var t,i,d,u,s,f,g,b,y,m;const{onFileSelect:k,fileOptions:j}=(()=>{const o=e.useContext(S);if(!o)throw new Error("'useFileNodeConfig' must be used within a FileNodeConfigProvider");return o})(),{selectedPath:C,depthDistance:O,nodeOptions:w,setSelectedPath:_}=x(),{inlineOffset:P=v}=null!=w?w:{},E=n===C,R=null!==(i=null!==(t=null==j?void 0:j.height)&&void 0!==t?t:null==w?void 0:w.height)&&void 0!==i?i:28,T={path:n,name:o.name,selected:E},$=O*(l-1),N="number"==typeof P?P:null!==(d=P.left)&&void 0!==d?d:12,B="number"==typeof P?P:null!==(u=P.right)&&void 0!==u?u:4,L=null!==(f=null!==(s=null==j?void 0:j.gap)&&void 0!==s?s:null==w?void 0:w.gap)&&void 0!==f?f:8,A={depth:l,depthDistance:O,gap:L},F=null!==(m=null!==(b=null===(g=null==j?void 0:j.depthOffset)||void 0===g?void 0:g.call(j,A))&&void 0!==b?b:null===(y=null==w?void 0:w.depthOffset)||void 0===y?void 0:y.call(w,A))&&void 0!==m?m:$;return c.jsxs("button",{"data-tree-node":!0,"data-file-node":!0,"data-depth":l,"data-selected":E,style:Object.assign(Object.assign({},p),{height:`${R}px`,position:"relative",paddingLeft:`${F+N}px`,paddingRight:`${B}px`,columnGap:`${L}px`,zIndex:r}),onClick:e=>{e.stopPropagation(),_(n),null==k||k({path:n,name:o.name})},children:["function"==typeof(null==j?void 0:j.icon)?c.jsx(j.icon,Object.assign({},T)):c.jsx(h,Object.assign({},null==j?void 0:j.icon)),"function"==typeof(null==j?void 0:j.text)?c.jsx(j.text,Object.assign({},T)):c.jsx(a,Object.assign({name:o.name},null==j?void 0:j.text))]})},E=o=>{var{node:e,parentPath:l}=o,r=u(o,["node","parentPath"]);const n=`${l}${e.name}`,t=Object.assign(Object.assign({node:e},r),{currentPath:n});return e.children?c.jsx(w,Object.assign({},t)):c.jsx(P,Object.assign({},t))},R=({nodeOptions:o,fileOptions:e,folderOptions:l,theme:r,children:n})=>{var t,i,d,u,a,v,f,p,g,b,h,y,m,k,x,j,C,O,w,S,_,P,E,R,T,$,N,B,L,A,F,z,I,D,V,H,M,W,U,q,Z,G,J,K,X,Y,Q,oo,eo,lo,ro,no,to,io,co,uo,ao,so,vo,fo,po,go,bo,ho,yo,mo,ko,xo,jo,Co,Oo,wo,So,_o,Po,Eo,Ro,To,$o,No,Bo,Lo,Ao,Fo,zo,Io,Do,Vo,Ho,Mo,Wo,Uo,qo,Zo,Go,Jo,Ko,Xo,Yo,Qo,oe,ee,le,re,ne,te,ie,de,ce,ue,ae,se,ve,fe,pe,ge,be,he,ye,me,ke,xe,je,Ce,Oe,we,Se;return c.jsx("div",{"data-variables-provider":!0,style:{"--file-color":null!==(v=null!==(d=null===(i=null===(t=null==e?void 0:e.colors)||void 0===t?void 0:t.default)||void 0===i?void 0:i.color)&&void 0!==d?d:null===(a=null===(u=null==o?void 0:o.colors)||void 0===u?void 0:u.default)||void 0===a?void 0:a.color)&&void 0!==v?v:s[r].color,"--file-background-color":null!==(y=null!==(g=null===(p=null===(f=null==e?void 0:e.colors)||void 0===f?void 0:f.default)||void 0===p?void 0:p.backgroundColor)&&void 0!==g?g:null===(h=null===(b=null==o?void 0:o.colors)||void 0===b?void 0:b.default)||void 0===h?void 0:h.backgroundColor)&&void 0!==y?y:s[r].backgroundColor,"--file-hover-color":null!==(O=null!==(x=null===(k=null===(m=null==e?void 0:e.colors)||void 0===m?void 0:m.hover)||void 0===k?void 0:k.color)&&void 0!==x?x:null===(C=null===(j=null==o?void 0:o.colors)||void 0===j?void 0:j.hover)||void 0===C?void 0:C.color)&&void 0!==O?O:s[r].hoverColor,"--file-hover-background-color":null!==(R=null!==(_=null===(S=null===(w=null==e?void 0:e.colors)||void 0===w?void 0:w.hover)||void 0===S?void 0:S.backgroundColor)&&void 0!==_?_:null===(E=null===(P=null==o?void 0:o.colors)||void 0===P?void 0:P.hover)||void 0===E?void 0:E.backgroundColor)&&void 0!==R?R:s[r].hoverBackgroundColor,"--file-focus-color":null!==(A=null!==(N=null===($=null===(T=null==e?void 0:e.colors)||void 0===T?void 0:T.focus)||void 0===$?void 0:$.color)&&void 0!==N?N:null===(L=null===(B=null==o?void 0:o.colors)||void 0===B?void 0:B.focus)||void 0===L?void 0:L.color)&&void 0!==A?A:s[r].focusColor,"--file-focus-border-color":null!==(H=null!==(I=null===(z=null===(F=null==e?void 0:e.colors)||void 0===F?void 0:F.focus)||void 0===z?void 0:z.borderColor)&&void 0!==I?I:null===(V=null===(D=null==o?void 0:o.colors)||void 0===D?void 0:D.focus)||void 0===V?void 0:V.borderColor)&&void 0!==H?H:s[r].focusBorderColor,"--file-focus-background-color":null!==(G=null!==(U=null===(W=null===(M=null==e?void 0:e.colors)||void 0===M?void 0:M.focus)||void 0===W?void 0:W.backgroundColor)&&void 0!==U?U:null===(Z=null===(q=null==o?void 0:o.colors)||void 0===q?void 0:q.focus)||void 0===Z?void 0:Z.backgroundColor)&&void 0!==G?G:s[r].focusBackgroundColor,"--file-selected-color":null!==(oo=null!==(X=null===(K=null===(J=null==e?void 0:e.colors)||void 0===J?void 0:J.selected)||void 0===K?void 0:K.color)&&void 0!==X?X:null===(Q=null===(Y=null==o?void 0:o.colors)||void 0===Y?void 0:Y.selected)||void 0===Q?void 0:Q.color)&&void 0!==oo?oo:s[r].selectedColor,"--file-selected-background-color":null!==(io=null!==(ro=null===(lo=null===(eo=null==e?void 0:e.colors)||void 0===eo?void 0:eo.selected)||void 0===lo?void 0:lo.backgroundColor)&&void 0!==ro?ro:null===(to=null===(no=null==o?void 0:o.colors)||void 0===no?void 0:no.selected)||void 0===to?void 0:to.backgroundColor)&&void 0!==io?io:s[r].selectedBackgroundColor,"--folder-color":null!==(fo=null!==(ao=null===(uo=null===(co=null==l?void 0:l.colors)||void 0===co?void 0:co.default)||void 0===uo?void 0:uo.color)&&void 0!==ao?ao:null===(vo=null===(so=null==o?void 0:o.colors)||void 0===so?void 0:so.default)||void 0===vo?void 0:vo.color)&&void 0!==fo?fo:s[r].color,"--folder-background-color":null!==(mo=null!==(bo=null===(go=null===(po=null==l?void 0:l.colors)||void 0===po?void 0:po.default)||void 0===go?void 0:go.backgroundColor)&&void 0!==bo?bo:null===(yo=null===(ho=null==o?void 0:o.colors)||void 0===ho?void 0:ho.default)||void 0===yo?void 0:yo.backgroundColor)&&void 0!==mo?mo:s[r].backgroundColor,"--folder-hover-color":null!==(wo=null!==(jo=null===(xo=null===(ko=null==l?void 0:l.colors)||void 0===ko?void 0:ko.hover)||void 0===xo?void 0:xo.color)&&void 0!==jo?jo:null===(Oo=null===(Co=null==o?void 0:o.colors)||void 0===Co?void 0:Co.hover)||void 0===Oo?void 0:Oo.color)&&void 0!==wo?wo:s[r].hoverColor,"--folder-hover-background-color":null!==(To=null!==(Po=null===(_o=null===(So=null==l?void 0:l.colors)||void 0===So?void 0:So.hover)||void 0===_o?void 0:_o.backgroundColor)&&void 0!==Po?Po:null===(Ro=null===(Eo=null==o?void 0:o.colors)||void 0===Eo?void 0:Eo.hover)||void 0===Ro?void 0:Ro.backgroundColor)&&void 0!==To?To:s[r].hoverBackgroundColor,"--folder-focus-color":null!==(Fo=null!==(Bo=null===(No=null===($o=null==l?void 0:l.colors)||void 0===$o?void 0:$o.focus)||void 0===No?void 0:No.color)&&void 0!==Bo?Bo:null===(Ao=null===(Lo=null==o?void 0:o.colors)||void 0===Lo?void 0:Lo.focus)||void 0===Ao?void 0:Ao.color)&&void 0!==Fo?Fo:s[r].focusColor,"--folder-focus-border-color":null!==(Mo=null!==(Do=null===(Io=null===(zo=null==l?void 0:l.colors)||void 0===zo?void 0:zo.focus)||void 0===Io?void 0:Io.borderColor)&&void 0!==Do?Do:null===(Ho=null===(Vo=null==o?void 0:o.colors)||void 0===Vo?void 0:Vo.focus)||void 0===Ho?void 0:Ho.borderColor)&&void 0!==Mo?Mo:s[r].focusBorderColor,"--folder-focus-background-color":null!==(Jo=null!==(qo=null===(Uo=null===(Wo=null==l?void 0:l.colors)||void 0===Wo?void 0:Wo.focus)||void 0===Uo?void 0:Uo.backgroundColor)&&void 0!==qo?qo:null===(Go=null===(Zo=null==o?void 0:o.colors)||void 0===Zo?void 0:Zo.focus)||void 0===Go?void 0:Go.backgroundColor)&&void 0!==Jo?Jo:s[r].focusBackgroundColor,"--folder-selected-color":null!==(ee=null!==(Yo=null===(Xo=null===(Ko=null==l?void 0:l.colors)||void 0===Ko?void 0:Ko.selected)||void 0===Xo?void 0:Xo.color)&&void 0!==Yo?Yo:null===(oe=null===(Qo=null==o?void 0:o.colors)||void 0===Qo?void 0:Qo.selected)||void 0===oe?void 0:oe.color)&&void 0!==ee?ee:s[r].selectedColor,"--folder-selected-background-color":null!==(de=null!==(ne=null===(re=null===(le=null==l?void 0:l.colors)||void 0===le?void 0:le.selected)||void 0===re?void 0:re.backgroundColor)&&void 0!==ne?ne:null===(ie=null===(te=null==o?void 0:o.colors)||void 0===te?void 0:te.selected)||void 0===ie?void 0:ie.backgroundColor)&&void 0!==de?de:s[r].selectedBackgroundColor,"--stuck-color":null!==(be=null!==(fe=null!==(ae=null===(ue=null===(ce=null==l?void 0:l.colors)||void 0===ce?void 0:ce.stuck)||void 0===ue?void 0:ue.color)&&void 0!==ae?ae:null===(ve=null===(se=null==l?void 0:l.colors)||void 0===se?void 0:se.default)||void 0===ve?void 0:ve.color)&&void 0!==fe?fe:null===(ge=null===(pe=null==o?void 0:o.colors)||void 0===pe?void 0:pe.default)||void 0===ge?void 0:ge.color)&&void 0!==be?be:s[r].color,"--stuck-background-color":null!==(we=null!==(je=null!==(me=null===(ye=null===(he=null==l?void 0:l.colors)||void 0===he?void 0:he.stuck)||void 0===ye?void 0:ye.backgroundColor)&&void 0!==me?me:null===(xe=null===(ke=null==l?void 0:l.colors)||void 0===ke?void 0:ke.default)||void 0===xe?void 0:xe.backgroundColor)&&void 0!==je?je:null===(Oe=null===(Ce=null==o?void 0:o.colors)||void 0===Ce?void 0:Ce.default)||void 0===Oe?void 0:Oe.backgroundColor)&&void 0!==we?we:s[r].backgroundColor,"--folding-shadow":null!==(Se=null==l?void 0:l.foldingShadow)&&void 0!==Se?Se:s[r].foldingShadow},children:n})};function T(o){const e=[],l=function(o){const e=[...o];return e.sort((o,e)=>{let l=0;const r=Math.min(o.length,e.length);for(;l<r&&o[l]===e[l];)l++;const n=o.slice(l),t=e.slice(l),i=n.includes("/"),d=t.includes("/");return i&&!d?-1:!i&&d?1:o.localeCompare(e)}),e}([...new Set(o)]);for(const o of l){const l=o.split("/");let r=e;l.forEach((o,e)=>{const n=e===l.length-1,t=r.find(e=>e.name===o);if(t)n||(r=t.children);else{const e=n?{name:o,children:null}:{name:o,children:[]};r.push(e),n||(r=e.children)}})}return e}exports.ArrowIcon=y,exports.FileIcon=h,exports.FileTree=({files:o,onFileSelect:l,folding:r=!0,depthDistance:n=16,paddingBottom:t=16,backgroundColor:i,nodeOptions:d,fileOptions:u,folderOptions:a,scrollContainerRef:v,theme:p="light"})=>{const g=T(o),b=e.useRef(null),h={depthDistance:n,nodeOptions:d},y={scrollContainerRef:r?v:void 0,folding:r,folderOptions:a},m={onFileSelect:l,fileOptions:u};return((o,l)=>{e.useLayoutEffect(()=>{const e=null==o?void 0:o.current;if(!e||!l)return;let r;const n=()=>{const o=e.querySelectorAll("[data-stuck]");if(!o.length)return;let l=!1;[...o].reverse().forEach(o=>{const e=o.checkVisibility(),r="true"===o.getAttribute("data-stuck");!l&&e&&r?(l=!0,o.setAttribute("data-fold","true")):e&&o.setAttribute("data-fold","false")})},t=new MutationObserver(o=>{o.some(o=>"attributes"===o.type&&"data-stuck"===o.attributeName&&o.target instanceof HTMLElement&&o.target.hasAttribute("data-folder-node"))&&(clearTimeout(r),r=setTimeout(n,50))});return t.observe(e,{attributes:!0,attributeOldValue:!1,subtree:!0,childList:!1,characterData:!1}),()=>{t.disconnect()}},[o.current,l])})(b,r),c.jsx("div",{ref:b,"data-file-tree":!0,style:Object.assign(Object.assign({},f),{paddingBottom:`${t}px`,backgroundColor:null!=i?i:s[p].backgroundColor}),children:c.jsx(R,{nodeOptions:d,fileOptions:u,folderOptions:a,theme:p,children:c.jsx(k,{config:h,children:c.jsx(C,{config:y,children:c.jsx(_,{config:m,children:g.map((o,e)=>c.jsx(E,{node:o,depth:1,elevation:g.length-e,parentPath:""},o.name))})})})})})};
|
|
10
|
+
*/function d(){return n||(n=1,"production"!==process.env.NODE_ENV&&function(){function o(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===S?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case g:return"Fragment";case h:return"Profiler";case b:return"StrictMode";case x:return"Suspense";case j:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case p:return"Portal";case m:return e.displayName||"Context";case y:return(e._context.displayName||"Context")+".Consumer";case k:var l=e.render;return(e=e.displayName)||(e=""!==(e=l.displayName||l.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case C:return null!==(l=e.displayName||null)?l:o(e.type)||"Memo";case O:l=e._payload,e=e._init;try{return o(e(l))}catch(o){}}return null}function l(o){return""+o}function r(o){try{l(o);var e=!1}catch(o){e=!0}if(e){var r=(e=console).error,n="function"==typeof Symbol&&Symbol.toStringTag&&o[Symbol.toStringTag]||o.constructor.name||"Object";return r.call(e,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),l(o)}}function n(e){if(e===g)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===O)return"<...>";try{var l=o(e);return l?"<"+l+">":"<...>"}catch(o){return"<...>"}}function t(){return Error("react-stack-top-frame")}function d(){var e=o(this.type);return T[e]||(T[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function c(e,l,n,t,i,c){var a,v=l.children;if(void 0!==v)if(t)if(R(v)){for(t=0;t<v.length;t++)u(v[t]);Object.freeze&&Object.freeze(v)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else u(v);if(P.call(l,"key")){v=o(e);var p=Object.keys(l).filter(function(o){return"key"!==o});t=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",L[v+t]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',t,v,p,v),L[v+t]=!0)}if(v=null,void 0!==n&&(r(n),v=""+n),function(o){if(P.call(o,"key")){var e=Object.getOwnPropertyDescriptor(o,"key").get;if(e&&e.isReactWarning)return!1}return void 0!==o.key}(l)&&(r(l.key),v=""+l.key),"key"in l)for(var g in n={},l)"key"!==g&&(n[g]=l[g]);else n=l;return v&&function(o,e){function l(){s||(s=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",e))}l.isReactWarning=!0,Object.defineProperty(o,"key",{get:l,configurable:!0})}(n,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(o,e,l,r,n,t){var i=l.ref;return o={$$typeof:f,type:o,key:e,props:l,_owner:r},null!==(void 0!==i?i:null)?Object.defineProperty(o,"ref",{enumerable:!1,get:d}):Object.defineProperty(o,"ref",{enumerable:!1,value:null}),o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(o,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(o,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:n}),Object.defineProperty(o,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:t}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o}(e,v,n,null===(a=_.A)?null:a.getOwner(),i,c)}function u(o){a(o)?o._store&&(o._store.validated=1):"object"==typeof o&&null!==o&&o.$$typeof===O&&("fulfilled"===o._payload.status?a(o._payload.value)&&o._payload.value._store&&(o._payload.value._store.validated=1):o._store&&(o._store.validated=1))}function a(o){return"object"==typeof o&&null!==o&&o.$$typeof===f}var s,v=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),b=Symbol.for("react.strict_mode"),h=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),m=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),j=Symbol.for("react.suspense_list"),C=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),_=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,R=Array.isArray,E=console.createTask?console.createTask:function(){return null},T={},N=(v={react_stack_bottom_frame:function(o){return o()}}).react_stack_bottom_frame.bind(v,t)(),B=E(n(t)),L={};i.Fragment=g,i.jsx=function(o,e,l){var r=1e4>_.recentlyCreatedOwnerStacks++;return c(o,e,l,!1,r?Error("react-stack-top-frame"):N,r?E(n(o)):B)},i.jsxs=function(o,e,l){var r=1e4>_.recentlyCreatedOwnerStacks++;return c(o,e,l,!0,r?Error("react-stack-top-frame"):N,r?E(n(o)):B)}}()),i}var c=(t||(t=1,"production"===process.env.NODE_ENV?l.exports=function(){if(o)return r;o=1;var e=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function n(o,l,r){var n=null;if(void 0!==r&&(n=""+r),void 0!==l.key&&(n=""+l.key),"key"in l)for(var t in r={},l)"key"!==t&&(r[t]=l[t]);else r=l;return l=r.ref,{$$typeof:e,type:o,key:n,ref:void 0!==l?l:null,props:r}}return r.Fragment=l,r.jsx=n,r.jsxs=n,r}():l.exports=d()),l.exports);function u(o,e){var l={};for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&e.indexOf(r)<0&&(l[r]=o[r]);if(null!=o&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(o);n<r.length;n++)e.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(o,r[n])&&(l[r[n]]=o[r[n]])}return l}!function(o,e){void 0===e&&(e={});var l=e.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=o:n.appendChild(document.createTextNode(o))}}('[data-file-tree] [data-folder-node] {\r\n\tcolor: var(--folder-color);\r\n\tborder-color: transparent;\r\n\tbackground-color: var(--folder-background-color);\r\n\r\n\t&:hover {\r\n\t\tcolor: var(--folder-hover-color);\r\n\t\tbackground-color: var(--folder-hover-background-color);\r\n\t}\r\n\t&:focus {\r\n\t\tcolor: var(--folder-focus-color);\r\n\t\tborder-color: var(--folder-focus-border-color);\r\n\t\tbackground-color: var(--folder-focus-background-color);\r\n\t}\r\n\t&[data-selected="true"]:not(:focus) {\r\n\t\tcolor: var(--folder-selected-color);\r\n\t\tbackground-color: var(--folder-selected-background-color);\r\n\t}\r\n\t&[data-folder-node][data-stuck="true"] {\r\n\t\tcolor: var(--stuck-color);\r\n\t\tborder-color: transparent;\r\n\t\tbackground-color: var(--stuck-background-color);\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: "";\r\n\t\t\tposition: absolute;\r\n\t\t\tinset: -1px;\r\n\t\t\tbackground-color: var(--stuck-background-color);\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\t\t&:hover {\r\n\t\t\tcolor: var(--folder-hover-color);\r\n\t\t}\r\n\t\t&:hover::before {\r\n\t\t\tbackground-color: var(--folder-hover-background-color);\r\n\t\t}\r\n\t}\r\n\t&[data-fold="true"] {\r\n\t\tbox-shadow: var(--folding-shadow);\r\n\t}\r\n}\r\n\r\n[data-file-tree] [data-file-node] {\r\n\tcolor: var(--file-color);\r\n\tborder-color: transparent;\r\n\tbackground-color: var(--file-background-color);\r\n\r\n\t&:hover {\r\n\t\tcolor: var(--file-hover-color);\r\n\t\tbackground-color: var(--file-hover-background-color);\r\n\t}\r\n\t&:focus {\r\n\t\tcolor: var(--file-focus-color);\r\n\t\tborder-color: var(--file-focus-border-color);\r\n\t\tbackground-color: var(--file-focus-background-color);\r\n\t}\r\n\t&[data-selected="true"]:not(:focus) {\r\n\t\tcolor: var(--file-selected-color);\r\n\t\tbackground-color: var(--file-selected-background-color);\r\n\t}\r\n}\r\n'),"function"==typeof SuppressedError&&SuppressedError;const a=o=>{var{name:e,style:l}=o,r=u(o,["name","style"]);return c.jsx("span",Object.assign({},r,{"data-node-text":!0,style:Object.assign(Object.assign({fontSize:14},null!=l?l:{}),{flex:1,minWidth:0,textAlign:"left",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),children:e}))},s={light:{color:"#525252",backgroundColor:"#ffffff",hoverColor:"#000000",hoverBackgroundColor:"#f1f1f1",focusColor:"#0a0a0a",focusBorderColor:"#1e40af",focusBackgroundColor:"#dbeafe",selectedColor:"#525252",selectedBackgroundColor:"#e5e5e5",foldingShadow:"0 4px 3px -2px rgb(0 0 0 / 0.12), 0 2px 2px -2px rgb(0 0 0 / 0.12)"},dark:{color:"#adadad",backgroundColor:"#161616",hoverColor:"#fafafa",hoverBackgroundColor:"#212121",focusColor:"#f0f0f0",focusBorderColor:"#3b82f6",focusBackgroundColor:"#172554",selectedColor:"#adadad",selectedBackgroundColor:"#2c2c2c",foldingShadow:"0 4px 3px -2px rgb(0 0 0 / 0.9), 0 2px 2px -2px rgb(0 0 0 / 0.9)"}},v={left:12,right:4},f={position:"relative",width:"100%",minHeight:"100%",boxSizing:"border-box",margin:0,zIndex:1},p={width:"100%",display:"flex",alignItems:"center",justifyContent:"start",fontWeight:400,whiteSpace:"nowrap",borderWidth:"1px",borderStyle:"solid",borderRadius:0,cursor:"pointer"},g={position:"relative",zIndex:1},b={position:"sticky",zIndex:10},h=o=>{var{style:e}=o,l=u(o,["style"]);return c.jsx("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:Object.assign({width:16,height:16,flexShrink:0},e)},l,{children:c.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13.71 4.29L10.71 1.29L10 1H4L3 2V14L4 15H13L14 14V5L13.71 4.29ZM13 14H4V2H9V6H13V14ZM10 5V2L13 5H10Z",fill:"currentColor"})}))},y=o=>{var{style:e}=o,l=u(o,["style"]);return c.jsx("svg",Object.assign({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:Object.assign({width:16,height:16,flexShrink:0},e)},l,{children:c.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.0719 8.02397L5.7146 3.66666L6.33332 3.04794L11 7.71461V8.33333L6.33332 13L5.7146 12.3813L10.0719 8.02397Z",fill:"currentColor"})}))},m=e.createContext(null),k=({config:o,children:l})=>{const[r,n]=e.useState(null),t=Object.assign(Object.assign({},o),{selectedPath:r,setSelectedPath:n});return c.jsx(m.Provider,{value:t,children:l})},x=()=>{const o=e.useContext(m);if(!o)throw new Error("'useFileTreeConfig' must be used within a FileTreeConfigProvider");return o},j=e.createContext(null),C=({config:o,children:e})=>c.jsx(j.Provider,{value:o,children:e}),O=({node:o,depth:l,open:r,selected:n,currentPath:t,onClick:i})=>{var d,u,s,f,g,h,m,k,C,O,w,S;const _=e.useRef(null),{depthDistance:P,nodeOptions:R}=x(),{folderOptions:E,folding:T,scrollContainerRef:N}=(()=>{const o=e.useContext(j);if(!o)throw new Error("'useFolderNodeConfig' must be used within a FolderNodeConfigProvider");return o})(),{inlineOffset:B=v}=null!=R?R:{},L={path:t,name:o.name,open:r},A=null!==(u=null!==(d=null==E?void 0:E.height)&&void 0!==d?d:null==R?void 0:R.height)&&void 0!==u?u:28,F=A*(l-1),$=P*(l-1),z="number"==typeof B?B:null!==(s=B.left)&&void 0!==s?s:12,I="number"==typeof B?B:null!==(f=B.right)&&void 0!==f?f:4,D=null!==(h=null!==(g=null==E?void 0:E.gap)&&void 0!==g?g:null==R?void 0:R.gap)&&void 0!==h?h:8,V={depth:l,depthDistance:P,gap:D},H=null!==(O=null!==(k=null===(m=null==E?void 0:E.depthOffset)||void 0===m?void 0:m.call(E,V))&&void 0!==k?k:null===(C=null==R?void 0:R.depthOffset)||void 0===C?void 0:C.call(R,V))&&void 0!==O?O:$,M=((o,l,r,n)=>{const[t,i]=e.useState(!1);return e.useEffect(()=>{const e=null==o?void 0:o.current,t=l.current;if(!e||!t)return;let d=!1;const c=()=>{d||(window.requestAnimationFrame(()=>{const o=e.getBoundingClientRect(),l=t.getBoundingClientRect(),c=window.getComputedStyle(e),u=parseFloat(c.borderTopWidth)||0,a=parseFloat(c.paddingTop)||0,s=l.top-o.top-u-a,v=s<=r&&s+l.height>r&&e.scrollTop>0&&n;i(v),d=!1}),d=!0)};return c(),e.addEventListener("scroll",c),()=>{e.removeEventListener("scroll",c)}},[null==o?void 0:o.current,l.current,r,n,i]),t})(N,_,F,r);return c.jsxs("button",{ref:_,"data-tree-node":!0,"data-folder-node":!0,"data-open":r,"data-depth":l,"data-selected":n,"data-stuck":M,"data-fold":"false",style:Object.assign(Object.assign(Object.assign({},p),N&&T?Object.assign(Object.assign({},b),{top:F}):{}),{height:A,paddingLeft:H+z,paddingRight:I,columnGap:D}),onClick:i,children:["function"==typeof(null==E?void 0:E.icon)?c.jsx(E.icon,Object.assign({},L)):c.jsx(y,Object.assign({},null==E?void 0:E.icon,{style:Object.assign(Object.assign({},null!==(S=null===(w=null==E?void 0:E.icon)||void 0===w?void 0:w.style)&&void 0!==S?S:{}),{rotate:r?"90deg":void 0})})),"function"==typeof(null==E?void 0:E.text)?c.jsx(E.text,Object.assign({},L)):c.jsx(a,Object.assign({name:o.name},null==E?void 0:E.text))]})},w=({node:o,depth:l,elevation:r,currentPath:n})=>{var t;const i=e.useRef(null),{selectedPath:d,setSelectedPath:u}=x(),[a,s]=e.useState(!1),v=n===d;return c.jsxs("div",{"data-folder":!0,style:{position:"relative",zIndex:r},children:[c.jsx(O,{node:o,depth:l,open:a,selected:v,currentPath:n,onClick:o=>{o.stopPropagation();const e=i.current,l=null==e?void 0:e.querySelector("[data-folder-node][data-fold=true]");l&&l.setAttribute("data-fold","false"),s(!a),u(n)}}),c.jsx(e.Activity,{mode:a&&o.children?"visible":"hidden",children:c.jsx("div",{ref:i,"data-folder-content":!0,style:g,children:null===(t=o.children)||void 0===t?void 0:t.map((e,r)=>c.jsx(R,{node:e,depth:l+1,elevation:o.children.length-r,parentPath:`${n}/`},r))})})]})},S=e.createContext(null),_=({config:o,children:e})=>c.jsx(S.Provider,{value:o,children:e}),P=({node:o,depth:l,elevation:r,currentPath:n})=>{var t,i,d,u,s,f,g,b,y,m;const{onFileSelect:k,fileOptions:j}=(()=>{const o=e.useContext(S);if(!o)throw new Error("'useFileNodeConfig' must be used within a FileNodeConfigProvider");return o})(),{selectedPath:C,depthDistance:O,nodeOptions:w,setSelectedPath:_}=x(),{inlineOffset:P=v}=null!=w?w:{},R=n===C,E=null!==(i=null!==(t=null==j?void 0:j.height)&&void 0!==t?t:null==w?void 0:w.height)&&void 0!==i?i:28,T={path:n,name:o.name,selected:R},N=O*(l-1),B="number"==typeof P?P:null!==(d=P.left)&&void 0!==d?d:12,L="number"==typeof P?P:null!==(u=P.right)&&void 0!==u?u:4,A=null!==(f=null!==(s=null==j?void 0:j.gap)&&void 0!==s?s:null==w?void 0:w.gap)&&void 0!==f?f:8,F={depth:l,depthDistance:O,gap:A},$=null!==(m=null!==(b=null===(g=null==j?void 0:j.depthOffset)||void 0===g?void 0:g.call(j,F))&&void 0!==b?b:null===(y=null==w?void 0:w.depthOffset)||void 0===y?void 0:y.call(w,F))&&void 0!==m?m:N;return c.jsxs("button",{"data-tree-node":!0,"data-file-node":!0,"data-depth":l,"data-selected":R,style:Object.assign(Object.assign({},p),{height:E,position:"relative",paddingLeft:$+B,paddingRight:L,columnGap:A,zIndex:r}),onClick:e=>{e.stopPropagation(),_(n),null==k||k({path:n,name:o.name})},children:["function"==typeof(null==j?void 0:j.icon)?c.jsx(j.icon,Object.assign({},T)):c.jsx(h,Object.assign({},null==j?void 0:j.icon)),"function"==typeof(null==j?void 0:j.text)?c.jsx(j.text,Object.assign({},T)):c.jsx(a,Object.assign({name:o.name},null==j?void 0:j.text))]})},R=o=>{var{node:e,parentPath:l}=o,r=u(o,["node","parentPath"]);const n=`${l}${e.name}`,t=Object.assign(Object.assign({node:e},r),{currentPath:n});return e.children?c.jsx(w,Object.assign({},t)):c.jsx(P,Object.assign({},t))},E=({nodeOptions:o,fileOptions:e,folderOptions:l,theme:r,children:n})=>{var t,i,d,u,a,v,f,p,g,b,h,y,m,k,x,j,C,O,w,S,_,P,R,E,T,N,B,L,A,F,$,z,I,D,V,H,M,W,U,q,Z,G,J,K,X,Y,Q,oo,eo,lo,ro,no,to,io,co,uo,ao,so,vo,fo,po,go,bo,ho,yo,mo,ko,xo,jo,Co,Oo,wo,So,_o,Po,Ro,Eo,To,No,Bo,Lo,Ao,Fo,$o,zo,Io,Do,Vo,Ho,Mo,Wo,Uo,qo,Zo,Go,Jo,Ko,Xo,Yo,Qo,oe,ee,le,re,ne,te,ie,de,ce,ue,ae,se,ve,fe,pe,ge,be,he,ye,me,ke,xe,je,Ce,Oe,we,Se;return c.jsx("div",{"data-variables-provider":!0,style:{"--file-color":null!==(v=null!==(d=null===(i=null===(t=null==e?void 0:e.colors)||void 0===t?void 0:t.default)||void 0===i?void 0:i.color)&&void 0!==d?d:null===(a=null===(u=null==o?void 0:o.colors)||void 0===u?void 0:u.default)||void 0===a?void 0:a.color)&&void 0!==v?v:s[r].color,"--file-background-color":null!==(y=null!==(g=null===(p=null===(f=null==e?void 0:e.colors)||void 0===f?void 0:f.default)||void 0===p?void 0:p.backgroundColor)&&void 0!==g?g:null===(h=null===(b=null==o?void 0:o.colors)||void 0===b?void 0:b.default)||void 0===h?void 0:h.backgroundColor)&&void 0!==y?y:s[r].backgroundColor,"--file-hover-color":null!==(O=null!==(x=null===(k=null===(m=null==e?void 0:e.colors)||void 0===m?void 0:m.hover)||void 0===k?void 0:k.color)&&void 0!==x?x:null===(C=null===(j=null==o?void 0:o.colors)||void 0===j?void 0:j.hover)||void 0===C?void 0:C.color)&&void 0!==O?O:s[r].hoverColor,"--file-hover-background-color":null!==(E=null!==(_=null===(S=null===(w=null==e?void 0:e.colors)||void 0===w?void 0:w.hover)||void 0===S?void 0:S.backgroundColor)&&void 0!==_?_:null===(R=null===(P=null==o?void 0:o.colors)||void 0===P?void 0:P.hover)||void 0===R?void 0:R.backgroundColor)&&void 0!==E?E:s[r].hoverBackgroundColor,"--file-focus-color":null!==(F=null!==(B=null===(N=null===(T=null==e?void 0:e.colors)||void 0===T?void 0:T.focus)||void 0===N?void 0:N.color)&&void 0!==B?B:null===(A=null===(L=null==o?void 0:o.colors)||void 0===L?void 0:L.focus)||void 0===A?void 0:A.color)&&void 0!==F?F:s[r].focusColor,"--file-focus-border-color":null!==(H=null!==(I=null===(z=null===($=null==e?void 0:e.colors)||void 0===$?void 0:$.focus)||void 0===z?void 0:z.borderColor)&&void 0!==I?I:null===(V=null===(D=null==o?void 0:o.colors)||void 0===D?void 0:D.focus)||void 0===V?void 0:V.borderColor)&&void 0!==H?H:s[r].focusBorderColor,"--file-focus-background-color":null!==(G=null!==(U=null===(W=null===(M=null==e?void 0:e.colors)||void 0===M?void 0:M.focus)||void 0===W?void 0:W.backgroundColor)&&void 0!==U?U:null===(Z=null===(q=null==o?void 0:o.colors)||void 0===q?void 0:q.focus)||void 0===Z?void 0:Z.backgroundColor)&&void 0!==G?G:s[r].focusBackgroundColor,"--file-selected-color":null!==(oo=null!==(X=null===(K=null===(J=null==e?void 0:e.colors)||void 0===J?void 0:J.selected)||void 0===K?void 0:K.color)&&void 0!==X?X:null===(Q=null===(Y=null==o?void 0:o.colors)||void 0===Y?void 0:Y.selected)||void 0===Q?void 0:Q.color)&&void 0!==oo?oo:s[r].selectedColor,"--file-selected-background-color":null!==(io=null!==(ro=null===(lo=null===(eo=null==e?void 0:e.colors)||void 0===eo?void 0:eo.selected)||void 0===lo?void 0:lo.backgroundColor)&&void 0!==ro?ro:null===(to=null===(no=null==o?void 0:o.colors)||void 0===no?void 0:no.selected)||void 0===to?void 0:to.backgroundColor)&&void 0!==io?io:s[r].selectedBackgroundColor,"--folder-color":null!==(fo=null!==(ao=null===(uo=null===(co=null==l?void 0:l.colors)||void 0===co?void 0:co.default)||void 0===uo?void 0:uo.color)&&void 0!==ao?ao:null===(vo=null===(so=null==o?void 0:o.colors)||void 0===so?void 0:so.default)||void 0===vo?void 0:vo.color)&&void 0!==fo?fo:s[r].color,"--folder-background-color":null!==(mo=null!==(bo=null===(go=null===(po=null==l?void 0:l.colors)||void 0===po?void 0:po.default)||void 0===go?void 0:go.backgroundColor)&&void 0!==bo?bo:null===(yo=null===(ho=null==o?void 0:o.colors)||void 0===ho?void 0:ho.default)||void 0===yo?void 0:yo.backgroundColor)&&void 0!==mo?mo:s[r].backgroundColor,"--folder-hover-color":null!==(wo=null!==(jo=null===(xo=null===(ko=null==l?void 0:l.colors)||void 0===ko?void 0:ko.hover)||void 0===xo?void 0:xo.color)&&void 0!==jo?jo:null===(Oo=null===(Co=null==o?void 0:o.colors)||void 0===Co?void 0:Co.hover)||void 0===Oo?void 0:Oo.color)&&void 0!==wo?wo:s[r].hoverColor,"--folder-hover-background-color":null!==(To=null!==(Po=null===(_o=null===(So=null==l?void 0:l.colors)||void 0===So?void 0:So.hover)||void 0===_o?void 0:_o.backgroundColor)&&void 0!==Po?Po:null===(Eo=null===(Ro=null==o?void 0:o.colors)||void 0===Ro?void 0:Ro.hover)||void 0===Eo?void 0:Eo.backgroundColor)&&void 0!==To?To:s[r].hoverBackgroundColor,"--folder-focus-color":null!==($o=null!==(Lo=null===(Bo=null===(No=null==l?void 0:l.colors)||void 0===No?void 0:No.focus)||void 0===Bo?void 0:Bo.color)&&void 0!==Lo?Lo:null===(Fo=null===(Ao=null==o?void 0:o.colors)||void 0===Ao?void 0:Ao.focus)||void 0===Fo?void 0:Fo.color)&&void 0!==$o?$o:s[r].focusColor,"--folder-focus-border-color":null!==(Mo=null!==(Do=null===(Io=null===(zo=null==l?void 0:l.colors)||void 0===zo?void 0:zo.focus)||void 0===Io?void 0:Io.borderColor)&&void 0!==Do?Do:null===(Ho=null===(Vo=null==o?void 0:o.colors)||void 0===Vo?void 0:Vo.focus)||void 0===Ho?void 0:Ho.borderColor)&&void 0!==Mo?Mo:s[r].focusBorderColor,"--folder-focus-background-color":null!==(Jo=null!==(qo=null===(Uo=null===(Wo=null==l?void 0:l.colors)||void 0===Wo?void 0:Wo.focus)||void 0===Uo?void 0:Uo.backgroundColor)&&void 0!==qo?qo:null===(Go=null===(Zo=null==o?void 0:o.colors)||void 0===Zo?void 0:Zo.focus)||void 0===Go?void 0:Go.backgroundColor)&&void 0!==Jo?Jo:s[r].focusBackgroundColor,"--folder-selected-color":null!==(ee=null!==(Yo=null===(Xo=null===(Ko=null==l?void 0:l.colors)||void 0===Ko?void 0:Ko.selected)||void 0===Xo?void 0:Xo.color)&&void 0!==Yo?Yo:null===(oe=null===(Qo=null==o?void 0:o.colors)||void 0===Qo?void 0:Qo.selected)||void 0===oe?void 0:oe.color)&&void 0!==ee?ee:s[r].selectedColor,"--folder-selected-background-color":null!==(de=null!==(ne=null===(re=null===(le=null==l?void 0:l.colors)||void 0===le?void 0:le.selected)||void 0===re?void 0:re.backgroundColor)&&void 0!==ne?ne:null===(ie=null===(te=null==o?void 0:o.colors)||void 0===te?void 0:te.selected)||void 0===ie?void 0:ie.backgroundColor)&&void 0!==de?de:s[r].selectedBackgroundColor,"--stuck-color":null!==(be=null!==(fe=null!==(ae=null===(ue=null===(ce=null==l?void 0:l.colors)||void 0===ce?void 0:ce.stuck)||void 0===ue?void 0:ue.color)&&void 0!==ae?ae:null===(ve=null===(se=null==l?void 0:l.colors)||void 0===se?void 0:se.default)||void 0===ve?void 0:ve.color)&&void 0!==fe?fe:null===(ge=null===(pe=null==o?void 0:o.colors)||void 0===pe?void 0:pe.default)||void 0===ge?void 0:ge.color)&&void 0!==be?be:s[r].color,"--stuck-background-color":null!==(we=null!==(je=null!==(me=null===(ye=null===(he=null==l?void 0:l.colors)||void 0===he?void 0:he.stuck)||void 0===ye?void 0:ye.backgroundColor)&&void 0!==me?me:null===(xe=null===(ke=null==l?void 0:l.colors)||void 0===ke?void 0:ke.default)||void 0===xe?void 0:xe.backgroundColor)&&void 0!==je?je:null===(Oe=null===(Ce=null==o?void 0:o.colors)||void 0===Ce?void 0:Ce.default)||void 0===Oe?void 0:Oe.backgroundColor)&&void 0!==we?we:s[r].backgroundColor,"--folding-shadow":null!==(Se=null==l?void 0:l.foldingShadow)&&void 0!==Se?Se:s[r].foldingShadow},children:n})};function T(o){const e=[],l=function(o){const e=[...o];return e.sort((o,e)=>{let l=0;const r=Math.min(o.length,e.length);for(;l<r&&o[l]===e[l];)l++;const n=o.slice(l),t=e.slice(l),i=n.includes("/"),d=t.includes("/");return i&&!d?-1:!i&&d?1:o.localeCompare(e)}),e}([...new Set(o)]);for(const o of l){const l=o.split("/");let r=e;l.forEach((o,e)=>{const n=e===l.length-1,t=r.find(e=>e.name===o);if(t)n||(r=t.children);else{const e=n?{name:o,children:null}:{name:o,children:[]};r.push(e),n||(r=e.children)}})}return e}exports.ArrowIcon=y,exports.FileIcon=h,exports.FileTree=({files:o,onFileSelect:l,folding:r=!0,depthDistance:n=16,paddingBottom:t=16,backgroundColor:i,nodeOptions:d,fileOptions:u,folderOptions:a,scrollContainerRef:v,theme:p="light"})=>{const g=T(o),b=e.useRef(null),h={depthDistance:n,nodeOptions:d},y={scrollContainerRef:r?v:void 0,folding:r,folderOptions:a},m={onFileSelect:l,fileOptions:u};return((o,l)=>{e.useLayoutEffect(()=>{const e=null==o?void 0:o.current;if(!e||!l)return;let r;const n=()=>{const o=e.querySelectorAll("[data-stuck]");if(!o.length)return;let l=!1;[...o].reverse().forEach(o=>{const e=o.checkVisibility(),r="true"===o.getAttribute("data-stuck");!l&&e&&r?(l=!0,o.setAttribute("data-fold","true")):e&&o.setAttribute("data-fold","false")})},t=new MutationObserver(o=>{o.some(o=>"attributes"===o.type&&"data-stuck"===o.attributeName&&o.target instanceof HTMLElement&&o.target.hasAttribute("data-folder-node"))&&(clearTimeout(r),r=setTimeout(n,50))});return t.observe(e,{attributes:!0,attributeOldValue:!1,subtree:!0,childList:!1,characterData:!1}),()=>{t.disconnect()}},[o.current,l])})(b,r),c.jsx("div",{ref:b,"data-file-tree":!0,style:Object.assign(Object.assign({},f),{paddingBottom:`${t}px`,backgroundColor:null!=i?i:s[p].backgroundColor}),children:c.jsx(E,{nodeOptions:d,fileOptions:u,folderOptions:a,theme:p,children:c.jsx(k,{config:h,children:c.jsx(C,{config:y,children:c.jsx(_,{config:m,children:g.map((o,e)=>c.jsx(R,{node:o,depth:1,elevation:g.length-e,parentPath:""},o.name))})})})})})};
|
|
11
11
|
//# sourceMappingURL=index.js.map
|