@amboss/design-system 3.14.1 → 3.15.0
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/build/cjs/components/EntityList/BaseEntityList.d.ts +1 -1
- package/build/cjs/components/EntityList/BaseEntityList.js +1 -1
- package/build/cjs/components/EntityList/types.d.ts +10 -1
- package/build/cjs/components/EntityTree/BaseEntityTree.d.ts +10 -1
- package/build/cjs/components/EntityTree/BaseEntityTree.js +1 -1
- package/build/esm/components/EntityList/BaseEntityList.d.ts +1 -1
- package/build/esm/components/EntityList/BaseEntityList.js +1 -1
- package/build/esm/components/EntityList/types.d.ts +10 -1
- package/build/esm/components/EntityTree/BaseEntityTree.d.ts +10 -1
- package/build/esm/components/EntityTree/BaseEntityTree.js +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { EntityListProps } from "./types";
|
|
3
|
-
export declare function BaseEntityList({ data, size, onClick, isSelectable, selectedIds, onSelectionChange, renderRightContent, getLeftIconProps, hideBorder, filterFn, isVirtualized, maxHeight, "data-e2e-test-id": dataE2eTestId, }: EntityListProps): React.ReactElement;
|
|
3
|
+
export declare function BaseEntityList({ data, size, onClick, isSelectable, selectedIds, onSelectionChange, onSelectionToggle, renderRightContent, getLeftIconProps, hideBorder, filterFn, isVirtualized, maxHeight, "data-e2e-test-id": dataE2eTestId, }: EntityListProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityList",{enumerable:!0,get:function(){return BaseEntityList}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_styledcomponents=require("./styled-components"),_useKeyboard=require("../../shared/useKeyboard"),_Icon=require("../Icon/Icon"),_EntityListItem=require("./EntityListItem"),_VirtualizedEntityList=require("./VirtualizedEntityList"),StyledMinHeightCell=(0,_styled.default)("div",{target:"ek7zfhr0",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvRW50aXR5TGlzdC9CYXNlRW50aXR5TGlzdC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0VudGl0eUxpc3QvQmFzZUVudGl0eUxpc3QudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwge1xuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxuICB1c2VFZmZlY3QsXG4gIHVzZU1lbW8sXG4gIHVzZUNhbGxiYWNrLFxufSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU3R5bGVkTGlzdCB9IGZyb20gXCIuL3N0eWxlZC1jb21wb25lbnRzXCI7XG5pbXBvcnQgdHlwZSB7IEVudGl0eUxpc3RQcm9wcywgTGlzdE5vZGUsIFRleHRTaXplUHJvcHMgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IHsgdXNlS2V5Ym9hcmQgfSBmcm9tIFwiLi4vLi4vc2hhcmVkL3VzZUtleWJvYXJkXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgRW50aXR5TGlzdEl0ZW0gfSBmcm9tIFwiLi9FbnRpdHlMaXN0SXRlbVwiO1xuaW1wb3J0IHsgVmlydHVhbGl6ZWRFbnRpdHlMaXN0IH0gZnJvbSBcIi4vVmlydHVhbGl6ZWRFbnRpdHlMaXN0XCI7XG5cbi8vIFRoaXMgbWluSGVpZ2h0IGlzIG5lZWRlZCBmb3IgYWxpZ24gc21hbGwgaWNvbnMgaW4gdGhlIG1pZGRsZSBvZiAxIHJvdyB0ZXh0LFxuLy8gYnV0IGl0IHNob3VsZCBzdGF5IGF0IHRoZSB0b3AgaWYgdGhlcmUgaXMgbXVsdGlsaW5lIHRleHRcbmNvbnN0IFN0eWxlZE1pbkhlaWdodENlbGwgPSBzdHlsZWQuZGl2PFRleHRTaXplUHJvcHM+KFxuICAoeyB0aGVtZSwgdGV4dFNpemUgfSkgPT4gKHtcbiAgICBtaW5IZWlnaHQ6XG4gICAgICB0ZXh0U2l6ZSA9PT0gXCJzXCJcbiAgICAgICAgPyBgY2FsYygke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubX0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzfSlgXG4gICAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5sLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIH0pXG4pO1xuXG5jb25zdCBmaW5kRW5hYmxlZEl0ZW1JbmRleCA9IChcbiAgaXRlbXM6IExpc3ROb2RlW10sXG4gIHN0YXJ0SW5kZXg6IG51bWJlcixcbiAgZGlyZWN0aW9uID0gXCJuZXh0XCJcbik6IG51bWJlciA9PiB7XG4gIGlmIChkaXJlY3Rpb24gPT09IFwibmV4dFwiKSB7XG4gICAgZm9yIChsZXQgaSA9IHN0YXJ0SW5kZXggKyAxOyBpIDwgaXRlbXMubGVuZ3RoOyBpICs9IDEpIHtcbiAgICAgIGlmICghaXRlbXNbaV0uaXNEaXNhYmxlZCkge1xuICAgICAgICByZXR1cm4gaTtcbiAgICAgIH1cbiAgICB9XG4gIH0gZWxzZSBpZiAoZGlyZWN0aW9uID09PSBcInByZXZpb3VzXCIpIHtcbiAgICBmb3IgKGxldCBpID0gc3RhcnRJbmRleCAtIDE7IGkgPj0gMDsgaSAtPSAxKSB7XG4gICAgICBpZiAoIWl0ZW1zW2ldLmlzRGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuICB9XG4gIHJldHVybiBzdGFydEluZGV4O1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIEJhc2VFbnRpdHlMaXN0KHtcbiAgZGF0YSxcbiAgc2l6ZSA9IFwibVwiLFxuICBvbkNsaWNrLFxuICBpc1NlbGVjdGFibGUsXG4gIHNlbGVjdGVkSWRzLFxuICBvblNlbGVjdGlvbkNoYW5nZSxcbiAgcmVuZGVyUmlnaHRDb250ZW50LFxuICBnZXRMZWZ0SWNvblByb3BzLFxuICBoaWRlQm9yZGVyLFxuICBmaWx0ZXJGbixcbiAgaXNWaXJ0dWFsaXplZCxcbiAgbWF4SGVpZ2h0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IEVudGl0eUxpc3RQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IGRhdGFTaG93biA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmICghZGF0YS5sZW5ndGgpIHJldHVybiBkYXRhO1xuXG4gICAgcmV0dXJuIGZpbHRlckZuID8gZGF0YS5maWx0ZXIoZmlsdGVyRm4pIDogZGF0YTtcbiAgfSwgW2RhdGEsIGZpbHRlckZuXSk7XG5cbiAgY29uc3Qgc2VsZWN0ZWRJZHNTZXQgPSB1c2VNZW1vKCgpID0+IG5ldyBTZXQoc2VsZWN0ZWRJZHMpLCBbc2VsZWN0ZWRJZHNdKTtcblxuICBjb25zdCBbaXNLZXlib2FyZEZvY3VzLCBzZXRJc0tleWJvYXJkRm9jdXNdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuICBjb25zdCBbc2VsZWN0ZWRJbmRleCwgc2V0U2VsZWN0ZWRJbmRleF0gPSB1c2VTdGF0ZTxudW1iZXI+KCgpID0+XG4gICAgaXNTZWxlY3RhYmxlIHx8IG9uQ2xpY2sgPyBmaW5kRW5hYmxlZEl0ZW1JbmRleChkYXRhU2hvd24sIC0xKSA6IC0xXG4gICk7XG4gIGNvbnN0IHJlZkxpc3QgPSB1c2VSZWY8SFRNTFVMaXN0RWxlbWVudD4obnVsbCk7XG4gIHVzZUtleWJvYXJkKFxuICAgIHtcbiAgICAgIEFycm93RG93bjogKCkgPT4ge1xuICAgICAgICBzZXRJc0tleWJvYXJkRm9jdXModHJ1ZSk7XG4gICAgICAgIGNvbnN0IG5leHRJbmRleCA9IGZpbmRFbmFibGVkSXRlbUluZGV4KGRhdGFTaG93biwgc2VsZWN0ZWRJbmRleCk7XG4gICAgICAgIHNldFNlbGVjdGVkSW5kZXgobmV4dEluZGV4KTtcbiAgICAgIH0sXG4gICAgICBBcnJvd1VwOiAoKSA9PiB7XG4gICAgICAgIHNldElzS2V5Ym9hcmRGb2N1cyh0cnVlKTtcbiAgICAgICAgY29uc3QgcHJldkluZGV4ID0gZmluZEVuYWJsZWRJdGVtSW5kZXgoXG4gICAgICAgICAgZGF0YVNob3duLFxuICAgICAgICAgIHNlbGVjdGVkSW5kZXgsXG4gICAgICAgICAgXCJwcmV2aW91c1wiXG4gICAgICAgICk7XG4gICAgICAgIHNldFNlbGVjdGVkSW5kZXgocHJldkluZGV4KTtcbiAgICAgIH0sXG4gICAgfSxcbiAgICByZWZMaXN0LFxuICAgIHNlbGVjdGVkSW5kZXggIT09IC0xXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAocmVmTGlzdCAmJiByZWZMaXN0LmN1cnJlbnQgJiYgaXNLZXlib2FyZEZvY3VzICYmIHNlbGVjdGVkSW5kZXggPj0gMCkge1xuICAgICAgY29uc3QgYnV0dG9ucyA9IHJlZkxpc3QuY3VycmVudC5xdWVyeVNlbGVjdG9yQWxsKFxuICAgICAgICAnZGl2W2RhdGEtaWQ9XCJsaXN0LWl0ZW1cIl0nXG4gICAgICApO1xuXG4gICAgICAoYnV0dG9uc1tNYXRoLmFicyhzZWxlY3RlZEluZGV4KSAlIGJ1dHRvbnMubGVuZ3RoXSBhcyBIVE1MRWxlbWVudCkuZm9jdXMoe1xuICAgICAgICBwcmV2ZW50U2Nyb2xsOiB0cnVlLFxuICAgICAgfSk7XG4gICAgfVxuICB9LCBbc2VsZWN0ZWRJbmRleCwgaXNLZXlib2FyZEZvY3VzXSk7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IHVzZUNhbGxiYWNrKFxuICAgIChpdGVtOiBMaXN0Tm9kZSkgPT4ge1xuICAgICAgY29uc3QgeyBpZCB9ID0gaXRlbTtcblxuICAgICAgLy8gSGFuZGxlIGNoZWNrYm94IGNoYW5nZVxuICAgICAgaWYgKGlzU2VsZWN0YWJsZSkge1xuICAgICAgICBpZiAoc2VsZWN0ZWRJZHNTZXQuaGFzKGlkKSkge1xuICAgICAgICAgIHNlbGVjdGVkSWRzU2V0LmRlbGV0ZShpZCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgc2VsZWN0ZWRJZHNTZXQuYWRkKGlkKTtcbiAgICAgICAgfVxuICAgICAgICBvblNlbGVjdGlvbkNoYW5nZT8uKEFycmF5LmZyb20oc2VsZWN0ZWRJZHNTZXQpKTtcbiAgICAgIH1cblxuICAgICAgb25DbGljaz8uKGl0ZW0pO1xuICAgIH0sXG4gICAgW3NlbGVjdGVkSWRzU2V0LCBvblNlbGVjdGlvbkNoYW5nZSwgb25DbGljaywgaXNTZWxlY3RhYmxlXVxuICApO1xuXG4gIGNvbnN0IGhhbmRsZUJsdXIgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgLy8gVXNlIHNldFRpbWVvdXQgdG8gd2FpdCBmb3IgZm9jdXMgdG8gZnVsbHkgcHJvcGFnYXRlXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAoXG4gICAgICAgIHJlZkxpc3QuY3VycmVudCAmJlxuICAgICAgICAhcmVmTGlzdC5jdXJyZW50LmNvbnRhaW5zKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQpXG4gICAgICApIHtcbiAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKGZhbHNlKTtcbiAgICAgICAgc2V0U2VsZWN0ZWRJbmRleCgoKSA9PiBmaW5kRW5hYmxlZEl0ZW1JbmRleChkYXRhU2hvd24sIC0xKSk7XG4gICAgICB9XG4gICAgfSwgMCk7XG4gIH0sIFtyZWZMaXN0LCBzZXRTZWxlY3RlZEluZGV4LCBkYXRhU2hvd25dKTtcblxuICBjb25zdCByZW5kZXJFbnRpdHlJdGVtID0gKGluZGV4OiBudW1iZXIpOiBSZWFjdC5SZWFjdE5vZGUgPT4ge1xuICAgIGNvbnN0IGl0ZW0gPSBkYXRhU2hvd25baW5kZXhdO1xuICAgIGlmICghaXRlbSkgcmV0dXJuIG51bGw7XG5cbiAgICBjb25zdCBpc0xhc3RJdGVtID0gaW5kZXggPT09IGRhdGFTaG93bi5sZW5ndGggLSAxO1xuICAgIGNvbnN0IHRhYkluZGV4ID0gIWl0ZW0uaXNEaXNhYmxlZCAmJiBpbmRleCA9PT0gc2VsZWN0ZWRJbmRleCA/IDAgOiAtMTtcbiAgICBjb25zdCBpc1NlbGVjdGVkID0gc2VsZWN0ZWRJZHNTZXQuaGFzKGl0ZW0uaWQpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxFbnRpdHlMaXN0SXRlbVxuICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgIGFyaWEtbGFiZWw9e2l0ZW1bXCJhcmlhLWxhYmVsXCJdIHx8IGl0ZW0ubGFiZWx9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGhpZGVCb3JkZXI9e2hpZGVCb3JkZXIgfHwgaXNMYXN0SXRlbX1cbiAgICAgICAgaXNBY3RpdmU9e2l0ZW0uaXNBY3RpdmUgfHwgKGlzS2V5Ym9hcmRGb2N1cyAmJiBzZWxlY3RlZEluZGV4ID09PSBpbmRleCl9XG4gICAgICAgIGlzRGlzYWJsZWQ9e2l0ZW0uaXNEaXNhYmxlZH1cbiAgICAgICAgaXNDbGlja2FibGU9e0Jvb2xlYW4ob25DbGljayB8fCBzZWxlY3RlZElkcyl9XG4gICAgICAgIGRlc2NyaXB0aW9uPXtpdGVtLmRlc2NyaXB0aW9ufVxuICAgICAgICBvbktleURvd249eygpID0+IGhhbmRsZU9uQ2xpY2soaXRlbSl9XG4gICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgICAgb25Gb2N1cz17KCkgPT4ge1xuICAgICAgICAgIGlmIChvbkNsaWNrIHx8IGlzU2VsZWN0YWJsZSkge1xuICAgICAgICAgICAgc2V0U2VsZWN0ZWRJbmRleChpbmRleCk7XG4gICAgICAgICAgICBzZXRJc0tleWJvYXJkRm9jdXModHJ1ZSk7XG4gICAgICAgICAgfVxuICAgICAgICB9fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKGZhbHNlKTtcbiAgICAgICAgICBoYW5kbGVPbkNsaWNrKGl0ZW0pO1xuICAgICAgICB9fVxuICAgICAgICBjaGVja2JveFByb3BzPXtcbiAgICAgICAgICBpc1NlbGVjdGFibGUgJiYge1xuICAgICAgICAgICAgbmFtZTogXCJsaXN0LWNoZWNrYm94XCIsXG4gICAgICAgICAgICBzaXplOiBcInNcIixcbiAgICAgICAgICAgIG9uQ2hhbmdlOiAoKSA9PiBoYW5kbGVPbkNsaWNrKGl0ZW0pLFxuICAgICAgICAgICAgY2hlY2tlZDogaXNTZWxlY3RlZCxcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgcmVuZGVyTGFiZWw9eygpID0+IGl0ZW0ubGFiZWx9XG4gICAgICAgIHJlbmRlckxlZnQ9e1xuICAgICAgICAgIGdldExlZnRJY29uUHJvcHNcbiAgICAgICAgICAgID8gKHsgdGV4dFNpemUgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxJY29uIHsuLi5nZXRMZWZ0SWNvblByb3BzKGl0ZW0pfSBzaXplPXt0ZXh0U2l6ZX0gLz5cbiAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgOiBudWxsXG4gICAgICAgIH1cbiAgICAgICAgcmVuZGVyUmlnaHQ9eyh7IGFjdGlvblNpemUsIHRleHRTaXplIH0pID0+XG4gICAgICAgICAgcmVuZGVyUmlnaHRDb250ZW50ID8gKFxuICAgICAgICAgICAgPFN0eWxlZE1pbkhlaWdodENlbGwgdGV4dFNpemU9e3RleHRTaXplfT5cbiAgICAgICAgICAgICAge3JlbmRlclJpZ2h0Q29udGVudCh7IHRleHRTaXplLCBhY3Rpb25TaXplLCAuLi5pdGVtIH0pfVxuICAgICAgICAgICAgPC9TdHlsZWRNaW5IZWlnaHRDZWxsPlxuICAgICAgICAgICkgOiBudWxsXG4gICAgICAgIH1cbiAgICAgIC8+XG4gICAgKTtcbiAgfTtcblxuICByZXR1cm4gaXNWaXJ0dWFsaXplZCAmJiBtYXhIZWlnaHQgPyAoXG4gICAgPFZpcnR1YWxpemVkRW50aXR5TGlzdFxuICAgICAgaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBtYXhIZWlnaHQ9e21heEhlaWdodH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBkYXRhU2hvd249e2RhdGFTaG93bn1cbiAgICAgIHNlbGVjdGVkSW5kZXg9e3NlbGVjdGVkSW5kZXh9XG4gICAgICBpdGVtVGVtcGxhdGU9e3JlbmRlckVudGl0eUl0ZW19XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgIC8+XG4gICkgOiAoXG4gICAgPFN0eWxlZExpc3RcbiAgICAgIHJlZj17cmVmTGlzdH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgZGF0YS1kcy1pZD1cIkVudGl0eUxpc3RcIlxuICAgICAgcm9sZT1cImxpc3RcIlxuICAgID5cbiAgICAgIHtkYXRhU2hvd24ubWFwKChfaXRlbSwgaSkgPT4gcmVuZGVyRW50aXR5SXRlbShpKSl9XG4gICAgPC9TdHlsZWRMaXN0PlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCNEIifQ== */"),findEnabledItemIndex=(items,startIndex,direction="next")=>{if("next"===direction){for(let i=startIndex+1;i<items.length;i+=1)if(!items[i].isDisabled)return i}else if("previous"===direction){for(let i=startIndex-1;i>=0;i-=1)if(!items[i].isDisabled)return i}return startIndex};function BaseEntityList({data,size="m",onClick,isSelectable,selectedIds,onSelectionChange,renderRightContent,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,"data-e2e-test-id":dataE2eTestId}){let dataShown=(0,_react.useMemo)(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=(0,_react.useMemo)(()=>new Set(selectedIds),[selectedIds]),[isKeyboardFocus,setIsKeyboardFocus]=(0,_react.useState)(!1),[selectedIndex,setSelectedIndex]=(0,_react.useState)(()=>isSelectable||onClick?findEnabledItemIndex(dataShown,-1):-1),refList=(0,_react.useRef)(null);(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex))},ArrowUp:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex,"previous"))}},refList,-1!==selectedIndex),(0,_react.useEffect)(()=>{if(refList&&refList.current&&isKeyboardFocus&&selectedIndex>=0){let buttons=refList.current.querySelectorAll('div[data-id="list-item"]');buttons[Math.abs(selectedIndex)%buttons.length].focus({preventScroll:!0})}},[selectedIndex,isKeyboardFocus]);let handleOnClick=(0,_react.useCallback)(item=>{let{id}=item;isSelectable&&(selectedIdsSet.has(id)?selectedIdsSet.delete(id):selectedIdsSet.add(id),onSelectionChange?.(Array.from(selectedIdsSet))),onClick?.(item)},[selectedIdsSet,onSelectionChange,onClick,isSelectable]),handleBlur=(0,_react.useCallback)(()=>{setTimeout(()=>{refList.current&&!refList.current.contains(document.activeElement)&&(setIsKeyboardFocus(!1),setSelectedIndex(()=>findEnabledItemIndex(dataShown,-1)))},0)},[refList,setSelectedIndex,dataShown]),renderEntityItem=index=>{let item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,tabIndex=item.isDisabled||index!==selectedIndex?-1:0,isSelected=selectedIdsSet.has(item.id);return _react.default.createElement(_EntityListItem.EntityListItem,{key:item.id,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive||isKeyboardFocus&&selectedIndex===index,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),description:item.description,onKeyDown:()=>handleOnClick(item),tabIndex:tabIndex,onFocus:()=>{(onClick||isSelectable)&&(setSelectedIndex(index),setIsKeyboardFocus(!0))},onClick:()=>{setIsKeyboardFocus(!1),handleOnClick(item)},checkboxProps:isSelectable&&{name:"list-checkbox",size:"s",onChange:()=>handleOnClick(item),checked:isSelected},renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>_react.default.createElement(_Icon.Icon,{...getLeftIconProps(item),size:textSize}):null,renderRight:({actionSize,textSize})=>renderRightContent?_react.default.createElement(StyledMinHeightCell,{textSize:textSize},renderRightContent({textSize,actionSize,...item})):null})};return isVirtualized&&maxHeight?_react.default.createElement(_VirtualizedEntityList.VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId}):_react.default.createElement(_styledcomponents.StyledList,{ref:refList,size:size,"data-e2e-test-id":dataE2eTestId,onBlur:handleBlur,"data-ds-id":"EntityList",role:"list"},dataShown.map((_item,i)=>renderEntityItem(i)))}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityList",{enumerable:!0,get:function(){return BaseEntityList}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_styledcomponents=require("./styled-components"),_useKeyboard=require("../../shared/useKeyboard"),_Icon=require("../Icon/Icon"),_EntityListItem=require("./EntityListItem"),_VirtualizedEntityList=require("./VirtualizedEntityList"),StyledMinHeightCell=(0,_styled.default)("div",{target:"e1pzyi5y0",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvRW50aXR5TGlzdC9CYXNlRW50aXR5TGlzdC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0VudGl0eUxpc3QvQmFzZUVudGl0eUxpc3QudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwge1xuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxuICB1c2VFZmZlY3QsXG4gIHVzZU1lbW8sXG4gIHVzZUNhbGxiYWNrLFxufSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU3R5bGVkTGlzdCB9IGZyb20gXCIuL3N0eWxlZC1jb21wb25lbnRzXCI7XG5pbXBvcnQgdHlwZSB7IEVudGl0eUxpc3RQcm9wcywgTGlzdE5vZGUsIFRleHRTaXplUHJvcHMgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IHsgdXNlS2V5Ym9hcmQgfSBmcm9tIFwiLi4vLi4vc2hhcmVkL3VzZUtleWJvYXJkXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgRW50aXR5TGlzdEl0ZW0gfSBmcm9tIFwiLi9FbnRpdHlMaXN0SXRlbVwiO1xuaW1wb3J0IHsgVmlydHVhbGl6ZWRFbnRpdHlMaXN0IH0gZnJvbSBcIi4vVmlydHVhbGl6ZWRFbnRpdHlMaXN0XCI7XG5cbi8vIFRoaXMgbWluSGVpZ2h0IGlzIG5lZWRlZCBmb3IgYWxpZ24gc21hbGwgaWNvbnMgaW4gdGhlIG1pZGRsZSBvZiAxIHJvdyB0ZXh0LFxuLy8gYnV0IGl0IHNob3VsZCBzdGF5IGF0IHRoZSB0b3AgaWYgdGhlcmUgaXMgbXVsdGlsaW5lIHRleHRcbmNvbnN0IFN0eWxlZE1pbkhlaWdodENlbGwgPSBzdHlsZWQuZGl2PFRleHRTaXplUHJvcHM+KFxuICAoeyB0aGVtZSwgdGV4dFNpemUgfSkgPT4gKHtcbiAgICBtaW5IZWlnaHQ6XG4gICAgICB0ZXh0U2l6ZSA9PT0gXCJzXCJcbiAgICAgICAgPyBgY2FsYygke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubX0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzfSlgXG4gICAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5sLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIH0pXG4pO1xuXG5jb25zdCBmaW5kRW5hYmxlZEl0ZW1JbmRleCA9IChcbiAgaXRlbXM6IExpc3ROb2RlW10sXG4gIHN0YXJ0SW5kZXg6IG51bWJlcixcbiAgZGlyZWN0aW9uID0gXCJuZXh0XCJcbik6IG51bWJlciA9PiB7XG4gIGlmIChkaXJlY3Rpb24gPT09IFwibmV4dFwiKSB7XG4gICAgZm9yIChsZXQgaSA9IHN0YXJ0SW5kZXggKyAxOyBpIDwgaXRlbXMubGVuZ3RoOyBpICs9IDEpIHtcbiAgICAgIGlmICghaXRlbXNbaV0uaXNEaXNhYmxlZCkge1xuICAgICAgICByZXR1cm4gaTtcbiAgICAgIH1cbiAgICB9XG4gIH0gZWxzZSBpZiAoZGlyZWN0aW9uID09PSBcInByZXZpb3VzXCIpIHtcbiAgICBmb3IgKGxldCBpID0gc3RhcnRJbmRleCAtIDE7IGkgPj0gMDsgaSAtPSAxKSB7XG4gICAgICBpZiAoIWl0ZW1zW2ldLmlzRGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuICB9XG4gIHJldHVybiBzdGFydEluZGV4O1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIEJhc2VFbnRpdHlMaXN0KHtcbiAgZGF0YSxcbiAgc2l6ZSA9IFwibVwiLFxuICBvbkNsaWNrLFxuICBpc1NlbGVjdGFibGUsXG4gIHNlbGVjdGVkSWRzLFxuICBvblNlbGVjdGlvbkNoYW5nZSxcbiAgb25TZWxlY3Rpb25Ub2dnbGUsXG4gIHJlbmRlclJpZ2h0Q29udGVudCxcbiAgZ2V0TGVmdEljb25Qcm9wcyxcbiAgaGlkZUJvcmRlcixcbiAgZmlsdGVyRm4sXG4gIGlzVmlydHVhbGl6ZWQsXG4gIG1heEhlaWdodCxcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBFbnRpdHlMaXN0UHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBkYXRhU2hvd24gPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAoIWRhdGEubGVuZ3RoKSByZXR1cm4gZGF0YTtcblxuICAgIHJldHVybiBmaWx0ZXJGbiA/IGRhdGEuZmlsdGVyKGZpbHRlckZuKSA6IGRhdGE7XG4gIH0sIFtkYXRhLCBmaWx0ZXJGbl0pO1xuXG4gIGNvbnN0IHNlbGVjdGVkSWRzU2V0ID0gdXNlTWVtbygoKSA9PiBuZXcgU2V0KHNlbGVjdGVkSWRzKSwgW3NlbGVjdGVkSWRzXSk7XG5cbiAgY29uc3QgW2lzS2V5Ym9hcmRGb2N1cywgc2V0SXNLZXlib2FyZEZvY3VzXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcbiAgY29uc3QgW3NlbGVjdGVkSW5kZXgsIHNldFNlbGVjdGVkSW5kZXhdID0gdXNlU3RhdGU8bnVtYmVyPigoKSA9PlxuICAgIGlzU2VsZWN0YWJsZSB8fCBvbkNsaWNrID8gZmluZEVuYWJsZWRJdGVtSW5kZXgoZGF0YVNob3duLCAtMSkgOiAtMVxuICApO1xuICBjb25zdCByZWZMaXN0ID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICB1c2VLZXlib2FyZChcbiAgICB7XG4gICAgICBBcnJvd0Rvd246ICgpID0+IHtcbiAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKHRydWUpO1xuICAgICAgICBjb25zdCBuZXh0SW5kZXggPSBmaW5kRW5hYmxlZEl0ZW1JbmRleChkYXRhU2hvd24sIHNlbGVjdGVkSW5kZXgpO1xuICAgICAgICBzZXRTZWxlY3RlZEluZGV4KG5leHRJbmRleCk7XG4gICAgICB9LFxuICAgICAgQXJyb3dVcDogKCkgPT4ge1xuICAgICAgICBzZXRJc0tleWJvYXJkRm9jdXModHJ1ZSk7XG4gICAgICAgIGNvbnN0IHByZXZJbmRleCA9IGZpbmRFbmFibGVkSXRlbUluZGV4KFxuICAgICAgICAgIGRhdGFTaG93bixcbiAgICAgICAgICBzZWxlY3RlZEluZGV4LFxuICAgICAgICAgIFwicHJldmlvdXNcIlxuICAgICAgICApO1xuICAgICAgICBzZXRTZWxlY3RlZEluZGV4KHByZXZJbmRleCk7XG4gICAgICB9LFxuICAgIH0sXG4gICAgcmVmTGlzdCxcbiAgICBzZWxlY3RlZEluZGV4ICE9PSAtMVxuICApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKHJlZkxpc3QgJiYgcmVmTGlzdC5jdXJyZW50ICYmIGlzS2V5Ym9hcmRGb2N1cyAmJiBzZWxlY3RlZEluZGV4ID49IDApIHtcbiAgICAgIGNvbnN0IGJ1dHRvbnMgPSByZWZMaXN0LmN1cnJlbnQucXVlcnlTZWxlY3RvckFsbChcbiAgICAgICAgJ2RpdltkYXRhLWlkPVwibGlzdC1pdGVtXCJdJ1xuICAgICAgKTtcblxuICAgICAgKGJ1dHRvbnNbTWF0aC5hYnMoc2VsZWN0ZWRJbmRleCkgJSBidXR0b25zLmxlbmd0aF0gYXMgSFRNTEVsZW1lbnQpLmZvY3VzKHtcbiAgICAgICAgcHJldmVudFNjcm9sbDogdHJ1ZSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfSwgW3NlbGVjdGVkSW5kZXgsIGlzS2V5Ym9hcmRGb2N1c10pO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoaXRlbTogTGlzdE5vZGUpID0+IHtcbiAgICAgIGNvbnN0IHsgaWQgfSA9IGl0ZW07XG5cbiAgICAgIGlmIChpc1NlbGVjdGFibGUpIHtcbiAgICAgICAgY29uc3Qgd2lsbEJlU2VsZWN0ZWQgPSAhc2VsZWN0ZWRJZHNTZXQuaGFzKGlkKTtcbiAgICAgICAgY29uc3QgbmV3U2VsZWN0ZWRJZHNTZXQgPSBuZXcgU2V0KHNlbGVjdGVkSWRzU2V0KTtcblxuICAgICAgICBpZiAod2lsbEJlU2VsZWN0ZWQpIHtcbiAgICAgICAgICBuZXdTZWxlY3RlZElkc1NldC5hZGQoaWQpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIG5ld1NlbGVjdGVkSWRzU2V0LmRlbGV0ZShpZCk7XG4gICAgICAgIH1cblxuICAgICAgICBvblNlbGVjdGlvblRvZ2dsZT8uKGlkLCB3aWxsQmVTZWxlY3RlZCk7XG4gICAgICAgIG9uU2VsZWN0aW9uQ2hhbmdlPy4oQXJyYXkuZnJvbShuZXdTZWxlY3RlZElkc1NldCkpO1xuICAgICAgfVxuXG4gICAgICBvbkNsaWNrPy4oaXRlbSk7XG4gICAgfSxcbiAgICBbXG4gICAgICBzZWxlY3RlZElkc1NldCxcbiAgICAgIG9uU2VsZWN0aW9uQ2hhbmdlLFxuICAgICAgb25TZWxlY3Rpb25Ub2dnbGUsXG4gICAgICBvbkNsaWNrLFxuICAgICAgaXNTZWxlY3RhYmxlLFxuICAgIF1cbiAgKTtcblxuICBjb25zdCBoYW5kbGVCbHVyID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIC8vIFVzZSBzZXRUaW1lb3V0IHRvIHdhaXQgZm9yIGZvY3VzIHRvIGZ1bGx5IHByb3BhZ2F0ZVxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKFxuICAgICAgICByZWZMaXN0LmN1cnJlbnQgJiZcbiAgICAgICAgIXJlZkxpc3QuY3VycmVudC5jb250YWlucyhkb2N1bWVudC5hY3RpdmVFbGVtZW50KVxuICAgICAgKSB7XG4gICAgICAgIHNldElzS2V5Ym9hcmRGb2N1cyhmYWxzZSk7XG4gICAgICAgIHNldFNlbGVjdGVkSW5kZXgoKCkgPT4gZmluZEVuYWJsZWRJdGVtSW5kZXgoZGF0YVNob3duLCAtMSkpO1xuICAgICAgfVxuICAgIH0sIDApO1xuICB9LCBbcmVmTGlzdCwgc2V0U2VsZWN0ZWRJbmRleCwgZGF0YVNob3duXSk7XG5cbiAgY29uc3QgcmVuZGVyRW50aXR5SXRlbSA9IChpbmRleDogbnVtYmVyKTogUmVhY3QuUmVhY3ROb2RlID0+IHtcbiAgICBjb25zdCBpdGVtID0gZGF0YVNob3duW2luZGV4XTtcbiAgICBpZiAoIWl0ZW0pIHJldHVybiBudWxsO1xuXG4gICAgY29uc3QgaXNMYXN0SXRlbSA9IGluZGV4ID09PSBkYXRhU2hvd24ubGVuZ3RoIC0gMTtcbiAgICBjb25zdCB0YWJJbmRleCA9ICFpdGVtLmlzRGlzYWJsZWQgJiYgaW5kZXggPT09IHNlbGVjdGVkSW5kZXggPyAwIDogLTE7XG4gICAgY29uc3QgaXNTZWxlY3RlZCA9IHNlbGVjdGVkSWRzU2V0LmhhcyhpdGVtLmlkKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8RW50aXR5TGlzdEl0ZW1cbiAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICBhcmlhLWxhYmVsPXtpdGVtW1wiYXJpYS1sYWJlbFwiXSB8fCBpdGVtLmxhYmVsfVxuICAgICAgICBzaXplPXtzaXplfVxuICAgICAgICBoaWRlQm9yZGVyPXtoaWRlQm9yZGVyIHx8IGlzTGFzdEl0ZW19XG4gICAgICAgIGlzQWN0aXZlPXtpdGVtLmlzQWN0aXZlIHx8IChpc0tleWJvYXJkRm9jdXMgJiYgc2VsZWN0ZWRJbmRleCA9PT0gaW5kZXgpfVxuICAgICAgICBpc0Rpc2FibGVkPXtpdGVtLmlzRGlzYWJsZWR9XG4gICAgICAgIGlzQ2xpY2thYmxlPXtCb29sZWFuKG9uQ2xpY2sgfHwgc2VsZWN0ZWRJZHMpfVxuICAgICAgICBkZXNjcmlwdGlvbj17aXRlbS5kZXNjcmlwdGlvbn1cbiAgICAgICAgb25LZXlEb3duPXsoKSA9PiBoYW5kbGVPbkNsaWNrKGl0ZW0pfVxuICAgICAgICB0YWJJbmRleD17dGFiSW5kZXh9XG4gICAgICAgIG9uRm9jdXM9eygpID0+IHtcbiAgICAgICAgICBpZiAob25DbGljayB8fCBpc1NlbGVjdGFibGUpIHtcbiAgICAgICAgICAgIHNldFNlbGVjdGVkSW5kZXgoaW5kZXgpO1xuICAgICAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKHRydWUpO1xuICAgICAgICAgIH1cbiAgICAgICAgfX1cbiAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgIHNldElzS2V5Ym9hcmRGb2N1cyhmYWxzZSk7XG4gICAgICAgICAgaGFuZGxlT25DbGljayhpdGVtKTtcbiAgICAgICAgfX1cbiAgICAgICAgY2hlY2tib3hQcm9wcz17XG4gICAgICAgICAgaXNTZWxlY3RhYmxlICYmIHtcbiAgICAgICAgICAgIG5hbWU6IFwibGlzdC1jaGVja2JveFwiLFxuICAgICAgICAgICAgc2l6ZTogXCJzXCIsXG4gICAgICAgICAgICBvbkNoYW5nZTogKCkgPT4gaGFuZGxlT25DbGljayhpdGVtKSxcbiAgICAgICAgICAgIGNoZWNrZWQ6IGlzU2VsZWN0ZWQsXG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJlbmRlckxhYmVsPXsoKSA9PiBpdGVtLmxhYmVsfVxuICAgICAgICByZW5kZXJMZWZ0PXtcbiAgICAgICAgICBnZXRMZWZ0SWNvblByb3BzXG4gICAgICAgICAgICA/ICh7IHRleHRTaXplIH0pID0+IChcbiAgICAgICAgICAgICAgICA8SWNvbiB7Li4uZ2V0TGVmdEljb25Qcm9wcyhpdGVtKX0gc2l6ZT17dGV4dFNpemV9IC8+XG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIDogbnVsbFxuICAgICAgICB9XG4gICAgICAgIHJlbmRlclJpZ2h0PXsoeyBhY3Rpb25TaXplLCB0ZXh0U2l6ZSB9KSA9PlxuICAgICAgICAgIHJlbmRlclJpZ2h0Q29udGVudCA/IChcbiAgICAgICAgICAgIDxTdHlsZWRNaW5IZWlnaHRDZWxsIHRleHRTaXplPXt0ZXh0U2l6ZX0+XG4gICAgICAgICAgICAgIHtyZW5kZXJSaWdodENvbnRlbnQoeyB0ZXh0U2l6ZSwgYWN0aW9uU2l6ZSwgLi4uaXRlbSB9KX1cbiAgICAgICAgICAgIDwvU3R5bGVkTWluSGVpZ2h0Q2VsbD5cbiAgICAgICAgICApIDogbnVsbFxuICAgICAgICB9XG4gICAgICAvPlxuICAgICk7XG4gIH07XG5cbiAgcmV0dXJuIGlzVmlydHVhbGl6ZWQgJiYgbWF4SGVpZ2h0ID8gKFxuICAgIDxWaXJ0dWFsaXplZEVudGl0eUxpc3RcbiAgICAgIGlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgbWF4SGVpZ2h0PXttYXhIZWlnaHR9XG4gICAgICBzaXplPXtzaXplfVxuICAgICAgZGF0YVNob3duPXtkYXRhU2hvd259XG4gICAgICBzZWxlY3RlZEluZGV4PXtzZWxlY3RlZEluZGV4fVxuICAgICAgaXRlbVRlbXBsYXRlPXtyZW5kZXJFbnRpdHlJdGVtfVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAvPlxuICApIDogKFxuICAgIDxTdHlsZWRMaXN0XG4gICAgICByZWY9e3JlZkxpc3R9XG4gICAgICBzaXplPXtzaXplfVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIG9uQmx1cj17aGFuZGxlQmx1cn1cbiAgICAgIGRhdGEtZHMtaWQ9XCJFbnRpdHlMaXN0XCJcbiAgICAgIHJvbGU9XCJsaXN0XCJcbiAgICA+XG4gICAgICB7ZGF0YVNob3duLm1hcCgoX2l0ZW0sIGkpID0+IHJlbmRlckVudGl0eUl0ZW0oaSkpfVxuICAgIDwvU3R5bGVkTGlzdD5cbiAgKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjRCIn0= */"),findEnabledItemIndex=(items,startIndex,direction="next")=>{if("next"===direction){for(let i=startIndex+1;i<items.length;i+=1)if(!items[i].isDisabled)return i}else if("previous"===direction){for(let i=startIndex-1;i>=0;i-=1)if(!items[i].isDisabled)return i}return startIndex};function BaseEntityList({data,size="m",onClick,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,"data-e2e-test-id":dataE2eTestId}){let dataShown=(0,_react.useMemo)(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=(0,_react.useMemo)(()=>new Set(selectedIds),[selectedIds]),[isKeyboardFocus,setIsKeyboardFocus]=(0,_react.useState)(!1),[selectedIndex,setSelectedIndex]=(0,_react.useState)(()=>isSelectable||onClick?findEnabledItemIndex(dataShown,-1):-1),refList=(0,_react.useRef)(null);(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex))},ArrowUp:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex,"previous"))}},refList,-1!==selectedIndex),(0,_react.useEffect)(()=>{if(refList&&refList.current&&isKeyboardFocus&&selectedIndex>=0){let buttons=refList.current.querySelectorAll('div[data-id="list-item"]');buttons[Math.abs(selectedIndex)%buttons.length].focus({preventScroll:!0})}},[selectedIndex,isKeyboardFocus]);let handleOnClick=(0,_react.useCallback)(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),handleBlur=(0,_react.useCallback)(()=>{setTimeout(()=>{refList.current&&!refList.current.contains(document.activeElement)&&(setIsKeyboardFocus(!1),setSelectedIndex(()=>findEnabledItemIndex(dataShown,-1)))},0)},[refList,setSelectedIndex,dataShown]),renderEntityItem=index=>{let item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,tabIndex=item.isDisabled||index!==selectedIndex?-1:0,isSelected=selectedIdsSet.has(item.id);return _react.default.createElement(_EntityListItem.EntityListItem,{key:item.id,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive||isKeyboardFocus&&selectedIndex===index,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),description:item.description,onKeyDown:()=>handleOnClick(item),tabIndex:tabIndex,onFocus:()=>{(onClick||isSelectable)&&(setSelectedIndex(index),setIsKeyboardFocus(!0))},onClick:()=>{setIsKeyboardFocus(!1),handleOnClick(item)},checkboxProps:isSelectable&&{name:"list-checkbox",size:"s",onChange:()=>handleOnClick(item),checked:isSelected},renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>_react.default.createElement(_Icon.Icon,{...getLeftIconProps(item),size:textSize}):null,renderRight:({actionSize,textSize})=>renderRightContent?_react.default.createElement(StyledMinHeightCell,{textSize:textSize},renderRightContent({textSize,actionSize,...item})):null})};return isVirtualized&&maxHeight?_react.default.createElement(_VirtualizedEntityList.VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId}):_react.default.createElement(_styledcomponents.StyledList,{ref:refList,size:size,"data-e2e-test-id":dataE2eTestId,onBlur:handleBlur,"data-ds-id":"EntityList",role:"list"},dataShown.map((_item,i)=>renderEntityItem(i)))}
|
|
@@ -36,7 +36,16 @@ export type BaseEntityListProps = {
|
|
|
36
36
|
/** Allows selection of items with checkboxes. */
|
|
37
37
|
isSelectable?: boolean;
|
|
38
38
|
onSelectionChange?: (ids: string[]) => void;
|
|
39
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Callback function to handle individual item selection toggle.
|
|
41
|
+
* Fires synchronously when user clicks to toggle selection,
|
|
42
|
+
* BEFORE onSelectionChange is called, allowing you to capture
|
|
43
|
+
* the clicked item and its new state.
|
|
44
|
+
* @param itemId - ID of the clicked item
|
|
45
|
+
* @param isSelected - New selection state AFTER the toggle
|
|
46
|
+
*/
|
|
47
|
+
onSelectionToggle?: (itemId: string, isSelected: boolean) => void;
|
|
48
|
+
/** It's triggered when a whole list item is clicked. */
|
|
40
49
|
onClick?: (props: ListNodeProps) => void;
|
|
41
50
|
/** Function to get properties for the left-side icon (name and color). */
|
|
42
51
|
getLeftIconProps?: (props: ListNode) => Pick<IconProps, "name" | "color">;
|
|
@@ -22,6 +22,15 @@ export type EntityTreeProps = {
|
|
|
22
22
|
* @param ids - Updated selected node ids
|
|
23
23
|
*/
|
|
24
24
|
onSelectionChange?: (ids: NodeID[]) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Callback function to handle individual node selection toggle.
|
|
27
|
+
* Fires synchronously when user clicks to toggle selection,
|
|
28
|
+
* BEFORE onSelectionChange is called, allowing you to capture
|
|
29
|
+
* the clicked node and its new state.
|
|
30
|
+
* @param nodeId - ID of the clicked node
|
|
31
|
+
* @param isSelected - New selection state AFTER the toggle
|
|
32
|
+
*/
|
|
33
|
+
onSelectionToggle?: (nodeId: NodeID, isSelected: boolean) => void;
|
|
25
34
|
/** Expanded node ids */
|
|
26
35
|
expandedIds?: NodeID[];
|
|
27
36
|
/** Callback function to handle node expand/collapse
|
|
@@ -50,5 +59,5 @@ export type EntityTreeProps = {
|
|
|
50
59
|
"data-e2e-test-id"?: string;
|
|
51
60
|
ariaAttributes?: EntityListAriaAttributes;
|
|
52
61
|
} & PartialEntityListItemProps;
|
|
53
|
-
export declare const BaseEntityTree: ({ ariaAttributes, data, selectedIds, onSelectionChange, onNodeClick, expandedIds, onToggle, activeId, chunkSize, filterFn, onTreeChange, hideBorder, size, showItemsCount, showMoreButtonLabel, renderRightContent, "data-e2e-test-id": dataE2eTestId, }: EntityTreeProps) => React.ReactElement;
|
|
62
|
+
export declare const BaseEntityTree: ({ ariaAttributes, data, selectedIds, onSelectionChange, onSelectionToggle, onNodeClick, expandedIds, onToggle, activeId, chunkSize, filterFn, onTreeChange, hideBorder, size, showItemsCount, showMoreButtonLabel, renderRightContent, "data-e2e-test-id": dataE2eTestId, }: EntityTreeProps) => React.ReactElement;
|
|
54
63
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityTree",{enumerable:!0,get:function(){return BaseEntityTree}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Button=require("../Button/Button"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components"),_EntityTreeItem=require("./EntityTreeItem"),_useKeyboard=require("../../shared/useKeyboard"),_Text=require("../Typography/Text/Text"),_tree=require("./tree"),flattenTree=(data,expandedIds,expadedAll)=>{let flattened=[];return data.forEach(node=>{flattened.push(node.id),(node.children.length>0&&expandedIds[node.id]||expadedAll)&&flattened.push(...flattenTree(node.children,expandedIds,expadedAll))}),flattened},getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&¤tLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=(0,_react.useState)(chunkSize),{result,hasMoreNodes}=(0,_react.useMemo)(()=>(0,_tree.trimDataByMaxSize)(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:(0,_react.useCallback)(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},Node=({isFirstNode,nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,onNodeClick,hideBorder,size,showItemsCount,renderRightContent,activeId,focusedNodeId,node,level,renderFn,isLastNodeOfList,ariaLabelExpand,ariaLabelCollapse})=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=(0,_tree.getLeafNodeIds)(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState,handleClick=readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),isFocused=focusedNodeId===node.id,{children,...nodeDataWithoutChildren}=node;return _react.default.createElement(_EntityTreeItem.EntityTreeItem,{key:node.id,hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),tabIndex:isFocused||null===focusedNodeId&&isFirstNode?0:-1,size:size,lSpaceStep:level,onKeyDown:()=>handleClick(),description:node.description,renderLabel:({textSize})=>_react.default.createElement(_react.default.Fragment,null,node.label,showItemsCount&&!lastLeaf&&_react.default.createElement(_Text.Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:activeId===node.id,isExpanded:isExpanded,isDisabledExpand:expandAll,checkboxProps:!readOnly&&{size:"s",name:node.label,checked:nodeCheckboxState?.[node.id]==="checked",indeterminate:nodeCheckboxState?.[node.id]==="indeterminate",onChange:()=>handleSelectionChange(node.id)},onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},isClickable:readOnly,onClick:()=>{handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren)},renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,"aria-label":node.label,"aria-level":level+1},hasChildren&&_react.default.createElement("ul",{role:"group"},renderFn({data:children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))},makeRenderTreeBranches=renderTreeArgs=>({data,level,renderFn,isParentsLastOfLvl})=>data.map((node,i)=>{let isFirstNode=0===level&&0===i,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl});return _react.default.createElement(Node,{key:node.id,level:level,node:node,isFirstNode:isFirstNode,renderFn:renderFn,isLastNodeOfList:isLastNodeOfList,...renderTreeArgs})}),BaseEntityTree=({ariaAttributes,data,selectedIds,onSelectionChange,onNodeClick,expandedIds=[],onToggle,activeId,chunkSize=10,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>(0,_tree.getNodeChildrenMap)(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>(0,_tree.getTreeCheckboxState)(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=(0,_tree.getVisibleActiveNodeId)(nodeChildrenMap,nodeExpandedState,activeId),handleExpand=targetId=>{onToggle&&!expandedIds.includes(targetId)&&onToggle(expandedIds.concat([targetId]))},handleCollapse=targetId=>{onToggle&&expandedIds.includes(targetId)&&onToggle(expandedIds.filter(id=>id!==targetId))},dataShown=filterFn?data.map(tree=>(0,_tree.filterTree)(tree,filterFn)).filter(Boolean):data;(0,_react.useEffect)(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>(0,_tree.mapTree)(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),listRef=_react.default.useRef(null),[focusedNodeId,setFocusedNodeId]=(0,_react.useState)(null),[selectedIndex,setSelectedIndex]=(0,_react.useState)(0),changeFocusIndex=index=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll),newIndex=index+Math.max(flatTreeIds.indexOf(focusedNodeId),0);newIndex>=0&&newIndex<flatTreeIds.length&&(setSelectedIndex(newIndex),setFocusedNodeId(flatTreeIds[newIndex]))},firstNodeId=(0,_react.useMemo)(()=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll);return flatTreeIds.length>0?flatTreeIds[0]:null},[dataShown,nodeExpandedState,expandAll]);(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{changeFocusIndex(1)},ArrowUp:()=>{changeFocusIndex(-1)},ArrowRight:()=>{expandAll||handleExpand(focusedNodeId||firstNodeId)},ArrowLeft:()=>{expandAll||handleCollapse(focusedNodeId||firstNodeId)}},listRef,!0),(0,_react.useEffect)(()=>{if(listRef&&listRef.current&&selectedIndex>=0){let buttons=listRef.current.querySelectorAll('div[data-id="list-item"]'),button=buttons[Math.abs(selectedIndex)%buttons.length];button&&button.focus({preventScroll:!0})}},[selectedIndex]),(0,_react.useEffect)(()=>{expandAll&&(setFocusedNodeId(null),setSelectedIndex(0))},[expandAll]);let renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=(0,_tree.getLeafNodeIds)(nodeChildrenMap,targetId);updatedSelectedIds=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"BaseEntityTree",{enumerable:!0,get:function(){return BaseEntityTree}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Button=require("../Button/Button"),_Box=require("../Box/Box"),_styledcomponents=require("../EntityList/styled-components"),_EntityTreeItem=require("./EntityTreeItem"),_useKeyboard=require("../../shared/useKeyboard"),_Text=require("../Typography/Text/Text"),_tree=require("./tree"),flattenTree=(data,expandedIds,expadedAll)=>{let flattened=[];return data.forEach(node=>{flattened.push(node.id),(node.children.length>0&&expandedIds[node.id]||expadedAll)&&flattened.push(...flattenTree(node.children,expandedIds,expadedAll))}),flattened},getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&¤tLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=(0,_react.useState)(chunkSize),{result,hasMoreNodes}=(0,_react.useMemo)(()=>(0,_tree.trimDataByMaxSize)(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:(0,_react.useCallback)(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},Node=({isFirstNode,nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,onNodeClick,hideBorder,size,showItemsCount,renderRightContent,activeId,focusedNodeId,node,level,renderFn,isLastNodeOfList,ariaLabelExpand,ariaLabelCollapse})=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=(0,_tree.getLeafNodeIds)(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState,handleClick=readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),isFocused=focusedNodeId===node.id,{children,...nodeDataWithoutChildren}=node;return _react.default.createElement(_EntityTreeItem.EntityTreeItem,{key:node.id,hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),tabIndex:isFocused||null===focusedNodeId&&isFirstNode?0:-1,size:size,lSpaceStep:level,onKeyDown:()=>handleClick(),description:node.description,renderLabel:({textSize})=>_react.default.createElement(_react.default.Fragment,null,node.label,showItemsCount&&!lastLeaf&&_react.default.createElement(_Text.Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:activeId===node.id,isExpanded:isExpanded,isDisabledExpand:expandAll,checkboxProps:!readOnly&&{size:"s",name:node.label,checked:nodeCheckboxState?.[node.id]==="checked",indeterminate:nodeCheckboxState?.[node.id]==="indeterminate",onChange:()=>handleSelectionChange(node.id)},onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},isClickable:readOnly,onClick:()=>{handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren)},renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,"aria-label":node.label,"aria-level":level+1},hasChildren&&_react.default.createElement("ul",{role:"group"},renderFn({data:children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))},makeRenderTreeBranches=renderTreeArgs=>({data,level,renderFn,isParentsLastOfLvl})=>data.map((node,i)=>{let isFirstNode=0===level&&0===i,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl});return _react.default.createElement(Node,{key:node.id,level:level,node:node,isFirstNode:isFirstNode,renderFn:renderFn,isLastNodeOfList:isLastNodeOfList,...renderTreeArgs})}),BaseEntityTree=({ariaAttributes,data,selectedIds,onSelectionChange,onSelectionToggle,onNodeClick,expandedIds=[],onToggle,activeId,chunkSize=10,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>(0,_tree.getNodeChildrenMap)(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>(0,_tree.getTreeCheckboxState)(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=(0,_tree.getVisibleActiveNodeId)(nodeChildrenMap,nodeExpandedState,activeId),handleExpand=targetId=>{onToggle&&!expandedIds.includes(targetId)&&onToggle(expandedIds.concat([targetId]))},handleCollapse=targetId=>{onToggle&&expandedIds.includes(targetId)&&onToggle(expandedIds.filter(id=>id!==targetId))},dataShown=filterFn?data.map(tree=>(0,_tree.filterTree)(tree,filterFn)).filter(Boolean):data;(0,_react.useEffect)(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>(0,_tree.mapTree)(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),listRef=_react.default.useRef(null),[focusedNodeId,setFocusedNodeId]=(0,_react.useState)(null),[selectedIndex,setSelectedIndex]=(0,_react.useState)(0),changeFocusIndex=index=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll),newIndex=index+Math.max(flatTreeIds.indexOf(focusedNodeId),0);newIndex>=0&&newIndex<flatTreeIds.length&&(setSelectedIndex(newIndex),setFocusedNodeId(flatTreeIds[newIndex]))},firstNodeId=(0,_react.useMemo)(()=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll);return flatTreeIds.length>0?flatTreeIds[0]:null},[dataShown,nodeExpandedState,expandAll]);(0,_useKeyboard.useKeyboard)({ArrowDown:()=>{changeFocusIndex(1)},ArrowUp:()=>{changeFocusIndex(-1)},ArrowRight:()=>{expandAll||handleExpand(focusedNodeId||firstNodeId)},ArrowLeft:()=>{expandAll||handleCollapse(focusedNodeId||firstNodeId)}},listRef,!0),(0,_react.useEffect)(()=>{if(listRef&&listRef.current&&selectedIndex>=0){let buttons=listRef.current.querySelectorAll('div[data-id="list-item"]'),button=buttons[Math.abs(selectedIndex)%buttons.length];button&&button.focus({preventScroll:!0})}},[selectedIndex]),(0,_react.useEffect)(()=>{expandAll&&(setFocusedNodeId(null),setSelectedIndex(0))},[expandAll]);let renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let isSelected,updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)isSelected=!selectedIds.includes(targetId),updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=(0,_tree.getLeafNodeIds)(nodeChildrenMap,targetId),hasUncheckedChildren=affectedLeafNodeIds.some(leafId=>!selectedIds.includes(leafId));updatedSelectedIds=hasUncheckedChildren?selectedIds.concat(affectedLeafNodeIds.filter(id=>!selectedIds.includes(id))):selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)),isSelected=hasUncheckedChildren}onSelectionToggle?.(targetId,isSelected),onSelectionChange(updatedSelectedIds)}},handleToggle:targetId=>{expandedIds.includes(targetId)?handleCollapse(targetId):handleExpand(targetId)},onNodeClick:node=>{setFocusedNodeId(node.id),onNodeClick?.(node)},expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId:visibleActiveNodeId,focusedNodeId,ariaLabelExpand:ariaAttributes?.ariaLabelExpand,ariaLabelCollapse:ariaAttributes?.ariaLabelCollapse});return _react.default.createElement("div",null,_react.default.createElement(_styledcomponents.StyledList,{ref:listRef,role:"tree","aria-multiselectable":!!nodeCheckboxState||void 0,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches})),hasMoreNodes&&_react.default.createElement(_styledcomponents.StyledShowMore,null,_react.default.createElement(_Box.Box,{alignText:"center",space:"xs"},_react.default.createElement(_Button.Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { EntityListProps } from "./types";
|
|
3
|
-
export declare function BaseEntityList({ data, size, onClick, isSelectable, selectedIds, onSelectionChange, renderRightContent, getLeftIconProps, hideBorder, filterFn, isVirtualized, maxHeight, "data-e2e-test-id": dataE2eTestId, }: EntityListProps): React.ReactElement;
|
|
3
|
+
export declare function BaseEntityList({ data, size, onClick, isSelectable, selectedIds, onSelectionChange, onSelectionToggle, renderRightContent, getLeftIconProps, hideBorder, filterFn, isVirtualized, maxHeight, "data-e2e-test-id": dataE2eTestId, }: EntityListProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useRef,useState,useEffect,useMemo,useCallback}from"react";import styled from"@emotion/styled";import{StyledList}from"./styled-components";import{useKeyboard}from"../../shared/useKeyboard";import{Icon}from"../Icon/Icon";import{EntityListItem}from"./EntityListItem";import{VirtualizedEntityList}from"./VirtualizedEntityList";let StyledMinHeightCell=styled("div",{target:"ek7zfhr0",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvRW50aXR5TGlzdC9CYXNlRW50aXR5TGlzdC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0VudGl0eUxpc3QvQmFzZUVudGl0eUxpc3QudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwge1xuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxuICB1c2VFZmZlY3QsXG4gIHVzZU1lbW8sXG4gIHVzZUNhbGxiYWNrLFxufSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU3R5bGVkTGlzdCB9IGZyb20gXCIuL3N0eWxlZC1jb21wb25lbnRzXCI7XG5pbXBvcnQgdHlwZSB7IEVudGl0eUxpc3RQcm9wcywgTGlzdE5vZGUsIFRleHRTaXplUHJvcHMgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IHsgdXNlS2V5Ym9hcmQgfSBmcm9tIFwiLi4vLi4vc2hhcmVkL3VzZUtleWJvYXJkXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgRW50aXR5TGlzdEl0ZW0gfSBmcm9tIFwiLi9FbnRpdHlMaXN0SXRlbVwiO1xuaW1wb3J0IHsgVmlydHVhbGl6ZWRFbnRpdHlMaXN0IH0gZnJvbSBcIi4vVmlydHVhbGl6ZWRFbnRpdHlMaXN0XCI7XG5cbi8vIFRoaXMgbWluSGVpZ2h0IGlzIG5lZWRlZCBmb3IgYWxpZ24gc21hbGwgaWNvbnMgaW4gdGhlIG1pZGRsZSBvZiAxIHJvdyB0ZXh0LFxuLy8gYnV0IGl0IHNob3VsZCBzdGF5IGF0IHRoZSB0b3AgaWYgdGhlcmUgaXMgbXVsdGlsaW5lIHRleHRcbmNvbnN0IFN0eWxlZE1pbkhlaWdodENlbGwgPSBzdHlsZWQuZGl2PFRleHRTaXplUHJvcHM+KFxuICAoeyB0aGVtZSwgdGV4dFNpemUgfSkgPT4gKHtcbiAgICBtaW5IZWlnaHQ6XG4gICAgICB0ZXh0U2l6ZSA9PT0gXCJzXCJcbiAgICAgICAgPyBgY2FsYygke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubX0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzfSlgXG4gICAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5sLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIH0pXG4pO1xuXG5jb25zdCBmaW5kRW5hYmxlZEl0ZW1JbmRleCA9IChcbiAgaXRlbXM6IExpc3ROb2RlW10sXG4gIHN0YXJ0SW5kZXg6IG51bWJlcixcbiAgZGlyZWN0aW9uID0gXCJuZXh0XCJcbik6IG51bWJlciA9PiB7XG4gIGlmIChkaXJlY3Rpb24gPT09IFwibmV4dFwiKSB7XG4gICAgZm9yIChsZXQgaSA9IHN0YXJ0SW5kZXggKyAxOyBpIDwgaXRlbXMubGVuZ3RoOyBpICs9IDEpIHtcbiAgICAgIGlmICghaXRlbXNbaV0uaXNEaXNhYmxlZCkge1xuICAgICAgICByZXR1cm4gaTtcbiAgICAgIH1cbiAgICB9XG4gIH0gZWxzZSBpZiAoZGlyZWN0aW9uID09PSBcInByZXZpb3VzXCIpIHtcbiAgICBmb3IgKGxldCBpID0gc3RhcnRJbmRleCAtIDE7IGkgPj0gMDsgaSAtPSAxKSB7XG4gICAgICBpZiAoIWl0ZW1zW2ldLmlzRGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuICB9XG4gIHJldHVybiBzdGFydEluZGV4O1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIEJhc2VFbnRpdHlMaXN0KHtcbiAgZGF0YSxcbiAgc2l6ZSA9IFwibVwiLFxuICBvbkNsaWNrLFxuICBpc1NlbGVjdGFibGUsXG4gIHNlbGVjdGVkSWRzLFxuICBvblNlbGVjdGlvbkNoYW5nZSxcbiAgcmVuZGVyUmlnaHRDb250ZW50LFxuICBnZXRMZWZ0SWNvblByb3BzLFxuICBoaWRlQm9yZGVyLFxuICBmaWx0ZXJGbixcbiAgaXNWaXJ0dWFsaXplZCxcbiAgbWF4SGVpZ2h0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IEVudGl0eUxpc3RQcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIGNvbnN0IGRhdGFTaG93biA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmICghZGF0YS5sZW5ndGgpIHJldHVybiBkYXRhO1xuXG4gICAgcmV0dXJuIGZpbHRlckZuID8gZGF0YS5maWx0ZXIoZmlsdGVyRm4pIDogZGF0YTtcbiAgfSwgW2RhdGEsIGZpbHRlckZuXSk7XG5cbiAgY29uc3Qgc2VsZWN0ZWRJZHNTZXQgPSB1c2VNZW1vKCgpID0+IG5ldyBTZXQoc2VsZWN0ZWRJZHMpLCBbc2VsZWN0ZWRJZHNdKTtcblxuICBjb25zdCBbaXNLZXlib2FyZEZvY3VzLCBzZXRJc0tleWJvYXJkRm9jdXNdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuICBjb25zdCBbc2VsZWN0ZWRJbmRleCwgc2V0U2VsZWN0ZWRJbmRleF0gPSB1c2VTdGF0ZTxudW1iZXI+KCgpID0+XG4gICAgaXNTZWxlY3RhYmxlIHx8IG9uQ2xpY2sgPyBmaW5kRW5hYmxlZEl0ZW1JbmRleChkYXRhU2hvd24sIC0xKSA6IC0xXG4gICk7XG4gIGNvbnN0IHJlZkxpc3QgPSB1c2VSZWY8SFRNTFVMaXN0RWxlbWVudD4obnVsbCk7XG4gIHVzZUtleWJvYXJkKFxuICAgIHtcbiAgICAgIEFycm93RG93bjogKCkgPT4ge1xuICAgICAgICBzZXRJc0tleWJvYXJkRm9jdXModHJ1ZSk7XG4gICAgICAgIGNvbnN0IG5leHRJbmRleCA9IGZpbmRFbmFibGVkSXRlbUluZGV4KGRhdGFTaG93biwgc2VsZWN0ZWRJbmRleCk7XG4gICAgICAgIHNldFNlbGVjdGVkSW5kZXgobmV4dEluZGV4KTtcbiAgICAgIH0sXG4gICAgICBBcnJvd1VwOiAoKSA9PiB7XG4gICAgICAgIHNldElzS2V5Ym9hcmRGb2N1cyh0cnVlKTtcbiAgICAgICAgY29uc3QgcHJldkluZGV4ID0gZmluZEVuYWJsZWRJdGVtSW5kZXgoXG4gICAgICAgICAgZGF0YVNob3duLFxuICAgICAgICAgIHNlbGVjdGVkSW5kZXgsXG4gICAgICAgICAgXCJwcmV2aW91c1wiXG4gICAgICAgICk7XG4gICAgICAgIHNldFNlbGVjdGVkSW5kZXgocHJldkluZGV4KTtcbiAgICAgIH0sXG4gICAgfSxcbiAgICByZWZMaXN0LFxuICAgIHNlbGVjdGVkSW5kZXggIT09IC0xXG4gICk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAocmVmTGlzdCAmJiByZWZMaXN0LmN1cnJlbnQgJiYgaXNLZXlib2FyZEZvY3VzICYmIHNlbGVjdGVkSW5kZXggPj0gMCkge1xuICAgICAgY29uc3QgYnV0dG9ucyA9IHJlZkxpc3QuY3VycmVudC5xdWVyeVNlbGVjdG9yQWxsKFxuICAgICAgICAnZGl2W2RhdGEtaWQ9XCJsaXN0LWl0ZW1cIl0nXG4gICAgICApO1xuXG4gICAgICAoYnV0dG9uc1tNYXRoLmFicyhzZWxlY3RlZEluZGV4KSAlIGJ1dHRvbnMubGVuZ3RoXSBhcyBIVE1MRWxlbWVudCkuZm9jdXMoe1xuICAgICAgICBwcmV2ZW50U2Nyb2xsOiB0cnVlLFxuICAgICAgfSk7XG4gICAgfVxuICB9LCBbc2VsZWN0ZWRJbmRleCwgaXNLZXlib2FyZEZvY3VzXSk7XG5cbiAgY29uc3QgaGFuZGxlT25DbGljayA9IHVzZUNhbGxiYWNrKFxuICAgIChpdGVtOiBMaXN0Tm9kZSkgPT4ge1xuICAgICAgY29uc3QgeyBpZCB9ID0gaXRlbTtcblxuICAgICAgLy8gSGFuZGxlIGNoZWNrYm94IGNoYW5nZVxuICAgICAgaWYgKGlzU2VsZWN0YWJsZSkge1xuICAgICAgICBpZiAoc2VsZWN0ZWRJZHNTZXQuaGFzKGlkKSkge1xuICAgICAgICAgIHNlbGVjdGVkSWRzU2V0LmRlbGV0ZShpZCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgc2VsZWN0ZWRJZHNTZXQuYWRkKGlkKTtcbiAgICAgICAgfVxuICAgICAgICBvblNlbGVjdGlvbkNoYW5nZT8uKEFycmF5LmZyb20oc2VsZWN0ZWRJZHNTZXQpKTtcbiAgICAgIH1cblxuICAgICAgb25DbGljaz8uKGl0ZW0pO1xuICAgIH0sXG4gICAgW3NlbGVjdGVkSWRzU2V0LCBvblNlbGVjdGlvbkNoYW5nZSwgb25DbGljaywgaXNTZWxlY3RhYmxlXVxuICApO1xuXG4gIGNvbnN0IGhhbmRsZUJsdXIgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgLy8gVXNlIHNldFRpbWVvdXQgdG8gd2FpdCBmb3IgZm9jdXMgdG8gZnVsbHkgcHJvcGFnYXRlXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAoXG4gICAgICAgIHJlZkxpc3QuY3VycmVudCAmJlxuICAgICAgICAhcmVmTGlzdC5jdXJyZW50LmNvbnRhaW5zKGRvY3VtZW50LmFjdGl2ZUVsZW1lbnQpXG4gICAgICApIHtcbiAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKGZhbHNlKTtcbiAgICAgICAgc2V0U2VsZWN0ZWRJbmRleCgoKSA9PiBmaW5kRW5hYmxlZEl0ZW1JbmRleChkYXRhU2hvd24sIC0xKSk7XG4gICAgICB9XG4gICAgfSwgMCk7XG4gIH0sIFtyZWZMaXN0LCBzZXRTZWxlY3RlZEluZGV4LCBkYXRhU2hvd25dKTtcblxuICBjb25zdCByZW5kZXJFbnRpdHlJdGVtID0gKGluZGV4OiBudW1iZXIpOiBSZWFjdC5SZWFjdE5vZGUgPT4ge1xuICAgIGNvbnN0IGl0ZW0gPSBkYXRhU2hvd25baW5kZXhdO1xuICAgIGlmICghaXRlbSkgcmV0dXJuIG51bGw7XG5cbiAgICBjb25zdCBpc0xhc3RJdGVtID0gaW5kZXggPT09IGRhdGFTaG93bi5sZW5ndGggLSAxO1xuICAgIGNvbnN0IHRhYkluZGV4ID0gIWl0ZW0uaXNEaXNhYmxlZCAmJiBpbmRleCA9PT0gc2VsZWN0ZWRJbmRleCA/IDAgOiAtMTtcbiAgICBjb25zdCBpc1NlbGVjdGVkID0gc2VsZWN0ZWRJZHNTZXQuaGFzKGl0ZW0uaWQpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxFbnRpdHlMaXN0SXRlbVxuICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgIGFyaWEtbGFiZWw9e2l0ZW1bXCJhcmlhLWxhYmVsXCJdIHx8IGl0ZW0ubGFiZWx9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIGhpZGVCb3JkZXI9e2hpZGVCb3JkZXIgfHwgaXNMYXN0SXRlbX1cbiAgICAgICAgaXNBY3RpdmU9e2l0ZW0uaXNBY3RpdmUgfHwgKGlzS2V5Ym9hcmRGb2N1cyAmJiBzZWxlY3RlZEluZGV4ID09PSBpbmRleCl9XG4gICAgICAgIGlzRGlzYWJsZWQ9e2l0ZW0uaXNEaXNhYmxlZH1cbiAgICAgICAgaXNDbGlja2FibGU9e0Jvb2xlYW4ob25DbGljayB8fCBzZWxlY3RlZElkcyl9XG4gICAgICAgIGRlc2NyaXB0aW9uPXtpdGVtLmRlc2NyaXB0aW9ufVxuICAgICAgICBvbktleURvd249eygpID0+IGhhbmRsZU9uQ2xpY2soaXRlbSl9XG4gICAgICAgIHRhYkluZGV4PXt0YWJJbmRleH1cbiAgICAgICAgb25Gb2N1cz17KCkgPT4ge1xuICAgICAgICAgIGlmIChvbkNsaWNrIHx8IGlzU2VsZWN0YWJsZSkge1xuICAgICAgICAgICAgc2V0U2VsZWN0ZWRJbmRleChpbmRleCk7XG4gICAgICAgICAgICBzZXRJc0tleWJvYXJkRm9jdXModHJ1ZSk7XG4gICAgICAgICAgfVxuICAgICAgICB9fVxuICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKGZhbHNlKTtcbiAgICAgICAgICBoYW5kbGVPbkNsaWNrKGl0ZW0pO1xuICAgICAgICB9fVxuICAgICAgICBjaGVja2JveFByb3BzPXtcbiAgICAgICAgICBpc1NlbGVjdGFibGUgJiYge1xuICAgICAgICAgICAgbmFtZTogXCJsaXN0LWNoZWNrYm94XCIsXG4gICAgICAgICAgICBzaXplOiBcInNcIixcbiAgICAgICAgICAgIG9uQ2hhbmdlOiAoKSA9PiBoYW5kbGVPbkNsaWNrKGl0ZW0pLFxuICAgICAgICAgICAgY2hlY2tlZDogaXNTZWxlY3RlZCxcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgICAgcmVuZGVyTGFiZWw9eygpID0+IGl0ZW0ubGFiZWx9XG4gICAgICAgIHJlbmRlckxlZnQ9e1xuICAgICAgICAgIGdldExlZnRJY29uUHJvcHNcbiAgICAgICAgICAgID8gKHsgdGV4dFNpemUgfSkgPT4gKFxuICAgICAgICAgICAgICAgIDxJY29uIHsuLi5nZXRMZWZ0SWNvblByb3BzKGl0ZW0pfSBzaXplPXt0ZXh0U2l6ZX0gLz5cbiAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgOiBudWxsXG4gICAgICAgIH1cbiAgICAgICAgcmVuZGVyUmlnaHQ9eyh7IGFjdGlvblNpemUsIHRleHRTaXplIH0pID0+XG4gICAgICAgICAgcmVuZGVyUmlnaHRDb250ZW50ID8gKFxuICAgICAgICAgICAgPFN0eWxlZE1pbkhlaWdodENlbGwgdGV4dFNpemU9e3RleHRTaXplfT5cbiAgICAgICAgICAgICAge3JlbmRlclJpZ2h0Q29udGVudCh7IHRleHRTaXplLCBhY3Rpb25TaXplLCAuLi5pdGVtIH0pfVxuICAgICAgICAgICAgPC9TdHlsZWRNaW5IZWlnaHRDZWxsPlxuICAgICAgICAgICkgOiBudWxsXG4gICAgICAgIH1cbiAgICAgIC8+XG4gICAgKTtcbiAgfTtcblxuICByZXR1cm4gaXNWaXJ0dWFsaXplZCAmJiBtYXhIZWlnaHQgPyAoXG4gICAgPFZpcnR1YWxpemVkRW50aXR5TGlzdFxuICAgICAgaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBtYXhIZWlnaHQ9e21heEhlaWdodH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBkYXRhU2hvd249e2RhdGFTaG93bn1cbiAgICAgIHNlbGVjdGVkSW5kZXg9e3NlbGVjdGVkSW5kZXh9XG4gICAgICBpdGVtVGVtcGxhdGU9e3JlbmRlckVudGl0eUl0ZW19XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgIC8+XG4gICkgOiAoXG4gICAgPFN0eWxlZExpc3RcbiAgICAgIHJlZj17cmVmTGlzdH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBkYXRhLWUyZS10ZXN0LWlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgb25CbHVyPXtoYW5kbGVCbHVyfVxuICAgICAgZGF0YS1kcy1pZD1cIkVudGl0eUxpc3RcIlxuICAgICAgcm9sZT1cImxpc3RcIlxuICAgID5cbiAgICAgIHtkYXRhU2hvd24ubWFwKChfaXRlbSwgaSkgPT4gcmVuZGVyRW50aXR5SXRlbShpKSl9XG4gICAgPC9TdHlsZWRMaXN0PlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCNEIifQ== */"),findEnabledItemIndex=(items,startIndex,direction="next")=>{if("next"===direction){for(let i=startIndex+1;i<items.length;i+=1)if(!items[i].isDisabled)return i}else if("previous"===direction){for(let i=startIndex-1;i>=0;i-=1)if(!items[i].isDisabled)return i}return startIndex};export function BaseEntityList({data,size="m",onClick,isSelectable,selectedIds,onSelectionChange,renderRightContent,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,"data-e2e-test-id":dataE2eTestId}){let dataShown=useMemo(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=useMemo(()=>new Set(selectedIds),[selectedIds]),[isKeyboardFocus,setIsKeyboardFocus]=useState(!1),[selectedIndex,setSelectedIndex]=useState(()=>isSelectable||onClick?findEnabledItemIndex(dataShown,-1):-1),refList=useRef(null);useKeyboard({ArrowDown:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex))},ArrowUp:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex,"previous"))}},refList,-1!==selectedIndex),useEffect(()=>{if(refList&&refList.current&&isKeyboardFocus&&selectedIndex>=0){let buttons=refList.current.querySelectorAll('div[data-id="list-item"]');buttons[Math.abs(selectedIndex)%buttons.length].focus({preventScroll:!0})}},[selectedIndex,isKeyboardFocus]);let handleOnClick=useCallback(item=>{let{id}=item;isSelectable&&(selectedIdsSet.has(id)?selectedIdsSet.delete(id):selectedIdsSet.add(id),onSelectionChange?.(Array.from(selectedIdsSet))),onClick?.(item)},[selectedIdsSet,onSelectionChange,onClick,isSelectable]),handleBlur=useCallback(()=>{setTimeout(()=>{refList.current&&!refList.current.contains(document.activeElement)&&(setIsKeyboardFocus(!1),setSelectedIndex(()=>findEnabledItemIndex(dataShown,-1)))},0)},[refList,setSelectedIndex,dataShown]),renderEntityItem=index=>{let item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,tabIndex=item.isDisabled||index!==selectedIndex?-1:0,isSelected=selectedIdsSet.has(item.id);return React.createElement(EntityListItem,{key:item.id,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive||isKeyboardFocus&&selectedIndex===index,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),description:item.description,onKeyDown:()=>handleOnClick(item),tabIndex:tabIndex,onFocus:()=>{(onClick||isSelectable)&&(setSelectedIndex(index),setIsKeyboardFocus(!0))},onClick:()=>{setIsKeyboardFocus(!1),handleOnClick(item)},checkboxProps:isSelectable&&{name:"list-checkbox",size:"s",onChange:()=>handleOnClick(item),checked:isSelected},renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>React.createElement(Icon,{...getLeftIconProps(item),size:textSize}):null,renderRight:({actionSize,textSize})=>renderRightContent?React.createElement(StyledMinHeightCell,{textSize:textSize},renderRightContent({textSize,actionSize,...item})):null})};return isVirtualized&&maxHeight?React.createElement(VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId}):React.createElement(StyledList,{ref:refList,size:size,"data-e2e-test-id":dataE2eTestId,onBlur:handleBlur,"data-ds-id":"EntityList",role:"list"},dataShown.map((_item,i)=>renderEntityItem(i)))}
|
|
1
|
+
import React,{useRef,useState,useEffect,useMemo,useCallback}from"react";import styled from"@emotion/styled";import{StyledList}from"./styled-components";import{useKeyboard}from"../../shared/useKeyboard";import{Icon}from"../Icon/Icon";import{EntityListItem}from"./EntityListItem";import{VirtualizedEntityList}from"./VirtualizedEntityList";let StyledMinHeightCell=styled("div",{target:"e1pzyi5y0",label:"StyledMinHeightCell"})(({theme,textSize})=>({minHeight:"s"===textSize?`calc(${theme.variables.size.spacing.m} + ${theme.variables.size.spacing.xxs})`:theme.variables.size.spacing.l,display:"flex",alignItems:"center"}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvRW50aXR5TGlzdC9CYXNlRW50aXR5TGlzdC50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0VudGl0eUxpc3QvQmFzZUVudGl0eUxpc3QudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwge1xuICB1c2VSZWYsXG4gIHVzZVN0YXRlLFxuICB1c2VFZmZlY3QsXG4gIHVzZU1lbW8sXG4gIHVzZUNhbGxiYWNrLFxufSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgU3R5bGVkTGlzdCB9IGZyb20gXCIuL3N0eWxlZC1jb21wb25lbnRzXCI7XG5pbXBvcnQgdHlwZSB7IEVudGl0eUxpc3RQcm9wcywgTGlzdE5vZGUsIFRleHRTaXplUHJvcHMgfSBmcm9tIFwiLi90eXBlc1wiO1xuaW1wb3J0IHsgdXNlS2V5Ym9hcmQgfSBmcm9tIFwiLi4vLi4vc2hhcmVkL3VzZUtleWJvYXJkXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgRW50aXR5TGlzdEl0ZW0gfSBmcm9tIFwiLi9FbnRpdHlMaXN0SXRlbVwiO1xuaW1wb3J0IHsgVmlydHVhbGl6ZWRFbnRpdHlMaXN0IH0gZnJvbSBcIi4vVmlydHVhbGl6ZWRFbnRpdHlMaXN0XCI7XG5cbi8vIFRoaXMgbWluSGVpZ2h0IGlzIG5lZWRlZCBmb3IgYWxpZ24gc21hbGwgaWNvbnMgaW4gdGhlIG1pZGRsZSBvZiAxIHJvdyB0ZXh0LFxuLy8gYnV0IGl0IHNob3VsZCBzdGF5IGF0IHRoZSB0b3AgaWYgdGhlcmUgaXMgbXVsdGlsaW5lIHRleHRcbmNvbnN0IFN0eWxlZE1pbkhlaWdodENlbGwgPSBzdHlsZWQuZGl2PFRleHRTaXplUHJvcHM+KFxuICAoeyB0aGVtZSwgdGV4dFNpemUgfSkgPT4gKHtcbiAgICBtaW5IZWlnaHQ6XG4gICAgICB0ZXh0U2l6ZSA9PT0gXCJzXCJcbiAgICAgICAgPyBgY2FsYygke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubX0gKyAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzfSlgXG4gICAgICAgIDogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5sLFxuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIH0pXG4pO1xuXG5jb25zdCBmaW5kRW5hYmxlZEl0ZW1JbmRleCA9IChcbiAgaXRlbXM6IExpc3ROb2RlW10sXG4gIHN0YXJ0SW5kZXg6IG51bWJlcixcbiAgZGlyZWN0aW9uID0gXCJuZXh0XCJcbik6IG51bWJlciA9PiB7XG4gIGlmIChkaXJlY3Rpb24gPT09IFwibmV4dFwiKSB7XG4gICAgZm9yIChsZXQgaSA9IHN0YXJ0SW5kZXggKyAxOyBpIDwgaXRlbXMubGVuZ3RoOyBpICs9IDEpIHtcbiAgICAgIGlmICghaXRlbXNbaV0uaXNEaXNhYmxlZCkge1xuICAgICAgICByZXR1cm4gaTtcbiAgICAgIH1cbiAgICB9XG4gIH0gZWxzZSBpZiAoZGlyZWN0aW9uID09PSBcInByZXZpb3VzXCIpIHtcbiAgICBmb3IgKGxldCBpID0gc3RhcnRJbmRleCAtIDE7IGkgPj0gMDsgaSAtPSAxKSB7XG4gICAgICBpZiAoIWl0ZW1zW2ldLmlzRGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuICB9XG4gIHJldHVybiBzdGFydEluZGV4O1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIEJhc2VFbnRpdHlMaXN0KHtcbiAgZGF0YSxcbiAgc2l6ZSA9IFwibVwiLFxuICBvbkNsaWNrLFxuICBpc1NlbGVjdGFibGUsXG4gIHNlbGVjdGVkSWRzLFxuICBvblNlbGVjdGlvbkNoYW5nZSxcbiAgb25TZWxlY3Rpb25Ub2dnbGUsXG4gIHJlbmRlclJpZ2h0Q29udGVudCxcbiAgZ2V0TGVmdEljb25Qcm9wcyxcbiAgaGlkZUJvcmRlcixcbiAgZmlsdGVyRm4sXG4gIGlzVmlydHVhbGl6ZWQsXG4gIG1heEhlaWdodCxcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI6IGRhdGFFMmVUZXN0SWQsXG59OiBFbnRpdHlMaXN0UHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBkYXRhU2hvd24gPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAoIWRhdGEubGVuZ3RoKSByZXR1cm4gZGF0YTtcblxuICAgIHJldHVybiBmaWx0ZXJGbiA/IGRhdGEuZmlsdGVyKGZpbHRlckZuKSA6IGRhdGE7XG4gIH0sIFtkYXRhLCBmaWx0ZXJGbl0pO1xuXG4gIGNvbnN0IHNlbGVjdGVkSWRzU2V0ID0gdXNlTWVtbygoKSA9PiBuZXcgU2V0KHNlbGVjdGVkSWRzKSwgW3NlbGVjdGVkSWRzXSk7XG5cbiAgY29uc3QgW2lzS2V5Ym9hcmRGb2N1cywgc2V0SXNLZXlib2FyZEZvY3VzXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcbiAgY29uc3QgW3NlbGVjdGVkSW5kZXgsIHNldFNlbGVjdGVkSW5kZXhdID0gdXNlU3RhdGU8bnVtYmVyPigoKSA9PlxuICAgIGlzU2VsZWN0YWJsZSB8fCBvbkNsaWNrID8gZmluZEVuYWJsZWRJdGVtSW5kZXgoZGF0YVNob3duLCAtMSkgOiAtMVxuICApO1xuICBjb25zdCByZWZMaXN0ID0gdXNlUmVmPEhUTUxVTGlzdEVsZW1lbnQ+KG51bGwpO1xuICB1c2VLZXlib2FyZChcbiAgICB7XG4gICAgICBBcnJvd0Rvd246ICgpID0+IHtcbiAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKHRydWUpO1xuICAgICAgICBjb25zdCBuZXh0SW5kZXggPSBmaW5kRW5hYmxlZEl0ZW1JbmRleChkYXRhU2hvd24sIHNlbGVjdGVkSW5kZXgpO1xuICAgICAgICBzZXRTZWxlY3RlZEluZGV4KG5leHRJbmRleCk7XG4gICAgICB9LFxuICAgICAgQXJyb3dVcDogKCkgPT4ge1xuICAgICAgICBzZXRJc0tleWJvYXJkRm9jdXModHJ1ZSk7XG4gICAgICAgIGNvbnN0IHByZXZJbmRleCA9IGZpbmRFbmFibGVkSXRlbUluZGV4KFxuICAgICAgICAgIGRhdGFTaG93bixcbiAgICAgICAgICBzZWxlY3RlZEluZGV4LFxuICAgICAgICAgIFwicHJldmlvdXNcIlxuICAgICAgICApO1xuICAgICAgICBzZXRTZWxlY3RlZEluZGV4KHByZXZJbmRleCk7XG4gICAgICB9LFxuICAgIH0sXG4gICAgcmVmTGlzdCxcbiAgICBzZWxlY3RlZEluZGV4ICE9PSAtMVxuICApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKHJlZkxpc3QgJiYgcmVmTGlzdC5jdXJyZW50ICYmIGlzS2V5Ym9hcmRGb2N1cyAmJiBzZWxlY3RlZEluZGV4ID49IDApIHtcbiAgICAgIGNvbnN0IGJ1dHRvbnMgPSByZWZMaXN0LmN1cnJlbnQucXVlcnlTZWxlY3RvckFsbChcbiAgICAgICAgJ2RpdltkYXRhLWlkPVwibGlzdC1pdGVtXCJdJ1xuICAgICAgKTtcblxuICAgICAgKGJ1dHRvbnNbTWF0aC5hYnMoc2VsZWN0ZWRJbmRleCkgJSBidXR0b25zLmxlbmd0aF0gYXMgSFRNTEVsZW1lbnQpLmZvY3VzKHtcbiAgICAgICAgcHJldmVudFNjcm9sbDogdHJ1ZSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfSwgW3NlbGVjdGVkSW5kZXgsIGlzS2V5Ym9hcmRGb2N1c10pO1xuXG4gIGNvbnN0IGhhbmRsZU9uQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAoaXRlbTogTGlzdE5vZGUpID0+IHtcbiAgICAgIGNvbnN0IHsgaWQgfSA9IGl0ZW07XG5cbiAgICAgIGlmIChpc1NlbGVjdGFibGUpIHtcbiAgICAgICAgY29uc3Qgd2lsbEJlU2VsZWN0ZWQgPSAhc2VsZWN0ZWRJZHNTZXQuaGFzKGlkKTtcbiAgICAgICAgY29uc3QgbmV3U2VsZWN0ZWRJZHNTZXQgPSBuZXcgU2V0KHNlbGVjdGVkSWRzU2V0KTtcblxuICAgICAgICBpZiAod2lsbEJlU2VsZWN0ZWQpIHtcbiAgICAgICAgICBuZXdTZWxlY3RlZElkc1NldC5hZGQoaWQpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIG5ld1NlbGVjdGVkSWRzU2V0LmRlbGV0ZShpZCk7XG4gICAgICAgIH1cblxuICAgICAgICBvblNlbGVjdGlvblRvZ2dsZT8uKGlkLCB3aWxsQmVTZWxlY3RlZCk7XG4gICAgICAgIG9uU2VsZWN0aW9uQ2hhbmdlPy4oQXJyYXkuZnJvbShuZXdTZWxlY3RlZElkc1NldCkpO1xuICAgICAgfVxuXG4gICAgICBvbkNsaWNrPy4oaXRlbSk7XG4gICAgfSxcbiAgICBbXG4gICAgICBzZWxlY3RlZElkc1NldCxcbiAgICAgIG9uU2VsZWN0aW9uQ2hhbmdlLFxuICAgICAgb25TZWxlY3Rpb25Ub2dnbGUsXG4gICAgICBvbkNsaWNrLFxuICAgICAgaXNTZWxlY3RhYmxlLFxuICAgIF1cbiAgKTtcblxuICBjb25zdCBoYW5kbGVCbHVyID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIC8vIFVzZSBzZXRUaW1lb3V0IHRvIHdhaXQgZm9yIGZvY3VzIHRvIGZ1bGx5IHByb3BhZ2F0ZVxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKFxuICAgICAgICByZWZMaXN0LmN1cnJlbnQgJiZcbiAgICAgICAgIXJlZkxpc3QuY3VycmVudC5jb250YWlucyhkb2N1bWVudC5hY3RpdmVFbGVtZW50KVxuICAgICAgKSB7XG4gICAgICAgIHNldElzS2V5Ym9hcmRGb2N1cyhmYWxzZSk7XG4gICAgICAgIHNldFNlbGVjdGVkSW5kZXgoKCkgPT4gZmluZEVuYWJsZWRJdGVtSW5kZXgoZGF0YVNob3duLCAtMSkpO1xuICAgICAgfVxuICAgIH0sIDApO1xuICB9LCBbcmVmTGlzdCwgc2V0U2VsZWN0ZWRJbmRleCwgZGF0YVNob3duXSk7XG5cbiAgY29uc3QgcmVuZGVyRW50aXR5SXRlbSA9IChpbmRleDogbnVtYmVyKTogUmVhY3QuUmVhY3ROb2RlID0+IHtcbiAgICBjb25zdCBpdGVtID0gZGF0YVNob3duW2luZGV4XTtcbiAgICBpZiAoIWl0ZW0pIHJldHVybiBudWxsO1xuXG4gICAgY29uc3QgaXNMYXN0SXRlbSA9IGluZGV4ID09PSBkYXRhU2hvd24ubGVuZ3RoIC0gMTtcbiAgICBjb25zdCB0YWJJbmRleCA9ICFpdGVtLmlzRGlzYWJsZWQgJiYgaW5kZXggPT09IHNlbGVjdGVkSW5kZXggPyAwIDogLTE7XG4gICAgY29uc3QgaXNTZWxlY3RlZCA9IHNlbGVjdGVkSWRzU2V0LmhhcyhpdGVtLmlkKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8RW50aXR5TGlzdEl0ZW1cbiAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICBhcmlhLWxhYmVsPXtpdGVtW1wiYXJpYS1sYWJlbFwiXSB8fCBpdGVtLmxhYmVsfVxuICAgICAgICBzaXplPXtzaXplfVxuICAgICAgICBoaWRlQm9yZGVyPXtoaWRlQm9yZGVyIHx8IGlzTGFzdEl0ZW19XG4gICAgICAgIGlzQWN0aXZlPXtpdGVtLmlzQWN0aXZlIHx8IChpc0tleWJvYXJkRm9jdXMgJiYgc2VsZWN0ZWRJbmRleCA9PT0gaW5kZXgpfVxuICAgICAgICBpc0Rpc2FibGVkPXtpdGVtLmlzRGlzYWJsZWR9XG4gICAgICAgIGlzQ2xpY2thYmxlPXtCb29sZWFuKG9uQ2xpY2sgfHwgc2VsZWN0ZWRJZHMpfVxuICAgICAgICBkZXNjcmlwdGlvbj17aXRlbS5kZXNjcmlwdGlvbn1cbiAgICAgICAgb25LZXlEb3duPXsoKSA9PiBoYW5kbGVPbkNsaWNrKGl0ZW0pfVxuICAgICAgICB0YWJJbmRleD17dGFiSW5kZXh9XG4gICAgICAgIG9uRm9jdXM9eygpID0+IHtcbiAgICAgICAgICBpZiAob25DbGljayB8fCBpc1NlbGVjdGFibGUpIHtcbiAgICAgICAgICAgIHNldFNlbGVjdGVkSW5kZXgoaW5kZXgpO1xuICAgICAgICAgICAgc2V0SXNLZXlib2FyZEZvY3VzKHRydWUpO1xuICAgICAgICAgIH1cbiAgICAgICAgfX1cbiAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgIHNldElzS2V5Ym9hcmRGb2N1cyhmYWxzZSk7XG4gICAgICAgICAgaGFuZGxlT25DbGljayhpdGVtKTtcbiAgICAgICAgfX1cbiAgICAgICAgY2hlY2tib3hQcm9wcz17XG4gICAgICAgICAgaXNTZWxlY3RhYmxlICYmIHtcbiAgICAgICAgICAgIG5hbWU6IFwibGlzdC1jaGVja2JveFwiLFxuICAgICAgICAgICAgc2l6ZTogXCJzXCIsXG4gICAgICAgICAgICBvbkNoYW5nZTogKCkgPT4gaGFuZGxlT25DbGljayhpdGVtKSxcbiAgICAgICAgICAgIGNoZWNrZWQ6IGlzU2VsZWN0ZWQsXG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICAgIHJlbmRlckxhYmVsPXsoKSA9PiBpdGVtLmxhYmVsfVxuICAgICAgICByZW5kZXJMZWZ0PXtcbiAgICAgICAgICBnZXRMZWZ0SWNvblByb3BzXG4gICAgICAgICAgICA/ICh7IHRleHRTaXplIH0pID0+IChcbiAgICAgICAgICAgICAgICA8SWNvbiB7Li4uZ2V0TGVmdEljb25Qcm9wcyhpdGVtKX0gc2l6ZT17dGV4dFNpemV9IC8+XG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIDogbnVsbFxuICAgICAgICB9XG4gICAgICAgIHJlbmRlclJpZ2h0PXsoeyBhY3Rpb25TaXplLCB0ZXh0U2l6ZSB9KSA9PlxuICAgICAgICAgIHJlbmRlclJpZ2h0Q29udGVudCA/IChcbiAgICAgICAgICAgIDxTdHlsZWRNaW5IZWlnaHRDZWxsIHRleHRTaXplPXt0ZXh0U2l6ZX0+XG4gICAgICAgICAgICAgIHtyZW5kZXJSaWdodENvbnRlbnQoeyB0ZXh0U2l6ZSwgYWN0aW9uU2l6ZSwgLi4uaXRlbSB9KX1cbiAgICAgICAgICAgIDwvU3R5bGVkTWluSGVpZ2h0Q2VsbD5cbiAgICAgICAgICApIDogbnVsbFxuICAgICAgICB9XG4gICAgICAvPlxuICAgICk7XG4gIH07XG5cbiAgcmV0dXJuIGlzVmlydHVhbGl6ZWQgJiYgbWF4SGVpZ2h0ID8gKFxuICAgIDxWaXJ0dWFsaXplZEVudGl0eUxpc3RcbiAgICAgIGlkPXtkYXRhRTJlVGVzdElkfVxuICAgICAgbWF4SGVpZ2h0PXttYXhIZWlnaHR9XG4gICAgICBzaXplPXtzaXplfVxuICAgICAgZGF0YVNob3duPXtkYXRhU2hvd259XG4gICAgICBzZWxlY3RlZEluZGV4PXtzZWxlY3RlZEluZGV4fVxuICAgICAgaXRlbVRlbXBsYXRlPXtyZW5kZXJFbnRpdHlJdGVtfVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAvPlxuICApIDogKFxuICAgIDxTdHlsZWRMaXN0XG4gICAgICByZWY9e3JlZkxpc3R9XG4gICAgICBzaXplPXtzaXplfVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIG9uQmx1cj17aGFuZGxlQmx1cn1cbiAgICAgIGRhdGEtZHMtaWQ9XCJFbnRpdHlMaXN0XCJcbiAgICAgIHJvbGU9XCJsaXN0XCJcbiAgICA+XG4gICAgICB7ZGF0YVNob3duLm1hcCgoX2l0ZW0sIGkpID0+IHJlbmRlckVudGl0eUl0ZW0oaSkpfVxuICAgIDwvU3R5bGVkTGlzdD5cbiAgKTtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjRCIn0= */"),findEnabledItemIndex=(items,startIndex,direction="next")=>{if("next"===direction){for(let i=startIndex+1;i<items.length;i+=1)if(!items[i].isDisabled)return i}else if("previous"===direction){for(let i=startIndex-1;i>=0;i-=1)if(!items[i].isDisabled)return i}return startIndex};export function BaseEntityList({data,size="m",onClick,isSelectable,selectedIds,onSelectionChange,onSelectionToggle,renderRightContent,getLeftIconProps,hideBorder,filterFn,isVirtualized,maxHeight,"data-e2e-test-id":dataE2eTestId}){let dataShown=useMemo(()=>data.length&&filterFn?data.filter(filterFn):data,[data,filterFn]),selectedIdsSet=useMemo(()=>new Set(selectedIds),[selectedIds]),[isKeyboardFocus,setIsKeyboardFocus]=useState(!1),[selectedIndex,setSelectedIndex]=useState(()=>isSelectable||onClick?findEnabledItemIndex(dataShown,-1):-1),refList=useRef(null);useKeyboard({ArrowDown:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex))},ArrowUp:()=>{setIsKeyboardFocus(!0),setSelectedIndex(findEnabledItemIndex(dataShown,selectedIndex,"previous"))}},refList,-1!==selectedIndex),useEffect(()=>{if(refList&&refList.current&&isKeyboardFocus&&selectedIndex>=0){let buttons=refList.current.querySelectorAll('div[data-id="list-item"]');buttons[Math.abs(selectedIndex)%buttons.length].focus({preventScroll:!0})}},[selectedIndex,isKeyboardFocus]);let handleOnClick=useCallback(item=>{let{id}=item;if(isSelectable){let willBeSelected=!selectedIdsSet.has(id),newSelectedIdsSet=new Set(selectedIdsSet);willBeSelected?newSelectedIdsSet.add(id):newSelectedIdsSet.delete(id),onSelectionToggle?.(id,willBeSelected),onSelectionChange?.(Array.from(newSelectedIdsSet))}onClick?.(item)},[selectedIdsSet,onSelectionChange,onSelectionToggle,onClick,isSelectable]),handleBlur=useCallback(()=>{setTimeout(()=>{refList.current&&!refList.current.contains(document.activeElement)&&(setIsKeyboardFocus(!1),setSelectedIndex(()=>findEnabledItemIndex(dataShown,-1)))},0)},[refList,setSelectedIndex,dataShown]),renderEntityItem=index=>{let item=dataShown[index];if(!item)return null;let isLastItem=index===dataShown.length-1,tabIndex=item.isDisabled||index!==selectedIndex?-1:0,isSelected=selectedIdsSet.has(item.id);return React.createElement(EntityListItem,{key:item.id,"aria-label":item["aria-label"]||item.label,size:size,hideBorder:hideBorder||isLastItem,isActive:item.isActive||isKeyboardFocus&&selectedIndex===index,isDisabled:item.isDisabled,isClickable:!!(onClick||selectedIds),description:item.description,onKeyDown:()=>handleOnClick(item),tabIndex:tabIndex,onFocus:()=>{(onClick||isSelectable)&&(setSelectedIndex(index),setIsKeyboardFocus(!0))},onClick:()=>{setIsKeyboardFocus(!1),handleOnClick(item)},checkboxProps:isSelectable&&{name:"list-checkbox",size:"s",onChange:()=>handleOnClick(item),checked:isSelected},renderLabel:()=>item.label,renderLeft:getLeftIconProps?({textSize})=>React.createElement(Icon,{...getLeftIconProps(item),size:textSize}):null,renderRight:({actionSize,textSize})=>renderRightContent?React.createElement(StyledMinHeightCell,{textSize:textSize},renderRightContent({textSize,actionSize,...item})):null})};return isVirtualized&&maxHeight?React.createElement(VirtualizedEntityList,{id:dataE2eTestId,maxHeight:maxHeight,size:size,dataShown:dataShown,selectedIndex:selectedIndex,itemTemplate:renderEntityItem,"data-e2e-test-id":dataE2eTestId}):React.createElement(StyledList,{ref:refList,size:size,"data-e2e-test-id":dataE2eTestId,onBlur:handleBlur,"data-ds-id":"EntityList",role:"list"},dataShown.map((_item,i)=>renderEntityItem(i)))}
|
|
@@ -36,7 +36,16 @@ export type BaseEntityListProps = {
|
|
|
36
36
|
/** Allows selection of items with checkboxes. */
|
|
37
37
|
isSelectable?: boolean;
|
|
38
38
|
onSelectionChange?: (ids: string[]) => void;
|
|
39
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Callback function to handle individual item selection toggle.
|
|
41
|
+
* Fires synchronously when user clicks to toggle selection,
|
|
42
|
+
* BEFORE onSelectionChange is called, allowing you to capture
|
|
43
|
+
* the clicked item and its new state.
|
|
44
|
+
* @param itemId - ID of the clicked item
|
|
45
|
+
* @param isSelected - New selection state AFTER the toggle
|
|
46
|
+
*/
|
|
47
|
+
onSelectionToggle?: (itemId: string, isSelected: boolean) => void;
|
|
48
|
+
/** It's triggered when a whole list item is clicked. */
|
|
40
49
|
onClick?: (props: ListNodeProps) => void;
|
|
41
50
|
/** Function to get properties for the left-side icon (name and color). */
|
|
42
51
|
getLeftIconProps?: (props: ListNode) => Pick<IconProps, "name" | "color">;
|
|
@@ -22,6 +22,15 @@ export type EntityTreeProps = {
|
|
|
22
22
|
* @param ids - Updated selected node ids
|
|
23
23
|
*/
|
|
24
24
|
onSelectionChange?: (ids: NodeID[]) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Callback function to handle individual node selection toggle.
|
|
27
|
+
* Fires synchronously when user clicks to toggle selection,
|
|
28
|
+
* BEFORE onSelectionChange is called, allowing you to capture
|
|
29
|
+
* the clicked node and its new state.
|
|
30
|
+
* @param nodeId - ID of the clicked node
|
|
31
|
+
* @param isSelected - New selection state AFTER the toggle
|
|
32
|
+
*/
|
|
33
|
+
onSelectionToggle?: (nodeId: NodeID, isSelected: boolean) => void;
|
|
25
34
|
/** Expanded node ids */
|
|
26
35
|
expandedIds?: NodeID[];
|
|
27
36
|
/** Callback function to handle node expand/collapse
|
|
@@ -50,5 +59,5 @@ export type EntityTreeProps = {
|
|
|
50
59
|
"data-e2e-test-id"?: string;
|
|
51
60
|
ariaAttributes?: EntityListAriaAttributes;
|
|
52
61
|
} & PartialEntityListItemProps;
|
|
53
|
-
export declare const BaseEntityTree: ({ ariaAttributes, data, selectedIds, onSelectionChange, onNodeClick, expandedIds, onToggle, activeId, chunkSize, filterFn, onTreeChange, hideBorder, size, showItemsCount, showMoreButtonLabel, renderRightContent, "data-e2e-test-id": dataE2eTestId, }: EntityTreeProps) => React.ReactElement;
|
|
62
|
+
export declare const BaseEntityTree: ({ ariaAttributes, data, selectedIds, onSelectionChange, onSelectionToggle, onNodeClick, expandedIds, onToggle, activeId, chunkSize, filterFn, onTreeChange, hideBorder, size, showItemsCount, showMoreButtonLabel, renderRightContent, "data-e2e-test-id": dataE2eTestId, }: EntityTreeProps) => React.ReactElement;
|
|
54
63
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useMemo,useState,useEffect,useCallback}from"react";import{Button}from"../Button/Button";import{Box}from"../Box/Box";import{StyledList,StyledShowMore}from"../EntityList/styled-components";import{EntityTreeItem}from"./EntityTreeItem";import{useKeyboard}from"../../shared/useKeyboard";import{Text}from"../Typography/Text/Text";import{getNodeChildrenMap,getTreeCheckboxState,getVisibleActiveNodeId,getLeafNodeIds,filterTree,mapTree,trimDataByMaxSize}from"./tree";let flattenTree=(data,expandedIds,expadedAll)=>{let flattened=[];return data.forEach(node=>{flattened.push(node.id),(node.children.length>0&&expandedIds[node.id]||expadedAll)&&flattened.push(...flattenTree(node.children,expandedIds,expadedAll))}),flattened},getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&¤tLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=useState(chunkSize),{result,hasMoreNodes}=useMemo(()=>trimDataByMaxSize(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:useCallback(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},Node=({isFirstNode,nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,onNodeClick,hideBorder,size,showItemsCount,renderRightContent,activeId,focusedNodeId,node,level,renderFn,isLastNodeOfList,ariaLabelExpand,ariaLabelCollapse})=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=getLeafNodeIds(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState,handleClick=readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),isFocused=focusedNodeId===node.id,{children,...nodeDataWithoutChildren}=node;return React.createElement(EntityTreeItem,{key:node.id,hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),tabIndex:isFocused||null===focusedNodeId&&isFirstNode?0:-1,size:size,lSpaceStep:level,onKeyDown:()=>handleClick(),description:node.description,renderLabel:({textSize})=>React.createElement(React.Fragment,null,node.label,showItemsCount&&!lastLeaf&&React.createElement(Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:activeId===node.id,isExpanded:isExpanded,isDisabledExpand:expandAll,checkboxProps:!readOnly&&{size:"s",name:node.label,checked:nodeCheckboxState?.[node.id]==="checked",indeterminate:nodeCheckboxState?.[node.id]==="indeterminate",onChange:()=>handleSelectionChange(node.id)},onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},isClickable:readOnly,onClick:()=>{handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren)},renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,"aria-label":node.label,"aria-level":level+1},hasChildren&&React.createElement("ul",{role:"group"},renderFn({data:children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))},makeRenderTreeBranches=renderTreeArgs=>({data,level,renderFn,isParentsLastOfLvl})=>data.map((node,i)=>{let isFirstNode=0===level&&0===i,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl});return React.createElement(Node,{key:node.id,level:level,node:node,isFirstNode:isFirstNode,renderFn:renderFn,isLastNodeOfList:isLastNodeOfList,...renderTreeArgs})});export const BaseEntityTree=({ariaAttributes,data,selectedIds,onSelectionChange,onNodeClick,expandedIds=[],onToggle,activeId,chunkSize=10,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>getNodeChildrenMap(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>getTreeCheckboxState(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=getVisibleActiveNodeId(nodeChildrenMap,nodeExpandedState,activeId),handleExpand=targetId=>{onToggle&&!expandedIds.includes(targetId)&&onToggle(expandedIds.concat([targetId]))},handleCollapse=targetId=>{onToggle&&expandedIds.includes(targetId)&&onToggle(expandedIds.filter(id=>id!==targetId))},dataShown=filterFn?data.map(tree=>filterTree(tree,filterFn)).filter(Boolean):data;useEffect(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>mapTree(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),listRef=React.useRef(null),[focusedNodeId,setFocusedNodeId]=useState(null),[selectedIndex,setSelectedIndex]=useState(0),changeFocusIndex=index=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll),newIndex=index+Math.max(flatTreeIds.indexOf(focusedNodeId),0);newIndex>=0&&newIndex<flatTreeIds.length&&(setSelectedIndex(newIndex),setFocusedNodeId(flatTreeIds[newIndex]))},firstNodeId=useMemo(()=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll);return flatTreeIds.length>0?flatTreeIds[0]:null},[dataShown,nodeExpandedState,expandAll]);useKeyboard({ArrowDown:()=>{changeFocusIndex(1)},ArrowUp:()=>{changeFocusIndex(-1)},ArrowRight:()=>{expandAll||handleExpand(focusedNodeId||firstNodeId)},ArrowLeft:()=>{expandAll||handleCollapse(focusedNodeId||firstNodeId)}},listRef,!0),useEffect(()=>{if(listRef&&listRef.current&&selectedIndex>=0){let buttons=listRef.current.querySelectorAll('div[data-id="list-item"]'),button=buttons[Math.abs(selectedIndex)%buttons.length];button&&button.focus({preventScroll:!0})}},[selectedIndex]),useEffect(()=>{expandAll&&(setFocusedNodeId(null),setSelectedIndex(0))},[expandAll]);let renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=getLeafNodeIds(nodeChildrenMap,targetId);updatedSelectedIds=
|
|
1
|
+
import React,{useMemo,useState,useEffect,useCallback}from"react";import{Button}from"../Button/Button";import{Box}from"../Box/Box";import{StyledList,StyledShowMore}from"../EntityList/styled-components";import{EntityTreeItem}from"./EntityTreeItem";import{useKeyboard}from"../../shared/useKeyboard";import{Text}from"../Typography/Text/Text";import{getNodeChildrenMap,getTreeCheckboxState,getVisibleActiveNodeId,getLeafNodeIds,filterTree,mapTree,trimDataByMaxSize}from"./tree";let flattenTree=(data,expandedIds,expadedAll)=>{let flattened=[];return data.forEach(node=>{flattened.push(node.id),(node.children.length>0&&expandedIds[node.id]||expadedAll)&&flattened.push(...flattenTree(node.children,expandedIds,expadedAll))}),flattened},getLastNodeOfList=({node,data,level,isParentsLastOfLvl})=>{let currentLastNodeOfLvl=node.id===data[data.length-1].id;return 0===level?currentLastNodeOfLvl:isParentsLastOfLvl&¤tLastNodeOfLvl},useTreeTruncation=({chunkSize,data,expandAll,nodeExpandedState})=>{let[maxNodesCount,setMaxNodesCount]=useState(chunkSize),{result,hasMoreNodes}=useMemo(()=>trimDataByMaxSize(data,nodeExpandedState,expandAll,maxNodesCount),[data,nodeExpandedState,expandAll,maxNodesCount]);return{handleIncreaseMaxNodeCount:useCallback(()=>{setMaxNodesCount(prev=>prev+chunkSize)},[chunkSize]),result,hasMoreNodes}},Node=({isFirstNode,nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange,handleToggle,expandAll,onNodeClick,hideBorder,size,showItemsCount,renderRightContent,activeId,focusedNodeId,node,level,renderFn,isLastNodeOfList,ariaLabelExpand,ariaLabelCollapse})=>{let readOnly=null===nodeCheckboxState,hasChildren=node.children.length>0,expandedState=!!expandAll||!!nodeExpandedState[node.id],leafItems=getLeafNodeIds(nodeChildrenMap,node.id),totalItemsCount=leafItems.length,selectedItemsCount=nodeCheckboxState?leafItems.filter(leafId=>"checked"===nodeCheckboxState[leafId]).length:null,countLabel=nodeCheckboxState?`(${selectedItemsCount}/${totalItemsCount})`:`(${totalItemsCount})`,lastLeaf=!hasChildren&&!node.isFiltered,isExpanded=lastLeaf?void 0:expandedState,handleClick=readOnly?()=>handleToggle(node.id):()=>handleSelectionChange(node.id),isFocused=focusedNodeId===node.id,{children,...nodeDataWithoutChildren}=node;return React.createElement(EntityTreeItem,{key:node.id,hideBorder:hideBorder||isLastNodeOfList&&(!isExpanded||node.isFiltered),tabIndex:isFocused||null===focusedNodeId&&isFirstNode?0:-1,size:size,lSpaceStep:level,onKeyDown:()=>handleClick(),description:node.description,renderLabel:({textSize})=>React.createElement(React.Fragment,null,node.label,showItemsCount&&!lastLeaf&&React.createElement(Text,{as:"span",size:textSize,color:"tertiary"}," ",countLabel)),isActive:activeId===node.id,isExpanded:isExpanded,isDisabledExpand:expandAll,checkboxProps:!readOnly&&{size:"s",name:node.label,checked:nodeCheckboxState?.[node.id]==="checked",indeterminate:nodeCheckboxState?.[node.id]==="indeterminate",onChange:()=>handleSelectionChange(node.id)},onExpandClick:e=>{e.stopPropagation(),handleToggle(node.id)},isClickable:readOnly,onClick:()=>{handleToggle(node.id),onNodeClick?.(nodeDataWithoutChildren)},renderRight:renderRightContent?sizeProps=>renderRightContent({...sizeProps,...node}):void 0,ariaLabelExpand:ariaLabelExpand,ariaLabelCollapse:ariaLabelCollapse,"aria-label":node.label,"aria-level":level+1},hasChildren&&React.createElement("ul",{role:"group"},renderFn({data:children,level:level+1,renderFn,isParentsLastOfLvl:isLastNodeOfList})))},makeRenderTreeBranches=renderTreeArgs=>({data,level,renderFn,isParentsLastOfLvl})=>data.map((node,i)=>{let isFirstNode=0===level&&0===i,isLastNodeOfList=getLastNodeOfList({node,data,level,isParentsLastOfLvl});return React.createElement(Node,{key:node.id,level:level,node:node,isFirstNode:isFirstNode,renderFn:renderFn,isLastNodeOfList:isLastNodeOfList,...renderTreeArgs})});export const BaseEntityTree=({ariaAttributes,data,selectedIds,onSelectionChange,onSelectionToggle,onNodeClick,expandedIds=[],onToggle,activeId,chunkSize=10,filterFn,onTreeChange,hideBorder=!1,size="m",showItemsCount=!0,showMoreButtonLabel,renderRightContent,"data-e2e-test-id":dataE2eTestId})=>{let nodeChildrenMap=Object.assign({},...data.map(tree=>getNodeChildrenMap(tree))),nodeCheckboxState=selectedIds?Object.assign({},...data.map(tree=>getTreeCheckboxState(nodeChildrenMap,tree.id,selectedIds))):null,nodeExpandedState=expandedIds.reduce((acc,id)=>(acc[id]=!0,acc),{}),visibleActiveNodeId=getVisibleActiveNodeId(nodeChildrenMap,nodeExpandedState,activeId),handleExpand=targetId=>{onToggle&&!expandedIds.includes(targetId)&&onToggle(expandedIds.concat([targetId]))},handleCollapse=targetId=>{onToggle&&expandedIds.includes(targetId)&&onToggle(expandedIds.filter(id=>id!==targetId))},dataShown=filterFn?data.map(tree=>filterTree(tree,filterFn)).filter(Boolean):data;useEffect(()=>{onTreeChange&&onTreeChange(dataShown.map(tree=>mapTree(tree,node=>({...node,checkedState:!!nodeCheckboxState&&nodeCheckboxState[node.id],isExpanded:!!nodeExpandedState[node.id]}))))},[dataShown,nodeCheckboxState,nodeExpandedState,onTreeChange]);let expandAll=!!filterFn,{hasMoreNodes,handleIncreaseMaxNodeCount,result}=useTreeTruncation({chunkSize,data:dataShown,nodeExpandedState,expandAll}),listRef=React.useRef(null),[focusedNodeId,setFocusedNodeId]=useState(null),[selectedIndex,setSelectedIndex]=useState(0),changeFocusIndex=index=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll),newIndex=index+Math.max(flatTreeIds.indexOf(focusedNodeId),0);newIndex>=0&&newIndex<flatTreeIds.length&&(setSelectedIndex(newIndex),setFocusedNodeId(flatTreeIds[newIndex]))},firstNodeId=useMemo(()=>{let flatTreeIds=flattenTree(dataShown,nodeExpandedState,expandAll);return flatTreeIds.length>0?flatTreeIds[0]:null},[dataShown,nodeExpandedState,expandAll]);useKeyboard({ArrowDown:()=>{changeFocusIndex(1)},ArrowUp:()=>{changeFocusIndex(-1)},ArrowRight:()=>{expandAll||handleExpand(focusedNodeId||firstNodeId)},ArrowLeft:()=>{expandAll||handleCollapse(focusedNodeId||firstNodeId)}},listRef,!0),useEffect(()=>{if(listRef&&listRef.current&&selectedIndex>=0){let buttons=listRef.current.querySelectorAll('div[data-id="list-item"]'),button=buttons[Math.abs(selectedIndex)%buttons.length];button&&button.focus({preventScroll:!0})}},[selectedIndex]),useEffect(()=>{expandAll&&(setFocusedNodeId(null),setSelectedIndex(0))},[expandAll]);let renderTreeBranches=makeRenderTreeBranches({nodeChildrenMap,nodeCheckboxState,nodeExpandedState,handleSelectionChange:targetId=>{if(onSelectionChange){let isSelected,updatedSelectedIds=[];if(0===nodeChildrenMap[targetId].length)isSelected=!selectedIds.includes(targetId),updatedSelectedIds=selectedIds.includes(targetId)?selectedIds.filter(id=>id!==targetId):selectedIds.concat([targetId]);else{let affectedLeafNodeIds=getLeafNodeIds(nodeChildrenMap,targetId),hasUncheckedChildren=affectedLeafNodeIds.some(leafId=>!selectedIds.includes(leafId));updatedSelectedIds=hasUncheckedChildren?selectedIds.concat(affectedLeafNodeIds.filter(id=>!selectedIds.includes(id))):selectedIds.filter(id=>!affectedLeafNodeIds.includes(id)),isSelected=hasUncheckedChildren}onSelectionToggle?.(targetId,isSelected),onSelectionChange(updatedSelectedIds)}},handleToggle:targetId=>{expandedIds.includes(targetId)?handleCollapse(targetId):handleExpand(targetId)},onNodeClick:node=>{setFocusedNodeId(node.id),onNodeClick?.(node)},expandAll,hideBorder,size,showItemsCount,renderRightContent,activeId:visibleActiveNodeId,focusedNodeId,ariaLabelExpand:ariaAttributes?.ariaLabelExpand,ariaLabelCollapse:ariaAttributes?.ariaLabelCollapse});return React.createElement("div",null,React.createElement(StyledList,{ref:listRef,role:"tree","aria-multiselectable":!!nodeCheckboxState||void 0,"data-e2e-test-id":dataE2eTestId,"data-ds-id":"EntityTree",size:size},renderTreeBranches({data:result,level:0,renderFn:renderTreeBranches})),hasMoreNodes&&React.createElement(StyledShowMore,null,React.createElement(Box,{alignText:"center",space:"xs"},React.createElement(Button,{fullWidth:!0,size:"s",variant:"tertiary",onClick:handleIncreaseMaxNodeCount},showMoreButtonLabel))))};
|