@plasmicpkgs/react-aria 0.0.83 → 0.0.85

package/dist/registerInput.d.ts

@@ -2,10 +2,11 @@ import React, { ChangeEvent } from "react";
 import type { InputProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
 import { WithVariants } from "./variant-utils";
-declare const INPUT_VARIANTS: ("disabled" | "hovered" | "focused")[];
-export interface BaseInputProps extends Omit<InputProps, "autoComplete">, HasControlContextData, WithVariants<typeof INPUT_VARIANTS> {
+declare const INPUT_VARIANTS: ("disabled" | "hovered" | "focused" | "focusVisible")[];
+export interface BaseInputProps extends Omit<InputProps, "autoComplete" | "className">, HasControlContextData, WithVariants<typeof INPUT_VARIANTS> {
     autoComplete?: string[];
     isUncontrolled?: boolean;
+    className?: string;
 }
 export declare const inputHelpers: {
     states: {

package/dist/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/dist/registerSelect.d.ts

@@ -9,7 +9,7 @@ export declare const BaseSelectValue: (props: BaseSelectValueProps) => React.JSX
 export interface BaseSelectControlContextData {
     itemIds: string[];
 }
-declare const SELECT_VARIANTS: "disabled"[];
+declare const SELECT_VARIANTS: ("disabled" | "focused" | "focusVisible")[];
 export interface BaseSelectProps extends SelectProps<{}>, // NOTE: We don't need generic type here since we don't use items prop (that needs it). We just need to make the type checker happy
 WithVariants<typeof SELECT_VARIANTS>, HasControlContextData<BaseSelectControlContextData> {
     children?: React.ReactNode;

package/dist/registerTextArea.d.ts

@@ -2,8 +2,9 @@ import React, { ChangeEvent } from "react";
 import type { TextAreaProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
 import { WithVariants } from "./variant-utils";
-declare const TEXTAREA_VARIANTS: ("disabled" | "hovered" | "focused")[];
-export interface BaseTextAreaProps extends TextAreaProps, HasControlContextData, WithVariants<typeof TEXTAREA_VARIANTS> {
+declare const TEXTAREA_VARIANTS: ("disabled" | "hovered" | "focused" | "focusVisible")[];
+export interface BaseTextAreaProps extends Omit<TextAreaProps, "className">, HasControlContextData, WithVariants<typeof TEXTAREA_VARIANTS> {
+    className?: string;
 }
 export declare const inputHelpers: {
     states: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicpkgs/react-aria",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "description": "Plasmic registration calls for react-aria based components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -74,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5464a6f3379a65a0d1a7b31f7fd542703b8cb1db"
+  "gitHead": "8c4c85671384c588a57b5dc182774558458b453c"
 }

package/skinny/registerButton.cjs.js

@@ -5,7 +5,7 @@ var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var common = require('./common-1e5dba7d.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
-var variantUtils = require('./variant-utils-8cb38f8f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerButton.esm.js

@@ -3,7 +3,7 @@ import { mergeProps } from 'react-aria';
 import { Button } from 'react-aria-components';
 import { g as getCommonProps } from './common-a8f4a4b1.esm.js';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-41b3d43b.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-7c2ea202.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerCheckbox.cjs.js

@@ -5,7 +5,7 @@ var reactAriaComponents = require('react-aria-components');
 var common = require('./common-1e5dba7d.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
-var variantUtils = require('./variant-utils-8cb38f8f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerCheckbox.esm.js

@@ -3,7 +3,7 @@ import { Checkbox } from 'react-aria-components';
 import { g as getCommonProps, h as hasParent } from './common-a8f4a4b1.esm.js';
 import { P as PlasmicCheckboxGroupContext } from './contexts-5cb81c2f.esm.js';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-41b3d43b.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-7c2ea202.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerCheckboxGroup.cjs.js

@@ -8,7 +8,7 @@ var registerCheckbox = require('./registerCheckbox.cjs.js');
 var registerDescription = require('./registerDescription.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
-var variantUtils = require('./variant-utils-8cb38f8f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('./registerText.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');

package/skinny/registerCheckboxGroup.esm.js

@@ -6,7 +6,7 @@ import { CHECKBOX_COMPONENT_NAME, makeDefaultCheckboxChildren } from './register
 import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { m as makeChildComponentName, r as registerComponentHelper, a as makeComponentName } from './utils-41b3d43b.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-7c2ea202.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import './registerText.esm.js';
 import '@plasmicapp/host';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerComboBox.cjs.js

@@ -4,13 +4,13 @@ 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 registerInput = require('./registerInput.cjs.js');
 var registerLabel = require('./registerLabel.cjs.js');
 var registerPopover = require('./registerPopover.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
-var variantUtils = require('./variant-utils-8cb38f8f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('./registerListBoxItem.cjs.js');
 require('./registerDescription.cjs.js');
 require('./registerText.cjs.js');
@@ -69,16 +69,23 @@ function BaseComboBox(props) {
     setControlContextData,
     plasmicUpdateVariant,
     className,
-    isDisabled,
     isOpen: _isOpen
   } = _a, rest = __objRest(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
     "className",
-    "isDisabled",
     "isOpen"
   ]);
+  const classNameProp = React.useCallback(
+    ({ isDisabled }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const idManager = React.useMemo(() => new registerSection.ListBoxItemIdManager(), []);
   React.useEffect(() => {
     idManager.subscribe((ids) => {
@@ -87,27 +94,15 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.ComboBox,
-    __spreadValues({
-      isDisabled,
-      className
-    }, rest),
-    /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
-      contexts.PlasmicListBoxContext.Provider,
-      {
-        value: {
-          idManager
-        }
-      },
-      /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React__default.default.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
-    ))
-  );
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadValues({ className: classNameProp }, rest), /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React__default.default.createElement(
+    contexts.PlasmicListBoxContext.Provider,
+    {
+      value: {
+        idManager
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React__default.default.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
+  )));
 }
 function registerComboBox(loader) {
   utils.registerComponentHelper(loader, BaseComboBox, {

package/skinny/registerComboBox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n  pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n  extends ComboBoxProps<{}>,\n    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  className?: string;\n}\n\n/*\n  This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n  Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n  Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n  Also, <Combobox> does not support an `isOpen` prop either.\n\n  So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n  Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n  because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n  */\nfunction ComboboxAutoOpen(props: any) {\n  const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n  useAutoOpen({ props, open, close });\n\n  return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n  const {\n    children,\n    setControlContextData,\n    plasmicUpdateVariant,\n    className,\n    isDisabled,\n    isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n    ...rest\n  } = props;\n\n  const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  // NOTE: Aria <Combobox> 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: isDisabled,\n    });\n  }, [isDisabled, plasmicUpdateVariant]);\n\n  return (\n    <ComboBox\n      isDisabled={isDisabled}\n      // Not calling plasmicUpdateVariant within className callback (which has access to render props) because it would then run on every render\n      className={className}\n      {...rest}\n    >\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\n            {children}\n          </PlasmicInputContext.Provider>\n        </PlasmicListBoxContext.Provider>\n      </PlasmicPopoverTriggerContext.Provider>\n    </ComboBox>\n  );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n  registerComponentHelper(loader, BaseComboBox, {\n    name: COMBOBOX_NAME,\n    displayName: \"Aria ComboBox\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n    importName: \"BaseComboBox\",\n    variants: COMBOBOX_VARIANTS_DATA,\n    props: {\n      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\n      selectedKey: {\n        type: \"choice\",\n        editOnly: true,\n        uncontrolledProp: \"defaultSelectedKey\",\n        displayName: \"Initial selected item\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        // React Aria ComboBox do not support multiple selections yet\n        multiSelect: false,\n      },\n      disabledKeys: {\n        type: \"choice\",\n        displayName: \"Disabled values\",\n        description:\n          \"The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        multiSelect: true,\n        advanced: true,\n      },\n      isOpen: {\n        type: \"boolean\",\n        defaultValue: false,\n        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n        hidden: () => true,\n      },\n      onSelectionChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"selectedValue\", type: \"string\" }],\n      },\n      onOpenChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n      },\n\n      children: {\n        type: \"slot\",\n        defaultValue: [\n          {\n            type: \"vbox\",\n            styles: {\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n              width: \"300px\",\n              padding: 0,\n            },\n            children: [\n              {\n                type: \"component\",\n                name: LABEL_COMPONENT_NAME,\n                props: {\n                  children: {\n                    type: \"text\",\n                    value: \"Label\",\n                  },\n                },\n              },\n              {\n                type: \"hbox\",\n                styles: {\n                  padding: 0,\n                },\n                children: [\n                  {\n                    type: \"component\",\n                    name: INPUT_COMPONENT_NAME,\n                    styles: {\n                      width: \"100%\",\n                      borderRightWidth: 0,\n                    },\n                  },\n                  {\n                    type: \"component\",\n                    name: BUTTON_COMPONENT_NAME,\n                    props: {\n                      children: {\n                        type: \"img\",\n                        // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n                        src: \"https://static1.plasmic.app/arrow-up.svg\",\n                        styles: {\n                          width: \"15px\",\n                          transform: \"rotate(180deg)\",\n                          display: \"flex\",\n                          alignItems: \"center\",\n                          justifyContent: \"center\",\n                          padding: 0,\n                        },\n                      },\n                    },\n                  },\n                ],\n              },\n              {\n                type: \"component\",\n                name: POPOVER_COMPONENT_NAME,\n                styles: {\n                  backgroundColor: \"white\",\n                  padding: \"10px\",\n                  overflow: \"scroll\",\n                  width: \"unset\",\n                },\n                props: {\n                  offset: 0,\n                  children: [\n                    {\n                      type: \"component\",\n                      name: LIST_BOX_COMPONENT_NAME,\n                      props: {\n                        selectionMode: \"single\",\n                      },\n                      styles: {\n                        borderWidth: 0,\n                        width: \"stretch\",\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    states: {\n      selectedValue: {\n        type: \"writable\",\n        valueProp: \"selectedKey\",\n        onChangeProp: \"onSelectionChange\",\n        variableType: \"text\",\n      },\n      isOpen: {\n        type: \"writable\",\n        valueProp: \"isOpen\",\n        onChangeProp: \"onOpenChange\",\n        variableType: \"boolean\",\n      },\n    },\n    trapsFocus: true,\n  });\n}\n"],"names":["makeComponentName","pickAriaComponentVariants","ComboBoxStateContext","useAutoOpen","useMemo","ListBoxItemIdManager","useEffect","React","ComboBox","PlasmicPopoverTriggerContext","PlasmicListBoxContext","PlasmicInputContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
+{"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxRenderProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n  pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n  extends ComboBoxProps<{}>,\n    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  className?: string;\n}\n\n/*\n  This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n  Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n  Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n  Also, <Combobox> does not support an `isOpen` prop either.\n\n  So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n  Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n  because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n  */\nfunction ComboboxAutoOpen(props: any) {\n  const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n  useAutoOpen({ props, open, close });\n\n  return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n  const {\n    children,\n    setControlContextData,\n    plasmicUpdateVariant,\n    className,\n    isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n    ...rest\n  } = props;\n\n  const classNameProp = useCallback(\n    ({ isDisabled }: ComboBoxRenderProps) => {\n      plasmicUpdateVariant?.({\n        disabled: isDisabled,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  return (\n    <ComboBox className={classNameProp} {...rest}>\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\n            {children}\n          </PlasmicInputContext.Provider>\n        </PlasmicListBoxContext.Provider>\n      </PlasmicPopoverTriggerContext.Provider>\n    </ComboBox>\n  );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n  registerComponentHelper(loader, BaseComboBox, {\n    name: COMBOBOX_NAME,\n    displayName: \"Aria ComboBox\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n    importName: \"BaseComboBox\",\n    variants: COMBOBOX_VARIANTS_DATA,\n    props: {\n      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\n      selectedKey: {\n        type: \"choice\",\n        editOnly: true,\n        uncontrolledProp: \"defaultSelectedKey\",\n        displayName: \"Initial selected item\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        // React Aria ComboBox do not support multiple selections yet\n        multiSelect: false,\n      },\n      disabledKeys: {\n        type: \"choice\",\n        displayName: \"Disabled values\",\n        description:\n          \"The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        multiSelect: true,\n        advanced: true,\n      },\n      isOpen: {\n        type: \"boolean\",\n        defaultValue: false,\n        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n        hidden: () => true,\n      },\n      onSelectionChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"selectedValue\", type: \"string\" }],\n      },\n      onOpenChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n      },\n\n      children: {\n        type: \"slot\",\n        defaultValue: [\n          {\n            type: \"vbox\",\n            styles: {\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n              width: \"300px\",\n              padding: 0,\n            },\n            children: [\n              {\n                type: \"component\",\n                name: LABEL_COMPONENT_NAME,\n                props: {\n                  children: {\n                    type: \"text\",\n                    value: \"Label\",\n                  },\n                },\n              },\n              {\n                type: \"hbox\",\n                styles: {\n                  padding: 0,\n                },\n                children: [\n                  {\n                    type: \"component\",\n                    name: INPUT_COMPONENT_NAME,\n                    styles: {\n                      width: \"100%\",\n                      borderRightWidth: 0,\n                    },\n                  },\n                  {\n                    type: \"component\",\n                    name: BUTTON_COMPONENT_NAME,\n                    props: {\n                      children: {\n                        type: \"img\",\n                        // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n                        src: \"https://static1.plasmic.app/arrow-up.svg\",\n                        styles: {\n                          width: \"15px\",\n                          transform: \"rotate(180deg)\",\n                          display: \"flex\",\n                          alignItems: \"center\",\n                          justifyContent: \"center\",\n                          padding: 0,\n                        },\n                      },\n                    },\n                  },\n                ],\n              },\n              {\n                type: \"component\",\n                name: POPOVER_COMPONENT_NAME,\n                styles: {\n                  backgroundColor: \"white\",\n                  padding: \"10px\",\n                  overflow: \"scroll\",\n                  width: \"unset\",\n                },\n                props: {\n                  offset: 0,\n                  children: [\n                    {\n                      type: \"component\",\n                      name: LIST_BOX_COMPONENT_NAME,\n                      props: {\n                        selectionMode: \"single\",\n                      },\n                      styles: {\n                        borderWidth: 0,\n                        width: \"stretch\",\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    states: {\n      selectedValue: {\n        type: \"writable\",\n        valueProp: \"selectedKey\",\n        onChangeProp: \"onSelectionChange\",\n        variableType: \"text\",\n      },\n      isOpen: {\n        type: \"writable\",\n        valueProp: \"isOpen\",\n        onChangeProp: \"onOpenChange\",\n        variableType: \"boolean\",\n      },\n    },\n    trapsFocus: true,\n  });\n}\n"],"names":["makeComponentName","pickAriaComponentVariants","ComboBoxStateContext","useAutoOpen","useCallback","useMemo","ListBoxItemIdManager","useEffect","React","ComboBox","PlasmicPopoverTriggerContext","PlasmicListBoxContext","PlasmicInputContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}

package/skinny/registerComboBox.esm.js

@@ -1,14 +1,14 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useCallback, useMemo, useEffect } from 'react';
 import { ComboBox, ComboBoxStateContext } from 'react-aria-components';
 import { g as getCommonProps } from './common-a8f4a4b1.esm.js';
 import { a as PlasmicPopoverTriggerContext, b as PlasmicListBoxContext, c as PlasmicInputContext } from './contexts-5cb81c2f.esm.js';
-import { L as ListBoxItemIdManager, a as LIST_BOX_COMPONENT_NAME } from './registerListBox-d5efc5da.esm.js';
+import { L as ListBoxItemIdManager, a as LIST_BOX_COMPONENT_NAME } from './registerListBox-da15518f.esm.js';
 import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 import { INPUT_COMPONENT_NAME } from './registerInput.esm.js';
 import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
 import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
 import { r as registerComponentHelper, a as makeComponentName, u as useAutoOpen } from './utils-41b3d43b.esm.js';
-import { p as pickAriaComponentVariants } from './variant-utils-7c2ea202.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
 import './registerListBoxItem.esm.js';
 import './registerDescription.esm.js';
 import './registerText.esm.js';
@@ -63,16 +63,23 @@ function BaseComboBox(props) {
     setControlContextData,
     plasmicUpdateVariant,
     className,
-    isDisabled,
     isOpen: _isOpen
   } = _a, rest = __objRest(_a, [
     "children",
     "setControlContextData",
     "plasmicUpdateVariant",
     "className",
-    "isDisabled",
     "isOpen"
   ]);
+  const classNameProp = useCallback(
+    ({ isDisabled }) => {
+      plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
+        disabled: isDisabled
+      });
+      return className != null ? className : "";
+    },
+    [className, plasmicUpdateVariant]
+  );
   const idManager = useMemo(() => new ListBoxItemIdManager(), []);
   useEffect(() => {
     idManager.subscribe((ids) => {
@@ -81,27 +88,15 @@ function BaseComboBox(props) {
       });
     });
   }, []);
-  useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: isDisabled
-    });
-  }, [isDisabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React.createElement(
-    ComboBox,
-    __spreadValues({
-      isDisabled,
-      className
-    }, rest),
-    /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
-      PlasmicListBoxContext.Provider,
-      {
-        value: {
-          idManager
-        }
-      },
-      /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
-    ))
-  );
+  return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues({ className: classNameProp }, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverTriggerContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+    PlasmicListBoxContext.Provider,
+    {
+      value: {
+        idManager
+      }
+    },
+    /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
+  )));
 }
 function registerComboBox(loader) {
   registerComponentHelper(loader, BaseComboBox, {

package/skinny/registerComboBox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n  pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n  extends ComboBoxProps<{}>,\n    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  className?: string;\n}\n\n/*\n  This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n  Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n  Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n  Also, <Combobox> does not support an `isOpen` prop either.\n\n  So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n  Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n  because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n  */\nfunction ComboboxAutoOpen(props: any) {\n  const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n  useAutoOpen({ props, open, close });\n\n  return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n  const {\n    children,\n    setControlContextData,\n    plasmicUpdateVariant,\n    className,\n    isDisabled,\n    isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n    ...rest\n  } = props;\n\n  const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  // NOTE: Aria <Combobox> 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: isDisabled,\n    });\n  }, [isDisabled, plasmicUpdateVariant]);\n\n  return (\n    <ComboBox\n      isDisabled={isDisabled}\n      // Not calling plasmicUpdateVariant within className callback (which has access to render props) because it would then run on every render\n      className={className}\n      {...rest}\n    >\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\n            {children}\n          </PlasmicInputContext.Provider>\n        </PlasmicListBoxContext.Provider>\n      </PlasmicPopoverTriggerContext.Provider>\n    </ComboBox>\n  );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n  registerComponentHelper(loader, BaseComboBox, {\n    name: COMBOBOX_NAME,\n    displayName: \"Aria ComboBox\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n    importName: \"BaseComboBox\",\n    variants: COMBOBOX_VARIANTS_DATA,\n    props: {\n      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\n      selectedKey: {\n        type: \"choice\",\n        editOnly: true,\n        uncontrolledProp: \"defaultSelectedKey\",\n        displayName: \"Initial selected item\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        // React Aria ComboBox do not support multiple selections yet\n        multiSelect: false,\n      },\n      disabledKeys: {\n        type: \"choice\",\n        displayName: \"Disabled values\",\n        description:\n          \"The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        multiSelect: true,\n        advanced: true,\n      },\n      isOpen: {\n        type: \"boolean\",\n        defaultValue: false,\n        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n        hidden: () => true,\n      },\n      onSelectionChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"selectedValue\", type: \"string\" }],\n      },\n      onOpenChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n      },\n\n      children: {\n        type: \"slot\",\n        defaultValue: [\n          {\n            type: \"vbox\",\n            styles: {\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n              width: \"300px\",\n              padding: 0,\n            },\n            children: [\n              {\n                type: \"component\",\n                name: LABEL_COMPONENT_NAME,\n                props: {\n                  children: {\n                    type: \"text\",\n                    value: \"Label\",\n                  },\n                },\n              },\n              {\n                type: \"hbox\",\n                styles: {\n                  padding: 0,\n                },\n                children: [\n                  {\n                    type: \"component\",\n                    name: INPUT_COMPONENT_NAME,\n                    styles: {\n                      width: \"100%\",\n                      borderRightWidth: 0,\n                    },\n                  },\n                  {\n                    type: \"component\",\n                    name: BUTTON_COMPONENT_NAME,\n                    props: {\n                      children: {\n                        type: \"img\",\n                        // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n                        src: \"https://static1.plasmic.app/arrow-up.svg\",\n                        styles: {\n                          width: \"15px\",\n                          transform: \"rotate(180deg)\",\n                          display: \"flex\",\n                          alignItems: \"center\",\n                          justifyContent: \"center\",\n                          padding: 0,\n                        },\n                      },\n                    },\n                  },\n                ],\n              },\n              {\n                type: \"component\",\n                name: POPOVER_COMPONENT_NAME,\n                styles: {\n                  backgroundColor: \"white\",\n                  padding: \"10px\",\n                  overflow: \"scroll\",\n                  width: \"unset\",\n                },\n                props: {\n                  offset: 0,\n                  children: [\n                    {\n                      type: \"component\",\n                      name: LIST_BOX_COMPONENT_NAME,\n                      props: {\n                        selectionMode: \"single\",\n                      },\n                      styles: {\n                        borderWidth: 0,\n                        width: \"stretch\",\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    states: {\n      selectedValue: {\n        type: \"writable\",\n        valueProp: \"selectedKey\",\n        onChangeProp: \"onSelectionChange\",\n        variableType: \"text\",\n      },\n      isOpen: {\n        type: \"writable\",\n        valueProp: \"isOpen\",\n        onChangeProp: \"onOpenChange\",\n        variableType: \"boolean\",\n      },\n    },\n    trapsFocus: true,\n  });\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport {\n  ComboBox,\n  ComboBoxProps,\n  ComboBoxRenderProps,\n  ComboBoxStateContext,\n} from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport {\n  PlasmicInputContext,\n  PlasmicListBoxContext,\n  PlasmicPopoverTriggerContext,\n} from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n  HasControlContextData,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  useAutoOpen,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n  itemIds: string[];\n}\n\nconst COMBOBOX_VARIANTS = [\"disabled\" as const];\n\nconst { variants: COMBOBOX_VARIANTS_DATA } =\n  pickAriaComponentVariants(COMBOBOX_VARIANTS);\n\nexport interface BaseComboboxProps\n  extends ComboBoxProps<{}>,\n    WithVariants<typeof COMBOBOX_VARIANTS>,\n    HasControlContextData<BaseComboboxControlContextData> {\n  children?: React.ReactNode;\n  isOpen?: boolean;\n  className?: string;\n}\n\n/*\n  This React Hook is used to help with auto-opening the combobox when the canvas component is selected.\n  Currently, there is a bug in react-aria combobox (https://github.com/adobe/react-spectrum/issues/7149) where, when the combobox's popover is auto-opened, it is unable to render any listbox items.\n  Setting popover's open state to true in not enough unless, unless it has previously been opened via user interaction with combobox.\n  Also, <Combobox> does not support an `isOpen` prop either.\n\n  So, we use this custom hook to access the combobox's internal state via ComboBoxStateContext and change the `open` state manually via tha available `open` method.\n\n  Note: It cannot be used as a hook like useAutoOpen() within the BaseSelect component\n  because it needs access to SelectStateContext, which is only created in the BaseSelect component's render function.\n  */\nfunction ComboboxAutoOpen(props: any) {\n  const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n  useAutoOpen({ props, open, close });\n\n  return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n  const {\n    children,\n    setControlContextData,\n    plasmicUpdateVariant,\n    className,\n    isOpen: _isOpen, // uncontrolled if not selected in canvas/edit mode\n    ...rest\n  } = props;\n\n  const classNameProp = useCallback(\n    ({ isDisabled }: ComboBoxRenderProps) => {\n      plasmicUpdateVariant?.({\n        disabled: isDisabled,\n      });\n      return className ?? \"\";\n    },\n    [className, plasmicUpdateVariant]\n  );\n\n  const idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n  useEffect(() => {\n    idManager.subscribe((ids: string[]) => {\n      setControlContextData?.({\n        itemIds: ids,\n      });\n    });\n  }, []);\n\n  return (\n    <ComboBox className={classNameProp} {...rest}>\n      <PlasmicPopoverTriggerContext.Provider value={true}>\n        <PlasmicListBoxContext.Provider\n          value={{\n            idManager,\n          }}\n        >\n          <PlasmicInputContext.Provider value={{ isUncontrolled: true }}>\n            <ComboboxAutoOpen {...props} />\n            {children}\n          </PlasmicInputContext.Provider>\n        </PlasmicListBoxContext.Provider>\n      </PlasmicPopoverTriggerContext.Provider>\n    </ComboBox>\n  );\n}\n\nexport function registerComboBox(loader?: Registerable) {\n  registerComponentHelper(loader, BaseComboBox, {\n    name: COMBOBOX_NAME,\n    displayName: \"Aria ComboBox\",\n    importPath: \"@plasmicpkgs/react-aria/skinny/registerComboBox\",\n    importName: \"BaseComboBox\",\n    variants: COMBOBOX_VARIANTS_DATA,\n    props: {\n      ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n        \"name\",\n        \"aria-label\",\n        \"isDisabled\",\n      ]),\n      selectedKey: {\n        type: \"choice\",\n        editOnly: true,\n        uncontrolledProp: \"defaultSelectedKey\",\n        displayName: \"Initial selected item\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        // React Aria ComboBox do not support multiple selections yet\n        multiSelect: false,\n      },\n      disabledKeys: {\n        type: \"choice\",\n        displayName: \"Disabled values\",\n        description:\n          \"The items that are disabled. These items cannot be selected, focused, or otherwise interacted with.\",\n        options: (_props, ctx) => (ctx?.itemIds ? Array.from(ctx.itemIds) : []),\n        multiSelect: true,\n        advanced: true,\n      },\n      isOpen: {\n        type: \"boolean\",\n        defaultValue: false,\n        // It doesn't make sense to make isOpen prop editable (it's controlled by user interaction and always closed by default), so we keep this prop hidden. We have listed the prop here in the meta only so we can expose a writeable state for it.\n        hidden: () => true,\n      },\n      onSelectionChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"selectedValue\", type: \"string\" }],\n      },\n      onOpenChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n      },\n\n      children: {\n        type: \"slot\",\n        defaultValue: [\n          {\n            type: \"vbox\",\n            styles: {\n              justifyContent: \"flex-start\",\n              alignItems: \"flex-start\",\n              width: \"300px\",\n              padding: 0,\n            },\n            children: [\n              {\n                type: \"component\",\n                name: LABEL_COMPONENT_NAME,\n                props: {\n                  children: {\n                    type: \"text\",\n                    value: \"Label\",\n                  },\n                },\n              },\n              {\n                type: \"hbox\",\n                styles: {\n                  padding: 0,\n                },\n                children: [\n                  {\n                    type: \"component\",\n                    name: INPUT_COMPONENT_NAME,\n                    styles: {\n                      width: \"100%\",\n                      borderRightWidth: 0,\n                    },\n                  },\n                  {\n                    type: \"component\",\n                    name: BUTTON_COMPONENT_NAME,\n                    props: {\n                      children: {\n                        type: \"img\",\n                        // TODO: Replace with the image of an arrow pointing up, like: https://icon-sets.iconify.design/mdi/triangle/\n                        src: \"https://static1.plasmic.app/arrow-up.svg\",\n                        styles: {\n                          width: \"15px\",\n                          transform: \"rotate(180deg)\",\n                          display: \"flex\",\n                          alignItems: \"center\",\n                          justifyContent: \"center\",\n                          padding: 0,\n                        },\n                      },\n                    },\n                  },\n                ],\n              },\n              {\n                type: \"component\",\n                name: POPOVER_COMPONENT_NAME,\n                styles: {\n                  backgroundColor: \"white\",\n                  padding: \"10px\",\n                  overflow: \"scroll\",\n                  width: \"unset\",\n                },\n                props: {\n                  offset: 0,\n                  children: [\n                    {\n                      type: \"component\",\n                      name: LIST_BOX_COMPONENT_NAME,\n                      props: {\n                        selectionMode: \"single\",\n                      },\n                      styles: {\n                        borderWidth: 0,\n                        width: \"stretch\",\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        ],\n      },\n    },\n    states: {\n      selectedValue: {\n        type: \"writable\",\n        valueProp: \"selectedKey\",\n        onChangeProp: \"onSelectionChange\",\n        variableType: \"text\",\n      },\n      isOpen: {\n        type: \"writable\",\n        valueProp: \"isOpen\",\n        onChangeProp: \"onOpenChange\",\n        variableType: \"boolean\",\n      },\n    },\n    trapsFocus: true,\n  });\n}\n"],"names":[],"mappings":"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"}

package/skinny/registerDialogTrigger.cjs.js

@@ -9,7 +9,7 @@ var registerModal = require('./registerModal.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
 require('react-aria');
 require('./common-1e5dba7d.cjs.js');
-require('./variant-utils-8cb38f8f.cjs.js');
+require('./variant-utils-0ad70db8.cjs.js');
 require('./registerHeading.cjs.js');
 require('@plasmicapp/host/registerComponent');
 

package/skinny/registerDialogTrigger.esm.js

@@ -7,7 +7,7 @@ import { MODAL_COMPONENT_NAME } from './registerModal.esm.js';
 import { r as registerComponentHelper, a as makeComponentName } from './utils-41b3d43b.esm.js';
 import 'react-aria';
 import './common-a8f4a4b1.esm.js';
-import './variant-utils-7c2ea202.esm.js';
+import './variant-utils-4405ebb0.esm.js';
 import './registerHeading.esm.js';
 import '@plasmicapp/host/registerComponent';
 

package/skinny/registerInput.cjs.js

@@ -6,7 +6,7 @@ var reactAriaComponents = require('react-aria-components');
 var common = require('./common-1e5dba7d.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
-var variantUtils = require('./variant-utils-8cb38f8f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
 require('@plasmicapp/host');
 require('@plasmicapp/host/registerComponent');
 
@@ -44,6 +44,7 @@ var __objRest = (source, exclude) => {
 };
 const INPUT_VARIANTS = [
   "focused",
+  "focusVisible",
   "hovered",
   "disabled"
 ];
@@ -58,65 +59,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__default.default.useContext(contexts.PlasmicTextFieldContext);
   const context = React__default.default.useContext(contexts.PlasmicInputContext);
   setControlContextData == null ? void 0 : setControlContextData({
     parent: textFieldContext
   });
-  const mergedProps = reactAria.mergeProps(
-    rest,
-    {
-      value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value
+  const classNameProp = React.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
-    }
-  );
-  React.useEffect(() => {
-    plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
-      disabled: mergedProps.disabled
-    });
-  }, [mergedProps.disabled, plasmicUpdateVariant]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    reactAriaComponents.Input,
-    __spreadValues({
-      autoComplete: common.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 = reactAria.mergeProps(rest, {
+    value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
+    autoComplete: common.resolveAutoComplete(autoComplete),
+    className: classNameProp
+  });
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Input, __spreadValues({}, mergedProps));
 }
 const INPUT_COMPONENT_NAME = utils.makeComponentName("input");
 function registerInput(loader, overrides) {