@edifice.io/react 2.0.0-develop-rc.3

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

@@ -0,0 +1,33 @@
+import { Size } from '../../types';
+export type OmitTextAreaProps = 'disabled' | 'required' | 'size' | 'id' | 'readOnly';
+export interface TextAreaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, OmitTextAreaProps> {
+    /**
+     * Control size of TextArea
+     */
+    size: Size;
+    /**
+     * Control maxHeight of TextArea
+     */
+    height?: Size;
+    /**
+     * Change text of placeholder
+     */
+    placeholder?: string;
+    /**
+     * Disabled status
+     */
+    disabled?: boolean;
+    /**
+     * Remove validation icon
+     */
+    noValidationIcon?: boolean;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+/**
+ * TextArea Form Component
+ */
+declare const TextArea: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,34 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useFormControl } from "../Form/FormContext.js";
+const TextArea = /* @__PURE__ */ forwardRef(({
+  noValidationIcon,
+  placeholder,
+  size = "md",
+  height = "md",
+  className,
+  ...restProps
+}, ref) => {
+  const {
+    id,
+    isRequired,
+    isReadOnly,
+    status
+  } = useFormControl(), classes = clsx({
+    "form-control": !isReadOnly,
+    "form-control-lg": size === "lg",
+    "form-control-sm": size === "sm",
+    "textarea-height-lg": height === "lg",
+    "textarea-height-md": height === "md",
+    "textarea-height-sm": height === "sm",
+    "is-invalid": status === "invalid",
+    "is-valid": status === "valid",
+    "form-control-plaintext": isReadOnly,
+    "no-validation-icon": noValidationIcon
+  }, className);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps }) });
+}), TextArea$1 = TextArea;
+export {
+  TextArea$1 as default
+};

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

@@ -0,0 +1,4 @@
+export declare const TextareaCounter: ({ content, maxLength, }: {
+    content: string;
+    maxLength: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextareaCounter.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+const TextareaCounter = ({
+  content,
+  maxLength
+}) => /* @__PURE__ */ jsx("p", { className: "small text-gray-700 p-2 text-end", children: content ? `${content.length} / ${maxLength}` : "" });
+export {
+  TextareaCounter
+};

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

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

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

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { ButtonProps, IconButtonProps } from '../Button';
+import { DropdownProps } from '../Dropdown';
+import { Placement } from '../Tooltip';
+interface Item {
+    /** 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';
+}
+interface ToolbarTooltip {
+    tooltip?: string | {
+        message: string;
+        position?: Placement;
+    };
+}
+interface ButtonItem extends Item, ToolbarTooltip {
+    type: 'button';
+    name: string;
+    props: ButtonProps;
+}
+interface IconButtonItem extends Item, ToolbarTooltip {
+    type: 'icon';
+    name: string;
+    props: IconButtonProps;
+}
+interface DropdownItem extends Item {
+    type: 'dropdown';
+    props: DropdownProps;
+    overflow?: boolean;
+}
+interface PrimaryItem extends Item, ToolbarTooltip {
+    type: 'primary';
+    props: ButtonProps;
+}
+interface DividerItem extends Item {
+    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'> {
+    /**
+     * Toolbar data items
+     */
+    items: ToolbarItem[];
+    /**
+     * Toolbar variant
+     */
+    variant?: ToolbarVariant;
+    /**
+     * Buttons alignement when isBlock is true
+     */
+    align?: ToolbarAlign;
+    /**
+     * Toolbar has width 100%
+     */
+    isBlock?: boolean;
+    /**
+     * Editor container ID for a11y purpose
+     */
+    ariaControls?: string;
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * Accept optional children
+     */
+    children?: ReactNode;
+}
+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,77 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, createElement } from "react";
+import clsx from "clsx";
+import { mergeRefs } from "../../utils/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;
+  }) });
+}), Toolbar$1 = Toolbar;
+export {
+  Toolbar$1 as default
+};

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

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

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

