@plasmicpkgs/react-aria 0.0.86 → 0.0.87

package/skinny/registerComboBox.esm.js.map

@@ -1 +1 @@
-{"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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"}
+{"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 { arrowDown, 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: arrowDown,\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

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

package/skinny/registerDialogTrigger.esm.js

@@ -6,7 +6,7 @@ import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
 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 './common-7ecf439d.esm.js';
 import './variant-utils-4405ebb0.esm.js';
 import './registerHeading.esm.js';
 import '@plasmicapp/host/registerComponent';

package/skinny/registerInput.cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-1e5dba7d.cjs.js');
+var common = require('./common-47e48033.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');

package/skinny/registerInput.esm.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { mergeProps } from 'react-aria';
 import { Input } from 'react-aria-components';
-import { r as resolveAutoComplete, g as getCommonProps } from './common-a8f4a4b1.esm.js';
+import { r as resolveAutoComplete, g as getCommonProps } from './common-7ecf439d.esm.js';
 import { g as PlasmicTextFieldContext, c as PlasmicInputContext } from './contexts-5cb81c2f.esm.js';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-41b3d43b.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';

package/skinny/registerModal.cjs.js

@@ -4,7 +4,7 @@ var host = require('@plasmicapp/host');
 var React = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
-var common = require('./common-1e5dba7d.cjs.js');
+var common = require('./common-47e48033.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var registerHeading = require('./registerHeading.cjs.js');
 var utils = require('./utils-d1c8094f.cjs.js');

package/skinny/registerModal.esm.js

@@ -2,7 +2,7 @@ import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo } from '@plasmic
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { mergeProps } from 'react-aria';
 import { ModalOverlay, Modal, Dialog } from 'react-aria-components';
-import { h as hasParent } from './common-a8f4a4b1.esm.js';
+import { h as hasParent } from './common-7ecf439d.esm.js';
 import { d as PlasmicDialogTriggerContext } from './contexts-5cb81c2f.esm.js';
 import { HEADING_COMPONENT_NAME } from './registerHeading.esm.js';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-41b3d43b.esm.js';

package/skinny/registerOverlayArrow.cjs.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var common = require('./common-47e48033.cjs.js');
+var utils = require('./utils-d1c8094f.cjs.js');
+var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
+require('@plasmicapp/host');
+require('@plasmicapp/host/registerComponent');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const OVERLAY_ARROW_VARIANTS = [
+  // We do not offer a placementDown variant, because that's the default placement (an overlay arrow always has [data-placement=bottom] if it's not explicitly set)
+  "placementTop",
+  "placementLeft",
+  "placementRight"
+];
+const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(
+  OVERLAY_ARROW_VARIANTS
+);
+function BaseOverlayArrow({
+  children,
+  plasmicUpdateVariant,
+  className
+}) {
+  const popoverContext = React__default.default.useContext(reactAriaComponents.PopoverContext);
+  const tooltipContext = React__default.default.useContext(reactAriaComponents.TooltipContext);
+  const isStandalone = !popoverContext && !tooltipContext;
+  const overlayArrow = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.OverlayArrow, { style: { lineHeight: "0" }, className }, ({ placement }) => withObservedValues(
+    /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, children),
+    {
+      placementTop: placement === "top",
+      placementLeft: placement === "left",
+      placementRight: placement === "right"
+    },
+    plasmicUpdateVariant
+  ));
+  if (isStandalone) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { style: { position: "relative" } }, overlayArrow);
+  }
+  return overlayArrow;
+}
+const OVERLAY_ARROW_COMPONENT_NAME = utils.makeComponentName("overlayArrow");
+function registerOverlayArrow(loader, overrides) {
+  return utils.registerComponentHelper(
+    loader,
+    BaseOverlayArrow,
+    {
+      name: OVERLAY_ARROW_COMPONENT_NAME,
+      displayName: "Aria Overlay Arrow",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerOverlayArrow",
+      importName: "BaseOverlayArrow",
+      styleSections: false,
+      variants,
+      props: {
+        children: {
+          type: "slot",
+          defaultValue: common.arrowDown
+        }
+      }
+    },
+    overrides
+  );
+}
+
+exports.BaseOverlayArrow = BaseOverlayArrow;
+exports.OVERLAY_ARROW_COMPONENT_NAME = OVERLAY_ARROW_COMPONENT_NAME;
+exports.registerOverlayArrow = registerOverlayArrow;
+//# sourceMappingURL=registerOverlayArrow.cjs.js.map

