@plasmicpkgs/react-aria 0.0.53 → 0.0.55

package/dist/react-aria.esm.js

@@ -512,7 +512,7 @@ const BUTTON_VARIANTS = [
 ];
 const { variants: variants$d, withObservedValues: withObservedValues$b } = pickAriaComponentVariants(BUTTON_VARIANTS);
 function BaseButton(props) {
-  const _a = props, { submitsForm, resetsForm, children, updateVariant } = _a, rest = __objRest$o(_a, ["submitsForm", "resetsForm", "children", "updateVariant"]);
+  const _a = props, { submitsForm, resetsForm, children, plasmicUpdateVariant } = _a, rest = __objRest$o(_a, ["submitsForm", "resetsForm", "children", "plasmicUpdateVariant"]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
   return /* @__PURE__ */ React.createElement(Button, __spreadValues$q({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible, isDisabled }) => withObservedValues$b(
     children,
@@ -523,7 +523,7 @@ function BaseButton(props) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateVariant
+    plasmicUpdateVariant
   ));
 }
 const BUTTON_COMPONENT_NAME = makeComponentName("button");
@@ -639,7 +639,7 @@ const CHECKBOX_VARIANTS = [
 ];
 const { variants: variants$c, withObservedValues: withObservedValues$a } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
-  const _a = props, { children, updateVariant, setControlContextData } = _a, rest = __objRest$n(_a, ["children", "updateVariant", "setControlContextData"]);
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$n(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
   const contextProps = React.useContext(PlasmicCheckboxGroupContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: contextProps
@@ -665,7 +665,7 @@ function BaseCheckbox(props) {
       selected: isSelected,
       readonly: isReadOnly
     },
-    updateVariant
+    plasmicUpdateVariant
   )));
 }
 const makeDefaultCheckboxChildren = ({
@@ -1065,7 +1065,12 @@ function registerLabel(loader, overrides) {
       },
       props: {
         children: {
-          type: "slot"
+          type: "slot",
+          mergeWithParent: true,
+          defaultValue: {
+            type: "text",
+            value: "Label"
+          }
         }
       },
       trapsFocus: true
@@ -1110,14 +1115,14 @@ const { variants: variants$b, withObservedValues: withObservedValues$9 } = pickA
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, updateVariant } = _a, rest = __objRest$k(_a, ["children", "updateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$k(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$l({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$9(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateVariant
+    plasmicUpdateVariant
   )));
 }
 const componentName = makeComponentName("checkboxGroup");
