@plasmicpkgs/react-aria 0.0.69 → 0.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,12 @@
1
1
  import { PlasmicElement } from "@plasmicapp/host";
2
2
  import React from "react";
3
3
  import { Popover } from "react-aria-components";
4
- import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
4
+ import { CodeComponentMetaOverrides, Registerable } from "./utils";
5
5
  import { WithVariants } from "./variant-utils";
6
- export interface PopoverControlContextData {
7
- defaultShouldFlip?: boolean;
8
- }
9
6
  declare const POPOVER_VARIANTS: ("placementLeft" | "placementRight" | "placementTop" | "placementBottom")[];
10
- export interface BasePopoverProps extends React.ComponentProps<typeof Popover>, WithVariants<typeof POPOVER_VARIANTS>, HasControlContextData<PopoverControlContextData> {
7
+ export interface BasePopoverProps extends React.ComponentProps<typeof Popover>, WithVariants<typeof POPOVER_VARIANTS> {
11
8
  className?: string;
12
9
  resetClassName?: string;
13
- defaultShouldFlip?: boolean;
14
10
  children?: React.ReactNode;
15
11
  }
16
12
  export declare function BasePopover(props: BasePopoverProps): React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plasmicpkgs/react-aria",
3
- "version": "0.0.69",
3
+ "version": "0.0.70",
4
4
  "description": "Plasmic registration calls for react-aria based components",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -74,5 +74,5 @@
74
74
  "publishConfig": {
75
75
  "access": "public"
76
76
  },
77
- "gitHead": "4f66ee3e28b4aadf586d6cadf990d8302b3c4c2d"
77
+ "gitHead": "51f0334a7b03327c20236ffdd63bb96d371a0f26"
78
78
  }
@@ -83,21 +83,15 @@ function BaseComboBox(props) {
83
83
  });
84
84
  });
85
85
  }, []);
86
- return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadValues({}, rest), /* @__PURE__ */ React__default.default.createElement(
87
- contexts.PlasmicPopoverContext.Provider,
86
+ return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ComboBox, __spreadValues({}, rest), /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React__default.default.createElement(
87
+ contexts.PlasmicListBoxContext.Provider,
88
88
  {
89
- value: { isOpen, defaultShouldFlip: false }
89
+ value: {
90
+ idManager
91
+ }
90
92
  },
91
- /* @__PURE__ */ React__default.default.createElement(
92
- contexts.PlasmicListBoxContext.Provider,
93
- {
94
- value: {
95
- idManager
96
- }
97
- },
98
- /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React__default.default.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
99
- )
100
- ));
93
+ /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React__default.default.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
94
+ )));
101
95
  }
102
96
  function registerComboBox(loader) {
103
97
  utils.registerComponentHelper(loader, BaseComboBox, {
@@ -1 +1 @@
1
- {"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import {\n usePlasmicCanvasComponentInfo,\n usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport 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 PlasmicPopoverContext,\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} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\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 * */\nfunction ComboboxAutoOpen(props: any) {\n const isEditMode = !!usePlasmicCanvasContext();\n const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useEffect(() => {\n if (!isEditMode) {\n return;\n }\n if (isSelected) {\n open?.(undefined, \"manual\");\n } else {\n close?.();\n }\n // Not putting open and close in the useEffect dependencies array, because it causes a re-render loop.\n }, [isSelected, isEditMode]);\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = 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 return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider\n value={{ isOpen, defaultShouldFlip: false }}\n >\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 </PlasmicPopoverContext.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 props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\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 children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\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 },\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 },\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","usePlasmicCanvasContext","ComboBoxStateContext","useEffect","useMemo","ListBoxItemIdManager","React","ComboBox","PlasmicPopoverContext","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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"}
1
+ {"version":3,"file":"registerComboBox.cjs.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import {\n usePlasmicCanvasComponentInfo,\n usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport 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 PlasmicPopoverContext,\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} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\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 * */\nfunction ComboboxAutoOpen(props: any) {\n const isEditMode = !!usePlasmicCanvasContext();\n const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useEffect(() => {\n if (!isEditMode) {\n return;\n }\n if (isSelected) {\n open?.(undefined, \"manual\");\n } else {\n close?.();\n }\n // Not putting open and close in the useEffect dependencies array, because it causes a re-render loop.\n }, [isSelected, isEditMode]);\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = 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 return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider value={{ isOpen }}>\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 </PlasmicPopoverContext.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 props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\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 children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\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 },\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 },\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","usePlasmicCanvasContext","ComboBoxStateContext","useEffect","useMemo","ListBoxItemIdManager","React","ComboBox","PlasmicPopoverContext","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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"}
@@ -77,21 +77,15 @@ function BaseComboBox(props) {
77
77
  });
78
78
  });
79
79
  }, []);
