@plasmicpkgs/react-aria 0.0.84 → 0.0.85

package/skinny/registerInput.esm.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { mergeProps } from 'react-aria';
 import { Input } from 'react-aria-components';
 import { r as resolveAutoComplete, g as getCommonProps } from './common-a8f4a4b1.esm.js';
@@ -38,6 +38,7 @@ var __objRest = (source, exclude) => {
 };
 const INPUT_VARIANTS = [
   "focused",
+  "focusVisible",
   "hovered",
   "disabled"
 ];
@@ -52,65 +53,47 @@ const inputHelpers = {
   }
 };
 function BaseInput(props) {
-  var _b;
   const _a = props, {
     plasmicUpdateVariant,
     setControlContextData,
-    disabled,
     autoComplete,
-    value
+    value,
+    className
   } = _a, rest = __objRest(_a, [
     "plasmicUpdateVariant",
     "setControlContextData",
-    "disabled",
     "autoComplete",
-    "value"
+    "value",
+    "className"
   ]);
   const textFieldContext = React.useContext(PlasmicTextFieldContext);
   const context = React.useContext(PlasmicInputContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const mergedProps = mergeProps(
-    rest,
-    {
-      value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value
+  const classNameProp = useCallback(
+    ({
+      isDisabled,
+      isFocusVisible,
+      isFocused,
+      isHovered
+    }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled,
+        focused: isFocused,
+        focusVisible: isFocusVisible,
+        hovered: isHovered
+      });
+      return className != null ? className : "";
     },
-    {
-      /**
-       * While react-aria internally does the merging of the disabled prop,
-       * we need to explicity do it here, because react-aria does it behind the scenes,
-       * whereas we need the calculated value of the disabled prop to be able to update the "disabled" CC variant.
-       *  */
-      disabled: (_b = textFieldContext == null ? void 0 : textFieldContext.isDisabled) != null ? _b : disabled
-    }
-  );
-  useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: mergedProps.disabled
-    });
-  }, [mergedProps.disabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React.createElement(
-    Input,
-    __spreadValues({
-      autoComplete: resolveAutoComplete(autoComplete),
-      onHoverChange: (isHovered) => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          hovered: isHovered
-        });
-      },
-      onFocus: () => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          focused: true
-        });
-      },
-      onBlur: () => {
-        plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-          focused: false
-        });
-      }
-    }, mergedProps)
+    [className, plasmicUpdateVariant]
   );
