@sis-cc/dotstatsuite-visions 12.56.0 → 13.0.0

package/dist/DynamicDrawer/DynamicDrawer.js

@@ -0,0 +1,875 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useMemo, useEffect } from 'react';
+import * as R from 'ramda';
+import cx from 'classnames';
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+import { w as withSpotlight, a as withExpansionTree, g as getHierarchicalId, b as getEvolvedDisableAccessor, c as getScopeGetters, V as VirtualizedTree } from '../chunks/withSpotlight-CYQVWD78.js';
+import Button$1 from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { Button } from '../Button/Button.js';
+import { Spotlight } from '../Spotlight/Spotlight.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import makeStyles from '@mui/styles/makeStyles';
+import { EmojiObjects, ArrowBack, Close } from '@mui/icons-material';
+import Divider from '@mui/material/Divider';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import { Tag } from '../Tag/Tag.js';
+
+const singleImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAACJCAIAAABCeJqWAAAEMUlEQVR4Ae3dPY+bMBgH8Fvybe5bZMoXytItn6AbU5lyE0gdMoWJqYluyGZ1yUaHm05yOxytepeqQrIgckj8+MFv+VsMQGxjfn7BcAn3MFsUWFgEHmaLYr6sV2uBhSwwX9azRfGfcrUWJwQLgdVagNLCr5cUlD0Mu1VQ2vn1UoOyh2G3Cko7v15qUPYw7FZBaefXSw3KHobdKijt/HqpQdnDsFsFpZ1fLzUoexh2q1aU7y/PSS4fr98JqnTKj18/3taPSS5/vn0CJU/VgpLH8W39CEpQhjfgolWiVaJVYjJ0NmHCvFIzLGCs1KDQ7iCcU/7++ff4Ncnl/eX5rPPesknv4LfkfldxQMlW3aAEJZsAW0auW6WUUgQfmqYhALumFEJ8Dj5UVQVKnlqKjDLP821goSzLrioio6QVl9Dvbk/SNA0ob+caiwnKMR2jz0BpxDUWOVbKLMvy8EKUYyXPtGWaXGiXREzRNbURB2XbtjL40Lbt2Jh64TPXrfJCMVLYDUq2WgQlKNkE2DIKulUej8fKRxCC8svZoCl3u51mqjL9rjgmQ0bdCZRGXGORFeVms3HwV4y6rrsWn3Kr3O12Y+RMn0X2OMPorFWrBKWRmyYyKDUotF2gpLlpUinK6ec/gyOkfNkZnOj0G6BkM06QUtPnA94V9I1jwG6aooFSg0LbBUqamyYVKDUotF1BUwohSh+Bdp8aNCWm6LT+oUkFSg0KbZei3G63zfThcDh0s/wEp+iKkjZ4mdYfnleail2MD8qLNKYf3AVlVVXTD5XNXYyVbM98bsso5cvObQJssRKkFEIUPsLhcDAdZ0+nU9B3O4Tz8ZgElGz4oAQlmwBbRmiV0VLiR8xsVQdKUF4XcD1WqlZJu6O4fkIWMSJ7nAFKi7oeJgXl0MNiC5QWeMOkirIsSwdfLzc6xH6/7x4u0cZxb5cdtidiE2QESjbUOCibpgnslTia4iT4a7LhMBv6luuxMnQPi/KB0gJvmBSUQw+LLSvK4F+CQSyg63dnSCnZZh+BZeR6MgTKs8GA3sEVZZZlX5IIWZZ13cNbqyyK4qx+It309rxStUpQdk2HoYODEpTn45D/Dp5lmY832PAfc7PZeL7sBDYpZCiOtys4Q9kDy8I1Zdu2Ro/7I4ocx9v6z4f6hLbpk6GEEHhOBZQ8jvgCNZujB0r8kxi22lNfKQhs/jMojuvJEE0XlDQ3TSpFiX8So9Ex2qUoaZ3I6Fimkb09zjAtaBcflDQ3TSpQalBou0BJc9OkUpR5nvt4783YMZ+enro5EW0cd33jqCgHE7nANkDJViFxUEopHby6wfIQUkrN2HRtl+sOfq08EX8OSrbKAyUo2QTYMkKrBCWbAFtGaJWgZBNgywitEpRsAmwZoVWCkk2ALSO0ygko58t6tRZYyALzZT1bFA+zRYGFReAfqhQA2zKS9CAAAAAASUVORK5CYII=";
+
+const childrenImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAACJCAIAAABCeJqWAAAEEElEQVR4Ae3dv2rbQBwH8Cx+m7yFJz9H3sFLN+8t3TTVELAnGTp4srKoSw0JGDIcXQwJqIPJ0HCtS9zQRKUYxCGO6PS7n+5O5++hQVLuTvLnfvdHjuOcDUYpNhaBs8EoHY7zyUxgIwsMx/lglP6nnMxEiWQhMJkJUFr4KUVBqWDY7YLSzk8pDUoFw24XlHZ+SmlQKhh2u6C081NKg1LBsNsFpZ2fUhqUCobdLijt/JTSoFQw7HatKF9211Furz++EVTplK+/vj/NzqPcnr++AyVP04KSx/Fpdg5KUIY34CIqEZWISiyGagsmrCs1wwLGSg0K7QnCOeWfn3+3n6PcXnbXtc5rckjv4Ca1n1QeULI1NyhBySbAVpHrqLzb7S+v7gLfvtw+EIBdU15mdywfY+y0kosPN6Dk+cAtKHkcB6MUlKAM72PwiEpEJaKSsFwoyxKLIZqbphQoNSi0U6CkuWlKPe6f73e/A98e98+aW2865frBsel+evxzULI1HihBySbAVlHQUbndbjMfSQjKX84GTblerz/6SFmWEWIVlJq2iplyuVyK7lOe50fXmCnX6zWhx7UtUhQFKNui6fODUu9COAtKApq+yElQambZLk/FPO106aapG5QaFNqpCCn1Q1qoZ4N+2gkVTX9foNS7EM6CkoCmLwJKvQvhbNCUQoiFj0R75A+aEu9XEjqHvggo9S6EsxXlarUquk+bzea4pI9wiV5R0gavto13Em9ngLJtWNTzIyrrIuTjijLLsu6HyuIkxkraGzzkUjFPO2QUWsEIKYUQqY+02WwIg1LQTzuE1+OxCCjZ8EEJSjYBtooQlb2lxF9IsDUdKEHZLOB6rERUNreJYQ5QGkI1ZwNls5FhDlAaQjVnA2WzkWEOUBpCNWcDZbORYY789uHi/U3g2+XVveHLUbO5Xleq145sH5RsDQpKULIJsFVkFZUy0nQ4HAjAdEopJe1Xo+GXcv3LW1DWIpchKpMk+RRFSpLk2GO8RWWaprX26emhtw8FVh0clMfQYejgoARlfRzy38GTJPHxDTb811wul56nnfDXiW3v0NsM3vZGw8/vmvJwOHT/fTV+rlAURX0cNTimz+AGlZ9WFlCytTcoQckmwFaR66iUUvqZStpctR/TjhACiyGejgBKHseyLCvK6XS6CiwtFotjj3G9RKfpVpS026Vd1LCUt7czDO+vlg2UNRD6ISjpdrWSoKyB0A8ryul06uN7b9665nw+7+W0E/LqkjYlun7aqaISlPSufSwppXTw1Q2Wl5BSEl6n66gk3GJfioCSraVACUo2AbaKEJWgZBNgqwhRCUo2AbaKEJWgZBNgqwhRCUo2AbaKEJUdUA7H+WQmsJEFhuN8MErPBuH96/ie3tI/t0x8FMP3CcUAAAAASUVORK5CYII=";
+
+const branchImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAACJCAIAAABCeJqWAAAD4klEQVR4Ae3cMWvbQBQH8Cz+NvkW7uLP4e/gDt28N5Qummow2JMMKXiqvahLhnjKIAqlYINaMBkarnWJa5qoBIEtgvLi9+7pdFL+xw2q7t31/Ltn+SQcn7Q6IaqKwEmrE7Z7UX8Uo4oF2r2o1QkfKPujOEWxEOiPYlBa+OW6gjKHYXcISju/XG9Q5jDsDkFp55frDcocht0hKO38cr1BmcOwOwSlnV+uNyhzGHaHoLTzy/UGZQ7D7tCK8m592ch6//OLQFVOef/7++3otJF1d/EGlDpLC0odx9vRKShB6d8FF1mJrERWYjP0aMOEfWXBZQHXygIU2R2Ec8q/v/59O29kvVtfPnrzHvNP+Rv8mNFfVAwo1ZYblKBUE1AbyHVWLteb4Xzpef18dS0Adk05nC1VvsZY6iDdswUodb5wC0odx1YnBCUo/fsaPLISWYmsFGwX0jTFZkjmVtALlAUoslOglLkV9LrZ7FbrP57Xm82uYOrPnXJ94/jcfGrcDkq1xQMlKNUE1AbyOis/Xvzoni3c1+F8JQD2mjKbXKmPJgsHr8c9OGu1QcniooJBSemw2kDJ4qKCQUnpsNpAyeKigkFJ6bDaQMniooJBSemw2kDJ4mpOcLbw+MkmhRUFpQJiNgQoQakmoDaQ11k5nK9evY7cV9kv/XlNmU2u8JFiqSfxvPKFfWeIdWVCVrK4qGBQUjqsNlCyuKhgUFI6rDZQsrioYFBSOqw2ULK4qODhbNnuRe7r+/Ov1LSeaMsWHg/ZnuDhnAYlR4uMBSXJw2kEJUeLjAUlycNpdE2Jv5DgrA4ZC0qSh9MISo4WGQtKkofTCEqOFhkLSpKH0whKjhYZC0qSh9MISo4WGQtKkofTGF1dd98uPK8N/GsyzhpVH+v6Hrz6V1zaDECpRgtKPyhNQ8t2uxUAy7PSGPOuoWU2m4FSZ20rowyC4EMjShAE2VJURhmGoeDt4GGXJElAqbMuoNRxTNMUlA2iDIJg1ogynU4rvlbqbEB8GqWyT3CfEHTm4ppyu93GDS1JkgguwPIbR8F/1uwuoFRbX1CCUk1AbSDXWWmM8f+zqh4fO3Ec62xYyhzF9WZI9sYApcytoNeecjAYfPKsTCaTLNdrlpWy6RYsjt6pyp4MyV7CPitBKQM89ALlwcLyCJSWgIfue8rBYDDxrIzH41p+7JS5L7QdW3Ydd323s89K25dbZv96UBpjEu+LMeZwSTr6yHVWHj2x+gWCUm3NQAlKNQG1gZCVoFQTUBsIWQlKNQG1gZCVoFQTUBsIWQlKNQG1gZCVJVC2e1F/FKOKBdq9qNUJH34pEFVF4D/hsYhLBy7VNQAAAABJRU5ErkJggg==";
+
+const levelImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAACJCAIAAABCeJqWAAAD/klEQVR4Ae3dP2vbQBgG8Cz+NvkWnvw58h28dPPe0k1Th4AzqZDBU5RFXWpowJDhNoMLImC8ORjilDQqxSAu1qskeu716Xx5xA3ySe/58rtX/yzHOukNUhYVgZPeIO0P89HYsMAC/WHeG6T/KUdjU3JyEBiNDSkd/KxQUloYbrOkdPOzoklpYbjNktLNz4ompYXhNktKNz8rmpQWhtssKd38rGhSWhhus6R087OiSWlhuM06URaRTqvVClDFKdfr9ddIpyzLSKkztp1RJkmSRjFdXFzshqIzyjRNgc0hwJCiKEipMy6k1HEsy5KUEVEmSZJFMU0mk473lTonICG10tkRPCQEnb74ptxutybSqSgKYAeMXzgCbxZ3CCnVxpeUpFQTUGvId1Y+b+6e5peBl7/LXwCwb8qn+eXD+DTw8ufnJ1LqDBIpdRwfxqekJGV4u05mJbOSWQmcLpRlyZMhzE2IIqWAglWREnMTop4f7583d6GXx3uh629V+b5wfKs/R7yclGqDR0pSqgmoNRR0Vs7n805usBuD/Ods0JTT6VTnbmzLVnzfvFXbMJobImWzTcslFeVkMvFwyz3P8136xpyV0+m05Sggq3f2TTaksy1jqqwkZUu52uqkrJGgFaRE5WpxFWXLkxnX1WM+7LjatIwnZUuw5tUjpKxt8UFXBH3hGLRcrXOkrJGgFaRE5WpxpKyRoBVBUxpjvncxYdepQVPyFB3dQmpxpKyRoBUV5dXVlYfflpjNZrvT9ghP0StKbOfVdgT5eWVbscb1SdlI03bBh6DMsoz7yraZ8WL9al/Z/CHOQZbEfNg5CFhzoxFSGmM6+dWd2Wz2Yut434ugr3be9yeEshYp1UaClKRUE1BriFl5tJTn2ULlWSwHbeTsyw0A7DsrSQkMkhxCStkFqCUlgCaHkFJ2AWpJCaDJIaSUXYBaUgJocggpZReglpQAmhyS367OPt8EXs6vf8u9f7XW99XOq5057oWkVBs/UpJSTUCtIaesXEc6bbdbABin5ENi9rhJKdwO930fvMrKJEm+RTElSbJz7YySD4nZbekKGzgpSbl32OBDYvZB8Nedfb/SPux08hM26m/Kh8QIZzOOVZ0dwR37HWC4b0o+JGZvr4yfDO01xJekVMsBUpJSTUCtId9ZuVhuzq8XgZcft34fao2NJm/eYm5CFCkFFKyKlJibEEVKAQWrIiXmJkSRUkDBqkiJuQlRpBRQsCpSYm5CFCkFFKxqsdzkt6vAy2K5Af4639fgQBePJYSUaiNFSlKqCag1xKwkpZqAWkPMSlKqCag1xKwkpZqAWkPMSlKqCag1xKw8AGV/mI/GhgUW6A/z3iA9OegvIH2oxv8BrKHQ/zYsUVYAAAAASUVORK5CYII=";
+
+const mapIndexed = R.addIndex(R.map);
+const ButtonCarousel = ({ selectionModes, selectionMode, setSelectionMode, classes }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        overflowX: "auto",
+        overflowY: "hidden",
+        whiteSpace: "nowrap",
+        display: "block",
+        // allow horizontal scrolling
+        width: "100%",
+        maxWidth: "100%",
+        "&::-webkit-scrollbar": { display: "none" },
+        // optional: hide scrollbar
+        scrollbarWidth: "none"
+      },
+      children: mapIndexed(
+        ({ value, label, img }) => /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            classes: { tooltip: classes.tooltip },
+            title: /* @__PURE__ */ jsx("img", { style: { width: "72px", height: "90px" }, src: img, alt: value }),
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: cx(classes.selectButton, classes.selectButtonNarrow),
+                selected: value === selectionMode,
+                onClick: () => {
+                  setSelectionMode(value);
+                },
+                "aria-pressed": value === selectionMode,
+                "aria-label": label,
+                tabIndex: 0,
+                sx: {
+                  flex: "0 0 auto",
+                  // Prevents buttons from shrinking
+                  scrollSnapAlign: "center",
+                  minWidth: 40,
+                  // Minimum width for buttons
+                  whiteSpace: "wrap"
+                },
+                children: /* @__PURE__ */ jsxs(Paper, { elevation: 0, className: classes.selectModeItem, children: [
+                  /* @__PURE__ */ jsx(Typography, { children: label }),
+                  !R.isNil(img) && R.is(String, img) && /* @__PURE__ */ jsx("img", { src: img, alt: value })
+                ] }, value)
+              }
+            )
+          },
+          value
+        ),
+        selectionModes
+      )
+    }
+  );
+};
+ButtonCarousel.propTypes = {
+  selectionModes: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      img: PropTypes.string
+    })
+  ).isRequired,
+  selectionMode: PropTypes.string.isRequired,
+  setSelectionMode: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired
+};
+
+const useStyles$1 = makeStyles((theme) => ({
+  header: {
+    color: "black",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  headerLabel: {
+    fontSize: "16px",
+    fontFamily: "PT Sans Narrow",
+    fontWeight: "700",
+    color: theme.palette.grey[700]
+  },
+  selectionTitle: {
+    fontSize: "12px",
+    fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontWeight: "500",
+    color: theme.palette.grey["A700"]
+  },
+  closeButton: {
+    color: "grey !important",
+    padding: 0
+  },
+  selectMode: {
+    marginLeft: 10,
+    "& .MuiInputBase-root": {
+      height: 32
+    }
+  },
+  narrowTop: {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  },
+  spotlight: { width: "45%" },
+  selection: {
+    display: "flex",
+    alignItems: "center"
+  },
+  narrowSpotlight: { width: "100%" },
+  selectionButton: {
+    marginLeft: 24,
+    marginRight: 15,
+    height: 32
+  },
+  narrowSelectionButton: {
+    height: 32,
+    marginTop: 15,
+    marginRight: 10
+  },
+  selectionMenu: {
+    padding: 24
+  },
+  narrowSelectionMenu: {
+    width: "100%"
+  },
+  selectModeContainer: {
+    display: "flex",
+    flexDirection: "column",
+    flexWrap: "wrap",
+    alignItems: "flex-start"
+  },
+  selectButtonNarrow: {
+    width: 160,
+    height: 50,
+    border: `1px solid ${theme.palette.primary.light}`,
+    margin: 5
+  },
+  selectButton: {
+    color: theme.palette.primary.main,
+    "&:hover": {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  selectModeItem: {
+    boxShadow: "none",
+    display: "flex",
+    backgroundColor: "transparent",
+    flexDirection: "row-reverse",
+    alignItems: "center",
+    "& p": {
+      paddingLeft: "5px",
+      fontSize: "12px",
+      fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+      color: theme.palette.primary.main,
+      fontWeight: "500",
+      lineHeight: 1.43,
+      textAlign: "left"
+    },
+    "& img": {
+      width: 21,
+      height: 30
+    }
+  },
+  hint: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 7,
+    color: theme.palette.primary.main
+  },
+  divider: {
+    backgroundColor: theme.palette.primary.light
+  },
+  actions: {
+    justifyContent: "flex-end"
+  },
+  ellipsis: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  tooltip: {
+    backgroundColor: theme.palette.action.hover
+  },
+  subheader: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "space-between"
+  },
+  narrowHeader: {
+    alignItems: "flex-start",
+    width: "100%"
+  },
+  topElements: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  }
+}));
+const AdvancedSelection = (props) => {
+  const {
+    id,
+    items,
+    labelRenderer,
+    isNarrow,
+    labels,
+    disableAccessor = R.always(false),
+    expandAll,
+    collapseAll,
+    selection,
+    setSelection,
+    allSelection,
+    setAllSelection,
+    spotlight,
+    setSpotlight,
+    expandedIds,
+    allItems,
+    filter,
+    ...rest
+  } = props;
+  const [selectionMode, setSelectionMode] = useState("single");
+  const classes = useStyles$1();
+  const getTotal = (items2, spotlightAcc) => {
+    const itemsIds = R.pluck("id", items2);
+    const total = R.pipe(R.uniq, R.length)(itemsIds);
+    if (R.is(Function, spotlightAcc)) {
+      return spotlightAcc(total);
+    }
+    return total;
+  };
+  const selectionItems = R.map((item) => {
+    const selectedIds = R.propOr([], id, allSelection);
+    return {
+      ...item,
+      isSelected: R.includes(item.id, selectedIds) ? !item.isSelected : !!item.isSelected
+    };
+  }, items);
+  const indexedFilteredItems = R.indexBy(getHierarchicalId, selectionItems);
+  const selectionOptions = [
+    {
+      value: "single",
+      label: R.prop("singleSelection", labels),
+      img: singleImg
+    },
+    {
+      value: "children",
+      label: R.prop("childrenSelection", labels),
+      img: childrenImg
+    },
+    {
+      value: "branch",
+      label: R.prop("branchSelection", labels),
+      img: branchImg
+    },
+    {
+      value: "level",
+      label: R.prop("levelSelection", labels),
+      img: levelImg
+    }
+  ];
+  const _allGroupedItems = R.pipe(
+    R.map((item) => ({
+      ...item,
+      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+    })),
+    R.groupBy(R.propOr("#ROOT", "parentId"))
+  )(allItems);
+  const isChildInSelectionScope = (child, ancestor) => {
+    if (!R.has(getHierarchicalId(child), indexedFilteredItems)) {
+      return false;
+    }
+    if (selectionMode === "single" || selectionMode === "level") {
+      return false;
+    }
+    if (selectionMode === "children") {
+      return child.parentId === getHierarchicalId(ancestor);
+    }
+    return true;
+  };
+  const _disableAccessor = getEvolvedDisableAccessor(
+    _allGroupedItems,
+    disableAccessor,
+    isChildInSelectionScope
+  );
+  const isDisabled = (item) => R.is(Function, disableAccessor) ? disableAccessor(item) : false;
+  const scopeGetter = R.prop(selectionMode, getScopeGetters);
+  const onChangeSelection = (ids) => {
+    const nextSelection = R.reduce(
+      (acc, id2) => R.has(id2, acc) ? R.dissoc(id2, acc) : R.assoc(id2, id2, acc),
+      selection,
+      ids
+    );
+    setSelection(nextSelection);
+    setAllSelection({ ...allSelection, [id]: R.values(nextSelection) });
+  };
+  const rejectonlyDisabledItems = (item) => _disableAccessor(item);
+  const getSelectedItems = (item) => R.propOr(false, "isSelected")(item);
+  const selectAll = () => {
+    const imposedIds = R.reduce(
+      (acc, item) => R.uniq(R.concat(R.propOr([], "imposedIds", item), acc)),
+      []
+    )(items);
+    const ids = R.pluck("id", R.reject(getSelectedItems, R.reject(rejectonlyDisabledItems, items)));
+    const allIds = R.concat(imposedIds, ids);
+    const nextSelection = R.reduce(
+      (acc, id2) => R.has(id2, acc) ? acc : R.assoc(id2, id2, acc),
+      {},
+      allIds
+    );
+    setSelection(nextSelection);
+    setAllSelection({ ...allSelection, [id]: R.values(nextSelection) });
+  };
+  const deselectAll = () => {
+    const itemIds = R.pipe(R.filter(getSelectedItems), R.pluck("id"))(items);
+    const ids = R.difference(itemIds, selection);
+    const nextSelection = R.reduce(
+      (acc, id2) => R.has(id2, acc) ? acc : R.assoc(id2, id2, acc),
+      {},
+      ids
+    );
+    setSelection(nextSelection);
+    setAllSelection({ ...allSelection, [id]: R.values(nextSelection) });
+  };
+  const mapIndexed = R.addIndex(R.map);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 12,
+        className: cx(classes.topElements, { [classes.narrowTop]: isNarrow }),
+        children: [
+          isNarrow && /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 12, children: /* @__PURE__ */ jsx("div", { className: cx(classes.selectModeContainer, { [classes.narrowHeader]: isNarrow }), children: /* @__PURE__ */ jsx(
+            ButtonCarousel,
+            {
+              selectionModes: selectionOptions,
+              selectionMode,
+              setSelectionMode,
+              classes,
+              isNarrow
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx("div", { className: classes.spotlight, children: /* @__PURE__ */ jsx(
+            Spotlight,
+            {
+              hasClearAll: true,
+              placeholder: getTotal(items, R.prop("placeholder", labels)),
+              term: spotlight.term,
+              hasCommit: false,
+              spotlight: { fields: {} },
+              action: setSpotlight,
+              labels
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid, { item: true, xs: isNarrow ? 12 : 8, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row" }, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: collapseAll, color: "primary", children: R.prop("colapseAll", labels) }),
+          /* @__PURE__ */ jsx(Button, { style: { marginLeft: 10 }, onClick: expandAll, color: "primary", children: R.prop("expandAll", labels) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: selectAll, color: "primary", children: R.prop("selectAll", labels) }),
+          /* @__PURE__ */ jsx(Button, { style: { marginLeft: 10 }, onClick: deselectAll, color: "primary", children: R.prop("deselectAll", labels) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, { className: classes.divider }),
+      /* @__PURE__ */ jsx(
+        VirtualizedTree,
+        {
+          ...rest,
+          disableAccessor: _disableAccessor,
+          isGreyed: isDisabled,
+          labels,
+          labelRenderer,
+          items: selectionItems,
+          changeSelection: (selection2, ids) => onChangeSelection(selection2),
+          withExpandControl: true,
+          treeHeight: isNarrow ? 0 : 450,
+          scopeGetter,
+          expandedIds
+        }
+      )
+    ] }),
+    !isNarrow && /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, children: /* @__PURE__ */ jsxs("div", { className: cx(classes.selectModeContainer), children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.hint, children: [
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            role: "tooltip",
+            variant: "light",
+            title: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: R.prop("hint", labels) }),
+            "aria-label": R.prop("hint", labels),
+            tabIndex: 0,
+            children: /* @__PURE__ */ jsx(Button$1, { children: /* @__PURE__ */ jsx(EmojiObjects, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            className: classes.selectionTitle,
+            "aria-label": R.prop("selectionMode", labels),
+            tabIndex: 0,
+            children: R.prop("selectionMode", labels)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cx(classes.selectModeContainer, classes.selectionMenu), children: mapIndexed(
+        ({ value, label, img }) => /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            classes: { tooltip: classes.tooltip },
+            title: /* @__PURE__ */ jsx("img", { style: { width: "72px", height: "90px" }, src: img, alt: value }),
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: classes.selectButton,
+                selected: value === selectionMode,
+                onClick: () => {
+                  setSelectionMode(value);
+                },
+                "aria-pressed": value === selectionMode,
+                "aria-label": label,
+                tabIndex: 0,
+                children: /* @__PURE__ */ jsxs(Paper, { elevation: 0, className: classes.selectModeItem, children: [
+                  /* @__PURE__ */ jsx(Typography, { children: label }),
+                  !R.isNil(img) && R.is(String, img) && /* @__PURE__ */ jsx("img", { src: img, alt: value })
+                ] }, value)
+              }
+            )
+          },
+          value
+        ),
+        selectionOptions
+      ) })
+    ] }) })
+  ] });
+};
+AdvancedSelection.propTypes = {
+  id: PropTypes.string,
+  accessibility: PropTypes.bool,
+  disableAccessor: PropTypes.func,
+  HTMLRenderer: PropTypes.func,
+  filter: PropTypes.object,
+  selection: PropTypes.object,
+  allSelection: PropTypes.object,
+  setAllSelection: PropTypes.func,
+  setSelection: PropTypes.func,
+  isRtl: PropTypes.bool,
+  isNarrow: PropTypes.bool,
+  items: PropTypes.array,
+  labels: PropTypes.shape({
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    disableItemLabel: PropTypes.string,
+    singleSelection: PropTypes.string,
+    childrenSelection: PropTypes.string,
+    branchSelection: PropTypes.string,
+    levelSelection: PropTypes.string,
+    selectAll: PropTypes.string,
+    deselectAll: PropTypes.string,
+    apply: PropTypes.string,
+    cancel: PropTypes.string
+  }),
+  labelRenderer: PropTypes.func,
+  expandAll: PropTypes.func,
+  collapseAll: PropTypes.func,
+  spotlight: PropTypes.object,
+  setSpotlight: PropTypes.func,
+  expandedIds: PropTypes.object,
+  allItems: PropTypes.array
+};
+const AdvancedSelection$1 = withSpotlight(withExpansionTree(AdvancedSelection));
+
+const useStyles = makeStyles((theme) => ({
+  label: {
+    textTransform: "none",
+    color: theme.palette.grey[700],
+    ...R.pathOr({}, ["mixins", "expansionPanel", "title"], theme)
+  },
+  labelSelected: {
+    color: theme.palette.primary.main
+  },
+  tabSelected: {
+    backgroundColor: `${theme.palette.action.hover} !important`,
+    "&:hover": {
+      backgroundColor: `${theme.palette.action.selected} !important`
+    }
+  },
+  tab: {
+    "&:hover": {
+      backgroundColor: `${theme.palette.action.selected}`
+    }
+  },
+  tabPanel: {
+    backgroundColor: theme.palette.background.default,
+    position: "absolute",
+    top: "176px",
+    zIndex: 1e3,
+    width: "80vw",
+    height: "100vh",
+    left: "200px"
+  }
+}));
+const getCounter = (items, tagAccessor) => {
+  const selectedItemsIds = R.reduce(
+    (acc, item) => {
+      if (R.prop("isSelected", item)) {
+        return R.append(R.prop("id", item), acc);
+      }
+      return acc;
+    },
+    [],
+    items
+  );
+  const itemsIds = R.pluck("id", items);
+  const count = R.pipe(R.uniq, R.length)(selectedItemsIds);
+  const total = R.pipe(R.uniq, R.length)(itemsIds);
+  if (R.is(Function, tagAccessor)) {
+    return tagAccessor(count, total);
+  }
+  return `${count}/${total}`;
+};
+const TabPanel = (props) => {
+  const {
+    children,
+    open,
+    item,
+    classes,
+    labels,
+    onClose,
+    isNarrow,
+    setOpen,
+    labelRenderer,
+    styles = {},
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !open,
+      id: `vertical-tabpanel-${R.prop("index", item)}`,
+      "aria-labelledby": `vertical-tab-${R.prop("index", item)}`,
+      className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel,
+      style: { width: R.prop("width", styles) },
+      ...other,
+      children: open && /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            justifyContent: isNarrow ? "space-between" : "flex-end",
+            alignItems: "center",
+            children: [
+              isNarrow && /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "flex-start", alignItems: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Button$1,
+                  {
+                    onClick: () => setOpen(false),
+                    "data-testid": "back_button",
+                    "aria-label": R.prop("cancel", labels),
+                    sx: {
+                      padding: 0,
+                      float: "left",
+                      justifyContent: "flex-start",
+                      minWidth: "24px"
+                    },
+                    size: "large",
+                    edge: "start",
+                    children: /* @__PURE__ */ jsx(ArrowBack, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "h6",
+                    "aria-label": R.prop("title", labels)(labelRenderer(item)),
+                    tabIndex: 0,
+                    sx: {
+                      margin: 0,
+                      padding: 0
+                    },
+                    children: R.prop("title", labels)(labelRenderer(item))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button$1,
+                {
+                  onClick: onClose,
+                  "aria-label": R.prop("cancel", labels),
+                  sx: {
+                    color: "grey !important",
+                    minWidth: "24px",
+                    padding: 0,
+                    float: "right"
+                  },
+                  size: "large",
+                  children: /* @__PURE__ */ jsx(Close, {})
+                }
+              )
+            ]
+          }
+        ),
+        children
+      ] })
+    }
+  );
+};
+const PaperComponent = React.forwardRef(
+  ({ label, selected, item, tagAccessor, tagValueLabel, ...rest }, ref) => {
+    const tag = R.prop("tag", item);
+    const Chip = R.isNil(tag) ? Tag : tag;
+    const classes = useStyles();
+    return /* @__PURE__ */ jsx(Paper, { ...rest, ref, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", width: "100%" }, children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          noWrap: true,
+          variant: "body2",
+          title: label,
+          className: cx(classes.label, { [classes.labelSelected]: selected }),
+          children: label
+        }
+      ),
+      R.isNil(tag) ? /* @__PURE__ */ jsx(Chip, { items: R.prop("values", item), tagValueLabel, children: getCounter(R.prop("values", item), tagAccessor) }) : tag
+    ] }) });
+  }
+);
+const DynamicDrawer = (props) => {
+  const classNames = useStyles();
+  const [open, setOpen] = useState(false);
+  const [selectedId, setSelectedId] = useState(null);
+  const [selection, setSelection] = useState({});
+  const [allSelection, setAllSelection] = useState({});
+  const {
+    list,
+    labelRenderer,
+    onClick,
+    handleChangePanel,
+    onClosePanel,
+    isNarrow,
+    labels,
+    disableAccessor = R.always(false),
+    isApplyHiddenNarrow = false,
+    expandAll,
+    collapseAll,
+    expandedIds,
+    allItems,
+    periodPanel,
+    classes,
+    testId = "tabs",
+    tagAccessor,
+    tagAriaLabel,
+    children,
+    styles = {},
+    ...rest
+  } = props;
+  const handleChange = (e, item) => {
+    const id = R.prop("id", item);
+    const filterSelection = R.pipe(R.propOr([], id), (arr) => R.zipObj(arr, arr))(allSelection);
+    setSelection({ ...filterSelection });
+    handleChangePanel(id, selection, allSelection);
+    setSelectedId(id);
+    setOpen(true);
+  };
+  const handleSubmit = () => {
+    onClick(allSelection);
+    setAllSelection({});
+    setSelection({});
+    setOpen(false);
+    setSelectedId(null);
+    onClosePanel();
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setAllSelection({});
+    setSelection({});
+    setSelectedId(null);
+    onClosePanel();
+  };
+  const filter = useMemo(() => {
+    if (!selectedId) return {};
+    return R.find((item) => R.prop("id", item) === selectedId)(list);
+  }, [selectedId, list]);
+  const isHidden = open && isNarrow;
+  const isNotHiddenButton = (!R.isEmpty(allSelection) || !isApplyHiddenNarrow) && isNarrow;
+  const isApplyButtonShown = open && !isNarrow;
+  useEffect(() => {
+    if (isApplyButtonShown) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open, isNarrow]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row" }, children: [
+    isApplyButtonShown && /* @__PURE__ */ jsx(
+      Box,
+      {
+        onClick: () => handleClose(),
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          zIndex: 990
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        orientation: "vertical",
+        variant: "scrollable",
+        TabIndicatorProps: { style: { transition: "none" } },
+        scrollButtons: isApplyButtonShown && "auto",
+        value: false,
+        onChange: handleChange,
+        "aria-label": "filters",
+        "data-testid": testId,
+        sx: {
+          display: isHidden ? "none" : "flex",
+          width: "100%",
+          height: isApplyButtonShown ? R.prop("height", styles) : "100%",
+          borderRight: 1,
+          borderColor: "divider",
+          zIndex: 1e3
+        },
+        children: [
+          R.map((item) => {
+            const tagValueLabel = R.isNil(R.prop("tag", item)) && getCounter(R.prop("values", item), tagAriaLabel);
+            return /* @__PURE__ */ jsx(
+              Tab,
+              {
+                id: R.prop("id", filter),
+                "data-testid": `${R.prop("id", item)}-tab`,
+                component: React.forwardRef(function TabPaper(tabProps, ref) {
+                  return /* @__PURE__ */ jsx(
+                    PaperComponent,
+                    {
+                      ref,
+                      ...tabProps,
+                      label: labelRenderer(item),
+                      selected: selectedId === R.prop("id", item),
+                      item,
+                      tagAccessor,
+                      tagValueLabel
+                    }
+                  );
+                }),
+                label: labelRenderer(item),
+                "aria-label": labelRenderer(item),
+                value: item,
+                "aria-selected": R.prop("id", filter) === R.prop("id", item),
+                className: cx(classNames.tab, {
+                  [classNames.tabSelected]: R.prop("id", filter) === R.prop("id", item)
+                }),
+                sx: {
+                  alignItems: "start",
+                  maxWidth: "100%"
+                },
+                wrapped: true,
+                disableRipple: true,
+                disableFocusRipple: true
+              },
+              R.prop("id", item)
+            );
+          })(list),
+          isApplyButtonShown && /* @__PURE__ */ jsx(
+            Button,
+            {
+              style: { float: "bottom", margin: "10px" },
+              "aria-label": R.prop("apply", labels),
+              id: "apply_button",
+              variant: "contained",
+              onClick: handleSubmit,
+              children: R.prop("apply", labels)
+            }
+          ),
+          isNotHiddenButton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              style: { float: "bottom", margin: "10px" },
+              "aria-label": R.prop("apply", labels),
+              id: "apply_button",
+              variant: "contained",
+              onClick: handleSubmit,
+              children: R.prop("apply", labels)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TabPanel,
+      {
+        item: filter,
+        "data-testid": `${testId}_panel`,
+        open,
+        labels,
+        classes,
+        onClose: handleClose,
+        isNarrow,
+        setOpen,
+        labelRenderer,
+        styles,
+        children: R.equals(R.prop("id", filter), periodPanel) ? children : /* @__PURE__ */ jsx(
+          AdvancedSelection$1,
+          {
+            id: selectedId,
+            items: R.prop("values", filter) || [],
+            isOpen: open,
+            labelRenderer,
+            disableAccessor: disableAccessor ? R.pipe(R.prop("isEnabled"), R.not) : void 0,
+            labels,
+            isNarrow,
+            expandAll,
+            collapseAll,
+            expandedIds,
+            allItems,
+            selection,
+            setSelection,
+            setAllSelection,
+            allSelection,
+            ...rest,
+            filter
+          }
+        )
+      }
+    )
+  ] });
+};
+
+export { DynamicDrawer };
+//# sourceMappingURL=DynamicDrawer.js.map