80
- return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues({}, rest), /* @__PURE__ */ React.createElement(
81
- PlasmicPopoverContext.Provider,
80
+ return /* @__PURE__ */ React.createElement(ComboBox, __spreadValues({}, rest), /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen } }, /* @__PURE__ */ React.createElement(
81
+ PlasmicListBoxContext.Provider,
82
82
  {
83
- value: { isOpen, defaultShouldFlip: false }
83
+ value: {
84
+ idManager
85
+ }
84
86
  },
85
- /* @__PURE__ */ React.createElement(
86
- PlasmicListBoxContext.Provider,
87
- {
88
- value: {
89
- idManager
90
- }
91
- },
92
- /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
93
- )
94
- ));
87
+ /* @__PURE__ */ React.createElement(PlasmicInputContext.Provider, { value: { isUncontrolled: true } }, /* @__PURE__ */ React.createElement(ComboboxAutoOpen, __spreadValues({}, props)), children)
88
+ )));
95
89
  }
96
90
  function registerComboBox(loader) {
97
91
  registerComponentHelper(loader, BaseComboBox, {
@@ -1 +1 @@
1
- {"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import {\n usePlasmicCanvasComponentInfo,\n usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport 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 PlasmicPopoverContext,\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} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\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 * */\nfunction ComboboxAutoOpen(props: any) {\n const isEditMode = !!usePlasmicCanvasContext();\n const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useEffect(() => {\n if (!isEditMode) {\n return;\n }\n if (isSelected) {\n open?.(undefined, \"manual\");\n } else {\n close?.();\n }\n // Not putting open and close in the useEffect dependencies array, because it causes a re-render loop.\n }, [isSelected, isEditMode]);\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = 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 return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider\n value={{ isOpen, defaultShouldFlip: false }}\n >\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 </PlasmicPopoverContext.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 props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\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 children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\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 },\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 },\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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"}
1
+ {"version":3,"file":"registerComboBox.esm.js","sources":["../src/registerComboBox.tsx"],"sourcesContent":["import {\n usePlasmicCanvasComponentInfo,\n usePlasmicCanvasContext,\n} from \"@plasmicapp/host\";\nimport 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 PlasmicPopoverContext,\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} from \"./utils\";\n\nconst COMBOBOX_NAME = makeComponentName(\"combobox\");\n\nexport interface BaseComboboxControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseComboboxProps\n extends ComboBoxProps<{}>,\n HasControlContextData<BaseComboboxControlContextData> {\n placeholder?: string;\n children?: React.ReactNode;\n isOpen?: boolean;\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 * */\nfunction ComboboxAutoOpen(props: any) {\n const isEditMode = !!usePlasmicCanvasContext();\n const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n const { open, close } = React.useContext(ComboBoxStateContext) ?? {};\n\n useEffect(() => {\n if (!isEditMode) {\n return;\n }\n if (isSelected) {\n open?.(undefined, \"manual\");\n } else {\n close?.();\n }\n // Not putting open and close in the useEffect dependencies array, because it causes a re-render loop.\n }, [isSelected, isEditMode]);\n\n return null;\n}\n\nexport function BaseComboBox(props: BaseComboboxProps) {\n const { children, setControlContextData, isOpen, ...rest } = 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 return (\n <ComboBox {...rest}>\n <PlasmicPopoverContext.Provider value={{ isOpen }}>\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 </PlasmicPopoverContext.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 props: {\n ...getCommonProps<BaseComboboxProps>(\"ComboBox\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\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 children: [\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\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 },\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 },\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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"}
@@ -49,24 +49,14 @@ const POPOVER_VARIANTS = [
49
49
  ];
50
50
  const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(POPOVER_VARIANTS);
51
51
  function BasePopover(props) {
52
- var _c;
53
- const _a = props, {
54
- resetClassName,
55
- setControlContextData,
56
- plasmicUpdateVariant
57
- } = _a, restProps = __objRest(_a, [
58
- "resetClassName",
59
- "setControlContextData",
60
- "plasmicUpdateVariant"
61
- ]);
52
+ const _a = props, { resetClassName, plasmicUpdateVariant } = _a, restProps = __objRest(_a, ["resetClassName", "plasmicUpdateVariant"]);
62
53
  const isStandalone = !React__default.default.useContext(reactAriaComponents.PopoverContext);
63
54
  const context = React__default.default.useContext(contexts.PlasmicPopoverContext);
64
55
  const triggerRef = React__default.default.useRef(null);
65
56
  const isEditMode = !!host.usePlasmicCanvasContext();
66
57
  const _b = utils.mergeProps(
67
58
  {
68
- isOpen: context == null ? void 0 : context.isOpen,
69
- shouldFlip: context == null ? void 0 : context.defaultShouldFlip
59
+ isOpen: context == null ? void 0 : context.isOpen
70
60
  },
71
61
  /**
72
62
  * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *
@@ -87,9 +77,6 @@ function BasePopover(props) {
87
77
  isOpen: true
88
78
  } : null
89
79
  ), { children } = _b, mergedProps = __objRest(_b, ["children"]);
90
- setControlContextData == null ? void 0 : setControlContextData({
91
- defaultShouldFlip: (_c = context == null ? void 0 : context.defaultShouldFlip) != null ? _c : true
92
- });
93
80
  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isStandalone && /* @__PURE__ */ React__default.default.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Popover, __spreadValues({}, mergedProps), ({ placement }) => withObservedValues(
94
81
  children,
95
82
  {
@@ -174,7 +161,7 @@ function registerPopover(loader, overrides) {
174
161
  shouldFlip: {
175
162
  type: "boolean",
176
163
  description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
177
- defaultValueHint: (_props, ctx) => ctx == null ? void 0 : ctx.defaultShouldFlip
164
+ defaultValueHint: true
178
165
  },
179
166
  placement: {
180
167
  type: "choice",
@@ -1 +1 @@
1
- {"version":3,"file":"registerPopover.cjs.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nexport interface PopoverControlContextData {\n defaultShouldFlip?: boolean;\n}\n\n/*\n NOTE: Placement should be managed as variants, not just props.\n When `shouldFlip` is true, the placement prop may not represent the final position\n (e.g., if placement is set to \"bottom\" but lacks space, the popover may flip to \"top\").\n However, data-selectors will consistently indicate the actual placement of the popover.\n */\nconst POPOVER_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(POPOVER_VARIANTS);\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n WithVariants<typeof POPOVER_VARIANTS>,\n HasControlContextData<PopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n defaultShouldFlip?: boolean;\n children?: React.ReactNode;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const {\n resetClassName,\n setControlContextData,\n plasmicUpdateVariant,\n ...restProps\n } = props;\n // Popover can be inside DialogTrigger, Select, Combobox, etc. So we can't just use a particular context like DialogTrigger (like we do in Modal) to decide if it is standalone\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n const { children, ...mergedProps } = mergeProps(\n {\n isOpen: context?.isOpen,\n shouldFlip: context?.defaultShouldFlip,\n },\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n /**\n * Always true, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view\n * In component view, we never want to start with an empty artboard, so isOpen has to be true\n * */\n\n isOpen: true,\n }\n : null\n );\n\n setControlContextData?.({\n defaultShouldFlip: context?.defaultShouldFlip ?? true,\n });\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps}>\n {({ placement }) =>\n withObservedValues(\n children,\n {\n placementTop: placement === \"top\",\n placementBottom: placement === \"bottom\",\n placementLeft: placement === \"left\",\n placementRight: placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Popover>\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: (_props, ctx) => ctx?.defaultShouldFlip,\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"bottom\",\n options: [\n // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n ],\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n },\n // No isOpen state for popover, because we assume that its open state is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc.\n styleSections: true,\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PopoverContext","PlasmicPopoverContext","usePlasmicCanvasContext","mergeProps","Popover","makeComponentName","registerComponentHelper"],"mappings":"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"}
1
+ {"version":3,"file":"registerPopover.cjs.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\n/*\n NOTE: Placement should be managed as variants, not just props.\n When `shouldFlip` is true, the placement prop may not represent the final position\n (e.g., if placement is set to \"bottom\" but lacks space, the popover may flip to \"top\").\n However, data-selectors will consistently indicate the actual placement of the popover.\n */\nconst POPOVER_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(POPOVER_VARIANTS);\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n WithVariants<typeof POPOVER_VARIANTS> {\n className?: string;\n resetClassName?: string;\n children?: React.ReactNode;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const { resetClassName, plasmicUpdateVariant, ...restProps } = props;\n // Popover can be inside DialogTrigger, Select, Combobox, etc. So we can't just use a particular context like DialogTrigger (like we do in Modal) to decide if it is standalone\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n const { children, ...mergedProps } = mergeProps(\n {\n isOpen: context?.isOpen,\n },\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n /**\n * Always true, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view\n * In component view, we never want to start with an empty artboard, so isOpen has to be true\n * */\n\n isOpen: true,\n }\n : null\n );\n\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps}>\n {({ placement }) =>\n withObservedValues(\n children,\n {\n placementTop: placement === \"top\",\n placementBottom: placement === \"bottom\",\n placementLeft: placement === \"left\",\n placementRight: placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Popover>\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: true,\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"bottom\",\n options: [\n // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n ],\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n },\n // No isOpen state for popover, because we assume that its open state is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc.\n styleSections: true,\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PopoverContext","PlasmicPopoverContext","usePlasmicCanvasContext","mergeProps","Popover","makeComponentName","registerComponentHelper"],"mappings":"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"}
@@ -1,16 +1,12 @@
1
1
  import { PlasmicElement } from "@plasmicapp/host";
2
2
  import React from "react";
3
3
  import { Popover } from "react-aria-components";
4
- import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
4
+ import { CodeComponentMetaOverrides, Registerable } from "./utils";
5
5
  import { WithVariants } from "./variant-utils";
6
- export interface PopoverControlContextData {
7
- defaultShouldFlip?: boolean;
8
- }
9
6
  declare const POPOVER_VARIANTS: ("placementLeft" | "placementRight" | "placementTop" | "placementBottom")[];
10
- export interface BasePopoverProps extends React.ComponentProps<typeof Popover>, WithVariants<typeof POPOVER_VARIANTS>, HasControlContextData<PopoverControlContextData> {
7
+ export interface BasePopoverProps extends React.ComponentProps<typeof Popover>, WithVariants<typeof POPOVER_VARIANTS> {
11
8
  className?: string;
12
9
  resetClassName?: string;
13
- defaultShouldFlip?: boolean;
14
10
  children?: React.ReactNode;
15
11
  }
16
12
  export declare function BasePopover(props: BasePopoverProps): React.JSX.Element;
@@ -43,24 +43,14 @@ const POPOVER_VARIANTS = [
43
43
  ];
44
44
  const { variants, withObservedValues } = pickAriaComponentVariants(POPOVER_VARIANTS);
45
45
  function BasePopover(props) {
46
- var _c;
47
- const _a = props, {
48
- resetClassName,
49
- setControlContextData,
50
- plasmicUpdateVariant
51
- } = _a, restProps = __objRest(_a, [
52
- "resetClassName",
53
- "setControlContextData",
54
- "plasmicUpdateVariant"
55
- ]);
46
+ const _a = props, { resetClassName, plasmicUpdateVariant } = _a, restProps = __objRest(_a, ["resetClassName", "plasmicUpdateVariant"]);
56
47
  const isStandalone = !React.useContext(PopoverContext);
57
48
  const context = React.useContext(PlasmicPopoverContext);
58
49
  const triggerRef = React.useRef(null);
59
50
  const isEditMode = !!usePlasmicCanvasContext();
60
51
  const _b = mergeProps(
61
52
  {
62
- isOpen: context == null ? void 0 : context.isOpen,
63
- shouldFlip: context == null ? void 0 : context.defaultShouldFlip
53
+ isOpen: context == null ? void 0 : context.isOpen
64
54
  },
65
55
  /**
66
56
  * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *
@@ -81,9 +71,6 @@ function BasePopover(props) {
81
71
  isOpen: true
82
72
  } : null
83
73
  ), { children } = _b, mergedProps = __objRest(_b, ["children"]);
84
- setControlContextData == null ? void 0 : setControlContextData({
85
- defaultShouldFlip: (_c = context == null ? void 0 : context.defaultShouldFlip) != null ? _c : true
86
- });
87
74
  return /* @__PURE__ */ React.createElement(React.Fragment, null, isStandalone && /* @__PURE__ */ React.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React.createElement(Popover, __spreadValues({}, mergedProps), ({ placement }) => withObservedValues(
88
75
  children,
89
76
  {
@@ -168,7 +155,7 @@ function registerPopover(loader, overrides) {
168
155
  shouldFlip: {
169
156
  type: "boolean",
170
157
  description: "Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.",
171
- defaultValueHint: (_props, ctx) => ctx == null ? void 0 : ctx.defaultShouldFlip
158
+ defaultValueHint: true
172
159
  },
173
160
  placement: {
174
161
  type: "choice",
@@ -1 +1 @@
1
- {"version":3,"file":"registerPopover.esm.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nexport interface PopoverControlContextData {\n defaultShouldFlip?: boolean;\n}\n\n/*\n NOTE: Placement should be managed as variants, not just props.\n When `shouldFlip` is true, the placement prop may not represent the final position\n (e.g., if placement is set to \"bottom\" but lacks space, the popover may flip to \"top\").\n However, data-selectors will consistently indicate the actual placement of the popover.\n */\nconst POPOVER_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(POPOVER_VARIANTS);\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n WithVariants<typeof POPOVER_VARIANTS>,\n HasControlContextData<PopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n defaultShouldFlip?: boolean;\n children?: React.ReactNode;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const {\n resetClassName,\n setControlContextData,\n plasmicUpdateVariant,\n ...restProps\n } = props;\n // Popover can be inside DialogTrigger, Select, Combobox, etc. So we can't just use a particular context like DialogTrigger (like we do in Modal) to decide if it is standalone\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n const { children, ...mergedProps } = mergeProps(\n {\n isOpen: context?.isOpen,\n shouldFlip: context?.defaultShouldFlip,\n },\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n /**\n * Always true, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view\n * In component view, we never want to start with an empty artboard, so isOpen has to be true\n * */\n\n isOpen: true,\n }\n : null\n );\n\n setControlContextData?.({\n defaultShouldFlip: context?.defaultShouldFlip ?? true,\n });\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps}>\n {({ placement }) =>\n withObservedValues(\n children,\n {\n placementTop: placement === \"top\",\n placementBottom: placement === \"bottom\",\n placementLeft: placement === \"left\",\n placementRight: placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Popover>\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: (_props, ctx) => ctx?.defaultShouldFlip,\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"bottom\",\n options: [\n // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n ],\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n },\n // No isOpen state for popover, because we assume that its open state is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc.\n styleSections: true,\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"registerPopover.esm.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { PlasmicElement, usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { Popover, PopoverContext } from \"react-aria-components\";\nimport { PlasmicPopoverContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\n/*\n NOTE: Placement should be managed as variants, not just props.\n When `shouldFlip` is true, the placement prop may not represent the final position\n (e.g., if placement is set to \"bottom\" but lacks space, the popover may flip to \"top\").\n However, data-selectors will consistently indicate the actual placement of the popover.\n */\nconst POPOVER_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(POPOVER_VARIANTS);\n\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n WithVariants<typeof POPOVER_VARIANTS> {\n className?: string;\n resetClassName?: string;\n children?: React.ReactNode;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n const { resetClassName, plasmicUpdateVariant, ...restProps } = props;\n // Popover can be inside DialogTrigger, Select, Combobox, etc. So we can't just use a particular context like DialogTrigger (like we do in Modal) to decide if it is standalone\n const isStandalone = !React.useContext(PopoverContext);\n const context = React.useContext(PlasmicPopoverContext);\n const triggerRef = React.useRef<any>(null);\n const isEditMode = !!usePlasmicCanvasContext();\n\n const { children, ...mergedProps } = mergeProps(\n {\n isOpen: context?.isOpen,\n },\n /**\n * isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. *\n *\n * Setting isNonModal to true in edit mode (canvas) means that the popover will not prevent the user from interacting with the canvas while the popover is open.\n */\n isEditMode ? { isNonModal: true } : null,\n restProps,\n { className: `${resetClassName}` },\n // Override some props if the popover is standalone\n isStandalone\n ? {\n triggerRef,\n isNonModal: true,\n /**\n * Always true, because we assume that popover is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc, and its only really standalone in component view\n * In component view, we never want to start with an empty artboard, so isOpen has to be true\n * */\n\n isOpen: true,\n }\n : null\n );\n\n return (\n <>\n {isStandalone && <div ref={triggerRef} />}\n <Popover {...mergedProps}>\n {({ placement }) =>\n withObservedValues(\n children,\n {\n placementTop: placement === \"top\",\n placementBottom: placement === \"bottom\",\n placementLeft: placement === \"left\",\n placementRight: placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Popover>\n </>\n );\n}\n\nexport const POPOVER_COMPONENT_NAME = makeComponentName(\"popover\");\nexport const POPOVER_ARROW_IMG: PlasmicElement = {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n position: \"absolute\",\n top: \"-14px\",\n // center the arrow horizontally on the popover\n left: \"50%\",\n transform: \"translateX(-50%)\",\n width: \"15px\",\n },\n};\n\nexport function registerPopover(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BasePopover>\n) {\n registerComponentHelper(\n loader,\n BasePopover,\n {\n name: POPOVER_COMPONENT_NAME,\n displayName: \"Aria Popover\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerPopover\",\n importName: \"BasePopover\",\n variants,\n defaultStyles: {\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n width: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n POPOVER_ARROW_IMG,\n {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n rowGap: \"10px\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Popover!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n ],\n },\n offset: {\n type: \"number\",\n displayName: \"Offset\",\n description:\n \"Additional offset applied vertically between the popover and its trigger\",\n defaultValueHint: 8,\n },\n shouldFlip: {\n type: \"boolean\",\n description:\n \"Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.\",\n defaultValueHint: true,\n },\n placement: {\n type: \"choice\",\n description:\n \"Default placement of the popover relative to the trigger, if there is enough space\",\n defaultValueHint: \"bottom\",\n options: [\n // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n ],\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n },\n // No isOpen state for popover, because we assume that its open state is always going to be controlled by a parent like Select, Combobox, DialogTrigger, etc.\n styleSections: true,\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
@@ -88,21 +88,15 @@ function BaseSelect(props) {
88
88
  "aria-label": ariaLabel,
89
89
  isOpen: _isOpen
90
90
  }, utils.extractPlasmicDataProps(props)),
91
- /* @__PURE__ */ React__default.default.createElement(
92
- contexts.PlasmicPopoverContext.Provider,
91
+ /* @__PURE__ */ React__default.default.createElement(contexts.PlasmicPopoverContext.Provider, { value: { isOpen: _isOpen } }, /* @__PURE__ */ React__default.default.createElement(
92
+ contexts.PlasmicListBoxContext.Provider,
93
93
  {
94
- value: { isOpen: _isOpen, defaultShouldFlip: false }
94
+ value: {
95
+ idManager
96
+ }
95
97
  },
96
- /* @__PURE__ */ React__default.default.createElement(
97
- contexts.PlasmicListBoxContext.Provider,
98
- {
99
- value: {
100
- idManager
101
- }
102
- },
103
- children
104
- )
105
- )
98
+ children
99
+ ))
106
100
  );
107
101
  }
108
102
  function registerSelect(loader) {
@@ -1 +1 @@
1
- {"version":3,"file":"registerSelect.cjs.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Select, SelectProps, SelectValue } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseSelectProps\n 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\n HasControlContextData<BaseSelectControlContextData> {\n children?: React.ReactNode;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n const {\n selectedKey,\n onSelectionChange,\n placeholder,\n onOpenChange,\n isDisabled,\n className,\n style,\n children,\n disabledKeys,\n name,\n isOpen,\n setControlContextData,\n \"aria-label\": ariaLabel,\n } = props;\n\n const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n const _isOpen = (isSelected || isOpen) ?? false;\n\n let idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n disabledKeys={disabledKeys}\n aria-label={ariaLabel}\n isOpen={_isOpen}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicPopoverContext.Provider\n value={{ isOpen: _isOpen, defaultShouldFlip: false }}\n >\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n hidden: (props) => !props.customize,\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n trapsFocus: true,\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n ...getCommonProps<BaseSelectProps>(\"Select\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n \"autoFocus\",\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 Select do not support multiple selections yet\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedValue\", type: \"string\" }],\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 onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\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: \"component\",\n name: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\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 },\n props: {\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":["React","SelectValue","makeComponentName","useMemo","ListBoxItemIdManager","useEffect","Select","extractPlasmicDataProps","PlasmicPopoverContext","PlasmicListBoxContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
1
+ {"version":3,"file":"registerSelect.cjs.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasComponentInfo } from \"@plasmicapp/host\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Select, SelectProps, SelectValue } from \"react-aria-components\";\nimport { getCommonProps } from \"./common\";\nimport { PlasmicListBoxContext, PlasmicPopoverContext } from \"./contexts\";\nimport { ListBoxItemIdManager } from \"./ListBoxItemIdManager\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectControlContextData {\n itemIds: string[];\n}\n\nexport interface BaseSelectProps\n 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\n HasControlContextData<BaseSelectControlContextData> {\n children?: React.ReactNode;\n}\n\nexport function BaseSelect(props: BaseSelectProps) {\n const {\n selectedKey,\n onSelectionChange,\n placeholder,\n onOpenChange,\n isDisabled,\n className,\n style,\n children,\n disabledKeys,\n name,\n isOpen,\n setControlContextData,\n \"aria-label\": ariaLabel,\n } = props;\n\n const { isSelected } = usePlasmicCanvasComponentInfo(props) ?? {};\n const _isOpen = (isSelected || isOpen) ?? false;\n\n let idManager = useMemo(() => new ListBoxItemIdManager(), []);\n\n useEffect(() => {\n idManager.subscribe((ids: string[]) => {\n setControlContextData?.({\n itemIds: ids,\n });\n });\n }, []);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n disabledKeys={disabledKeys}\n aria-label={ariaLabel}\n isOpen={_isOpen}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicPopoverContext.Provider value={{ isOpen: _isOpen }}>\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {children}\n </PlasmicListBoxContext.Provider>\n </PlasmicPopoverContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n hidden: (props) => !props.customize,\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n trapsFocus: true,\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n ...getCommonProps<BaseSelectProps>(\"Select\", [\n \"name\",\n \"aria-label\",\n \"placeholder\",\n \"isDisabled\",\n \"autoFocus\",\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 Select do not support multiple selections yet\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedValue\", type: \"string\" }],\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 onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n children: {\n type: \"slot\",\n mergeWithParent: true,\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: \"component\",\n name: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\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 },\n props: {\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":["React","SelectValue","makeComponentName","useMemo","ListBoxItemIdManager","useEffect","Select","extractPlasmicDataProps","PlasmicPopoverContext","PlasmicListBoxContext","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAChC,EACE,uBAAAA,sBAAA,CAAA,aAAA,CAACC,uCACE,CAAC,EAAE,eAAe,YAAa,EAAA,iGAE3B,aACC,mBAAAD,sBAAA,CAAA,aAAA,CAAC,cAAK,gBAAc,CAAA,+GAGjBA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EACE,YAAa,QAA+B,GAAA,YAC/C,CACF,CAGJ,CAEJ,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,WAAA,GAAcE,wBAAkB,QAAQ,CAAA,CAAA;AAYvC,SAAS,WAAW,KAAwB,EAAA;AAzDnD,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA0DE,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,GACZ,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,UAAW,EAAA,GAAA,CAAI,wCAA8B,KAAK,CAAA,KAAnC,YAAwC,EAAC,CAAA;AAChE,EAAM,MAAA,OAAA,GAAA,CAAW,EAAc,GAAA,UAAA,IAAA,MAAA,KAAd,IAAyB,GAAA,EAAA,GAAA,KAAA,CAAA;AAE1C,EAAA,IAAI,YAAYC,aAAQ,CAAA,MAAM,IAAIC,oCAAqB,EAAA,EAAG,EAAE,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,SAAA,CAAU,CAAC,GAAkB,KAAA;AACrC,MAAwB,qBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAA;AAAA,QACtB,OAAS,EAAA,GAAA;AAAA,OACX,CAAA,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAL,sBAAA,CAAA,aAAA;AAAA,IAACM,0BAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,WAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,MAAQ,EAAA,OAAA;AAAA,KAAA,EACJC,8BAAwB,KAAK,CAAA,CAAA;AAAA,oBAEjCP,sBAAA,CAAA,aAAA,CAACQ,+BAAsB,QAAtB,EAAA,EAA+B,OAAO,EAAE,MAAA,EAAQ,SAC/C,EAAA,kBAAAR,sBAAA,CAAA,aAAA;AAAA,MAACS,8BAAsB,CAAA,QAAA;AAAA,MAAtB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,SACF;AAAA,OAAA;AAAA,MAEC,QAAA;AAAA,KAEL,CAAA;AAAA,GACF,CAAA;AAEJ,CAAA;AAEO,SAAS,eAAe,MAAuB,EAAA;AACpD,EAAM,MAAA,eAAA,GAAkBC,6BAAwB,CAAA,MAAA,EAAQ,eAAiB,EAAA;AAAA,IACvE,IAAA,EAAMR,wBAAkB,cAAc,CAAA;AAAA,IACtC,WAAa,EAAA,qBAAA;AAAA,IACb,UAAY,EAAA,+CAAA;AAAA,IACZ,UAAY,EAAA,iBAAA;AAAA,IACZ,mBAAqB,EAAA,WAAA;AAAA,IACrB,KAAO,EAAA;AAAA,MACL,SAAW,EAAA;AAAA,QACT,IAAM,EAAA,SAAA;AAAA,QACN,WAAa,EAAA,iDAAA;AAAA,OACf;AAAA,MACA,QAAU,EAAA;AAAA,QACR,IAAM,EAAA,MAAA;AAAA,QACN,YAAc,EAAA;AAAA,UACZ;AAAA,YACE,IAAM,EAAA,MAAA;AAAA,YACN,KAAO,EAAA,mBAAA;AAAA,WACT;AAAA,SACF;AAAA,QACA,MAAQ,EAAA,CAAC,KAAU,KAAA,CAAC,KAAM,CAAA,SAAA;AAAA,OAC5B;AAAA,MACA,SAAW,EAAA;AAAA,QACT,IAAM,EAAA,OAAA;AAAA,QACN,SAAW,EAAA;AAAA,UACT;AAAA,YACE,QAAU,EAAA,yBAAA;AAAA,YACV,KAAO,EAAA,aAAA;AAAA,WACT;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,UAAY,EAAA,IAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAAQ,6BAAA,CAAwB,QAAQ,UAAY,EAAA;AAAA,IAC1C,IAAM,EAAA,WAAA;AAAA,IACN,WAAa,EAAA,aAAA;AAAA,IACb,UAAY,EAAA,+CAAA;AAAA,IACZ,UAAY,EAAA,YAAA;AAAA,IACZ,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAAC,qBAAA,CAAgC,QAAU,EAAA;AAAA,MAC3C,MAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,KACD,CAPI,CAAA,EAAA;AAAA,MAQL,WAAa,EAAA;AAAA,QACX,IAAM,EAAA,QAAA;AAAA,QACN,QAAU,EAAA,IAAA;AAAA,QACV,gBAAkB,EAAA,oBAAA;AAAA,QAClB,WAAa,EAAA,uBAAA;AAAA,QACb,OAAA,EAAS,CAAC,MAAA,EAAQ,GAAS,KAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,OAAU,IAAA,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,OAAO,CAAA,GAAI,EAAC;AAAA;AAAA,QAErE,WAAa,EAAA,KAAA;AAAA,OACf;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,IAAM,EAAA,cAAA;AAAA,QACN,UAAU,CAAC,EAAE,MAAM,eAAiB,EAAA,IAAA,EAAM,UAAU,CAAA;AAAA,OACtD;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,IAAM,EAAA,QAAA;AAAA,QACN,WAAa,EAAA,iBAAA;AAAA,QACb,WACE,EAAA,qGAAA;AAAA,QACF,OAAA,EAAS,CAAC,MAAA,EAAQ,GAAS,KAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,OAAU,IAAA,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,OAAO,CAAA,GAAI,EAAC;AAAA,QACrE,WAAa,EAAA,IAAA;AAAA,QACb,QAAU,EAAA,IAAA;AAAA,OACZ;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,IAAM,EAAA,SAAA;AAAA,QACN,YAAc,EAAA,KAAA;AAAA;AAAA,QAEd,QAAQ,MAAM,IAAA;AAAA,OAChB;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,IAAM,EAAA,cAAA;AAAA,QACN,UAAU,CAAC,EAAE,MAAM,QAAU,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,OAChD;AAAA,MACA,QAAU,EAAA;AAAA,QACR,IAAM,EAAA,MAAA;AAAA,QACN,eAAiB,EAAA,IAAA;AAAA,QACjB,YAAc,EAAA;AAAA,UACZ;AAAA,YACE,IAAM,EAAA,MAAA;AAAA,YACN,MAAQ,EAAA;AAAA,cACN,cAAgB,EAAA,YAAA;AAAA,cAChB,UAAY,EAAA,YAAA;AAAA,cACZ,KAAO,EAAA,OAAA;AAAA,cACP,OAAS,EAAA,CAAA;AAAA,aACX;AAAA,YACA,QAAU,EAAA;AAAA,cACR;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAAC,kCAAA;AAAA,gBACN,KAAO,EAAA;AAAA,kBACL,QAAU,EAAA;AAAA,oBACR,IAAM,EAAA,MAAA;AAAA,oBACN,KAAO,EAAA,OAAA;AAAA,mBACT;AAAA,iBACF;AAAA,eACF;AAAA,cACA;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAAC,oCAAA;AAAA,gBACN,MAAQ,EAAA;AAAA,kBACN,KAAO,EAAA,MAAA;AAAA,iBACT;AAAA,gBACA,KAAO,EAAA;AAAA,kBACL,QAAU,EAAA;AAAA,oBACR,IAAM,EAAA,MAAA;AAAA,oBACN,MAAQ,EAAA;AAAA,sBACN,KAAO,EAAA,SAAA;AAAA,sBACP,cAAgB,EAAA,eAAA;AAAA,sBAChB,UAAY,EAAA,QAAA;AAAA,sBACZ,OAAS,EAAA,SAAA;AAAA,qBACX;AAAA,oBACA,QAAU,EAAA;AAAA,sBACR;AAAA,wBACE,IAAM,EAAA,WAAA;AAAA,wBACN,MAAM,eAAgB,CAAA,IAAA;AAAA,uBACxB;AAAA,sBACA;AAAA,wBACE,IAAM,EAAA,KAAA;AAAA,wBACN,GAAK,EAAA,0CAAA;AAAA,wBACL,MAAQ,EAAA;AAAA,0BACN,MAAQ,EAAA,MAAA;AAAA,0BACR,KAAO,EAAA,MAAA;AAAA,0BACP,SAAW,EAAA,gBAAA;AAAA,yBACb;AAAA,uBACF;AAAA,qBACF;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,cACA;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAAC,sCAAA;AAAA,gBACN,MAAQ,EAAA;AAAA,kBACN,eAAiB,EAAA,OAAA;AAAA,kBACjB,OAAS,EAAA,MAAA;AAAA,kBACT,QAAU,EAAA,QAAA;AAAA,iBACZ;AAAA,gBACA,KAAO,EAAA;AAAA,kBACL,QAAU,EAAA;AAAA,oBACR;AAAA,sBACE,IAAM,EAAA,WAAA;AAAA,sBACN,IAAM,EAAAC,uCAAA;AAAA,sBACN,KAAO,EAAA;AAAA,wBACL,aAAe,EAAA,QAAA;AAAA,uBACjB;AAAA,sBACA,MAAQ,EAAA;AAAA,wBACN,WAAa,EAAA,CAAA;AAAA,wBACb,KAAO,EAAA,SAAA;AAAA,uBACT;AAAA,qBACF;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF,CAAA;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,aAAe,EAAA;AAAA,QACb,IAAM,EAAA,UAAA;AAAA,QACN,SAAW,EAAA,aAAA;AAAA,QACX,YAAc,EAAA,mBAAA;AAAA,QACd,YAAc,EAAA,MAAA;AAAA,OAChB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,IAAM,EAAA,UAAA;AAAA,QACN,SAAW,EAAA,QAAA;AAAA,QACX,YAAc,EAAA,cAAA;AAAA,QACd,YAAc,EAAA,SAAA;AAAA,OAChB;AAAA,KACF;AAAA,IACA,UAAY,EAAA,IAAA;AAAA,GACb,CAAA,CAAA;AACH;;;;;;"}
@@ -82,21 +82,15 @@ function BaseSelect(props) {
82
82
  "aria-label": ariaLabel,
83
83
  isOpen: _isOpen
84
84
  }, extractPlasmicDataProps(props)),
85
- /* @__PURE__ */ React.createElement(
86
- PlasmicPopoverContext.Provider,
85
+ /* @__PURE__ */ React.createElement(PlasmicPopoverContext.Provider, { value: { isOpen: _isOpen } }, /* @__PURE__ */ React.createElement(
86
+ PlasmicListBoxContext.Provider,
87
87
  {
88
- value: { isOpen: _isOpen, defaultShouldFlip: false }
88
+ value: {
89
+ idManager
90
+ }
89
91
  },
90
- /* @__PURE__ */ React.createElement(
91
- PlasmicListBoxContext.Provider,
92
- {
93
- value: {
94
- idManager
95
- }
96
- },
97
- children
98
- )
99
- )
92
+ children
93
+ ))
100
94
  );
101
95
  }
102
96
  function registerSelect(loader) {