@canonical/react-ds-app-launchpad 0.15.0 → 0.15.1

package/dist/esm/ui/FileTree/common/IndentationBlock/styles.css

@@ -0,0 +1,32 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.indentation-block {
+  display: inline-flex;
+  gap: var(--file-tree-node-items-gap);
+  align-items: center;
+  user-select: none;
+
+  & > .indent-block {
+    width: var(--file-tree-node-indent-width);
+    position: relative;
+    isolation: isolate;
+
+    padding: var(--file-tree-node-vertical-padding) 0;
+    &:not(.empty)::before {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      transform: translateX(-50%);
+      width: var(--file-tree-node-indent-bar-width);
+      height: 100%;
+      background-color: var(--file-tree-node-indent-bar-color);
+    }
+  }
+  &:has(> .indent-block.empty) {
+    width: 0;
+    margin-left: calc(-1 * var(--file-tree-node-items-gap));
+  }
+}

package/dist/esm/ui/FileTree/common/IndentationBlock/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/FileTree/common/IndentationBlock/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/IndentationBlock/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/FileTree/common/Node/Context.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+export const rootLevelEmptyContext = {
+    depth: 0,
+    path: "",
+    addChildNode: () => { },
+    childNodes: [],
+};
+const Context = createContext(rootLevelEmptyContext);
+export default Context;
+//# sourceMappingURL=Context.js.map

package/dist/esm/ui/FileTree/common/Node/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/Node/Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,CAAC,MAAM,qBAAqB,GAAmB;IACnD,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,EAAE;IACR,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,OAAO,GAAG,aAAa,CAAiB,qBAAqB,CAAC,CAAC;AAErE,eAAe,OAAO,CAAC"}

