storybook 9.0.0-alpha.20 → 9.0.0-alpha.21

package/dist/highlight/index.cjs

@@ -1,27 +1,27 @@
 "use strict";
-var H = Object.defineProperty;
-var T = Object.getOwnPropertyDescriptor;
+var I = Object.defineProperty;
+var G = Object.getOwnPropertyDescriptor;
 var _ = Object.getOwnPropertyNames;
-var i = Object.prototype.hasOwnProperty;
-var x = (o, t) => {
-  for (var r in t)
-    H(o, r, { get: t[r], enumerable: !0 });
-}, E = (o, t, r, s) => {
+var n = Object.prototype.hasOwnProperty;
+var L = (o, t) => {
+  for (var H in t)
+    I(o, H, { get: t[H], enumerable: !0 });
+}, T = (o, t, H, s) => {
   if (t && typeof t == "object" || typeof t == "function")
     for (let e of _(t))
-      !i.call(o, e) && e !== r && H(o, e, { get: () => t[e], enumerable: !(s = T(t, e)) || s.enumerable });
+      !n.call(o, e) && e !== H && I(o, e, { get: () => t[e], enumerable: !(s = G(t, e)) || s.enumerable });
   return o;
 };
-var c = (o) => E(H({}, "__esModule", { value: !0 }), o);
+var c = (o) => T(I({}, "__esModule", { value: !0 }), o);
 
 // src/highlight/index.ts
-var h = {};
-x(h, {
-  HIGHLIGHT: () => p,
-  RESET_HIGHLIGHT: () => G,
-  SCROLL_INTO_VIEW: () => L
+var x = {};
+L(x, {
+  HIGHLIGHT: () => i,
+  RESET_HIGHLIGHT: () => p,
+  SCROLL_INTO_VIEW: () => E
 });
-module.exports = c(h);
+module.exports = c(x);
 
 // src/highlight/constants.ts
-var I = "storybook/highlight", p = `${I}/add`, G = `${I}/reset`, L = `${I}/scroll-into-view`;
+var r = "storybook/highlight", i = `${r}/add`, l = `${r}/remove`, p = `${r}/reset`, E = `${r}/scroll-into-view`;

package/dist/highlight/index.d.ts

@@ -13,5 +13,49 @@ interface HighlightParameters {
         disable?: boolean;
     };
 }
+interface HighlightOptions {
+    /** Unique identifier for the highlight, required if you want to remove the highlight later */
+    id?: string;
+    /** HTML selectors of the elements */
+    selectors: string[];
+    /** Priority of the highlight, higher takes precedence, defaults to 0 */
+    priority?: number;
+    /** Whether the highlight is selectable (reveals the element's HTML) */
+    selectable?: boolean;
+    /** CSS styles to apply to the highlight */
+    styles: Record<string, string>;
+    /** CSS styles to apply to the highlight when it is hovered */
+    hoverStyles?: Record<string, string>;
+    /** CSS styles to apply to the highlight when it is focused or selected */
+    focusStyles?: Record<string, string>;
+    /** Keyframes required for animations */
+    keyframes?: string;
+    /** Menu items to show when the highlight is selected (implies selectable: true) */
+    menu?: {
+        /** Unique identifier for the menu item */
+        id: string;
+        /** Title of the menu item */
+        title: string;
+        /** Description of the menu item */
+        description?: string;
+        /** Name for a channel event to trigger when the menu item is clicked */
+        clickEvent?: string;
+        /** HTML selectors for which this menu item should show (subset of `selectors`) */
+        selectors?: string[];
+    }[];
+}
+interface ClickEventDetails {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    selectors: string[];
+    element: {
+        attributes: Record<string, string>;
+        localName: string;
+        tagName: string;
+        outerHTML: string;
+    };
+}
 
-export { HIGHLIGHT, type HighlightParameters, RESET_HIGHLIGHT, SCROLL_INTO_VIEW };
+export { type ClickEventDetails, HIGHLIGHT, type HighlightOptions, type HighlightParameters, RESET_HIGHLIGHT, SCROLL_INTO_VIEW };

package/dist/highlight/index.js

@@ -1,7 +1,7 @@
 // src/highlight/constants.ts
-var t = "storybook/highlight", o = `${t}/add`, e = `${t}/reset`, r = `${t}/scroll-into-view`;
+var t = "storybook/highlight", o = `${t}/add`, r = `${t}/remove`, e = `${t}/reset`, H = `${t}/scroll-into-view`;
 export {
   o as HIGHLIGHT,
   e as RESET_HIGHLIGHT,
-  r as SCROLL_INTO_VIEW
+  H as SCROLL_INTO_VIEW
 };