+  const mergedProps = mergeProps(rest, {
+    value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
+    autoComplete: resolveAutoComplete(autoComplete),
+    className: classNameProp
+  });
+  return /* @__PURE__ */ React.createElement(Input, __spreadValues({}, mergedProps));
 }
 const INPUT_COMPONENT_NAME = makeComponentName("input");
 function registerInput(loader, overrides) {

package/skinny/registerInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerInput.esm.js","sources":["../src/registerInput.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport type { InputProps } from \"react-aria-components\";\nimport { Input } from \"react-aria-components\";\nimport { getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicInputContext, PlasmicTextFieldContext } from \"./contexts\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst INPUT_VARIANTS = [\n  \"focused\" as const,\n  \"hovered\" as const,\n  \"disabled\" as const,\n];\n\nconst { variants } = pickAriaComponentVariants(INPUT_VARIANTS);\n\nexport interface BaseInputProps\n  extends Omit<InputProps, \"autoComplete\">,\n    HasControlContextData,\n    WithVariants<typeof INPUT_VARIANTS> {\n  autoComplete?: string[];\n  isUncontrolled?: boolean;\n}\n\nexport const inputHelpers = {\n  states: {\n    value: {\n      onChangeArgsToValue: (e: ChangeEvent<HTMLInputElement>) => {\n        return e.target.value;\n      },\n    },\n  },\n};\n\nexport function BaseInput(props: BaseInputProps) {\n  const {\n    plasmicUpdateVariant,\n    setControlContextData,\n    disabled,\n    autoComplete,\n    value,\n    ...rest\n  } = props;\n  const textFieldContext = React.useContext(PlasmicTextFieldContext);\n  const context = React.useContext(PlasmicInputContext);\n  setControlContextData?.({\n    parent: textFieldContext,\n  });\n\n  const mergedProps = mergeProps(\n    rest,\n    {\n      value: context?.isUncontrolled ? undefined : value,\n    },\n    {\n      /**\n       * While react-aria internally does the merging of the disabled prop,\n       * we need to explicity do it here, because react-aria does it behind the scenes,\n       * whereas we need the calculated value of the disabled prop to be able to update the \"disabled\" CC variant.\n       *  */\n      disabled: textFieldContext?.isDisabled ?? disabled,\n    }\n  );\n\n  // NOTE: Aria <Input> does not support render props, neither does it provide an onDisabledChange event, so we have to manually update the disabled state\n  useEffect(() => {\n    plasmicUpdateVariant?.({\n      disabled: mergedProps.disabled,\n    });\n  }, [mergedProps.disabled, plasmicUpdateVariant]);\n\n  return (\n    <Input\n      autoComplete={resolveAutoComplete(autoComplete)}\n      onHoverChange={(isHovered) => {\n        plasmicUpdateVariant?.({\n          hovered: isHovered,\n        });\n      }}\n      onFocus={() => {\n        plasmicUpdateVariant?.({\n          focused: true,\n        });\n      }}\n      onBlur={() => {\n        plasmicUpdateVariant?.({\n          focused: false,\n        });\n      }}\n      {...mergedProps}\n    />\n  );\n}\n\nexport const INPUT_COMPONENT_NAME = makeComponentName(\"input\");\n\nexport function registerInput(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseInput>\n) {\n  registerComponentHelper(\n    loader,\n    BaseInput,\n    {\n      name: INPUT_COMPONENT_NAME,\n      displayName: \"Aria Input\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerInput\",\n      importName: \"BaseInput\",\n      variants,\n      defaultStyles: {\n        width: \"300px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n        padding: \"4px 10px\",\n      },\n      props: {\n        ...getCommonProps<BaseInputProps>(\"Input\", [\n          \"name\",\n          \"disabled\",\n          \"readOnly\",\n          \"autoFocus\",\n          \"aria-label\",\n          \"required\",\n          \"placeholder\",\n          \"value\",\n          \"maxLength\",\n          \"minLength\",\n          \"pattern\",\n          \"type\",\n          \"inputMode\",\n          \"autoComplete\",\n          \"onChange\",\n          \"onFocus\",\n          \"onBlur\",\n          \"onKeyDown\",\n          \"onKeyUp\",\n          \"onCopy\",\n          \"onCut\",\n          \"onPaste\",\n          \"onCompositionStart\",\n          \"onCompositionEnd\",\n          \"onCompositionUpdate\",\n          \"onSelect\",\n          \"onBeforeInput\",\n          \"onInput\",\n        ]),\n      },\n      states: {\n        value: {\n          type: \"writable\",\n          valueProp: \"value\",\n          onChangeProp: \"onChange\",\n          variableType: \"text\",\n          ...inputHelpers.states.value,\n        },\n      },\n\n      componentHelpers: {\n        helpers: inputHelpers,\n        importName: \"inputHelpers\",\n        importPath: \"@plasmicpkgs/react-aria/skinny/registerInput\",\n      },\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerInput.esm.js","sources":["../src/registerInput.tsx"],"sourcesContent":["import React, { ChangeEvent, useCallback } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport type { InputProps, InputRenderProps } from \"react-aria-components\";\nimport { Input } from \"react-aria-components\";\nimport { getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicInputContext, PlasmicTextFieldContext } from \"./contexts\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst INPUT_VARIANTS = [\n  \"focused\" as const,\n  \"focusVisible\" as const,\n  \"hovered\" as const,\n  \"disabled\" as const,\n];\n\nconst { variants } = pickAriaComponentVariants(INPUT_VARIANTS);\n\nexport interface BaseInputProps\n  extends Omit<InputProps, \"autoComplete\" | \"className\">,\n    HasControlContextData,\n    WithVariants<typeof INPUT_VARIANTS> {\n  autoComplete?: string[];\n  isUncontrolled?: boolean;\n  className?: string;\n}\n\nexport const inputHelpers = {\n  states: {\n    value: {\n      onChangeArgsToValue: (e: ChangeEvent<HTMLInputElement>) => {\n        return e.target.value;\n      },\n    },\n  },\n};\n\nexport function BaseInput(props: BaseInputProps) {\n  const {\n    plasmicUpdateVariant,\n    setControlContextData,\n    autoComplete,\n    value,\n    className,\n    ...rest\n  } = props;\n  const textFieldContext = React.useContext(PlasmicTextFieldContext);\n  const context = React.useContext(PlasmicInputContext);\n\n  setControlContextData?.({\n    parent: textFieldContext,\n  });\n\n  const classNameProp = useCallback(\n    ({\n      isDisabled,\n      isFocusVisible,\n      isFocused,\n      isHovered,\n    }: InputRenderProps) => {\n      plasmicUpdateVariant?.({\n        disabled: isDisabled,\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n        hovered: isHovered,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  const mergedProps = mergeProps(rest, {\n    value: context?.isUncontrolled ? undefined : value,\n    autoComplete: resolveAutoComplete(autoComplete),\n    className: classNameProp,\n  });\n\n  return <Input {...mergedProps} />;\n}\n\nexport const INPUT_COMPONENT_NAME = makeComponentName(\"input\");\n\nexport function registerInput(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseInput>\n) {\n  registerComponentHelper(\n    loader,\n    BaseInput,\n    {\n      name: INPUT_COMPONENT_NAME,\n      displayName: \"Aria Input\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerInput\",\n      importName: \"BaseInput\",\n      variants,\n      defaultStyles: {\n        width: \"300px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n        padding: \"4px 10px\",\n      },\n      props: {\n        ...getCommonProps<BaseInputProps>(\"Input\", [\n          \"name\",\n          \"disabled\",\n          \"readOnly\",\n          \"autoFocus\",\n          \"aria-label\",\n          \"required\",\n          \"placeholder\",\n          \"value\",\n          \"maxLength\",\n          \"minLength\",\n          \"pattern\",\n          \"type\",\n          \"inputMode\",\n          \"autoComplete\",\n          \"onChange\",\n          \"onFocus\",\n          \"onBlur\",\n          \"onKeyDown\",\n          \"onKeyUp\",\n          \"onCopy\",\n          \"onCut\",\n          \"onPaste\",\n          \"onCompositionStart\",\n          \"onCompositionEnd\",\n          \"onCompositionUpdate\",\n          \"onSelect\",\n          \"onBeforeInput\",\n          \"onInput\",\n        ]),\n      },\n      states: {\n        value: {\n          type: \"writable\",\n          valueProp: \"value\",\n          onChangeProp: \"onChange\",\n          variableType: \"text\",\n          ...inputHelpers.states.value,\n        },\n      },\n\n      componentHelpers: {\n        helpers: inputHelpers,\n        importName: \"inputHelpers\",\n        importPath: \"@plasmicpkgs/react-aria/skinny/registerInput\",\n      },\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":"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"}

package/skinny/{registerListBox-b47231d8.cjs.js → registerListBox-44088cfc.cjs.js}

@@ -5,6 +5,7 @@ var reactAriaComponents = require('react-aria-components');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var registerListBoxItem = require('./registerListBoxItem.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -167,6 +168,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const LISTBOX_VARIANTS = ["focused", "focusVisible"];
+const { variants } = variantUtils.pickAriaComponentVariants(LISTBOX_VARIANTS);
 const listboxHelpers = {
   states: {
     selectedValue: {
@@ -183,13 +186,17 @@ function BaseListBox(props) {
   const _a = props, {
     setControlContextData,
     children,
+    className,
     selectedKeys,
-    defaultSelectedKeys
+    defaultSelectedKeys,
+    plasmicUpdateVariant
   } = _a, rest = __objRest(_a, [
     "setControlContextData",
     "children",
+    "className",
     "selectedKeys",
-    "defaultSelectedKeys"
+    "defaultSelectedKeys",
+    "plasmicUpdateVariant"
   ]);
   const context = React__default.default.useContext(contexts.PlasmicListBoxContext);
   const isStandalone = !context;
@@ -212,11 +219,22 @@ function BaseListBox(props) {
       setIds(_ids);
     });
   }, []);
+  const classNameProp = React.useCallback(
+    ({ isFocusVisible, isFocused }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        focused: isFocused,
+        focusVisible: isFocusVisible
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const listbox = /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.ListBox,
     __spreadValues({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
-      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
+      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
+      className: classNameProp
     }, rest),
     children
   );
@@ -298,6 +316,7 @@ function registerListBox(loader, overrides) {
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
+      variants,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
@@ -408,4 +427,4 @@ exports.ListBoxItemIdManager = ListBoxItemIdManager;
 exports.listboxHelpers = listboxHelpers;
 exports.registerListBox = registerListBox;
 exports.registerSection = registerSection;
-//# sourceMappingURL=registerListBox-b47231d8.cjs.js.map
+//# sourceMappingURL=registerListBox-44088cfc.cjs.js.map

package/skinny/registerListBox-44088cfc.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerListBox-44088cfc.cjs.js","sources":["../src/ListBoxItemIdManager.ts","../src/registerSection.tsx","../src/registerListBox.tsx"],"sourcesContent":["type Observer = (ids: string[]) => void;\n\nexport class ListBoxItemIdManager {\n  private readonly _ids: Set<string> = new Set();\n  private readonly _observers: Set<Observer> = new Set();\n\n  private generateDuplicateId(id: string, count = 1): string {\n    const dupId = `${id} duplicate(${count})`;\n    if (this._ids.has(dupId)) {\n      return this.generateDuplicateId(id, count + 1);\n    } else {\n      return dupId;\n    }\n  }\n\n  private generateMissingId(count = 1): string {\n    const missingId = `missing(${count})`;\n    if (this._ids.has(missingId)) {\n      return this.generateMissingId(count + 1);\n    } else {\n      return missingId;\n    }\n  }\n\n  register(id?: unknown): string {\n    const idStr = id === undefined ? undefined : String(id).trim();\n    let newId: string;\n\n    if (!idStr) {\n      // No id is provided, so generate one\n      newId = this.generateMissingId();\n    } else if (this._ids.has(idStr)) {\n      // The provided id is already registered with another uuid (i.e. it's not unique), so just generate a new one\n      newId = this.generateDuplicateId(idStr);\n    } else {\n      // The provided id is not already registered, so use it\n      newId = idStr;\n    }\n\n    this._ids.add(newId);\n    this.notify();\n    return newId;\n  }\n\n  unregister(id: string) {\n    this._ids.delete(id);\n    this.notify();\n  }\n\n  subscribe(observer: Observer) {\n    this._observers.add(observer);\n    observer(this.ids);\n  }\n\n  // Notify all observers about an event.\n  notify() {\n    this._observers.forEach((observer) => observer(this.ids));\n  }\n\n  get ids(): string[] {\n    return Array.from(this._ids);\n  }\n}\n","import React from \"react\";\nimport { Header, Section } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { BaseListBox } from \"./registerListBox\";\nimport {\n  CodeComponentMetaOverrides,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  Styleable,\n} from \"./utils\";\n\nexport interface BaseSectionProps extends Styleable {\n  items: React.ReactNode;\n  header: React.ReactNode;\n}\n\nexport function BaseSection(props: BaseSectionProps) {\n  const { header, items, ...rest } = props;\n  const contextProps = React.useContext(PlasmicListBoxContext);\n  const isStandalone = !contextProps;\n\n  const section = (\n    <Section {...rest}>\n      <Header>{header}</Header>\n      {items}\n    </Section>\n  );\n\n  if (isStandalone) {\n    return (\n      // BaseListbox should give section a listbox context (that it can't be used without)\n      // as well as the id manager (that is needed to identify and warn about duplication of ids)\n      <BaseListBox>{section}</BaseListBox>\n    );\n  }\n\n  return section;\n}\n\nexport function registerSection(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseSection>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseSection,\n    {\n      name: makeComponentName(\"section\"),\n      displayName: \"Aria Section\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerSection\",\n      importName: \"BaseSection\",\n      defaultStyles: {\n        width: \"stretch\",\n        padding: \"10px\",\n      },\n      props: {\n        header: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"text\",\n              value: \"Section Header.\",\n            },\n          ],\n        },\n        items: {\n          type: \"slot\",\n          mergeWithParent: true,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n","import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Key, ListBox, ListBoxRenderProps } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport {\n  makeDefaultListBoxItemChildren,\n  registerListBoxItem,\n} from \"./registerListBoxItem\";\nimport { registerSection } from \"./registerSection\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nexport interface BaseListBoxControlContextData {\n  itemIds: string[];\n  isStandalone: boolean;\n}\n\nconst LISTBOX_VARIANTS = [\"focused\" as const, \"focusVisible\" as const];\n\nconst { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);\n\nexport interface BaseListBoxProps\n  extends Omit<\n      React.ComponentProps<typeof ListBox>,\n      \"selectedKeys\" | \"defaultSelectedKeys\" | \"className\"\n    >,\n    HasControlContextData<BaseListBoxControlContextData>,\n    WithVariants<typeof LISTBOX_VARIANTS> {\n  children?: React.ReactNode;\n  selectedKeys?: string | string[] | undefined;\n  defaultSelectedKeys?: string | string[] | undefined;\n  className?: string;\n}\n\nexport const listboxHelpers = {\n  states: {\n    selectedValue: {\n      onChangeArgsToValue: (value: Set<Key> | string[] | string) => {\n        // only single selection is supported\n        return Array.from(value)[0];\n      },\n    },\n  },\n};\n\nfunction normalizeSelectedKeys(selectedKeys: string | string[] | undefined) {\n  // Listbox expects it to be of type \"all\" | Iterable\n  return typeof selectedKeys === \"string\" && selectedKeys !== \"all\"\n    ? [selectedKeys]\n    : selectedKeys;\n}\n\nexport function BaseListBox(props: BaseListBoxProps) {\n  const {\n    setControlContextData: setControlContextData,\n    children,\n    className,\n    selectedKeys,\n    defaultSelectedKeys,\n    plasmicUpdateVariant,\n    ...rest\n  } = props;\n  const context = React.useContext(PlasmicListBoxContext);\n  const isStandalone = !context;\n  const [ids, setIds] = useState<string[]>([]);\n  const idManager = useMemo(\n    () => context?.idManager ?? new ListBoxItemIdManager(),\n    []\n  );\n\n  useEffect(() => {\n    setControlContextData?.({\n      itemIds: ids,\n      isStandalone,\n    });\n  }, [ids, isStandalone, setControlContextData]);\n\n  useEffect(() => {\n    idManager.subscribe((_ids: string[]) => {\n      setIds(_ids);\n    });\n  }, []);\n\n  const classNameProp = useCallback(\n    ({ isFocusVisible, isFocused }: ListBoxRenderProps) => {\n      plasmicUpdateVariant?.({\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  const listbox = (\n    <ListBox\n      selectedKeys={normalizeSelectedKeys(selectedKeys)}\n      defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}\n      className={classNameProp}\n      {...rest}\n    >\n      {children}\n    </ListBox>\n  );\n\n  if (isStandalone) {\n    return (\n      <PlasmicListBoxContext.Provider\n        value={{\n          idManager,\n        }}\n      >\n        {listbox}\n      </PlasmicListBoxContext.Provider>\n    );\n  }\n\n  return listbox;\n}\n\nexport const LIST_BOX_COMPONENT_NAME = makeComponentName(\"listbox\");\n\nexport function registerListBox(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseListBox>\n) {\n  const listBoxItemMeta = registerListBoxItem(loader, {\n    parentComponentName: LIST_BOX_COMPONENT_NAME,\n  });\n  const sectionMeta = registerSection(loader, {\n    parentComponentName: LIST_BOX_COMPONENT_NAME,\n    props: {\n      items: {\n        type: \"slot\",\n        defaultValue: [\n          {\n            type: \"component\",\n            name: listBoxItemMeta.name,\n            props: {\n              id: \"section-1-1\",\n              textValue: \"Section1-Item 1\",\n              children: [\n                makeDefaultListBoxItemChildren(\n                  \"Item 1\",\n                  \"Add dynamic values to make it more interesting\"\n                ),\n              ],\n            },\n          },\n          {\n            type: \"component\",\n            name: listBoxItemMeta.name,\n            props: {\n              id: \"section-1-2\",\n              textValue: \"Section1-Item 2\",\n              children: [\n                makeDefaultListBoxItemChildren(\n                  \"Item 2\",\n                  \"Add dynamic values to make it more interesting\"\n                ),\n              ],\n            },\n          },\n          {\n            type: \"component\",\n            name: listBoxItemMeta.name,\n            props: {\n              id: \"section-1-3\",\n              textValue: \"Section1-Item 3\",\n              children: [\n                makeDefaultListBoxItemChildren(\n                  \"Item 3\",\n                  \"Add dynamic values to make it more interesting\"\n                ),\n              ],\n            },\n          },\n        ],\n      },\n    },\n  });\n\n  registerComponentHelper(\n    loader,\n    BaseListBox,\n    {\n      name: LIST_BOX_COMPONENT_NAME,\n      displayName: \"Aria ListBox\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n      importName: \"BaseListBox\",\n      variants,\n      defaultStyles: {\n        width: \"250px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          displayName: \"List Items\",\n          allowedComponents: [listBoxItemMeta.name, sectionMeta.name],\n          allowRootWrapper: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: listBoxItemMeta.name,\n              props: {\n                id: \"1\",\n                textValue: \"Item 1\",\n                children: [\n                  makeDefaultListBoxItemChildren(\n                    \"Item 1\",\n                    \"Add dynamic values to make it more interesting\"\n                  ),\n                ],\n              },\n            },\n            {\n              type: \"component\",\n              name: listBoxItemMeta.name,\n              props: {\n                id: \"2\",\n                textValue: \"Item 2\",\n                children: [\n                  makeDefaultListBoxItemChildren(\n                    \"Item 2\",\n                    \"Add dynamic values to make it more interesting\"\n                  ),\n                ],\n              },\n            },\n            {\n              type: \"component\",\n              name: listBoxItemMeta.name,\n              props: {\n                id: \"3\",\n                textValue: \"Item 3\",\n                children: [\n                  makeDefaultListBoxItemChildren(\n                    \"Item 3\",\n                    \"Add dynamic values to make it more interesting\"\n                  ),\n                ],\n              },\n            },\n            {\n              type: \"component\",\n              name: sectionMeta.name,\n            },\n          ],\n        },\n        selectionMode: {\n          type: \"choice\",\n          description: \"The selection mode of the listbox\",\n          options: [\"none\", \"single\"],\n          defaultValue: \"none\",\n          hidden: (_props, ctx) => !ctx?.isStandalone,\n        },\n        selectedKeys: {\n          type: \"choice\",\n          editOnly: true,\n          uncontrolledProp: \"defaultSelectedKeys\",\n          displayName: \"Initial selected item\",\n          options: (_props, ctx) =>\n            ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n          hidden: (props, ctx) =>\n            !ctx?.isStandalone || props.selectionMode === \"none\",\n          // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).\n          multiSelect: false,\n        },\n        onSelectionChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"selectedValues\", type: \"object\" }],\n        },\n      },\n      states: {\n        selectedValue: {\n          type: \"writable\",\n          valueProp: \"selectedKeys\",\n          hidden: (props, ctx) =>\n            !ctx?.isStandalone || props.selectionMode === \"none\",\n          onChangeProp: \"onSelectionChange\",\n          variableType: \"text\",\n          ...listboxHelpers.states.selectedValue,\n        },\n      },\n      componentHelpers: {\n        helpers: listboxHelpers,\n        importName: \"listboxHelpers\",\n        importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["__objRest","React","PlasmicListBoxContext","Section","__spreadValues","Header","registerComponentHelper","makeComponentName","pickAriaComponentVariants","useState","useMemo","_a","useEffect","useCallback","ListBox","registerListBoxItem","makeDefaultListBoxItemChildren"],"mappings":"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"}

package/skinny/{registerListBox-d5efc5da.esm.js → registerListBox-da15518f.esm.js}

@@ -1,8 +1,9 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Section, Header, ListBox } from 'react-aria-components';
 import { b as PlasmicListBoxContext } from './contexts-5cb81c2f.esm.js';
 import { registerListBoxItem, makeDefaultListBoxItemChildren } from './registerListBoxItem.esm.js';
 import { r as registerComponentHelper, a as makeComponentName } from './utils-41b3d43b.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 
 class ListBoxItemIdManager {
   constructor() {
@@ -161,6 +162,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const LISTBOX_VARIANTS = ["focused", "focusVisible"];
+const { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);
 const listboxHelpers = {
   states: {
     selectedValue: {
@@ -177,13 +180,17 @@ function BaseListBox(props) {
   const _a = props, {
     setControlContextData,
     children,
+    className,
     selectedKeys,
-    defaultSelectedKeys
+    defaultSelectedKeys,
+    plasmicUpdateVariant
   } = _a, rest = __objRest(_a, [
     "setControlContextData",
     "children",
+    "className",
     "selectedKeys",
-    "defaultSelectedKeys"
+    "defaultSelectedKeys",
+    "plasmicUpdateVariant"
   ]);
   const context = React.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
@@ -206,11 +213,22 @@ function BaseListBox(props) {
       setIds(_ids);
     });
   }, []);
+  const classNameProp = useCallback(
+    ({ isFocusVisible, isFocused }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        focused: isFocused,
+        focusVisible: isFocusVisible
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const listbox = /* @__PURE__ */ React.createElement(
     ListBox,
     __spreadValues({
       selectedKeys: normalizeSelectedKeys(selectedKeys),
-      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys)
+      defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
+      className: classNameProp
     }, rest),
     children
   );
@@ -292,6 +310,7 @@ function registerListBox(loader, overrides) {
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
+      variants,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
@@ -396,4 +415,4 @@ function registerListBox(loader, overrides) {
 }
 
 export { BaseSection as B, ListBoxItemIdManager as L, LIST_BOX_COMPONENT_NAME as a, BaseListBox as b, registerListBox as c, listboxHelpers as l, registerSection as r };
-//# sourceMappingURL=registerListBox-d5efc5da.esm.js.map
+//# sourceMappingURL=registerListBox-da15518f.esm.js.map

package/skinny/registerListBox-da15518f.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerListBox-da15518f.esm.js","sources":["../src/ListBoxItemIdManager.ts","../src/registerSection.tsx","../src/registerListBox.tsx"],"sourcesContent":["type Observer = (ids: string[]) => void;\n\nexport class ListBoxItemIdManager {\n  private readonly _ids: Set<string> = new Set();\n  private readonly _observers: Set<Observer> = new Set();\n\n  private generateDuplicateId(id: string, count = 1): string {\n    const dupId = `${id} duplicate(${count})`;\n    if (this._ids.has(dupId)) {\n      return this.generateDuplicateId(id, count + 1);\n    } else {\n      return dupId;\n    }\n  }\n\n  private generateMissingId(count = 1): string {\n    const missingId = `missing(${count})`;\n    if (this._ids.has(missingId)) {\n      return this.generateMissingId(count + 1);\n    } else {\n      return missingId;\n    }\n  }\n\n  register(id?: unknown): string {\n    const idStr = id === undefined ? undefined : String(id).trim();\n    let newId: string;\n\n    if (!idStr) {\n      // No id is provided, so generate one\n      newId = this.generateMissingId();\n    } else if (this._ids.has(idStr)) {\n      // The provided id is already registered with another uuid (i.e. it's not unique), so just generate a new one\n      newId = this.generateDuplicateId(idStr);\n    } else {\n      // The provided id is not already registered, so use it\n      newId = idStr;\n    }\n\n    this._ids.add(newId);\n    this.notify();\n    return newId;\n  }\n\n  unregister(id: string) {\n    this._ids.delete(id);\n    this.notify();\n  }\n\n  subscribe(observer: Observer) {\n    this._observers.add(observer);\n    observer(this.ids);\n  }\n\n  // Notify all observers about an event.\n  notify() {\n    this._observers.forEach((observer) => observer(this.ids));\n  }\n\n  get ids(): string[] {\n    return Array.from(this._ids);\n  }\n}\n","import React from \"react\";\nimport { Header, Section } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { BaseListBox } from \"./registerListBox\";\nimport {\n  CodeComponentMetaOverrides,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  Styleable,\n} from \"./utils\";\n\nexport interface BaseSectionProps extends Styleable {\n  items: React.ReactNode;\n  header: React.ReactNode;\n}\n\nexport function BaseSection(props: BaseSectionProps) {\n  const { header, items, ...rest } = props;\n  const contextProps = React.useContext(PlasmicListBoxContext);\n  const isStandalone = !contextProps;\n\n  const section = (\n    <Section {...rest}>\n      <Header>{header}</Header>\n      {items}\n    </Section>\n  );\n\n  if (isStandalone) {\n    return (\n      // BaseListbox should give section a listbox context (that it can't be used without)\n      // as well as the id manager (that is needed to identify and warn about duplication of ids)\n      <BaseListBox>{section}</BaseListBox>\n    );\n  }\n\n  return section;\n}\n\nexport function registerSection(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseSection>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseSection,\n    {\n      name: makeComponentName(\"section\"),\n      displayName: \"Aria Section\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerSection\",\n      importName: \"BaseSection\",\n      defaultStyles: {\n        width: \"stretch\",\n        padding: \"10px\",\n      },\n      props: {\n        header: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"text\",\n              value: \"Section Header.\",\n            },\n          ],\n        },\n        items: {\n          type: \"slot\",\n          mergeWithParent: true,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n","import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Key, ListBox, ListBoxRenderProps } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport {\n  makeDefaultListBoxItemChildren,\n  registerListBoxItem,\n} from \"./registerListBoxItem\";\nimport { registerSection } from \"./registerSection\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nexport interface BaseListBoxControlContextData {\n  itemIds: string[];\n  isStandalone: boolean;\n}\n\nconst LISTBOX_VARIANTS = [\"focused\" as const, \"focusVisible\" as const];\n\nconst { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);\n\nexport interface BaseListBoxProps\n  extends Omit<\n      React.ComponentProps<typeof ListBox>,\n      \"selectedKeys\" | \"defaultSelectedKeys\" | \"className\"\n    >,\n    HasControlContextData<BaseListBoxControlContextData>,\n    WithVariants<typeof LISTBOX_VARIANTS> {\n  children?: React.ReactNode;\n  selectedKeys?: string | string[] | undefined;\n  defaultSelectedKeys?: string | string[] | undefined;\n  className?: string;\n}\n\nexport const listboxHelpers = {\n  states: {\n    selectedValue: {\n      onChangeArgsToValue: (value: Set<Key> | string[] | string) => {\n        // only single selection is supported\n        return Array.from(value)[0];\n      },\n    },\n  },\n};\n\nfunction normalizeSelectedKeys(selectedKeys: string | string[] | undefined) {\n  // Listbox expects it to be of type \"all\" | Iterable\n  return typeof selectedKeys === \"string\" && selectedKeys !== \"all\"\n    ? [selectedKeys]\n    : selectedKeys;\n}\n\nexport function BaseListBox(props: BaseListBoxProps) {\n  const {\n    setControlContextData: setControlContextData,\n    children,\n    className,\n    selectedKeys,\n    defaultSelectedKeys,\n    plasmicUpdateVariant,\n    ...rest\n  } = props;\n  const context = React.useContext(PlasmicListBoxContext);\n  const isStandalone = !context;\n  const [ids, setIds] = useState<string[]>([]);\n  const idManager = useMemo(\n    () => context?.idManager ?? new ListBoxItemIdManager(),\n    []\n  );\n\n  useEffect(() => {\n    setControlContextData?.({\n      itemIds: ids,\n      isStandalone,\n    });\n  }, [ids, isStandalone, setControlContextData]);\n\n  useEffect(() => {\n    idManager.subscribe((_ids: string[]) => {\n      setIds(_ids);\n    });\n  }, []);\n\n  const classNameProp = useCallback(\n    ({ isFocusVisible, isFocused }: ListBoxRenderProps) => {\n      plasmicUpdateVariant?.({\n        focused: isFocused,\n        focusVisible: isFocusVisible,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  const listbox = (\n    <ListBox\n      selectedKeys={normalizeSelectedKeys(selectedKeys)}\n      defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}\n      className={classNameProp}\n      {...rest}\n    >\n      {children}\n    </ListBox>\n  );\n\n  if (isStandalone) {\n    return (\n      <PlasmicListBoxContext.Provider\n        value={{\n          idManager,\n        }}\n      >\n        {listbox}\n      </PlasmicListBoxContext.Provider>\n    );\n  }\n\n  return listbox;\n}\n\nexport const LIST_BOX_COMPONENT_NAME = makeComponentName(\"listbox\");\n\nexport function registerListBox(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseListBox>\n) {\n  const listBoxItemMeta = registerListBoxItem(loader, {\n    parentComponentName: LIST_BOX_COMPONENT_NAME,\n  });\n  const sectionMeta = registerSection(loader, {\n    parentComponentName: LIST_BOX_COMPONENT_NAME,\n    props: {\n      items: {\n        type: \"slot\",\n        defaultValue: [\n          {\n            type: \"component\",\n            name: listBoxItemMeta.name,\n            props: {\n              id: \"section-1-1\",\n              textValue: \"Section1-Item 1\",\n              children: [\n                makeDefaultListBoxItemChildren(\n                  \"Item 1\",\n                  \"Add dynamic values to make it more interesting\"\n                ),\n              ],\n            },\n          },\n          {\n            type: \"component\",\n            name: listBoxItemMeta.name,\n            props: {\n              id: \"section-1-2\",\n              textValue: \"Section1-Item 2\",\n              children: [\n                makeDefaultListBoxItemChildren(\n                  \"Item 2\",\n                  \"Add dynamic values to make it more interesting\"\n                ),\n              ],\n            },\n          },\n          {\n            type: \"component\",\n            name: listBoxItemMeta.name,\n            props: {\n              id: \"section-1-3\",\n              textValue: \"Section1-Item 3\",\n              children: [\n                makeDefaultListBoxItemChildren(\n                  \"Item 3\",\n                  \"Add dynamic values to make it more interesting\"\n                ),\n              ],\n            },\n          },\n        ],\n      },\n    },\n  });\n\n  registerComponentHelper(\n    loader,\n    BaseListBox,\n    {\n      name: LIST_BOX_COMPONENT_NAME,\n      displayName: \"Aria ListBox\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n      importName: \"BaseListBox\",\n      variants,\n      defaultStyles: {\n        width: \"250px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"black\",\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          displayName: \"List Items\",\n          allowedComponents: [listBoxItemMeta.name, sectionMeta.name],\n          allowRootWrapper: true,\n          defaultValue: [\n            {\n              type: \"component\",\n              name: listBoxItemMeta.name,\n              props: {\n                id: \"1\",\n                textValue: \"Item 1\",\n                children: [\n                  makeDefaultListBoxItemChildren(\n                    \"Item 1\",\n                    \"Add dynamic values to make it more interesting\"\n                  ),\n                ],\n              },\n            },\n            {\n              type: \"component\",\n              name: listBoxItemMeta.name,\n              props: {\n                id: \"2\",\n                textValue: \"Item 2\",\n                children: [\n                  makeDefaultListBoxItemChildren(\n                    \"Item 2\",\n                    \"Add dynamic values to make it more interesting\"\n                  ),\n                ],\n              },\n            },\n            {\n              type: \"component\",\n              name: listBoxItemMeta.name,\n              props: {\n                id: \"3\",\n                textValue: \"Item 3\",\n                children: [\n                  makeDefaultListBoxItemChildren(\n                    \"Item 3\",\n                    \"Add dynamic values to make it more interesting\"\n                  ),\n                ],\n              },\n            },\n            {\n              type: \"component\",\n              name: sectionMeta.name,\n            },\n          ],\n        },\n        selectionMode: {\n          type: \"choice\",\n          description: \"The selection mode of the listbox\",\n          options: [\"none\", \"single\"],\n          defaultValue: \"none\",\n          hidden: (_props, ctx) => !ctx?.isStandalone,\n        },\n        selectedKeys: {\n          type: \"choice\",\n          editOnly: true,\n          uncontrolledProp: \"defaultSelectedKeys\",\n          displayName: \"Initial selected item\",\n          options: (_props, ctx) =>\n            ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n          hidden: (props, ctx) =>\n            !ctx?.isStandalone || props.selectionMode === \"none\",\n          // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).\n          multiSelect: false,\n        },\n        onSelectionChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"selectedValues\", type: \"object\" }],\n        },\n      },\n      states: {\n        selectedValue: {\n          type: \"writable\",\n          valueProp: \"selectedKeys\",\n          hidden: (props, ctx) =>\n            !ctx?.isStandalone || props.selectionMode === \"none\",\n          onChangeProp: \"onSelectionChange\",\n          variableType: \"text\",\n          ...listboxHelpers.states.selectedValue,\n        },\n      },\n      componentHelpers: {\n        helpers: listboxHelpers,\n        importName: \"listboxHelpers\",\n        importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["__objRest","__spreadValues","_a"],"mappings":"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"}

package/skinny/registerListBox.cjs.js

@@ -3,14 +3,14 @@
 require('react');
 require('react-aria-components');
 require('./contexts-6d0cb2b1.cjs.js');
-var registerSection = require('./registerListBox-b47231d8.cjs.js');
+var registerSection = require('./registerListBox-44088cfc.cjs.js');
 require('./registerListBoxItem.cjs.js');
 require('./utils-d1c8094f.cjs.js');
+require('./variant-utils-0ad70db8.cjs.js');
 require('./registerDescription.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
-require('./variant-utils-0ad70db8.cjs.js');
 
 
 

package/skinny/registerListBox.d.ts

@@ -1,14 +1,17 @@
 import React from "react";
 import { Key, ListBox } from "react-aria-components";
 import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
+import { WithVariants } from "./variant-utils";
 export interface BaseListBoxControlContextData {
     itemIds: string[];
     isStandalone: boolean;
 }
-export interface BaseListBoxProps extends Omit<React.ComponentProps<typeof ListBox>, "selectedKeys" | "defaultSelectedKeys">, HasControlContextData<BaseListBoxControlContextData> {
+declare const LISTBOX_VARIANTS: ("focused" | "focusVisible")[];
+export interface BaseListBoxProps extends Omit<React.ComponentProps<typeof ListBox>, "selectedKeys" | "defaultSelectedKeys" | "className">, HasControlContextData<BaseListBoxControlContextData>, WithVariants<typeof LISTBOX_VARIANTS> {
     children?: React.ReactNode;
     selectedKeys?: string | string[] | undefined;
     defaultSelectedKeys?: string | string[] | undefined;
+    className?: string;
 }
 export declare const listboxHelpers: {
     states: {
@@ -20,3 +23,4 @@ export declare const listboxHelpers: {
 export declare function BaseListBox(props: BaseListBoxProps): React.JSX.Element;
 export declare const LIST_BOX_COMPONENT_NAME: string;
 export declare function registerListBox(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseListBox>): void;
+export {};

package/skinny/registerListBox.esm.js

@@ -1,12 +1,12 @@
 import 'react';
 import 'react-aria-components';
 import './contexts-5cb81c2f.esm.js';
-export { b as BaseListBox, a as LIST_BOX_COMPONENT_NAME, l as listboxHelpers, c as registerListBox } from './registerListBox-d5efc5da.esm.js';
+export { b as BaseListBox, a as LIST_BOX_COMPONENT_NAME, l as listboxHelpers, c as registerListBox } from './registerListBox-da15518f.esm.js';
 import './registerListBoxItem.esm.js';
 import './utils-41b3d43b.esm.js';
+import './variant-utils-4405ebb0.esm.js';
 import './registerDescription.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
-import './variant-utils-4405ebb0.esm.js';
 //# sourceMappingURL=registerListBox.esm.js.map

package/skinny/registerSection.cjs.js

@@ -3,7 +3,7 @@
 require('react');
 require('react-aria-components');
 require('./contexts-6d0cb2b1.cjs.js');
-var registerSection = require('./registerListBox-b47231d8.cjs.js');
+var registerSection = require('./registerListBox-44088cfc.cjs.js');
 require('./utils-d1c8094f.cjs.js');
 require('./registerListBoxItem.cjs.js');
 require('./registerDescription.cjs.js');

package/skinny/registerSection.esm.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'react-aria-components';
 import './contexts-5cb81c2f.esm.js';
-export { B as BaseSection, r as registerSection } from './registerListBox-d5efc5da.esm.js';
+export { B as BaseSection, r as registerSection } from './registerListBox-da15518f.esm.js';
 import './utils-41b3d43b.esm.js';
 import './registerListBoxItem.esm.js';
 import './registerDescription.esm.js';

package/skinny/registerSelect.cjs.js

@@ -4,7 +4,7 @@ var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var common = require('./common-1e5dba7d.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
-var registerSection = require('./registerListBox-b47231d8.cjs.js');
+var registerSection = require('./registerListBox-44088cfc.cjs.js');
 var registerButton = require('./registerButton.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
@@ -63,7 +63,11 @@ const BaseSelectValue = (props) => {
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SelectValue, { className }, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isPlaceholder ? placeholder : selectedText));
 };
 const SELECT_NAME = utils.makeComponentName("select");
-const SELECT_VARIANTS = ["disabled"];
+const SELECT_VARIANTS = [
+  "focused",
+  "focusVisible",
+  "disabled"
+];
 const { variants: SELECT_VARIANTS_DATA } = variantUtils.pickAriaComponentVariants(SELECT_VARIANTS);
 function BaseSelect(props) {
   const {
@@ -88,11 +92,21 @@ function BaseSelect(props) {
       });
     });
   }, []);
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
+  const classNameProp = React.useCallback(
+    ({
+      isDisabled: isDisabled2,
+      isFocusVisible,
+      isFocused
+    }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled2,
+        focused: isFocused,
+        focusVisible: isFocusVisible
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Select,
     __spreadValues({
@@ -100,7 +114,7 @@ function BaseSelect(props) {
       onSelectionChange,
       onOpenChange,
       isDisabled,
-      className,
+      className: classNameProp,
       style,
       name,
       disabledKeys,