@plasmicpkgs/react-aria 0.0.138 → 0.0.140

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.
Files changed (88) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/react-aria.esm.js +14 -17
  3. package/dist/react-aria.esm.js.map +1 -1
  4. package/dist/react-aria.js +14 -17
  5. package/dist/react-aria.js.map +1 -1
  6. package/package.json +7 -7
  7. package/skinny/{OptionsItemIdManager-87cb9fe8.esm.js → OptionsItemIdManager-724ffca2.esm.js} +2 -2
  8. package/skinny/{OptionsItemIdManager-87cb9fe8.esm.js.map → OptionsItemIdManager-724ffca2.esm.js.map} +1 -1
  9. package/skinny/{OptionsItemIdManager-3dae926c.cjs.js → OptionsItemIdManager-f0a61ed5.cjs.js} +2 -2
  10. package/skinny/{OptionsItemIdManager-3dae926c.cjs.js.map → OptionsItemIdManager-f0a61ed5.cjs.js.map} +1 -1
  11. package/skinny/{common-54602b50.esm.js → common-3fde23cc.esm.js} +2 -2
  12. package/skinny/{common-54602b50.esm.js.map → common-3fde23cc.esm.js.map} +1 -1
  13. package/skinny/{common-cc5609c7.cjs.js → common-6ffc5113.cjs.js} +2 -2
  14. package/skinny/{common-cc5609c7.cjs.js.map → common-6ffc5113.cjs.js.map} +1 -1
  15. package/skinny/registerButton.cjs.js +2 -2
  16. package/skinny/registerButton.esm.js +2 -2
  17. package/skinny/registerCheckbox.cjs.js +3 -3
  18. package/skinny/registerCheckbox.esm.js +3 -3
  19. package/skinny/registerCheckboxGroup.cjs.js +3 -3
  20. package/skinny/registerCheckboxGroup.esm.js +3 -3
  21. package/skinny/registerComboBox.cjs.js +4 -4
  22. package/skinny/registerComboBox.esm.js +4 -4
  23. package/skinny/registerDescription.cjs.js +2 -2
  24. package/skinny/registerDescription.esm.js +2 -2
  25. package/skinny/registerDialog.cjs.js +2 -2
  26. package/skinny/registerDialog.esm.js +2 -2
  27. package/skinny/registerDialogTrigger.cjs.js +2 -2
  28. package/skinny/registerDialogTrigger.esm.js +2 -2
  29. package/skinny/registerFieldError.cjs.js +1 -1
  30. package/skinny/registerFieldError.esm.js +1 -1
  31. package/skinny/registerForm.cjs.js +1 -1
  32. package/skinny/registerForm.esm.js +1 -1
  33. package/skinny/registerHeading.cjs.js +2 -2
  34. package/skinny/registerHeading.esm.js +2 -2
  35. package/skinny/registerInput.cjs.js +2 -2
  36. package/skinny/registerInput.esm.js +2 -2
  37. package/skinny/registerLabel.cjs.js +2 -2
  38. package/skinny/registerLabel.esm.js +2 -2
  39. package/skinny/{registerListBox-8b8a8fdc.cjs.js → registerListBox-b21abca6.cjs.js} +8 -6
  40. package/skinny/registerListBox-b21abca6.cjs.js.map +1 -0
  41. package/skinny/{registerListBox-22cc0165.esm.js → registerListBox-d83a8581.esm.js} +8 -6
  42. package/skinny/registerListBox-d83a8581.esm.js.map +1 -0
  43. package/skinny/registerListBox.cjs.js +5 -5
  44. package/skinny/registerListBox.esm.js +5 -5
  45. package/skinny/registerListBoxItem.cjs.js +3 -3
  46. package/skinny/registerListBoxItem.esm.js +3 -3
  47. package/skinny/registerModal.cjs.js +2 -2
  48. package/skinny/registerModal.esm.js +2 -2
  49. package/skinny/registerOverlayArrow.cjs.js +2 -2
  50. package/skinny/registerOverlayArrow.esm.js +2 -2
  51. package/skinny/registerPopover.cjs.js +5 -5
  52. package/skinny/registerPopover.cjs.js.map +1 -1
  53. package/skinny/registerPopover.esm.js +5 -5
  54. package/skinny/registerPopover.esm.js.map +1 -1
  55. package/skinny/registerRadio.cjs.js +3 -3
  56. package/skinny/registerRadio.esm.js +3 -3
  57. package/skinny/registerRadioGroup.cjs.js +3 -3
  58. package/skinny/registerRadioGroup.esm.js +3 -3
  59. package/skinny/registerSection.cjs.js +5 -5
  60. package/skinny/registerSection.esm.js +5 -5
  61. package/skinny/registerSelect.cjs.js +5 -15
  62. package/skinny/registerSelect.cjs.js.map +1 -1
  63. package/skinny/registerSelect.esm.js +5 -15
  64. package/skinny/registerSelect.esm.js.map +1 -1
  65. package/skinny/registerSlider.cjs.js +2 -2
  66. package/skinny/registerSlider.esm.js +2 -2
  67. package/skinny/registerSliderOutput.cjs.js +2 -2
  68. package/skinny/registerSliderOutput.esm.js +2 -2
  69. package/skinny/registerSliderThumb.cjs.js +2 -2
  70. package/skinny/registerSliderThumb.esm.js +2 -2
  71. package/skinny/registerSliderTrack.cjs.js +2 -2
  72. package/skinny/registerSliderTrack.esm.js +2 -2
  73. package/skinny/registerSwitch.cjs.js +2 -2
  74. package/skinny/registerSwitch.esm.js +2 -2
  75. package/skinny/registerText.cjs.js +2 -2
  76. package/skinny/registerText.esm.js +2 -2
  77. package/skinny/registerTextArea.cjs.js +2 -2
  78. package/skinny/registerTextArea.esm.js +2 -2
  79. package/skinny/registerTextField.cjs.js +2 -2
  80. package/skinny/registerTextField.esm.js +2 -2
  81. package/skinny/registerTooltip.cjs.js +2 -2
  82. package/skinny/registerTooltip.esm.js +2 -2
  83. package/skinny/{utils-85ca5354.cjs.js → utils-88dd1a55.cjs.js} +8 -2
  84. package/skinny/{utils-85ca5354.cjs.js.map → utils-88dd1a55.cjs.js.map} +1 -1
  85. package/skinny/{utils-edf40001.esm.js → utils-b68e14cf.esm.js} +8 -2
  86. package/skinny/{utils-edf40001.esm.js.map → utils-b68e14cf.esm.js.map} +1 -1
  87. package/skinny/registerListBox-22cc0165.esm.js.map +0 -1
  88. package/skinny/registerListBox-8b8a8fdc.cjs.js.map +0 -1
@@ -1,8 +1,8 @@
1
1
  import { usePlasmicCanvasContext } from '@plasmicapp/host';
2
2
  import React from 'react';
3
3
  import { Dialog } from 'react-aria-components';
4
- import { C as COMMON_STYLES } from './common-54602b50.esm.js';
5
- import { m as makeComponentName, r as registerComponentHelper } from './utils-edf40001.esm.js';
4
+ import { C as COMMON_STYLES } from './common-3fde23cc.esm.js';
5
+ import { m as makeComponentName, r as registerComponentHelper } from './utils-b68e14cf.esm.js';
6
6
  import '@plasmicapp/host/registerComponent';
7
7
 
