@onesy/ui-react 1.0.0

package/Transition/index.js

@@ -0,0 +1,27 @@
+"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 = exports.useTransition = exports.TransitionContext = void 0;
+var Context_1 = require("./Context");
+Object.defineProperty(exports, "TransitionContext", { enumerable: true, get: function () { return __importDefault(Context_1).default; } });
+var useTransition_1 = require("./useTransition");
+Object.defineProperty(exports, "useTransition", { enumerable: true, get: function () { return __importDefault(useTransition_1).default; } });
+__exportStar(require("./Transition"), exports);
+var Transition_1 = require("./Transition");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Transition_1).default; } });

package/Transition/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Transition/index.js",
+  "types": "./index.d.ts"
+}

package/Transition/useTransition.d.ts

@@ -0,0 +1 @@
+export default function useTransition(): any;

package/Transition/useTransition.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Context_1 = __importDefault(require("./Context"));
+function useTransition() {
+    const value = react_1.default.useContext(Context_1.default);
+    return value;
+}
+exports.default = useTransition;

package/Transitions/Transitions.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IPropsAny } from '../types';
+export declare type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
+export interface ITransitions {
+    id?: string;
+    mode?: TTransitionsMode;
+    switch?: boolean;
+    TransitionProps?: IPropsAny;
+    children?: any;
+}
+declare const Transitions: React.FC<ITransitions>;
+export default Transitions;

package/Transitions/Transitions.js