package/dist/esm/ui/FileTree/common/Node/Provider.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useFileTree } from "../../hooks/index.js";
+import { dataPathHash } from "../../Provider.js";
+import { hashNodeName } from "../../utils/index.js";
+import { IndentationBlock } from "../IndentationBlock/index.js";
+import Context from "./Context.js";
+import { useNode } from "./hooks/index.js";
+import "./styles.css";
+const componentCssClassName = "ds node";
+const expandedCssClassName = "expanded";
+const expandableCssClassName = "expandable";
+const selectableCssClassName = "selectable";
+const selectedCssClassName = "selected";
+const Provider = ({ id, className, style, children, name, marker, ...nodeOptions }) => {
+    const { expandable, searchQuery, selectedFile, onSelectFile, focusNextNode, focusEndNode, focusNextSiblingCharacter, } = useFileTree();
+    const nodeRef = useRef({
+        name,
+        path: "",
+        type: nodeOptions.nodeType,
+    });
+    const { depth, path: parentPath, addChildNode } = useNode();
+    const [childNodes, setChildNodes] = useState([]);
+    const [isExpanded, setIsExpanded] = useState(nodeOptions.nodeType === "folder" && nodeOptions.defaultOpen);
+    const path = useMemo(() => `${parentPath}/${name}`, [parentPath, name]);
+    const isSelected = useMemo(() => selectedFile?.path === path, [selectedFile, path]);
+    const matchesQuery = useCallback((query, target) => {
+        return target.toLowerCase().includes(query.toLowerCase());
+    }, []);
+    const fileMatchesSearchQuery = useCallback((node) => {
+        if (!searchQuery)
+            return true;
+        // check if path matches in case of files
+        if (node.type === "file") {
+            return matchesQuery(searchQuery, node.name);
+        }
+        // check if any child/grandchild matches in case of folders
+        return (matchesQuery(searchQuery, node.name) ||
+            node.children?.some(fileMatchesSearchQuery));
+    }, [searchQuery, matchesQuery]);
+    const shouldHideNode = useMemo(() => {
+        if (!searchQuery)
+            return false;
+        return !fileMatchesSearchQuery(nodeRef.current);
+    }, [searchQuery, fileMatchesSearchQuery]);
+    const handleClick = useCallback((_event) => {
+        switch (nodeOptions.nodeType) {
+            case "folder":
+                if (expandable) {
+                    setIsExpanded((prev) => !prev);
+                }
+                break;
+            case "file":
+                onSelectFile?.({
+                    name,
+                    path,
+                    type: nodeOptions.nodeType,
+                });
+                break;
+        }
+    }, [nodeOptions.nodeType, onSelectFile, name, path, expandable]);
+    const handleKeyDown = (event) => {
+        if (event.ctrlKey || event.altKey || event.shiftKey || event.metaKey)
+            return;
+        if (event.key.match(/^[a-zA-Z0-9]$/)) {
+            focusNextSiblingCharacter(event.key);
+            event.preventDefault();
+        }
+        switch (event.key) {
+            case "ArrowRight":
+                if (!isExpanded && nodeOptions.nodeType === "folder" && expandable) {
+                    setIsExpanded(true);
+                    event.preventDefault();
+                }
+                else {
+                    focusNextNode("down");
+                    event.preventDefault();
+                }
+                break;
+            case "ArrowLeft":
+                if (isExpanded && nodeOptions.nodeType === "folder" && expandable) {
+                    setIsExpanded(false);
+                    event.preventDefault();
+                }
+                else {
+                    focusNextNode("up");
+                    event.preventDefault();
+                }
+                break;
+            case "ArrowDown":
+                focusNextNode("down");
+                event.preventDefault();
+                break;
+            case "ArrowUp":
+                focusNextNode("up");
+                event.preventDefault();
+                break;
+            case "Home":
+                focusEndNode("start");
+                event.preventDefault();
+                break;
+            case "End":
+                focusEndNode("end");
+                event.preventDefault();
+                break;
+            case "Enter":
+            case " ":
+                if (nodeOptions.nodeType === "file") {
+                    onSelectFile?.({
+                        name,
+                        path,
+                        type: nodeOptions.nodeType,
+                    });
+                }
+                event.preventDefault();
+                break;
+        }
+    };
+    // update parent's childNodes with the current node object reference
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the nodeRef.current is updated only once
+    useEffect(() => {
+        if (nodeRef.current) {
+            addChildNode(nodeRef.current);
+        }
+    }, []);
+    // update the node object information when the information changes
+    useEffect(() => {
+        if (nodeRef.current) {
+            nodeRef.current.path = path;
+            if (nodeRef.current.type === "folder") {
+                nodeRef.current.children = childNodes;
+            }
+        }
+    }, [path, childNodes]);
+    return (_jsxs(Context.Provider, { value: {
+            depth: depth + 1,
+            path,
+            addChildNode: (node) => setChildNodes((prev) => [...prev, node]),
+            childNodes,
+        }, children: [!shouldHideNode && (_jsxs("li", { id: id, style: style, [dataPathHash]: hashNodeName(path), "data-name": name, className: [
+                    componentCssClassName,
+                    className,
+                    nodeOptions.nodeType,
+                    isExpanded && expandedCssClassName,
+                    nodeOptions.nodeType === "folder" &&
+                        expandable &&
+                        expandableCssClassName,
+                    nodeOptions.nodeType === "file" &&
+                        onSelectFile !== undefined &&
+                        selectableCssClassName,
+                    isSelected && selectedCssClassName,
+                ]
+                    .filter(Boolean)
+                    .join(" "), role: "treeitem", "aria-expanded": nodeOptions.nodeType === "folder" ? isExpanded : undefined, "aria-selected": isSelected, tabIndex: -1, onClick: handleClick, onKeyDown: handleKeyDown, title: path, children: [_jsx(IndentationBlock, { depth: depth }), _jsx("div", { className: [
+                            "icon",
+                            nodeOptions.nodeType,
+                            isExpanded && expandedCssClassName,
+                        ]
+                            .filter(Boolean)
+                            .join(" ") }), _jsx("span", { className: "nodename", children: name }), marker && _jsx("div", { className: "marker", children: marker })] })), nodeOptions.nodeType === "folder" &&
+                (isExpanded || expandable === false) &&
+                children] }));
+};
+export default Provider;
+//# sourceMappingURL=Provider.js.map

