@plasmicpkgs/react-aria 0.0.84 → 0.0.86

package/dist/react-aria.js

@@ -562,7 +562,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__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";
@@ -592,7 +592,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",
@@ -697,7 +697,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__default.default.useContext(PlasmicCheckboxGroupContext);
@@ -784,7 +784,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",
@@ -1050,7 +1050,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) {
@@ -1078,7 +1078,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",
@@ -1274,10 +1274,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: {
@@ -1288,65 +1289,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__default.default.useContext(PlasmicTextFieldContext);
   const context = React__default.default.useContext(PlasmicInputContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const mergedProps = reactAria.mergeProps(
-    rest,
-    {
-      value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value
+  const classNameProp = React.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
-    }
-  );
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: mergedProps.disabled
-    });
-  }, [mergedProps.disabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.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 = reactAria.mergeProps(rest, {
+    value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
+    autoComplete: resolveAutoComplete(autoComplete),
+    className: classNameProp
+  });
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Input, __spreadValues$j({}, mergedProps));
 }
 const INPUT_COMPONENT_NAME = makeComponentName("input");
 function registerInput(loader, overrides) {
@@ -1358,7 +1341,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",
@@ -1450,7 +1433,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) {
@@ -1556,7 +1539,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",
@@ -1692,6 +1675,8 @@ var __objRest$e = (source, exclude) => {
     }
   return target;
 };
+const LISTBOX_VARIANTS = ["focused", "focusVisible"];
+const { variants: variants$b } = pickAriaComponentVariants(LISTBOX_VARIANTS);
 const listboxHelpers = {
   states: {
     selectedValue: {
@@ -1708,13 +1693,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__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
@@ -1737,11 +1726,22 @@ function BaseListBox(props) {
       setIds(_ids);
     });
   }, []);
+  const classNameProp = React.useCallback(
+    ({ isFocusVisible, isFocused }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        focused: isFocused,
+        focusVisible: isFocusVisible
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const listbox = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.ListBox,
     __spreadValues$g({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
-      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
+      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
+      className: classNameProp
     }, rest),
     children
   );
@@ -1823,6 +1823,7 @@ function registerListBox(loader, overrides) {
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
+      variants: variants$b,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
@@ -2167,16 +2168,23 @@ function BaseComboBox(props) {
     setControlContextData,
     plasmicUpdateVariant,
     className,
-    isDisabled,
     isOpen: _isOpen
   } = _a, rest = __objRest$c(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
     "className",
-    "isDisabled",
     "isOpen"
   ]);
+  const classNameProp = React.useCallback(
+    ({ isDisabled }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const idManager = React.useMemo(() => new ListBoxItemIdManager(), []);
   React.useEffect(() => {
     idManager.subscribe((ids) => {
@@ -2185,27 +2193,15 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.ComboBox,
-    __spreadValues$e({
-      isDisabled,
-      className
-    }, rest),
-    /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
-      PlasmicListBoxContext.Provider,
-      {
-        value: {
-          idManager
-        }
-      },
-      /* @__PURE__ */ React__default.default.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React__default.default.createElement(ComboboxAutoOpen, __spreadValues$e({}, props)), children)
-    ))
-  );
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadValues$e({ className: classNameProp }, rest), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
+    PlasmicListBoxContext.Provider,
+    {
+      value: {
+        idManager
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React__default.default.createElement(ComboboxAutoOpen, __spreadValues$e({}, props)), children)
+  )));
 }
 function registerComboBox(loader) {
   registerComponentHelper(loader, BaseComboBox, {
@@ -2455,9 +2451,6 @@ var __objRest$a = (source, exclude) => {
     }
   return target;
 };
-const INLINE_STYLES = {
-  outline: "none"
-};
 const BaseModal = React.forwardRef(
   function BaseModalInner(props, ref) {
     var _b, _c, _d;
@@ -2507,14 +2500,14 @@ const BaseModal = React.forwardRef(
         (_a2 = mergedProps.onOpenChange) == null ? void 0 : _a2.call(mergedProps, true);
       }
     }));
-    const bodyInCanvas = /* @__PURE__ */ React__default.default.createElement("div", { style: INLINE_STYLES }, children);
-    const bodyInPreview = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { style: INLINE_STYLES }, children);
+    const dialogInCanvas = /* @__PURE__ */ React__default.default.createElement("div", { className }, children);
+    const dialog = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Dialog, { className }, children);
     return /* @__PURE__ */ React__default.default.createElement(
       reactAriaComponents.ModalOverlay,
       __spreadProps$8(__spreadValues$c({}, mergedProps), {
         className: `${resetClassName} ${modalOverlayClass}`
       }),
-      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, { className }, canvasCtx ? bodyInCanvas : bodyInPreview)
+      /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Modal, null, canvasCtx ? dialogInCanvas : dialog)
     );
   }
 );
@@ -3076,7 +3069,11 @@ const BaseSelectValue = (props) => {
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SelectValue, { className }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.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 {
@@ -3101,11 +3098,21 @@ function BaseSelect(props) {
       });
     });
   }, []);
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
+  const classNameProp = React.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__default.default.createElement(
     reactAriaComponents.Select,
     __spreadValues$8({
@@ -3113,7 +3120,7 @@ function BaseSelect(props) {
       onSelectionChange,
       onOpenChange,
       isDisabled,
-      className,
+      className: classNameProp,
       style,
       name,
       disabledKeys,
@@ -4193,6 +4200,7 @@ var __objRest$1 = (source, exclude) => {
 };
 const TEXTAREA_VARIANTS = [
   "focused",
+  "focusVisible",
   "hovered",
   "disabled"
 ];
@@ -4207,40 +4215,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__default.default.useContext(PlasmicTextFieldContext);
-  const mergedProps = reactAria.mergeProps(rest, {
-    disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
-  });
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: mergedProps.disabled
-    });
-  }, [mergedProps.disabled, plasmicUpdateVariant]);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  return /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.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 = React.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 = reactAria.mergeProps(rest, {
+    className: classNameProp
+  });
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextArea, __spreadValues$2({}, mergedProps));
 }
 function registerTextArea(loader, overrides) {
   registerComponentHelper(