package/skinny/registerOverlayArrow.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerOverlayArrow.cjs.js","sources":["../src/registerOverlayArrow.tsx"],"sourcesContent":["import React from \"react\";\nimport type {\n  OverlayArrowProps,\n  OverlayArrowRenderProps,\n} from \"react-aria-components\";\nimport {\n  OverlayArrow,\n  PopoverContext,\n  TooltipContext,\n} from \"react-aria-components\";\nimport { arrowDown } from \"./common\";\nimport {\n  CodeComponentMetaOverrides,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst OVERLAY_ARROW_VARIANTS = [\n  // We do not offer a placementDown variant, because that's the default placement (an overlay arrow always has [data-placement=bottom] if it's not explicitly set)\n  \"placementTop\" as const,\n  \"placementLeft\" as const,\n  \"placementRight\" as const,\n];\n\nexport interface BaseOverlayArrowProps\n  extends OverlayArrowProps,\n    WithVariants<typeof OVERLAY_ARROW_VARIANTS> {}\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n  OVERLAY_ARROW_VARIANTS\n);\n\nexport function BaseOverlayArrow({\n  children,\n  plasmicUpdateVariant,\n  className,\n}: BaseOverlayArrowProps) {\n  const popoverContext = React.useContext(PopoverContext);\n  const tooltipContext = React.useContext(TooltipContext);\n  const isStandalone = !popoverContext && !tooltipContext; // i.e. without a trigger to point to\n  const overlayArrow = (\n    <OverlayArrow style={{ lineHeight: \"0\" }} className={className}>\n      {({ placement }: OverlayArrowRenderProps) =>\n        withObservedValues(\n          <>{children}</>,\n          {\n            placementTop: placement === \"top\",\n            placementLeft: placement === \"left\",\n            placementRight: placement === \"right\",\n          },\n          plasmicUpdateVariant\n        )\n      }\n    </OverlayArrow>\n  );\n  if (isStandalone) {\n    return <div style={{ position: \"relative\" }}>{overlayArrow}</div>;\n  }\n  return overlayArrow;\n}\n\nexport const OVERLAY_ARROW_COMPONENT_NAME = makeComponentName(\"overlayArrow\");\n\nexport function registerOverlayArrow(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseOverlayArrow>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseOverlayArrow,\n    {\n      name: OVERLAY_ARROW_COMPONENT_NAME,\n      displayName: \"Aria Overlay Arrow\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerOverlayArrow\",\n      importName: \"BaseOverlayArrow\",\n      styleSections: false,\n      variants,\n      props: {\n        children: {\n          type: \"slot\",\n          defaultValue: arrowDown,\n        },\n      },\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","PopoverContext","TooltipContext","OverlayArrow","makeComponentName","registerComponentHelper","arrowDown"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,sBAAyB,GAAA;AAAA;AAAA,EAE7B,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AACF,CAAA,CAAA;AAMA,MAAM,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAAA,sCAAA;AAAA,EACvC,sBAAA;AACF,CAAA,CAAA;AAEO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,QAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AACF,CAA0B,EAAA;AACxB,EAAM,MAAA,cAAA,GAAiBC,sBAAM,CAAA,UAAA,CAAWC,kCAAc,CAAA,CAAA;AACtD,EAAM,MAAA,cAAA,GAAiBD,sBAAM,CAAA,UAAA,CAAWE,kCAAc,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,CAAC,cAAA,IAAkB,CAAC,cAAA,CAAA;AACzC,EAAA,MAAM,YACJ,mBAAAF,sBAAA,CAAA,aAAA,CAACG,gCAAa,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,GAAI,EAAA,EAAG,SACvC,EAAA,EAAA,CAAC,EAAE,SAAA,EACF,KAAA,kBAAA;AAAA,gGACK,QAAS,CAAA;AAAA,IACZ;AAAA,MACE,cAAc,SAAc,KAAA,KAAA;AAAA,MAC5B,eAAe,SAAc,KAAA,MAAA;AAAA,MAC7B,gBAAgB,SAAc,KAAA,OAAA;AAAA,KAChC;AAAA,IACA,oBAAA;AAAA,GAGN,CAAA,CAAA;AAEF,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,4DAAQ,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,QAAU,EAAA,UAAA,MAAe,YAAa,CAAA,CAAA;AAAA,GAC7D;AACA,EAAO,OAAA,YAAA,CAAA;AACT,CAAA;AAEa,MAAA,4BAAA,GAA+BC,wBAAkB,cAAc,EAAA;AAE5D,SAAA,oBAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAAC,6BAAA;AAAA,IACL,MAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,4BAAA;AAAA,MACN,WAAa,EAAA,oBAAA;AAAA,MACb,UAAY,EAAA,qDAAA;AAAA,MACZ,UAAY,EAAA,kBAAA;AAAA,MACZ,aAAe,EAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,YAAc,EAAAC,gBAAA;AAAA,SAChB;AAAA,OACF;AAAA,KACF;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;;"}

