@plasmicpkgs/react-aria 0.0.109 → 0.0.111

package/dist/react-aria.esm.js

@@ -1,10 +1,11 @@
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
-import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component } from 'react';
-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 React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component, useRef, useId } from 'react';
+import { mergeProps, useLink, useHover, useFocusRing, useFocusWithin } 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, Provider, TooltipTriggerStateContext, 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';
+import { useTooltipTriggerState } from 'react-stately';
 
 var __defProp$s = Object.defineProperty;
 var __defProps$n = Object.defineProperties;
@@ -631,7 +632,7 @@ var __spreadValues$q = (a, b) => {
   return a;
 };
 var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
-var __objRest$m = (source, exclude) => {
+var __objRest$n = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -662,7 +663,7 @@ const BaseButton = React.forwardRef(function BaseButtonInner(props, ref) {
       }
     );
   } else {
-    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
+    const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$n(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
     const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
     const buttonProps = mergeProps(rest, {
       type,
@@ -686,7 +687,7 @@ function LinkButton({
   props,
   ref
 }) {
-  const _a = props, { href, children, plasmicUpdateVariant } = _a, rest = __objRest$m(_a, ["href", "children", "plasmicUpdateVariant"]);
+  const _a = props, { href, children, plasmicUpdateVariant } = _a, rest = __objRest$n(_a, ["href", "children", "plasmicUpdateVariant"]);
   const PlasmicLink = usePlasmicLink();
   const { linkProps, isPressed } = useLink(props, ref);
   const { hoverProps, isHovered } = useHover(props);
@@ -829,7 +830,7 @@ var __spreadValues$p = (a, b) => {
   return a;
 };
 var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-var __objRest$l = (source, exclude) => {
+var __objRest$m = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -859,7 +860,7 @@ function BaseCheckbox(props) {
     plasmicUpdateVariant,
     setControlContextData,
     value
-  } = _a, rest = __objRest$l(_a, [
+  } = _a, rest = __objRest$m(_a, [
     "children",
     "plasmicUpdateVariant",
     "setControlContextData",
@@ -1132,7 +1133,7 @@ var __spreadValues$o = (a, b) => {
   return a;
 };
 var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
-var __objRest$k = (source, exclude) => {
+var __objRest$l = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1145,7 +1146,7 @@ var __objRest$k = (source, exclude) => {
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children, slot, className } = _b, rest = __objRest$k(_b, ["children", "slot", "className"]);
+  var _b = _a, { children, slot, className } = _b, rest = __objRest$l(_b, ["children", "slot", "className"]);
   return /* @__PURE__ */ React.createElement(
     Text,
     __spreadProps$k(__spreadValues$o({}, extractPlasmicDataProps(rest)), {
@@ -1241,7 +1242,7 @@ var __spreadValues$m = (a, b) => {
   return a;
 };
 var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-var __objRest$j = (source, exclude) => {
+var __objRest$k = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1254,7 +1255,7 @@ var __objRest$j = (source, exclude) => {
   return target;
 };
 function BaseLabel(_a) {
-  var _b = _a, { children, className } = _b, rest = __objRest$j(_b, ["children", "className"]);
+  var _b = _a, { children, className } = _b, rest = __objRest$k(_b, ["children", "className"]);
   return /* @__PURE__ */ React.createElement(
     Label,
     __spreadProps$i(__spreadValues$m({}, extractPlasmicDataProps(rest)), {
@@ -1312,7 +1313,7 @@ var __spreadValues$l = (a, b) => {
   return a;
 };
 var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
-var __objRest$i = (source, exclude) => {
+var __objRest$j = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1329,7 +1330,7 @@ const { variants: variants$f, withObservedValues: withObservedValues$c } = pickA
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$i(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$j(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const [ids, setIds] = useState([]);
   const idManager = useMemo(() => new OptionsItemIdManager(), []);
   useEffect(() => {
@@ -1496,7 +1497,7 @@ var __spreadValues$k = (a, b) => {
   return a;
 };
 var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$h = (source, exclude) => {
+var __objRest$i = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1531,7 +1532,7 @@ function BaseInput(props) {
     autoComplete,
     value,
     className
-  } = _a, rest = __objRest$h(_a, [
+  } = _a, rest = __objRest$i(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
     "autoComplete",
@@ -1652,7 +1653,7 @@ var __spreadValues$j = (a, b) => {
   return a;
 };
 var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$g = (source, exclude) => {
+var __objRest$h = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1676,7 +1677,7 @@ const { variants: variants$d, withObservedValues: withObservedValues$b } = pickA
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
-  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$g(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
+  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$h(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
   const listboxContext = React.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
   const [registeredId, setRegisteredId] = useState();
@@ -1837,7 +1838,7 @@ var __spreadValues$i = (a, b) => {
   return a;
 };
 var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$f = (source, exclude) => {
+var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1850,7 +1851,7 @@ var __objRest$f = (source, exclude) => {
   return target;
 };
 function BaseSection(props) {
-  const _a = props, { header, items } = _a, rest = __objRest$f(_a, ["header", "items"]);
+  const _a = props, { header, items } = _a, rest = __objRest$g(_a, ["header", "items"]);
   const contextProps = React.useContext(PlasmicListBoxContext);
   const isStandalone = !contextProps;
   const section = /* @__PURE__ */ React.createElement(Section, __spreadProps$e(__spreadValues$i({}, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(Header, null, header), items);
@@ -1915,7 +1916,7 @@ var __spreadValues$h = (a, b) => {
     }
   return a;
 };
-var __objRest$e = (source, exclude) => {
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1949,7 +1950,7 @@ function BaseListBox(props) {
     selectedKeys,
     defaultSelectedKeys,
     plasmicUpdateVariant
-  } = _a, rest = __objRest$e(_a, [
+  } = _a, rest = __objRest$f(_a, [
     "setControlContextData",
     "children",
     "className",
@@ -2196,7 +2197,7 @@ var __spreadValues$g = (a, b) => {
     }
   return a;
 };
-var __objRest$d = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2221,7 +2222,7 @@ function BasePopover(props) {
     plasmicUpdateVariant,
     setControlContextData,
     matchTriggerWidth
-  } = _a, restProps = __objRest$d(_a, [
+  } = _a, restProps = __objRest$e(_a, [
     "resetClassName",
     "plasmicUpdateVariant",
     "setControlContextData",
@@ -2248,7 +2249,7 @@ function BasePopover(props) {
       // In component view, we never want to start with an empty artboard, so isOpen has to be true
       isOpen: true
     } : null
-  ), { children } = _b, mergedProps = __objRest$d(_b, ["children"]);
+  ), { children } = _b, mergedProps = __objRest$e(_b, ["children"]);
   useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       canMatchTriggerWidth: hasTrigger
@@ -2367,7 +2368,7 @@ var __spreadValues$f = (a, b) => {
   return a;
 };
 var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$c = (source, exclude) => {
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2395,7 +2396,7 @@ function BaseComboBox(props) {
     plasmicUpdateVariant,
     className,
     isOpen: _isOpen
-  } = _a, rest = __objRest$c(_a, [
+  } = _a, rest = __objRest$d(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
@@ -2615,7 +2616,7 @@ var __spreadValues$e = (a, b) => {
   return a;
 };
 var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$b = (source, exclude) => {
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2638,7 +2639,7 @@ const BaseModal = forwardRef(
       resetClassName,
       setControlContextData,
       isDismissable
-    } = _a, rest = __objRest$b(_a, [
+    } = _a, rest = __objRest$c(_a, [
       "children",
       "modalOverlayClass",
       "className",
@@ -2652,7 +2653,7 @@ const BaseModal = forwardRef(
     const isSelected = (_d = (_c = (_b = usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) == null ? void 0 : _c.isSelected) != null ? _d : false;
     const contextProps = React.useContext(PlasmicDialogTriggerContext);
     const isStandalone = !contextProps;
-    const mergedProps = mergeProps(contextProps, rest, {
+    const mergedProps = mergeProps(rest, {
       isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,
       /*
               isDismissable on canvas (non-interactive mode) causes the following two issues:
@@ -2820,7 +2821,7 @@ var __spreadValues$d = (a, b) => {
   return a;
 };
 var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$a = (source, exclude) => {
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2833,12 +2834,12 @@ var __objRest$a = (source, exclude) => {
   return target;
 };
 function BaseDialogTrigger(props) {
-  var _b, _c, _d;
-  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$a(_a, ["trigger", "dialog", "isOpen"]);
+  var _b, _c;
+  const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$b(_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$b(__spreadValues$d({}, rest), {
-    isOpen: (_d = isAutoOpen || isOpen) != null ? _d : false
+    isOpen: isAutoOpen || isOpen
   });
   return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger, dialog));
 }
@@ -2930,7 +2931,7 @@ var __spreadValues$c = (a, b) => {
   return a;
 };
 var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-var __objRest$9 = (source, exclude) => {
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2943,7 +2944,7 @@ var __objRest$9 = (source, exclude) => {
   return target;
 };
 function BaseHeading(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$9(_b, ["children"]);
+  var _b = _a, { children } = _b, rest = __objRest$a(_b, ["children"]);
   return /* @__PURE__ */ React.createElement(Heading, __spreadProps$a(__spreadValues$c({}, rest), { style: COMMON_STYLES }), children);
 }
 const HEADING_COMPONENT_NAME = makeComponentName("heading");
@@ -3070,7 +3071,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$8 = (source, exclude) => {
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3099,7 +3100,7 @@ function BaseRadio(props) {
     setControlContextData,
     plasmicUpdateVariant,
     value
-  } = _a, rest = __objRest$8(_a, [
+  } = _a, rest = __objRest$9(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
@@ -3259,7 +3260,7 @@ var __spreadValues$9 = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$7 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3274,7 +3275,7 @@ var __objRest$7 = (source, exclude) => {
 const RADIO_GROUP_VARIANTS = ["disabled", "readonly"];
 const { variants: variants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
 function BaseRadioGroup(props) {
-  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$7(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$8(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const [ids, setIds] = useState([]);
   const idManager = useMemo(() => new OptionsItemIdManager(), []);
   useEffect(() => {
@@ -3477,6 +3478,7 @@ function BaseSelect(props) {
     name,
     setControlContextData,
     plasmicUpdateVariant,
+    defaultSelectedKey,
     "aria-label": ariaLabel
   } = props;
   const idManager = useMemo(() => new OptionsItemIdManager(), []);
@@ -3505,6 +3507,7 @@ function BaseSelect(props) {
   return /* @__PURE__ */ React.createElement(
     Select,
     __spreadValues$8({
+      defaultSelectedKey,
       selectedKey,
       onSelectionChange,
       onOpenChange,
@@ -3717,7 +3720,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$6 = (source, exclude) => {
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3734,7 +3737,7 @@ const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickA
   SLIDER_OUTPUT_VARIANTS
 );
 function BaseSliderOutput(props) {
-  const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$6(_a, ["plasmicUpdateVariant", "children"]);
+  const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$7(_a, ["plasmicUpdateVariant", "children"]);
   return /* @__PURE__ */ React.createElement(SliderOutput, __spreadProps$6(__spreadValues$7({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$6(
     children,
     {
@@ -3801,7 +3804,7 @@ var __spreadValues$6 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3828,7 +3831,7 @@ function BaseSliderThumb(_a) {
     children,
     advanced,
     plasmicUpdateVariant
-  } = _b, rest = __objRest$5(_b, [
+  } = _b, rest = __objRest$6(_b, [
     "children",
     "advanced",
     "plasmicUpdateVariant"
@@ -3910,7 +3913,7 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
-var __objRest$4 = (source, exclude) => {
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3930,10 +3933,12 @@ function isMultiValueGuard(value) {
   return Array.isArray(value) && value.length > 1;
 }
 function BaseSliderTrack(props) {
+  var _b;
   const context = React.useContext(PlasmicSliderContext);
   const isStandalone = !context;
-  const _a = props, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
-  const thumbsLength = context && isMultiValueGuard(context.value) ? context.value.length : 1;
+  const _a = props, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
+  const value = (_b = context == null ? void 0 : context.value) != null ? _b : context == null ? void 0 : context.defaultValue;
+  const thumbsLength = isMultiValueGuard(value) ? value.length : 1;
   const isMultiValue = thumbsLength > 1;
   const { minIndex, maxIndex } = useMemo(() => {
     if (thumbsLength <= 1) {
@@ -3943,10 +3948,10 @@ function BaseSliderTrack(props) {
   }, [thumbsLength]);
   const thumbs = useMemo(() => {
     const thumbNodes = flattenChildren(children);
-    if (!thumbNodes || thumbNodes.length === 0 || !isDefined(context == null ? void 0 : context.value)) {
+    if (!thumbNodes || thumbNodes.length === 0) {
       return [];
     }
-    const values = isDefined(context) ? Array.isArray(context.value) ? context.value : [context.value] : [];
+    const values = isDefined(context) ? Array.isArray(value) ? value : [value] : [];
     const lastThumb = thumbNodes[thumbNodes.length - 1];
     return values.map((v, i) => {
       const currentThumb = thumbNodes[i];
@@ -3964,7 +3969,7 @@ function BaseSliderTrack(props) {
         index: i
       });
     });
-  }, [children, context == null ? void 0 : context.value]);
+  }, [children, value]);
   const track = /* @__PURE__ */ React.createElement(SliderTrack, __spreadValues$5({ style: { position: "relative" } }, rest), ({ state, isHovered }) => /* @__PURE__ */ React.createElement(React.Fragment, null, withObservedValues$4(
     /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
@@ -4079,7 +4084,7 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$3 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4096,7 +4101,7 @@ const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
 const SLIDER_VARIANTS = ["disabled"];
 const { variants: variants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(SLIDER_VARIANTS);
 function BaseSlider(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$3(_a, ["children", "plasmicUpdateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React.createElement(
     PlasmicSliderContext.Provider,
     {
@@ -4368,7 +4373,7 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$2 = (source, exclude) => {
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4391,7 +4396,7 @@ const SWITCH_VARIANTS = [
 ];
 const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SWITCH_VARIANTS);
 function BaseSwitch(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$2(_a, ["children", "plasmicUpdateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$3(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React.createElement(Switch, __spreadProps$3(__spreadValues$3({}, rest), { style: COMMON_STYLES }), ({
     isHovered,
     isPressed,
@@ -4560,7 +4565,7 @@ var __spreadValues$2 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$1 = (source, exclude) => {
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4589,7 +4594,7 @@ const inputHelpers = {
   }
 };
 function BaseTextArea(props) {
-  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$1(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, { className, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["className", "plasmicUpdateVariant", "setControlContextData"]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
@@ -4690,7 +4695,7 @@ var __spreadValues$1 = (a, b) => {
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __objRest = (source, exclude) => {
+var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4705,7 +4710,7 @@ var __objRest = (source, exclude) => {
 const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
 const { variants: variants$1, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
 function BaseTextField(props) {
-  const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
+  const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
   return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
     TextField,
     __spreadProps$1(__spreadValues$1({
@@ -4855,6 +4860,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const TOOLTIP_VARIANTS = [
   "placementTop",
   "placementBottom",
@@ -4862,79 +4879,131 @@ const TOOLTIP_VARIANTS = [
   "placementRight"
 ];
 const { variants, withObservedValues } = pickAriaComponentVariants(TOOLTIP_VARIANTS);
-function TriggerWrapper({ children, className }) {
-  const ref = React.useRef(null);
-  const { focusableProps } = useFocusable({}, ref);
+function BaseTooltip(props) {
+  if (props.isOpen !== void 0) {
+    return /* @__PURE__ */ React.createElement(ControlledBaseTooltip, __spreadValues({}, props));
+  } else {
+    return /* @__PURE__ */ React.createElement(UncontrolledBaseTooltip, __spreadValues({}, props));
+  }
+}
+function UncontrolledBaseTooltip(_a) {
+  var _b = _a, { onOpenChange } = _b, props = __objRest(_b, ["onOpenChange"]);
+  var _a2;
+  const [open, setOpen] = useState((_a2 = props.defaultOpen) != null ? _a2 : false);
+  const onOpenChangeMerged = useCallback(
+    (newOpen) => {
+      setOpen(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen);
+    },
+    [onOpenChange]
+  );
   return /* @__PURE__ */ React.createElement(
-    "div",
-    __spreadProps(__spreadValues({
-      ref,
-      className
-    }, focusableProps), {
-      style: COMMON_STYLES
-    }),
-    children
+    ControlledBaseTooltip,
+    __spreadProps(__spreadValues({}, props), {
+      isOpen: open,
+      onOpenChange: onOpenChangeMerged
+    })
   );
 }
-function BaseTooltip(props) {
-  var _a, _b, _c;
+function ControlledBaseTooltip(props) {
+  var _a, _b;
   const {
     children,
-    isDisabled,
+    isDisabled = false,
     delay,
     closeDelay,
     trigger,
     isOpen,
-    defaultOpen,
     tooltipContent,
     resetClassName,
     placement,
     offset,
     crossOffset,
     shouldFlip,
-    onOpenChange,
+    className,
+    onOpenChange = () => {
+    },
     plasmicUpdateVariant
   } = props;
   const { isSelected, selectedSlotName } = (_b = (_a = usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) != null ? _b : {};
-  const isAutoOpen = selectedSlotName !== "children" && isSelected;
-  const _isOpen = (_c = isAutoOpen || isOpen) != null ? _c : false;
-  return /* @__PURE__ */ React.createElement(
-    TooltipTrigger,
+  const isSelectedOnCanvas = selectedSlotName !== "children" && isSelected;
+  const _isOpen = isSelectedOnCanvas || isOpen;
+  const ref = useRef(null);
+  const tooltipId = useId();
+  const state = useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
+    trigger: trigger === "focus" ? trigger : void 0
+  }));
+  return /* @__PURE__ */ React.createElement(Provider, { values: [[TooltipTriggerStateContext, state]] }, /* @__PURE__ */ React.createElement(
+    TriggerWrapper,
     {
+      ref,
+      className,
+      tooltipId: _isOpen ? tooltipId : void 0,
       isDisabled,
+      onOpenChange,
+      triggerOnFocusOnly: trigger === "focus"
+    },
+    children
+  ), /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      triggerRef: ref,
+      id: tooltipId,
+      isOpen: _isOpen,
+      offset,
       delay,
       closeDelay,
-      trigger,
-      isOpen: _isOpen,
-      defaultOpen,
-      onOpenChange
+      crossOffset,
+      shouldFlip,
+      className: resetClassName,
+      onOpenChange,
+      placement
     },
-    /* @__PURE__ */ React.createElement(TriggerWrapper, { className: resetClassName }, children),
-    /* @__PURE__ */ React.createElement(
-      Tooltip,
+    ({ placement: _placement }) => withObservedValues(
+      /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
       {
-        isOpen: _isOpen,
-        offset,
-        crossOffset,
-        shouldFlip,
-        defaultOpen,
-        className: resetClassName,
-        onOpenChange,
-        placement
+        placementTop: _placement === "top",
+        placementBottom: _placement === "bottom",
+        placementLeft: _placement === "left",
+        placementRight: _placement === "right"
       },
-      ({ placement: _placement }) => withObservedValues(
-        /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
-        {
-          placementTop: _placement === "top",
-          placementBottom: _placement === "bottom",
-          placementLeft: _placement === "left",
-          placementRight: _placement === "right"
-        },
-        plasmicUpdateVariant
-      )
+      plasmicUpdateVariant
     )
-  );
+  ));
 }
+const TriggerWrapper = React.forwardRef(
+  function TriggerWrapper_({
+    children,
+    onOpenChange,
+    isDisabled,
+    triggerOnFocusOnly,
+    tooltipId,
+    className
+  }, ref) {
+    const { hoverProps } = useHover({
+      isDisabled,
+      onHoverStart: () => !triggerOnFocusOnly && onOpenChange(true),
+      onHoverEnd: () => !triggerOnFocusOnly && onOpenChange(false)
+    });
+    const { focusWithinProps } = useFocusWithin({
+      isDisabled,
+      onFocusWithin: () => {
+        onOpenChange(true);
+      },
+      onBlurWithin: () => {
+        onOpenChange(false);
+      }
+    });
+    const mergedProps = mergeProps(hoverProps, focusWithinProps, {
+      "aria-describedby": tooltipId,
+      // We expose className to allow user control over the wrapper div's styling.
+      className,
+      ref,
+      style: COMMON_STYLES
+    });
+    return /* @__PURE__ */ React.createElement("div", __spreadValues({}, mergedProps), children);
+  }
+);
 function registerTooltip(loader, overrides) {
   registerComponentHelper(
     loader,
@@ -4945,7 +5014,6 @@ function registerTooltip(loader, overrides) {
       importPath: "@plasmicpkgs/react-aria/skinny/registerTooltip",
       importName: "BaseTooltip",
       isAttachment: true,
-      styleSections: false,
       variants,
       props: __spreadProps(__spreadValues({
         children: {