@veracity/vui 2.1.0 → 2.3.0

package/dist/cjs/theme/foundations/colors.js

@@ -106,7 +106,8 @@ exports.darkBlue = {
     18: 'hsl(223, 67%, 18%)',
     15: 'hsl(223, 67%, 15%)',
     10: 'hsl(223, 67%, 10%)',
-    5: 'hsl(223, 67%, 5%)'
+    5: 'hsl(223, 67%, 5%)',
+    main: 'hsl(223, 67%, 18%)'
 };
 exports.digiGreen = {
     95: 'hsl(139, 100%, 95%)',
@@ -127,7 +128,8 @@ exports.digiGreen = {
     20: 'hsl(139, 100%, 20%)',
     15: 'hsl(139, 100%, 15%)',
     10: 'hsl(139, 100%, 10%)',
-    5: 'hsl(139, 100%, 5%)'
+    5: 'hsl(139, 100%, 5%)',
+    main: 'hsl(139, 100%, 78%)'
 };
 exports.earth = {
     95: 'hsl(35, 53%, 95%)',
@@ -148,7 +150,8 @@ exports.earth = {
     20: 'hsl(35, 53%, 20%)',
     15: 'hsl(35, 53%, 15%)',
     10: 'hsl(35, 53%, 10%)',
-    5: 'hsl(35, 53%, 5%)'
+    5: 'hsl(35, 53%, 5%)',
+    main: 'hsl(35, 53%, 89%)'
 };
 exports.energyRed = {
     95: 'hsl(357, 83%, 95%)',
@@ -169,7 +172,8 @@ exports.energyRed = {
     20: 'hsl(357, 83%, 20%)',
     15: 'hsl(357, 83%, 15%)',
     10: 'hsl(357, 83%, 10%)',
-    5: 'hsl(357, 83%, 5%)'
+    5: 'hsl(357, 83%, 5%)',
+    main: 'hsl(357, 83%, 54%)'
 };
 exports.landGreen = {
     95: 'hsl(114, 49%, 95%)',
@@ -190,7 +194,8 @@ exports.landGreen = {
     20: 'hsl(114, 49%, 20%)',
     15: 'hsl(114, 49%, 15%)',
     10: 'hsl(114, 49%, 10%)',
-    5: 'hsl(114, 49%, 5%)'
+    5: 'hsl(114, 49%, 5%)',
+    main: 'hsl(114, 49%, 41%)'
 };
 exports.seaBlue = {
     95: 'hsl(218, 100%, 95%)',
@@ -211,7 +216,8 @@ exports.seaBlue = {
     20: 'hsl(218, 100%, 20%)',
     15: 'hsl(218, 100%, 15%)',
     10: 'hsl(218, 100%, 10%)',
-    5: 'hsl(218, 100%, 5%)'
+    5: 'hsl(218, 100%, 5%)',
+    main: 'hsl(218, 100%, 28%)'
 };
 exports.sandstone = {
     95: 'hsl(40, 3%, 95%)',
@@ -232,7 +238,8 @@ exports.sandstone = {
     20: 'hsl(40, 3%, 20%)',
     15: 'hsl(40, 3%, 15%)',
     10: 'hsl(40, 3%, 10%)',
-    5: 'hsl(40, 3%, 5%)'
+    5: 'hsl(40, 3%, 5%)',
+    main: 'hsl(40, 3%, 79%)'
 };
 exports.skyBlue = {
     97: 'hsl(196, 74%, 97%)',
@@ -253,7 +260,8 @@ exports.skyBlue = {
     20: 'hsl(196, 74%, 20%)',
     15: 'hsl(196, 74%, 15%)',
     10: 'hsl(196, 74%, 10%)',
-    5: 'hsl(196, 74%, 5%)'
+    5: 'hsl(196, 74%, 5%)',
+    main: 'hsl(196, 74%, 77%)'
 };
 exports.sunflower = {
     95: 'hsl(55, 100%, 95%)',
@@ -274,7 +282,8 @@ exports.sunflower = {
     20: 'hsl(55, 100%, 20%)',
     15: 'hsl(55, 100%, 15%)',
     10: 'hsl(55, 100%, 10%)',
-    5: 'hsl(55, 100%, 5%)'
+    5: 'hsl(55, 100%, 5%)',
+    main: 'hsl(55, 100%, 73%)'
 };
 exports.terracotta = {
     95: 'hsl(34, 100%, 95%)',
@@ -295,7 +304,8 @@ exports.terracotta = {
     20: 'hsl(34, 100%, 20%)',
     15: 'hsl(34, 100%, 15%)',
     10: 'hsl(34, 100%, 10%)',
-    5: 'hsl(34, 100%, 5%)'
+    5: 'hsl(34, 100%, 5%)',
+    main: 'hsl(34, 100%, 35%)'
 };
 exports.warmGrey = {
     95: 'hsl(30, 8%, 95%)',
@@ -316,7 +326,8 @@ exports.warmGrey = {
     20: 'hsl(30, 8%, 20%)',
     15: 'hsl(30, 8%, 15%)',
     10: 'hsl(30, 8%, 10%)',
-    5: 'hsl(30, 8%, 5%)'
+    5: 'hsl(30, 8%, 5%)',
+    main: 'hsl(30, 8%, 56%)'
 };
 exports.blue = {
     10: '#f6fbff',

package/dist/cjs/theme/foundations/index.d.ts

@@ -91,6 +91,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         digiGreen: {
             95: string;
@@ -112,6 +113,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         earth: {
             95: string;
@@ -133,6 +135,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         energyRed: {
             95: string;
@@ -154,6 +157,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         focusColor: string;
         landGreen: {
@@ -176,6 +180,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         sandstone: {
             95: string;
@@ -197,6 +202,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         seaBlue: {
             95: string;
@@ -218,6 +224,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         skyBlue: {
             97: string;
@@ -239,6 +246,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         sunflower: {
             95: string;
@@ -260,6 +268,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         terracotta: {
             95: string;
@@ -281,6 +290,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         warmGrey: {
             95: string;
@@ -302,6 +312,7 @@ declare const _default: {
             15: string;
             10: string;
             5: string;
+            main: string;
         };
         blue: {
             10: string;

package/dist/cjs/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/cjs/tooltip/{tooltip.setup.d.ts → consts.d.ts}

@@ -1,5 +1,7 @@
 export declare const pointerSize = 12;
-export declare const color = "prussian.80";
+export declare const bg = "darkBlue.18";
+export declare const borderRaduis = 1;
+export declare const boxShadow = 2;
 export declare const pointerPlacement: {
     top: {
         top: string;
@@ -30,4 +32,4 @@ export declare const pointerPlacement: {
         translate: string;
     };
 };
-//# sourceMappingURL=tooltip.setup.d.ts.map
+//# sourceMappingURL=consts.d.ts.map

package/dist/cjs/tooltip/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/tooltip/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,EAAE,gBAAgB,CAAA;AAE/B,eAAO,MAAM,YAAY,IAAI,CAAA;AAE7B,eAAO,MAAM,SAAS,IAAI,CAAA;AAE1B,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAA"}

package/dist/cjs/tooltip/{tooltip.setup.js → consts.js}

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pointerPlacement = exports.color = exports.pointerSize = void 0;
+exports.pointerPlacement = exports.boxShadow = exports.borderRaduis = exports.bg = exports.pointerSize = void 0;
 exports.pointerSize = 12;
-exports.color = 'prussian.80';
+exports.bg = 'darkBlue.18';
+exports.borderRaduis = 1;
+exports.boxShadow = 2;
 exports.pointerPlacement = {
     top: {
         top: 'auto',

package/dist/cjs/tooltip/tooltip.js

@@ -9,7 +9,7 @@ const react_2 = __importDefault(require("react"));
 const box_1 = __importDefault(require("../box"));
 const core_1 = require("../core");
 const link_1 = require("../link");
-const tooltip_setup_1 = require("./tooltip.setup");
+const consts_1 = require("./consts");
 const tooltipContent_1 = require("./tooltipContent");
 /**
  * A simple text popup hint.
@@ -21,12 +21,12 @@ const Tooltip = (props) => {
     const { children, fontSize = '16px', linkText, linkProps, maxWidth = '400px', text = 'Tooltip', placement = 'top' } = props;
     const isDesktop = (0, core_1.useUp)('md');
     return (react_2.default.createElement(react_1.default, { content: react_2.default.createElement(tooltipContent_1.TooltipContent, { fontSize: fontSize, maxWidth: maxWidth },
-            isDesktop && (react_2.default.createElement(box_1.default, { bg: tooltip_setup_1.color, bottom: tooltip_setup_1.pointerPlacement[placement].bottom, h: `${tooltip_setup_1.pointerSize}px`, left: tooltip_setup_1.pointerPlacement[placement].left, position: "absolute", right: tooltip_setup_1.pointerPlacement[placement].right, top: tooltip_setup_1.pointerPlacement[placement].top, transform: `translate(${tooltip_setup_1.pointerPlacement[placement].translate}) rotate(45deg)`, w: `${tooltip_setup_1.pointerSize}px` })),
+            isDesktop && (react_2.default.createElement(box_1.default, { bg: consts_1.bg, bottom: consts_1.pointerPlacement[placement].bottom, h: `${consts_1.pointerSize}px`, left: consts_1.pointerPlacement[placement].left, position: "absolute", right: consts_1.pointerPlacement[placement].right, top: consts_1.pointerPlacement[placement].top, transform: `translate(${consts_1.pointerPlacement[placement].translate}) rotate(45deg)`, w: `${consts_1.pointerSize}px` })),
             react_2.default.createElement(core_1.v.div, null,
                 text,
                 !!linkText && (react_2.default.createElement(react_2.default.Fragment, null,
                     "\u00A0",
-                    react_2.default.createElement(link_1.Link, Object.assign({ variant: "light" }, linkProps), linkText))))), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
+                    react_2.default.createElement(link_1.Link, Object.assign({ variant: "white" }, linkProps), linkText))))), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
             modifiers: [
                 {
                     name: 'flip',

package/dist/cjs/tooltip/tooltipContent.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from './tooltip.types';
-export declare const TooltipContent: (props: TooltipProps) => JSX.Element;
+export declare const TooltipContent: ({ children, fontSize, maxWidth }: TooltipProps) => JSX.Element;
 //# sourceMappingURL=tooltipContent.d.ts.map

package/dist/cjs/tooltip/tooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,UAAW,YAAY,gBAoBjD,CAAA"}
+{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,qCAAyD,YAAY,gBAiB/F,CAAA"}

package/dist/cjs/tooltip/tooltipContent.js

@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipContent = void 0;
 const react_1 = __importDefault(require("react"));
 const box_1 = __importDefault(require("../box"));
-const tooltip_setup_1 = require("./tooltip.setup");
-const TooltipContent = (props) => {
-    const { children, fontSize = '16px', maxWidth = '400px' } = props;
-    return (react_1.default.createElement(box_1.default, { bg: tooltip_setup_1.color, borderRadius: "md", boxShadow: "2", className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
-};
+const consts_1 = require("./consts");
+const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }) => (react_1.default.createElement(box_1.default, { bg: consts_1.bg, borderRadius: consts_1.borderRaduis, boxShadow: consts_1.boxShadow, className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
 exports.TooltipContent = TooltipContent;

package/dist/cjs/tree/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const TreeProvider: import("react").Provider<Dict<any>>, useTreeContext: () => Dict<any>;
+export { TreeProvider, useTreeContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/cjs/tree/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/tree/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,YAAY,uCAAE,cAAc,iBAA6C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/cjs/tree/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeContext = exports.TreeProvider = void 0;
+const utils_1 = require("../utils");
+const [TreeProvider, useTreeContext] = (0, utils_1.createContext)({ isOptional: true });
+exports.TreeProvider = TreeProvider;
+exports.useTreeContext = useTreeContext;

package/dist/cjs/tree/index.d.ts

@@ -0,0 +1,8 @@
+export * from './context';
+export * from './tree';
+export { default } from './tree';
+export * from './tree.types';
+export * from './treeIcon';
+export * from './treeItem';
+export * from './treeText';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA"}

package/dist/cjs/tree/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./tree"), exports);
+var tree_1 = require("./tree");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(tree_1).default; } });
+__exportStar(require("./tree.types"), exports);
+__exportStar(require("./treeIcon"), exports);
+__exportStar(require("./treeItem"), exports);
+__exportStar(require("./treeText"), exports);

package/dist/cjs/tree/theme.d.ts

@@ -0,0 +1,59 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    item: Dict<any>;
+};
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        sm: {
+            icon: {
+                size: string;
+            };
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
+        md: {
+            icon: {
+                size: string;
+            };
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+        };
+        lg: {
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+            icon: {
+                size: string;
+            };
+        };
+        xl: {
+            item: {
+                fontSize: string;
+                h: number;
+                py: string;
+            };
+            icon: {
+                scale: number;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/cjs/tree/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tree/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,cAAc,CAAC,KAAK,EAAE,IAAI;;EASlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DD,wBAMC"}

package/dist/cjs/tree/theme.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    const item = {
+        activeBg: 'skyBlue.30',
+        hoverBg: 'skyBlue.20',
+        selectedBg: 'skyBlue.10',
+        px: 2
+    };
+    return { item };
+}
+const baseStyle = {};
+const defaultProps = {
+    size: 'md',
+    variant: 'default'
+};
+const parts = ['container', 'icon', 'item', 'text'];
+const sizes = {
+    sm: {
+        icon: {
+            size: 'xs'
+        },
+        item: {
+            fontSize: 'md',
+            h: 32,
+            py: '3px'
+        }
+    },
+    md: {
+        icon: {
+            size: 'sm'
+        },
+        item: {
+            fontSize: 'md',
+            h: 40,
+            py: '5px'
+        }
+    },
+    lg: {
+        item: {
+            fontSize: 'md',
+            h: 48,
+            py: '7px'
+        },
+        icon: {
+            size: 'md'
+        }
+    },
+    xl: {
+        item: {
+            fontSize: 'lg',
+            h: 56,
+            py: '9px'
+        },
+        icon: {
+            scale: 2
+        }
+    }
+};
+const variants = {
+    default: variantDefault
+};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/dist/cjs/tree/tree.d.ts

@@ -0,0 +1,14 @@
+import { VuiComponent } from '../core';
+import { TreeProps } from './tree.types';
+import TreeIcon from './treeIcon';
+import TreeItem from './treeItem';
+import TreeText from './treeText';
+export declare const TreeBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
+export declare const Tree: VuiComponent<"div", TreeProps> & {
+    Icon: typeof TreeIcon;
+    Item: typeof TreeItem;
+    Text: typeof TreeText;
+};
+export default Tree;
+//# sourceMappingURL=tree.d.ts.map

package/dist/cjs/tree/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAA6B,SAAS,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAGjC,eAAO,MAAM,QAAQ,+HAKpB,CAAA;AAED,+GAA+G;AAC/G,eAAO,MAAM,IAAI;UA4FT,eAAe;UACf,eAAe;UACf,eAAe;CACtB,CAAA;AAMD,eAAe,IAAI,CAAA"}

package/dist/cjs/tree/tree.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = exports.TreeBase = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+const treeIcon_1 = __importDefault(require("./treeIcon"));
+const treeItem_1 = __importDefault(require("./treeItem"));
+const treeText_1 = __importDefault(require("./treeText"));
+const useTreeState_1 = require("./useTreeState");
+exports.TreeBase = core_1.styled.divBox `
+  display: flex;
+  height: auto;
+  align-content: flex-start;
+  flex-direction: column;
+`;
+/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
+exports.Tree = (0, core_1.vui)((props, ref) => {
+    const { activeItemId, children, className, iconCollapse = 'falMinus', iconExpand = 'falPlus', items, onClickItem, size, variant } = props, rest = __rest(props, ["activeItemId", "children", "className", "iconCollapse", "iconExpand", "items", "onClickItem", "size", "variant"]);
+    const styles = (0, core_1.useStyleConfig)('Tree', props);
+    const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = (0, useTreeState_1.useTreeState)(activeItemId);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size, variant }), [size, variant]);
+    const transformChildrenToItems = (children) => {
+        const t = [];
+        if (children) {
+            ;
+            react_1.Children.toArray(children).forEach((child, index) => {
+                var _a;
+                if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.text) {
+                    let items = [];
+                    if (child.props.children) {
+                        items = transformChildrenToItems(child.props.children);
+                    }
+                    t.push({
+                        id: child.props.id,
+                        text: child.props.text,
+                        isActive: child.props.isActive,
+                        items: child.props.items || items,
+                        isCollapsed: child.props.isCollapsed,
+                        disabled: child.props.disabled,
+                        onClickTreeItem: onClickTreeItem
+                    });
+                }
+            });
+        }
+        return t;
+    };
+    (0, react_1.useEffect)(() => {
+        if (items) {
+            setItemsInternal(items);
+            return;
+        }
+        const t = [];
+        if (children) {
+            const transformed = transformChildrenToItems(children);
+            t.push(...transformed);
+        }
+        setItemsInternal(t);
+        if (activeItemId !== undefined && (t === null || t === void 0 ? void 0 : t.find((i) => i.id === activeItemId))) {
+            setActiveItemIndex(activeItemId);
+        }
+    }, [children, activeItemId]);
+    const onClickTreeItem = (id) => {
+        setActiveItemIndex(id);
+        if (onClickItem) {
+            onClickItem(id);
+        }
+    };
+    return (react_1.default.createElement(context_1.TreeProvider, { value: context },
+        react_1.default.createElement(exports.TreeBase, Object.assign({ className: (0, utils_1.cs)('vui-tree', className), ref: ref }, styles.container, rest), itemsInternal === null || itemsInternal === void 0 ? void 0 : itemsInternal.map((_a, index) => {
+            var { id, isActive } = _a, props = __rest(_a, ["id", "isActive"]);
+            return (react_1.default.createElement(treeItem_1.default, Object.assign({ activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, id: id, isActive: activeItemIndex ? activeItemIndex === id : false, key: id !== null && id !== void 0 ? id : index, onClickTreeItem: onClickTreeItem }, props)));
+        }))));
+});
+exports.Tree.Icon = treeIcon_1.default;
+exports.Tree.Item = treeItem_1.default;
+exports.Tree.Text = treeText_1.default;
+exports.default = exports.Tree;