@plasmicpkgs/react-aria 0.0.98 → 0.0.99

package/dist/react-aria.js

@@ -1,9 +1,9 @@
 'use strict';
 
+var host = require('@plasmicapp/host');
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
-var host = require('@plasmicapp/host');
 var registerComponent = require('@plasmicapp/host/registerComponent');
 var utils = require('@react-aria/utils');
 var flattenChildren = require('react-keyed-flatten-children');
@@ -660,24 +660,73 @@ const BUTTON_VARIANTS = [
 ];
 const { variants: variants$h, withObservedValues: withObservedValues$e } = pickAriaComponentVariants(BUTTON_VARIANTS);
 const BaseButton = React__default.default.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 = reactAria.mergeProps(rest, {
-    type,
+  const { href } = props;
+  if (href) {
+    return /* @__PURE__ */ React__default.default.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 = reactAria.mergeProps(rest, {
+      type,
+      style: COMMON_STYLES,
+      ref
+    });
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.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 = host.usePlasmicLink();
+  const { linkProps, isPressed } = reactAria.useLink(props, ref);
+  const { hoverProps, isHovered } = reactAria.useHover(props);
+  const { focusProps, isFocused, isFocusVisible } = reactAria.useFocusRing();
+  const combinedLinkProps = reactAria.mergeProps(linkProps, hoverProps, focusProps, {
+    href,
+    className: props.className,
+    style: COMMON_STYLES,
     ref
   });
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.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__default.default.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(
@@ -690,11 +739,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",
@@ -709,11 +765,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
         },
@@ -721,7 +788,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
         },