8
8
  function BaseDialog({ children, className }) {
@@ -3,12 +3,12 @@
3
3
  var React = require('react');
4
4
  var reactAria = require('react-aria');
5
5
  var reactAriaComponents = require('react-aria-components');
6
- var common = require('./common-cc5609c7.cjs.js');
6
+ var common = require('./common-6ffc5113.cjs.js');
7
7
  var contexts = require('./contexts-6d0cb2b1.cjs.js');
8
8
  var registerButton = require('./registerButton.cjs.js');
9
9
  var registerDialog = require('./registerDialog.cjs.js');
10
10
  var registerModal = require('./registerModal.cjs.js');
11
- var utils = require('./utils-85ca5354.cjs.js');
11
+ var utils = require('./utils-88dd1a55.cjs.js');
12
12
  require('@plasmicapp/host');
13
13
  require('./variant-utils-0ad70db8.cjs.js');
14
14
  require('@plasmicapp/host/registerComponent');
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
2
  import { useButton, mergeProps } from 'react-aria';
3
3
  import { DialogTrigger } from 'react-aria-components';
4
- import { C as COMMON_STYLES } from './common-54602b50.esm.js';
4
+ import { C as COMMON_STYLES } from './common-3fde23cc.esm.js';
5
5
  import { d as PlasmicDialogTriggerContext } from './contexts-5cb81c2f.esm.js';
6
6
  import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
7
7
  import { DIALOG_COMPONENT_NAME } from './registerDialog.esm.js';
8
8
  import { MODAL_COMPONENT_NAME, MODAL_DEFAULT_SLOT_CONTENT } from './registerModal.esm.js';
9
- import { a as useIsOpen, r as registerComponentHelper, m as makeComponentName } from './utils-edf40001.esm.js';
9
+ import { a as useIsOpen, r as registerComponentHelper, m as makeComponentName } from './utils-b68e14cf.esm.js';
10
10
  import '@plasmicapp/host';
11
11
  import './variant-utils-4405ebb0.esm.js';
12
12
  import '@plasmicapp/host/registerComponent';
@@ -2,7 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactAriaComponents = require('react-aria-components');
5
- var utils = require('./utils-85ca5354.cjs.js');
5
+ var utils = require('./utils-88dd1a55.cjs.js');
6
6
  require('@plasmicapp/host');
7
7
  require('@plasmicapp/host/registerComponent');
8
8
 
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { FieldError } from 'react-aria-components';
3
- import { r as registerComponentHelper, m as makeComponentName } from './utils-edf40001.esm.js';
3
+ import { r as registerComponentHelper, m as makeComponentName } from './utils-b68e14cf.esm.js';
4
4
  import '@plasmicapp/host';
5
5
  import '@plasmicapp/host/registerComponent';
6
6
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactAriaComponents = require('react-aria-components');
5
- var utils = require('./utils-85ca5354.cjs.js');
5
+ var utils = require('./utils-88dd1a55.cjs.js');
6
6
  require('@plasmicapp/host');
7
7
  require('@plasmicapp/host/registerComponent');
8
8
 
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { Form } from 'react-aria-components';
3
- import { r as registerComponentHelper, m as makeComponentName } from './utils-edf40001.esm.js';
3
+ import { r as registerComponentHelper, m as makeComponentName } from './utils-b68e14cf.esm.js';
4
4
  import '@plasmicapp/host';
5
5
  import '@plasmicapp/host/registerComponent';
6
6
 
@@ -2,8 +2,8 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactAriaComponents = require('react-aria-components');
5
- var common = require('./common-cc5609c7.cjs.js');
6
- var utils = require('./utils-85ca5354.cjs.js');
5
+ var common = require('./common-6ffc5113.cjs.js');
6
+ var utils = require('./utils-88dd1a55.cjs.js');
7
7
  require('@plasmicapp/host');
8
8
  require('@plasmicapp/host/registerComponent');
9
9
 
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Heading } from 'react-aria-components';
3
- import { C as COMMON_STYLES } from './common-54602b50.esm.js';
4
- import { r as registerComponentHelper, m as makeComponentName } from './utils-edf40001.esm.js';
3
+ import { C as COMMON_STYLES } from './common-3fde23cc.esm.js';
4
+ import { r as registerComponentHelper, m as makeComponentName } from './utils-b68e14cf.esm.js';
5
5
  import '@plasmicapp/host';
6
6
  import '@plasmicapp/host/registerComponent';
7
7
 
@@ -3,9 +3,9 @@
3
3
  var React = require('react');
4
4
  var reactAria = require('react-aria');
5
5
  var reactAriaComponents = require('react-aria-components');
6
- var common = require('./common-cc5609c7.cjs.js');
6
+ var common = require('./common-6ffc5113.cjs.js');
7
7
  var contexts = require('./contexts-6d0cb2b1.cjs.js');
8
- var utils = require('./utils-85ca5354.cjs.js');
8
+ var utils = require('./utils-88dd1a55.cjs.js');
9
9
  var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
10
10
  require('@plasmicapp/host');
11
11
  require('@plasmicapp/host/registerComponent');
@@ -1,9 +1,9 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { useHover, useFocusRing, mergeProps } from 'react-aria';
3
3
  import { useContextProps, InputContext } from 'react-aria-components';
4
- import { C as COMMON_STYLES, r as resolveAutoComplete, g as getCommonProps } from './common-54602b50.esm.js';
4
+ import { C as COMMON_STYLES, r as resolveAutoComplete, g as getCommonProps } from './common-3fde23cc.esm.js';
5
5
  import { g as PlasmicTextFieldContext, c as PlasmicInputContext } from './contexts-5cb81c2f.esm.js';
6
- import { f as filterHoverProps, i as isDefined, m as makeComponentName, r as registerComponentHelper } from './utils-edf40001.esm.js';
6
+ import { f as filterHoverProps, i as isDefined, m as makeComponentName, r as registerComponentHelper } from './utils-b68e14cf.esm.js';
7
7
  import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
8
8
  import '@plasmicapp/host';
9
9
  import '@plasmicapp/host/registerComponent';
@@ -2,8 +2,8 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactAriaComponents = require('react-aria-components');
5
- var common = require('./common-cc5609c7.cjs.js');
6
- var utils = require('./utils-85ca5354.cjs.js');
5
+ var common = require('./common-6ffc5113.cjs.js');
6
+ var utils = require('./utils-88dd1a55.cjs.js');
7
7
  require('@plasmicapp/host');
8
8
  require('@plasmicapp/host/registerComponent');
9
9
 
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { Label } from 'react-aria-components';
3
- import { C as COMMON_STYLES } from './common-54602b50.esm.js';
4
- import { e as extractPlasmicDataProps, m as makeComponentName, r as registerComponentHelper } from './utils-edf40001.esm.js';
3
+ import { C as COMMON_STYLES } from './common-3fde23cc.esm.js';
4
+ import { e as extractPlasmicDataProps, m as makeComponentName, r as registerComponentHelper } from './utils-b68e14cf.esm.js';
5
5
  import '@plasmicapp/host';
6
6
  import '@plasmicapp/host/registerComponent';
7
7
 
@@ -1,12 +1,13 @@
1
1
  'use strict';
2
2
 
3
+ var host = require('@plasmicapp/host');
3
4
  var React = require('react');
4
5
  var reactAriaComponents = require('react-aria-components');
5
- var common = require('./common-cc5609c7.cjs.js');
6
+ var common = require('./common-6ffc5113.cjs.js');
6
7
  var contexts = require('./contexts-6d0cb2b1.cjs.js');
