@plasmicpkgs/react-aria 0.0.118 → 0.0.119

package/skinny/registerTooltip.stories.esm.js

@@ -1,596 +0,0 @@
-import { PlasmicCanvasContext } from '@plasmicapp/host';
-import { fn, within, expect, waitFor, userEvent } from '@storybook/test';
-import React, { useState } from 'react';
-import { BaseButton } from './registerButton.esm.js';
-import { BaseTooltip } from './registerTooltip.esm.js';
-import 'react-aria';
-import 'react-aria-components';
-import './common-616eb178.esm.js';
-import './utils-fd88ad47.esm.js';
-import '@plasmicapp/host/registerComponent';
-import './variant-utils-4405ebb0.esm.js';
-import 'react-stately';
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const meta = {
-  title: "Components/BaseTooltip",
-  component: BaseTooltip,
-  args: {
-    onOpenChange: fn(),
-    children: /* @__PURE__ */ React.createElement("span", null, "Show tooltip"),
-    // anything can be used as a trigger
-    tooltipContent: /* @__PURE__ */ React.createElement("div", { "data-testid": "tooltip-content" }, "This is a tooltip"),
-    trigger: void 0,
-    // means that it triggers on both focus and hover
-    delay: 0,
-    closeDelay: 0
-  }
-};
-const Basic = {
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.hover(trigger);
-    await waitFor(() => {
-      var _a, _b;
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      const tooltipId = (_a = tooltip.parentElement) == null ? void 0 : _a.getAttribute("id");
-      expect(tooltipId).toBeDefined();
-      expect((_b = trigger.parentElement) == null ? void 0 : _b.getAttribute("aria-describedby")).toEqual(
-        tooltipId
-      );
-    });
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    await userEvent.unhover(trigger);
-    await waitFor(() => expect(args.onOpenChange).toHaveBeenCalledWith(false));
-    expect(args.onOpenChange).toHaveBeenCalledTimes(2);
-    await userEvent.tab();
-    await expect(trigger).not.toHaveFocus();
-    expect(args.onOpenChange).toHaveBeenCalledTimes(2);
-  }
-};
-const AlwaysOpen = {
-  args: {
-    isOpen: true
-    // Force tooltip to be open
-  },
-  play: async () => {
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-  }
-};
-const FocusTrigger = {
-  args: {
-    // TabIndex=0 makes it focusable
-    children: /* @__PURE__ */ React.createElement("span", { tabIndex: 0 }, "Show tooltip")
-    // anything can be used as a trigger
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.tab();
-    await expect(trigger).toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    await userEvent.tab();
-    await expect(trigger).not.toHaveFocus();
-    await waitFor(() => expect(args.onOpenChange).toHaveBeenCalledWith(false));
-  }
-};
-const CustomButton = (_a) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), { "data-testid": "trigger-wrapper" }), /* @__PURE__ */ React.createElement("span", { tabIndex: 0 }, children), /* @__PURE__ */ React.createElement("span", { tabIndex: 0 }, children));
-};
-const WithoutForwardRefTrigger = {
-  args: {
-    children: /* @__PURE__ */ React.createElement(CustomButton, null, "Show tooltip")
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    const triggerWrapper = canvas.getByTestId("trigger-wrapper");
-    const innerFocusableButtons = canvas.getAllByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await expect(innerFocusableButtons[0]).not.toHaveFocus();
-    await userEvent.tab();
-    expect(innerFocusableButtons[0]).toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    await userEvent.tab();
-    expect(innerFocusableButtons[0]).not.toHaveFocus();
-    expect(innerFocusableButtons[1]).toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    await userEvent.tab();
-    expect(innerFocusableButtons[1]).not.toHaveFocus();
-    expect(args.onOpenChange).toHaveBeenCalledWith(false);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.hover(triggerWrapper);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    await userEvent.unhover(triggerWrapper);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await waitFor(() => expect(args.onOpenChange).toHaveBeenCalledWith(false));
-  }
-};
-const FocusTriggerOnly = {
-  args: {
-    trigger: "focus",
-    children: /* @__PURE__ */ React.createElement("span", { tabIndex: 0 }, "Show tooltip")
-    // anything can be used as a trigger
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.hover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    expect(args.onOpenChange).not.toHaveBeenCalled();
-    await userEvent.unhover(trigger);
-    await userEvent.tab();
-    await expect(trigger).toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    await userEvent.tab();
-    await waitFor(() => expect(args.onOpenChange).toHaveBeenCalledWith(false));
-  }
-};
-const TriggerWithEventHandlers = {
-  parameters: {
-    customOnFocus: fn()
-  },
-  render: (args, { parameters }) => /* @__PURE__ */ React.createElement(BaseTooltip, __spreadValues({}, args), /* @__PURE__ */ React.createElement("button", { className: "custom-class", onFocus: parameters.customOnFocus }, "Show tooltip")),
-  play: async ({ args, canvasElement, parameters }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await expect(trigger).toHaveClass("custom-class");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    expect(parameters.customOnFocus).not.toHaveBeenCalled();
-    await userEvent.tab();
-    await expect(trigger).toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(parameters.customOnFocus).toHaveBeenCalled();
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    await userEvent.tab();
-    await waitFor(() => expect(args.onOpenChange).toHaveBeenCalledWith(false));
-  }
-};
-const Disabled = {
-  args: {
-    isDisabled: true
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.tab();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    expect(args.onOpenChange).not.toHaveBeenCalled();
-    await userEvent.hover(trigger);
-  }
-};
-const Controlled = {
-  render: (_c) => {
-    var _d = _c, { isOpen: _isOpen, onOpenChange } = _d, args = __objRest(_d, ["isOpen", "onOpenChange"]);
-    const [open, setOpen] = useState(false);
-    return /* @__PURE__ */ React.createElement(
-      BaseTooltip,
-      __spreadProps(__spreadValues({}, args), {
-        isOpen: open,
-        onOpenChange: (newVal) => {
-          setOpen(newVal);
-          onOpenChange == null ? void 0 : onOpenChange(newVal);
-        }
-      })
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.hover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    await userEvent.unhover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-  }
-};
-const AriaButtonTrigger = {
-  args: {
-    children: /* @__PURE__ */ React.createElement(BaseButton, null, "Show tooltip")
-    // anything can be used as a trigger
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.hover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    expect(args.onOpenChange).toHaveBeenCalledTimes(1);
-    await userEvent.unhover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(false);
-    expect(args.onOpenChange).toHaveBeenCalledTimes(2);
-    await expect(trigger).not.toHaveFocus();
-    await userEvent.tab();
-    expect(trigger).toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    expect(args.onOpenChange).toHaveBeenCalledWith(true);
-    expect(args.onOpenChange).toHaveBeenCalledTimes(3);
-    await userEvent.tab();
-    await expect(canvas.getByText("Show tooltip")).not.toHaveFocus();
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await waitFor(() => expect(args.onOpenChange).toHaveBeenCalledWith(false));
-    expect(args.onOpenChange).toHaveBeenCalledTimes(4);
-  }
-};
-const SelectedInCanvas = {
-  render: (_e) => {
-    var _f = _e, args = __objRest(_f, ["__plasmic_selection_prop__"]);
-    const [selected, setSelected] = useState(false);
-    const [selectedSlotName, setSelectedSlotName] = useState("");
-    return (
-      // Simulate Plasmic canvas envirnment
-      /* @__PURE__ */ React.createElement(
-        PlasmicCanvasContext.Provider,
-        {
-          value: {
-            componentName: "test",
-            globalVariants: {}
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          "style",
-          {
-            dangerouslySetInnerHTML: {
-              __html: `
-            .trigger {
-              display: inline-block;
-            }
-        `
-            }
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          BaseTooltip,
-          __spreadProps(__spreadValues({}, args), {
-            __plasmic_selection_prop__: {
-              isSelected: selected,
-              selectedSlotName
-            },
-            className: "trigger"
-          })
-        ),
-        /* @__PURE__ */ React.createElement("button", { onClick: () => setSelected((prev) => !prev) }, "Toggle selection"),
-        /* @__PURE__ */ React.createElement("button", { onClick: () => setSelectedSlotName("children") }, "Select trigger"),
-        /* @__PURE__ */ React.createElement("button", { onClick: () => setSelectedSlotName("some other slot") }, "Select other slot")
-      )
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const toggleSelectionBtn = canvas.getByText("Toggle selection");
-    const triggerSelectionBtn = canvas.getByText("Select trigger");
-    const otherSlotSelectionBtn = canvas.getByText("Select other slot");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    await userEvent.click(triggerSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(otherSlotSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).toBeInTheDocument()
-    );
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument(),
-      { timeout: 1100 }
-    );
-  }
-};
-const TooltipPositionInCanvas = {
-  render: (args) => {
-    const [className, setClassName] = useState("trigger");
-    const [selected, setSelected] = useState(false);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      "style",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `
-            .trigger {
-              display: inline-block;
-            }
-          .trigger-right {
-            position: absolute;
-            right: 0;
-          }
-        `
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      PlasmicCanvasContext.Provider,
-      {
-        value: {
-          componentName: "test",
-          globalVariants: {}
-        }
-      },
-      /* @__PURE__ */ React.createElement("button", { onClick: () => setClassName("trigger trigger-right") }, "Move right"),
-      /* @__PURE__ */ React.createElement("button", { onClick: () => setClassName("trigger") }, "Move back"),
-      /* @__PURE__ */ React.createElement("button", { onClick: () => setSelected((prev) => !prev) }, "Toggle selection"),
-      /* @__PURE__ */ React.createElement(
-        BaseTooltip,
-        __spreadProps(__spreadValues({}, args), {
-          className,
-          __plasmic_selection_prop__: {
-            isSelected: selected
-          }
-        })
-      )
-    ));
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const moveRightBtn = canvas.getByText("Move right");
-    const moveBackBtn = canvas.getByText("Move back");
-    const toggleSelectionBtn = canvas.getByText("Toggle selection");
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(toggleSelectionBtn);
-    const initialTooltipLeftPosition = await waitFor(() => {
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      return tooltip.getBoundingClientRect().left;
-    });
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(moveRightBtn);
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(() => {
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      expect(initialTooltipLeftPosition).not.toEqual(
-        tooltip.getBoundingClientRect().left
-      );
-    });
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(moveBackBtn);
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(() => {
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      expect(initialTooltipLeftPosition).toEqual(
-        tooltip.getBoundingClientRect().left
-      );
-    });
-    await userEvent.click(toggleSelectionBtn);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-  }
-};
-const TooltipPositionInPreview = {
-  render: (args) => {
-    const [className, setClassName] = useState("trigger");
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      "style",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `
-            .trigger {
-              display: inline-block;
-            }
-          .trigger-right {
-            position: absolute;
-            right: 0;
-          }
-        `
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", { onClick: () => setClassName("trigger trigger-right") }, "Move right"), /* @__PURE__ */ React.createElement("button", { onClick: () => setClassName("trigger") }, "Move back"), /* @__PURE__ */ React.createElement(BaseTooltip, __spreadProps(__spreadValues({}, args), { className }))));
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByText("Show tooltip");
-    const moveRightBtn = canvas.getByText("Move right");
-    const moveBackBtn = canvas.getByText("Move back");
-    await userEvent.hover(trigger);
-    const initialTooltipLeftPosition = await waitFor(() => {
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      return tooltip.getBoundingClientRect().left;
-    });
-    await userEvent.unhover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(moveRightBtn);
-    await userEvent.hover(trigger);
-    await waitFor(() => {
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      expect(initialTooltipLeftPosition).not.toEqual(
-        tooltip.getBoundingClientRect().left
-      );
-    });
-    await userEvent.unhover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-    await userEvent.click(moveBackBtn);
-    await userEvent.hover(trigger);
-    await waitFor(() => {
-      const tooltip = within(document.body).getByTestId("tooltip-content");
-      expect(initialTooltipLeftPosition).toEqual(
-        tooltip.getBoundingClientRect().left
-      );
-    });
-    await userEvent.unhover(trigger);
-    await waitFor(
-      () => expect(
-        within(document.body).queryByTestId("tooltip-content")
-      ).not.toBeInTheDocument()
-    );
-  }
-};
-
-export { AlwaysOpen, AriaButtonTrigger, Basic, Controlled, Disabled, FocusTrigger, FocusTriggerOnly, SelectedInCanvas, TooltipPositionInCanvas, TooltipPositionInPreview, TriggerWithEventHandlers, WithoutForwardRefTrigger, meta as default };
-//# sourceMappingURL=registerTooltip.stories.esm.js.map