@@ -0,0 +1,186 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const __1 = require("..");
+const Transitions = (props_) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTransitions) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { mode = 'out-in', switch: switch_, id, TransitionProps, children: children__ } = props;
+    const [init, setInit] = react_1.default.useState(false);
+    const [status, setStatus] = react_1.default.useState(__1.STATUS.entered);
+    const [children, setChildren] = react_1.default.useState((0, utils_1.is)('array', children__) ? children__ : [children__]);
+    const other = Object.assign({ className: true }, TransitionProps);
+    const [element, setElement] = react_1.default.useState(react_1.default.cloneElement(children__, Object.assign({ in: true }, other)));
+    const refs = {
+        element: react_1.default.useRef(undefined),
+        previousKeyValue: react_1.default.useRef(undefined),
+        status: react_1.default.useRef(undefined),
+        id: react_1.default.useRef(undefined),
+        noTransition: react_1.default.useRef(undefined)
+    };
+    refs.element.current = element;
+    refs.status.current = status;
+    // No transition controll
+    // bug solve in nextjs
+    react_1.default.useEffect(() => {
+        if (id !== undefined) {
+            if (id !== refs.id.current) {
+                refs.noTransition.current = false;
+                refs.id.current = id;
+            }
+            else
+                refs.noTransition.current = true;
+        }
+    }, [id]);
+    react_1.default.useEffect(() => {
+        if (id !== undefined)
+            refs.noTransition.current = id === refs.id.current;
+    }, [status]);
+    react_1.default.useEffect(() => {
+        setInit(true);
+    }, []);
+    // Regular
+    react_1.default.useEffect(() => {
+        if (!switch_) {
+            const newChildren = (0, utils_1.is)('array', children__) ? children__ : [children__];
+            setChildren(items => {
+                let newItems = (0, utils_1.unique)([...items, ...newChildren], 'key');
+                newItems = newItems.map(item => {
+                    const prev = items.find(item_ => item_.key === item.key);
+                    const next = newChildren.find(item_ => item_.key === item.key);
+                    const isExiting = !(prev === null || prev === void 0 ? void 0 : prev.props.in);
+                    // New or readded previous add it
+                    if (next && (!prev || isExiting))
+                        return react_1.default.cloneElement(item, Object.assign({ in: true, onExited: onExited(item), enterOnAdd: true }, other));
+                    // No prev in new and it's not already exiting exit it
+                    if (!next && prev && !isExiting)
+                        return react_1.default.cloneElement(item, Object.assign({ in: false }, other));
+                    return item;
+                });
+                return newItems;
+            });
+        }
+    }, [children__.length]);
+    // Switch
+    react_1.default.useEffect(() => {
+        refs.previousKeyValue.current = children__.key;
+        // Abrupted value update
+        if (refs.noTransition.current) {
+            setStatus(__1.STATUS.entered);
+            setElement(children__);
+        }
+        else if (refs.status.current !== 'entered') {
+            setStatus(__1.STATUS.entered);
+            setElement(react_1.default.cloneElement(children__, Object.assign({ in: true, enterOnAdd: true }, other)));
+        }
+        else if (element !== children__ &&
+            element.key !== children__.key &&
+            // Lets transition run properly
+            refs.status.current === 'entered') {
+            setStatus(__1.STATUS.exit);
+        }
+    }, [children__.key]);
+    const onExited = (element_) => (elementHTML) => {
+        // Invoke a method
+        if ((0, utils_1.is)('function', element_.props.onExited))
+            element_.props.onExited(elementHTML);
+        // Update
+        setChildren(items => {
+            const newItems = [...items];
+            const index = newItems.findIndex(item => (item === null || item === void 0 ? void 0 : item.key) === (element_ === null || element_ === void 0 ? void 0 : element_.key));
+            if (index > -1)
+                newItems.splice(index, 1);
+            return newItems;
+        });
+    };
+    let children_ = children;
+    // Init
+    if (!init && !switch_) {
+        children_ = children_.map(item => react_1.default.cloneElement(item, Object.assign({ in: true, onExited: onExited(item) }, other)));
+    }
+    // Switch
+    if (switch_) {
+        children_ = element;
+        switch (status) {
+            case __1.STATUS.enter:
+                if (mode === 'in-out') {
+                    const newElement = react_1.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, Object.assign({ in: true }, other));
+                    children_ = [
+                        react_1.default.cloneElement(children_, Object.assign({ in: false, onExited: () => {
+                                var _a, _b;
+                                if (refs.status.current === 'entered')
+                                    return;
+                                if ((_a = children__.props) === null || _a === void 0 ? void 0 : _a.onExited)
+                                    (_b = children__.props) === null || _b === void 0 ? void 0 : _b.onExited();
+                                setStatus(__1.STATUS.entered);
+                                setElement(newElement);
+                            }, exitOnAdd: true, removeOnExited: true }, other)),
+                        newElement
+                    ];
+                }
+                else if (mode === 'out-in') {
+                    children_ = (react_1.default.cloneElement(children__, Object.assign({ in: true, onEntered: () => {
+                            var _a, _b;
+                            if (refs.status.current === 'entered')
+                                return;
+                            if ((_a = children__.props) === null || _a === void 0 ? void 0 : _a.onEntered)
+                                (_b = children__.props) === null || _b === void 0 ? void 0 : _b.onEntered();
+                            setStatus(__1.STATUS.entered);
+                            setElement(react_1.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, Object.assign({ in: true }, other)));
+                        }, enterOnAdd: true }, other)));
+                }
+                break;
+            case __1.STATUS.exit:
+                if (mode === 'in-out') {
+                    children_ = [
+                        element,
+                        react_1.default.cloneElement(children__, Object.assign({ in: true, onEntered: () => {
+                                var _a, _b;
+                                if (refs.status.current === 'entered')
+                                    return;
+                                if ((_a = children__.props) === null || _a === void 0 ? void 0 : _a.onEnter)
+                                    (_b = children__.props) === null || _b === void 0 ? void 0 : _b.onEnter();
+                                setStatus(__1.STATUS.enter);
+                            }, enterOnAdd: true }, other))
+                    ];
+                }
+                else if (mode === 'out-in') {
+                    children_ = (react_1.default.cloneElement(children_, Object.assign({ in: false, onExited: () => {
+                            var _a, _b;
+                            if (refs.status.current === 'entered')
+                                return;
+                            if ((_a = children__.props) === null || _a === void 0 ? void 0 : _a.onExited)
+                                (_b = children__.props) === null || _b === void 0 ? void 0 : _b.onExited();
+                            setStatus(__1.STATUS.enter);
+                        }, exitOnAdd: true }, other)));
+                }
+                else if (mode === 'in-out-follow') {
+                    if (children__.key === children_.key)
+                        return children_;
+                    children_ = [
+                        react_1.default.cloneElement(children__, Object.assign({ in: true, onEntered: () => {
+                                var _a, _b;
+                                if (refs.status.current === 'entered')
+                                    return;
+                                if ((_a = children__.props) === null || _a === void 0 ? void 0 : _a.onEntered)
+                                    (_b = children__.props) === null || _b === void 0 ? void 0 : _b.onEntered();
+                                setElement(react_1.default.cloneElement(refs.previousKeyValue.current !== children__.key ? element : children__, Object.assign({ in: true }, other)));
+                                setStatus(__1.STATUS.entered);
+                            }, enterOnAdd: true }, other)),
+                        react_1.default.cloneElement(children_, Object.assign({ in: false, exitOnAdd: true }, other))
+                    ];
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    return children_;
+};
+Transitions.displayName = 'onesy-Transitions';
+exports.default = Transitions;

