@plasmicpkgs/react-aria 0.0.120 → 0.0.121

package/dist/OptionsItemIdManager.d.ts

@@ -1,4 +1,5 @@
 type Observer = (ids: string[]) => void;
+/** Ensures option item IDs are unique. */
 export declare class OptionsItemIdManager {
     private readonly _ids;
     private readonly _observers;
@@ -7,7 +8,24 @@ export declare class OptionsItemIdManager {
     register(id?: unknown): string;
     unregister(id: string): void;
     subscribe(observer: Observer): void;
+    unsubscribe(observer: Observer): void;
     notify(): void;
     get ids(): string[];
 }
+/** Gets a unique option item ID. If the requested ID is already taken, returns a unique ID based on the requested ID. */
+export declare const useOptionsItemId: (requestedId?: string, idManager?: OptionsItemIdManager) => {
+    registeredId: string;
+    idError: string | undefined;
+};
+/**
+ * Hook that creates and returns an OptionsItemIdManager instance to manage unique IDs.
+ *
+ * This hook is useful for components that need to track and manage a collection of unique IDs,
+ * such as select options, radio groups, checkbox groups, etc. It handles the registration and
+ * unregistration of IDs, ensuring uniqueness and providing notifications when the collection changes.
+ *
+ * @param callback - A function that will be called with the current IDs when they change.
+ * @param existing - An existing OptionsItemIdManager instance to use. If not provided, a new instance will be created.
+ */
+export declare function useIdManager(callback: (ids: string[]) => void, existing?: OptionsItemIdManager): OptionsItemIdManager;
 export {};

package/dist/react-aria.esm.js

@@ -1,5 +1,5 @@
 import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
-import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component, useRef, useId } from 'react';
+import React, { useEffect, useState, useLayoutEffect, useMemo, useCallback, forwardRef, useImperativeHandle, Component, useRef, useId } from 'react';
 import { mergeProps, useLink, useHover, useFocusRing, useButton, useFocusWithin } from 'react-aria';
 import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipTriggerStateContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextAreaContext, TextField, Provider, Tooltip } from 'react-aria-components';
 import registerComponent from '@plasmicapp/host/registerComponent';
@@ -846,6 +846,107 @@ const PlasmicListBoxContext = React.createContext(void 0);
 React.createContext(void 0);
 const PlasmicInputContext = React.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] = useState("");
+  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 = useMemo(
+    () => existing != null ? existing : new OptionsItemIdManager(),
+    [existing]
+  );
+  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;
@@ -902,36 +1003,13 @@ function BaseCheckbox(props) {
     "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]);
+  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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Checkbox,
@@ -1097,58 +1175,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;
@@ -1366,18 +1392,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] = useState([]);
-  const idManager = useMemo(() => new OptionsItemIdManager(), []);
-  useEffect(() => {
-    setControlContextData == null ? void 0 : setControlContextData({
-      values: ids
-    });
-  }, [ids, setControlContextData]);
-  useEffect(() => {
-    idManager.subscribe((_ids) => {
-      setIds(_ids);
-    });
-  }, [idManager]);
+  const updateIds = useCallback(
+    (ids) => {
+      setControlContextData == null ? void 0 : setControlContextData({
+        itemIds: ids
+      });
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   return (
     // PlasmicCheckboxGroupContext is used by BaseCheckbox
     /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$c(
@@ -1482,7 +1505,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: {
@@ -1740,34 +1763,12 @@ function BaseListBoxItem(props) {
   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();
-  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.createElement(
     ListBoxItem,
@@ -2021,24 +2022,13 @@ function BaseListBox(props) {
   const context = React.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
   const [ids, setIds] = useState([]);
-  const idManager = 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);
   useEffect(() => {
     setControlContextData == null ? void 0 : setControlContextData({
       itemIds: ids,
       isStandalone
     });
   }, [ids, isStandalone, setControlContextData]);
-  useEffect(() => {
-    idManager.subscribe((_ids) => {
-      setIds(_ids);
-    });
-  }, []);
   const classNameProp = useCallback(
     ({ isFocusVisible, isFocused }) => {
       plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
@@ -2472,14 +2462,15 @@ function BaseComboBox(props) {
     },
     [className, plasmicUpdateVariant]
   );
-  const idManager = useMemo(() => new OptionsItemIdManager(), []);
-  useEffect(() => {
-    idManager.subscribe((ids) => {
+  const updateIds = useCallback(
+    (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
         itemIds: ids
       });
-    });
-  }, []);
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   return /* @__PURE__ */ React.createElement(ComboBox, __spreadProps$d(__spreadValues$f({ className: classNameProp }, rest), { style: COMMON_STYLES }), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
     PlasmicListBoxContext.Provider,
     {
@@ -3207,35 +3198,13 @@ function BaseRadio(props) {
   ]);
   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]);
+  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.createElement(
     Radio,
@@ -3375,18 +3344,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] = useState([]);
-  const idManager = useMemo(() => new OptionsItemIdManager(), []);
-  useEffect(() => {
-    setControlContextData == null ? void 0 : setControlContextData({
-      values: ids
-    });
-  }, [ids, setControlContextData]);
-  useEffect(() => {
-    idManager.subscribe((_ids) => {
-      setIds(_ids);
-    });
-  }, [idManager]);
+  const updateIds = useCallback(
+    (ids) => {
+      setControlContextData == null ? void 0 : setControlContextData({
+        itemIds: ids
+      });
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   return (
     // PlasmicRadioGroupContext is used by BaseRadio
     /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$7(
@@ -3488,7 +3454,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: {
@@ -3583,14 +3549,15 @@ function BaseSelect(props) {
     defaultSelectedKey,
     "aria-label": ariaLabel
   } = props;
-  const idManager = useMemo(() => new OptionsItemIdManager(), []);
-  useEffect(() => {
-    idManager.subscribe((ids) => {
+  const updateIds = useCallback(
+    (ids) => {
       setControlContextData == null ? void 0 : setControlContextData({
         itemIds: ids
       });
-    });
-  }, []);
+    },
+    [setControlContextData]
+  );
+  const idManager = useIdManager(updateIds);
   const classNameProp = useCallback(
     ({
       isDisabled: isDisabled2,