@@ -0,0 +1,22 @@
+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 {
+    /**
+     * Text to display inside tooltip
+     */
+    message: string | undefined;
+    /**
+     * Element to be wrapped as Tooltip trigger
+     */
+    children: React.ReactNode;
+    /**
+     * Tooltip position
+     */
+    placement?: Placement;
+    /**
+     * Tooltip left icon
+     */
+    icon?: ReactNode;
+}
+declare const Tooltip: ({ children, message, icon, placement, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,40 @@
+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"
+}) => {
+  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);
+    }, 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 })
+    ] })
+  ] });
+}, Tooltip$1 = Tooltip;
+export {
+  Tooltip$1 as default
+};

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

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

package/dist/components/TreeView/TreeItem.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+export interface TreeItemProps {
+    /**
+     * Node's id
+     */
+    nodeId: string;
+    /**
+     * Node's label
+     */
+    label: string;
+    /**
+     * ReactNode children
+     */
+    children: React.ReactNode;
+    /**
+     * Is current node a section (root element)
+     */
+    section?: boolean;
+    /**
+     * Is node selected
+     */
+    selected: boolean;
+    /**
+     * Node ID used for navigation folders
+     */
+    selectedNodesIds?: string[];
+    /**
+     * Callback function to provide selected item to parent component (TreeView)
+     */
+    onItemSelect?: Function;
+    /**
+     * Callback function to provide folded item to parent component (TreeView)
+     */
+    onItemFold?: Function;
+    /**
+     * Callback function to provide unfolded item to parent component (TreeView)
+     */
+    onItemUnfold?: Function;
+    /**
+     * Callback function to provide focused item to parent component (TreeView)
+     */
+    onItemFocus?: Function;
+    /**
+     * Callback function to provide blured item to parent component (TreeView)
+     */
+    onItemBlur?: Function;
+}
+declare const TreeItem: {
+    (props: TreeItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TreeItem;

package/dist/components/TreeView/TreeItem.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import useTreeItemEvents from "./hooks/useTreeItemEvents.js";
+import { Icon } from "../Icon/Icon.js";
+const TreeItem = (props) => {
+  const {
+    nodeId,
+    label,
+    children,
+    section,
+    selected,
+    onItemSelect,
+    onItemFold,
+    onItemUnfold,
+    onItemFocus,
+    onItemBlur,
+    selectedNodesIds
+  } = props, {
+    t
+  } = useTranslation(), [expanded, setExpanded] = useState(!1), {
+    handleItemClick,
+    handleItemKeyDown,
+    handleItemFoldUnfoldClick,
+    handleItemFoldUnfoldKeyDown,
+    handleItemFocus,
+    handleItemBlur
+  } = useTreeItemEvents(nodeId, label, expanded, setExpanded, onItemSelect, onItemFold, onItemUnfold, onItemFocus, onItemBlur);
+  useEffect(() => {
+    if (selectedNodesIds != null && selectedNodesIds.length && (selectedNodesIds == null ? void 0 : selectedNodesIds.length) >= 1) {
+      const lastNodeId = selectedNodesIds[selectedNodesIds.length - 1];
+      selectedNodesIds.some((node) => node === nodeId && nodeId !== lastNodeId ? (setExpanded(!0), node === nodeId) : (setExpanded(!1), !1));
+    } else
+      setExpanded(!1);
+  }, [nodeId, selectedNodesIds]);
+  const rafterSize = section ? "16" : "12", renderItem = () => /* @__PURE__ */ jsx("li", { id: `listitem_${nodeId}`, role: "treeitem", "aria-selected": selected, "aria-expanded": expanded, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "action-container d-flex align-items-center gap-8 px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: `py-8 ${Array.isArray(children) ? null : "invisible"}`, tabIndex: 0, role: "button", onClick: handleItemFoldUnfoldClick, onKeyDown: handleItemFoldUnfoldKeyDown, "aria-label": t("foldUnfold"), children: [
+        Array.isArray(children) && !!children.length && !expanded && /* @__PURE__ */ jsx(Icon, { name: "rafter-right", size: rafterSize }),
+        Array.isArray(children) && !!children.length && expanded && /* @__PURE__ */ jsx(Icon, { name: "rafter-down", size: rafterSize }),
+        !Array.isArray(children) && /* @__PURE__ */ jsx(Icon, { name: "rafter-right", size: rafterSize, "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { tabIndex: 0, role: "button", className: "flex-fill d-flex align-items-center text-truncate gap-8 py-8", onClick: handleItemClick, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, onBlur: handleItemBlur, children: [
+        section && /* @__PURE__ */ jsx(Icon, { name: "folder", size: "20" }),
+        /* @__PURE__ */ jsx("span", { className: "text-truncate", children: label })
+      ] })
+    ] }),
+    Array.isArray(children) && /* @__PURE__ */ jsx("ul", { role: "group", children })
+  ] }) }, nodeId);
+  return section ? /* @__PURE__ */ jsx("ul", { role: "tree", className: "m-0 p-0", children: renderItem() }) : renderItem();
+};
+export {
+  TreeItem as default
+};

