@splunk/visualizations 27.3.0 → 27.5.0

package/Rectangle.js

@@ -485,7 +485,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.3.0 - bd2e687fd",
+        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
         width,
         height,
         backgroundColor
@@ -551,7 +551,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.3.0 - bd2e687fd"
+  "data-splunk-visualization-version": "27.5.0 - 5cfbc7064"
 })`
     position: relative;
     width: 100%;
@@ -1798,7 +1798,16 @@ var defaultImport30 = __toESM(require("@splunk/visualizations-shared/propUtils")
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
 var propUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
-// src/common/shapeUtils.ts
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport31 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+
+// src/common/shapeUtils.tsx
 var shapeOptionsMapping = {
   fillColor: "fill",
   strokeColor: "stroke",
@@ -1821,7 +1830,52 @@ var getStyledShape = (shape4) => styled_components_default(shape4)`
   },
   prisma: variables_default.neutral500
 })(props)};
-    cursor: ${(props) => props.onClick ? "pointer" : "inherit"};
+`;
+function ClickableShape({ children, onClick, shape: shape4 }) {
+  const descriptionId = (0, react_exports.useMemo)(() => (0, id_exports.createDOMID)("clickable-svg-description"), []);
+  return /* @__PURE__ */ react_default.createElement(StyledDiv, null, /* @__PURE__ */ react_default.createElement(ScreenReaderContent_default, { id: descriptionId }, (0, i18n_exports._)("Click to trigger interaction")), children, /* @__PURE__ */ react_default.createElement(
+    StyledButton,
+    {
+      onClick,
+      "aria-label": shape4 === "rect" ? (0, i18n_exports._)("Rectangle visualization") : (0, i18n_exports._)("Ellipse visualization"),
+      "aria-describedby": descriptionId,
+      shape: shape4
+    }
+  ));
+}
+var StyledDiv = styled_components_default.div`
+    display: inline-grid;
+    grid-template: 1fr / 1fr;
+
+    & > * {
+        grid-row-start: 1;
+        grid-column-start: 1;
+    }
+`;
+var StyledButton = styled_components_default.button`
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    &:focus {
+        outline: none;
+        ${(props) => props.shape === "rect" ? styled_components_exports.css`
+                      box-shadow: ${variables_default.focusShadow};
+                  ` : (
+  // clip-path would clip the shadow for ellipse, so we use drop-shadow filters to simulate it
+  styled_components_exports.css`
+                      svg:has(+ &) > ellipse {
+                          filter: drop-shadow(2px 0px 1px ${variables_default.focusColor})
+                              drop-shadow(-2px 0px 1px ${variables_default.focusColor})
+                              drop-shadow(0px 2px 1px ${variables_default.focusColor})
+                              drop-shadow(0px -2px 1px ${variables_default.focusColor});
+                      }
+                  `
+)}
+    }
+    ${(props) => props.shape === "ellipse" && `
+        clip-path: ellipse(50% 50% at 50% 50%);
+    `}
 `;
 
 // src/Rectangle/Rectangle.tsx
@@ -1843,7 +1897,7 @@ var RectangleViz = (props) => {
   let { rx, ry } = options;
   rx = rx || 0;
   ry = ry || 0;
-  return /* @__PURE__ */ react_exports.createElement(SVGContainer, { width, height }, /* @__PURE__ */ react_exports.createElement(
+  const svgContent = /* @__PURE__ */ react_exports.createElement(SVGContainer, { width, height }, /* @__PURE__ */ react_exports.createElement(
     RectangleShape,
     __spreadProps(__spreadValues({}, options), {
       rx,
@@ -1852,10 +1906,13 @@ var RectangleViz = (props) => {
       y: `${strokeWidth / 2}px`,
       vectorEffect: "non-scaling-stroke",
       width: `${width - strokeWidth}px`,
-      height: `${height - strokeWidth}px`,
-      onClick: onRectangleClick
+      height: `${height - strokeWidth}px`
     })
   ));
+  if (typeof onRectangleClick === "function") {
+    return /* @__PURE__ */ react_exports.createElement(ClickableShape, { shape: "rect", onClick: onRectangleClick }, svgContent);
+  }
+  return svgContent;
 };
 var validOptions = Object.keys(config_default.optionsSchema);
 var computeVizProps = (props) => {