package/dist/esm/ui/FileTree/common/Node/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/Node/Provider.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ui/FileTree/common/Node/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useNode } from "./useNode.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/common/Node/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/ui/FileTree/common/Node/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/ui/FileTree/common/Node/hooks/useNode.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import Context, { rootLevelEmptyContext } from "../Context.js";
+const useNode = () => {
+    const context = useContext(Context);
+    if (!context) {
+        // if no folder parent is found, that means file is at root level
+        return rootLevelEmptyContext;
+    }
+    return context;
+};
+export default useNode;
+//# sourceMappingURL=useNode.js.map

package/dist/esm/ui/FileTree/common/Node/hooks/useNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNode.js","sourceRoot":"","sources":["../../../../../../../src/ui/FileTree/common/Node/hooks/useNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,OAAO,EAAE,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE/D,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,iEAAiE;QACjE,OAAO,qBAAqB,CAAC;IAC/B,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/ui/FileTree/common/Node/index.js

@@ -0,0 +1,4 @@
+export { default as Context } from "./Context.js";
+export * from "./hooks/index.js";
+export { default as Node } from "./Provider.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/common/Node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/Node/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/ui/FileTree/common/Node/styles.css

@@ -0,0 +1,56 @@
+.ds.node {
+  list-style: none;
+  display: flex;
+  gap: var(--file-tree-node-items-gap);
+  align-items: center;
+
+  font-size: var(--file-tree-node-text-size);
+  font-weight: var(--file-tree-node-text-weight);
+  line-height: var(--file-tree-node-text-line-height);
+
+  /* vertical padding is set on the indentation level */
+  padding: 0 var(--file-tree-node-horizontal-padding);
+  cursor: default;
+  color: var(--file-tree-node-text-color-default);
+  border-left: 2px solid var(--file-tree-node-border-color);
+
+  &.selectable,
+  &.expandable {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--file-tree-node-background-color-hover);
+    }
+  }
+
+  &.selected,
+  &.selectable:focus,
+  &.expandable:focus {
+    color: var(--file-tree-node-text-color-active);
+    background-color: var(--file-tree-node-background-color-active);
+    border-color: var(--file-tree-node-border-color-active);
+    font-weight: var(--file-tree-node-text-weight-active);
+  }
+
+  & > .icon {
+    user-select: none;
+    width: var(--file-tree-node-icon-size);
+    &.file {
+      content: var(--file-tree-node-file-icon);
+    }
+    &.folder {
+      content: var(--file-tree-node-closed-folder-icon);
+      &.expanded {
+        content: var(--file-tree-node-opened-folder-icon);
+      }
+    }
+  }
+  & > .nodename {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  & > .marker {
+    display: inline-block;
+  }
+}

package/dist/esm/ui/FileTree/common/Node/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/FileTree/common/Node/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/Node/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/FileTree/common/SearchBox/SearchBox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import useFileTree from "../../hooks/useFileTree.js";
+import "./styles.css";
+const componentCssClassName = "ds search-box";
+/**
+ * description of the SearchBox component
+ * @returns {React.ReactElement} - Rendered SearchBox
+ */
+const SearchBox = ({ id, className, style, }) => {
+    const { searchQuery, onSearch } = useFileTree();
+    const handleSearch = useCallback((event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        onSearch?.(formData.get("search"));
+    }, [onSearch]);
+    const handleReset = useCallback((event) => {
+        event.preventDefault();
+        onSearch?.("");
+    }, [onSearch]);
+    const handleInputUpdate = useCallback((event) => {
+        onSearch?.(event.currentTarget.value);
+        event.preventDefault();
+    }, [onSearch]);
+    if (!onSearch) {
+        return null;
+    }
+    return (_jsxs("form", { id: id, style: style, className: [componentCssClassName, className].filter(Boolean).join(" "), onSubmit: handleSearch, onReset: handleReset, children: [_jsx("input", { value: searchQuery, onChange: handleInputUpdate, name: "search", className: "input", type: "search", placeholder: "Search", required: true, autoComplete: "off" }), _jsx("button", { type: "reset", className: "reset", children: _jsx("span", { className: "icon" }) }), _jsx("button", { type: "submit", className: "search", children: _jsx("span", { className: "icon" }) })] }));
+};
+export default SearchBox;
+//# sourceMappingURL=SearchBox.js.map

