@plasmicpkgs/react-aria 0.0.97 → 0.0.99

package/dist/react-aria.esm.js

@@ -1,7 +1,7 @@
+import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
 import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component } from 'react';
-import { mergeProps, useFocusable } from 'react-aria';
+import { mergeProps, useLink, useHover, useFocusRing, useFocusable } from 'react-aria';
 import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, Heading, ModalOverlay, Modal, DialogTrigger, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
-import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -446,13 +446,28 @@ function createPlacementProp(componentName, overrides) {
     type: "choice",
     description: `Default placement of the ${componentName} relative to the trigger, if there is enough space`,
     options: [
-      // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825
-      "top",
       "bottom",
+      "bottom left",
+      "bottom right",
+      "bottom start",
+      "bottom end",
+      "top",
+      "top left",
+      "top right",
+      "top start",
+      "top end",
+      "left",
+      "left top",
+      "left bottom",
       "start",
+      "start top",
+      "start bottom",
+      "right",
+      "right top",
+      "right bottom",
       "end",
-      "left",
-      "right"
+      "end top",
+      "end bottom"
     ]
   }, overrides != null ? overrides : {});
 }
@@ -637,24 +652,73 @@ const BUTTON_VARIANTS = [
 ];
 const { variants: variants$h, withObservedValues: withObservedValues$e } = pickAriaComponentVariants(BUTTON_VARIANTS);
 const BaseButton = React.forwardRef(function BaseButtonInner(props, ref) {
-  const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
-  const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  const mergedProps = mergeProps(rest, {
-    type,
+  const { href } = props;
+  if (href) {
+    return /* @__PURE__ */ React.createElement(
+      LinkButton,
+      {
+        props,
+        ref
+      }
+    );
+  } else {
+    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
+    const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
+    const buttonProps = mergeProps(rest, {
+      type,
+      style: COMMON_STYLES,
+      ref
+    });
+    return /* @__PURE__ */ React.createElement(Button, __spreadValues$q({}, buttonProps), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$e(
+      children,
+      {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: isDisabled
+      },
+      plasmicUpdateVariant
+    ));
+  }
+});
+function LinkButton({
+  props,
+  ref
+}) {
+  const _a = props, { href, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["href", "children", "plasmicUpdateVariant"]);
+  const PlasmicLink = usePlasmicLink();
+  const { linkProps, isPressed } = useLink(props, ref);
+  const { hoverProps, isHovered } = useHover(props);
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing();
+  const combinedLinkProps = mergeProps(linkProps, hoverProps, focusProps, {
+    href,
+    className: props.className,
+    style: COMMON_STYLES,
     ref
   });
-  return /* @__PURE__ */ React.createElement(Button, __spreadProps$m(__spreadValues$q({}, mergedProps), { style: COMMON_STYLES }), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$e(
-    children,
-    {
-      hovered: isHovered,
-      pressed: isPressed,
-      focused: isFocused,
-      focusVisible: isFocusVisible,
-      disabled: isDisabled
-    },
-    plasmicUpdateVariant
-  ));
-});
+  return /* @__PURE__ */ React.createElement(
+    PlasmicLink,
+    __spreadProps$m(__spreadValues$q({}, combinedLinkProps), {
+      "data-focused": isFocused || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-disabled": props.isDisabled || void 0
+    }),
+    withObservedValues$e(
+      children,
+      {
+        hovered: isHovered,
+        pressed: isPressed,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        disabled: !!rest.isDisabled
+      },
+      plasmicUpdateVariant
+    )
+  );
+}
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
 function registerButton(loader, overrides) {
   registerComponentHelper(
@@ -667,11 +731,18 @@ function registerButton(loader, overrides) {
       importName: "BaseButton",
       variants: variants$h,
       defaultStyles: {
-        borderWidth: "1px",
-        borderStyle: "solid",
+        // Ensure consistent design across rendered elements (button, anchor tag).
+        backgroundColor: "#EFEFEF",
         borderColor: "black",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        color: "#000000",
+        cursor: "pointer",
+        fontFamily: "Arial",
+        fontSize: "1rem",
+        lineHeight: "1.2",
         padding: "2px 10px",
-        cursor: "pointer"
+        textDecorationLine: "none"
       },
       props: __spreadProps$m(__spreadValues$q({}, getCommonProps("button", [
         "autoFocus",
@@ -686,11 +757,22 @@ function registerButton(loader, overrides) {
             value: "Button"
           }
         },
+        href: {
+          type: "href",
+          description: "The URL this button navigates to. If present, this button is an <a> element."
+        },
+        target: {
+          type: "choice",
+          options: ["_blank", "_self", "_parent", "_top"],
+          description: "Same as target attribute of <a> element. Only applies when the href prop is present.",
+          hidden: (props) => !props.href,
+          defaultValueHint: "_self"
+        },
         submitsForm: {
           type: "boolean",
           displayName: "Submits form?",
           defaultValueHint: false,
-          hidden: (props) => Boolean(props.resetsForm),
+          hidden: (props) => Boolean(props.resetsForm) || Boolean(props.href),
           description: "Whether clicking this button should submit the enclosing form.",
           advanced: true
         },
@@ -698,7 +780,7 @@ function registerButton(loader, overrides) {
           type: "boolean",
           displayName: "Resets form?",
           defaultValueHint: false,
-          hidden: (props) => Boolean(props.submitsForm),
+          hidden: (props) => Boolean(props.submitsForm) || Boolean(props.href),
           description: "Whether clicking this button should reset the enclosing form.",
           advanced: true
         },
@@ -2939,7 +3021,7 @@ function BaseOverlayArrow({
       className
     },
     ({ placement }) => withObservedValues$9(
-      /* @__PURE__ */ React.createElement(React.Fragment, null, children),
+      children,
       {
         placementTop: placement === "top",
         placementLeft: placement === "left",