@cloud-ru/ds-tree 1.0.0

package/dist/cjs/helperComponents/TreeNode/styles.module.css

@@ -0,0 +1,474 @@
+@charset "UTF-8";
+.treeNode{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.treeNodeIcon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.treeNodeTitle{
+  overflow:hidden;
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.treeNodeActions{
+  position:absolute;
+  inset:0 0 0 auto;
+  display:flex;
+  visibility:hidden;
+}
+.treeNodeActions > button{
+  align-self:stretch;
+  height:auto;
+}
+.treeNodeActions:focus-visible, .treeNodeActions[data-focused]{
+  visibility:visible;
+}
+
+.treeNodeContent{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:0;
+}
+.treeNodeContent .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.treeNodeContent .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.treeNodeContent .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.treeNodeContent .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.treeNodeContent .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.treeNodeContent .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.treeNodeContent .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.treeNodeContent .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.treeNodeContent .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .treeNodeContent:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.treeNodeContent{
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=borderOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=activatedOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=versionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyVersionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=inversionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyInversionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .treeNodeContent[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.treeNodeContent:hover .treeNodeActions, .treeNodeContent[data-droplist-active] .treeNodeActions{
+  visibility:visible;
+}
+.treeNodeContent[data-droplist-active] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+}
+.treeNodeContent[data-droplist-active] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+}
+.treeNodeContent:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.treeNodeContent[aria-selected=true]:focus-visible{
+  outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.treeNodeContent[data-multiselect]{
+  cursor:default;
+}
+.treeNodeContent[aria-disabled=true]{
+  cursor:not-allowed;
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.treeNodeCheckboxWrap{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.treeNodeExpandButton{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  padding:0;
+  border:0;
+  border-radius:var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background:transparent;
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.treeNodeExpandButton{
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=borderOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=borderOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=versionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=inversionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=inversionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.treeNodeExpandButton svg{
+  transition:transform 0.2s ease;
+}
+.treeNodeExpandButton[data-expanded] svg{
+  transform:rotate(90deg);
+}
+.treeNodeExpandButton:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+
+.treeNodeExpandButtonStateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.treeNodeExpandButtonSpacer{
+  flex-shrink:0;
+}
+
+.treeNodeExpandButtonWrapper{
+  position:relative;
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+}
+
+.treeNodeExpandButtonWrapper > :last-child:not(.treeNodeExpandButton){
+  pointer-events:none;
+  position:absolute;
+  right:0;
+  bottom:0;
+  left:0;
+  width:100%;
+  height:calc(50% - var(--tree-chevron-size, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2);
+}
+
+.treeNodeLink{
+  display:block;
+  width:100%;
+  color:inherit;
+  text-decoration:none;
+}
+
+.treeNode[data-size=s]{
+  --tree-chevron-size:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeContent{
+  border-radius:var(--sn-tree-anatomy-size-s-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-top:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.treeNode[data-size=s] .treeNodeCheckboxWrap,
+.treeNode[data-size=s] .treeNodeExpandButtonWrapper{
+  width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeIcon,
+.treeNode[data-size=s] .treeNodeCheckboxWrap{
+  padding-top:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.treeNode[data-size=s] .treeNodeExpandButton{
+  width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeExpandButton > svg{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=s] .treeNodeExpandButtonSpacer{
+  width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeIcon svg{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=s] .treeNodeActions{
+  margin-top:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
+  margin-right:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))));
+  margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
+}
+
+.treeNode[data-size=m]{
+  --tree-chevron-size:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeContent{
+  padding-top:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  border-radius:var(--sn-tree-anatomy-size-m-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.treeNode[data-size=m] .treeNodeCheckboxWrap,
+.treeNode[data-size=m] .treeNodeExpandButtonWrapper{
+  width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeIcon,
+.treeNode[data-size=m] .treeNodeCheckboxWrap{
+  padding-top:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.treeNode[data-size=m] .treeNodeExpandButton{
+  width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeExpandButton > svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=m] .treeNodeExpandButtonSpacer{
+  width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeIcon svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=m] .treeNodeActions{
+  margin-top:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
+  margin-right:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))));
+  margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
+}
+
+.treeNode[data-size=l]{
+  --tree-chevron-size:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeContent{
+  gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  border-radius:var(--sn-tree-anatomy-size-l-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-top:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.treeNode[data-size=l] .treeNodeCheckboxWrap,
+.treeNode[data-size=l] .treeNodeExpandButtonWrapper{
+  width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeIcon,
+.treeNode[data-size=l] .treeNodeCheckboxWrap{
+  padding-top:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.treeNode[data-size=l] .treeNodeExpandButton{
+  width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeExpandButton > svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=l] .treeNodeExpandButtonSpacer{
+  width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeIcon svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=l] .treeNodeActions{
+  margin-top:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
+  margin-right:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))));
+  margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
+}

package/dist/cjs/helperComponents/TreeNode/types.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ParentNode, TreeNodeProps } from '../../types';
+export type TreeNodeComponentProps = TreeNodeProps & {
+    onChevronClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    loading?: boolean;
+    parentNode?: ParentNode;
+    tabIndexAvailable?: boolean;
+};

package/dist/cjs/helperComponents/TreeNode/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/helperComponents/TreeNode/utils.d.ts

@@ -0,0 +1,3 @@
+import { FocusEvent, MouseEvent } from 'react';
+export declare function stopPropagationClick(e: MouseEvent<HTMLInputElement>): void;
+export declare function stopPropagationFocus(e: FocusEvent<HTMLInputElement>): void;

package/dist/cjs/helperComponents/TreeNode/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopPropagationClick = stopPropagationClick;
+exports.stopPropagationFocus = stopPropagationFocus;
+function stopPropagationClick(e) {
+    e.stopPropagation();
+}
+function stopPropagationFocus(e) {
+    e.stopPropagation();
+}

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ExpandableTreeNode';
+export * from './TreeNode';
+export * from './TreeLine';
+export * from './TreeItem';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ExpandableTreeNode"), exports);
+__exportStar(require("./TreeNode"), exports);
+__exportStar(require("./TreeLine"), exports);
+__exportStar(require("./TreeItem"), exports);

package/dist/cjs/helpers/checkNestedNodesSelection.d.ts

@@ -0,0 +1,9 @@
+import { TreeNodeId, TreeNodeProps } from '../types';
+/**
+ * Проверяет состояние выбора дочерних узлов:
+ * выбраны ли все, выбраны ли некоторые.
+ *
+ * @param nodes Дочерние узлы для проверки.
+ * @param selectedKeys Текущий список выбранных id.
+ */
+export declare function checkNestedNodesSelection(nodes: TreeNodeProps[], selectedKeys: TreeNodeId[]): import("@cloud-ru/ds-utils").GroupSelectionState;

package/dist/cjs/helpers/checkNestedNodesSelection.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkNestedNodesSelection = checkNestedNodesSelection;
+const utils_1 = require("@cloud-ru/ds-utils");
+const findAllChildNodeIds_1 = require("./findAllChildNodeIds");
+/**
+ * Проверяет состояние выбора дочерних узлов:
+ * выбраны ли все, выбраны ли некоторые.
+ *
+ * @param nodes Дочерние узлы для проверки.
+ * @param selectedKeys Текущий список выбранных id.
+ */
+function checkNestedNodesSelection(nodes, selectedKeys) {
+    return (0, utils_1.checkGroupSelection)((0, findAllChildNodeIds_1.findAllChildNodeIds)(nodes), selectedKeys);
+}

package/dist/cjs/helpers/collectEmptyNestedNodesInExpanded.d.ts

@@ -0,0 +1,9 @@
+import { TreeNodeProps } from '../types';
+/**
+ * Возвращает раскрытые узлы, у которых `nested` уже существует, но пока пустой.
+ * Используется для определения узлов, требующих дополнительной подгрузки детей.
+ *
+ * @param nodes Узлы дерева для проверки.
+ * @param expandedIds Множество id раскрытых узлов.
+ */
+export declare function collectEmptyNestedNodesInExpanded<Node extends TreeNodeProps>(nodes: Node[], expandedIds: Set<string>): Node[];

package/dist/cjs/helpers/collectEmptyNestedNodesInExpanded.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectEmptyNestedNodesInExpanded = collectEmptyNestedNodesInExpanded;
+const traverse_1 = require("./traverse");
+/**
+ * Возвращает раскрытые узлы, у которых `nested` уже существует, но пока пустой.
+ * Используется для определения узлов, требующих дополнительной подгрузки детей.
+ *
+ * @param nodes Узлы дерева для проверки.
+ * @param expandedIds Множество id раскрытых узлов.
+ */
+function collectEmptyNestedNodesInExpanded(nodes, expandedIds) {
+    const result = [];
+    (0, traverse_1.traverse)(nodes, node => {
+        const hasEmptyNested = Array.isArray(node.nested) && node.nested.length === 0;
+        if (hasEmptyNested && expandedIds.has(node.id)) {
+            result.push(node);
+        }
+    });
+    return result;
+}

package/dist/cjs/helpers/collectHierarchicalAncestors.d.ts

@@ -0,0 +1,3 @@
+import { HierarchicalAncestor } from '@cloud-ru/ds-utils';
+import { ParentNode } from '../types';
+export declare function collectHierarchicalAncestors(parentNode?: ParentNode): HierarchicalAncestor[];

package/dist/cjs/helpers/collectHierarchicalAncestors.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectHierarchicalAncestors = collectHierarchicalAncestors;
+const findAllChildNodeIds_1 = require("./findAllChildNodeIds");
+function collectHierarchicalAncestors(parentNode) {
+    const ancestors = [];
+    let parent = parentNode;
+    while (parent) {
+        if (parent.nested?.length) {
+            ancestors.push({
+                id: parent.id,
+                childIds: (0, findAllChildNodeIds_1.findAllChildNodeIds)(parent.nested),
+            });
+        }
+        parent = parent.parentNode;
+    }
+    return ancestors;
+}

package/dist/cjs/helpers/collectIds.d.ts

@@ -0,0 +1,9 @@
+import { TreeNodeProps } from '../types';
+/**
+ * Собирает id всех узлов дерева.
+ *
+ * @param treeNodes Узлы дерева для обхода.
+ * @returns Массив id узлов в порядке обхода BFS.
+ * @function collectIds
+ */
+export declare function collectIds(treeNodes: TreeNodeProps[]): string[];