package/dist/esm/ui/FileTree/common/SearchBox/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/SearchBox/SearchBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,eAAe,CAAC;AAE9C;;;GAGG;AACH,MAAM,SAAS,GAAG,CAAC,EACjB,EAAE,EACF,SAAS,EACT,KAAK,GACU,EAA6B,EAAE;IAC9C,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IAEhD,MAAM,YAAY,GAA4C,WAAW,CACvE,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACnD,QAAQ,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAW,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,WAAW,GAA4C,WAAW,CACtE,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,iBAAiB,GACrB,WAAW,CACT,CAAC,KAAK,EAAE,EAAE;QACR,QAAQ,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtC,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEJ,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,aAEpB,gBACE,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,QAAQ,EACpB,QAAQ,QACR,YAAY,EAAC,KAAK,GAClB,EACF,iBAAQ,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,YACpC,eAAM,SAAS,EAAC,MAAM,GAAG,GAClB,EACT,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,YACtC,eAAM,SAAS,EAAC,MAAM,GAAG,GAClB,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/esm/ui/FileTree/common/SearchBox/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as SearchBox } from "./SearchBox.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/common/SearchBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/SearchBox/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/FileTree/common/SearchBox/styles.css

@@ -0,0 +1,65 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+.ds.search-box {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--file-tree-search-box-border-color);
+  padding: var(--file-tree-search-box-vertical-padding)
+    var(--file-tree-search-box-horizontal-padding);
+  background-color: var(--file-tree-search-box-background-color);
+
+  position: sticky;
+  top: 0;
+
+  &:focus-within {
+    outline: 2px solid Highlight;
+
+    /* biome-ignore lint/suspicious/noDuplicateProperties:legacy code */
+    outline: 2px solid -webkit-focus-ring-color;
+    outline-offset: -1px;
+    box-sizing: border-box;
+  }
+  & > .input {
+    flex: 1 1 100%;
+
+    vertical-align: baseline;
+    font-size: 1rem;
+    line-height: var(--file-tree-search-box-line-height);
+  }
+
+  & > .search,
+  & > .reset {
+    cursor: pointer;
+    width: var(--file-tree-search-box-button-size);
+    height: var(--file-tree-search-box-button-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+  }
+
+  & > .input:not(:valid) ~ .reset {
+    display: none;
+  }
+
+  & > .search > .icon {
+    content: var(--file-tree-search-box-search-icon);
+  }
+
+  & > .reset > .icon {
+    content: var(--file-tree-search-box-reset-icon);
+  }
+
+  /* remove search input default appearance */
+  & > .input {
+    border: none;
+
+    background-color: transparent;
+    border-color: transparent;
+    outline: none;
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+  }
+}

package/dist/esm/ui/FileTree/common/SearchBox/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/FileTree/common/SearchBox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/SearchBox/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/FileTree/common/TreeView/TreeView.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from "react";
+import File from "../File/File.js";
+import Folder from "../Folder/Folder.js";
+/**
+ * Render a tree view of the given file tree data
+ *
+ * @example
+ * <FileTree>
+ *  <FileTree.SearchBox />
+ *  <FileTree.TreeView tree={treeData} />
+ * </FileTree>
+ *
+ * @returns {React.ReactElement} - Rendered TreeView
+ */
+const TreeView = ({ tree, sortAlphabetically, defaultCollapsed = false, }) => {
+    const uid = useId();
+    const renderNode = useCallback((node, basePath = "") => {
+        const path = `${basePath}/${node.name}`;
+        switch (node.type) {
+            case "folder":
+                return (_jsx(Folder, { name: node.name, defaultOpen: !defaultCollapsed, children: node.children?.map((child) => renderNode(child, path)) }, `${uid}-${path}`));
+            case "file":
+                return (_jsx(File, { name: node.name, marker: node.marker }, `${uid}-${path}`));
+        }
+    }, [defaultCollapsed, uid]);
+    const sortedTree = useCallback((tree) => {
+        return [...tree]
+            .sort((a, b) => {
+            // folders first
+            if (a.type === "folder" && b.type === "file") {
+                return -1;
+            }
+            if (a.type === "file" && b.type === "folder") {
+                return 1;
+            }
+            // sort alphabetically
+            return a.name.localeCompare(b.name);
+        })
+            .map((node) => {
+            if (node.type === "folder" && node.children) {
+                // sort recursively folder children
+                return {
+                    ...node,
+                    children: sortedTree(node.children),
+                };
+            }
+            return node;
+        });
+    }, []);
+    const treeNode = useMemo(() => {
+        if (sortAlphabetically) {
+            return sortedTree(tree).map((node) => renderNode(node));
+        }
+        return tree.map((node) => renderNode(node));
+    }, [tree, sortAlphabetically, renderNode, sortedTree]);
+    return _jsx(_Fragment, { children: treeNode });
+};
+export default TreeView;
+//# sourceMappingURL=TreeView.js.map