package/skinny/registerOverlayArrow.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { OverlayArrowProps } from "react-aria-components";
+import { CodeComponentMetaOverrides, Registerable } from "./utils";
+import { WithVariants } from "./variant-utils";
+declare const OVERLAY_ARROW_VARIANTS: ("placementLeft" | "placementRight" | "placementTop")[];
+export interface BaseOverlayArrowProps extends OverlayArrowProps, WithVariants<typeof OVERLAY_ARROW_VARIANTS> {
+}
+export declare function BaseOverlayArrow({ children, plasmicUpdateVariant, className, }: BaseOverlayArrowProps): React.JSX.Element;
+export declare const OVERLAY_ARROW_COMPONENT_NAME: string;
+export declare function registerOverlayArrow(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseOverlayArrow>): import("@plasmicapp/host").CodeComponentMeta<BaseOverlayArrowProps>;
+export {};

package/skinny/registerOverlayArrow.esm.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { PopoverContext, TooltipContext, OverlayArrow } from 'react-aria-components';
+import { a as arrowDown } from './common-7ecf439d.esm.js';
+import { a as makeComponentName, r as registerComponentHelper } from './utils-41b3d43b.esm.js';
+import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
+import '@plasmicapp/host';
+import '@plasmicapp/host/registerComponent';
+
+const OVERLAY_ARROW_VARIANTS = [
+  // We do not offer a placementDown variant, because that's the default placement (an overlay arrow always has [data-placement=bottom] if it's not explicitly set)
+  "placementTop",
+  "placementLeft",
+  "placementRight"
+];
+const { variants, withObservedValues } = pickAriaComponentVariants(
+  OVERLAY_ARROW_VARIANTS
+);
+function BaseOverlayArrow({
+  children,
+  plasmicUpdateVariant,
+  className
+}) {
+  const popoverContext = React.useContext(PopoverContext);
+  const tooltipContext = React.useContext(TooltipContext);
+  const isStandalone = !popoverContext && !tooltipContext;
+  const overlayArrow = /* @__PURE__ */ React.createElement(OverlayArrow, { style: { lineHeight: "0" }, className }, ({ placement }) => withObservedValues(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, children),
+    {
+      placementTop: placement === "top",
+      placementLeft: placement === "left",
+      placementRight: placement === "right"
+    },
+    plasmicUpdateVariant
+  ));
+  if (isStandalone) {
+    return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, overlayArrow);
+  }
+  return overlayArrow;
+}
+const OVERLAY_ARROW_COMPONENT_NAME = makeComponentName("overlayArrow");
+function registerOverlayArrow(loader, overrides) {
+  return registerComponentHelper(
+    loader,
+    BaseOverlayArrow,
+    {
+      name: OVERLAY_ARROW_COMPONENT_NAME,
+      displayName: "Aria Overlay Arrow",
+      importPath: "@plasmicpkgs/react-aria/skinny/registerOverlayArrow",
+      importName: "BaseOverlayArrow",
+      styleSections: false,
+      variants,
+      props: {
+        children: {
+          type: "slot",
+          defaultValue: arrowDown
+        }
+      }
+    },
+    overrides
+  );
+}
+
+export { BaseOverlayArrow, OVERLAY_ARROW_COMPONENT_NAME, registerOverlayArrow };
+//# sourceMappingURL=registerOverlayArrow.esm.js.map

