@edifice.io/react 2.0.0-develop-rc.14 → 2.0.0-develop-rc.16

package/dist/components/Table/components/TableThead.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const TableThead = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("thead", { ...restProps, children });
+};
+export {
+  TableThead
+};

package/dist/components/Table/components/TableTr.d.ts

@@ -0,0 +1,4 @@
+export declare const TableTr: {
+    (props: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Table/components/TableTr.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const TableTr = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("tr", { ...restProps, children });
+};
+export {
+  TableTr
+};

package/dist/components/Table/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Table';
-export { default as Table } from './Table';
+export * from './components/Table';
+export { default as Table } from './components/Table';

package/dist/components/Tabs/components/Tabs.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { TabsItemProps } from './TabsItem';
+export interface TabsProps {
+    /**
+     * Selected tab, by default.
+     */
+    defaultId?: string;
+    /**
+     * Items to be displayed
+     */
+    items: TabsItemProps[];
+    /**
+     * Get notified when a tab is selected
+     */
+    onChange?: (tab: TabsItemProps) => void;
+    /**
+     * Children Props
+     */
+    children?: (...props: any) => ReactNode;
+}
+/**
+ * Tab Content displayed one at a time when a Tab Item is selected
+ */
+export declare const Tabs: {
+    ({ defaultId, items, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Item: {
+        ({ icon, label, id, order, }: TabsItemProps & {
+            order: number;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        ({ children, currentItem }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        (props: import('react').ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Tabs;

package/dist/components/Tabs/components/Tabs.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TabsContext } from "../context/TabsContext.js";
+import { useTabs } from "../hooks/useTabs.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = ({
+  defaultId,
+  items,
+  onChange,
+  children
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  } = useTabs({
+    defaultId,
+    items,
+    onChange
+  }), value = useMemo(() => ({
+    activeTab,
+    items,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth, tabsRef]), currentItem = items.find((item) => item.id === activeTab);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tabs.List, {}),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
+  ] }) });
+};
+Tabs.Item = TabsItem;
+Tabs.Panel = TabsPanel;
+Tabs.List = TabsList;
+export {
+  Tabs,
+  Tabs as default
+};

package/dist/components/Tabs/components/TabsItem.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTabsContext } from "../context/TabsContext.js";
+const TabsItem = ({
+  icon,
+  label,
+  id,
+  order
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    onKeyDown,
+    tabsRef
+  } = useTabsContext(), {
+    t
+  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
+  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
+    icon,
+    /* @__PURE__ */ jsx("small", { children: t(label) })
+  ] }) });
+};
+export {
+  TabsItem as default
+};

package/dist/components/Tabs/components/TabsList.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+declare const TabsList: {
+    (props: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsList;

package/dist/components/Tabs/components/TabsList.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTabsContext } from "../context/TabsContext.js";
+import { Tabs } from "./Tabs.js";
+const TabsList = (props) => {
+  const {
+    items,
+    tabUnderlineLeft,
+    tabUnderlineWidth
+  } = useTabsContext(), {
+    className,
+    ...restProps
+  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
+  return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
+    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
+    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
+      left: tabUnderlineLeft,
+      width: tabUnderlineWidth
+    } })
+  ] });
+};
+export {
+  TabsList as default
+};

package/dist/components/Tabs/components/TabsPanel.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useTabsContext } from "../context/TabsContext.js";
+const TabsPanel = ({
+  children,
+  currentItem
+}) => {
+  const {
+    activeTab
+  } = useTabsContext();
+  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+};
+export {
+  TabsPanel as default
+};

package/dist/components/Tabs/context/TabsContext.d.ts

