@sis-cc/dotstatsuite-visions 15.15.0 → 15.16.0

package/dist/DynamicDrawer/DynamicDrawer.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useLayoutEffect, startTransition, useMemo } from 'react';
+import React, { useState, useRef, useLayoutEffect, useEffect, startTransition, useMemo } from 'react';
 import * as R from 'ramda';
 import cx from 'classnames';
+import useSize from '@react-hook/size';
 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-CA0xvW0v.js';
@@ -481,15 +482,14 @@ const useStyles = makeStyles((theme) => ({
   chipBorder: {
     border: `solid 1px ${dynamicDrawerMixin(theme, "chips", "outlineColor")}`
   },
-  // Pill radius for standalone chips (value, count, "All items"). Kept off
-  // "Remove all" (removeAllChip below) and off in-group chips, whose own
-  // radius is zeroed by concatenatedChipsRow's `& > *` so only the group's
-  // outer corners round.
   chipRadius: {
     borderRadius: dynamicDrawerMixin(theme, "chips", "radius")
   },
-  removeAllChip: {
-    borderRadius: dynamicDrawerMixin(theme, "chips", "removeAllBorderRadius")
+  chipDeleteIcon: {
+    padding: "2px !important",
+    "& svg": {
+      fontSize: dynamicDrawerMixin(theme, "chips", "deleteIconSize")
+    }
   },
   // #1789: a long value truncates on one line and exposes its full text via
   // the native title tooltip, instead of wrapping the chip over several
@@ -498,28 +498,16 @@ const useStyles = makeStyles((theme) => ({
   ellipsisLabel: {
     ...R.pathOr({}, ["mixins", "dynamicDrawer", "chips", "ellipsisLabel"], theme)
   },
-  // #1787: the outer frame around the count chip + toggle (collapsed), and
-  // around that same row stacked over the expanded value-chip row — one
-  // continuous rounded card either way, never two floating pieces.
   concatenatedChips: {
     display: "flex",
     border: `solid 1px ${dynamicDrawerMixin(theme, "chips", "dividerColor")}`,
     borderRadius: dynamicDrawerMixin(theme, "chips", "groupBorderRadius"),
     overflow: "hidden"
   },
-  concatenatedChipsExpanded: {
-    flexDirection: "column",
-    "& > *:not(:last-child)": {
-      borderBottom: `solid 1px ${dynamicDrawerMixin(theme, "chips", "dividerColor")}`
-    }
-  },
-  // One row inside the frame: the header (count chip + toggle) is one row,
-  // the expanded value chips (which themselves wrap onto several lines) are
-  // another. Dividers and the zeroed child radius are per-row, so wrapped
-  // chips only ever get a right-hand divider, never a stray corner radius.
+  // The items of one such line: a divider between them, and their own
+  // radius zeroed so only the frame's outer corners round.
   concatenatedChipsRow: {
     display: "flex",
-    flexWrap: "wrap",
     alignItems: "stretch",
     flex: 1,
     minWidth: 0,
@@ -564,6 +552,9 @@ const useStyles = makeStyles((theme) => ({
   toggleLabel: {
     ...R.pathOr({}, ["mixins", "dynamicDrawer", "toggleButton", "label"], theme)
   },
+  toggleIconPlus: {
+    transform: "translateY(-2px)"
+  },
   list: {
     display: "flex",
     flexDirection: "column",
@@ -684,6 +675,57 @@ const TabPanel = (props) => {
     children
   ] }) });
 };
+const ChipRuns = ({
+  id,
+  items,
+  classes
+}) => {
+  const sizeRef = useRef(null);
+  const measureRef = useRef(null);
+  const [width] = useSize(sizeRef);
+  const [rows, setRows] = useState(null);
+  useLayoutEffect(() => {
+    setRows(null);
+  }, [items, width]);
+  useLayoutEffect(() => {
+    const container = measureRef.current;
+    if (!container) return;
+    const children = Array.from(container.children);
+    if (R.isEmpty(children)) {
+      setRows([]);
+      return;
+    }
+    const SAME_ROW_TOLERANCE_PX = 10;
+    const grouped = [];
+    let currentRow = [];
+    let rowAnchorTop = null;
+    children.forEach((child, index) => {
+      if (rowAnchorTop !== null && Math.abs(child.offsetTop - rowAnchorTop) > SAME_ROW_TOLERANCE_PX) {
+        grouped.push(currentRow);
+        currentRow = [];
+        rowAnchorTop = null;
+      }
+      if (rowAnchorTop === null) rowAnchorTop = child.offsetTop;
+      currentRow.push(index);
+    });
+    grouped.push(currentRow);
+    setRows(grouped);
+  });
+  const safeRows = rows && R.sum(R.map(R.length, rows)) === R.length(items) ? rows : null;
+  return /* @__PURE__ */ jsx(Box, { id, ref: sizeRef, sx: {
+    width: "100%"
+  }, children: safeRows ? /* @__PURE__ */ jsx(Box, { sx: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: 0.5
+  }, children: safeRows.map((rowIndices) => /* @__PURE__ */ jsx(Box, { className: classes.concatenatedChips, children: /* @__PURE__ */ jsx(Box, { className: classes.concatenatedChipsRow, children: rowIndices.map((index) => /* @__PURE__ */ jsx(React.Fragment, { children: items[index].node }, items[index].key)) }) }, rowIndices.map((index) => items[index].key).join("-"))) }) : /* @__PURE__ */ jsx(Box, { ref: measureRef, className: cx(classes.concatenatedChips, classes.concatenatedChipsRow), sx: {
+    flexWrap: "wrap"
+  }, children: items.map(({
+    key,
+    node
+  }) => /* @__PURE__ */ jsx(React.Fragment, { children: node }, key)) }) });
+};
 const DimensionCard = React.forwardRef(({
   label,
   labels,
@@ -733,8 +775,8 @@ const DimensionCard = React.forwardRef(({
   } = {}) => /* @__PURE__ */ jsx(CustomChip, { id, parentId: dimId, label: itemLabel, items, renderer: myTooltipRenderer({
     isRtl,
     labelRenderer
-  }), labelRenderer, chipClasses: cx(chipClasses.secondaryChip, chipClasses.chip, classes.chipDeleteLeft, bordered && classes.chipBorder, bordered && classes.chipRadius), iconClasses: chipClasses.icon, labelClasses: cx(chipClasses.spaceLabel, classes.ellipsisLabel), title: R.is(String, itemLabel) ? itemLabel : void 0, onDelete: R.is(Function, onDeleteValue) && isEditMode && !isNotRemovable ? onDeleteValue : void 0 }, id);
-  const countChip = /* @__PURE__ */ jsx(CustomChip, { label: nItemsLabel, chipClasses: cx(chipClasses.mainChip, chipClasses.chip, classes.chipDeleteLeft), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon, onDelete: R.is(Function, onDeleteAllDimValues) && isEditMode ? () => onDeleteAllDimValues(dimId, selectedItems) : void 0 });
+  }), labelRenderer, chipClasses: cx(chipClasses.secondaryChip, chipClasses.chip, classes.chipDeleteLeft, bordered && classes.chipBorder, bordered && classes.chipRadius), iconClasses: cx(chipClasses.icon, classes.chipDeleteIcon), labelClasses: cx(chipClasses.spaceLabel, classes.ellipsisLabel), title: R.is(String, itemLabel) ? itemLabel : void 0, onDelete: R.is(Function, onDeleteValue) && isEditMode && !isNotRemovable ? onDeleteValue : void 0 }, id);
+  const countChip = /* @__PURE__ */ jsx(CustomChip, { label: nItemsLabel, chipClasses: cx(chipClasses.mainChip, chipClasses.chip, classes.chipDeleteLeft), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: cx(chipClasses.icon, classes.chipDeleteIcon), onDelete: R.is(Function, onDeleteAllDimValues) && isEditMode ? () => onDeleteAllDimValues(dimId, selectedItems) : void 0 });
   return /* @__PURE__ */ jsx(Paper, { ...rest, ref, className: cx(rest.className, classes.frame), children: /* @__PURE__ */ jsxs(Box, { sx: {
     display: "flex",
     flexDirection: "column",
@@ -757,16 +799,19 @@ const DimensionCard = React.forwardRef(({
       flexWrap: "wrap",
       alignItems: "center",
       gap: 0.5
-    }, children: R.isEmpty(selectedItems) ? /* @__PURE__ */ jsx(CustomChip, { label: R.propOr("All items", "allItems", labels), chipClasses: cx(chipClasses.mainChip, chipClasses.chip, classes.chipBorder, classes.chipRadius), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon }) : showCollapseToggle ? /* @__PURE__ */ jsxs(Box, { className: cx(classes.concatenatedChips, expanded && classes.concatenatedChipsExpanded), children: [
-      /* @__PURE__ */ jsxs(Box, { className: classes.concatenatedChipsRow, children: [
-        countChip,
-        expanded ? toggle(/* @__PURE__ */ jsx(Remove, { fontSize: "small" }), R.propOr("Show less", "showLess", labels)) : toggle(/* @__PURE__ */ jsx(Add, { fontSize: "small" }), R.propOr("Show more", "showMore", labels))
-      ] }),
-      expanded && /* @__PURE__ */ jsx(Box, { id: chipsId, className: classes.concatenatedChipsRow, children: R.map((chip) => valueChip(chip, {
+    }, children: R.isEmpty(selectedItems) ? /* @__PURE__ */ jsx(CustomChip, { label: R.propOr("All items", "allItems", labels), chipClasses: cx(chipClasses.mainChip, chipClasses.chip, classes.chipBorder, classes.chipRadius), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon }) : showCollapseToggle ? /* @__PURE__ */ jsx(ChipRuns, { id: chipsId, classes, items: [{
+      key: "count",
+      node: countChip
+    }, {
+      key: "toggle",
+      node: expanded ? toggle(/* @__PURE__ */ jsx(Remove, { fontSize: "small" }), R.propOr("Show less", "showLess", labels)) : toggle(/* @__PURE__ */ jsx(Add, { fontSize: "small", className: classes.toggleIconPlus }), R.propOr("Show more", "showMore", labels))
+    }, ...expanded ? R.map((chip) => ({
+      key: chip.id,
+      node: valueChip(chip, {
         bordered: false
-      }))(selectedItems) })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      showRemoveAll && isEditMode && /* @__PURE__ */ jsx(CustomChip, { label: R.propOr("Remove all", "removeAll", labels), chipClasses: cx(chipClasses.mainChip, chipClasses.chip, classes.chipDeleteLeft, classes.removeAllChip, classes.chipBorder), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon, onDelete: R.is(Function, onDeleteAllDimValues) ? () => onDeleteAllDimValues(dimId, selectedItems) : void 0 }),
+      })
+    }), selectedItems) : []] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      showRemoveAll && isEditMode && /* @__PURE__ */ jsx(CustomChip, { label: R.propOr("Remove all", "removeAll", labels), chipClasses: cx(chipClasses.mainChip, chipClasses.chip, classes.chipDeleteLeft, classes.chipBorder, classes.chipRadius), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: cx(chipClasses.icon, classes.chipDeleteIcon), onDelete: R.is(Function, onDeleteAllDimValues) ? () => onDeleteAllDimValues(dimId, selectedItems) : void 0 }),
       R.map((chip) => valueChip(chip))(selectedItems)
     ] }) })
   ] }) });