package/skinny/registerOverlayArrow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerOverlayArrow.esm.js","sources":["../src/registerOverlayArrow.tsx"],"sourcesContent":["import React from \"react\";\nimport type {\n  OverlayArrowProps,\n  OverlayArrowRenderProps,\n} from \"react-aria-components\";\nimport {\n  OverlayArrow,\n  PopoverContext,\n  TooltipContext,\n} from \"react-aria-components\";\nimport { arrowDown } from \"./common\";\nimport {\n  CodeComponentMetaOverrides,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nconst OVERLAY_ARROW_VARIANTS = [\n  // We do not offer a placementDown variant, because that's the default placement (an overlay arrow always has [data-placement=bottom] if it's not explicitly set)\n  \"placementTop\" as const,\n  \"placementLeft\" as const,\n  \"placementRight\" as const,\n];\n\nexport interface BaseOverlayArrowProps\n  extends OverlayArrowProps,\n    WithVariants<typeof OVERLAY_ARROW_VARIANTS> {}\n\nconst { variants, withObservedValues } = pickAriaComponentVariants(\n  OVERLAY_ARROW_VARIANTS\n);\n\nexport function BaseOverlayArrow({\n  children,\n  plasmicUpdateVariant,\n  className,\n}: BaseOverlayArrowProps) {\n  const popoverContext = React.useContext(PopoverContext);\n  const tooltipContext = React.useContext(TooltipContext);\n  const isStandalone = !popoverContext && !tooltipContext; // i.e. without a trigger to point to\n  const overlayArrow = (\n    <OverlayArrow style={{ lineHeight: \"0\" }} className={className}>\n      {({ placement }: OverlayArrowRenderProps) =>\n        withObservedValues(\n          <>{children}</>,\n          {\n            placementTop: placement === \"top\",\n            placementLeft: placement === \"left\",\n            placementRight: placement === \"right\",\n          },\n          plasmicUpdateVariant\n        )\n      }\n    </OverlayArrow>\n  );\n  if (isStandalone) {\n    return <div style={{ position: \"relative\" }}>{overlayArrow}</div>;\n  }\n  return overlayArrow;\n}\n\nexport const OVERLAY_ARROW_COMPONENT_NAME = makeComponentName(\"overlayArrow\");\n\nexport function registerOverlayArrow(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseOverlayArrow>\n) {\n  return registerComponentHelper(\n    loader,\n    BaseOverlayArrow,\n    {\n      name: OVERLAY_ARROW_COMPONENT_NAME,\n      displayName: \"Aria Overlay Arrow\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerOverlayArrow\",\n      importName: \"BaseOverlayArrow\",\n      styleSections: false,\n      variants,\n      props: {\n        children: {\n          type: \"slot\",\n          defaultValue: arrowDown,\n        },\n      },\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAmBA,MAAM,sBAAyB,GAAA;AAAA;AAAA,EAE7B,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AACF,CAAA,CAAA;AAMA,MAAM,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,yBAAA;AAAA,EACvC,sBAAA;AACF,CAAA,CAAA;AAEO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,QAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AACF,CAA0B,EAAA;AACxB,EAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACtD,EAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AACtD,EAAM,MAAA,YAAA,GAAe,CAAC,cAAA,IAAkB,CAAC,cAAA,CAAA;AACzC,EAAA,MAAM,YACJ,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,GAAI,EAAA,EAAG,SACvC,EAAA,EAAA,CAAC,EAAE,SAAA,EACF,KAAA,kBAAA;AAAA,8DACK,QAAS,CAAA;AAAA,IACZ;AAAA,MACE,cAAc,SAAc,KAAA,KAAA;AAAA,MAC5B,eAAe,SAAc,KAAA,MAAA;AAAA,MAC7B,gBAAgB,SAAc,KAAA,OAAA;AAAA,KAChC;AAAA,IACA,oBAAA;AAAA,GAGN,CAAA,CAAA;AAEF,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,2CAAQ,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,QAAU,EAAA,UAAA,MAAe,YAAa,CAAA,CAAA;AAAA,GAC7D;AACA,EAAO,OAAA,YAAA,CAAA;AACT,CAAA;AAEa,MAAA,4BAAA,GAA+B,kBAAkB,cAAc,EAAA;AAE5D,SAAA,oBAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAA,uBAAA;AAAA,IACL,MAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,4BAAA;AAAA,MACN,WAAa,EAAA,oBAAA;AAAA,MACb,UAAY,EAAA,qDAAA;AAAA,MACZ,UAAY,EAAA,kBAAA;AAAA,MACZ,aAAe,EAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,OACF;AAAA,KACF;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/skinny/registerPopover.cjs.js

