@cube-dev/ui-kit 0.0.0-canary-7480fe6 → 0.0.0-canary-00505d5

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -14,12 +14,12 @@ const react_1 = require("react");
 const interactions_1 = require("@react-aria/interactions");
 const radio_1 = require("@react-aria/radio");
 const context_1 = require("./context");
-const styles_1 = require("../../../utils/styles");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../tasty/utils/styles");
+const StylesProvider_1 = require("../../../tasty/providers/StylesProvider");
+const list_1 = require("../../../tasty/styles/list");
 const Base_1 = require("../../Base");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const interactions_2 = require("../../../utils/interactions");
+const filterBaseProps_1 = require("../../../tasty/utils/filterBaseProps");
+const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const provider_1 = require("../../../provider");
 const Label_1 = require("../Label");

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -17,10 +17,10 @@ const radio_1 = require("@react-aria/radio");
 const radio_2 = require("@react-stately/radio");
 const Form_1 = require("../Form/Form");
 const context_1 = require("./context");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../tasty/utils/styles");
+const list_1 = require("../../../tasty/styles/list");
 const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
+const StylesProvider_1 = require("../../../tasty/providers/StylesProvider");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const GROUP_STYLES = {

package/cjs/components/forms/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -15,13 +15,13 @@ const switch_1 = require("@react-aria/switch");
 const interactions_1 = require("@react-aria/interactions");
 const toggle_1 = require("@react-stately/toggle");
 const provider_1 = require("../../../provider");
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
+const list_1 = require("../../../tasty/styles/list");
+const styles_1 = require("../../../tasty/utils/styles");
 const Base_1 = require("../../Base");
-const interactions_2 = require("../../../utils/interactions");
+const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
+const filterBaseProps_1 = require("../../../tasty/utils/filterBaseProps");
+const StylesProvider_1 = require("../../../tasty/providers/StylesProvider");
 const HiddenInput_1 = require("../../HiddenInput");
 const Label_1 = require("../Label");
 const icons_1 = require("@ant-design/icons");

package/cjs/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -32,10 +32,10 @@ function TextArea(props, ref) {
             input.style.height = 'auto';
             input.style.height = input.scrollHeight
                 ? `calc(${input.scrollHeight}px + (2 * var(--border-width)))`
-                : `${parseFloat(computedStyle.paddingTop)
-                    + parseFloat(computedStyle.paddingBottom)
-                    + parseFloat(computedStyle.lineHeight) * (rows || 3)
-                    + 2}px`;
+                : `${parseFloat(computedStyle.paddingTop) +
+                    parseFloat(computedStyle.paddingBottom) +
+                    parseFloat(computedStyle.lineHeight) * (rows || 3) +
+                    2}px`;
             input.style.alignSelf = prevAlignment;
         }
     }, [inputRef]);

package/cjs/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/forms/TextInput/TextInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -16,12 +16,12 @@ const Form_1 = require("../Form/Form");
 const interactions_1 = require("@react-aria/interactions");
 const provider_1 = require("../../../provider");
 const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const interactions_2 = require("../../../utils/interactions");
+const styles_1 = require("../../../tasty/utils/styles");
+const list_1 = require("../../../tasty/styles/list");
+const interactions_2 = require("../../../utils/react/interactions");
 const Prefix_1 = require("../../layout/Prefix");
 const Suffix_1 = require("../../layout/Suffix");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
+const StylesProvider_1 = require("../../../tasty/providers/StylesProvider");
 const FieldWrapper_1 = require("../FieldWrapper");
 const Space_1 = require("../../layout/Space");
 const Block_1 = require("../../Block");

