@sis-cc/dotstatsuite-visions 15.12.0 → 15.14.0

package/dist/DynamicDrawer/DynamicDrawer.js

@@ -331,6 +331,8 @@ const AdvancedSelection = (props) => {
     });
   };
   const mapIndexed = R.addIndex(R.map);
+  const filterLabel = filter && labelRenderer(filter);
+  const filterSubject = R.is(String, filterLabel) ? filterLabel : void 0;
   return /* @__PURE__ */ jsxs(Grid, { container: true, children: [
     /* @__PURE__ */ jsxs(Grid, { item: true, container: true, xs: 12, className: cx(classes.topElements, {
       [classes.narrowTop]: isNarrow
@@ -340,7 +342,7 @@ const AdvancedSelection = (props) => {
       }), 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 }) })
+      }, action: setSpotlight, labels, subject: filterSubject }) })
     ] }),
     /* @__PURE__ */ jsxs(Grid, { item: true, xs: isNarrow ? 12 : 8, children: [
       /* @__PURE__ */ jsxs("div", { style: {
@@ -479,8 +481,13 @@ const useStyles = makeStyles((theme) => ({
   chipBorder: {
     border: `solid 1px ${dynamicDrawerMixin(theme, "chips", "outlineColor")}`
   },
-  // #1788: the "Remove all" chip is a squared frame with barely rounded
-  // angles, so it reads as a different control from the informative chips.
+  // 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")
   },
@@ -491,15 +498,31 @@ const useStyles = makeStyles((theme) => ({
   ellipsisLabel: {
     ...R.pathOr({}, ["mixins", "dynamicDrawer", "chips", "ellipsisLabel"], theme)
   },
-  // #1787: expanded items are concatenated inside a single outer frame,
-  // separated by vertical dividers, the last one closing the rounded border.
+  // #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",
-    flexWrap: "wrap",
-    alignItems: "stretch",
     border: `solid 1px ${dynamicDrawerMixin(theme, "chips", "dividerColor")}`,
     borderRadius: dynamicDrawerMixin(theme, "chips", "groupBorderRadius"),
-    overflow: "hidden",
+    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.
+  concatenatedChipsRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "stretch",
+    flex: 1,
+    minWidth: 0,
     "& > *": {
       margin: 0,
       borderRadius: 0,
@@ -529,7 +552,17 @@ const useStyles = makeStyles((theme) => ({
   toggleButton: {
     minWidth: "20px",
     padding: theme.spacing(0.2),
-    color: dynamicDrawerMixin(theme, "toggleButton", "color")
+    color: dynamicDrawerMixin(theme, "toggleButton", "color"),
+    // Set directly on the button too, not just via concatenatedChipsRow's
+    // `& > *` — both are single-class selectors of equal specificity, so
+    // which one wins MUI's own (rounded) button classes otherwise comes
+    // down to style-insertion order. Flat and flush either way.
+    borderRadius: "0 !important",
+    margin: "0 !important",
+    height: "100%"
+  },
+  toggleLabel: {
+    ...R.pathOr({}, ["mixins", "dynamicDrawer", "toggleButton", "label"], theme)
   },
   list: {
     display: "flex",
@@ -688,7 +721,7 @@ const DimensionCard = React.forwardRef(({
     setExpanded(!expanded);
   }, className: classes.toggleButton, children: [
     icon,
-    /* @__PURE__ */ jsx(Typography, { noWrap: true, variant: "body2", className: classes.label, children: text })
+    /* @__PURE__ */ jsx(Typography, { noWrap: true, variant: "body2", className: classes.toggleLabel, children: text })
   ] });
   const valueChip = ({
     id,
@@ -700,7 +733,7 @@ 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), 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);
+  }), 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 });
   return /* @__PURE__ */ jsx(Paper, { ...rest, ref, className: cx(rest.className, classes.frame), children: /* @__PURE__ */ jsxs(Box, { sx: {
     display: "flex",
@@ -724,12 +757,12 @@ 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), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon }) : showCollapseToggle ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { className: classes.concatenatedChips, children: [
+    }, 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.concatenatedChips, children: R.map((chip) => valueChip(chip, {
+      expanded && /* @__PURE__ */ jsx(Box, { id: chipsId, className: classes.concatenatedChipsRow, children: R.map((chip) => valueChip(chip, {
         bordered: false
       }))(selectedItems) })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -902,6 +935,7 @@ const DynamicDrawer = (props) => {
   const isEditMode = open && !isNarrow;
   const isApplyShown = isEditMode && hasPendingModification;
   const isNotHiddenButton = hasPendingModification && isNarrow;
+  const canRemoveChips = isEditMode || isNotHiddenButton;
   const panelId = panelDomId(testId);
   const hasAnySelection = R.any((item) => !R.isEmpty(getItemSelectedItems(item, allSelection, R.identity)), list);
   const defaultHeader = !isNarrow && /* @__PURE__ */ jsxs(Box, { sx: {
@@ -967,7 +1001,7 @@ const DynamicDrawer = (props) => {
         const selectedItems = getItemSelectedItems(item, allSelection, labelRenderer);
         return /* @__PURE__ */ jsx(Box, { component: "li", sx: {
           display: "flex"
-        }, children: /* @__PURE__ */ jsx(DimensionCard, { "data-testid": `${id}-tab`, onClick: (e) => handleChange(e, item), labels, label: labelRenderer(item), labelRenderer, isEditMode, isOpen: open && selectedId === id, onOpen: () => handleChange(null, item), panelId, labelId: dimensionLabelId(id), description: descriptionAccessor ? descriptionAccessor(item) : "", HTMLRenderer, selected: selectedId === id, item, selectedItems, onDeleteValue: item.onDeleteValue || handleDeleteValue, onDeleteAllDimValues: item.onDeleteAllDimValues || handleDeleteAllDimValues, collapseThreshold, className: cx(classNames.tab, {
+        }, children: /* @__PURE__ */ jsx(DimensionCard, { "data-testid": `${id}-tab`, onClick: (e) => handleChange(e, item), labels, label: labelRenderer(item), labelRenderer, isEditMode: canRemoveChips, isOpen: open && selectedId === id, onOpen: () => handleChange(null, item), panelId, labelId: dimensionLabelId(id), description: descriptionAccessor ? descriptionAccessor(item) : "", HTMLRenderer, selected: selectedId === id, item, selectedItems, onDeleteValue: item.onDeleteValue || handleDeleteValue, onDeleteAllDimValues: item.onDeleteAllDimValues || handleDeleteAllDimValues, collapseThreshold, className: cx(classNames.tab, {
           [classNames.tabSelected]: R.prop("id", filter) === id
         }), sx: {
           alignItems: "start",