7
- var OptionsItemIdManager = require('./OptionsItemIdManager-3dae926c.cjs.js');
8
+ var OptionsItemIdManager = require('./OptionsItemIdManager-f0a61ed5.cjs.js');
8
9
  var registerListBoxItem = require('./registerListBoxItem.cjs.js');
9
- var utils = require('./utils-85ca5354.cjs.js');
10
+ var utils = require('./utils-88dd1a55.cjs.js');
10
11
  var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
11
12
 
12
13
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -155,6 +156,7 @@ function BaseListBox(props) {
155
156
  const context = React__default.default.useContext(contexts.PlasmicListBoxContext);
156
157
  const isStandalone = !context;
157
158
  const [ids, setIds] = React.useState([]);
159
+ const inEditor = host.usePlasmicCanvasContext();
158
160
  const idManager = OptionsItemIdManager.useIdManager(setIds, context == null ? void 0 : context.idManager);
159
161
  React.useEffect(() => {
160
162
  setControlContextData == null ? void 0 : setControlContextData({
@@ -174,12 +176,12 @@ function BaseListBox(props) {
174
176
  );
175
177
  const listbox = /* @__PURE__ */ React__default.default.createElement(
176
178
  reactAriaComponents.ListBox,
177
- __spreadValues({
179
+ __spreadValues(__spreadValues({
178
180
  selectedKeys: normalizeSelectedKeys(selectedKeys),
179
181
  defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
180
182
  className: classNameProp,
181
183
  style: common.COMMON_STYLES
182
- }, rest),
184
+ }, inEditor ? { shouldUseVirtualFocus: true } : {}), rest),
183
185
  children
184
186
  );
185
187
  if (isStandalone) {
@@ -370,4 +372,4 @@ exports.LIST_BOX_COMPONENT_NAME = LIST_BOX_COMPONENT_NAME;
370
372
  exports.listboxHelpers = listboxHelpers;
371
373
  exports.registerListBox = registerListBox;
372
374
  exports.registerSection = registerSection;
373
- //# sourceMappingURL=registerListBox-8b8a8fdc.cjs.js.map
375
+ //# sourceMappingURL=registerListBox-b21abca6.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"registerListBox-b21abca6.cjs.js","sources":["../src/registerSection.tsx","../src/registerListBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Header, Section } from \"react-aria-components\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { BaseListBox } from \"./registerListBox\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n Styleable,\n} from \"./utils\";\n\nexport interface BaseSectionProps extends Styleable {\n items: React.ReactNode;\n header: React.ReactNode;\n}\n\nexport function BaseSection(props: BaseSectionProps) {\n const { header, items, ...rest } = props;\n const contextProps = React.useContext(PlasmicListBoxContext);\n const isStandalone = !contextProps;\n\n const section = (\n <Section {...rest} style={COMMON_STYLES}>\n <Header>{header}</Header>\n {items}\n </Section>\n );\n\n if (isStandalone) {\n return (\n // BaseListbox should give section a listbox context (that it can't be used without)\n // as well as the id manager (that is needed to identify and warn about duplication of ids)\n // selection mode needs to be single/multiple to be able to trigger hover state on it.\n <BaseListBox selectionMode=\"single\">{section}</BaseListBox>\n );\n }\n\n return section;\n}\n\nexport function registerSection(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSection>\n) {\n return registerComponentHelper(\n loader,\n BaseSection,\n {\n name: makeComponentName(\"section\"),\n displayName: \"Aria Section\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSection\",\n importName: \"BaseSection\",\n defaultStyles: {\n width: \"stretch\",\n padding: \"10px\",\n },\n props: {\n header: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n {\n type: \"text\",\n value: \"Section Header.\",\n },\n ],\n },\n items: {\n type: \"slot\",\n mergeWithParent: true,\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n","import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { Key, ListBox, ListBoxRenderProps } from \"react-aria-components\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n makeDefaultListBoxItemChildren,\n registerListBoxItem,\n} from \"./registerListBoxItem\";\nimport { registerSection } from \"./registerSection\";\nimport {\n BaseControlContextDataForLists,\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nexport interface BaseListBoxControlContextData\n extends BaseControlContextDataForLists {\n isStandalone: boolean;\n}\n\nconst LISTBOX_VARIANTS = [\"focused\" as const, \"focusVisible\" as const];\n\nconst { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);\n\nexport interface BaseListBoxProps\n extends Omit<\n React.ComponentProps<typeof ListBox>,\n \"selectedKeys\" | \"defaultSelectedKeys\" | \"className\"\n >,\n HasControlContextData<BaseListBoxControlContextData>,\n WithVariants<typeof LISTBOX_VARIANTS> {\n children?: React.ReactNode;\n selectedKeys?: string | string[] | undefined;\n defaultSelectedKeys?: string | string[] | undefined;\n className?: string;\n}\n\nexport const listboxHelpers = {\n states: {\n selectedValue: {\n onChangeArgsToValue: (value: Set<Key> | string[] | string) => {\n // only single selection is supported\n return Array.from(value)[0];\n },\n },\n },\n};\n\nfunction normalizeSelectedKeys(selectedKeys: string | string[] | undefined) {\n // Listbox expects it to be of type \"all\" | Iterable\n return typeof selectedKeys === \"string\" && selectedKeys !== \"all\"\n ? [selectedKeys]\n : selectedKeys;\n}\n\nexport function BaseListBox(props: BaseListBoxProps) {\n const {\n setControlContextData: setControlContextData,\n children,\n className,\n selectedKeys,\n defaultSelectedKeys,\n plasmicUpdateVariant,\n ...rest\n } = props;\n const context = React.useContext(PlasmicListBoxContext);\n const isStandalone = !context;\n const [ids, setIds] = useState<string[]>([]);\n const inEditor = usePlasmicCanvasContext();\n\n const idManager = useIdManager(setIds, context?.idManager);\n\n useEffect(() => {\n setControlContextData?.({\n itemIds: ids,\n isStandalone,\n });\n }, [ids, isStandalone, setControlContextData]);\n\n const classNameProp = useCallback(\n ({ isFocusVisible, isFocused }: ListBoxRenderProps) => {\n plasmicUpdateVariant?.({\n focused: isFocused,\n focusVisible: isFocusVisible,\n });\n return className ?? \"\";\n },\n [className, plasmicUpdateVariant]\n );\n\n const listbox = (\n <ListBox\n selectedKeys={normalizeSelectedKeys(selectedKeys)}\n defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}\n className={classNameProp}\n style={COMMON_STYLES}\n // `shouldUseVirtualFocus` is not part of the ListBox prop types, but it’s passed through to useListBox, which does support it.\n // In editor, we use virtual focus to prevent the listbox from stealing focus\n {...(inEditor ? { shouldUseVirtualFocus: true } : {})}\n {...rest}\n >\n {children}\n </ListBox>\n );\n\n if (isStandalone) {\n return (\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {listbox}\n </PlasmicListBoxContext.Provider>\n );\n }\n\n return listbox;\n}\n\nexport const LIST_BOX_COMPONENT_NAME = makeComponentName(\"listbox\");\n\nexport function registerListBox(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBox>\n) {\n const listBoxItemMeta = registerListBoxItem(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n });\n const sectionMeta = registerSection(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n props: {\n items: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-1\",\n textValue: \"Section1-Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-2\",\n textValue: \"Section1-Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-3\",\n textValue: \"Section1-Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n ],\n },\n },\n });\n\n registerComponentHelper(\n loader,\n BaseListBox,\n {\n name: LIST_BOX_COMPONENT_NAME,\n displayName: \"Aria ListBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n importName: \"BaseListBox\",\n variants,\n defaultStyles: {\n width: \"250px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"List Items\",\n allowedComponents: [listBoxItemMeta.name, sectionMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"1\",\n textValue: \"Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"2\",\n textValue: \"Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"3\",\n textValue: \"Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: sectionMeta.name,\n },\n ],\n },\n selectionMode: {\n type: \"choice\",\n description: \"The selection mode of the listbox\",\n options: [\"none\", \"single\"],\n defaultValue: \"none\",\n hidden: (_props, ctx) => !ctx?.isStandalone,\n },\n selectedKeys: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKeys\",\n displayName: \"Initial selected item\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n hidden: (props, ctx) =>\n !ctx?.isStandalone || props.selectionMode === \"none\",\n // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedValues\", type: \"object\" }],\n },\n },\n states: {\n selectedValue: {\n type: \"writable\",\n valueProp: \"selectedKeys\",\n hidden: (props, ctx) =>\n !ctx?.isStandalone || props.selectionMode === \"none\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n ...listboxHelpers.states.selectedValue,\n },\n },\n componentHelpers: {\n helpers: listboxHelpers,\n importName: \"listboxHelpers\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["__objRest","React","PlasmicListBoxContext","Section","__spreadValues","COMMON_STYLES","Header","registerComponentHelper","makeComponentName","pickAriaComponentVariants","useState","usePlasmicCanvasContext","useIdManager","useEffect","useCallback","ListBox","registerListBoxItem","makeDefaultListBoxItemChildren"],"mappings":"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"}
@@ -1,10 +1,11 @@
1
+ import { usePlasmicCanvasContext } from '@plasmicapp/host';
1
2
  import React, { useState, useEffect, useCallback } from 'react';
2
3
  import { Section, Header, ListBox } from 'react-aria-components';
3
- import { C as COMMON_STYLES } from './common-54602b50.esm.js';
4
+ import { C as COMMON_STYLES } from './common-3fde23cc.esm.js';
4
5
  import { b as PlasmicListBoxContext } from './contexts-5cb81c2f.esm.js';
5
- import { u as useIdManager } from './OptionsItemIdManager-87cb9fe8.esm.js';
6
+ import { u as useIdManager } from './OptionsItemIdManager-724ffca2.esm.js';
6
7
  import { registerListBoxItem, makeDefaultListBoxItemChildren } from './registerListBoxItem.esm.js';
7
- import { r as registerComponentHelper, m as makeComponentName } from './utils-edf40001.esm.js';
8
+ import { r as registerComponentHelper, m as makeComponentName } from './utils-b68e14cf.esm.js';
8
9
  import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
9
10
 
10
11
  var __defProp$1 = Object.defineProperty;
@@ -149,6 +150,7 @@ function BaseListBox(props) {
149
150
  const context = React.useContext(PlasmicListBoxContext);
150
151
  const isStandalone = !context;
151
152
  const [ids, setIds] = useState([]);
153
+ const inEditor = usePlasmicCanvasContext();
152
154
  const idManager = useIdManager(setIds, context == null ? void 0 : context.idManager);
153
155
  useEffect(() => {
154
156
  setControlContextData == null ? void 0 : setControlContextData({
@@ -168,12 +170,12 @@ function BaseListBox(props) {
168
170
  );
169
171
  const listbox = /* @__PURE__ */ React.createElement(
170
172
  ListBox,
171
- __spreadValues({
173
+ __spreadValues(__spreadValues({
172
174
  selectedKeys: normalizeSelectedKeys(selectedKeys),
173
175
  defaultSelectedKeys: normalizeSelectedKeys(defaultSelectedKeys),
174
176
  className: classNameProp,
175
177
  style: COMMON_STYLES
176
- }, rest),
178
+ }, inEditor ? { shouldUseVirtualFocus: true } : {}), rest),
177
179
  children
178
180
  );
179
181
  if (isStandalone) {
@@ -359,4 +361,4 @@ function registerListBox(loader, overrides) {
359
361
  }
360
362
 
361
363
  export { BaseSection as B, LIST_BOX_COMPONENT_NAME as L, BaseListBox as a, registerListBox as b, listboxHelpers as l, registerSection as r };
362
- //# sourceMappingURL=registerListBox-22cc0165.esm.js.map
364
+ //# sourceMappingURL=registerListBox-d83a8581.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"registerListBox-d83a8581.esm.js","sources":["../src/registerSection.tsx","../src/registerListBox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Header, Section } from \"react-aria-components\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { BaseListBox } from \"./registerListBox\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n Styleable,\n} from \"./utils\";\n\nexport interface BaseSectionProps extends Styleable {\n items: React.ReactNode;\n header: React.ReactNode;\n}\n\nexport function BaseSection(props: BaseSectionProps) {\n const { header, items, ...rest } = props;\n const contextProps = React.useContext(PlasmicListBoxContext);\n const isStandalone = !contextProps;\n\n const section = (\n <Section {...rest} style={COMMON_STYLES}>\n <Header>{header}</Header>\n {items}\n </Section>\n );\n\n if (isStandalone) {\n return (\n // BaseListbox should give section a listbox context (that it can't be used without)\n // as well as the id manager (that is needed to identify and warn about duplication of ids)\n // selection mode needs to be single/multiple to be able to trigger hover state on it.\n <BaseListBox selectionMode=\"single\">{section}</BaseListBox>\n );\n }\n\n return section;\n}\n\nexport function registerSection(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSection>\n) {\n return registerComponentHelper(\n loader,\n BaseSection,\n {\n name: makeComponentName(\"section\"),\n displayName: \"Aria Section\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSection\",\n importName: \"BaseSection\",\n defaultStyles: {\n width: \"stretch\",\n padding: \"10px\",\n },\n props: {\n header: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: [\n {\n type: \"text\",\n value: \"Section Header.\",\n },\n ],\n },\n items: {\n type: \"slot\",\n mergeWithParent: true,\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n","import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { Key, ListBox, ListBoxRenderProps } from \"react-aria-components\";\nimport { COMMON_STYLES } from \"./common\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport { useIdManager } from \"./OptionsItemIdManager\";\nimport {\n makeDefaultListBoxItemChildren,\n registerListBoxItem,\n} from \"./registerListBoxItem\";\nimport { registerSection } from \"./registerSection\";\nimport {\n BaseControlContextDataForLists,\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\nexport interface BaseListBoxControlContextData\n extends BaseControlContextDataForLists {\n isStandalone: boolean;\n}\n\nconst LISTBOX_VARIANTS = [\"focused\" as const, \"focusVisible\" as const];\n\nconst { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);\n\nexport interface BaseListBoxProps\n extends Omit<\n React.ComponentProps<typeof ListBox>,\n \"selectedKeys\" | \"defaultSelectedKeys\" | \"className\"\n >,\n HasControlContextData<BaseListBoxControlContextData>,\n WithVariants<typeof LISTBOX_VARIANTS> {\n children?: React.ReactNode;\n selectedKeys?: string | string[] | undefined;\n defaultSelectedKeys?: string | string[] | undefined;\n className?: string;\n}\n\nexport const listboxHelpers = {\n states: {\n selectedValue: {\n onChangeArgsToValue: (value: Set<Key> | string[] | string) => {\n // only single selection is supported\n return Array.from(value)[0];\n },\n },\n },\n};\n\nfunction normalizeSelectedKeys(selectedKeys: string | string[] | undefined) {\n // Listbox expects it to be of type \"all\" | Iterable\n return typeof selectedKeys === \"string\" && selectedKeys !== \"all\"\n ? [selectedKeys]\n : selectedKeys;\n}\n\nexport function BaseListBox(props: BaseListBoxProps) {\n const {\n setControlContextData: setControlContextData,\n children,\n className,\n selectedKeys,\n defaultSelectedKeys,\n plasmicUpdateVariant,\n ...rest\n } = props;\n const context = React.useContext(PlasmicListBoxContext);\n const isStandalone = !context;\n const [ids, setIds] = useState<string[]>([]);\n const inEditor = usePlasmicCanvasContext();\n\n const idManager = useIdManager(setIds, context?.idManager);\n\n useEffect(() => {\n setControlContextData?.({\n itemIds: ids,\n isStandalone,\n });\n }, [ids, isStandalone, setControlContextData]);\n\n const classNameProp = useCallback(\n ({ isFocusVisible, isFocused }: ListBoxRenderProps) => {\n plasmicUpdateVariant?.({\n focused: isFocused,\n focusVisible: isFocusVisible,\n });\n return className ?? \"\";\n },\n [className, plasmicUpdateVariant]\n );\n\n const listbox = (\n <ListBox\n selectedKeys={normalizeSelectedKeys(selectedKeys)}\n defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}\n className={classNameProp}\n style={COMMON_STYLES}\n // `shouldUseVirtualFocus` is not part of the ListBox prop types, but it’s passed through to useListBox, which does support it.\n // In editor, we use virtual focus to prevent the listbox from stealing focus\n {...(inEditor ? { shouldUseVirtualFocus: true } : {})}\n {...rest}\n >\n {children}\n </ListBox>\n );\n\n if (isStandalone) {\n return (\n <PlasmicListBoxContext.Provider\n value={{\n idManager,\n }}\n >\n {listbox}\n </PlasmicListBoxContext.Provider>\n );\n }\n\n return listbox;\n}\n\nexport const LIST_BOX_COMPONENT_NAME = makeComponentName(\"listbox\");\n\nexport function registerListBox(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBox>\n) {\n const listBoxItemMeta = registerListBoxItem(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n });\n const sectionMeta = registerSection(loader, {\n parentComponentName: LIST_BOX_COMPONENT_NAME,\n props: {\n items: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-1\",\n textValue: \"Section1-Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-2\",\n textValue: \"Section1-Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"section-1-3\",\n textValue: \"Section1-Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n ],\n },\n },\n });\n\n registerComponentHelper(\n loader,\n BaseListBox,\n {\n name: LIST_BOX_COMPONENT_NAME,\n displayName: \"Aria ListBox\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n importName: \"BaseListBox\",\n variants,\n defaultStyles: {\n width: \"250px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n },\n props: {\n children: {\n type: \"slot\",\n displayName: \"List Items\",\n allowedComponents: [listBoxItemMeta.name, sectionMeta.name],\n allowRootWrapper: true,\n defaultValue: [\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"1\",\n textValue: \"Item 1\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 1\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"2\",\n textValue: \"Item 2\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 2\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: listBoxItemMeta.name,\n props: {\n id: \"3\",\n textValue: \"Item 3\",\n children: [\n makeDefaultListBoxItemChildren(\n \"Item 3\",\n \"Add dynamic values to make it more interesting\"\n ),\n ],\n },\n },\n {\n type: \"component\",\n name: sectionMeta.name,\n },\n ],\n },\n selectionMode: {\n type: \"choice\",\n description: \"The selection mode of the listbox\",\n options: [\"none\", \"single\"],\n defaultValue: \"none\",\n hidden: (_props, ctx) => !ctx?.isStandalone,\n },\n selectedKeys: {\n type: \"choice\",\n editOnly: true,\n uncontrolledProp: \"defaultSelectedKeys\",\n displayName: \"Initial selected item\",\n options: (_props, ctx) =>\n ctx?.itemIds ? Array.from(ctx.itemIds) : [],\n hidden: (props, ctx) =>\n !ctx?.isStandalone || props.selectionMode === \"none\",\n // We do not support multiple selections yet (Because React Aria select and combobox only support single selections).\n multiSelect: false,\n },\n onSelectionChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"selectedValues\", type: \"object\" }],\n },\n },\n states: {\n selectedValue: {\n type: \"writable\",\n valueProp: \"selectedKeys\",\n hidden: (props, ctx) =>\n !ctx?.isStandalone || props.selectionMode === \"none\",\n onChangeProp: \"onSelectionChange\",\n variableType: \"text\",\n ...listboxHelpers.states.selectedValue,\n },\n },\n componentHelpers: {\n helpers: listboxHelpers,\n importName: \"listboxHelpers\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBox\",\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["__objRest","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAmC,MAAA,EAAA,GAAA,KAAA,EAA3B,UAAQ,KAnBlB,EAAA,GAmBqC,IAAT,IAAS,GAAAA,WAAA,CAAA,EAAA,EAAT,CAAlB,QAAQ,EAAA,OAAA,CAAA,CAAA,CAAA;AAChB,EAAM,MAAA,YAAA,GAAe,KAAM,CAAA,UAAA,CAAW,qBAAqB,CAAA,CAAA;AAC3D,EAAA,MAAM,eAAe,CAAC,YAAA,CAAA;AAEtB,EAAM,MAAA,OAAA,mBACH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,aAAA,CAAAC,gBAAA,CAAA,EAAA,EAAY,IAAZ,CAAA,EAAA,EAAkB,KAAO,EAAA,aAAA,EAAA,CAAA,kBACvB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAQ,MAAO,CAAA,EACf,KACH,CAAA,CAAA;AAGF,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA;AAAA;AAAA;AAAA;AAAA,sBAIG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,aAAc,EAAA,QAAA,EAAA,EAAU,OAAQ,CAAA;AAAA,MAAA;AAAA,GAEjD;AAEA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA;AAEgB,SAAA,eAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAA,uBAAA;AAAA,IACL,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,kBAAkB,SAAS,CAAA;AAAA,MACjC,WAAa,EAAA,cAAA;AAAA,MACb,UAAY,EAAA,gDAAA;AAAA,MACZ,UAAY,EAAA,aAAA;AAAA,MACZ,aAAe,EAAA;AAAA,QACb,KAAO,EAAA,SAAA;AAAA,QACP,OAAS,EAAA,MAAA;AAAA,OACX;AAAA,MACA,KAAO,EAAA;AAAA,QACL,MAAQ,EAAA;AAAA,UACN,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,YAAc,EAAA;AAAA,YACZ;AAAA,cACE,IAAM,EAAA,MAAA;AAAA,cACN,KAAO,EAAA,iBAAA;AAAA,aACT;AAAA,WACF;AAAA,SACF;AAAA,QACA,KAAO,EAAA;AAAA,UACL,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,SACnB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACpDA,MAAM,gBAAA,GAAmB,CAAC,SAAA,EAAoB,cAAuB,CAAA,CAAA;AAErE,MAAM,EAAE,QAAA,EAAa,GAAA,yBAAA,CAA0B,gBAAgB,CAAA,CAAA;AAexD,MAAM,cAAiB,GAAA;AAAA,EAC5B,MAAQ,EAAA;AAAA,IACN,aAAe,EAAA;AAAA,MACb,mBAAA,EAAqB,CAAC,KAAwC,KAAA;AAE5D,QAAA,OAAO,KAAM,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,CAAC,CAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,GACF;AACF,EAAA;AAEA,SAAS,sBAAsB,YAA6C,EAAA;AAE1E,EAAA,OAAO,OAAO,YAAiB,KAAA,QAAA,IAAY,iBAAiB,KACxD,GAAA,CAAC,YAAY,CACb,GAAA,YAAA,CAAA;AACN,CAAA;AAEO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAA,qBAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,mBAAA;AAAA,IACA,oBAAA;AAAA,GApEJ,GAsEM,EADC,EAAA,IAAA,GAAA,SAAA,CACD,EADC,EAAA;AAAA,IANH,uBAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,qBAAA;AAAA,IACA,sBAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAM,MAAA,OAAA,GAAU,KAAM,CAAA,UAAA,CAAW,qBAAqB,CAAA,CAAA;AACtD,EAAA,MAAM,eAAe,CAAC,OAAA,CAAA;AACtB,EAAA,MAAM,CAAC,GAAK,EAAA,MAAM,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AAC3C,EAAA,MAAM,WAAW,uBAAwB,EAAA,CAAA;AAEzC,EAAA,MAAM,SAAY,GAAA,YAAA,CAAa,MAAQ,EAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAS,SAAS,CAAA,CAAA;AAEzD,EAAA,SAAA,CAAU,MAAM;AACd,IAAwB,qBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,CAAA;AAAA,MACtB,OAAS,EAAA,GAAA;AAAA,MACT,YAAA;AAAA,KACF,CAAA,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,YAAA,EAAc,qBAAqB,CAAC,CAAA,CAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,EAAE,cAAgB,EAAA,SAAA,EAAoC,KAAA;AACrD,MAAuB,oBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,oBAAA,CAAA;AAAA,QACrB,OAAS,EAAA,SAAA;AAAA,QACT,YAAc,EAAA,cAAA;AAAA,OAChB,CAAA,CAAA;AACA,MAAA,OAAO,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,EAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,WAAW,oBAAoB,CAAA;AAAA,GAClC,CAAA;AAEA,EAAA,MAAM,OACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA,cAAA,CAAA,cAAA,CAAA;AAAA,MACC,YAAA,EAAc,sBAAsB,YAAY,CAAA;AAAA,MAChD,mBAAA,EAAqB,sBAAsB,mBAAmB,CAAA;AAAA,MAC9D,SAAW,EAAA,aAAA;AAAA,MACX,KAAO,EAAA,aAAA;AAAA,KAAA,EAGF,WAAW,EAAE,qBAAA,EAAuB,IAAK,EAAA,GAAI,EAC9C,CAAA,EAAA,IAAA,CAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA;AAGF,EAAA,IAAI,YAAc,EAAA;AAChB,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,qBAAsB,CAAA,QAAA;AAAA,MAAtB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAA;AAAA,SACF;AAAA,OAAA;AAAA,MAEC,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AAEA,EAAO,OAAA,OAAA,CAAA;AACT,CAAA;AAEa,MAAA,uBAAA,GAA0B,kBAAkB,SAAS,EAAA;AAElD,SAAA,eAAA,CACd,QACA,SACA,EAAA;AACA,EAAM,MAAA,eAAA,GAAkB,oBAAoB,MAAQ,EAAA;AAAA,IAClD,mBAAqB,EAAA,uBAAA;AAAA,GACtB,CAAA,CAAA;AACD,EAAM,MAAA,WAAA,GAAc,gBAAgB,MAAQ,EAAA;AAAA,IAC1C,mBAAqB,EAAA,uBAAA;AAAA,IACrB,KAAO,EAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,MAAA;AAAA,QACN,YAAc,EAAA;AAAA,UACZ;AAAA,YACE,IAAM,EAAA,WAAA;AAAA,YACN,MAAM,eAAgB,CAAA,IAAA;AAAA,YACtB,KAAO,EAAA;AAAA,cACL,EAAI,EAAA,aAAA;AAAA,cACJ,SAAW,EAAA,iBAAA;AAAA,cACX,QAAU,EAAA;AAAA,gBACR,8BAAA;AAAA,kBACE,QAAA;AAAA,kBACA,gDAAA;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,UACA;AAAA,YACE,IAAM,EAAA,WAAA;AAAA,YACN,MAAM,eAAgB,CAAA,IAAA;AAAA,YACtB,KAAO,EAAA;AAAA,cACL,EAAI,EAAA,aAAA;AAAA,cACJ,SAAW,EAAA,iBAAA;AAAA,cACX,QAAU,EAAA;AAAA,gBACR,8BAAA;AAAA,kBACE,QAAA;AAAA,kBACA,gDAAA;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,UACA;AAAA,YACE,IAAM,EAAA,WAAA;AAAA,YACN,MAAM,eAAgB,CAAA,IAAA;AAAA,YACtB,KAAO,EAAA;AAAA,cACL,EAAI,EAAA,aAAA;AAAA,cACJ,SAAW,EAAA,iBAAA;AAAA,cACX,QAAU,EAAA;AAAA,gBACR,8BAAA;AAAA,kBACE,QAAA;AAAA,kBACA,gDAAA;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBAAA;AAAA,IACE,MAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,uBAAA;AAAA,MACN,WAAa,EAAA,cAAA;AAAA,MACb,UAAY,EAAA,gDAAA;AAAA,MACZ,UAAY,EAAA,aAAA;AAAA,MACZ,QAAA;AAAA,MACA,aAAe,EAAA;AAAA,QACb,KAAO,EAAA,OAAA;AAAA,QACP,WAAa,EAAA,KAAA;AAAA,QACb,WAAa,EAAA,OAAA;AAAA,QACb,WAAa,EAAA,OAAA;AAAA,OACf;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,WAAa,EAAA,YAAA;AAAA,UACb,iBAAmB,EAAA,CAAC,eAAgB,CAAA,IAAA,EAAM,YAAY,IAAI,CAAA;AAAA,UAC1D,gBAAkB,EAAA,IAAA;AAAA,UAClB,YAAc,EAAA;AAAA,YACZ;AAAA,cACE,IAAM,EAAA,WAAA;AAAA,cACN,MAAM,eAAgB,CAAA,IAAA;AAAA,cACtB,KAAO,EAAA;AAAA,gBACL,EAAI,EAAA,GAAA;AAAA,gBACJ,SAAW,EAAA,QAAA;AAAA,gBACX,QAAU,EAAA;AAAA,kBACR,8BAAA;AAAA,oBACE,QAAA;AAAA,oBACA,gDAAA;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,YACA;AAAA,cACE,IAAM,EAAA,WAAA;AAAA,cACN,MAAM,eAAgB,CAAA,IAAA;AAAA,cACtB,KAAO,EAAA;AAAA,gBACL,EAAI,EAAA,GAAA;AAAA,gBACJ,SAAW,EAAA,QAAA;AAAA,gBACX,QAAU,EAAA;AAAA,kBACR,8BAAA;AAAA,oBACE,QAAA;AAAA,oBACA,gDAAA;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,YACA;AAAA,cACE,IAAM,EAAA,WAAA;AAAA,cACN,MAAM,eAAgB,CAAA,IAAA;AAAA,cACtB,KAAO,EAAA;AAAA,gBACL,EAAI,EAAA,GAAA;AAAA,gBACJ,SAAW,EAAA,QAAA;AAAA,gBACX,QAAU,EAAA;AAAA,kBACR,8BAAA;AAAA,oBACE,QAAA;AAAA,oBACA,gDAAA;AAAA,mBACF;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,YACA;AAAA,cACE,IAAM,EAAA,WAAA;AAAA,cACN,MAAM,WAAY,CAAA,IAAA;AAAA,aACpB;AAAA,WACF;AAAA,SACF;AAAA,QACA,aAAe,EAAA;AAAA,UACb,IAAM,EAAA,QAAA;AAAA,UACN,WAAa,EAAA,mCAAA;AAAA,UACb,OAAA,EAAS,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,UAC1B,YAAc,EAAA,MAAA;AAAA,UACd,MAAQ,EAAA,CAAC,MAAQ,EAAA,GAAA,KAAQ,EAAC,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,YAAA,CAAA;AAAA,SACjC;AAAA,QACA,YAAc,EAAA;AAAA,UACZ,IAAM,EAAA,QAAA;AAAA,UACN,QAAU,EAAA,IAAA;AAAA,UACV,gBAAkB,EAAA,qBAAA;AAAA,UAClB,WAAa,EAAA,uBAAA;AAAA,UACb,OAAA,EAAS,CAAC,MAAA,EAAQ,GAChB,KAAA,CAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAK,OAAU,IAAA,KAAA,CAAM,IAAK,CAAA,GAAA,CAAI,OAAO,CAAA,GAAI,EAAC;AAAA,UAC5C,MAAA,EAAQ,CAAC,KAAO,EAAA,GAAA,KACd,EAAC,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,YAAA,CAAA,IAAgB,MAAM,aAAkB,KAAA,MAAA;AAAA;AAAA,UAEhD,WAAa,EAAA,KAAA;AAAA,SACf;AAAA,QACA,iBAAmB,EAAA;AAAA,UACjB,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,gBAAkB,EAAA,IAAA,EAAM,UAAU,CAAA;AAAA,SACvD;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,aAAe,EAAA,cAAA,CAAA;AAAA,UACb,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA,cAAA;AAAA,UACX,MAAA,EAAQ,CAAC,KAAO,EAAA,GAAA,KACd,EAAC,GAAK,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,YAAA,CAAA,IAAgB,MAAM,aAAkB,KAAA,MAAA;AAAA,UAChD,YAAc,EAAA,mBAAA;AAAA,UACd,YAAc,EAAA,MAAA;AAAA,SAAA,EACX,eAAe,MAAO,CAAA,aAAA,CAAA;AAAA,OAE7B;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,OAAS,EAAA,cAAA;AAAA,QACT,UAAY,EAAA,gBAAA;AAAA,QACZ,UAAY,EAAA,gDAAA;AAAA,OACd;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,17 +1,17 @@
1
1
  'use strict';
2
2
 
3
+ require('@plasmicapp/host');
3
4
  require('react');
4
5
  require('react-aria-components');
5
- require('./common-cc5609c7.cjs.js');
6
+ require('./common-6ffc5113.cjs.js');
6
7
  require('./contexts-6d0cb2b1.cjs.js');
7
- require('./OptionsItemIdManager-3dae926c.cjs.js');
8
+ require('./OptionsItemIdManager-f0a61ed5.cjs.js');
8
9
  require('./registerListBoxItem.cjs.js');
9
- var registerSection = require('./registerListBox-8b8a8fdc.cjs.js');
10
- require('./utils-85ca5354.cjs.js');
10
+ var registerSection = require('./registerListBox-b21abca6.cjs.js');
11
+ require('./utils-88dd1a55.cjs.js');
11
12
  require('./variant-utils-0ad70db8.cjs.js');
12
13
  require('./registerDescription.cjs.js');
13
14
  require('./registerText.cjs.js');
14
- require('@plasmicapp/host');
15
15
  require('@plasmicapp/host/registerComponent');
16
16
 
17
17
 
@@ -1,14 +1,14 @@
1
+ import '@plasmicapp/host';
1
2
  import 'react';
2
3
  import 'react-aria-components';
3
- import './common-54602b50.esm.js';
4
+ import './common-3fde23cc.esm.js';
4
5
  import './contexts-5cb81c2f.esm.js';
5
- import './OptionsItemIdManager-87cb9fe8.esm.js';
6
+ import './OptionsItemIdManager-724ffca2.esm.js';
6
7
  import './registerListBoxItem.esm.js';
7
- export { a as BaseListBox, L as LIST_BOX_COMPONENT_NAME, l as listboxHelpers, b as registerListBox } from './registerListBox-22cc0165.esm.js';
8
- import './utils-edf40001.esm.js';
8
+ export { a as BaseListBox, L as LIST_BOX_COMPONENT_NAME, l as listboxHelpers, b as registerListBox } from './registerListBox-d83a8581.esm.js';
9
+ import './utils-b68e14cf.esm.js';
9
10
  import './variant-utils-4405ebb0.esm.js';
10
11
  import './registerDescription.esm.js';
11
12
  import './registerText.esm.js';
12
- import '@plasmicapp/host';
13
13
  import '@plasmicapp/host/registerComponent';
14
14
  //# sourceMappingURL=registerListBox.esm.js.map
@@ -2,12 +2,12 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactAriaComponents = require('react-aria-components');
5
- var common = require('./common-cc5609c7.cjs.js');
5
+ var common = require('./common-6ffc5113.cjs.js');
6
6
  var contexts = require('./contexts-6d0cb2b1.cjs.js');
7
- var OptionsItemIdManager = require('./OptionsItemIdManager-3dae926c.cjs.js');
7
+ var OptionsItemIdManager = require('./OptionsItemIdManager-f0a61ed5.cjs.js');
8
8
  var registerDescription = require('./registerDescription.cjs.js');
9
9
  var registerText = require('./registerText.cjs.js');
10
- var utils = require('./utils-85ca5354.cjs.js');
10
+ var utils = require('./utils-88dd1a55.cjs.js');
11
11
  var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
12
12
  require('@plasmicapp/host');
13
13
  require('@plasmicapp/host/registerComponent');
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  import { ListBoxItem, ListBox } from 'react-aria-components';
3
- import { C as COMMON_STYLES } from './common-54602b50.esm.js';
3
+ import { C as COMMON_STYLES } from './common-3fde23cc.esm.js';
4
4
  import { b as PlasmicListBoxContext } from './contexts-5cb81c2f.esm.js';
5
- import { a as useOptionsItemId } from './OptionsItemIdManager-87cb9fe8.esm.js';
5
+ import { a as useOptionsItemId } from './OptionsItemIdManager-724ffca2.esm.js';
6
6
  import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
7
7
  import { TEXT_COMPONENT_NAME } from './registerText.esm.js';
8
- import { r as registerComponentHelper, m as makeComponentName } from './utils-edf40001.esm.js';
8
+ import { r as registerComponentHelper, m as makeComponentName } from './utils-b68e14cf.esm.js';
9
9
  import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
10
10
  import '@plasmicapp/host';
11
11
  import '@plasmicapp/host/registerComponent';
@@ -4,9 +4,9 @@ var host = require('@plasmicapp/host');
4
4
  var React = require('react');
5
5
  var reactAria = require('react-aria');
6
6
  var reactAriaComponents = require('react-aria-components');
7
- var common = require('./common-cc5609c7.cjs.js');
7
+ var common = require('./common-6ffc5113.cjs.js');
8
8
  var contexts = require('./contexts-6d0cb2b1.cjs.js');
9
- var utils = require('./utils-85ca5354.cjs.js');
9
+ var utils = require('./utils-88dd1a55.cjs.js');
10
10
  require('@plasmicapp/host/registerComponent');
11
11
 
12
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -2,9 +2,9 @@ import { usePlasmicCanvasContext } from '@plasmicapp/host';
2
2
  import React, { forwardRef, useImperativeHandle } from 'react';
3
3
  import { mergeProps } from 'react-aria';
4
4
  import { ModalOverlay, Modal } from 'react-aria-components';
5
- import { h as hasParent } from './common-54602b50.esm.js';
5
+ import { h as hasParent } from './common-3fde23cc.esm.js';
6
6
  import { d as PlasmicDialogTriggerContext } from './contexts-5cb81c2f.esm.js';
7
- import { a as useIsOpen, m as makeComponentName, r as registerComponentHelper } from './utils-edf40001.esm.js';
7
+ import { a as useIsOpen, m as makeComponentName, r as registerComponentHelper } from './utils-b68e14cf.esm.js';
8
8
  import '@plasmicapp/host/registerComponent';
9
9
 
10
10
  var __defProp = Object.defineProperty;
@@ -2,8 +2,8 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactAriaComponents = require('react-aria-components');
5
- var common = require('./common-cc5609c7.cjs.js');
6
- var utils = require('./utils-85ca5354.cjs.js');
5
+ var common = require('./common-6ffc5113.cjs.js');
6
+ var utils = require('./utils-88dd1a55.cjs.js');
7
7
  var variantUtils = require('./variant-utils-0ad70db8.cjs.js');
8
8
  require('@plasmicapp/host');
9
9
  require('@plasmicapp/host/registerComponent');
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { PopoverContext, TooltipTriggerStateContext, OverlayArrow } from 'react-aria-components';
3
- import { C as COMMON_STYLES, a as arrowDown } from './common-54602b50.esm.js';
4
- import { m as makeComponentName, r as registerComponentHelper } from './utils-edf40001.esm.js';
3
+ import { C as COMMON_STYLES, a as arrowDown } from './common-3fde23cc.esm.js';
4
+ import { m as makeComponentName, r as registerComponentHelper } from './utils-b68e14cf.esm.js';
5
5
  import { p as pickAriaComponentVariants } from './variant-utils-4405ebb0.esm.js';
6
6
  import '@plasmicapp/host';
7
7
  import '@plasmicapp/host/registerComponent';
@@ -4,9 +4,9 @@ var host = require('@plasmicapp/host');
4
4
  var utils = require('@react-aria/utils');
5
5
  var React = require('react');
6
6
  var reactAriaComponents = require('react-aria-components');
7
- var common = require('./common-cc5609c7.cjs.js');
7
+ var common = require('./common-6ffc5113.cjs.js');
8
8
  var contexts = require('./contexts-6d0cb2b1.cjs.js');
9
- var utils$1 = require('./utils-85ca5354.cjs.js');
9
+ var utils$1 = require('./utils-88dd1a55.cjs.js');
10
10
  require('@plasmicapp/host/registerComponent');
11
11
 
12
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,11 +57,11 @@ function BasePopover(props) {
57
57
  const canvasContext = host.usePlasmicCanvasContext();
58
58
  const matchTriggerWidthProp = hasTrigger && matchTriggerWidth;
59
59
  const _b = utils.mergeProps(
60
- {
60
+ canvasContext && !canvasContext.interactive ? {
61
61
  // isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
62
62
  // 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.
63
- isNonModal: canvasContext && !canvasContext.interactive
64
- },
63
+ isNonModal: true
64
+ } : void 0,
65
65
  restProps,
66
66
  { className: `${resetClassName}` },
67
67
  // Override some props if the popover is standalone
@@ -1 +1 @@
1
- {"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 { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport { PlasmicPopoverTriggerContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nexport interface BasePopoverControlContextData {\n canMatchTriggerWidth?: boolean;\n}\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n HasControlContextData<BasePopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n children?: React.ReactNode;\n matchTriggerWidth?: boolean;\n}\n\n// PopoverContext is used by BasePopover and BaseOverlayArrow\nexport function BasePopover(props: BasePopoverProps) {\n const {\n resetClassName,\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\n /*\n We only want to trap focus if:\n 1. The popover is NOT in canvas (because while the dialog is open on the canvas, the focus is trapped inside it, so any Studio modals like the Color Picker modal would glitch due to focus jumping back and forth)\n 2. The popover is NOT standalone or inside a Select/Combobox (focus trapping is already handled in Select/Combobox). A way to identify this is by the presence of a DialogTrigger context.\n */\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)` } : {}),\n ...COMMON_STYLES,\n }}\n {...mergedProps}\n >\n {children}\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 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":["React","PopoverContext","PlasmicPopoverTriggerContext","usePlasmicCanvasContext","mergeProps","useEffect","Popover","COMMON_STYLES","makeComponentName","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}
1
+ {"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 { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport { PlasmicPopoverTriggerContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n HasControlContextData,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\nexport interface BasePopoverControlContextData {\n canMatchTriggerWidth?: boolean;\n}\nexport interface BasePopoverProps\n extends React.ComponentProps<typeof Popover>,\n HasControlContextData<BasePopoverControlContextData> {\n className?: string;\n resetClassName?: string;\n children?: React.ReactNode;\n matchTriggerWidth?: boolean;\n}\n\n// PopoverContext is used by BasePopover and BaseOverlayArrow\nexport function BasePopover(props: BasePopoverProps) {\n const {\n resetClassName,\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\n /*\n We only want to trap focus if:\n 1. The popover is NOT in canvas (because while the dialog is open on the canvas, the focus is trapped inside it, so any Studio modals like the Color Picker modal would glitch due to focus jumping back and forth)\n 2. The popover is NOT standalone or inside a Select/Combobox (focus trapping is already handled in Select/Combobox). A way to identify this is by the presence of a DialogTrigger context.\n */\n const { children, ...mergedProps } = mergeProps(\n canvasContext && !canvasContext.interactive\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: true,\n }\n : undefined,\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)` } : {}),\n ...COMMON_STYLES,\n }}\n {...mergedProps}\n >\n {children}\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 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":["React","PopoverContext","PlasmicPopoverTriggerContext","usePlasmicCanvasContext","mergeProps","useEffect","Popover","COMMON_STYLES","makeComponentName","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}
@@ -2,9 +2,9 @@ import { usePlasmicCanvasContext } from '@plasmicapp/host';
2
2
  import { mergeProps } from '@react-aria/utils';
3
3
  import React, { useEffect } from 'react';
4
4
  import { PopoverContext, Popover } from 'react-aria-components';
5
- import { C as COMMON_STYLES, b as getCommonOverlayProps } from './common-54602b50.esm.js';
5
+ import { C as COMMON_STYLES, b as getCommonOverlayProps } from './common-3fde23cc.esm.js';
6
6
  import { a as PlasmicPopoverTriggerContext } from './contexts-5cb81c2f.esm.js';
7
- import { m as makeComponentName, r as registerComponentHelper } from './utils-edf40001.esm.js';
7
+ import { m as makeComponentName, r as registerComponentHelper } from './utils-b68e14cf.esm.js';
8
8
  import '@plasmicapp/host/registerComponent';
9
9
 
10
10
  var __defProp = Object.defineProperty;
@@ -51,11 +51,11 @@ function BasePopover(props) {
51
51
  const canvasContext = usePlasmicCanvasContext();
52
52
  const matchTriggerWidthProp = hasTrigger && matchTriggerWidth;
53
53
  const _b = mergeProps(
54
- {
54
+ canvasContext && !canvasContext.interactive ? {
55
55
  // isNonModal: Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
56
56
  // 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.
57
- isNonModal: canvasContext && !canvasContext.interactive
58
- },
57
+ isNonModal: true
58
+ } : void 0,
59
59
  restProps,
60
60
  { className: `${resetClassName}` },
61
61
  // Override some props if the popover is standalone