@@ -0,0 +1,12 @@
+import { TabsItemProps } from '../components/TabsItem';
+export interface TabsContextProps {
+    activeTab?: string;
+    items: TabsItemProps[];
+    setSelectedTab: (key: string) => void;
+    tabsRef: React.MutableRefObject<(HTMLButtonElement | null)[]>;
+    tabUnderlineLeft: number;
+    tabUnderlineWidth: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const TabsContext: import('react').Context<TabsContextProps | null>;
+export declare function useTabsContext(): TabsContextProps;

package/dist/components/Tabs/hooks/useTabs.d.ts

@@ -0,0 +1,15 @@
+import { TabsItemProps } from '../components/TabsItem';
+interface UseTabsProps {
+    defaultId?: string;
+    items: TabsItemProps[];
+    onChange?: (tab: TabsItemProps) => void;
+}
+export declare const useTabs: ({ defaultId, items, onChange }: UseTabsProps) => {
+    activeTab: string;
+    setSelectedTab: (id: string) => void;
+    tabsRef: import('react').MutableRefObject<(HTMLButtonElement | null)[]>;
+    tabUnderlineLeft: number;
+    tabUnderlineWidth: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+};
+export {};

package/dist/components/Tabs/hooks/useTabs.js

@@ -0,0 +1,61 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+const useTabs = ({
+  defaultId,
+  items,
+  onChange
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  useEffect(() => {
+    const currentItem = items.find((item) => item.id === activeTab);
+    currentItem && (onChange == null || onChange(currentItem));
+  }, [activeTab]), useEffect(() => {
+    function setTabPosition() {
+      var _a;
+      if (((_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.tagName) !== "INPUT") {
+        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
+        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
+        const currentTabRef = tabsRef.current[currentTabIndex];
+        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
+      }
+    }
+    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
+  }, [activeTab, items, defaultId]);
+  const moveFocusToPreviousTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
+  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
+  }, [items]), onKeyDown = useCallback((event) => {
+    var _a, _b;
+    switch (event.code) {
+      case "ArrowLeft":
+        moveFocusToPreviousTab(activeTab);
+        break;
+      case "ArrowRight":
+        moveFocusToNextTab(activeTab);
+        break;
+      case "Home":
+        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
+        break;
+      case "End":
+        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
+        break;
+    }
+  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]);
+  return {
+    activeTab,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  };
+};
+export {
+  useTabs
+};

package/dist/components/Tabs/index.d.ts

@@ -1,3 +1,2 @@
-export { default as Tabs } from './Tabs';
-export * from './Tabs';
-export { type TabsItemProps } from './TabsItem';
+export * from './components/Tabs';
+export type { TabsItemProps } from './components/TabsItem';

package/dist/components/TextArea/TextArea.d.ts

@@ -1,6 +1,6 @@
 import { Size } from '../../types';
-export type OmitTextAreaProps = 'disabled' | 'required' | 'size' | 'id' | 'readOnly';
-export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, OmitTextAreaProps> {
+export type OmitTextAreaProps = "disabled" | "required" | "size" | "id" | "readOnly";
+export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<"textarea">, OmitTextAreaProps> {
     /**
      * Control size of TextArea
      */

package/dist/components/Toolbar/Toolbar.d.ts

@@ -2,47 +2,47 @@ import { ReactNode } from 'react';
 import { ButtonProps, IconButtonProps } from '../Button';
 import { DropdownProps } from '../Dropdown';
 import { Placement } from '../Tooltip';
-interface Item {
+export interface ToolbarCommonItem {
     /** Object type */
     type: string;
     /** Items should be named, except for dividers */
     name?: string;
     /** Set to "hide" to hide this item. Defaults to "show" when undefined. */
-    visibility?: 'show' | 'hide';
+    visibility?: "show" | "hide";
 }
-interface ToolbarTooltip {
+export interface ToolbarTooltipProps {
     tooltip?: string | {
         message: string;
         position?: Placement;
     };
 }
-interface ButtonItem extends Item, ToolbarTooltip {
-    type: 'button';
+export interface ToolbarButtonItem extends ToolbarCommonItem, ToolbarTooltipProps {
+    type: "button";
     name: string;
     props: ButtonProps;
 }
-interface IconButtonItem extends Item, ToolbarTooltip {
-    type: 'icon';
+export interface ToolbarIconButtonItem extends ToolbarCommonItem, ToolbarTooltipProps {
+    type: "icon";
     name: string;
     props: IconButtonProps;
 }
-interface DropdownItem extends Item {
-    type: 'dropdown';
+export interface ToolbarDropdownItem extends ToolbarCommonItem {
+    type: "dropdown";
     props: DropdownProps;
     overflow?: boolean;
 }
-interface PrimaryItem extends Item, ToolbarTooltip {
-    type: 'primary';
+export interface ToolbarPrimaryItem extends ToolbarCommonItem, ToolbarTooltipProps {
+    type: "primary";
     props: ButtonProps;
 }
-interface DividerItem extends Item {
-    type: 'divider';
+export interface ToolbarDividerItem extends ToolbarCommonItem {
+    type: "divider";
 }
 export type ToolbarRef = HTMLDivElement;
-export type ToolbarVariant = 'default' | 'no-shadow';
-export type ToolbarAlign = 'left' | 'center' | 'space' | 'right';
-export type ToolbarItem = ButtonItem | IconButtonItem | DropdownItem | PrimaryItem | DividerItem;
-export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
+export type ToolbarVariant = "default" | "no-shadow";
+export type ToolbarAlign = "left" | "center" | "space" | "right";
+export type ToolbarItem = ToolbarButtonItem | ToolbarIconButtonItem | ToolbarDropdownItem | ToolbarPrimaryItem | ToolbarDividerItem;
+export interface ToolbarProps extends React.ComponentPropsWithRef<"div"> {
     /**
      * Toolbar data items
      */
@@ -72,5 +72,5 @@ export interface ToolbarProps extends React.ComponentPropsWithRef<'div'> {
      */
     children?: ReactNode;
 }
-declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Toolbar;

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, createElement } from "react";
+import clsx from "clsx";
+import { mergeRefs } from "../../utilities/refs/ref.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import Button from "../Button/Button.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+import IconButton from "../Button/IconButton.js";
+const Toolbar = /* @__PURE__ */ forwardRef(({
+  items,
+  variant = "default",
+  align = "space",
+  isBlock = !1,
+  ariaControls,
+  className
+}, ref) => {
+  const [firstFocusableItemIndex, setFirstFocusableItemIndex] = useState(0), [a11yNavigationItems, setA11yNavigationItems] = useState([]), [firstA11yNavigationItem, setFirstA11yNavigationItem] = useState(), [lastA11yNavigationItem, setA11yNavigationLastItem] = useState(), divToolbarRef = useRef(), classes = clsx("toolbar z-1000 bg-white", className, {
+    default: variant === "default",
+    "no-shadow": variant === "no-shadow",
+    "d-flex": isBlock,
+    "d-inline-flex": !isBlock,
+    "overflow-x-auto": isBlock,
+    "justify-content-start": align === "left",
+    "justify-content-between": align === "space",
+    "justify-content-center": align === "center",
+    "justify-content-end": align === "right"
+  });
+  useEffect(() => {
+    var _a;
+    const buttons = (_a = divToolbarRef.current) == null ? void 0 : _a.querySelectorAll("button"), enabledItems = [];
+    let isfirstItemSet = !1;
+    buttons == null || buttons.forEach((item) => {
+      item.disabled || (isfirstItemSet || (setFirstA11yNavigationItem(item), isfirstItemSet = !0), setA11yNavigationLastItem(item), enabledItems.push(item));
+    }), setA11yNavigationItems(enabledItems), setFirstFocusableItemIndex(items.findIndex((item) => (item.type === "button" || item.type === "icon") && !item.props.disabled));
+  }, [items]);
+  const handleFocus = (event) => {
+    event.target.classList.add("focus");
+  }, handleBlur = (event) => {
+    event.target.classList.remove("focus");
+  }, handleKeyDown = (event) => {
+    var _a, _b;
+    const index = a11yNavigationItems.indexOf(event.currentTarget);
+    switch (event.code) {
+      case "ArrowLeft":
+        event.currentTarget === firstA11yNavigationItem ? lastA11yNavigationItem == null || lastA11yNavigationItem.focus() : (_a = a11yNavigationItems[index - 1]) == null || _a.focus();
+        break;
+      case "ArrowRight":
+        event.currentTarget === lastA11yNavigationItem ? firstA11yNavigationItem == null || firstA11yNavigationItem.focus() : (_b = a11yNavigationItems[index + 1]) == null || _b.focus();
+        break;
+    }
+  }, renderTooltipMessage = (item) => {
+    var _a;
+    return typeof item.tooltip == "string" ? item.tooltip : (_a = item.tooltip) == null ? void 0 : _a.message;
+  }, renderTooltipPosition = (item) => {
+    var _a;
+    return typeof item.tooltip != "string" ? (_a = item.tooltip) == null ? void 0 : _a.position : "top";
+  };
+  return /* @__PURE__ */ jsx("div", { ref: mergeRefs(ref, divToolbarRef), className: classes, role: "toolbar", "aria-label": "Text Formatting", "aria-controls": ariaControls, onFocus: handleFocus, onBlur: handleBlur, children: items.map((item, index) => {
+    if (item.visibility === "hide") return null;
+    switch (item.type) {
+      case "divider":
+        return /* @__PURE__ */ jsx("div", { className: "toolbar-divider" }, item.name ?? index);
+      case "button":
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(Button, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+      case "icon":
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ createElement(IconButton, { ...item.props, key: item.name ?? index, color: item.props.color ? item.props.color : "tertiary", variant: item.props.variant ? item.props.variant : "ghost", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+      case "dropdown":
+        return /* @__PURE__ */ createElement(Dropdown, { ...item.props, key: item.name ?? index, extraTriggerKeyDownHandler: handleKeyDown, overflow: item.overflow });
+      case "primary":
+        return /* @__PURE__ */ jsx(Tooltip, { message: renderTooltipMessage(item), placement: renderTooltipPosition(item), children: /* @__PURE__ */ jsx(Button, { ...item.props, variant: "filled", color: "primary", tabIndex: index === firstFocusableItemIndex ? 0 : -1, onKeyDown: handleKeyDown }) }, item.name ?? index);
+    }
+    return null;
+  }) });
+});
+export {
+  Toolbar,
+  Toolbar as default
+};

package/dist/components/Toolbar/index.d.ts

@@ -1,2 +1 @@
-export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-export type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export interface TooltipProps {
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type Placement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+export interface TooltipProps extends ComponentPropsWithRef<"div"> {
     /**
      * Text to display inside tooltip
      */
@@ -18,5 +18,5 @@ export interface TooltipProps {
      */
     icon?: ReactNode;
 }
-declare const Tooltip: ({ children, message, icon, placement, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ children, message, icon, placement, ...restProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { usePopper } from "react-popper";
+const Tooltip = ({
+  children,
+  message,
+  icon = null,
+  placement = "auto",
+  ...restProps
+}) => {
+  const [referenceElement, setReferenceElement] = useState(null), [popperElement, setPopperElement] = useState(null), [arrowElement, setArrowElement] = useState(null), {
+    styles,
+    attributes
+  } = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [{
+      name: "arrow",
+      options: {
+        element: arrowElement
+      }
+    }]
+  }), [visible, setVisible] = useState(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "d-inline-block position-relative z-2", ref: setReferenceElement, onMouseEnter: () => {
+      setVisible(!0);
+    }, onMouseLeave: () => {
+      setVisible(!1);
+    }, ...restProps, children }),
+    visible && message && /* @__PURE__ */ jsxs("div", { className: clsx("tooltip d-block show mb-12", "bs-tooltip-auto"), ref: setPopperElement, style: styles.popper, ...attributes.popper, children: [
+      /* @__PURE__ */ jsxs("div", { className: "tooltip-inner shadow-hover d-flex gap-8 align-items-center", children: [
+        icon && icon,
+        /* @__PURE__ */ jsx("div", { children: message })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "tooltip-arrow", ref: setArrowElement, style: styles.arrow })
+    ] })
+  ] });
+};
+export {
+  Tooltip as default
+};

package/dist/components/Tree/components/DndTree.d.ts

@@ -0,0 +1,3 @@
+import { DndTreeProps } from '../types';
+export declare const DndTree: import('react').ForwardRefExoticComponent<DndTreeProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DndTree;

package/dist/components/Tree/components/DndTree.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useDroppable } from "@dnd-kit/core";
+import { forwardRef, useId } from "react";
+import { useTree } from "../hooks/useTree.js";
+import { TreeNode } from "./Tree.js";
+import { mergeRefs } from "../../../utilities/refs/ref.js";
+const DndTree = /* @__PURE__ */ forwardRef(({
+  nodes,
+  selectedNodeId: externalSelectedNodeId,
+  showIcon = !1,
+  shouldExpandAllNodes = !1,
+  draggedNode,
+  onTreeItemClick,
+  onTreeItemFold,
+  onTreeItemUnfold,
+  renderNode
+}, ref) => {
+  const {
+    selectedNodeId,
+    expandedNodes,
+    draggedNodeId,
+    handleItemClick,
+    handleFoldUnfold
+  } = useTree({
+    data: nodes,
+    externalSelectedNodeId,
+    draggedNode,
+    shouldExpandAllNodes,
+    onTreeItemClick,
+    onTreeItemFold,
+    onTreeItemUnfold
+  });
+  return /* @__PURE__ */ jsx("div", { className: "treeview", ref, children: /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: Array.isArray(nodes) && nodes.map((node) => /* @__PURE__ */ jsx(DndTreeNode, { node, showIcon, draggedNodeId, expandedNodes, selectedNodeId, onTreeItemClick: handleItemClick, onToggleNode: handleFoldUnfold, renderNode }, node.id)) }) });
+}), DndTreeNode = /* @__PURE__ */ forwardRef(({
+  node,
+  selectedNodeId,
+  showIcon = !1,
+  expandedNodes,
+  renderNode,
+  onTreeItemClick,
+  onToggleNode,
+  draggedNodeId,
+  ...restProps
+}, ref) => {
+  const {
+    setNodeRef
+  } = useDroppable({
+    id: useId(),
+    data: {
+      id: node.id,
+      name: node.name,
+      isTreeview: !0,
+      accepts: ["folder", "resource"]
+    }
+  }), focused = draggedNodeId === node.id;
+  return /* @__PURE__ */ jsx(TreeNode, { ref: mergeRefs(ref, setNodeRef), node, showIcon, selectedNodeId, expandedNodes, onTreeItemClick, onToggleNode, renderNode, focused, ...restProps }, node.id);
+});
+export {
+  DndTree,
+  DndTree as default
+};

package/dist/components/Tree/components/SortableTree.d.ts

@@ -0,0 +1,9 @@
+import { FlattenedItem, SortableTreeProps } from '../types';
+declare const SortableTree: {
+    ({ nodes, selectedNodeId: externalSelectedNodeId, showIcon, shouldExpandAllNodes, renderNode, isDisabled, onTreeItemClick, onSortable, }: SortableTreeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DragOverlayItem: import('react').ForwardRefExoticComponent<{
+    activeItem: FlattenedItem | null | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default SortableTree;