storybook-addon-pseudo-states 10.1.0-alpha.0 → 10.1.0-alpha.10

package/dist/manager.js

@@ -10,60 +10,39 @@ import {
 import { addons, types } from "storybook/manager-api";
 
 // src/manager/PseudoStateTool.tsx
-import React, { useCallback } from "react";
-import { Form, IconButton, TooltipLinkList, WithTooltip } from "storybook/internal/components";
-import { ButtonIcon, RefreshIcon } from "@storybook/icons";
+import React from "react";
+import { Select } from "storybook/internal/components";
+import { ButtonIcon } from "@storybook/icons";
 import { useGlobals } from "storybook/manager-api";
-import { color, styled } from "storybook/theming";
-var LinkTitle = styled.span(({ active }) => ({
-  color: active ? color.secondary : "inherit"
-}));
-var options = Object.keys(PSEUDO_STATES).sort();
+var pseudoStates = Object.keys(PSEUDO_STATES).sort();
 var PseudoStateTool = /* @__PURE__ */ __name(() => {
   const [globals, updateGlobals] = useGlobals();
-  const pseudo = globals[PARAM_KEY];
-  const isActive = useCallback(
-    (option) => {
-      if (!pseudo) {
-        return false;
-      }
-      return pseudo[option] === true;
-    },
-    [pseudo]
-  );
-  const hasActive = options.some(isActive);
-  const reset = {
-    id: "reset",
-    title: "Reset pseudo states",
-    icon: React.createElement(RefreshIcon, { style: { opacity: hasActive ? 1 : 0.7 } }),
-    disabled: !hasActive,
-    onClick: /* @__PURE__ */ __name(() => updateGlobals({ [PARAM_KEY]: {} }), "onClick")
-  };
-  const toggleOption = useCallback(
-    (option) => () => {
-      const { [option]: value, ...rest } = pseudo;
-      updateGlobals({ [PARAM_KEY]: value === true ? rest : { ...rest, [option]: true } });
-    },
-    [pseudo, updateGlobals]
+  const defaultOptions = Object.keys(globals[PARAM_KEY] || {}).filter(
+    (key) => pseudoStates.includes(key)
   );
-  const links = options.map((option) => {
-    const active = isActive(option);
+  const options = pseudoStates.map((option) => {
     return {
-      id: option,
-      title: React.createElement(LinkTitle, { active }, ":", PSEUDO_STATES[option]),
-      input: React.createElement(Form.Checkbox, { checked: active, onChange: toggleOption(option) }),
-      active
+      title: `:${PSEUDO_STATES[option]}`,
+      value: option
     };
   });
   return React.createElement(
-    WithTooltip,
+    Select,
     {
-      placement: "top",
-      trigger: "click",
-      closeOnOutsideClick: true,
-      tooltip: React.createElement(TooltipLinkList, { links: [[reset], links] })
-    },
-    React.createElement(IconButton, { key: "pseudo-states", title: "Select CSS pseudo states", active: hasActive }, React.createElement(ButtonIcon, null))
+      resetLabel: "Reset pseudo states",
+      onReset: () => updateGlobals({ [PARAM_KEY]: {} }),
+      icon: React.createElement(ButtonIcon, null),
+      ariaLabel: "CSS pseudo states",
+      tooltip: "Apply CSS pseudo states",
+      defaultOptions,
+      options,
+      multiSelect: true,
+      onChange: (selected) => {
+        updateGlobals({
+          [PARAM_KEY]: selected.reduce((acc, curr) => ({ ...acc, [curr]: true }), {})
+        });
+      }
+    }
   );
 }, "PseudoStateTool");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "10.1.0-alpha.0",
+  "version": "10.1.0-alpha.10",
   "description": "Storybook Pseudo-states addon: Manipulate CSS pseudo states",
   "keywords": [
     "storybook",
@@ -61,7 +61,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.0"
+    "storybook": "^10.1.0-alpha.10"
   },
   "publishConfig": {
     "access": "public"