@plasmicpkgs/react-aria 0.0.120 → 0.0.121

package/dist/react-aria.js

@@ -854,6 +854,107 @@ const PlasmicListBoxContext = React__default.default.createContext(void 0);
 React__default.default.createContext(void 0);
 const PlasmicInputContext = React__default.default.createContext(void 0);
 
+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);
+  }
+  unsubscribe(observer) {
+    this._observers.delete(observer);
+  }
+  // Notify all observers about an event.
+  notify() {
+    this._observers.forEach((observer) => observer(this.ids));
+  }
+  get ids() {
+    return Array.from(this._ids);
+  }
+}
+const useOptionsItemId = (requestedId, idManager) => {
+  const [registeredId, setRegisteredId] = React.useState("");
+  React.useLayoutEffect(() => {
+    if (!idManager) {
+      return;
+    }
+    const localId = idManager.register(requestedId);
+    setRegisteredId(localId);
+    return () => {
+      if (localId) {
+        idManager.unregister(localId);
+      }
+    };
+  }, [requestedId, idManager]);
+  return {
+    registeredId,
+    idError: (() => {
+      if (requestedId === void 0) {
+        return "Value must be defined";
+      }
+      if (typeof requestedId !== "string") {
+        return "Value must be a string";
+      }
+      if (!requestedId.trim()) {
+        return "Value must be defined";
+      }
+      if (idManager && requestedId != registeredId) {
+        return "Value must be unique";
+      }
+      return void 0;
+    })()
+  };
+};
+function useIdManager(callback, existing) {
+  const idManager = React.useMemo(
+    () => existing != null ? existing : new OptionsItemIdManager(),
+    [existing]
+  );
+  React.useEffect(() => {
+    idManager.subscribe(callback);
+    return () => {
+      idManager.unsubscribe(callback);
+    };
+  }, [idManager, callback]);
+  return idManager;
+}
+
 var __defProp$p = Object.defineProperty;
 var __defProps$l = Object.defineProperties;
 var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
@@ -910,36 +1011,13 @@ function BaseCheckbox(props) {
     "value"
   ]);
   const contextProps = React__default.default.useContext(PlasmicCheckboxGroupContext);
-  const isStandalone = !contextProps;
-  const [registeredId, setRegisteredId] = React.useState();
-  React.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]);
+  const { registeredId, idError } = useOptionsItemId(
+    value,
+    contextProps == null ? void 0 : contextProps.idManager
+  );
   setControlContextData == null ? void 0 : setControlContextData({
     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;
-    })()
+    idError
   });
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Checkbox,
@@ -1105,58 +1183,6 @@ 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$o = Object.defineProperty;
 var __defProps$k = Object.defineProperties;
 var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