package/dist/components/TreeView/TreeNode.d.ts

@@ -0,0 +1,22 @@
+export interface TreeNode {
+    /**
+     * @param id : node's id
+     */
+    id: string;
+    /**
+     * @param name : name's id
+     */
+    name: string;
+    /**
+     * @param section: indicate if node is a top section (useful for specific icon)
+     */
+    section?: boolean;
+    /**
+     * Is this node contains children ?
+     */
+    children?: readonly TreeNode[];
+    /**
+     * All none declare types
+     */
+    [key: string]: any;
+}

package/dist/components/TreeView/TreeView.d.ts

@@ -0,0 +1,40 @@
+import { TreeNode } from './TreeNode';
+export interface TreeViewHandlers {
+    unselectAll: () => void;
+    select: (nodeId: string) => void;
+}
+export interface TreeViewProps {
+    /**
+     * TreeNode data
+     */
+    data: TreeNode;
+    /**
+     * Node ID used for navigation folders
+     */
+    selectedNodesIds?: string[];
+    /**
+     * Callback function to provide selected item to parent component
+     */
+    onTreeItemSelect?: (nodeId: string) => void;
+    /**
+     * Callback function to provide folded item to parent component
+     */
+    onTreeItemFold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide unfolded item to parent component
+     */
+    onTreeItemUnfold?: (nodeId: string) => void;
+    /**
+     * Callback function to provide focused item to parent component
+     */
+    onTreeItemFocus?: (nodeId: string) => void;
+    /**
+     * Callback function to provide blured item to parent component
+     */
+    onTreeItemBlur?: (nodeId: string) => void;
+}
+/**
+ * UI TreeView Component
+ */
+declare const TreeView: import('react').ForwardRefExoticComponent<TreeViewProps & import('react').RefAttributes<TreeViewHandlers>>;
+export default TreeView;

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useMemo, useImperativeHandle } from "react";
+import TreeItem from "./TreeItem.js";
+const TreeView = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    data,
+    onTreeItemSelect,
+    onTreeItemFold,
+    onTreeItemUnfold,
+    onTreeItemFocus,
+    onTreeItemBlur,
+    selectedNodesIds
+  } = props, [selectedItem, setSelectedItem] = useState(null);
+  useEffect(() => {
+    selectedNodesIds != null && selectedNodesIds.length && (selectedNodesIds == null ? void 0 : selectedNodesIds.length) >= 1 ? setSelectedItem(selectedNodesIds[selectedNodesIds.length - 1]) : setSelectedItem(null);
+  }, [selectedNodesIds]);
+  const handlers = useMemo(() => ({
+    unselectAll() {
+      setSelectedItem(null);
+    },
+    select(nodeId) {
+      setSelectedItem(nodeId), onTreeItemSelect == null || onTreeItemSelect(nodeId);
+    }
+  }), [onTreeItemSelect]);
+  useImperativeHandle(ref, () => handlers, [handlers]);
+  const handleItemFold = (nodeId) => {
+    onTreeItemFold == null || onTreeItemFold(nodeId);
+  }, handleItemUnfold = (nodeId) => {
+    onTreeItemUnfold == null || onTreeItemUnfold(nodeId);
+  }, handleItemFocus = (nodeId) => {
+    onTreeItemFocus == null || onTreeItemFocus(nodeId);
+  }, handleItemBlur = (nodeId) => {
+    onTreeItemBlur == null || onTreeItemBlur(nodeId);
+  }, renderTree = (node) => /* @__PURE__ */ jsx(TreeItem, { nodeId: node.id, label: node.name, section: node.section, selectedNodesIds, selected: selectedItem === node.id, onItemSelect: handlers.select, onItemFold: handleItemFold, onItemUnfold: handleItemUnfold, onItemFocus: handleItemFocus, onItemBlur: handleItemBlur, children: Array.isArray(node.children) ? node.children.map((item) => renderTree(item)) : null }, node.id);
+  return /* @__PURE__ */ jsx("div", { className: "treeview", children: renderTree(data) });
+}), TreeView$1 = TreeView;
+export {
+  TreeView$1 as default
+};