package/Transitions/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Transitions';

package/Transitions/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Transitions_1 = require("./Transitions");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Transitions_1).default; } });

package/Transitions/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Transitions/index.js",
+  "types": "./index.d.ts"
+}

package/Tree/Tree.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { IBaseElement, IElement, IPropsAny, IElementReference } from '../types';
+export interface ITree extends Omit<IBaseElement, 'children'> {
+    open?: boolean;
+    openDefault?: boolean;
+    onChange?: (value: boolean) => any;
+    selected?: boolean;
+    line?: boolean;
+    indicator?: boolean;
+    arrow?: boolean;
+    checkbox?: boolean;
+    indicatorPosition?: 'start' | 'end';
+    level?: number;
+    icon?: IElement;
+    iconOpen?: IElement;
+    start?: IElement;
+    middle?: IElement;
+    end?: IElement;
+    button?: boolean;
+    noTransition?: boolean;
+    noExpand?: boolean;
+    noPadding?: boolean;
+    parent?: HTMLElement;
+    parentDisabled?: boolean;
+    disabled?: boolean;
+    ExpandProps?: IPropsAny;
+    MainProps?: IPropsAny;
+    StartProps?: IPropsAny;
+    MiddleProps?: IPropsAny;
+    EndProps?: IPropsAny;
+    IndicatorProps?: IPropsAny;
+    TransitionComponentProps?: IPropsAny;
+    IconArrow?: IElementReference;
+    TransitionComponent?: IElementReference;
+    children?: any;
+}
+declare const Tree: React.FC<ITree>;
+export default Tree;

package/Tree/Tree.js

