@box/tree 2.3.6 → 2.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/loading-node.js +1 -1
- package/dist/chunks/node-label.js +1 -1
- package/dist/chunks/reload-node.js +1 -1
- package/dist/chunks/tree.js +1 -1
- package/dist/esm/lib/components/content-node/content-node.js +1 -1
- package/dist/esm/lib/components/load-more-node/load-more-node.js +1 -1
- package/dist/esm/lib/components/node-icon/node-avatar.js +1 -1
- package/dist/esm/lib/components/service-node-wrapper/service-node-wrapper.js +1 -1
- package/dist/esm/lib/components/truncated-tooltip-text/truncated-tooltip-text.js +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as nodes_module_default}from"./nodes.module.js";import messages_default from"../esm/lib/components/loading-node/messages.js";import{LoadingIndicator}from"@box/blueprint-web";import
|
|
1
|
+
import{t as nodes_module_default}from"./nodes.module.js";import messages_default from"../esm/lib/components/loading-node/messages.js";import clsx from"clsx";import{LoadingIndicator}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";import{useIntl}from"react-intl";import '../styles/loading-node.css';var loading_node_module_default={loader:`_loader_1d12s_1`};function LoadingNode({level,size,getNodeProps}){let intl=useIntl(),nodeProps=getNodeProps();return jsx(`div`,{...nodeProps,className:clsx(`node`,nodes_module_default.node,nodes_module_default[`node-${size}-level${level-1}`],nodes_module_default[`node--${size}`],{[nodes_module_default[`node--focused`]]:nodeProps.className.includes(`tree-node--focused`)}),children:jsx(LoadingIndicator,{"aria-label":intl.formatMessage(messages_default.loadingIndicatorAriaLabel),className:loading_node_module_default.loader,size:size===`small`?`small`:`medium`})})}export{LoadingNode as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import clsx from"clsx";import{forwardRef}from"react";import{Text}from"@box/blueprint-web";import{jsx,jsxs}from"react/jsx-runtime";import '../styles/node-label.css';var node_label_module_default={label:`_label_6wt8b_27`},NodeLabel=forwardRef((props,ref)=>{let{color=`textOnLightSecondary`,isInTooltip=!1,labelName,labelValue}=props;return jsxs(`div`,{ref,className:clsx({[node_label_module_default.label]:!isInTooltip}),children:[jsx(Text,{as:`span`,color,variant:`labelBold`,children:labelName.toUpperCase()}),jsx(Text,{as:`span`,color,variant:`label`,children:` / ${labelValue.toUpperCase()}`})]})});export{NodeLabel as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as nodes_module_default}from"./nodes.module.js";import messages_default from"../esm/lib/components/reload-node/messages.js";import{InlineNotice,TextButton}from"@box/blueprint-web";import
|
|
1
|
+
import{t as nodes_module_default}from"./nodes.module.js";import messages_default from"../esm/lib/components/reload-node/messages.js";import clsx from"clsx";import{InlineNotice,TextButton}from"@box/blueprint-web";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{useIntl}from"react-intl";import{Loader}from"@box/blueprint-web-assets/icons/Fill";import '../styles/reload-node.css';var reload_node_module_default={errorNotice:`_errorNotice_rru8o_27`,"errorNoticeText--large":`_errorNoticeText--large_rru8o_32`,"errorNoticeText--small":`_errorNoticeText--small_rru8o_51`};function ReloadNode({level,size,isDisabled,getNodeProps,element}){let intl=useIntl(),nodeProps=getNodeProps();return jsxs(Fragment,{children:[jsx(`div`,{className:nodes_module_default[`node-${size}-level${level-1}`],children:jsx(InlineNotice,{className:reload_node_module_default.errorNotice,variant:`error`,variantIconAriaLabel:intl.formatMessage(messages_default.iconAriaLabel),children:jsx(`span`,{className:reload_node_module_default[`errorNoticeText--${size}`],children:element.metadata.error||intl.formatMessage(messages_default.loadingError)})})}),jsx(`div`,{...nodeProps,className:clsx(`node`,nodes_module_default.node,nodes_module_default[`node-${size}-level${level-1}`],nodes_module_default[`node--${size}`],{[nodes_module_default[`node--focused`]]:nodeProps.className.includes(`tree-node--focused`),[nodes_module_default[`node--disabled`]]:isDisabled}),children:jsx(TextButton,{"aria-label":intl.formatMessage(messages_default.reloadButtonAriaLabel,{nodeName:element.name}),icon:Loader,tabIndex:-1,children:intl.formatMessage(messages_default.reloadButtonTitle)})})]})}export{ReloadNode as t};
|
package/dist/chunks/tree.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useSelectionInheritance}from"../esm/lib/hooks/useSelectionInheritance.js";import{ContentNode}from"../esm/lib/components/content-node/content-node.js";import{LoadMoreNode}from"../esm/lib/components/load-more-node/load-more-node.js";import{t as LoadingNode}from"./loading-node.js";import{t as ReloadNode}from"./reload-node.js";import{ServiceNodeWrapper}from"../esm/lib/components/service-node-wrapper/service-node-wrapper.js";import{preventDisabledNodeExpanding,preventLoadingContentNodeExpanding,serviceNodeClickHandler,serviceNodeKeyboardHandler}from"../esm/lib/utils.js";import
|
|
1
|
+
import{useSelectionInheritance}from"../esm/lib/hooks/useSelectionInheritance.js";import{ContentNode}from"../esm/lib/components/content-node/content-node.js";import{LoadMoreNode}from"../esm/lib/components/load-more-node/load-more-node.js";import{t as LoadingNode}from"./loading-node.js";import{t as ReloadNode}from"./reload-node.js";import{ServiceNodeWrapper}from"../esm/lib/components/service-node-wrapper/service-node-wrapper.js";import{preventDisabledNodeExpanding,preventLoadingContentNodeExpanding,serviceNodeClickHandler,serviceNodeKeyboardHandler}from"../esm/lib/utils.js";import clsx from"clsx";import{forwardRef,useCallback,useEffect,useRef}from"react";import{TooltipProvider,useForkRef}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";import TreeView from"react-accessible-treeview";import '../styles/tree.css';var tree_module_default={tree:`_tree_17956_1`},getNodeRenderer=(size,withIcons,selectionInheritors)=>node=>{let{element,isDisabled}=node,{id,metadata,parent}=element,{variant}=metadata;return variant===`content`||variant===`user`||variant===`labeled`?jsx(ContentNode,{...node,size,withIcon:withIcons,containsSelection:selectionInheritors.includes(id)}):variant===`loadMore`?jsx(ServiceNodeWrapper,{isDisabled,parentId:parent,variant:`loadMore`,children:jsx(LoadMoreNode,{...node,size})}):variant===`reload`?jsx(ServiceNodeWrapper,{isDisabled,parentId:parent,variant:`reload`,children:jsx(ReloadNode,{...node,size})}):variant===`loading`?jsx(ServiceNodeWrapper,{isDisabled,variant:`loading`,children:jsx(LoadingNode,{...node,size})}):null},Tree=forwardRef(function({"aria-label":ariaLabel,size=`small`,data,withIcons=!1,onExpand,onSelect,onLoadData,className,multiSelect=!1,...restTreeProps},forwardedRef){let treeRef=useRef(null),{selectionInheritors,getSelectionInheritors}=useSelectionInheritance();useEffect(()=>{let currentTree=treeRef.current;return currentTree&&(currentTree.addEventListener(`keydown`,preventDisabledNodeExpanding),currentTree.addEventListener(`keydown`,preventLoadingContentNodeExpanding)),()=>{currentTree&&(currentTree.removeEventListener(`keydown`,preventDisabledNodeExpanding),currentTree.removeEventListener(`keydown`,preventLoadingContentNodeExpanding))}}),useEffect(()=>{let currentTree=treeRef.current,onServiceNodeKeyboardInteraction=serviceNodeKeyboardHandler(onLoadData),onServiceNodeClick=serviceNodeClickHandler(onLoadData);return currentTree&&(currentTree.addEventListener(`keydown`,onServiceNodeKeyboardInteraction),currentTree.addEventListener(`click`,onServiceNodeClick)),()=>{currentTree&&(currentTree.removeEventListener(`keydown`,onServiceNodeKeyboardInteraction),currentTree.removeEventListener(`click`,onServiceNodeClick))}}),useEffect(()=>{getSelectionInheritors(data,restTreeProps.selectedIds||restTreeProps.defaultSelectedIds)},[]);let selectHandler=useCallback(props=>{getSelectionInheritors(data,Array.from(props.treeState.selectedIds)),onSelect&&onSelect(props)},[onSelect,data,getSelectionInheritors]);return jsx(TooltipProvider,{children:jsx(TreeView,{ref:useForkRef(treeRef,forwardedRef),"aria-label":ariaLabel,className:clsx(tree_module_default.tree,className),data,multiSelect,nodeRenderer:getNodeRenderer(size,withIcons,selectionInheritors),onExpand,onSelect:selectHandler,...restTreeProps})})});export{Tree as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{CONTENT_NODE,CONTENT_NODE_LOADING}from"../../constants.js";import{useIntersectionObserver}from"../../hooks/useIntersectionObserver.js";import{TruncatedTooltipText}from"../truncated-tooltip-text/truncated-tooltip-text.js";import{n as content_node_module_default,t as ExpanderWithLoading}from"../../../../chunks/expander-with-loading.js";import{VariantIcon}from"./variant-icon.js";import{t as nodes_module_default}from"../../../../chunks/nodes.module.js";import{t as NodeLabel}from"../../../../chunks/node-label.js";import
|
|
1
|
+
import{CONTENT_NODE,CONTENT_NODE_LOADING}from"../../constants.js";import{useIntersectionObserver}from"../../hooks/useIntersectionObserver.js";import{TruncatedTooltipText}from"../truncated-tooltip-text/truncated-tooltip-text.js";import{n as content_node_module_default,t as ExpanderWithLoading}from"../../../../chunks/expander-with-loading.js";import{VariantIcon}from"./variant-icon.js";import{t as nodes_module_default}from"../../../../chunks/nodes.module.js";import{t as NodeLabel}from"../../../../chunks/node-label.js";import clsx from"clsx";import{useMemo,useRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";function ContentNode({element:{name,metadata},level,getNodeProps,handleSelect,handleExpand,isBranch,isExpanded,isDisabled,isSelected,size,withIcon,containsSelection}){let nodeRef=useRef(null),textElementRef=useRef(null),subtitleElementRef=useRef(null),labelElementRef=useRef(null),{isLoading=!1,selectable=!0,variant}=metadata,{labelName,labelValue,subtitle,withDivider}=variant===`labeled`?{labelName:metadata.labelName,labelValue:metadata.labelValue,subtitle:void 0,withDivider:!1}:{labelName:void 0,labelValue:void 0,subtitle:metadata.subtitle,withDivider:metadata.withDivider??!1},nodeProps=useMemo(()=>getNodeProps({onClick:handleSelect}),[getNodeProps,handleSelect]),isOutside=useIntersectionObserver(nodeRef),isSelectionInherited=!isDisabled&&!isExpanded&&containsSelection,dataProps={[`data-${CONTENT_NODE}`]:!0,[`data-${CONTENT_NODE_LOADING}`]:isLoading},hasExtraData=!!subtitle||variant===`labeled`,classNames=[`node`,nodes_module_default.node,nodes_module_default[`node-${size}-level${level-1}`],nodes_module_default[`node--${size}`],{[nodes_module_default[`node--${size}-extraData`]]:hasExtraData,[nodes_module_default[`node--focused`]]:nodeProps.className.includes(`tree-node--focused`),[nodes_module_default[`node--disabled`]]:isDisabled,[nodes_module_default[`node--nonselectable`]]:!selectable,"node--with-divider":withDivider}],fullNode=jsxs(`div`,{...nodeProps,className:clsx(classNames,{[nodes_module_default[`node--selected`]]:isSelected||isSelectionInherited}),"data-target-id":metadata?.dataTargetId,children:[isBranch&&jsx(`div`,{className:clsx(nodes_module_default.expander,nodes_module_default[`expander-level${level-1}`],nodes_module_default[`expander-${size}`]),children:jsx(ExpanderWithLoading,{handleExpand,isDisabled,isExpanded,isLoading,metadata,size})}),jsxs(`div`,{className:clsx(content_node_module_default.content),children:[withIcon&&jsx(VariantIcon,{metadata,name,size}),jsxs(`div`,{className:content_node_module_default[`title-wrapper`],...!selectable&&{onClick:handleExpand},children:[variant===`labeled`&&jsx(NodeLabel,{ref:labelElementRef,labelName,labelValue}),jsx(`span`,{ref:textElementRef,className:clsx(content_node_module_default.title,content_node_module_default[`title--${size}`],{[content_node_module_default[`title--selected`]]:isSelected||isSelectionInherited}),children:name}),subtitle&&jsx(`span`,{ref:subtitleElementRef,className:content_node_module_default.subtitle,children:subtitle})]})]})]}),shallowNode=jsx(`div`,{...nodeProps,className:clsx(classNames,{[nodes_module_default[`node--selected`]]:nodeProps.className.includes(`tree-node--selected`)}),"data-target-id":metadata?.dataTargetId,children:name});return jsx(`div`,{ref:nodeRef,className:nodes_module_default[`node-container`],"data-modern":`true`,...dataProps,children:isOutside?shallowNode:jsx(TruncatedTooltipText,{labelElementRef,subtitleElementRef,textElementRef,tooltipContent:jsxs(`div`,{className:content_node_module_default.tooltip,children:[variant===`labeled`&&jsx(NodeLabel,{ref:labelElementRef,color:`textOnDarkDefault`,isInTooltip:!0,labelName,labelValue}),jsx(`span`,{children:name}),subtitle&&jsx(`span`,{children:subtitle})]}),children:fullNode})})}export{ContentNode};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as nodes_module_default}from"../../../../chunks/nodes.module.js";import messages_default from"./messages.js";import{TextButton}from"@box/blueprint-web";import
|
|
1
|
+
import{t as nodes_module_default}from"../../../../chunks/nodes.module.js";import messages_default from"./messages.js";import clsx from"clsx";import{TextButton}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";import{useIntl}from"react-intl";function LoadMoreNode({level,size,isDisabled,getNodeProps,element}){let intl=useIntl(),nodeProps=getNodeProps();return jsx(`div`,{...nodeProps,className:clsx(`node`,nodes_module_default.node,nodes_module_default[`node-${size}-level${level-1}`],nodes_module_default[`node--${size}`],{[nodes_module_default[`node--focused`]]:nodeProps.className.includes(`tree-node--focused`),[nodes_module_default[`node--disabled`]]:isDisabled}),children:jsx(TextButton,{"aria-label":intl.formatMessage(messages_default.loadMoreButtonAriaLabel,{nodeName:element.name}),tabIndex:-1,children:intl.formatMessage(messages_default.loadMoreButtonTitle)})})}export{LoadMoreNode};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as node_icon_module_default}from"../../../../chunks/node-icon.module.js";import{Avatar,IconBadge}from"@box/blueprint-web";import{
|
|
1
|
+
import{t as node_icon_module_default}from"../../../../chunks/node-icon.module.js";import{useMemo}from"react";import{Avatar,IconBadge}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";var BADGE_ICON_MAP={admin:`collaborator-admin`,coadmin:`collaborator-coadmin`};function NodeAvatar({avatarSrc,badge,size,nodeTitle}){let text=useMemo(()=>nodeTitle.charAt(0).toUpperCase(),[nodeTitle]),avatar=jsx(Avatar,{alt:nodeTitle,color:`BoxBlue50`,size:size===`small`?`small`:`large`,src:avatarSrc,text});return badge&&BADGE_ICON_MAP[badge]?jsx(`div`,{className:node_icon_module_default.icon,children:jsx(IconBadge,{size:size===`small`?`small`:`medium`,variant:BADGE_ICON_MAP[badge],children:avatar})}):jsx(`div`,{className:node_icon_module_default.icon,children:avatar})}export{NodeAvatar};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{BRANCH_ID_DATA_ATTRIBUTE,LOAD_MORE_NODE_DATA_ATTRIBUTE,RELOAD_NODE_DATA_ATTRIBUTE,SERVICE_NODE_DATA_ATTRIBUTE}from"../../constants.js";import{t as nodes_module_default}from"../../../../chunks/nodes.module.js";import{
|
|
1
|
+
import{BRANCH_ID_DATA_ATTRIBUTE,LOAD_MORE_NODE_DATA_ATTRIBUTE,RELOAD_NODE_DATA_ATTRIBUTE,SERVICE_NODE_DATA_ATTRIBUTE}from"../../constants.js";import{t as nodes_module_default}from"../../../../chunks/nodes.module.js";import{jsx}from"react/jsx-runtime";function ServiceNodeWrapper({isDisabled,parentId,variant,children}){let dataProps={[`data-${SERVICE_NODE_DATA_ATTRIBUTE}`]:!0};return variant===`reload`&&(dataProps[`data-${RELOAD_NODE_DATA_ATTRIBUTE}`]=!0,dataProps[`data-${BRANCH_ID_DATA_ATTRIBUTE}`]=parentId),variant===`loadMore`&&(dataProps[`data-${LOAD_MORE_NODE_DATA_ATTRIBUTE}`]=!0,dataProps[`data-${BRANCH_ID_DATA_ATTRIBUTE}`]=parentId),jsx(`div`,{"aria-disabled":isDisabled,className:nodes_module_default[`node-container`],"data-modern":`true`,...dataProps,children})}export{ServiceNodeWrapper};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Tooltip}from"@box/blueprint-web";import{
|
|
1
|
+
import{useLayoutEffect,useState}from"react";import{Tooltip}from"@box/blueprint-web";import{jsx}from"react/jsx-runtime";function TruncatedTooltipText({labelElementRef,textElementRef,subtitleElementRef,tooltipContent,children}){let[isTruncated,setIsTruncated]=useState(!1);return useLayoutEffect(()=>{let checkIfTruncated=()=>{setIsTruncated([textElementRef.current,subtitleElementRef.current,labelElementRef.current].some(element=>element&&element.scrollWidth>element.offsetWidth))};return checkIfTruncated(),window.addEventListener(`resize`,checkIfTruncated),()=>{window.removeEventListener(`resize`,checkIfTruncated)}},[textElementRef,subtitleElementRef,labelElementRef]),isTruncated?jsx(Tooltip,{content:tooltipContent,children}):children}export{TruncatedTooltipText};
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/tree",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.7",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@box/blueprint-web": "^
|
|
6
|
-
"@box/blueprint-web-assets": "^5.7.
|
|
7
|
-
"@box/item-icon": "^3.3.
|
|
5
|
+
"@box/blueprint-web": "^17.0.0",
|
|
6
|
+
"@box/blueprint-web-assets": "^5.7.15",
|
|
7
|
+
"@box/item-icon": "^3.3.24",
|
|
8
8
|
"react": "^17.0.0 || ^18.0.0",
|
|
9
9
|
"react-accessible-treeview": "2.9.0",
|
|
10
10
|
"react-dom": "^17.0.0 || ^18.0.0",
|
|
11
11
|
"react-intl": "^6.4.2"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@box/blueprint-web": "^
|
|
15
|
-
"@box/blueprint-web-assets": "^5.7.
|
|
16
|
-
"@box/item-icon": "^3.3.
|
|
17
|
-
"@box/storybook-utils": "^1.2.
|
|
14
|
+
"@box/blueprint-web": "^17.0.0",
|
|
15
|
+
"@box/blueprint-web-assets": "^5.7.15",
|
|
16
|
+
"@box/item-icon": "^3.3.24",
|
|
17
|
+
"@box/storybook-utils": "^1.2.24",
|
|
18
18
|
"@faker-js/faker": "^8.4.1",
|
|
19
19
|
"react": "^18.3.0",
|
|
20
20
|
"react-dom": "^18.3.0",
|