@vinyasa/navigation 1.0.26

package/dist/cjs/tree-view.cjs

@@ -0,0 +1,373 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    TreeView: ()=>TreeView
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@vinyasa/icons");
+const tokens_namespaceObject = require("@vinyasa/tokens");
+const external_react_namespaceObject = require("react");
+var expandTrigger = '_1o0hep24';
+var expandTriggerSpacer = '_1o0hep25';
+var group = '_1o0hep21';
+var icon = '_1o0hep26';
+var item = '_1o0hep22';
+var label = '_1o0hep27';
+var root = '_1o0hep20';
+var row = '_1o0hep23';
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function TreeView_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else TreeView_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const TreeViewContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
+const useTreeViewContext = ()=>{
+    const context = (0, external_react_namespaceObject.useContext)(TreeViewContext);
+    if (!context) throw new Error('TreeView parts must be rendered inside <TreeView.Root>.');
+    return context;
+};
+const TreeViewLevelContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(1);
+const TreeViewRoot = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { selectedId, onSelect, expandedIds: expandedIdsProp, defaultExpandedIds = [], onExpandedChange, className, children } = _ref1, rest = _object_without_properties(_ref1, [
+        "selectedId",
+        "onSelect",
+        "expandedIds",
+        "defaultExpandedIds",
+        "onExpandedChange",
+        "className",
+        "children"
+    ]), [ref] = _rest;
+    const [internalExpandedIds, setInternalExpandedIds] = (0, external_react_namespaceObject.useState)(defaultExpandedIds);
+    const [activeId, setActiveId] = (0, external_react_namespaceObject.useState)(null);
+    const rootElementRef = (0, external_react_namespaceObject.useRef)(null);
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
+    const isControlled = void 0 !== expandedIdsProp;
+    const expandedIdsArray = isControlled ? expandedIdsProp : internalExpandedIds;
+    const expandedIds = new Set(expandedIdsArray);
+    const toggleExpanded = (id)=>{
+        const next = expandedIds.has(id) ? expandedIdsArray.filter((existing)=>existing !== id) : [
+            ...expandedIdsArray,
+            id
+        ];
+        if (!isControlled) setInternalExpandedIds(next);
+        null == onExpandedChange || onExpandedChange(next);
+    };
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        var _rootElementRef_current;
+        if (null !== activeId) return;
+        const firstItem = null == (_rootElementRef_current = rootElementRef.current) ? void 0 : _rootElementRef_current.querySelector('[role="treeitem"]');
+        const firstId = null == firstItem ? void 0 : firstItem.dataset.treeId;
+        if (firstId) setActiveId(firstId);
+    }, [
+        activeId
+    ]);
+    const focusItem = (element)=>{
+        if (!element) return;
+        element.focus();
+        const id = element.dataset.treeId;
+        if (id) setActiveId(id);
+    };
+    const focusSibling = (rootElement, target, delta)=>{
+        const items = Array.from(rootElement.querySelectorAll('[role="treeitem"]'));
+        focusItem(items[items.indexOf(target) + delta]);
+    };
+    const focusFirst = (rootElement)=>{
+        focusItem(rootElement.querySelector('[role="treeitem"]'));
+    };
+    const focusLast = (rootElement)=>{
+        const items = rootElement.querySelectorAll('[role="treeitem"]');
+        focusItem(items[items.length - 1]);
+    };
+    const expandOrFocusFirstChild = (target, targetId)=>{
+        var _target_parentElement;
+        if ('true' !== target.dataset.hasChildren) return;
+        if ('true' !== target.getAttribute('aria-expanded')) return void toggleExpanded(targetId);
+        const childGroup = null == (_target_parentElement = target.parentElement) ? void 0 : _target_parentElement.querySelector(':scope > [role="group"]');
+        focusItem(null == childGroup ? void 0 : childGroup.querySelector('[role="treeitem"]'));
+    };
+    const collapseOrFocusParent = (target, targetId)=>{
+        var _parentGroup_parentElement;
+        if ('true' === target.getAttribute('aria-expanded')) return void toggleExpanded(targetId);
+        const parentGroup = target.closest('[role="group"]');
+        focusItem(null == parentGroup ? void 0 : null == (_parentGroup_parentElement = parentGroup.parentElement) ? void 0 : _parentGroup_parentElement.querySelector(':scope > [role="treeitem"]'));
+    };
+    const keyHandlers = {
+        ArrowDown: (rootElement, target)=>{
+            focusSibling(rootElement, target, 1);
+        },
+        ArrowUp: (rootElement, target)=>{
+            focusSibling(rootElement, target, -1);
+        },
+        Home: (rootElement)=>{
+            focusFirst(rootElement);
+        },
+        End: (rootElement)=>{
+            focusLast(rootElement);
+        },
+        ArrowRight: (_rootElement, target, targetId)=>{
+            expandOrFocusFirstChild(target, targetId);
+        },
+        ArrowLeft: (_rootElement, target, targetId)=>{
+            collapseOrFocusParent(target, targetId);
+        },
+        Enter: (_rootElement, _target, targetId)=>{
+            null == onSelect || onSelect(targetId);
+        },
+        ' ': (_rootElement, _target, targetId)=>{
+            null == onSelect || onSelect(targetId);
+        }
+    };
+    const handleKeyDown = (event)=>{
+        const target = event.target;
+        if (!(target instanceof HTMLElement) || 'treeitem' !== target.getAttribute('role')) return;
+        const rootElement = rootElementRef.current;
+        const targetId = target.dataset.treeId;
+        const handler = keyHandlers[event.key];
+        if (!rootElement || !targetId || !handler) return;
+        event.preventDefault();
+        handler(rootElement, target, targetId);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TreeViewContext.Provider, {
+        value: {
+            expandedIds,
+            toggleExpanded,
+            selectedId,
+            onSelect: null != onSelect ? onSelect : ()=>void 0,
+            activeId,
+            setActiveId
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", _object_spread_props(_object_spread({
+            ref: (node)=>{
+                rootElementRef.current = node;
+                if ('function' == typeof themedRef) themedRef(node);
+            },
+            role: "tree",
+            className: className ? `${root} ${className}` : root,
+            onKeyDown: handleKeyDown
+        }, rest), {
+            children: children
+        }))
+    });
+});
+TreeViewRoot.displayName = 'TreeViewRoot';
+const TreeViewGroup = (_0)=>{
+    let { className, children } = _0, rest = _object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    const level = (0, external_react_namespaceObject.useContext)(TreeViewLevelContext);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TreeViewLevelContext.Provider, {
+        value: level + 1,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", _object_spread_props(_object_spread({
+            role: "group",
+            className: className ? `${group} ${className}` : group
+        }, rest), {
+            children: children
+        }))
+    });
+};
+TreeViewGroup.displayName = 'TreeViewGroup';
+const TreeViewItem = (_0)=>{
+    let { id, label: labelContent, icon: iconContent, disabled, children, className } = _0, rest = _object_without_properties(_0, [
+        "id",
+        "label",
+        "icon",
+        "disabled",
+        "children",
+        "className"
+    ]);
+    const { expandedIds, toggleExpanded, selectedId, onSelect, activeId, setActiveId } = useTreeViewContext();
+    const level = (0, external_react_namespaceObject.useContext)(TreeViewLevelContext);
+    const hasChildren = Boolean(children);
+    const isExpanded = expandedIds.has(id);
+    const isSelected = selectedId === id;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("li", _object_spread_props(_object_spread({
+        className: className ? `${item} ${className}` : item,
+        role: "none"
+    }, rest), {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                role: "treeitem",
+                "data-tree-id": id,
+                "data-has-children": hasChildren,
+                "aria-expanded": hasChildren ? isExpanded : void 0,
+                "aria-selected": isSelected,
+                "aria-disabled": disabled,
+                "aria-level": level,
+                tabIndex: activeId === id ? 0 : -1,
+                className: row,
+                onFocus: ()=>{
+                    setActiveId(id);
+                },
+                onClick: ()=>{
+                    if (disabled) return;
+                    onSelect(id);
+                    if (hasChildren) toggleExpanded(id);
+                },
+                children: [
+                    hasChildren ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        tabIndex: -1,
+                        "aria-hidden": "true",
+                        "data-expanded": isExpanded,
+                        className: expandTrigger,
+                        onClick: (event)=>{
+                            event.stopPropagation();
+                            if (!disabled) toggleExpanded(id);
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ChevronRightIcon, {})
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: expandTriggerSpacer,
+                        "aria-hidden": "true"
+                    }),
+                    iconContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: icon,
+                        "aria-hidden": "true",
+                        children: iconContent
+                    }) : null,
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: label,
+                        children: labelContent
+                    })
+                ]
+            }),
+            hasChildren && isExpanded ? children : null
+        ]
+    }));
+};
+TreeViewItem.displayName = 'TreeViewItem';
+const renderNodes = (nodes)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+        children: nodes.map((node)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TreeViewItem, {
+                id: node.id,
+                label: node.label,
+                icon: node.icon,
+                disabled: node.disabled,
+                children: node.children && node.children.length > 0 ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TreeViewGroup, {
+                    children: renderNodes(node.children)
+                }) : void 0
+            }, node.id))
+    });
+const TreeViewImpl = (_0)=>{
+    let { items } = _0, rest = _object_without_properties(_0, [
+        "items"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TreeViewRoot, _object_spread_props(_object_spread({}, rest), {
+        children: renderNodes(items)
+    }));
+};
+TreeViewImpl.displayName = 'TreeView';
+const TreeView = Object.assign(TreeViewImpl, {
+    Root: TreeViewRoot,
+    Group: TreeViewGroup,
+    Item: TreeViewItem
+});
+exports.TreeView = __webpack_exports__.TreeView;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "TreeView"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/tree-view.css

@@ -0,0 +1,109 @@
+._1o0hep20 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+._1o0hep21 {
+  padding: 0;
+  padding-left: var(--vinyasa-space5);
+  margin: 0;
+  list-style: none;
+}
+
+._1o0hep22 {
+  list-style: none;
+}
+
+._1o0hep23 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  min-width: 0;
+  padding: var(--vinyasa-space2) var(--vinyasa-space2) var(--vinyasa-space2) var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-md);
+  color: var(--vinyasa-text-default);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  display: flex;
+  position: relative;
+}
+
+._1o0hep23:hover:not([aria-disabled="true"]) {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1o0hep23:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+._1o0hep23[aria-disabled="true"] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._1o0hep23[aria-selected="true"] {
+  background-color: var(--vinyasa-tertiary);
+  color: var(--vinyasa-primary);
+  font-weight: var(--vinyasa-font-weight-medium);
+}
+
+._1o0hep23[aria-selected="true"]:before {
+  content: "";
+  border-radius: var(--vinyasa-radius-full);
+  background-color: var(--vinyasa-primary);
+  width: .1875rem;
+  position: absolute;
+  top: .25rem;
+  bottom: .25rem;
+  left: .125rem;
+}
+
+._1o0hep24 {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--vinyasa-text-muted);
+  cursor: pointer;
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+._1o0hep24:hover {
+  color: var(--vinyasa-text-default);
+}
+
+._1o0hep24[data-expanded="true"] {
+  transform: rotate(90deg);
+}
+
+[aria-selected="true"] ._1o0hep24 {
+  color: var(--vinyasa-primary);
+}
+
+._1o0hep25 {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+._1o0hep26 {
+  flex-shrink: 0;
+  font-size: 1rem;
+  display: inline-flex;
+}
+
+._1o0hep27 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+