@sis-cc/dotstatsuite-visions 12.55.0 → 13.0.0

package/dist/chunks/withSpotlight-CYQVWD78.js

@@ -0,0 +1,903 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useEffect, createElement } from 'react';
+import * as R from 'ramda';
+import _AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import _VirtualizedList from 'react-virtualized/dist/commonjs/List';
+import { CheckBoxOutlined, CheckBoxOutlineBlankOutlined, ExpandLess, ExpandMore } from '@mui/icons-material';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
+import cx from 'classnames';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { u as useKeyboardEscapeHandler } from './useKeybordEscapeHandler-DRsOrnwc.js';
+import { useTheme } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { g as getIsRtl, s as searchTerm, p as prepareTerm } from './utils-kslX1mzh.js';
+
+const getHierarchicalId = item => R.prop('hierarchicalId', item) || R.prop('id', item);
+
+const getDescendants = (id, groupedItems) => {
+  const reccurse = _id => {
+    const children = R.propOr([], _id, groupedItems);
+    return R.pipe(
+      R.map(item => {
+        const __id = getHierarchicalId(item);
+        const descendants = reccurse(__id);
+        return R.prepend(item, descendants);
+      }),
+      R.unnest,
+    )(children);
+  };
+
+  return reccurse(id);
+};
+
+const isItemSelected = selectIds => item => {
+  if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
+    return !item.isSelected;
+  }
+  return !!item.isSelected;
+};
+
+const getDepth = indexedItems => item => {
+  if (R.isNil(item.parentId)) {
+    return 0;
+  }
+  const parent = R.prop(item.parentId, indexedItems);
+  if (R.isNil(parent)) {
+    return 0;
+  }
+  return getDepth(indexedItems)(parent) + 1;
+};
+
+const getDuplicates = (items, indexedItems) => {
+  const itemsIds = R.pluck('id', items);
+  const grouped = R.pipe(R.values, R.groupBy(R.prop('id')))(indexedItems);
+  return R.pipe(R.props(itemsIds), R.unnest)(grouped);
+};
+
+const getDeprecatedIds = (ids, items, selectedIds) => {
+  const { groupedItemsByParentId, indexedItemsById } = items;
+  let _ids = ids;
+  const reccurse = scopeIds => {
+    const scopeItems = R.props(scopeIds, indexedItemsById);
+    const grouped = R.groupBy(R.propOr('#ROOT', 'parentId'), scopeItems);
+    const refined = R.omit(R.append('#ROOT', _ids), grouped);
+
+    const deprecatedParents = R.reduce(
+      (acc, id) => {
+        const _item = R.prop(id, indexedItemsById);
+        if (R.isNil(_item)) {
+          return acc;
+        }
+        const _itemsIds = R.has('hierarchicalId', _item)
+          ? R.pipe(
+              R.values,
+              R.filter(R.propEq('id', _item.id)),
+              R.map(getHierarchicalId),
+            )(indexedItemsById)
+          : [id];
+
+        const children = R.pipe(R.props(_itemsIds), R.unnest)(groupedItemsByParentId);
+        const selectedChild = R.find(child => {
+          return !R.includes(getHierarchicalId(child), _ids) && isItemSelected(selectedIds)(child);
+        }, children);
+        if (!isItemSelected(selectedIds)(_item) && R.isNil(selectedChild)) {
+          return R.concat(reccurse([id]), acc);
+        }
+        if (!R.propOr(false, 'isGreyed', _item)) {
+          return acc;
+        }
+        if (R.isNil(selectedChild)) {
+          return R.concat(acc, _itemsIds);
+        }
+        return acc;
+      },
+      [],
+      R.keys(refined),
+    );
+
+    if (!R.isEmpty(deprecatedParents)) {
+      _ids = R.concat(_ids, deprecatedParents);
+      const deprecatedAncestors = reccurse(deprecatedParents);
+      return R.concat(deprecatedParents, deprecatedAncestors);
+    }
+
+    return deprecatedParents;
+  };
+
+  return reccurse(ids);
+};
+
+// evolved disableAccessor with hierarchical context and selection mode
+const getEvolvedDisableAccessor =
+  (
+    groupedItems,
+    disableAccessor = R.always(false),
+    getIsChildInSelectionScope = R.always(true), //combine selection mode + spotlight
+  ) =>
+  (item, selectedIds) => {
+    const hierarchicalFinder = validator => parentId =>
+      R.find(
+        child => {
+          if (validator(child)) return true;
+          return !R.isNil(hierarchicalFinder(validator)(getHierarchicalId(child)));
+        },
+        R.propOr([], parentId, groupedItems),
+      );
+    // selected forcedItem isn't deselectable unless all selected descendants are in deselection scope
+    if (isItemSelected(selectedIds)(item) && R.propOr(false, 'isForced', item)) {
+      const outOfScopeSelectedDescendant = hierarchicalFinder(
+        child => isItemSelected(selectedIds)(child) && !getIsChildInSelectionScope(child, item),
+      )(getHierarchicalId(item));
+      return !R.isNil(outOfScopeSelectedDescendant);
+    }
+    // non selected invalid item is disabled unless some (valid) children are selected or selectable in scope
+    if (!isItemSelected(selectedIds)(item) && disableAccessor(item)) {
+      const validDescendant = hierarchicalFinder(
+        child =>
+          isItemSelected(selectedIds)(child) ||
+          (getIsChildInSelectionScope(child, item) && !disableAccessor(child)),
+      )(getHierarchicalId(item));
+      return R.isNil(validDescendant);
+    }
+    return false;
+  };
+
+const getScopeGetters = {
+  single: () => item => [item],
+  children: items => item => {
+    const childItems = R.propOr([], getHierarchicalId(item), items.groupedItemsByParentId);
+    return R.reject(R.prop('isDisabled'), R.prepend(item, childItems));
+  },
+  branch: items => item => {
+    const descendants = getDescendants(getHierarchicalId(item), items.groupedItemsByParentId);
+    const res = R.reject(R.prop('isDisabled'), R.prepend(item, descendants));
+    return res;
+  },
+  level: items => item => {
+    const indexed = items.indexedItemsById;
+    const depth = getDepth(indexed)(item);
+    return R.filter(
+      it => !R.prop('isDisabled', it) && getDepth(indexed)(it) === depth,
+      R.values(indexed),
+    );
+  },
+};
+
+const getImposedItems = (selectIds, indexedItems) => selectedItems =>
+  R.reduce(
+    (acc, item) => {
+      const isSelected = isItemSelected(selectIds)(item);
+      if (!isSelected) {
+        const imposedIds = R.pipe(
+          R.filter(i => i.id === item.id),
+          R.map(R.propOr([], 'imposedIds')),
+          R.unnest,
+        )(R.values(indexedItems));
+        const imposedItems = R.props(imposedIds, indexedItems);
+        return R.concat(acc, R.append(item, imposedItems));
+      }
+      return R.append(item, acc);
+    },
+    [],
+    selectedItems,
+  );
+
+const Item = ({
+  classes,
+  id,
+  label,
+  description = "",
+  isSelected,
+  isDisabled,
+  isGreyed,
+  changeList,
+  ariaLabel,
+  NavigateIcon,
+  hasChild,
+  hasChildrenOnLevel,
+  count,
+  svgPath,
+  style,
+  isRtl,
+  accessibility,
+  HTMLRenderer,
+  hierarchicalId,
+  labels,
+  depth = 0,
+  eventsListeners,
+  expanded,
+  highlightedLabel
+}) => {
+  const { open, setOpen } = useKeyboardEscapeHandler();
+  const padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
+  const formattedLabel = highlightedLabel ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: highlightedLabel } }) : label;
+  return /* @__PURE__ */ jsxs(
+    ListItem,
+    {
+      dense: true,
+      disableGutters: true,
+      classes: { disabled: classes.disabled },
+      className: cx(classes.listItemContainer, classes.disableSecondaryAction),
+      tabIndex: -1,
+      style: {
+        ...style,
+        flexDirection: isRtl ? "row-reverse" : "row",
+        [`${isRtl ? "paddingRight" : "paddingLeft"}`]: `${padding}px`
+      },
+      role: "listitem",
+      children: [
+        R.and(NavigateIcon, hasChild) && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            disableRipple: true,
+            disableFocusRipple: true,
+            className: classes.arrow,
+            "aria-label": ariaLabel,
+            tabIndex: 0,
+            size: "small",
+            color: "primary",
+            onClick: () => changeList(hierarchicalId || id),
+            "aria-expanded": expanded,
+            children: /* @__PURE__ */ jsx(NavigateIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            "data-testid": `value_${id}`,
+            tabIndex: 0,
+            role: "checkbox",
+            "aria-label": isGreyed ? `${R.propOr("", "disableItemLabel")(labels)} ${label}` : label,
+            "aria-checked": isSelected,
+            "aria-disabled": isDisabled,
+            primaryTypographyProps: { noWrap: true, color: "inherit" },
+            secondaryTypographyProps: { color: "inherit" },
+            classes: { root: classes.listItem },
+            className: cx({
+              [classes.accessibilityItemHover]: accessibility,
+              [classes.listItemSelected]: isSelected,
+              [classes.listItemHover]: !isDisabled
+            }),
+            onKeyDown: isDisabled ? null : eventsListeners.onKeyDown,
+            onClick: isDisabled ? null : eventsListeners.onClick,
+            onMouseDown: isDisabled || open ? null : eventsListeners.onMouseDown,
+            onMouseEnter: isDisabled || open ? null : eventsListeners.onMouseEnter,
+            title: isGreyed ? `${R.propOr("", "disableItemLabel")(labels)} ${label}` : label,
+            style: {
+              outline: accessibility ? void 0 : "none"
+            },
+            primary: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx(classes.labelContainer, {
+                  [classes.rtlLabelContainer]: isRtl
+                }),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SvgIcon,
+                    {
+                      color: "primary",
+                      className: cx(classes.labelIcon, { [classes.disabledLabel]: isDisabled }),
+                      children: isSelected ? /* @__PURE__ */ jsx(CheckBoxOutlined, {}) : /* @__PURE__ */ jsx(CheckBoxOutlineBlankOutlined, {})
+                    }
+                  ),
+                  svgPath && /* @__PURE__ */ jsx(
+                    SvgIcon,
+                    {
+                      color: "primary",
+                      className: cx(classes.labelIcon, {
+                        [classes.disabledLabel]: isDisabled
+                      }),
+                      children: /* @__PURE__ */ jsx("path", { d: svgPath })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: R.or(R.isNil(HTMLRenderer), R.isEmpty(description)) ? description : /* @__PURE__ */ jsx(HTMLRenderer, { html: description, onClick: (e) => e.stopPropagation() }),
+                      enterDelay: 400,
+                      enterNextDelay: 400,
+                      tabIndex: description ? 0 : -1,
+                      "aria-label": description,
+                      "aria-hidden": false,
+                      placement: "top",
+                      disableInteractive: Boolean(HTMLRenderer) === false,
+                      onOpen: () => setOpen(true),
+                      onClose: () => setOpen(false),
+                      disableHoverListener: R.isEmpty(description),
+                      open,
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          color: "inherit",
+                          variant: "body2",
+                          className: cx(classes.label, {
+                            [classes.disabledLabel]: isGreyed,
+                            [classes.tooltipNotice]: !R.isEmpty(description)
+                          }),
+                          children: formattedLabel
+                        }
+                      )
+                    }
+                  ),
+                  R.not(R.isNil(count)) && /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: classes.count, children: [
+                    "(",
+                    count,
+                    ")"
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+const height = 30;
+
+const useStyles = makeStyles(theme => ({
+  middle: {
+    margin: 'auto 0',
+  },
+  selectionContainer: {
+    margin: theme.spacing(1),
+  },
+  containerHeader: {
+    borderBottom: `6px solid ${theme.palette.grey[100]}`,
+    marginBottom: '1px',
+  },
+  listItemContainer: {
+    height,
+    paddingRight: 36,
+    outline: 'none',
+    marginBottom: '1px',
+  },
+  listItem: {
+    height,
+    display: 'flex',
+    flexDirection: 'column-reverse',
+    justifyContent: 'center',
+    margin: 0,
+    userSelect: 'none',
+    cursor: 'pointer',
+    color: theme.palette.primary.main,
+  },
+  listItemHover: {
+    '&:hover': {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  accessibilityItemHover: {
+    '&:focus': {
+      backgroundColor: theme.palette.action.selected,
+    },
+  },
+  listItemSelected: {
+    backgroundColor: theme.palette.action.hover,
+    '&:hover': {
+      backgroundColor: theme.palette.action.selected,
+    },
+  },
+  disableSecondaryAction: {
+    paddingRight: '0 !important',
+  },
+  spaceHeader: {
+    margin: theme.spacing(1, 0),
+    lineHeight: 1,
+  },
+  spotlightContainer: {
+    display: 'flex',
+  },
+  labelContainer: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'baseline',
+  },
+  rtlLabelContainer: {
+    flexDirection: 'row-reverse',
+  },
+  count: {
+    color: theme.palette.grey[800],
+    margin: theme.spacing(0, 0.25),
+    fontSize: 11,
+  },
+  path: {
+    color: theme.palette.grey[600],
+    marginLeft: theme.spacing(1),
+    fontSize: 11,
+  },
+  label: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginLeft: theme.spacing(1),
+  },
+  labelIcon: {
+    fontSize: 16,
+    marginLeft: theme.spacing(0.5),
+    alignSelf: 'center',
+  },
+  disabled: {
+    pointerEvents: 'initial !important',
+  },
+  disabledLabel: {
+    color: theme.palette.grey[700],
+  },
+  ellipsis: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  svg: {
+    verticalAlign: 'bottom',
+    fontSize: '1.25rem',
+  },
+  arrowHeader: {
+    color: theme.palette.grey[800],
+  },
+  headerItem: {
+    display: 'inline',
+    cursor: 'pointer',
+    userSelect: 'none',
+    height: 'unset',
+    minHeight: 25,
+    padding: theme.spacing(0.25, 0.5),
+    borderBottom: 'dotted 1px',
+    verticalAlign: 'text-bottom',
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  containerArrow: {
+    paddingLeft: 4,
+    borderLeft: `1px solid ${theme.palette.grey[800]}`,
+    color: theme.palette.primary.main,
+    height: '100%',
+    display: 'flex',
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+    },
+  },
+  arrow: {
+    marginTop: 2,
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+  },
+  bulkSelectionIcon: {
+    minWidth: 50,
+  },
+  tooltipNotice: {
+    textDecoration: 'underline dotted',
+  },
+}));
+
+const AutoSizer = _AutoSizer.default || _AutoSizer;
+const VirtualizedList = _VirtualizedList.default || _VirtualizedList;
+const singleScopeGetter = () => (item) => [item];
+const getDisplayedIds = (items, grouped, expanded) => R.pipe(
+  R.map((item) => {
+    const hierarchicalId = getHierarchicalId(item);
+    if (R.has(hierarchicalId, grouped) && R.has(hierarchicalId, expanded)) {
+      const children = getDisplayedIds(R.prop(hierarchicalId, grouped), grouped, expanded);
+      return R.prepend(hierarchicalId, children);
+    }
+    return [hierarchicalId];
+  }),
+  R.unnest
+)(items);
+const getHasChildrenOnLevel = (groupedItems) => (item) => {
+  if (R.has(getHierarchicalId(item), groupedItems)) {
+    return true;
+  }
+  return R.pipe(
+    R.prop(R.propOr("#ROOT", "parentId", item)),
+    R.find((it) => R.has(getHierarchicalId(it), groupedItems)),
+    R.complement(R.isNil)
+  )(groupedItems);
+};
+const VirtualizedTree = (props) => {
+  const {
+    accessibility,
+    changeSelection,
+    HTMLRenderer,
+    items,
+    labelRenderer,
+    labels,
+    disableAccessor = R.always(false),
+    isGreyed = R.always(false),
+    expandedIds,
+    expand,
+    collapse,
+    maxTreeHeight = 250,
+    scopeGetter = singleScopeGetter,
+    treeHeight = 0,
+    simpleSelectionMode = false
+  } = props;
+  const theme = useTheme();
+  const [scrollTop, setScrollTop] = useState(void 0);
+  const [shiftIndexes, setShiftIndexes] = useState([]);
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const [lastItemId, setLastItemId] = useState(null);
+  const [selectIds, setSelectIds] = useState({});
+  const { indexedItemsById, groupedItemsByParentId } = useMemo(() => {
+    const refinedItems = R.map(
+      (item) => ({
+        ...item,
+        isSelected: isItemSelected(selectIds)(item),
+        isGreyed: R.is(Function, isGreyed) ? isGreyed(item) : false,
+        isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item, selectIds) : false
+      }),
+      items
+    );
+    const indexedItemsById2 = R.indexBy(getHierarchicalId, refinedItems);
+    const groupedItemsByParentId2 = R.groupBy(R.propOr("#ROOT", "parentId"), refinedItems);
+    return { indexedItemsById: indexedItemsById2, groupedItemsByParentId: groupedItemsByParentId2 };
+  }, [items, selectIds]);
+  const list = useMemo(
+    () => getDisplayedIds(
+      R.propOr([], "#ROOT", groupedItemsByParentId),
+      groupedItemsByParentId,
+      expandedIds
+    ),
+    [items, expandedIds]
+  );
+  const getItemScope = scopeGetter({ indexedItemsById, groupedItemsByParentId });
+  const isItemSelected$1 = isItemSelected(selectIds);
+  const multiSelect = (id) => {
+    const item = R.prop(id, indexedItemsById);
+    let ids = R.pipe(
+      getItemScope,
+      getImposedItems(selectIds, indexedItemsById),
+      R.filter((v) => v.isSelected === item.isSelected),
+      (items2) => getDuplicates(items2, indexedItemsById),
+      R.map(getHierarchicalId)
+    )(item);
+    if (isItemSelected$1(item)) {
+      const deprecatedIds = getDeprecatedIds(
+        ids,
+        { indexedItemsById, groupedItemsByParentId },
+        selectIds
+      );
+      ids = R.concat(ids, deprecatedIds);
+    }
+    if (R.has(id, selectIds)) {
+      setSelectIds(R.omit(ids, selectIds));
+    } else {
+      setSelectIds({ ...selectIds, ...R.indexBy(R.identity, ids) });
+      setLastItemId(id);
+    }
+  };
+  const shiftSelect = (index) => {
+    const selectRange = (indexes, isSelected) => {
+      const _selectIds = R.pipe(
+        R.slice(Math.min(...indexes), Math.max(...indexes) + 1),
+        (ids) => R.props(ids, indexedItemsById),
+        R.map(getItemScope),
+        R.unnest,
+        R.filter((v) => v.isSelected === isSelected),
+        R.map(getHierarchicalId),
+        R.indexBy(R.identity)
+      )(list);
+      setShiftIndexes(indexes);
+      setSelectIds(_selectIds);
+    };
+    if (R.isEmpty(shiftIndexes)) {
+      const item = R.pipe(R.nth(index), (id) => R.prop(id, indexedItemsById))(list);
+      if (!R.isNil(lastItemId)) {
+        const lastItem = R.prop(lastItemId, indexedItemsById);
+        const lastItemIndex = R.findIndex((v) => v === lastItem.id, list);
+        if (lastItem.isSelected !== item.isSelected && lastItemIndex !== -1) {
+          selectRange([lastItemIndex, index], item.isSelected);
+          return;
+        }
+      }
+      const ids = R.pipe(
+        getItemScope,
+        R.filter((v) => v.isSelected === item.isSelected),
+        R.map(getHierarchicalId),
+        R.indexBy(R.identity)
+      )(item);
+      setShiftIndexes(R.append(index, shiftIndexes));
+      setSelectIds(ids);
+    } else if (R.length(shiftIndexes) === 1 && index === R.head(shiftIndexes)) {
+      setShiftIndexes([]);
+      setSelectIds({});
+    } else {
+      const firstItem = R.pipe(R.nth(R.head(shiftIndexes)), (id) => R.prop(id, indexedItemsById))(
+        list
+      );
+      selectRange([R.head(shiftIndexes), index], firstItem.isSelected);
+    }
+  };
+  const apply = () => {
+    if (!R.isEmpty(selectIds)) {
+      const ids = R.values(selectIds);
+      const selection = R.pipe(R.props(ids), R.pluck("id"), R.uniq)(indexedItemsById);
+      changeSelection(selection);
+      setShiftIndexes([]);
+      setSelectIds({});
+      setIsMouseDown(false);
+    }
+  };
+  const onMouseUp = (e) => {
+    if (!isMouseDown) {
+      return;
+    }
+    e.preventDefault();
+    apply();
+    setIsMouseDown(false);
+  };
+  const onMouseLeave = () => {
+    if (isMouseDown) {
+      apply();
+    }
+  };
+  const onKeyUp = (e) => {
+    e.preventDefault();
+    if (e.key === "Shift" && !R.isEmpty(shiftIndexes)) {
+      apply();
+    } else if (e.key === "Control" && !R.isEmpty(selectIds)) {
+      apply();
+    } else if (e.key === "Enter" && !R.isNil(lastItemId)) {
+      apply();
+    }
+  };
+  const itemEventsListeners = (id, index) => ({
+    onMouseDown: (e) => {
+      if (!simpleSelectionMode && (e.ctrlKey || e.shiftKey)) {
+        return;
+      }
+      setIsMouseDown(true);
+      multiSelect(id);
+    },
+    onMouseEnter: (e) => {
+      e.preventDefault();
+      if (!isMouseDown || simpleSelectionMode || e.ctrlKey || e.shiftKey) {
+        return;
+      }
+      multiSelect(id);
+      setLastItemId(id);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter") {
+        multiSelect(id);
+        setLastItemId(id);
+      }
+    },
+    onClick: (e) => {
+      e.preventDefault();
+      if (e.ctrlKey && !simpleSelectionMode) {
+        multiSelect(id);
+      } else if (e.shiftKey && !simpleSelectionMode) {
+        shiftSelect(index);
+      } else {
+        setIsMouseDown(false);
+        setLastItemId(id);
+      }
+    }
+  });
+  const ref = useRef();
+  const classes = useStyles();
+  useEffect(() => {
+    const current = ref.current;
+    const handler = (event) => {
+      if (R.or(event.ctrlKey, event.shiftKey)) {
+        const scrollEl = R.path(["children", 0, "children", 0], current);
+        const isBottom = R.gte(
+          R.add(R.prop("scrollTop")(scrollEl), R.prop("clientHeight")(scrollEl)),
+          R.prop("scrollHeight")(scrollEl)
+        );
+        const nextpos = (scrollTop || scrollEl.scrollTop) + event.deltaY / 2;
+        if (R.or(event.deltaY < 0, event.deltaY > 0 && R.not(isBottom))) {
+          setScrollTop(nextpos < 0 ? 0 : nextpos);
+        }
+        event.preventDefault();
+      }
+      if (R.not(event.ctrlKey) && R.not(event.shiftKey)) {
+        setScrollTop(void 0);
+      }
+    };
+    if (scrollTop === 0) {
+      setScrollTop(void 0);
+    }
+    if (R.isNil(current)) return;
+    current.addEventListener("wheel", handler, { passive: false });
+    return () => {
+      current.removeEventListener("wheel", handler, { passive: false });
+    };
+  }, [scrollTop]);
+  const maxHeight = treeHeight === 0 ? R.pipe(
+    R.length,
+    R.multiply(height),
+    R.ifElse(R.gt(maxTreeHeight), R.add(10), R.always(maxTreeHeight))
+  )(list) : treeHeight;
+  if (R.isEmpty(list)) {
+    return null;
+  }
+  const isRtl = getIsRtl(theme);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height: maxHeight },
+      onKeyUp,
+      onMouseUp,
+      onMouseLeave,
+      ref,
+      role: "presentation",
+      children: /* @__PURE__ */ jsx(AutoSizer, { disableWidth: true, children: ({ height: height$1 }) => /* @__PURE__ */ jsx(
+        VirtualizedList,
+        {
+          containerRole: "list",
+          role: "presentation",
+          overscan: 10,
+          tabIndex: -1,
+          containerStyle: { width: "100%", maxWidth: "100%" },
+          height: height$1 + 2,
+          width: 1,
+          style: { width: "100%" },
+          scrollTop,
+          rowCount: R.length(list),
+          rowHeight: R.add(1)(height),
+          rowRenderer: ({ index, style }) => {
+            const itemId = R.nth(index, list);
+            const item = R.prop(itemId, indexedItemsById);
+            return /* @__PURE__ */ createElement(
+              Item,
+              {
+                ...item,
+                id: getHierarchicalId(item),
+                label: labelRenderer(item),
+                key: getHierarchicalId(item),
+                depth: getDepth(indexedItemsById)(item),
+                hasChild: R.has(itemId, groupedItemsByParentId),
+                hasChildrenOnLevel: getHasChildrenOnLevel(groupedItemsByParentId)(item),
+                changeList: R.has(itemId, expandedIds) ? () => collapse(getHierarchicalId(item)) : () => expand(getHierarchicalId(item)),
+                NavigateIcon: R.has(itemId, expandedIds) ? ExpandLess : ExpandMore,
+                expanded: R.has(itemId, expandedIds),
+                isRtl,
+                eventsListeners: itemEventsListeners(getHierarchicalId(item), index),
+                HTMLRenderer,
+                classes,
+                labels,
+                style,
+                accessibility,
+                ariaLabel: R.prop("navigateNext")(labels),
+                theme
+              }
+            );
+          }
+        }
+      ) })
+    }
+  );
+};
+
+const withExpansionTree = (Component) => ({ items, defaultExpandedIds, ...rest }) => {
+  const [expandedIds, setExpandedIds] = useState({});
+  const [itemsIds, setItemsIds] = useState([]);
+  useEffect(() => {
+    const ids = R.map(getHierarchicalId, items);
+    if (!R.isEmpty(R.symmetricDifference(ids, itemsIds))) setItemsIds(ids);
+  }, [items]);
+  useEffect(() => {
+    setExpandedIds(R.indexBy(R.identity, itemsIds));
+  }, [itemsIds]);
+  useEffect(() => {
+    if (!R.isNil(defaultExpandedIds)) {
+      setExpandedIds(defaultExpandedIds);
+    }
+  }, [defaultExpandedIds]);
+  const expand = (id) => {
+    setExpandedIds(R.assoc(id, id, expandedIds));
+  };
+  const collapse = (id) => {
+    setExpandedIds(R.dissoc(id, expandedIds));
+  };
+  const expandAll = () => {
+    setExpandedIds(R.indexBy(R.identity, itemsIds));
+  };
+  const collapseAll = () => {
+    setExpandedIds({});
+  };
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...rest,
+      items,
+      expand,
+      collapse,
+      expandAll,
+      collapseAll,
+      expandedIds
+    }
+  );
+};
+
+const spotlightFilter = (term, labelRenderer = R.prop("label"), displayChildren = false) => (items) => {
+  if (R.isEmpty(term) || R.isNil(term)) {
+    return items;
+  }
+  const groupedItemsByParentId = R.groupBy(R.propOr("#ROOT", "parentId"), items);
+  const findParents = (item, acc = []) => {
+    const parentId = R.prop("parentId", item);
+    if (parentId && parentId !== "#ROOT") {
+      const parent = R.find(
+        R.either(R.propEq("id", parentId), R.propEq("hierarchicalId", parentId)),
+        items
+      );
+      if (parent) {
+        return findParents(parent, [parent, ...acc]);
+      }
+    }
+    return acc;
+  };
+  const highlightLabel = (label) => {
+    const i = prepareTerm(label).indexOf(prepareTerm(term));
+    const l = R.length(term);
+    const pre = label.slice(0, i);
+    const match = label.slice(i, i + l);
+    const post = label.slice(i + l);
+    return `${pre}<span style=background-color:yellow;border-bottom:2px solid #8CC841>${match}</span>${post}`;
+  };
+  const recurse = (item) => {
+    const label = labelRenderer(item);
+    const isValidItem = searchTerm(term);
+    let result = [];
+    if (isValidItem(label)) {
+      const highlightedLabel = highlightLabel(label);
+      const parents = findParents(item);
+      result = [...parents, { ...item, highlightedLabel }];
+      if (displayChildren) {
+        const children = getDescendants(getHierarchicalId(item), groupedItemsByParentId);
+        const highlightedChildren = R.map((child) => {
+          const labelChild = labelRenderer(child);
+          return isValidItem(labelChild) ? { ...child, highlightedLabel: highlightLabel(labelChild) } : child;
+        })(children);
+        return [...parents, { ...item, highlightedLabel }, ...highlightedChildren];
+      }
+    }
+    if (R.has(getHierarchicalId(item), groupedItemsByParentId)) {
+      const childItems = groupedItemsByParentId[getHierarchicalId(item)] || [];
+      const matchingChildren = R.chain(recurse, childItems);
+      return R.uniq([...result, ...matchingChildren]);
+    }
+    return result;
+  };
+  return R.uniqBy(getHierarchicalId)(R.chain(recurse, groupedItemsByParentId["#ROOT"] || []));
+};
+const withSpotlight = (Component) => ({ items, defaultSpotlight, labelRenderer, displayChildren, ...rest }) => {
+  const [{ term }, setSpotlight] = useState({ term: "" });
+  useEffect(() => {
+    if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
+      setSpotlight(defaultSpotlight);
+    }
+  }, [defaultSpotlight]);
+  const filteredItems = useMemo(
+    () => spotlightFilter(term, labelRenderer, displayChildren)(items),
+    [term, items, labelRenderer]
+  );
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...rest,
+      allItems: items,
+      items: filteredItems,
+      labelRenderer,
+      hasSpotlight: R.length(items) >= 8,
+      spotlight: { term },
+      setSpotlight
+    }
+  );
+};
+
+export { VirtualizedTree as V, withExpansionTree as a, getEvolvedDisableAccessor as b, getScopeGetters as c, getHierarchicalId as g, useStyles as u, withSpotlight as w };
+//# sourceMappingURL=withSpotlight-CYQVWD78.js.map