@plasmicpkgs/react-aria 0.0.88 → 0.0.90

package/dist/{ListBoxItemIdManager.d.ts → OptionsItemIdManager.d.ts}

@@ -1,5 +1,5 @@
 type Observer = (ids: string[]) => void;
-export declare class ListBoxItemIdManager {
+export declare class OptionsItemIdManager {
     private readonly _ids;
     private readonly _observers;
     private generateDuplicateId;

package/dist/contexts.d.ts

@@ -1,16 +1,20 @@
 import React from "react";
-import { ListBoxItemIdManager } from "./ListBoxItemIdManager";
+import { OptionsItemIdManager } from "./OptionsItemIdManager";
 import { BaseSlider } from "./registerSlider";
 export declare const PlasmicTextFieldContext: React.Context<import("./registerTextField").BaseTextFieldProps | undefined>;
-export declare const PlasmicCheckboxGroupContext: React.Context<import("./registerCheckboxGroup").BaseCheckboxGroupProps | undefined>;
-export declare const PlasmicRadioGroupContext: React.Context<import("./registerRadioGroup").BaseRadioGroupProps | undefined>;
+export declare const PlasmicCheckboxGroupContext: React.Context<(import("./registerCheckboxGroup").BaseCheckboxGroupProps & {
+    idManager: OptionsItemIdManager;
+}) | undefined>;
+export declare const PlasmicRadioGroupContext: React.Context<(import("./registerRadioGroup").BaseRadioGroupProps & {
+    idManager: OptionsItemIdManager;
+}) | undefined>;
 export declare const PlasmicDialogTriggerContext: React.Context<import("./registerDialogTrigger").BaseDialogTriggerProps | undefined>;
 export type PlasmicSliderContextType<T extends number | number[]> = React.ComponentProps<typeof BaseSlider<T>> | undefined;
 export declare const PlasmicSliderContext: React.Context<PlasmicSliderContextType<number | number[]>>;
 export declare const PlasmicLabelContext: React.Context<import("react-aria-components").LabelProps | undefined>;
 export declare const PlasmicPopoverTriggerContext: React.Context<boolean | undefined>;
 export declare const PlasmicListBoxContext: React.Context<{
-    idManager: ListBoxItemIdManager;
+    idManager: OptionsItemIdManager;
 } | undefined>;
 export declare const PlasmicSectionContext: React.Context<import("./registerSection").BaseSectionProps | undefined>;
 export declare const PlasmicInputContext: React.Context<import("./registerInput").BaseInputProps | undefined>;

package/dist/react-aria.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
+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, Heading, ModalOverlay, Modal, Dialog, 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';
@@ -777,12 +777,50 @@ const CHECKBOX_VARIANTS = [
 ];
 const { variants: variants$g, withObservedValues: withObservedValues$d } = pickAriaComponentVariants(CHECKBOX_VARIANTS);
 function BaseCheckbox(props) {
-  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$l(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const _a = props, {
+    children,
+    plasmicUpdateVariant,
+    setControlContextData,
+    value
+  } = _a, rest = __objRest$l(_a, [
+    "children",
+    "plasmicUpdateVariant",
+    "setControlContextData",
+    "value"
+  ]);
   const contextProps = React.useContext(PlasmicCheckboxGroupContext);
+  const isStandalone = !contextProps;
+  const [registeredId, setRegisteredId] = useState();
+  useEffect(() => {
+    if (!(contextProps == null ? void 0 : contextProps.idManager)) {
+      return;
+    }
+    const localId = contextProps.idManager.register(value);
+    setRegisteredId(localId);
+    return () => {
+      contextProps.idManager.unregister(localId);
+      setRegisteredId(void 0);
+    };
+  }, [value, contextProps == null ? void 0 : contextProps.idManager]);
   setControlContextData == null ? void 0 : setControlContextData({
-    parent: contextProps
+    parent: contextProps,
+    idError: (() => {
+      if (value === void 0) {
+        return "Value must be defined";
+      }
+      if (typeof value !== "string") {
+        return "Value must be a string";
+      }
+      if (!value.trim()) {
+        return "Value must be defined";
+      }
+      if (!isStandalone && value != registeredId) {
+        return "Value must be unique";
+      }
+      return void 0;
+    })()
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadValues$o({}, rest), ({
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps$f(__spreadValues$o({}, rest), { value: registeredId, key: registeredId }), ({
     isHovered,
     isPressed,
     isFocused,
@@ -882,7 +920,13 @@ function registerCheckbox(loader, overrides) {
         value: {
           type: "string",
           description: 'The value of the checkbox in "selected" state, used when submitting an HTML form.',
-          defaultValueHint: "on"
+          defaultValueHint: "on",
+          validator: (_value, _props, ctx) => {
+            if (ctx == null ? void 0 : ctx.idError) {
+              return ctx.idError;
+            }
+            return true;
+          }
         },
         isSelected: {
           type: "boolean",
@@ -931,6 +975,58 @@ function registerCheckbox(loader, overrides) {
   );
 }
 
+class OptionsItemIdManager {
+  constructor() {
+    this._ids = /* @__PURE__ */ new Set();
+    this._observers = /* @__PURE__ */ new Set();
+  }
+  generateDuplicateId(id, count = 1) {
+    const dupId = `${id} duplicate(${count})`;
+    if (this._ids.has(dupId)) {
+      return this.generateDuplicateId(id, count + 1);
+    } else {
+      return dupId;
+    }
+  }
+  generateMissingId(count = 1) {
+    const missingId = `missing(${count})`;
+    if (this._ids.has(missingId)) {
+      return this.generateMissingId(count + 1);
+    } else {
+      return missingId;
+    }
+  }
+  register(id) {
+    const idStr = id === void 0 ? void 0 : String(id).trim();
+    let newId;
+    if (!idStr) {
+      newId = this.generateMissingId();
+    } else if (this._ids.has(idStr)) {
+      newId = this.generateDuplicateId(idStr);
+    } else {
+      newId = idStr;
+    }
+    this._ids.add(newId);
+    this.notify();
+    return newId;
+  }
+  unregister(id) {
+    this._ids.delete(id);
+    this.notify();
+  }
+  subscribe(observer) {
+    this._observers.add(observer);
+    observer(this.ids);
+  }
+  // Notify all observers about an event.
+  notify() {
+    this._observers.forEach((observer) => observer(this.ids));
+  }
+  get ids() {
+    return Array.from(this._ids);
+  }
+}
+
 var __defProp$n = Object.defineProperty;
 var __defProps$e = Object.defineProperties;
 var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
@@ -1132,8 +1228,20 @@ const { variants: variants$f, withObservedValues: withObservedValues$c } = pickA
   CHECKBOX_GROUP_VARIANTS
 );
 function BaseCheckboxGroup(props) {
-  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$i(_a, ["children", "plasmicUpdateVariant"]);
-  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: rest }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$c(
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$i(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const [ids, setIds] = useState([]);
+  const idManager = useMemo(() => new OptionsItemIdManager(), []);
+  useEffect(() => {
+    setControlContextData == null ? void 0 : setControlContextData({
+      values: ids
+    });
+  }, [ids, setControlContextData]);
+  useEffect(() => {
+    idManager.subscribe((_ids) => {
+      setIds(_ids);
+    });
+  }, [idManager]);
+  return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$b(__spreadValues$k({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadValues$k({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$c(
     children,
     {
       disabled: isDisabled,
@@ -1144,10 +1252,6 @@ function BaseCheckboxGroup(props) {
 }
 const componentName = makeComponentName("checkboxGroup");
 function registerCheckboxGroup(loader, overrides) {
-  makeChildComponentName(
-    overrides == null ? void 0 : overrides.parentComponentName,
-    componentName
-  );
   registerComponentHelper(
     loader,
     BaseCheckboxGroup,
@@ -1234,10 +1338,12 @@ function registerCheckboxGroup(loader, overrides) {
           ]
         },
         value: {
-          type: "array",
+          type: "choice",
           editOnly: true,
           uncontrolledProp: "defaultValue",
-          description: "The current value"
+          description: "The current value",
+          options: (_props, ctx) => (ctx == null ? void 0 : ctx.values) ? Array.from(ctx.values) : [],
+          multiSelect: true
         },
         isInvalid: {
           displayName: "Invalid",
@@ -1270,58 +1376,6 @@ function registerCheckboxGroup(loader, overrides) {
   );
 }
 
-class ListBoxItemIdManager {
-  constructor() {
-    this._ids = /* @__PURE__ */ new Set();
-    this._observers = /* @__PURE__ */ new Set();
-  }
-  generateDuplicateId(id, count = 1) {
-    const dupId = `${id} duplicate(${count})`;
-    if (this._ids.has(dupId)) {
-      return this.generateDuplicateId(id, count + 1);
-    } else {
-      return dupId;
-    }
-  }
-  generateMissingId(count = 1) {
-    const missingId = `missing(${count})`;
-    if (this._ids.has(missingId)) {
-      return this.generateMissingId(count + 1);
-    } else {
-      return missingId;
-    }
-  }
-  register(id) {
-    const idStr = id === void 0 ? void 0 : String(id).trim();
-    let newId;
-    if (!idStr) {
-      newId = this.generateMissingId();
-    } else if (this._ids.has(idStr)) {
-      newId = this.generateDuplicateId(idStr);
-    } else {
-      newId = idStr;
-    }
-    this._ids.add(newId);
-    this.notify();
-    return newId;
-  }
-  unregister(id) {
-    this._ids.delete(id);
-    this.notify();
-  }
-  subscribe(observer) {
-    this._observers.add(observer);
-    observer(this.ids);
-  }
-  // Notify all observers about an event.
-  notify() {
-    this._observers.forEach((observer) => observer(this.ids));
-  }
-  get ids() {
-    return Array.from(this._ids);
-  }
-}
-
 var __defProp$j = Object.defineProperty;
 var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
 var __hasOwnProp$j = Object.prototype.hasOwnProperty;
@@ -1790,7 +1844,7 @@ function BaseListBox(props) {
   const idManager = useMemo(
     () => {
       var _a2;
-      return (_a2 = context == null ? void 0 : context.idManager) != null ? _a2 : new ListBoxItemIdManager();
+      return (_a2 = context == null ? void 0 : context.idManager) != null ? _a2 : new OptionsItemIdManager();
     },
     []
   );
@@ -2237,7 +2291,7 @@ function BaseComboBox(props) {
     },
     [className, plasmicUpdateVariant]
   );
-  const idManager = useMemo(() => new ListBoxItemIdManager(), []);
+  const idManager = useMemo(() => new OptionsItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
@@ -2862,13 +2916,50 @@ const RADIO_VARIANTS = [
 ];
 const { variants: variants$9, withObservedValues: withObservedValues$8 } = pickAriaComponentVariants(RADIO_VARIANTS);
 function BaseRadio(props) {
-  const _a = props, { children, setControlContextData, plasmicUpdateVariant } = _a, rest = __objRest$8(_a, ["children", "setControlContextData", "plasmicUpdateVariant"]);
+  const _a = props, {
+    children,
+    setControlContextData,
+    plasmicUpdateVariant,
+    value
+  } = _a, rest = __objRest$8(_a, [
+    "children",
+    "setControlContextData",
+    "plasmicUpdateVariant",
+    "value"
+  ]);
   const contextProps = React.useContext(PlasmicRadioGroupContext);
   const isStandalone = !contextProps;
+  const [registeredId, setRegisteredId] = useState("");
+  useEffect(() => {
+    if (!(contextProps == null ? void 0 : contextProps.idManager)) {
+      return;
+    }
+    const localId = contextProps.idManager.register(value);
+    setRegisteredId(localId);
+    return () => {
+      contextProps.idManager.unregister(localId);
+      setRegisteredId("");
+    };
+  }, [value, contextProps == null ? void 0 : contextProps.idManager]);
   setControlContextData == null ? void 0 : setControlContextData({
-    parent: contextProps
+    parent: contextProps,
+    idError: (() => {
+      if (value === void 0) {
+        return "Value must be defined";
+      }
+      if (typeof value !== "string") {
+        return "Value must be a string";
+      }
+      if (!value.trim()) {
+        return "Value must be defined";
+      }
+      if (!isStandalone && value != registeredId) {
+        return "Value must be unique";
+      }
+      return void 0;
+    })()
   });
-  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadValues$a({}, rest), ({
+  const radio = /* @__PURE__ */ React.createElement(Radio, __spreadProps$7(__spreadValues$a({}, rest), { value: registeredId, key: registeredId }), ({
     isHovered,
     isPressed,
     isFocused,
@@ -2948,7 +3039,13 @@ function registerRadio(loader, overrides) {
         },
         value: {
           type: "string",
-          description: "The value of the input element, used when submitting an HTML form."
+          description: "The value of the input element, used when submitting an HTML form.",
+          validator: (_value, _props, ctx) => {
+            if (ctx == null ? void 0 : ctx.idError) {
+              return ctx.idError;
+            }
+            return true;
+          }
         }
       }),
       trapsFocus: true
@@ -2991,8 +3088,20 @@ 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 } = _a, rest = __objRest$7(_a, ["children", "plasmicUpdateVariant"]);
-  return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$7(
+  const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$7(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
+  const [ids, setIds] = useState([]);
+  const idManager = useMemo(() => new OptionsItemIdManager(), []);
+  useEffect(() => {
+    setControlContextData == null ? void 0 : setControlContextData({
+      values: ids
+    });
+  }, [ids, setControlContextData]);
+  useEffect(() => {
+    idManager.subscribe((_ids) => {
+      setIds(_ids);
+    });
+  }, [idManager]);
+  return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$6(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadValues$9({}, rest), ({ isDisabled, isReadOnly }) => withObservedValues$7(
     children,
     {
       disabled: isDisabled,
@@ -3085,11 +3194,13 @@ function registerRadioGroup(loader, overrides) {
           ]
         },
         value: {
-          type: "string",
+          type: "choice",
           editOnly: true,
           displayName: "Initial value",
           uncontrolledProp: "defaultValue",
-          description: "The current value"
+          description: "The current value",
+          options: (_props, ctx) => (ctx == null ? void 0 : ctx.values) ? Array.from(ctx.values) : [],
+          multiSelect: false
         },
         isInvalid: {
           displayName: "Invalid",
@@ -3184,7 +3295,7 @@ function BaseSelect(props) {
     plasmicUpdateVariant,
     "aria-label": ariaLabel
   } = props;
-  const idManager = useMemo(() => new ListBoxItemIdManager(), []);
+  const idManager = useMemo(() => new OptionsItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
       setControlContextData == null ? void 0 : setControlContextData({