@@ -1374,18 +1400,15 @@ const { variants: variants$f, withObservedValues: withObservedValues$c } = pickA
 );
 function BaseCheckboxGroup(props) {
   const _a = props, { children, plasmicUpdateVariant, setControlContextData } = _a, rest = __objRest$j(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
-  const [ids, setIds] = React.useState([]);
-  const idManager = React.useMemo(() => new OptionsItemIdManager(), []);
-  React.useEffect(() => {
-    setControlContextData == null ? void 0 : setControlContextData({
-      values: ids
-    });
-  }, [ids, setControlContextData]);
-  React.useEffect(() => {
-    idManager.subscribe((_ids) => {
-      setIds(_ids);
-    });
-  }, [idManager]);
+  const updateIds = React.useCallback(
+    (ids) => {
+      setControlContextData == null ? void 0 : setControlContextData({
+        itemIds: ids
+      });
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   return (
     // PlasmicCheckboxGroupContext is used by BaseCheckbox
     /* @__PURE__ */ React__default.default.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$c(
@@ -1490,7 +1513,7 @@ function registerCheckboxGroup(loader, overrides) {
           editOnly: true,
           uncontrolledProp: "defaultValue",
           description: "The current value",
-          options: (_props, ctx) => (ctx == null ? void 0 : ctx.values) ? Array.from(ctx.values) : [],
+          options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
           multiSelect: true
         },
         isInvalid: {
@@ -1748,34 +1771,12 @@ function BaseListBoxItem(props) {
   const _a = props, { children, setControlContextData, plasmicUpdateVariant, id } = _a, rest = __objRest$h(_a, ["children", "setControlContextData", "plasmicUpdateVariant", "id"]);
   const listboxContext = React__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !listboxContext;
-  const [registeredId, setRegisteredId] = React.useState();
-  React.useEffect(() => {
-    if (!listboxContext) {
-      return;
-    }
-    const localId = listboxContext.idManager.register(id);
-    setRegisteredId(localId);
-    return () => {
-      listboxContext.idManager.unregister(localId);
-      setRegisteredId(void 0);
-    };
-  }, [id]);
+  const { registeredId, idError } = useOptionsItemId(
+    id,
+    listboxContext == null ? void 0 : listboxContext.idManager
+  );
   setControlContextData == null ? void 0 : setControlContextData({
-    idError: (() => {
-      if (id === void 0) {
-        return "ID must be defined";
-      }
-      if (typeof id !== "string") {
-        return "ID must be a string";
-      }
-      if (!id.trim()) {
-        return "ID must be defined";
-      }
-      if (!isStandalone && id != registeredId) {
-        return "ID must be unique";
-      }
-      return void 0;
-    })()
+    idError
   });
   const listboxItem = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.ListBoxItem,
@@ -2029,24 +2030,13 @@ function BaseListBox(props) {
   const context = React__default.default.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
   const [ids, setIds] = React.useState([]);
-  const idManager = React.useMemo(
-    () => {
-      var _a2;
-      return (_a2 = context == null ? void 0 : context.idManager) != null ? _a2 : new OptionsItemIdManager();
-    },
-    []
-  );
+  const idManager = useIdManager(setIds, context == null ? void 0 : context.idManager);
   React.useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       itemIds: ids,
       isStandalone
     });
   }, [ids, isStandalone, setControlContextData]);
-  React.useEffect(() => {
-    idManager.subscribe((_ids) => {
-      setIds(_ids);
-    });
-  }, []);
   const classNameProp = React.useCallback(
     ({ isFocusVisible, isFocused }) => {
       plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
@@ -2480,14 +2470,15 @@ function BaseComboBox(props) {
     },
     [className, plasmicUpdateVariant]
   );
-  const idManager = React.useMemo(() => new OptionsItemIdManager(), []);
-  React.useEffect(() => {
-    idManager.subscribe((ids) => {
+  const updateIds = React.useCallback(
+    (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
         itemIds: ids
       });
-    });
-  }, []);
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadProps$d(__spreadValues$f({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React__default.default.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
     PlasmicListBoxContext.Provider,
     {
@@ -3215,35 +3206,13 @@ function BaseRadio(props) {
   ]);
   const contextProps = React__default.default.useContext(PlasmicRadioGroupContext);
   const isStandalone = !contextProps;
-  const [registeredId, setRegisteredId] = React.useState("");
-  React.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]);
+  const { registeredId, idError } = useOptionsItemId(
+    value,
+    contextProps == null ? void 0 : contextProps.idManager
+  );
   setControlContextData == null ? void 0 : setControlContextData({
     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;
-    })()
+    idError
   });
   const radio = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Radio,
@@ -3383,18 +3352,15 @@ 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$8(_a, ["children", "plasmicUpdateVariant", "setControlContextData"]);
-  const [ids, setIds] = React.useState([]);
-  const idManager = React.useMemo(() => new OptionsItemIdManager(), []);
-  React.useEffect(() => {
-    setControlContextData == null ? void 0 : setControlContextData({
-      values: ids
-    });
-  }, [ids, setControlContextData]);
-  React.useEffect(() => {
-    idManager.subscribe((_ids) => {
-      setIds(_ids);
-    });
-  }, [idManager]);
+  const updateIds = React.useCallback(
+    (ids) => {
+      setControlContextData == null ? void 0 : setControlContextData({
+        itemIds: ids
+      });
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   return (
     // PlasmicRadioGroupContext is used by BaseRadio
     /* @__PURE__ */ React__default.default.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$7(
@@ -3496,7 +3462,7 @@ function registerRadioGroup(loader, overrides) {
           displayName: "Initial value",
           uncontrolledProp: "defaultValue",
           description: "The current value",
-          options: (_props, ctx) => (ctx == null ? void 0 : ctx.values) ? Array.from(ctx.values) : [],
+          options: (_props, ctx) => (ctx == null ? void 0 : ctx.itemIds) ? Array.from(ctx.itemIds) : [],
           multiSelect: false
         },
         isInvalid: {
@@ -3591,14 +3557,15 @@ function BaseSelect(props) {
     defaultSelectedKey,
     "aria-label": ariaLabel
   } = props;
-  const idManager = React.useMemo(() => new OptionsItemIdManager(), []);
-  React.useEffect(() => {
-    idManager.subscribe((ids) => {
+  const updateIds = React.useCallback(
+    (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
         itemIds: ids
       });
-    });
-  }, []);
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   const classNameProp = React.useCallback(
     ({
       isDisabled: isDisabled2,