@splunk/visualizations 27.4.0 → 27.5.0

package/Ellipse.js

@@ -924,7 +924,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.4.0 - 92ef39d5c",
+        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
         width,
         height,
         backgroundColor
@@ -990,7 +990,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.4.0 - 92ef39d5c"
+  "data-splunk-visualization-version": "27.5.0 - 5cfbc7064"
 })`
     position: relative;
     width: 100%;
@@ -1769,7 +1769,16 @@ var defaultImport28 = __toESM(require("@splunk/visualizations-shared/propUtils")
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
 var propUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
-// src/common/shapeUtils.ts
+// esm-externals:@splunk/react-ui/ScreenReaderContent
+var ScreenReaderContent_exports = {};
+__export(ScreenReaderContent_exports, {
+  default: () => ScreenReaderContent_default
+});
+var defaultImport29 = __toESM(require("@splunk/react-ui/ScreenReaderContent"));
+__reExport(ScreenReaderContent_exports, require("@splunk/react-ui/ScreenReaderContent"));
+var ScreenReaderContent_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+
+// src/common/shapeUtils.tsx
 var shapeOptionsMapping = {
   fillColor: "fill",
   strokeColor: "stroke",
@@ -1792,7 +1801,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/Ellipse/Ellipse.tsx
@@ -1808,18 +1862,22 @@ var EllipseVisualization = ({
   onEllipseClick,
   options
 }) => {
-  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(
     EllipseShape,
     __spreadProps(__spreadValues({
+      id: "ellipse-shape",
       cx: "50%",
       cy: "50%",
       rx: `${Number(width) / 2 - options.strokeWidth / 2}px`,
       ry: `${Number(height) / 2 - options.strokeWidth / 2}px`
     }, options), {
-      vectorEffect: "non-scaling-stroke",
-      onClick: onEllipseClick
+      vectorEffect: "non-scaling-stroke"
     })
   ));
+  if (typeof onEllipseClick === "function" && onEllipseClick !== lodash_exports.noop) {
+    return /* @__PURE__ */ react_exports.createElement(ClickableShape, { shape: "ellipse", onClick: onEllipseClick }, svgContent);
+  }
+  return svgContent;
 };
 var computeVizProps = (_a) => {
   var _b = _a, { width, height } = _b, options = __objRest(_b, ["width", "height"]);