package/dist/esm/ui/FileTree/common/TreeView/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/TreeView/TreeView.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAGzC;;;;;;;;;;GAUG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,GACV,EAAsB,EAAE;IACtC,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC;IAEpB,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,IAAkB,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE;QACpC,MAAM,IAAI,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACxC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,QAAQ;gBACX,OAAO,CACL,KAAC,MAAM,IAEL,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,CAAC,gBAAgB,YAE7B,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAJlD,GAAG,GAAG,IAAI,IAAI,EAAE,CAKd,CACV,CAAC;YACJ,KAAK,MAAM;gBACT,OAAO,CACL,KAAC,IAAI,IAEH,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,IAFd,GAAG,GAAG,IAAI,IAAI,EAAE,CAGrB,CACH,CAAC;QACN,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,GAAG,CAAC,CACxB,CAAC;IACF,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,IAAoB,EAAkB,EAAE;QACtE,OAAO,CAAC,GAAG,IAAI,CAAC;aACb,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACb,gBAAgB;YAChB,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC7C,OAAO,CAAC,CAAC,CAAC;YACZ,CAAC;YACD,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC7C,OAAO,CAAC,CAAC;YACX,CAAC;YACD,sBAAsB;YACtB,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5C,mCAAmC;gBACnC,OAAO;oBACL,GAAG,IAAI;oBACP,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;iBACpC,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,kBAAkB,EAAE,CAAC;YACvB,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IACvD,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/ui/FileTree/common/TreeView/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as TreeView } from "./TreeView.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/common/TreeView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/TreeView/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/FileTree/common/TreeView/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/FileTree/common/TreeView/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/TreeView/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/FileTree/common/index.js

@@ -0,0 +1,5 @@
+export * from "./File/index.js";
+export * from "./Folder/index.js";
+export * from "./SearchBox/index.js";
+export * from "./TreeView/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/FileTree/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/dist/esm/ui/FileTree/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useFileTree } from "./useFileTree.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/FileTree/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/esm/ui/FileTree/hooks/useFileTree.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import Context from "../Context.js";
+const useFileTree = () => {
+    const context = useContext(Context);
+    if (!context) {
+        throw new Error("useFileTree must be used within a FileTree component");
+    }
+    return context;
+};
+export default useFileTree;
+//# sourceMappingURL=useFileTree.js.map

package/dist/esm/ui/FileTree/hooks/useFileTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileTree.js","sourceRoot":"","sources":["../../../../../src/ui/FileTree/hooks/useFileTree.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,MAAM,WAAW,GAAG,GAAG,EAAE;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;IAC1E,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/ui/FileTree/index.js

@@ -0,0 +1,10 @@
+/* @canonical/generator-ds 0.9.0-experimental.1 */
+export * from "./hooks/index.js";
+import { File, Folder, SearchBox, TreeView } from "./common/index.js";
+import Provider from "./Provider.js";
+export const FileTree = Provider;
+FileTree.SearchBox = SearchBox;
+FileTree.File = File;
+FileTree.TreeView = TreeView;
+FileTree.Folder = Folder;
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/FileTree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/FileTree/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,cAAc,kBAAkB,CAAC;AAOjC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,QAAQ,MAAM,eAAe,CAAC;AAGrC,MAAM,CAAC,MAAM,QAAQ,GAAG,QAA6B,CAAC;AACtD,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;AAC/B,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;AACrB,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC7B,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC"}