package/cjs/components/forms/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ exports.Flex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const list_1 = require("../../tasty/styles/list");
+const styles_1 = require("../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../tasty/utils/filterBaseProps");
 const DEFAULT_STYLES = {
     display: 'flex',
     flow: 'row',

package/cjs/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ exports.Flow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const list_1 = require("../../tasty/styles/list");
+const styles_1 = require("../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../tasty/utils/filterBaseProps");
 const DEFAULT_STYLES = {
     display: 'block',
     flow: 'column',

package/cjs/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const list_1 = require("../../tasty/styles/list");
+const styles_1 = require("../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../tasty/utils/filterBaseProps");
 const DEFAULT_STYLES = {
     display: 'grid',
     flow: 'row',

package/cjs/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ exports.Prefix = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const list_1 = require("../../tasty/styles/list");
+const styles_1 = require("../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../tasty/utils/filterBaseProps");
 const react_2 = require("../../utils/react");
 const DEFAULT_STYLES = {
     position: 'absolute',

package/cjs/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ exports.Space = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const list_1 = require("../../tasty/styles/list");
+const styles_1 = require("../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../tasty/utils/filterBaseProps");
 const DEFAULT_STYLES = {
     display: 'flex',
     gap: true,

package/cjs/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -11,9 +11,9 @@ exports.Suffix = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Base_1 = require("../Base");
-const list_1 = require("../../styles/list");
-const styles_1 = require("../../utils/styles");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const list_1 = require("../../tasty/styles/list");
+const styles_1 = require("../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../tasty/utils/filterBaseProps");
 const react_2 = require("../../utils/react");
 const DEFAULT_STYLES = {
     position: 'absolute',

package/cjs/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/navigation/Link/Link.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 

package/cjs/components/{content → organisms}/Alert/Alert.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -14,10 +14,13 @@ exports.Alert = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const themes_1 = __importDefault(require("../../../data/themes"));
-const styled_1 = require("../../../styled");
-const use_alert_1 = require("./use-alert");
-const RawAlert = (0, styled_1.styled)({
-    name: 'Alert',
+const list_1 = require("../../../tasty/styles/list");
+const styles_1 = require("../../../tasty/utils/styles");
+const filterBaseProps_1 = require("../../../tasty/utils/filterBaseProps");
+const tasty_1 = require("../../../tasty");
+const RawAlert = (0, tasty_1.tasty)({
+    role: 'alert',
+    qa: 'Alert',
     styles: {
         display: 'block',
         flow: 'column',
@@ -43,14 +46,13 @@ const RawAlert = (0, styled_1.styled)({
             }, {}),
         },
     },
-    props: {
-        role: 'alert',
-        qa: 'Alert',
-    },
 });
-exports.Alert = (0, react_1.forwardRef)((props, ref) => {
-    const { styles, theme, filteredProps } = (0, use_alert_1.useAlert)(props);
-    return ((0, jsx_runtime_1.jsx)(RawAlert, { ...filteredProps, "data-type": theme, styles: styles, ref: ref }, void 0));
+const STYLE_LIST = [...list_1.CONTAINER_STYLES, ...list_1.TEXT_STYLES];
+exports.Alert = (0, react_1.forwardRef)((allProps, ref) => {
+    let { type, label, isDisabled, ...props } = allProps;
+    type = isDisabled ? 'disabled' : type || 'note';
+    const styles = (0, styles_1.extractStyles)(props, STYLE_LIST);
+    return ((0, jsx_runtime_1.jsx)(RawAlert, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), "data-type": type, styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/{content → organisms}/CopySnippet/CopySnippet.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-7480fe6
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
  * Released under the MIT license.
  */
 
@@ -14,14 +14,14 @@ exports.CopySnippet = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clipboard_copy_1 = __importDefault(require("clipboard-copy"));
 const actions_1 = require("../../actions");
-const Card_1 = require("../Card/Card");
+const Card_1 = require("../../content/Card/Card");
 const Grid_1 = require("../../layout/Grid");
-const styled_1 = require("../../../styled");
+const tasty_1 = require("../../../tasty");
 const PrismCode_1 = require("../../content/PrismCode/PrismCode");
 const notification_1 = require("../../../services/notification");
 const icons_1 = require("@ant-design/icons");
 const TooltipTrigger_1 = require("../../overlays/Tooltip/TooltipTrigger");
-const actions_2 = require("../../actions");
+const Action_1 = require("../../actions/Action");
 const Tooltip_1 = require("../../overlays/Tooltip/Tooltip");
 const POSITION_ACTION = {
     position: 'absolute',
@@ -29,7 +29,7 @@ const POSITION_ACTION = {
     top: 0,
     zIndex: 1,
 };
-const StyledBlock = (0, styled_1.styled)({
+const StyledBlock = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
         overflow: {
@@ -50,7 +50,7 @@ const StyledBlock = (0, styled_1.styled)({
         },
     },
 });
-const ButtonContainer = (0, styled_1.styled)({
+const ButtonContainer = (0, tasty_1.tasty)({
     styles: {
         position: 'relative',
         '&::after': {
@@ -103,7 +103,7 @@ function CopySnippet(allProps) {
                         },
                     }, style: POSITION_ACTION, onPress: onCopy, icon: (0, jsx_runtime_1.jsx)(icons_1.CopyOutlined, {}, void 0) }, void 0)] }, void 0) }, void 0));
     if (showTooltip) {
-        return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(actions_2.Action, { styles: { display: 'block', cursor: 'default', width: '100%' }, children: Snippet }, void 0), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode }, void 0)] }, void 0));
+        return ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { children: [(0, jsx_runtime_1.jsx)(Action_1.Action, { styles: { display: 'block', cursor: 'default', width: '100%' }, children: Snippet }, void 0), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { children: formattedCode }, void 0)] }, void 0));
     }
     return Snippet;
 }

package/cjs/components/organisms/DirectoryTree/DirectoryTree.js

@@ -0,0 +1,166 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-00505d5
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectoryTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@ant-design/icons");
+const Flex_1 = require("../../layout/Flex");
+const Action_1 = require("../../actions/Action");
+const actions_1 = require("../../actions");
+const Space_1 = require("../../layout/Space");
+const Block_1 = require("../../Block");
+const IMAGES = {
+    created: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.714 8.572h2.714v2.715c0 .078.065.142.143.142h.857a.143.143 0 00.143-.143V8.572h2.715a.143.143 0 00.142-.143v-.857a.143.143 0 00-.142-.143H8.57V4.715a.143.143 0 00-.143-.143h-.857a.143.143 0 00-.143.143V7.43H4.714a.143.143 0 00-.143.143v.857c0 .079.065.143.143.143z", fill: "#67C082" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#67C082" }, void 0)] }, void 0)),
+    deleted: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.714 8.57h6.572a.143.143 0 00.142-.142V7.57a.143.143 0 00-.142-.143H4.714a.143.143 0 00-.143.143v.857c0 .078.065.143.143.143z", fill: "#FF646D" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FF646D" }, void 0)] }, void 0)),
+    modified: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FBBC05" }, void 0), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "2.222", fill: "#FBBC05" }, void 0)] }, void 0)),
+};
+const TEXT_OVERFLOW_STYLES = {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    overflow: 'hidden',
+};
+function calcPadding(indent) {
+    return `.75x .5x .75x ${1.5 * indent + 0.5}x`;
+}
+function extractLeafKeys(subTreeData, dirsOnly = false) {
+    return subTreeData.reduce((list, item) => {
+        if (!item.isLeaf) {
+            list.push(item.key);
+            list.push(...extractLeafKeys(item.children || []));
+        }
+        else if (!dirsOnly) {
+            list.push(item.key);
+        }
+        return list;
+    }, []);
+}
+const MODE_BG = {
+    created: {
+        '': '#success.10',
+        hovered: '#success.15',
+    },
+    deleted: {
+        '': '#danger.08',
+        hovered: '#danger.13',
+    },
+};
+const MODE_COLOR = {
+    created: '#success',
+    deleted: '#danger',
+};
+function getItemStyles({ isSelected, mode, indent }) {
+    return {
+        width: 'max 100%',
+        radius: true,
+        textAlign: 'left',
+        fill: isSelected
+            ? '#purple.05'
+            : MODE_BG[mode] || {
+                '': '#clear',
+                hovered: '#dark.04',
+            },
+        color: isSelected ? '#purple-text' : MODE_COLOR[mode] || '#dark.75',
+        outline: {
+            '': '#purple-03.0',
+            'focused & focus-visible': '#purple-03',
+        },
+        fontWeight: isSelected ? 500 : 400,
+        padding: calcPadding(indent),
+    };
+}
+function Item(props) {
+    let { children, mode, indent, onPress, isSelected } = props;
+    return ((0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onPress, styles: getItemStyles({ isSelected, mode, indent }), style: { whiteSpace: 'nowrap' }, children: children }, void 0));
+}
+function sortTreeData(filesTree) {
+    filesTree = filesTree.map((item) => {
+        return {
+            ...item,
+            children: item.children ? sortTreeData(item.children) : undefined,
+        };
+    });
+    return filesTree.sort((a, b) => {
+        if (!a.isLeaf && b.isLeaf) {
+            return -1;
+        }
+        else if (!b.isLeaf && a.isLeaf) {
+            return 1;
+        }
+        else if (a.title && b.title) {
+            return a.title.localeCompare(b.title, 'en', { sensitivity: 'base' });
+        }
+        else {
+            return 0;
+        }
+    });
+}
+const HOVER_CSS = `
+  &:hover .actions {
+    opacity: 1;
+  }
+  &:not(:hover) .actions {
+    opacity: 0;
+  }
+`;
+function DirectoryTree(props) {
+    let { onSelect, treeData, selectedKey, defaultExpandAll, rootTitle, actionsPanel, onlyDirs, ...otherProps } = props;
+    treeData = sortTreeData(treeData);
+    const [expanded, setExpanded] = (0, react_1.useState)(['/']);
+    const [selected, setSelected] = (0, react_1.useState)(selectedKey);
+    const fullTreeData = [
+        {
+            key: '/',
+            title: rootTitle || '/',
+            children: treeData,
+        },
+    ];
+    (0, react_1.useEffect)(() => {
+        setSelected(selectedKey);
+    }, [selectedKey]);
+    (0, react_1.useEffect)(() => {
+        if (defaultExpandAll) {
+            setExpanded(extractLeafKeys(fullTreeData, true));
+        }
+    }, []);
+    function toggle(item) {
+        if (expanded.includes(item.key)) {
+            setExpanded(expanded.filter((key) => key !== item.key));
+        }
+        else {
+            setExpanded([...expanded, item.key]);
+        }
+    }
+    function select(item) {
+        onSelect && onSelect(item.key);
+        setSelected(item.key);
+    }
+    function recursiveRender(subTreeData, indent = 0) {
+        return subTreeData.reduce((list, item) => {
+            if (!item.isLeaf) {
+                list.push((0, jsx_runtime_1.jsx)(Item, { indent: indent, isSelected: selected === item.key, onPress: () => select(item), children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", css: HOVER_CSS, children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { type: "clear", margin: "-.5x", padding: ".25x", color: {
+                                    '': '#dark.60',
+                                    hovered: '#purple',
+                                }, onPress: () => toggle(item), label: expanded.includes(item.key) ? 'Collapse' : 'Expand', children: expanded.includes(item.key) ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}, void 0)) }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", flexGrow: 1, color: selected === item.key ? '#purple' : '#dark.50', children: [expanded.includes(item.key) ? ((0, jsx_runtime_1.jsx)(icons_1.FolderOpenFilled, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.FolderFilled, {}, void 0)), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0)] }, void 0), actionsPanel && actionsPanel(item)] }, void 0) }, item.key));
+                if (expanded.includes(item.key)) {
+                    list.push(...recursiveRender(item.children || [], indent + 1));
+                }
+            }
+            else if (!onlyDirs) {
+                list.push((0, jsx_runtime_1.jsx)(Item, { indent: indent + 1.7, isSelected: selected === item.key, onPress: () => select(item), mode: item.mode, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", css: HOVER_CSS, color: selected === item.key ? '#purple' : '#dark.50', children: [(0, jsx_runtime_1.jsx)(icons_1.FileOutlined, {}, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, flexGrow: 1, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0), actionsPanel && actionsPanel(item), item.mode && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { padding: "0 .5x", placeItems: "center", children: IMAGES[item.mode] }, void 0))] }, void 0) }, item.key));
+            }
+            return list;
+        }, []);
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { styles: { flow: 'column', fontWeight: 500, width: '100%', gap: '1bw' }, ...otherProps, children: recursiveRender(fullTreeData) }, void 0));
+}
+exports.DirectoryTree = DirectoryTree;
+
+