package/dist/components/TreeView/hooks/useTreeItemEvents.d.ts

@@ -0,0 +1,8 @@
+export default function useTreeItemEvents(nodeId: string, label: string, expanded: boolean, setExpanded: Function, onItemSelect: Function | undefined, onItemFold: Function | undefined, onItemUnfold: Function | undefined, onItemFocus: Function | undefined, onItemBlur: Function | undefined): {
+    handleItemClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    handleItemKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleItemFoldUnfoldClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    handleItemFoldUnfoldKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleItemFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
+    handleItemBlur: (event: React.FocusEvent<HTMLDivElement>) => void;
+};

package/dist/components/TreeView/hooks/useTreeItemEvents.js

@@ -0,0 +1,28 @@
+function useTreeItemEvents(nodeId, label, expanded, setExpanded, onItemSelect, onItemFold, onItemUnfold, onItemFocus, onItemBlur) {
+  const handleItemClick = (event) => {
+    event.preventDefault(), onItemSelect == null || onItemSelect(nodeId), itemFoldUnfold(), event.stopPropagation();
+  }, handleItemKeyDown = (event) => {
+    (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), onItemSelect == null || onItemSelect(nodeId), itemFoldUnfold(), event.stopPropagation());
+  }, itemFoldUnfold = () => {
+    setExpanded(!expanded), expanded ? onItemFold == null || onItemFold(nodeId) : onItemUnfold == null || onItemUnfold(nodeId);
+  };
+  return {
+    handleItemClick,
+    handleItemKeyDown,
+    handleItemFoldUnfoldClick: (event) => {
+      event.preventDefault(), itemFoldUnfold(), event.stopPropagation();
+    },
+    handleItemFoldUnfoldKeyDown: (event) => {
+      (event.code === "Enter" || event.code === "Space") && (event.preventDefault(), itemFoldUnfold(), event.stopPropagation());
+    },
+    handleItemFocus: (event) => {
+      event.preventDefault(), onItemFocus == null || onItemFocus(nodeId);
+    },
+    handleItemBlur: (event) => {
+      event.preventDefault(), onItemBlur == null || onItemBlur(nodeId);
+    }
+  };
+}
+export {
+  useTreeItemEvents as default
+};

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

@@ -0,0 +1,3 @@
+export { default as TreeView } from './TreeView';
+export * from './TreeNode';
+export * from './TreeView';

package/dist/components/UploadCard/UploadCard.d.ts

@@ -0,0 +1,42 @@
+import { Status } from '../../types';
+import { CardProps } from '../Card';
+export interface UploadItemProps {
+    /**
+     * File's image
+     * */
+    src: string;
+    /**
+     * File's name
+     * */
+    name: string;
+    /**
+     * File's info
+     * */
+    info?: {
+        type: string;
+        weight: string;
+    };
+}
+export interface UploadCardProps extends CardProps {
+    /**
+     * UploadItemProps
+     * */
+    item: UploadItemProps;
+    /**
+     * idle, loading, success, warning, error
+     * */
+    status?: Status;
+    /**
+     * Delete callback
+     * */
+    onDelete?: () => void;
+    /**
+     * Edit callback
+     * */
+    onEdit?: () => void;
+    /**
+     * Retry callback
+     * */
+    onRetry?: () => void;
+}
+export declare const UploadCard: ({ item, status, isClickable, isSelectable, onDelete, onEdit, onRetry, }: UploadCardProps) => import("react/jsx-runtime").JSX.Element;