@plasmicpkgs/react-aria 0.0.84 → 0.0.86

package/dist/react-aria.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
+import React, { useEffect, useCallback, useState, useMemo, 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, Heading, ModalOverlay, Modal, Dialog, DialogTrigger, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextArea, TextField, TooltipTrigger, Tooltip } from 'react-aria-components';
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmicapp/host';
@@ -554,7 +554,7 @@ const BUTTON_VARIANTS = [
   "focusVisible",
   "disabled"
 ];
-const { variants: variants$f, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(BUTTON_VARIANTS);
+const { variants: variants$g, withObservedValues: withObservedValues$d } = 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";
@@ -584,7 +584,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
-      variants: variants$f,
+      variants: variants$g,
       defaultStyles: {
         borderWidth: "1px",
         borderStyle: "solid",
@@ -689,7 +689,7 @@ const CHECKBOX_VARIANTS = [
   "readonly",
   "selected"
 ];
-const { variants: variants$e, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
+const { variants: variants$f, withObservedValues: withObservedValues$c } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
   const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$l(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const contextProps = React.useContext(PlasmicCheckboxGroupContext);
@@ -776,7 +776,7 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
-      variants: variants$e,
+      variants: variants$f,
       props: __spreadProps$e(__spreadValues$o({}, getCommonProps("checkbox", [
         "name",
         "isDisabled",
@@ -1042,7 +1042,7 @@ var __objRest$i = (source, exclude) => {
   return target;
 };
 const CHECKBOX_GROUP_VARIANTS = ["disabled", "readonly"];
-const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
+const { variants: variants$e, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
@@ -1070,7 +1070,7 @@ function registerCheckboxGroup(loader, overrides) {
       displayName: "Aria Checkbox Group",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckboxGroup",
       importName: "BaseCheckboxGroup",
-      variants: variants$d,
+      variants: variants$e,
       props: __spreadProps$a(__spreadValues$k({}, getCommonProps("checkbox group", [
         "name",
         "isDisabled",
@@ -1266,10 +1266,11 @@ var __objRest$h = (source, exclude) => {
 };
 const INPUT_VARIANTS = [
   "focused",
+  "focusVisible",
   "hovered",
   "disabled"
 ];
-const { variants: variants$c } = pickAriaComponentVariants(INPUT_VARIANTS);
+const { variants: variants$d } = pickAriaComponentVariants(INPUT_VARIANTS);
 const inputHelpers$1 = {
   states: {
     value: {
@@ -1280,65 +1281,47 @@ const inputHelpers$1 = {
   }
 };
 function BaseInput(props) {
-  var _b;
   const _a = props, {
     plasmicUpdateVariant,
     setControlContextData,
-    disabled,
     autoComplete,
-    value
+    value,
+    className
   } = _a, rest = __objRest$h(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
-    "disabled",
     "autoComplete",
-    "value"
+    "value",
+    "className"
   ]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
   const context = React.useContext(PlasmicInputContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const mergedProps = mergeProps(
-    rest,
-    {
-      value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value
+  const classNameProp = useCallback(
+    ({
+      isDisabled,
+      isFocusVisible,
+      isFocused,
+      isHovered
+    }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        hovered: isHovered
+      });
+      return className != null ? className : "";
     },
-    {
-      /**
-       * While react-aria internally does the merging of the disabled prop,
-       * we need to explicity do it here, because react-aria does it behind the scenes,
-       * whereas we need the calculated value of the disabled prop to be able to update the "disabled" CC variant.
-       *  */
-      disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
-    }
-  );
-  useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: mergedProps.disabled
-    });
-  }, [mergedProps.disabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React.createElement(
-    Input,
-    __spreadValues$j({
-      autoComplete: resolveAutoComplete(autoComplete),
-      onHoverChange: (isHovered) => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          hovered: isHovered
-        });
-      },
-      onFocus: () => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          focused: true
-        });
-      },
-      onBlur: () => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          focused: false
-        });
-      }
-    }, mergedProps)
+    [className, plasmicUpdateVariant]
   );
+  const mergedProps = mergeProps(rest, {
+    value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
+    autoComplete: resolveAutoComplete(autoComplete),
+    className: classNameProp
+  });
+  return /* @__PURE__ */ React.createElement(Input, __spreadValues$j({}, mergedProps));
 }
 const INPUT_COMPONENT_NAME = makeComponentName("input");
 function registerInput(loader, overrides) {
@@ -1350,7 +1333,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
-      variants: variants$c,
+      variants: variants$d,
       defaultStyles: {
         width: "300px",
         borderWidth: "1px",
@@ -1442,7 +1425,7 @@ const LIST_BOX_ITEM_VARIANTS = [
   "selected",
   "disabled"
 ];
-const { variants: variants$b, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
+const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
@@ -1548,7 +1531,7 @@ function registerListBoxItem(loader, overrides) {
       displayName: "Aria ListBoxItem",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBoxItem",
       importName: "BaseListBoxItem",
-      variants: variants$b,
+      variants: variants$c,
       props: {
         id: {
           type: "string",
@@ -1684,6 +1667,8 @@ var __objRest$e = (source, exclude) => {
     }
   return target;
 };
+const LISTBOX_VARIANTS = ["focused", "focusVisible"];
+const { variants: variants$b } = pickAriaComponentVariants(LISTBOX_VARIANTS);
 const listboxHelpers = {
   states: {
     selectedValue: {
@@ -1700,13 +1685,17 @@ function BaseListBox(props) {
   const _a = props, {
     setControlContextData,
     children,
+    className,
     selectedKeys,
-    defaultSelectedKeys
+    defaultSelectedKeys,
+    plasmicUpdateVariant
   } = _a, rest = __objRest$e(_a, [
     "setControlContextData",
     "children",
+    "className",
     "selectedKeys",
-    "defaultSelectedKeys"
+    "defaultSelectedKeys",
+    "plasmicUpdateVariant"
   ]);
   const context = React.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
@@ -1729,11 +1718,22 @@ function BaseListBox(props) {
       setIds(_ids);
     });
   }, []);
+  const classNameProp = useCallback(
+    ({ isFocusVisible, isFocused }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        focused: isFocused,
+        focusVisible: isFocusVisible
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const listbox = /* @__PURE__ */ React.createElement(
     ListBox,
     __spreadValues$g({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
-      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
+      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
+      className: classNameProp
     }, rest),
     children
   );
@@ -1815,6 +1815,7 @@ function registerListBox(loader, overrides) {
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
+      variants: variants$b,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
@@ -2159,16 +2160,23 @@ function BaseComboBox(props) {
     setControlContextData,
     plasmicUpdateVariant,
     className,
-    isDisabled,
     isOpen: _isOpen
   } = _a, rest = __objRest$c(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
     "className",
-    "isDisabled",
     "isOpen"
   ]);
+  const classNameProp = useCallback(
+    ({ isDisabled }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const idManager = useMemo(() => new ListBoxItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
@@ -2177,27 +2185,15 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React.createElement(
-    ComboBox,
-    __spreadValues$e({
-      isDisabled,
-      className
-    }, rest),
-    /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
-      PlasmicListBoxContext.Provider,
-      {
-        value: {
-          idManager
-        }
-      },
-      /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues$e({}, props)), children)
-    ))
-  );
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues$e({ className: classNameProp }, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+    PlasmicListBoxContext.Provider,
+    {
+      value: {
+        idManager
+      }
+    },
+    /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues$e({}, props)), children)
+  )));
 }
 function registerComboBox(loader) {
   registerComponentHelper(loader, BaseComboBox, {
@@ -2447,9 +2443,6 @@ var __objRest$a = (source, exclude) => {
     }
   return target;
 };
-const INLINE_STYLES = {
-  outline: "none"
-};
 const BaseModal = forwardRef(
   function BaseModalInner(props, ref) {
     var _b, _c, _d;
@@ -2499,14 +2492,14 @@ const BaseModal = forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const bodyInCanvas = /* @__PURE__ */ React.createElement("div", { style: INLINE_STYLES }, children);
-    const bodyInPreview = /* @__PURE__ */ React.createElement(Dialog, { style: INLINE_STYLES }, children);
+    const dialogInCanvas = /* @__PURE__ */ React.createElement("div", { className }, children);
+    const dialog = /* @__PURE__ */ React.createElement(Dialog, { className }, children);
     return /* @__PURE__ */ React.createElement(
       ModalOverlay,
       __spreadProps$8(__spreadValues$c({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React.createElement(Modal, { className }, canvasCtx ? bodyInCanvas : bodyInPreview)
+      /* @__PURE__ */ React.createElement(Modal, null, canvasCtx ? dialogInCanvas : dialog)
     );
   }
 );
@@ -3068,7 +3061,11 @@ const BaseSelectValue = (props) => {
   return /* @__PURE__ */ React.createElement(SelectValue, { className }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? placeholder : selectedText));
 };
 const SELECT_NAME = makeComponentName("select");
-const SELECT_VARIANTS = ["disabled"];
+const SELECT_VARIANTS = [
+  "focused",
+  "focusVisible",
+  "disabled"
+];
 const { variants: SELECT_VARIANTS_DATA } = pickAriaComponentVariants(SELECT_VARIANTS);
 function BaseSelect(props) {
   const {
@@ -3093,11 +3090,21 @@ function BaseSelect(props) {
       });
     });
   }, []);
-  useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
+  const classNameProp = useCallback(
+    ({
+      isDisabled: isDisabled2,
+      isFocusVisible,
+      isFocused
+    }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled2,
+        focused: isFocused,
+        focusVisible: isFocusVisible
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   return /* @__PURE__ */ React.createElement(
     Select,
     __spreadValues$8({
@@ -3105,7 +3112,7 @@ function BaseSelect(props) {
       onSelectionChange,
       onOpenChange,
       isDisabled,
-      className,
+      className: classNameProp,
       style,
       name,
       disabledKeys,
@@ -4185,6 +4192,7 @@ var __objRest$1 = (source, exclude) => {
 };
 const TEXTAREA_VARIANTS = [
   "focused",
+  "focusVisible",
   "hovered",
   "disabled"
 ];
@@ -4199,40 +4207,32 @@ const inputHelpers = {
   }
 };
 function BaseTextArea(props) {
-  var _b;
-  const _a = props, { disabled, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$1(_a, ["disabled", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$1(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
-  const mergedProps = mergeProps(rest, {
-    disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
-  });
-  useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: mergedProps.disabled
-    });
-  }, [mergedProps.disabled, plasmicUpdateVariant]);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  return /* @__PURE__ */ React.createElement(
-    TextArea,
-    __spreadValues$2({
-      onFocus: () => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          focused: true
-        });
-      },
-      onBlur: () => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          focused: false
-        });
-      },
-      onHoverChange: (isHovered) => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          hovered: isHovered
-        });
-      }
-    }, mergedProps)
+  const classNameProp = useCallback(
+    ({
+      isDisabled,
+      isFocusVisible,
+      isFocused,
+      isHovered
+    }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        hovered: isHovered
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
   );
+  const mergedProps = mergeProps(rest, {
+    className: classNameProp
+  });
+  return /* @__PURE__ */ React.createElement(TextArea, __spreadValues$2({}, mergedProps));
 }
 function registerTextArea(loader, overrides) {
   registerComponentHelper(