@sis-cc/dotstatsuite-visions 15.10.0 → 15.11.0

package/dist/DynamicDrawer/DynamicDrawer.js

@@ -15,7 +15,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
 import makeStyles from '@mui/styles/makeStyles';
 import { EmojiObjects, Remove, Add, ArrowBack, Close } from '@mui/icons-material';
 import Divider from '@mui/material/Divider';
-import { useTheme } from '@mui/material/styles';
+import { alpha, useTheme } from '@mui/material/styles';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -450,22 +450,22 @@ const WarningPopup = ({
 const useChipStyles = makeStyles(makeStylesFn);
 const panelDomId = (testId) => `${testId}-panel`;
 const dimensionLabelId = (dimId) => `dimension-label-${dimId}`;
+const dynamicDrawerMixin = (theme, ...path) => R.path(["mixins", "dynamicDrawer", ...path], theme);
 const useStyles = makeStyles((theme) => ({
   label: {
-    color: theme.palette.grey[700],
     ...R.pathOr({}, ["mixins", "dynamicDrawer", "tab", "title"], theme)
   },
   frame: {
-    border: `solid 1px ${theme.palette.grey[400]}`,
-    borderRadius: theme.shape.borderRadius,
+    borderWidth: 1,
+    borderStyle: "solid",
     transition: "border-color 0.2s ease",
+    ...R.pathOr({}, ["mixins", "dynamicDrawer", "tab", "base"], theme),
     "&:hover, &:focus-within": {
-      borderColor: theme.palette.primary.main,
       ...R.pathOr({}, ["mixins", "dynamicDrawer", "tab", "frame"], theme)
     }
   },
   labelSelected: {
-    color: theme.palette.primary.main
+    ...R.pathOr({}, ["mixins", "dynamicDrawer", "tab", "selectedTitle"], theme)
   },
   chipDeleteLeft: {
     flexDirection: "row-reverse",
@@ -473,19 +473,23 @@ const useStyles = makeStyles((theme) => ({
       margin: theme.spacing(0, 0.5, 0, -0.5)
     }
   },
+  // outline for standalone chips (value, count, "All items", "Remove all").
+  // Not used inside concatenatedChips — that group already has its own
+  // outer border and dividers between items, see theme.js.
+  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.
   removeAllChip: {
-    borderRadius: 1
+    borderRadius: dynamicDrawerMixin(theme, "chips", "removeAllBorderRadius")
   },
   // #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 lines.
+  // the native title tooltip, instead of wrapping the chip over several
+  // lines. Merged wholesale from the theme (see theme.js) rather than
+  // cherry-picking maxWidth — same convention as `label`'s tab.title merge.
   ellipsisLabel: {
-    display: "block",
-    maxWidth: 220,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
+    ...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.
@@ -493,19 +497,26 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexWrap: "wrap",
     alignItems: "stretch",
-    border: `solid 1px ${theme.palette.grey[400]}`,
-    borderRadius: 3,
+    border: `solid 1px ${dynamicDrawerMixin(theme, "chips", "dividerColor")}`,
+    borderRadius: dynamicDrawerMixin(theme, "chips", "groupBorderRadius"),
     overflow: "hidden",
     "& > *": {
       margin: 0,
       borderRadius: 0,
-      borderRight: `solid 1px ${theme.palette.grey[400]}`
+      borderRight: `solid 1px ${dynamicDrawerMixin(theme, "chips", "dividerColor")}`
     },
     "& > *:last-child": {
       borderRight: "none"
     }
   },
   dimensionButton: {
+    // WCAG 2.2 SC 2.5.8 (Target Size Minimum): the label text alone is
+    // narrower than 24px tall, so the button needs an explicit minHeight
+    // rather than relying on the text's line-height. Not theme-configurable
+    // on purpose — this is an accessibility floor, not a look-and-feel knob.
+    display: "inline-flex",
+    alignItems: "center",
+    minHeight: 24,
     padding: 0,
     border: "none",
     background: "none",
@@ -518,31 +529,37 @@ const useStyles = makeStyles((theme) => ({
   toggleButton: {
     minWidth: "20px",
     padding: theme.spacing(0.2),
-    color: theme.palette.text.secondary
+    color: dynamicDrawerMixin(theme, "toggleButton", "color")
   },
   list: {
     display: "flex",
     flexDirection: "column",
+    gap: dynamicDrawerMixin(theme, "list", "gap"),
     listStyle: "none",
     margin: 0,
     padding: 0,
     overflowY: "auto",
     overflowX: "hidden",
     width: "100%",
-    borderRight: `solid 1px ${theme.palette.divider}`
+    borderRight: `solid 1px ${dynamicDrawerMixin(theme, "list", "borderColor")}`
   },
   tooltipNotice: {
     textDecoration: "underline dotted"
   },
+  // The card label text is a fixed grey[700], so the hover/selected fill
+  // can't reuse action.hover/action.selected at their usual opacity: on
+  // this OECD palette that composites to ~4.27:1 against grey[700], under
+  // WCAG 1.4.3's 4.5:1 minimum. Re-deriving the same hue at a lower, fixed
+  // alpha keeps it tenant-themed while staying readable.
   tabSelected: {
-    backgroundColor: `${theme.palette.action.hover} !important`,
+    backgroundColor: `${alpha(theme.palette.action.hover, dynamicDrawerMixin(theme, "tab", "hoverOpacity"))} !important`,
     "&:hover": {
-      backgroundColor: `${theme.palette.action.selected} !important`
+      backgroundColor: `${alpha(theme.palette.action.selected, dynamicDrawerMixin(theme, "tab", "selectedOpacity"))} !important`
     }
   },
   tab: {
     "&:hover": {
-      backgroundColor: `${theme.palette.action.selected}`
+      backgroundColor: alpha(theme.palette.action.selected, dynamicDrawerMixin(theme, "tab", "selectedOpacity"))
     }
   }
 }));
@@ -599,8 +616,13 @@ const TabPanel = (props) => {
   const drawerClasses = useStyles();
   const description = descriptionAccessor ? descriptionAccessor(item) : "";
   const hasDescription = !R.isEmpty(description || "");
-  return /* @__PURE__ */ jsx("section", { hidden: !open, id: panelId, "aria-labelledby": dimensionLabelId(R.prop("id", item)), className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel, style: {
-    width: R.prop("width", styles)
+  const sectionRef = useRef(null);
+  useEffect(() => {
+    if (open) sectionRef.current?.focus();
+  }, [open, panelId]);
+  return /* @__PURE__ */ jsx("section", { ref: sectionRef, tabIndex: -1, hidden: !open, id: panelId, "aria-labelledby": dimensionLabelId(R.prop("id", item)), className: isNarrow ? classes.tabPanelNarrow : classes.tabPanel, style: {
+    width: R.prop("width", styles),
+    height: isNarrow ? void 0 : R.prop("height", styles)
   }, ...other, children: open && /* @__PURE__ */ jsxs(Box, { sx: {
     p: 3
   }, children: [
@@ -673,10 +695,12 @@ const DimensionCard = React.forwardRef(({
     label: itemLabel,
     items,
     isNotRemovable
-  }) => /* @__PURE__ */ jsx(CustomChip, { id, parentId: dimId, label: itemLabel, items, renderer: myTooltipRenderer({
+  }, {
+    bordered = true
+  } = {}) => /* @__PURE__ */ jsx(CustomChip, { id, parentId: dimId, label: itemLabel, items, renderer: myTooltipRenderer({
     isRtl,
     labelRenderer
-  }), labelRenderer, chipClasses: cx(chipClasses.secondaryChip, chipClasses.chip, classes.chipDeleteLeft), 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), 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",
@@ -700,12 +724,16 @@ 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), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon }) : showCollapseToggle ? /* @__PURE__ */ jsxs(Fragment, { 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))(selectedItems) })
+    }, 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: [
+        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, {
+        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), labelClasses: cx(chipClasses.spaceLabel, chipClasses.formatLabel), iconClasses: chipClasses.icon, onDelete: R.is(Function, onDeleteAllDimValues) ? () => onDeleteAllDimValues(dimId, selectedItems) : void 0 }),
+      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 }),
       R.map((chip) => valueChip(chip))(selectedItems)
     ] }) })
   ] }) });
@@ -782,21 +810,26 @@ const DynamicDrawer = (props) => {
     clearSelectionKeyRef.current = clearSelectionKey;
     handleClearAllSelections();
   }, [clearSelectionKey]);
+  const openTabIdRef = useRef();
   useLayoutEffect(() => {
-    if (!openTabId) return;
+    if (!openTabId) {
+      openTabIdRef.current = openTabId;
+      return;
+    }
+    if (openTabIdRef.current === openTabId) return;
     const item = R.find((listItem) => R.prop("id", listItem) === openTabId)(list);
-    if (item && (selectedId !== openTabId || !open)) {
-      const id = R.prop("id", item);
-      const filterSelection = R.pipe(R.propOr([], id), (arr) => R.zipObj(arr, arr))(allSelection);
-      startTransition(() => {
-        setSelection({
-          ...filterSelection
-        });
-        setSelectedId(id);
-        setOpen(true);
+    if (!item) return;
+    openTabIdRef.current = openTabId;
+    const id = R.prop("id", item);
+    const filterSelection = R.pipe(R.propOr([], id), (arr) => R.zipObj(arr, arr))(allSelection);
+    startTransition(() => {
+      setSelection({
+        ...filterSelection
       });
-    }
-  }, [openTabId, list, allSelection, selectedId, open]);
+      setSelectedId(id);
+      setOpen(true);
+    });
+  }, [openTabId, list, allSelection]);
   const handleChange = (e, item) => {
     const id = R.prop("id", item);
     const filterSelection = R.pipe(R.propOr([], id), (arr) => R.zipObj(arr, arr))(allSelection);
@@ -807,6 +840,17 @@ const DynamicDrawer = (props) => {
     setSelectedId(id);
     setOpen(true);
   };
+  const handleListKeyDown = (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const target = e.target;
+    if (!target.classList?.contains(classNames.dimensionButton)) return;
+    const currentIndex = R.findIndex((item) => dimensionLabelId(R.prop("id", item)) === target.id, list);
+    if (currentIndex === -1) return;
+    e.preventDefault();
+    const delta = e.key === "ArrowDown" ? 1 : -1;
+    const nextIndex = (currentIndex + delta + list.length) % list.length;
+    document.getElementById(dimensionLabelId(R.prop("id", list[nextIndex])))?.focus();
+  };
   const applyDeselection = (dimId, valueIds) => {
     const nextMap = toggleOffSelection(dimId, valueIds);
     const nextIds = R.values(nextMap);
@@ -899,12 +943,24 @@ const DynamicDrawer = (props) => {
       // the closing overlay below is positioned, so it would paint over a
       // static header whatever the dom order: lift the whole column above it
       position: "relative",
-      zIndex: 1e3
+      zIndex: 1e3,
+      // Same height as the panel (TabPanel gets it too, see below) —
+      // fixed on the column itself, not the list, so the Apply button
+      // below is a sibling that shares this height rather than adding
+      // to it. The list is a flex child that shrinks to make room for
+      // the button (its own overflow:auto handles the rest) instead of
+      // the column growing taller than the panel when it appears.
+      height: isEditMode ? R.prop("height", styles) : void 0
     }, children: [
       header || defaultHeader,
-      /* @__PURE__ */ jsx(Box, { component: "ul", "aria-label": labels.tabs || "Filters", "data-testid": testId, className: classNames.list, sx: {
+      /* @__PURE__ */ jsx(Box, { component: "ul", "aria-label": labels.tabs || "Filters", "data-testid": testId, className: classNames.list, onKeyDown: handleListKeyDown, sx: {
         display: isHidden ? "none" : "flex",
-        height: isEditMode ? R.prop("height", styles) : "100%",
+        ...isEditMode ? {
+          flex: "1 1 0",
+          minHeight: 0
+        } : {
+          height: "100%"
+        },
         zIndex: 1e3
       }, children: R.map((item) => {
         const id = R.prop("id", item);