@@ -4,6 +4,7 @@ var host = require('@plasmicapp/host');
 var utils = require('@react-aria/utils');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+var common = require('./common-47e48033.cjs.js');
 var contexts = require('./contexts-6d0cb2b1.cjs.js');
 var utils$1 = require('./utils-d1c8094f.cjs.js');
 var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
@@ -105,18 +106,6 @@ function BasePopover(props) {
   ));
 }
 const POPOVER_COMPONENT_NAME = utils$1.makeComponentName("popover");
-const POPOVER_ARROW_IMG = {
-  type: "img",
-  src: "https://static1.plasmic.app/arrow-up.svg",
-  styles: {
-    position: "absolute",
-    top: "-14px",
-    // center the arrow horizontally on the popover
-    left: "50%",
-    transform: "translateX(-50%)",
-    width: "15px"
-  }
-};
 function registerPopover(loader, overrides) {
   utils$1.registerComponentHelper(
     loader,
@@ -131,21 +120,19 @@ function registerPopover(loader, overrides) {
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: "black",
-        padding: "20px",
         width: "300px",
         backgroundColor: "#FDE3C3"
       },
-      props: {
+      props: __spreadValues({
         children: {
           type: "slot",
           mergeWithParent: true,
           defaultValue: [
-            POPOVER_ARROW_IMG,
             {
               type: "vbox",
               styles: {
                 width: "stretch",
-                padding: 0,
+                padding: "20px",
                 rowGap: "10px"
               },
               children: [
@@ -168,29 +155,11 @@ function registerPopover(loader, overrides) {
             }
           ]
         },
-        offset: {
-          type: "number",
-          displayName: "Offset",
-          description: "Additional offset applied vertically between the popover and its trigger",
-          defaultValueHint: 8
-        },
         shouldFlip: {
           type: "boolean",
           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.",
           defaultValueHint: true
         },
-        placement: {
-          type: "choice",
-          description: "Default placement of the popover relative to the trigger, if there is enough space",
-          defaultValueHint: "bottom",
-          options: [
-            // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825
-            "top",
-            "bottom",
-            "left",
-            "right"
-          ]
-        },
         resetClassName: {
           type: "themeResetClass"
         },
@@ -199,7 +168,12 @@ function registerPopover(loader, overrides) {
           defaultValue: true,
           hidden: (_props, ctx) => !(ctx == null ? void 0 : ctx.canMatchTriggerWidth)
         }
-      },
+      }, common.getCommonOverlayProps("popover", {
+        placement: { defaultValueHint: "bottom" },
+        offset: { defaultValueHint: 8 },
+        containerPadding: { defaultValueHint: 12 },
+        crossOffset: { defaultValueHint: 0 }
+      })),
       // 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.
       styleSections: true,
       trapsFocus: true
@@ -209,7 +183,6 @@ function registerPopover(loader, overrides) {
 }
 
 exports.BasePopover = BasePopover;
-exports.POPOVER_ARROW_IMG = POPOVER_ARROW_IMG;
 exports.POPOVER_COMPONENT_NAME = POPOVER_COMPONENT_NAME;
 exports.registerPopover = registerPopover;
 //# sourceMappingURL=registerPopover.cjs.js.map

package/skinny/registerPopover.cjs.js.map

@@ -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, { useEffect } from \"react\";\nimport { Popover, PopoverContext } from \"react-aria-components\";\nimport { PlasmicPopoverTriggerContext } from \"./contexts\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\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 BasePopoverControlContextData {\n  canMatchTriggerWidth?: boolean;\n}\nexport interface BasePopoverProps\n  extends React.ComponentProps<typeof Popover>,\n    WithVariants<typeof POPOVER_VARIANTS>,\n    HasControlContextData<BasePopoverControlContextData> {\n  className?: string;\n  resetClassName?: string;\n  children?: React.ReactNode;\n  matchTriggerWidth?: boolean;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n  const {\n    resetClassName,\n    plasmicUpdateVariant,\n    setControlContextData,\n    matchTriggerWidth,\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 hasTrigger = !!React.useContext(PlasmicPopoverTriggerContext);\n  const triggerRef = React.useRef<any>(null);\n  const canvasContext = usePlasmicCanvasContext();\n  const matchTriggerWidthProp = hasTrigger && matchTriggerWidth;\n  const { children, ...mergedProps } = mergeProps(\n    {\n      // isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.\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      isNonModal: canvasContext && !canvasContext.interactive,\n    },\n    restProps,\n    { className: `${resetClassName}` },\n    // Override some props if the popover is standalone\n    isStandalone\n      ? {\n          triggerRef,\n          isNonModal: true,\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          isOpen: true,\n        }\n      : null\n  );\n\n  useEffect(() => {\n    setControlContextData?.({\n      canMatchTriggerWidth: hasTrigger,\n    });\n  }, [hasTrigger, setControlContextData]);\n\n  return (\n    <>\n      {isStandalone && <div ref={triggerRef} />}\n      <Popover\n        // more about `--trigger-width` here: https://react-spectrum.adobe.com/react-aria/Select.html#popover-1\n        style={\n          matchTriggerWidthProp ? { width: `var(--trigger-width)` } : undefined\n        }\n        {...mergedProps}\n      >\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        matchTriggerWidth: {\n          type: \"boolean\",\n          defaultValue: true,\n          hidden: (_props, ctx) => !ctx?.canMatchTriggerWidth,\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","PlasmicPopoverTriggerContext","usePlasmicCanvasContext","mergeProps","useEffect","Popover","makeComponentName","registerComponentHelper"],"mappings":"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"}
+{"version":3,"file":"registerPopover.cjs.js","sources":["../src/registerPopover.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React, { useEffect } from \"react\";\nimport { Popover, PopoverContext } from \"react-aria-components\";\nimport { getCommonOverlayProps } from \"./common\";\nimport { PlasmicPopoverTriggerContext } from \"./contexts\";\nimport {\n  CodeComponentMetaOverrides,\n  HasControlContextData,\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 BasePopoverControlContextData {\n  canMatchTriggerWidth?: boolean;\n}\nexport interface BasePopoverProps\n  extends React.ComponentProps<typeof Popover>,\n    WithVariants<typeof POPOVER_VARIANTS>,\n    HasControlContextData<BasePopoverControlContextData> {\n  className?: string;\n  resetClassName?: string;\n  children?: React.ReactNode;\n  matchTriggerWidth?: boolean;\n}\n\nexport function BasePopover(props: BasePopoverProps) {\n  const {\n    resetClassName,\n    plasmicUpdateVariant,\n    setControlContextData,\n    matchTriggerWidth,\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 hasTrigger = !!React.useContext(PlasmicPopoverTriggerContext);\n  const triggerRef = React.useRef<any>(null);\n  const canvasContext = usePlasmicCanvasContext();\n  const matchTriggerWidthProp = hasTrigger && matchTriggerWidth;\n  const { children, ...mergedProps } = mergeProps(\n    {\n      // isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.\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      isNonModal: canvasContext && !canvasContext.interactive,\n    },\n    restProps,\n    { className: `${resetClassName}` },\n    // Override some props if the popover is standalone\n    isStandalone\n      ? {\n          triggerRef,\n          isNonModal: true,\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          isOpen: true,\n        }\n      : null\n  );\n\n  useEffect(() => {\n    setControlContextData?.({\n      canMatchTriggerWidth: hasTrigger,\n    });\n  }, [hasTrigger, setControlContextData]);\n\n  return (\n    <>\n      {isStandalone && <div ref={triggerRef} />}\n      <Popover\n        // more about `--trigger-width` here: https://react-spectrum.adobe.com/react-aria/Select.html#popover-1\n        style={\n          matchTriggerWidthProp ? { width: `var(--trigger-width)` } : undefined\n        }\n        {...mergedProps}\n      >\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\");\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        width: \"300px\",\n        backgroundColor: \"#FDE3C3\",\n      },\n      props: {\n        children: {\n          type: \"slot\",\n          mergeWithParent: true,\n          defaultValue: [\n            {\n              type: \"vbox\",\n              styles: {\n                width: \"stretch\",\n                padding: \"20px\",\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        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\n        resetClassName: {\n          type: \"themeResetClass\",\n        },\n        matchTriggerWidth: {\n          type: \"boolean\",\n          defaultValue: true,\n          hidden: (_props, ctx) => !ctx?.canMatchTriggerWidth,\n        },\n        ...getCommonOverlayProps<BasePopoverProps>(\"popover\", {\n          placement: { defaultValueHint: \"bottom\" },\n          offset: { defaultValueHint: 8 },\n          containerPadding: { defaultValueHint: 12 },\n          crossOffset: { defaultValueHint: 0 },\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","PlasmicPopoverTriggerContext","usePlasmicCanvasContext","mergeProps","useEffect","Popover","makeComponentName","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}

package/skinny/registerPopover.d.ts

@@ -1,4 +1,3 @@
-import { PlasmicElement } from "@plasmicapp/host";
 import React from "react";
 import { Popover } from "react-aria-components";
 import { CodeComponentMetaOverrides, HasControlContextData, Registerable } from "./utils";
@@ -15,6 +14,5 @@ export interface BasePopoverProps extends React.ComponentProps<typeof Popover>,
 }
 export declare function BasePopover(props: BasePopoverProps): React.JSX.Element;
 export declare const POPOVER_COMPONENT_NAME: string;
-export declare const POPOVER_ARROW_IMG: PlasmicElement;
 export declare function registerPopover(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BasePopover>): void;
 export {};

package/skinny/registerPopover.esm.js

@@ -2,6 +2,7 @@ import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import { mergeProps } from '@react-aria/utils';
 import React, { useEffect } from 'react';
 import { PopoverContext, Popover } from 'react-aria-components';
+import { b as getCommonOverlayProps } from './common-7ecf439d.esm.js';
 import { a as PlasmicPopoverTriggerContext } from './contexts-5cb81c2f.esm.js';
 import { a as makeComponentName, r as registerComponentHelper } from './utils-41b3d43b.esm.js';
 import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
@@ -99,18 +100,6 @@ function BasePopover(props) {
   ));
 }
 const POPOVER_COMPONENT_NAME = makeComponentName("popover");
-const POPOVER_ARROW_IMG = {
-  type: "img",
-  src: "https://static1.plasmic.app/arrow-up.svg",
-  styles: {
-    position: "absolute",
-    top: "-14px",
-    // center the arrow horizontally on the popover
-    left: "50%",
-    transform: "translateX(-50%)",
-    width: "15px"
-  }
-};
 function registerPopover(loader, overrides) {
   registerComponentHelper(
     loader,
@@ -125,21 +114,19 @@ function registerPopover(loader, overrides) {
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: "black",
-        padding: "20px",
         width: "300px",
         backgroundColor: "#FDE3C3"
       },
-      props: {
+      props: __spreadValues({
         children: {
           type: "slot",
           mergeWithParent: true,
           defaultValue: [
-            POPOVER_ARROW_IMG,
             {
               type: "vbox",
               styles: {
                 width: "stretch",
-                padding: 0,
+                padding: "20px",
                 rowGap: "10px"
               },
               children: [
@@ -162,29 +149,11 @@ function registerPopover(loader, overrides) {
             }
           ]
         },
-        offset: {
-          type: "number",
-          displayName: "Offset",
-          description: "Additional offset applied vertically between the popover and its trigger",
-          defaultValueHint: 8
-        },
         shouldFlip: {
           type: "boolean",
           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.",
           defaultValueHint: true
         },
-        placement: {
-          type: "choice",
-          description: "Default placement of the popover relative to the trigger, if there is enough space",
-          defaultValueHint: "bottom",
-          options: [
-            // Not allowing other placement options here because of https://github.com/adobe/react-spectrum/issues/6825
-            "top",
-            "bottom",
-            "left",
-            "right"
-          ]
-        },
         resetClassName: {
           type: "themeResetClass"
         },
@@ -193,7 +162,12 @@ function registerPopover(loader, overrides) {
           defaultValue: true,
           hidden: (_props, ctx) => !(ctx == null ? void 0 : ctx.canMatchTriggerWidth)
         }
-      },
+      }, getCommonOverlayProps("popover", {
+        placement: { defaultValueHint: "bottom" },
+        offset: { defaultValueHint: 8 },
+        containerPadding: { defaultValueHint: 12 },
+        crossOffset: { defaultValueHint: 0 }
+      })),
       // 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.
       styleSections: true,
       trapsFocus: true
@@ -202,5 +176,5 @@ function registerPopover(loader, overrides) {
   );
 }
 
-export { BasePopover, POPOVER_ARROW_IMG, POPOVER_COMPONENT_NAME, registerPopover };
+export { BasePopover, POPOVER_COMPONENT_NAME, registerPopover };
 //# sourceMappingURL=registerPopover.esm.js.map