@@ -0,0 +1,322 @@
+"use strict";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialExpandMoreW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialExpandMoreW100"));
+const Checkbox_1 = __importDefault(require("../Checkbox"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Type_1 = __importDefault(require("../Type"));
+const Fade_1 = __importDefault(require("../Fade"));
+const Expand_1 = __importDefault(require("../Expand"));
+const Interaction_1 = __importDefault(require("../Interaction"));
+const Line_1 = __importDefault(require("../Line"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative'
+    },
+    line: {
+        '&::before': {
+            content: "''",
+            position: 'absolute',
+            insetInlineStart: '-12px',
+            height: '100%',
+            width: '2px',
+            background: theme.palette.light ? theme.palette.color.neutral['90'] : theme.palette.color.neutral['20']
+        },
+        '&:last-of-type': {
+            '&::before': {
+                height: '2px'
+            }
+        }
+    },
+    main: {
+        // Reset
+        fontFamily: 'inherit',
+        background: 'transparent',
+        border: 'none',
+        fontSize: '100%',
+        lineHeight: '1.15',
+        margin: '0',
+        position: 'relative',
+        color: 'inherit',
+        padding: `${theme.methods.space.value(0.25, 'px')} ${theme.methods.space.value(1, 'px')}`,
+        borderRadius: `${theme.shape.radius.unit * 0.5}px`
+    },
+    main_line: {
+        '&::before': {
+            content: "''",
+            position: 'absolute',
+            top: 'calc(50% - 15px)',
+            insetInlineStart: '-12px',
+            width: '10px',
+            height: '14px',
+            borderLeft: '2px solid',
+            borderBottom: '2px solid',
+            borderColor: theme.palette.light ? theme.palette.color.neutral['90'] : theme.palette.color.neutral['20'],
+            borderBottomLeftRadius: '6px',
+            transform: `rotateY(${theme.direction === 'ltr' ? 0 : 180}deg)`
+        }
+    },
+    item: {
+        padding: `${theme.methods.space.value(0.25, 'px')} 0`
+    },
+    middle: {
+        flex: '1 1 auto'
+    },
+    indicator: {
+        transition: theme.methods.transitions.make('transform')
+    },
+    indicator_open: {
+        transform: 'rotate(-180deg)'
+    },
+    button: {
+        // Reset
+        fontFamily: 'inherit',
+        '-webkit-appearance': 'none',
+        appearance: 'none',
+        background: 'transparent',
+        border: 'none',
+        fontSize: '100%',
+        lineHeight: '1.15',
+        padding: '0',
+        margin: '0',
+        overflow: 'visible',
+        textTransform: 'none',
+        userSelect: 'none',
+        cursor: 'pointer'
+    },
+    disabled: {
+        pointerEvents: 'none',
+        cursor: 'default',
+        opacity: theme.palette.visual_contrast.default.opacity.disabled
+    }
+}), { name: 'onesy-Tree' });
+const TreeDelays = {
+    Transition: {
+        enter: 70
+    }
+};
+const Tree = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTree) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Checkbox = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Checkbox) || Checkbox_1.default; }, [theme]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
+    const Expand = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Expand) || Expand_1.default; }, [theme]);
+    const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
+    const { tonal = true, color = 'default', version = 'text', open: open_, openDefault, onChange, selected, line, indicator, arrow = true, checkbox, indicatorPosition = 'start', level = 0, icon, iconOpen, start: start_, middle, end: end_, button = true, noTransition, noExpand, noPadding, parentDisabled, disabled, ExpandProps, MainProps: MainProps_, StartProps, MiddleProps, EndProps, IndicatorProps, TransitionComponentProps: TransitionComponentProps_, TreeProps, IconArrow = IconMaterialExpandMoreW100_1.default, TransitionComponent: TransitionComponent_ = Fade, Component = 'div', className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "open", "openDefault", "onChange", "selected", "line", "indicator", "arrow", "checkbox", "indicatorPosition", "level", "icon", "iconOpen", "start", "middle", "end", "button", "noTransition", "noExpand", "noPadding", "parentDisabled", "disabled", "ExpandProps", "MainProps", "StartProps", "MiddleProps", "EndProps", "IndicatorProps", "TransitionComponentProps", "TreeProps", "IconArrow", "TransitionComponent", "Component", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [init, setInit] = react_1.default.useState(false);
+    const [focus, setFocus] = react_1.default.useState(false);
+    const [open, setOpen] = react_1.default.useState(openDefault !== undefined ? openDefault : open_);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        ids: {
+            middle: react_1.default.useId()
+        },
+        inProgressTransition: react_1.default.useRef()
+    };
+    const styles = {
+        root: {}
+    };
+    let TransitionComponent = TransitionComponent_;
+    let TransitionComponentProps = Object.assign({ add: true, delay: {
+            enter: TreeDelays.Transition.enter
+        } }, TransitionComponentProps_);
+    react_1.default.useEffect(() => {
+        setInit(true);
+    }, []);
+    react_1.default.useEffect(() => {
+        if (init) {
+            if (open_ !== open)
+                setOpen(open_);
+        }
+    }, [open_]);
+    const onKeyDown = (event) => {
+        var _a;
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        if (level === 0) {
+            let allElements = [];
+            let index = 0;
+            if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                allElements = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
+            }
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    index = (0, utils_1.clamp)(allElements.findIndex(item => item === rootDocument.activeElement), 0);
+                    event.key === 'ArrowDown' ? index++ : index--;
+                    allElements[(0, utils_1.clamp)(index, 0, allElements.length - 1)].focus();
+                    event.preventDefault();
+                    return;
+                default:
+                    break;
+            }
+        }
+    };
+    const onClick = react_1.default.useCallback((event) => {
+        if ((0, utils_1.is)('function', MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.onClick))
+            MiddleProps.onClick(event);
+        if (refs.inProgressTransition.current)
+            return;
+        if (!disabled && !noExpand && children_) {
+            const valueNew = !open;
+            // Update inner or controlled
+            if (!props.hasOwnProperty('open'))
+                setOpen(valueNew);
+            if ((0, utils_1.is)('function', onChange))
+                onChange(valueNew);
+        }
+    }, [open, noExpand, children_, disabled]);
+    if (!noTransition)
+        TransitionComponentProps.in = open;
+    else {
+        TransitionComponent = react_1.default.Fragment;
+        TransitionComponentProps = {};
+    }
+    const onBlur = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setFocus(false);
+    }, [disabled]);
+    const onFocus = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setFocus(true);
+    }, [disabled]);
+    const start = react_1.default.Children.toArray(start_);
+    // Icon
+    if (!open ? icon : iconOpen || icon)
+        start.push((!open ? icon : iconOpen || icon));
+    const end = react_1.default.Children.toArray(end_);
+    if (indicator && button && children_ && !noExpand) {
+        let Indicator;
+        if (arrow) {
+            Indicator = ((0, jsx_runtime_1.jsx)(IconArrow, Object.assign({ className: (0, style_react_1.classNames)([
+                    classes.indicator,
+                    open && classes.indicator_open
+                ]) }, IndicatorProps)));
+        }
+        if (checkbox) {
+            Indicator = ((0, jsx_runtime_1.jsx)(Checkbox, Object.assign({ size: 'small', checked: open }, IndicatorProps)));
+        }
+        if (indicatorPosition === 'start')
+            start.unshift(Indicator);
+        else if (indicatorPosition === 'end')
+            end.push(Indicator);
+    }
+    const MainProps = Object.assign({}, MainProps_);
+    if (!disabled) {
+        MainProps.onBlur = onBlur;
+        MainProps.onFocus = onFocus;
+    }
+    if (level > 0 && !noPadding) {
+        styles.root.marginInlineStart = `${theme.space.unit * 2.5}px`;
+    }
+    const children = (react_1.default.Children.toArray(children_).map((item) => (react_1.default.cloneElement(item, {
+        tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+        color: item.props.color !== undefined ? item.props.color : color,
+        version: item.props.version !== undefined ? item.props.version : version,
+        line: item.props.line !== undefined ? item.props.line : line,
+        checkbox: item.props.checkbox !== undefined ? item.props.checkbox : checkbox,
+        IconArrow: item.props.IconArrow !== undefined ? item.props.IconArrow : IconArrow,
+        indicator: item.props.indicator !== undefined ? item.props.indicator : indicator,
+        indicatorPosition: item.props.indicatorPosition !== undefined ? item.props.indicatorPosition : indicatorPosition,
+        noExpand: item.props.noExpand !== undefined ? item.props.noExpand : noExpand,
+        noTransition: item.props.noTransition !== undefined ? item.props.noTransition : noTransition,
+        parentDisabled: item.props.parentDisabled !== undefined ? item.props.parentDisabled : parentDisabled || disabled,
+        level: level + 1
+    }))));
+    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else if (ref === null || ref === void 0 ? void 0 : ref.current)
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, tonal: tonal, color: color, version: version, gap: 0, align: 'unset', justify: 'unset', onKeyDown: onKeyDown, role: level === 0 ? 'tree' : 'treeitem', "aria-labelledby": refs.ids.middle, "aria-expanded": open, "aria-selected": selected, Component: Line, AdditionalProps: {
+            Component
+        }, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Tree', theme) && [
+                'onesy-Tree-root',
+                children ? `onesy-Tree-children` : `onesy-Tree-empty`,
+                parentDisabled && `onesy-Tree-parent-disabled`,
+                disabled && `onesy-Tree-disabled`
+            ],
+            className,
+            classes.root,
+            (level > 0 && line) && classes.line,
+            disabled && classes.disabled
+        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, tabIndex: (!disabled && !parentDisabled) ? 0 : -1, onClick: onClick, direction: 'row', align: 'center', justify: 'unset', role: (button && children) ? 'button' : undefined, Component: (button && children) ? 'button' : 'div' }, MainProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Tree', theme) && [
+                        'onesy-Tree-main'
+                    ],
+                    MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
+                    classes.main,
+                    button && classes.button,
+                    (level > 0 && line) && classes.main_line
+                ]) }, { children: [button && ((0, jsx_runtime_1.jsx)(Interaction, { selected: selected, pulse: focus })), !!start.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'unset' }, StartProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Tree', theme) && [
+                                'onesy-Tree-item',
+                                'onesy-Tree-aside',
+                                'onesy-Tree-start'
+                            ],
+                            StartProps === null || StartProps === void 0 ? void 0 : StartProps.className,
+                            classes.item,
+                            classes.aside,
+                            classes.start
+                        ]) }, { children: start.map((item, index) => (react_1.default.cloneElement(item, {
+                            key: index
+                        }))) }))), middle && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, id: refs.ids.middle, Component: (0, utils_1.is)('simple', middle) ? Type : undefined }, MiddleProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Tree', theme) && [
+                                'onesy-Tree-item',
+                                'onesy-Tree-middle',
+                                'onesy-Tree-end'
+                            ],
+                            MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className,
+                            classes.item,
+                            classes.middle
+                        ]) }, { children: middle }))), !!end.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'unset' }, EndProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Tree', theme) && [
+                                'onesy-Tree-item',
+                                'onesy-Tree-aside',
+                                'onesy-Tree-end'
+                            ],
+                            EndProps === null || EndProps === void 0 ? void 0 : EndProps.className,
+                            classes.item,
+                            classes.aside,
+                            classes.end
+                        ]) }, { children: end.map((item, index) => (react_1.default.cloneElement(item, {
+                            key: index
+                        }))) })))] })), noExpand && children, !noExpand && children && ((0, jsx_runtime_1.jsx)(Expand, Object.assign({ in: open, parent: parent || refs.root.current, onTransition: (element, status) => {
+                    refs.inProgressTransition.current = !['entered', 'removed'].includes(status);
+                } }, ExpandProps, { children: (0, jsx_runtime_1.jsx)(TransitionComponent, Object.assign({}, TransitionComponentProps, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, align: 'unset', justify: 'unset', role: 'group' }, TreeProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('Tree', theme) && [
+                                'onesy-Tree-tree'
+                            ],
+                            TreeProps === null || TreeProps === void 0 ? void 0 : TreeProps.className,
+                            classes.tree
+                        ]) }, { children: children.map((item, index) => (react_1.default.cloneElement(item, {
+                            key: index
+                        }))) })) })) })))] })));
+});
+Tree.displayName = 'onesy-Tree';
+exports.default = Tree;

package/Tree/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tree';

package/Tree/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Tree_1 = require("./Tree");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tree_1).default; } });

package/Tree/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Tree/index.js",
+  "types": "./index.d.ts"
+}