@devtools-ds/tree - npm Package Compare versions

Comparing version 0.133.0 to 1.0.0

CHANGELOG.md

		@@ -0,1 +1,22 @@
		# v1.0.0 (Tue Feb 02 2021)

		#### 💥 Breaking Change

		- Initial release [#8](https://github.com/intuit/devtools-ds/pull/8) ([@tylerkrupicka](https://github.com/tylerkrupicka))

		#### 🐛 Bug Fix

		- try to center on windows and mac ([@tylerkrupicka](https://github.com/tylerkrupicka))
		- make arrow spacing dynamic ([@tylerkrupicka](https://github.com/tylerkrupicka))
		- pure css arrow ([@tylerkrupicka](https://github.com/tylerkrupicka))
		- theme arrow ([@tylerkrupicka](https://github.com/tylerkrupicka))
		- fix tests ([@tylerkrupicka](https://github.com/tylerkrupicka))
		- update tree arrow ([@tylerkrupicka](https://github.com/tylerkrupicka))

		#### Authors: 1

		- Tyler Krupicka ([@tylerkrupicka](https://github.com/tylerkrupicka))

		---

		# v0.132.0 (Mon Feb 01 2021)
		@@ -2,0 +23,0 @@

dist/cjs/index.js

		@@ -1,2 +0,2 @@
		"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Tree=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _themes=require("@devtools-ds/themes");var _clsx=_interopRequireDefault(require("clsx"));var _TreeContext=_interopRequireDefault(require("./TreeContext"));var _Tree=_interopRequireDefault(require("./Tree.css"));const Tree=props=>{const{theme,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0,_objectWithoutProperties2.default)(props,["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"]);const{themeClass,currentTheme}=(0,_themes.useTheme)({theme,colorScheme},_Tree.default);const[isOpen,setOpen]=(0,_react.useState)(open);(0,_react.useEffect)(()=>{setOpen(open)},[open]);const updateState=value=>{setOpen(value);if(onUpdate)onUpdate(value)};const hasChildren=_react.default.Children.count(children)>0;const updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode\|\|null))return;const focusableNode=newNode.querySelector("[tabindex=\"-1\"]");focusableNode===null\|\|focusableNode===void 0?void 0:focusableNode.focus();newNode.setAttribute("aria-selected","true");previousNode===null\|\|previousNode===void 0?void 0:previousNode.removeAttribute("aria-selected")};const getParent=(node,role)=>{let parent=node;while(parent&&parent.parentElement){if(parent.getAttribute("role")===role){return parent}parent=parent.parentElement}return null};const getListElements=node=>{const tree=getParent(node,"tree");if(!tree)return[];return Array.from(tree.querySelectorAll("li"))};const moveBack=node=>{const group=getParent(node,"group");const toggle=group===null\|\|group===void 0?void 0:group.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){const toggleParent=toggle.parentElement;const nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent)}};const moveHome=(node,direction)=>{const elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected")});if(direction==="start"&&elements[0]){updateFocus(elements[0])}if(direction==="end"&&elements[elements.length-1]){updateFocus(elements[elements.length-1])}};const moveFocusAdjacent=(node,direction)=>{const elements=getListElements(node)\|\|[];for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(direction==="up"&&elements[i-1]){updateFocus(elements[i-1],currentNode)}else if(direction==="down"&&elements[i+1]){updateFocus(elements[i+1],currentNode)}return}}updateFocus(elements[0])};const handleKeypress=(event,isChild)=>{const node=event.target;if(event.key==="Enter"\|\|event.key===" "){updateState(!isOpen)}if(event.key==="ArrowRight"&&isOpen&&!isChild){moveFocusAdjacent(node,"down")}else if(event.key==="ArrowRight"){updateState(true)}if(event.key==="ArrowLeft"&&(!isOpen\|\|isChild)){moveBack(node)}else if(event.key==="ArrowLeft"){updateState(false)}if(event.key==="ArrowDown"){moveFocusAdjacent(node,"down")}if(event.key==="ArrowUp"){moveFocusAdjacent(node,"up")}if(event.key==="Home"){moveHome(node,"start")}if(event.key==="End"){moveHome(node,"end")}};const handleClick=(event,isChild)=>{const node=event.target;const parent=getParent(node,"treeitem");const elements=getListElements(node)\|\|[];let found=false;for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(parent){found=true;updateFocus(parent,currentNode)}break}}if(!found&&parent){updateFocus(parent)}if(!isChild){updateState(!isOpen)}};const handleBlur=event=>{const node=event.currentTarget;if(!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"){node.setAttribute("tabindex","0")}};const handleFocus=event=>{const node=event.target;if(node.getAttribute("role")==="tree"){const selected=node.querySelector("[aria-selected=\"true\"]");if(selected){updateFocus(selected)}else{moveFocusAdjacent(node,"down")}node.setAttribute("tabindex","-1")}};const handleButtonFocus=()=>{onSelect===null\|\|onSelect===void 0?void 0:onSelect()};const getPaddingStyles=depth=>{const space=depth*10;return{paddingLeft:`${space}px`,width:`calc(100% - ${space}px)`}};const{isChild,depth,hasHover}=_react.default.useContext(_TreeContext.default);const showHover=hasHover?hover:false;if(!isChild){return _react.default.createElement("ul",(0,_extends2.default)({role:"tree",tabIndex:0,className:(0,_clsx.default)(_Tree.default.tree,_Tree.default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),_react.default.createElement(_TreeContext.default.Provider,{value:{isChild:true,depth:0,hasHover:showHover}},_react.default.createElement(Tree,props)))}if(!hasChildren){return _react.default.createElement("li",(0,_extends2.default)({role:"treeitem",className:_Tree.default.item},html),_react.default.createElement("div",{role:"button",className:(0,_clsx.default)(_Tree.default.label,{[_Tree.default.hover]:showHover,[_Tree.default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild)},onClick:e=>handleClick(e,true),onFocus:handleButtonFocus},_react.default.createElement("span",null,label)))}const arrowClass=(0,_clsx.default)(_Tree.default.arrow,{[_Tree.default.open]:isOpen});return _react.default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:_Tree.default.item},_react.default.createElement("div",{role:"button",tabIndex:-1,className:(0,_clsx.default)(_Tree.default.label,{[_Tree.default.hover]:showHover,[_Tree.default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},_react.default.createElement("span",null,_react.default.createElement("span",{"aria-hidden":true,className:arrowClass},"\u25B6"),_react.default.createElement("span",null,label))),_react.default.createElement("ul",(0,_extends2.default)({role:"group",className:(0,_clsx.default)(className,_Tree.default.group)},html),isOpen&&_react.default.Children.map(children,child=>{return _react.default.createElement(_TreeContext.default.Provider,{value:{isChild:true,depth:depth+1,hasHover:showHover}},child)})))};exports.Tree=Tree;Tree.defaultProps={open:false,hover:true};
		"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Tree=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _themes=require("@devtools-ds/themes");var _clsx=_interopRequireDefault(require("clsx"));var _TreeContext=_interopRequireDefault(require("./TreeContext"));var _Tree=_interopRequireDefault(require("./Tree.css"));const Tree=props=>{const{theme,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0,_objectWithoutProperties2.default)(props,["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"]);const{themeClass,currentTheme}=(0,_themes.useTheme)({theme,colorScheme},_Tree.default);const[isOpen,setOpen]=(0,_react.useState)(open);(0,_react.useEffect)(()=>{setOpen(open)},[open]);const updateState=value=>{setOpen(value);if(onUpdate)onUpdate(value)};const hasChildren=_react.default.Children.count(children)>0;const updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode\|\|null))return;const focusableNode=newNode.querySelector("[tabindex=\"-1\"]");focusableNode===null\|\|focusableNode===void 0?void 0:focusableNode.focus();newNode.setAttribute("aria-selected","true");previousNode===null\|\|previousNode===void 0?void 0:previousNode.removeAttribute("aria-selected")};const getParent=(node,role)=>{let parent=node;while(parent&&parent.parentElement){if(parent.getAttribute("role")===role){return parent}parent=parent.parentElement}return null};const getListElements=node=>{const tree=getParent(node,"tree");if(!tree)return[];return Array.from(tree.querySelectorAll("li"))};const moveBack=node=>{const group=getParent(node,"group");const toggle=group===null\|\|group===void 0?void 0:group.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){const toggleParent=toggle.parentElement;const nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent)}};const moveHome=(node,direction)=>{const elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected")});if(direction==="start"&&elements[0]){updateFocus(elements[0])}if(direction==="end"&&elements[elements.length-1]){updateFocus(elements[elements.length-1])}};const moveFocusAdjacent=(node,direction)=>{const elements=getListElements(node)\|\|[];for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(direction==="up"&&elements[i-1]){updateFocus(elements[i-1],currentNode)}else if(direction==="down"&&elements[i+1]){updateFocus(elements[i+1],currentNode)}return}}updateFocus(elements[0])};const handleKeypress=(event,isChild)=>{const node=event.target;if(event.key==="Enter"\|\|event.key===" "){updateState(!isOpen)}if(event.key==="ArrowRight"&&isOpen&&!isChild){moveFocusAdjacent(node,"down")}else if(event.key==="ArrowRight"){updateState(true)}if(event.key==="ArrowLeft"&&(!isOpen\|\|isChild)){moveBack(node)}else if(event.key==="ArrowLeft"){updateState(false)}if(event.key==="ArrowDown"){moveFocusAdjacent(node,"down")}if(event.key==="ArrowUp"){moveFocusAdjacent(node,"up")}if(event.key==="Home"){moveHome(node,"start")}if(event.key==="End"){moveHome(node,"end")}};const handleClick=(event,isChild)=>{const node=event.target;const parent=getParent(node,"treeitem");const elements=getListElements(node)\|\|[];let found=false;for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(parent){found=true;updateFocus(parent,currentNode)}break}}if(!found&&parent){updateFocus(parent)}if(!isChild){updateState(!isOpen)}};const handleBlur=event=>{const node=event.currentTarget;if(!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"){node.setAttribute("tabindex","0")}};const handleFocus=event=>{const node=event.target;if(node.getAttribute("role")==="tree"){const selected=node.querySelector("[aria-selected=\"true\"]");if(selected){updateFocus(selected)}else{moveFocusAdjacent(node,"down")}node.setAttribute("tabindex","-1")}};const handleButtonFocus=()=>{onSelect===null\|\|onSelect===void 0?void 0:onSelect()};const getPaddingStyles=depth=>{const space=depth*0.9;return{paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}};const{isChild,depth,hasHover}=_react.default.useContext(_TreeContext.default);const showHover=hasHover?hover:false;if(!isChild){return _react.default.createElement("ul",(0,_extends2.default)({role:"tree",tabIndex:0,className:(0,_clsx.default)(_Tree.default.tree,_Tree.default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),_react.default.createElement(_TreeContext.default.Provider,{value:{isChild:true,depth:0,hasHover:showHover}},_react.default.createElement(Tree,props)))}if(!hasChildren){return _react.default.createElement("li",(0,_extends2.default)({role:"treeitem",className:_Tree.default.item},html),_react.default.createElement("div",{role:"button",className:(0,_clsx.default)(_Tree.default.label,{[_Tree.default.hover]:showHover,[_Tree.default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild)},onClick:e=>handleClick(e,true),onFocus:handleButtonFocus},_react.default.createElement("span",null,label)))}const arrowClass=(0,_clsx.default)(_Tree.default.arrow,{[_Tree.default.open]:isOpen});return _react.default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:_Tree.default.item},_react.default.createElement("div",{role:"button",tabIndex:-1,className:(0,_clsx.default)(_Tree.default.label,{[_Tree.default.hover]:showHover,[_Tree.default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},_react.default.createElement("span",null,_react.default.createElement("span",{"aria-hidden":true,className:arrowClass}),_react.default.createElement("span",null,label))),_react.default.createElement("ul",(0,_extends2.default)({role:"group",className:(0,_clsx.default)(className,_Tree.default.group)},html),isOpen&&_react.default.Children.map(children,child=>{return _react.default.createElement(_TreeContext.default.Provider,{value:{isChild:true,depth:depth+1,hasHover:showHover}},child)})))};exports.Tree=Tree;Tree.defaultProps={open:false,hover:true};
		//# sourceMappingURL=index.js.map

dist/cjs/Tree.css.js

		@@ -1,1 +0,1 @@
		module.exports = {"tree":"Tree-tree-b6ea06c","item":"Tree-item-fd0cf12","group":"Tree-group-95423dc","label":"Tree-label-600de85","arrow":"Tree-arrow-aa6259c","focusWhite":"Tree-focusWhite-33a2fbd","hover":"Tree-hover-bdfc661","open":"Tree-open-c4e73be","dark":"Tree-dark-fddc5d2","chrome":"Tree-chrome-4e0f4b8","light":"Tree-light-c7be103"};
		module.exports = {"tree":"Tree-tree-b7cdb82","item":"Tree-item-7bfef5f","group":"Tree-group-78c1226","label":"Tree-label-5771fea","focusWhite":"Tree-focusWhite-016a7d0","arrow":"Tree-arrow-dd7899c","hover":"Tree-hover-bfb7dd4","open":"Tree-open-71518f5","dark":"Tree-dark-277cc2f","chrome":"Tree-chrome-74eed6a","light":"Tree-light-fbc8858"};

dist/esm/index.js

		@@ -1,3 +0,3 @@
		import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{useState,useEffect}from"react";import{useTheme}from"@devtools-ds/themes";import makeClass from"clsx";import TreeContext from"./TreeContext";import styles from"./Tree.css";export const Tree=props=>{const{theme,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=_objectWithoutProperties(props,["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"]);const{themeClass,currentTheme}=useTheme({theme,colorScheme},styles);const[isOpen,setOpen]=useState(open);useEffect(()=>{setOpen(open)},[open]);const updateState=value=>{setOpen(value);if(onUpdate)onUpdate(value)};const hasChildren=React.Children.count(children)>0;const updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode\|\|null))return;const focusableNode=newNode.querySelector("[tabindex=\"-1\"]");focusableNode===null\|\|focusableNode===void 0?void 0:focusableNode.focus();newNode.setAttribute("aria-selected","true");previousNode===null\|\|previousNode===void 0?void 0:previousNode.removeAttribute("aria-selected")};const getParent=(node,role)=>{let parent=node;while(parent&&parent.parentElement){if(parent.getAttribute("role")===role){return parent}parent=parent.parentElement}return null};const getListElements=node=>{const tree=getParent(node,"tree");if(!tree)return[];return Array.from(tree.querySelectorAll("li"))};const moveBack=node=>{const group=getParent(node,"group");const toggle=group===null\|\|group===void 0?void 0:group.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){const toggleParent=toggle.parentElement;const nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent)}};const moveHome=(node,direction)=>{const elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected")});if(direction==="start"&&elements[0]){updateFocus(elements[0])}if(direction==="end"&&elements[elements.length-1]){updateFocus(elements[elements.length-1])}};const moveFocusAdjacent=(node,direction)=>{const elements=getListElements(node)\|\|[];for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(direction==="up"&&elements[i-1]){updateFocus(elements[i-1],currentNode)}else if(direction==="down"&&elements[i+1]){updateFocus(elements[i+1],currentNode)}return}}updateFocus(elements[0])};const handleKeypress=(event,isChild)=>{const node=event.target;if(event.key==="Enter"\|\|event.key===" "){updateState(!isOpen)}if(event.key==="ArrowRight"&&isOpen&&!isChild){moveFocusAdjacent(node,"down")}else if(event.key==="ArrowRight"){updateState(true)}if(event.key==="ArrowLeft"&&(!isOpen\|\|isChild)){moveBack(node)}else if(event.key==="ArrowLeft"){updateState(false)}if(event.key==="ArrowDown"){moveFocusAdjacent(node,"down")}if(event.key==="ArrowUp"){moveFocusAdjacent(node,"up")}if(event.key==="Home"){moveHome(node,"start")}if(event.key==="End"){moveHome(node,"end")}};const handleClick=(event,isChild)=>{const node=event.target;const parent=getParent(node,"treeitem");const elements=getListElements(node)\|\|[];let found=false;for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(parent){found=true;updateFocus(parent,currentNode)}break}}if(!found&&parent){updateFocus(parent)}if(!isChild){updateState(!isOpen)}};const handleBlur=event=>{const node=event.currentTarget;if(!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"){node.setAttribute("tabindex","0")}};const handleFocus=event=>{const node=event.target;if(node.getAttribute("role")==="tree"){const selected=node.querySelector("[aria-selected=\"true\"]");if(selected){updateFocus(selected)}else{moveFocusAdjacent(node,"down")}node.setAttribute("tabindex","-1")}};const handleButtonFocus=()=>{onSelect===null\|\|onSelect===void 0?void 0:onSelect()};const getPaddingStyles=depth=>{const space=depth*10;return{paddingLeft:`${space}px`,width:`calc(100% - ${space}px)`}};const{isChild,depth,hasHover}=React.useContext(TreeContext);const showHover=hasHover?hover:false;if(!isChild){return React.createElement("ul",_extends({role:"tree",tabIndex:0,className:makeClass(styles.tree,styles.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),React.createElement(TreeContext.Provider,{value:{isChild:true,depth:0,hasHover:showHover}},React.createElement(Tree,props)))}if(!hasChildren){return React.createElement("li",_extends({role:"treeitem",className:styles.item},html),React.createElement("div",{role:"button",className:makeClass(styles.label,{[styles.hover]:showHover,[styles.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild)},onClick:e=>handleClick(e,true),onFocus:handleButtonFocus},React.createElement("span",null,label)))}const arrowClass=makeClass(styles.arrow,{[styles.open]:isOpen});return React.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:styles.item},React.createElement("div",{role:"button",tabIndex:-1,className:makeClass(styles.label,{[styles.hover]:showHover,[styles.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},React.createElement("span",null,React.createElement("span",{"aria-hidden":true,className:arrowClass},"\u25B6"),React.createElement("span",null,label))),React.createElement("ul",_extends({role:"group",className:makeClass(className,styles.group)},html),isOpen&&React.Children.map(children,child=>{return React.createElement(TreeContext.Provider,{value:{isChild:true,depth:depth+1,hasHover:showHover}},child)})))};Tree.defaultProps={open:false,hover:true};
		import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import React,{useState,useEffect}from"react";import{useTheme}from"@devtools-ds/themes";import makeClass from"clsx";import TreeContext from"./TreeContext";import styles from"./Tree.css";export const Tree=props=>{const{theme,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=_objectWithoutProperties(props,["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"]);const{themeClass,currentTheme}=useTheme({theme,colorScheme},styles);const[isOpen,setOpen]=useState(open);useEffect(()=>{setOpen(open)},[open]);const updateState=value=>{setOpen(value);if(onUpdate)onUpdate(value)};const hasChildren=React.Children.count(children)>0;const updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode\|\|null))return;const focusableNode=newNode.querySelector("[tabindex=\"-1\"]");focusableNode===null\|\|focusableNode===void 0?void 0:focusableNode.focus();newNode.setAttribute("aria-selected","true");previousNode===null\|\|previousNode===void 0?void 0:previousNode.removeAttribute("aria-selected")};const getParent=(node,role)=>{let parent=node;while(parent&&parent.parentElement){if(parent.getAttribute("role")===role){return parent}parent=parent.parentElement}return null};const getListElements=node=>{const tree=getParent(node,"tree");if(!tree)return[];return Array.from(tree.querySelectorAll("li"))};const moveBack=node=>{const group=getParent(node,"group");const toggle=group===null\|\|group===void 0?void 0:group.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){const toggleParent=toggle.parentElement;const nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent)}};const moveHome=(node,direction)=>{const elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected")});if(direction==="start"&&elements[0]){updateFocus(elements[0])}if(direction==="end"&&elements[elements.length-1]){updateFocus(elements[elements.length-1])}};const moveFocusAdjacent=(node,direction)=>{const elements=getListElements(node)\|\|[];for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(direction==="up"&&elements[i-1]){updateFocus(elements[i-1],currentNode)}else if(direction==="down"&&elements[i+1]){updateFocus(elements[i+1],currentNode)}return}}updateFocus(elements[0])};const handleKeypress=(event,isChild)=>{const node=event.target;if(event.key==="Enter"\|\|event.key===" "){updateState(!isOpen)}if(event.key==="ArrowRight"&&isOpen&&!isChild){moveFocusAdjacent(node,"down")}else if(event.key==="ArrowRight"){updateState(true)}if(event.key==="ArrowLeft"&&(!isOpen\|\|isChild)){moveBack(node)}else if(event.key==="ArrowLeft"){updateState(false)}if(event.key==="ArrowDown"){moveFocusAdjacent(node,"down")}if(event.key==="ArrowUp"){moveFocusAdjacent(node,"up")}if(event.key==="Home"){moveHome(node,"start")}if(event.key==="End"){moveHome(node,"end")}};const handleClick=(event,isChild)=>{const node=event.target;const parent=getParent(node,"treeitem");const elements=getListElements(node)\|\|[];let found=false;for(let i=0;i<elements.length;i++){const currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){if(parent){found=true;updateFocus(parent,currentNode)}break}}if(!found&&parent){updateFocus(parent)}if(!isChild){updateState(!isOpen)}};const handleBlur=event=>{const node=event.currentTarget;if(!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"){node.setAttribute("tabindex","0")}};const handleFocus=event=>{const node=event.target;if(node.getAttribute("role")==="tree"){const selected=node.querySelector("[aria-selected=\"true\"]");if(selected){updateFocus(selected)}else{moveFocusAdjacent(node,"down")}node.setAttribute("tabindex","-1")}};const handleButtonFocus=()=>{onSelect===null\|\|onSelect===void 0?void 0:onSelect()};const getPaddingStyles=depth=>{const space=depth*0.9;return{paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}};const{isChild,depth,hasHover}=React.useContext(TreeContext);const showHover=hasHover?hover:false;if(!isChild){return React.createElement("ul",_extends({role:"tree",tabIndex:0,className:makeClass(styles.tree,styles.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),React.createElement(TreeContext.Provider,{value:{isChild:true,depth:0,hasHover:showHover}},React.createElement(Tree,props)))}if(!hasChildren){return React.createElement("li",_extends({role:"treeitem",className:styles.item},html),React.createElement("div",{role:"button",className:makeClass(styles.label,{[styles.hover]:showHover,[styles.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild)},onClick:e=>handleClick(e,true),onFocus:handleButtonFocus},React.createElement("span",null,label)))}const arrowClass=makeClass(styles.arrow,{[styles.open]:isOpen});return React.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:styles.item},React.createElement("div",{role:"button",tabIndex:-1,className:makeClass(styles.label,{[styles.hover]:showHover,[styles.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},React.createElement("span",null,React.createElement("span",{"aria-hidden":true,className:arrowClass}),React.createElement("span",null,label))),React.createElement("ul",_extends({role:"group",className:makeClass(className,styles.group)},html),isOpen&&React.Children.map(children,child=>{return React.createElement(TreeContext.Provider,{value:{isChild:true,depth:depth+1,hasHover:showHover}},child)})))};Tree.defaultProps={open:false,hover:true};
		//# sourceMappingURL=index.js.map
		import "../main.css";

dist/esm/Tree.css.js

		@@ -1,1 +0,1 @@
		module.exports = {"tree":"Tree-tree-b6ea06c","item":"Tree-item-fd0cf12","group":"Tree-group-95423dc","label":"Tree-label-600de85","arrow":"Tree-arrow-aa6259c","focusWhite":"Tree-focusWhite-33a2fbd","hover":"Tree-hover-bdfc661","open":"Tree-open-c4e73be","dark":"Tree-dark-fddc5d2","chrome":"Tree-chrome-4e0f4b8","light":"Tree-light-c7be103"};
		module.exports = {"tree":"Tree-tree-b7cdb82","item":"Tree-item-7bfef5f","group":"Tree-group-78c1226","label":"Tree-label-5771fea","focusWhite":"Tree-focusWhite-016a7d0","arrow":"Tree-arrow-dd7899c","hover":"Tree-hover-bfb7dd4","open":"Tree-open-71518f5","dark":"Tree-dark-277cc2f","chrome":"Tree-chrome-74eed6a","light":"Tree-light-fbc8858"};

package.json

		{
		"name": "@devtools-ds/tree",
		"version": "0.133.0",
		"version": "1.0.0",
		"main": "./dist/cjs/index.js",
		@@ -33,3 +33,3 @@ "module": "./dist/esm/index.js",
		"@babel/runtime": "7.7.2",
		"@devtools-ds/themes": "^0.133.0",
		"@devtools-ds/themes": "^1.0.0",
		"clsx": "1.1.0"
		@@ -49,3 +49,3 @@ },
		],
		"gitHead": "520991a076d46a94932724872185cf3b22f1ca6a"
		"gitHead": "dfae2ecdb49ae56689342309b977d3fa2b52ff1a"
		}

dist/cjs/index.js.map