@plasmicpkgs/react-aria 0.0.98 → 0.0.100

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 { 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 { mergeProps, useLink, useHover, useFocusRing, useFocusable } from 'react-aria';
+import { Button, Checkbox, Text, Label, CheckboxGroup, Input, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import { mergeProps as mergeProps$1 } from '@react-aria/utils';
 import flattenChildren from 'react-keyed-flatten-children';
@@ -652,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(
@@ -682,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",
@@ -701,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
         },
@@ -713,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
         },
@@ -2560,77 +2627,6 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
-function BaseHeading(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$b(_b, ["children"]);
-  return /* @__PURE__ */ React.createElement(Heading, __spreadProps$c(__spreadValues$e({}, rest), { style: COMMON_STYLES }), children);
-}
-const HEADING_COMPONENT_NAME = makeComponentName("heading");
-function registerHeading(loader, overrides) {
-  return registerComponentHelper(
-    loader,
-    BaseHeading,
-    {
-      name: HEADING_COMPONENT_NAME,
-      displayName: "Aria Heading",
-      importPath: "@plasmicpkgs/react-aria/skinny/registerHeading",
-      importName: "BaseHeading",
-      defaultStyles: {
-        fontSize: "20px",
-        fontWeight: "bold",
-        marginBottom: "10px"
-      },
-      props: {
-        children: {
-          type: "slot",
-          mergeWithParent: true,
-          defaultValue: {
-            type: "text",
-            value: "Heading"
-          }
-        },
-        slot: {
-          type: "string",
-          defaultValue: "title",
-          hidden: () => true
-        }
-      },
-      trapsFocus: true
-    },
-    overrides
-  );
-}
-
-var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$a = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 const BaseModal = forwardRef(
   function BaseModalInner(props, ref) {
     var _b, _c, _d;
@@ -2642,7 +2638,7 @@ const BaseModal = forwardRef(
       resetClassName,
       setControlContextData,
       isDismissable
-    } = _a, rest = __objRest$a(_a, [
+    } = _a, rest = __objRest$b(_a, [
       "children",
       "modalOverlayClass",
       "className",
@@ -2682,7 +2678,7 @@ const BaseModal = forwardRef(
     }));
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
-      __spreadProps$b(__spreadValues$d({}, mergedProps), {
+      __spreadProps$c(__spreadValues$e({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
       /* @__PURE__ */ React.createElement(Modal, { className }, children)
@@ -2701,8 +2697,9 @@ const MODAL_DEFAULT_SLOT_CONTENT = {
   },
   children: [
     {
-      type: "component",
-      name: HEADING_COMPONENT_NAME
+      type: "text",
+      value: "Heading",
+      tag: "h2"
     },
     {
       type: "text",
@@ -2804,46 +2801,46 @@ function registerModal(loader, overrides) {
   );
 }
 
-var __defProp$c = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function BaseDialogTrigger(props) {
   var _b, _c, _d;
-  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$9(_a, ["trigger", "dialog", "isOpen"]);
+  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$a(_a, ["trigger", "dialog", "isOpen"]);
   const { isSelected, selectedSlotName } = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
   const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
-  const mergedProps = __spreadProps$a(__spreadValues$c({}, rest), {
+  const mergedProps = __spreadProps$b(__spreadValues$d({}, rest), {
     isOpen: (_d = isAutoOpen || isOpen) != null ? _d : false
   });
-  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$c({}, mergedProps), trigger, dialog));
+  return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger, dialog));
 }
 function registerDialogTrigger(loader, overrides) {
   registerComponentHelper(
@@ -2914,6 +2911,77 @@ function registerDialogTrigger(loader, overrides) {
   );
 }
 
+var __defProp$c = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$9 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BaseHeading(_a) {
+  var _b = _a, { children } = _b, rest = __objRest$9(_b, ["children"]);
+  return /* @__PURE__ */ React.createElement(Heading, __spreadProps$a(__spreadValues$c({}, rest), { style: COMMON_STYLES }), children);
+}
+const HEADING_COMPONENT_NAME = makeComponentName("heading");
+function registerHeading(loader, overrides) {
+  return registerComponentHelper(
+    loader,
+    BaseHeading,
+    {
+      name: HEADING_COMPONENT_NAME,
+      displayName: "Aria Heading (deprecated)",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerHeading",
+      importName: "BaseHeading",
+      defaultStyles: {
+        fontSize: "20px",
+        fontWeight: "bold",
+        marginBottom: "10px"
+      },
+      props: {
+        children: {
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: {
+            type: "text",
+            value: "Heading"
+          }
+        },
+        slot: {
+          type: "string",
+          defaultValue: "title",
+          hidden: () => true
+        }
+      },
+      trapsFocus: true
+    },
+    overrides
+  );
+}
+
 var __defProp$b = Object.defineProperty;
 var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
 var __hasOwnProp$b = Object.prototype.hasOwnProperty;