@@ -1145,12 +1150,10 @@ function registerCheckboxGroup(loader, overrides) {
         "isDisabled",
         "isReadOnly",
         "aria-label",
-        "children",
         "isRequired"
       ])), {
         children: {
           type: "slot",
-          mergeWithParent: true,
           defaultValue: [
             {
               type: "vbox",
@@ -1351,12 +1354,12 @@ const inputHelpers$1 = {
 function BaseInput(props) {
   var _b;
   const _a = props, {
-    updateVariant,
+    plasmicUpdateVariant,
     setControlContextData,
     disabled,
     autoComplete
   } = _a, rest = __objRest$j(_a, [
-    "updateVariant",
+    "plasmicUpdateVariant",
     "setControlContextData",
     "disabled",
     "autoComplete"
@@ -1374,26 +1377,26 @@ function BaseInput(props) {
     disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   useEffect(() => {
-    updateVariant == null ? void 0 : updateVariant({
+    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
       disabled: mergedProps.disabled
     });
-  }, [mergedProps.disabled, updateVariant]);
+  }, [mergedProps.disabled, plasmicUpdateVariant]);
   return /* @__PURE__ */ React.createElement(
     Input,
     __spreadValues$k({
       autoComplete: resolveAutoComplete(autoComplete),
       onHoverChange: (isHovered) => {
-        updateVariant == null ? void 0 : updateVariant({
+        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
           hovered: isHovered
         });
       },
       onFocus: () => {
-        updateVariant == null ? void 0 : updateVariant({
+        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
           focused: true
         });
       },
       onBlur: () => {
-        updateVariant == null ? void 0 : updateVariant({
+        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
           focused: false
         });
       }
@@ -1460,8 +1463,7 @@ function registerInput(loader, overrides) {
         helpers: inputHelpers$1,
         importName: "inputHelpers",
         importPath: "@plasmicpkgs/react-aria/skinny/registerInput"
-      },
-      trapsFocus: true
+      }
     },
     overrides
   );
@@ -1507,7 +1509,7 @@ const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickA
   LIST_BOX_ITEM_VARIANTS
 );
 function BaseListBoxItem(props) {
-  const _a = props, { children, setControlContextData, updateVariant, id } = _a, rest = __objRest$i(_a, ["children", "setControlContextData", "updateVariant", "id"]);
+  const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$i(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
   const listboxContext = React.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
   const [registeredId, setRegisteredId] = useState();
@@ -1543,7 +1545,7 @@ function BaseListBoxItem(props) {
       selected: isSelected,
       disabled: isDisabled
     },
-    updateVariant
+    plasmicUpdateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(ListBox, { selectionMode: "single" }, listboxItem);
@@ -1615,9 +1617,11 @@ function registerListBoxItem(loader, overrides) {
         },
         children: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: makeDefaultListBoxItemChildren("Item")
         }
-      }
+      },
+      trapsFocus: true
     },
     overrides
   );
@@ -1673,6 +1677,7 @@ function registerSection(loader, overrides) {
       props: {
         header: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: [
             {
               type: "text",
@@ -1681,9 +1686,11 @@ function registerSection(loader, overrides) {
           ]
         },
         items: {
-          type: "slot"
+          type: "slot",
+          mergeWithParent: true
         }
-      }
+      },
+      trapsFocus: true
     },
     overrides
   );
@@ -2043,6 +2050,7 @@ function registerPopover(loader, overrides) {
       props: {
         children: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: [
             POPOVER_ARROW_IMG,
             {
@@ -2050,7 +2058,7 @@ function registerPopover(loader, overrides) {
               styles: {
                 width: "stretch",
                 padding: 0,
-                gap: "10px"
+                rowGap: "10px"
               },
               children: [
                 {
@@ -2103,7 +2111,8 @@ function registerPopover(loader, overrides) {
           type: "themeResetClass"
         }
       },
-      styleSections: true
+      styleSections: true,
+      trapsFocus: true
     },
     overrides
   );
@@ -2289,7 +2298,8 @@ function registerComboBox(loader) {
         onChangeProp: "onOpenChange",
         variableType: "boolean"
       }
-    }
+    },
+    trapsFocus: true
   });
 }
 
@@ -2480,6 +2490,7 @@ function registerModal(loader, overrides) {
       props: {
         children: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: {
             type: "vbox",
             styles: {
@@ -2600,6 +2611,7 @@ function registerDialogTrigger(loader, overrides) {
       props: {
         trigger: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: {
             type: "component",
             name: BUTTON_COMPONENT_NAME,
@@ -2613,6 +2625,7 @@ function registerDialogTrigger(loader, overrides) {
         },
         dialog: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: {
             type: "component",
             name: MODAL_COMPONENT_NAME
@@ -2708,7 +2721,8 @@ function registerForm(loader, overrides) {
       importName: "BaseForm",
       props: {
         children: {
-          type: "slot"
+          type: "slot",
+          mergeWithParent: true
         },
         onSubmit: {
           type: "eventHandler",
@@ -2768,7 +2782,7 @@ const RADIO_VARIANTS = [
 ];
 const { variants: variants$8, withObservedValues: withObservedValues$7 } = pickAriaComponentVariants(RADIO_VARIANTS);
 function BaseRadio(props) {
-  const _a = props, { children, setControlContextData, updateVariant } = _a, rest = __objRest$9(_a, ["children", "setControlContextData", "updateVariant"]);
+  const _a = props, { children, setControlContextData, plasmicUpdateVariant } = _a, rest = __objRest$9(_a, ["children", "setControlContextData", "plasmicUpdateVariant"]);
   const contextProps = React.useContext(PlasmicRadioGroupContext);
   const isStandalone = !contextProps;
   setControlContextData == null ? void 0 : setControlContextData({
@@ -2793,7 +2807,7 @@ function BaseRadio(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateVariant
+    plasmicUpdateVariant
   ));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(RadioGroup, null, radio);
@@ -2897,14 +2911,14 @@ var __objRest$8 = (source, exclude) => {
 const RADIO_GROUP_VARIANTS = ["disabled", "readonly"];
 const { variants: variants$7, withObservedValues: withObservedValues$6 } = pickAriaComponentVariants(RADIO_GROUP_VARIANTS);
 function BaseRadioGroup(props) {
-  const _a = props, { children, updateVariant } = _a, rest = __objRest$8(_a, ["children", "updateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$8(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$6(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateVariant
+    plasmicUpdateVariant
   )));
 }
 const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
@@ -2934,7 +2948,6 @@ function registerRadioGroup(loader, overrides) {
       ])), {
         children: {
           type: "slot",
-          mergeWithParent: true,
           defaultValue: [
             {
               type: "vbox",
@@ -3137,7 +3150,8 @@ function registerSelect(loader) {
           }
         ]
       }
-    }
+    },
+    trapsFocus: true
   });
   registerComponentHelper(loader, BaseSelect, {
     name: SELECT_NAME,
@@ -3191,6 +3205,7 @@ function registerSelect(loader) {
       },
       children: {
         type: "slot",
+        mergeWithParent: true,
         defaultValue: [
           {
             type: "vbox",
@@ -3286,7 +3301,8 @@ function registerSelect(loader) {
         onChangeProp: "onOpenChange",
         variableType: "boolean"
       }
-    }
+    },
+    trapsFocus: true
   });
 }
 
@@ -3323,13 +3339,13 @@ const { variants: variants$6, withObservedValues: withObservedValues$5 } = pickA
   SLIDER_OUTPUT_VARIANTS
 );
 function BaseSliderOutput(props) {
-  const _a = props, { updateVariant, children } = _a, rest = __objRest$7(_a, ["updateVariant", "children"]);
+  const _a = props, { plasmicUpdateVariant, children } = _a, rest = __objRest$7(_a, ["plasmicUpdateVariant", "children"]);
   return /* @__PURE__ */ React.createElement(SliderOutput, __spreadValues$7({}, rest), ({ isDisabled }) => withObservedValues$5(
     children,
     {
       disabled: isDisabled
     },
-    updateVariant
+    plasmicUpdateVariant
   ));
 }
 const SLIDER_OUTPUT_COMPONENT_NAME = makeComponentName("sliderOutput");
@@ -3344,7 +3360,10 @@ function registerSliderOutput(loader, overrides) {
       importName: "BaseSliderOutput",
       variants: variants$6,
       props: {
-        children: { type: "slot" }
+        children: {
+          mergeWithParent: true,
+          type: "slot"
+        }
       },
       trapsFocus: true
     },
@@ -3413,11 +3432,11 @@ function BaseSliderThumb(_a) {
   var _b = _a, {
     children,
     advanced,
-    updateVariant
+    plasmicUpdateVariant
   } = _b, rest = __objRest$6(_b, [
     "children",
     "advanced",
-    "updateVariant"
+    "plasmicUpdateVariant"
   ]);
   const context = React.useContext(PlasmicSliderContext);
   const mergedProps = mergeProps(context, rest);
@@ -3430,7 +3449,7 @@ function BaseSliderThumb(_a) {
       focusVisible: isFocusVisible,
       disabled: isDisabled
     },
-    updateVariant
+    plasmicUpdateVariant
   ));
   return /* @__PURE__ */ React.createElement(
     ErrorBoundary,
@@ -3472,6 +3491,7 @@ function registerSliderThumb(loader, overrides) {
         },
         children: {
           type: "slot",
+          mergeWithParent: true,
           hidden: (ps) => !ps.advanced
         }
       }),
@@ -3535,7 +3555,7 @@ function BaseSliderTrack(props) {
   const context = React.useContext(PlasmicSliderContext);
   const isStandalone = !context;
   const mergedProps = mergeProps(context, props);
-  const _a = mergedProps, { children, progressBar, updateVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "updateVariant"]);
+  const _a = mergedProps, { children, progressBar, plasmicUpdateVariant } = _a, rest = __objRest$5(_a, ["children", "progressBar", "plasmicUpdateVariant"]);
   const isMultiValue = isMultiValueGuard(mergedProps.value);
   const { minIndex, maxIndex } = useMemo(() => {
     if (!context || !Array.isArray(context.value) || context.value.length <= 1) {
@@ -3584,7 +3604,7 @@ function BaseSliderTrack(props) {
     {
       hovered: isHovered
     },
-    updateVariant
+    plasmicUpdateVariant
   )));
   if (isStandalone) {
     return /* @__PURE__ */ React.createElement(Slider, { style: { height: "100%", width: "100%" } }, track);
@@ -3612,6 +3632,11 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
       props: {
         children: {
           type: "slot",
+          /**
+           * NOTE: We don't merge with parent here, because we want to allow the user to select the thumbs without having to first select the slider track.
+           * Also, there can be more than one thumbs (e.g. in a range slider), but `mergeWithParent` only shows prop controls of the slot content if there is only one direct descendant of the slot.
+           * */
+          // mergeWithParent: true,
           displayName: "Thumbs",
           description: "The thumbs of the slider. For range slider, you can add more than one thumb.",
           allowedComponents: [sliderThumbMeta.name],
@@ -3625,6 +3650,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
         },
         progressBar: {
           type: "slot",
+          mergeWithParent: true,
           displayName: "Progress Bar",
           defaultValue: [
             {
@@ -3650,8 +3676,7 @@ function registerSliderTrack(sliderThumbMeta, loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "isHovering", type: "boolean" }]
         }
-      },
-      trapsFocus: true
+      }
     },
     overrides
   );
@@ -3693,7 +3718,7 @@ const RANGE_SLIDER_COMPONENT_NAME = makeComponentName("range-slider");
 const SLIDER_VARIANTS = ["disabled"];
 const { variants: variants$3, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(SLIDER_VARIANTS);
 function BaseSlider(props) {
-  const _a = props, { children, updateVariant } = _a, rest = __objRest$4(_a, ["children", "updateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React.createElement(
     PlasmicSliderContext.Provider,
     {
@@ -3708,7 +3733,7 @@ function BaseSlider(props) {
       {
         disabled: isDisabled
       },
-      updateVariant
+      plasmicUpdateVariant
     ))
   );
 }
@@ -3988,7 +4013,7 @@ const SWITCH_VARIANTS = [
 ];
 const { variants: variants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(SWITCH_VARIANTS);
 function BaseSwitch(props) {
-  const _a = props, { children, updateVariant } = _a, rest = __objRest$3(_a, ["children", "updateVariant"]);
+  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$3(_a, ["children", "plasmicUpdateVariant"]);
   return /* @__PURE__ */ React.createElement(Switch, __spreadValues$3({}, rest), ({
     isHovered,
     isPressed,
@@ -4008,7 +4033,7 @@ function BaseSwitch(props) {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateVariant
+    plasmicUpdateVariant
   ));
 }
 function registerSwitch(loader, overrides) {
@@ -4183,16 +4208,16 @@ const inputHelpers = {
 };
 function BaseTextArea(props) {
   var _b;
-  const _a = props, { disabled, updateVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["disabled", "updateVariant", "setControlContextData"]);
+  const _a = props, { disabled, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$2(_a, ["disabled", "plasmicUpdateVariant", "setControlContextData"]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
   const mergedProps = mergeProps(rest, {
     disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
   });
   useEffect(() => {
-    updateVariant == null ? void 0 : updateVariant({
+    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
       disabled: mergedProps.disabled
     });
-  }, [mergedProps.disabled, updateVariant]);
+  }, [mergedProps.disabled, plasmicUpdateVariant]);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
@@ -4200,17 +4225,17 @@ function BaseTextArea(props) {
     TextArea,
     __spreadValues$2({
       onFocus: () => {
-        updateVariant == null ? void 0 : updateVariant({
+        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
           focused: true
         });
       },
       onBlur: () => {
-        updateVariant == null ? void 0 : updateVariant({
+        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
           focused: false
         });
       },
       onHoverChange: (isHovered) => {
-        updateVariant == null ? void 0 : updateVariant({
+        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
           hovered: isHovered
         });
       }
@@ -4266,8 +4291,7 @@ function registerTextArea(loader, overrides) {
         helpers: inputHelpers,
         importName: "inputHelpers",
         importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea"
-      },
-      trapsFocus: true
+      }
     },
     overrides
   );
@@ -4307,14 +4331,14 @@ var __objRest$1 = (source, exclude) => {
 const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
 const { variants, withObservedValues } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
 function BaseTextField(props) {
-  const _a = props, { children, updateVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "updateVariant", "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, __spreadValues$1({ autoComplete: resolveAutoComplete(autoComplete) }, rest), ({ isDisabled, isReadOnly }) => withObservedValues(
     children,
     {
       disabled: isDisabled,
       readonly: isReadOnly
     },
-    updateVariant
+    plasmicUpdateVariant
   )));
 }
 const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
@@ -4508,6 +4532,7 @@ function registerTooltip(loader, overrides) {
       props: {
         children: {
           type: "slot",
+          mergeWithParent: true,
           defaultValue: {
             type: "text",
             value: "Hover me!"
@@ -4515,6 +4540,7 @@ function registerTooltip(loader, overrides) {
         },
         tooltipContent: {
           type: "slot",
+          mergeWithParent: true,
           displayName: "Tooltip Content",
           // NOTE: This is not applied in attachment
           defaultValue: {
@@ -4562,7 +4588,8 @@ function registerTooltip(loader, overrides) {
           onChangeProp: "onOpenChange",
           variableType: "boolean"
         }
-      }
+      },
+      trapsFocus: true
     },
     overrides
   );