@plasmicpkgs/react-aria 0.0.112 → 0.0.114

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 (122) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/react-aria.esm.js +60 -27
  3. package/dist/react-aria.esm.js.map +1 -1
  4. package/dist/react-aria.js +59 -26
  5. package/dist/react-aria.js.map +1 -1
  6. package/dist/registerDialogTrigger.d.ts +6 -0
  7. package/dist/utils.d.ts +19 -2
  8. package/package.json +2 -4
  9. package/skinny/{common-ceebbaea.esm.js → common-10d1b069.esm.js} +2 -2
  10. package/skinny/{common-ceebbaea.esm.js.map → common-10d1b069.esm.js.map} +1 -1
  11. package/skinny/{common-b3b54c72.cjs.js → common-c8beb360.cjs.js} +2 -2
  12. package/skinny/{common-b3b54c72.cjs.js.map → common-c8beb360.cjs.js.map} +1 -1
  13. package/skinny/registerButton.cjs.js +2 -2
  14. package/skinny/registerButton.esm.js +2 -2
  15. package/skinny/registerButton.stories.cjs.js +2 -2
  16. package/skinny/registerButton.stories.esm.js +2 -2
  17. package/skinny/registerCheckbox.cjs.js +2 -2
  18. package/skinny/registerCheckbox.esm.js +2 -2
  19. package/skinny/registerCheckboxGroup.cjs.js +2 -2
  20. package/skinny/registerCheckboxGroup.esm.js +2 -2
  21. package/skinny/registerCheckboxGroup.stories.cjs.js +2 -2
  22. package/skinny/registerCheckboxGroup.stories.esm.js +2 -2
  23. package/skinny/registerComboBox.cjs.js +3 -3
  24. package/skinny/registerComboBox.esm.js +3 -3
  25. package/skinny/registerComboBox.stories.cjs.js +3 -3
  26. package/skinny/registerComboBox.stories.esm.js +3 -3
  27. package/skinny/registerDescription.cjs.js +2 -2
  28. package/skinny/registerDescription.esm.js +2 -2
  29. package/skinny/registerDialog.cjs.js +2 -2
  30. package/skinny/registerDialog.esm.js +2 -2
  31. package/skinny/registerDialogTrigger.cjs.js +24 -11
  32. package/skinny/registerDialogTrigger.cjs.js.map +1 -1
  33. package/skinny/registerDialogTrigger.d.ts +6 -0
  34. package/skinny/registerDialogTrigger.esm.js +24 -12
  35. package/skinny/registerDialogTrigger.esm.js.map +1 -1
  36. package/skinny/registerDialogTrigger.stories.cjs.js +260 -18
  37. package/skinny/registerDialogTrigger.stories.cjs.js.map +1 -1
  38. package/skinny/registerDialogTrigger.stories.esm.js +257 -20
  39. package/skinny/registerDialogTrigger.stories.esm.js.map +1 -1
  40. package/skinny/registerFieldError.cjs.js +1 -1
  41. package/skinny/registerFieldError.esm.js +1 -1
  42. package/skinny/registerForm.cjs.js +1 -1
  43. package/skinny/registerForm.esm.js +1 -1
  44. package/skinny/registerHeading.cjs.js +2 -2
  45. package/skinny/registerHeading.esm.js +2 -2
  46. package/skinny/registerInput.cjs.js +2 -2
  47. package/skinny/registerInput.esm.js +2 -2
  48. package/skinny/registerLabel.cjs.js +2 -2
  49. package/skinny/registerLabel.esm.js +2 -2
  50. package/skinny/{registerListBox-a99736df.cjs.js → registerListBox-87d0e61a.cjs.js} +3 -3
  51. package/skinny/{registerListBox-a99736df.cjs.js.map → registerListBox-87d0e61a.cjs.js.map} +1 -1
  52. package/skinny/{registerListBox-49626f55.esm.js → registerListBox-a5fd72be.esm.js} +3 -3
  53. package/skinny/{registerListBox-49626f55.esm.js.map → registerListBox-a5fd72be.esm.js.map} +1 -1
  54. package/skinny/registerListBox.cjs.js +3 -3
  55. package/skinny/registerListBox.esm.js +3 -3
  56. package/skinny/registerListBoxItem.cjs.js +2 -2
  57. package/skinny/registerListBoxItem.esm.js +2 -2
  58. package/skinny/registerListbox.stories.cjs.js +3 -3
  59. package/skinny/registerListbox.stories.esm.js +3 -3
  60. package/skinny/registerModal.cjs.js +18 -14
  61. package/skinny/registerModal.cjs.js.map +1 -1
  62. package/skinny/registerModal.esm.js +19 -15
  63. package/skinny/registerModal.esm.js.map +1 -1
  64. package/skinny/registerModal.stories.cjs.js +2 -2
  65. package/skinny/registerModal.stories.esm.js +2 -2
  66. package/skinny/registerOverlayArrow.cjs.js +2 -2
  67. package/skinny/registerOverlayArrow.esm.js +2 -2
  68. package/skinny/registerPopover.cjs.js +2 -2
  69. package/skinny/registerPopover.esm.js +2 -2
  70. package/skinny/registerPopover.stories.cjs.js +2 -2
  71. package/skinny/registerPopover.stories.esm.js +2 -2
  72. package/skinny/registerRadio.cjs.js +2 -2
  73. package/skinny/registerRadio.esm.js +2 -2
  74. package/skinny/registerRadioGroup.cjs.js +2 -2
  75. package/skinny/registerRadioGroup.esm.js +2 -2
  76. package/skinny/registerRadioGroup.stories.cjs.js +2 -2
  77. package/skinny/registerRadioGroup.stories.esm.js +2 -2
  78. package/skinny/registerSection.cjs.js +3 -3
  79. package/skinny/registerSection.esm.js +3 -3
  80. package/skinny/registerSelect.cjs.js +3 -3
  81. package/skinny/registerSelect.esm.js +3 -3
  82. package/skinny/registerSelect.stories.cjs.js +3 -3
  83. package/skinny/registerSelect.stories.esm.js +3 -3
  84. package/skinny/registerSlider.cjs.js +2 -2
  85. package/skinny/registerSlider.esm.js +2 -2
  86. package/skinny/registerSlider.stories.cjs.js +2 -2
  87. package/skinny/registerSlider.stories.esm.js +2 -2
  88. package/skinny/registerSliderOutput.cjs.js +2 -2
  89. package/skinny/registerSliderOutput.esm.js +2 -2
  90. package/skinny/registerSliderThumb.cjs.js +2 -2
  91. package/skinny/registerSliderThumb.esm.js +2 -2
  92. package/skinny/registerSliderTrack.cjs.js +2 -2
  93. package/skinny/registerSliderTrack.esm.js +2 -2
  94. package/skinny/registerSwitch.cjs.js +2 -2
  95. package/skinny/registerSwitch.esm.js +2 -2
  96. package/skinny/registerSwitch.stories.cjs.js +2 -2
  97. package/skinny/registerSwitch.stories.esm.js +2 -2
  98. package/skinny/registerText.cjs.js +2 -2
  99. package/skinny/registerText.esm.js +2 -2
  100. package/skinny/registerTextArea.cjs.js +2 -2
  101. package/skinny/registerTextArea.esm.js +2 -2
  102. package/skinny/registerTextField-common-stories.cjs.js +2 -2
  103. package/skinny/registerTextField-common-stories.esm.js +2 -2
  104. package/skinny/registerTextField-input.stories.cjs.js +2 -2
  105. package/skinny/registerTextField-input.stories.esm.js +2 -2
  106. package/skinny/registerTextField-textarea.stories.cjs.js +2 -2
  107. package/skinny/registerTextField-textarea.stories.esm.js +2 -2
  108. package/skinny/registerTextField.cjs.js +2 -2
  109. package/skinny/registerTextField.esm.js +2 -2
  110. package/skinny/registerTooltip.cjs.js +12 -10
  111. package/skinny/registerTooltip.cjs.js.map +1 -1
  112. package/skinny/registerTooltip.esm.js +12 -10
  113. package/skinny/registerTooltip.esm.js.map +1 -1
  114. package/skinny/registerTooltip.stories.cjs.js +2 -2
  115. package/skinny/registerTooltip.stories.esm.js +2 -2
  116. package/skinny/{utils-5d1b4c6b.esm.js → utils-59f72eb9.esm.js} +17 -2
  117. package/skinny/utils-59f72eb9.esm.js.map +1 -0
  118. package/skinny/{utils-7d000fa4.cjs.js → utils-91eee672.cjs.js} +17 -1
  119. package/skinny/utils-91eee672.cjs.js.map +1 -0
  120. package/skinny/utils.d.ts +19 -2
  121. package/skinny/utils-5d1b4c6b.esm.js.map +0 -1
  122. package/skinny/utils-7d000fa4.cjs.js.map +0 -1
@@ -34,6 +34,21 @@ var __spreadValues$s = (a, b) => {
34
34
  return a;
35
35
  };
36
36
  var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
37
+ function useIsOpen({
38
+ triggerSlotName,
39
+ isOpen,
40
+ __plasmic_selection_prop__
41
+ }) {
42
+ var _a, _b;
43
+ const canvasContext = host.usePlasmicCanvasContext();
44
+ const { isSelected, selectedSlotName } = (_b = (_a = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _a({ __plasmic_selection_prop__ })) != null ? _b : {};
45
+ if (!canvasContext) {
46
+ return isOpen;
47
+ }
48
+ const isTriggerSlotSelected = isDefined(selectedSlotName) && selectedSlotName === triggerSlotName;
49
+ const isAutoOpenedBySelection = isSelected && !isTriggerSlotSelected;
50
+ return Boolean(isAutoOpenedBySelection || isOpen);
51
+ }
37
52
  function useAutoOpen({
38
53
  props,
39
54
  open,
@@ -2638,7 +2653,6 @@ var __objRest$c = (source, exclude) => {
2638
2653
  };
2639
2654
  const BaseModal = React.forwardRef(
2640
2655
  function BaseModalInner(props, ref) {
2641
- var _b, _c, _d;
2642
2656
  const _a = props, {
2643
2657
  children,
2644
2658
  modalOverlayClass,
@@ -2646,7 +2660,9 @@ const BaseModal = React.forwardRef(
2646
2660
  isOpen,
2647
2661
  resetClassName,
2648
2662
  setControlContextData,
2649
- isDismissable
2663
+ isDismissable,
2664
+ defaultOpen,
2665
+ __plasmic_selection_prop__
2650
2666
  } = _a, rest = __objRest$c(_a, [
2651
2667
  "children",
2652
2668
  "modalOverlayClass",
@@ -2654,22 +2670,24 @@ const BaseModal = React.forwardRef(
2654
2670
  "isOpen",
2655
2671
  "resetClassName",
2656
2672
  "setControlContextData",
2657
- "isDismissable"
2673
+ "isDismissable",
2674
+ "defaultOpen",
2675
+ "__plasmic_selection_prop__"
2658
2676
  ]);
2659
2677
  const canvasCtx = host.usePlasmicCanvasContext();
2660
2678
  const isEditMode = canvasCtx && canvasCtx.interactive === false;
2661
- const isSelected = (_d = (_c = (_b = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) == null ? void 0 : _c.isSelected) != null ? _d : false;
2662
2679
  const contextProps = React__default.default.useContext(PlasmicDialogTriggerContext);
2663
2680
  const isStandalone = !contextProps;
2681
+ const isOpen2 = useIsOpen({ isOpen, __plasmic_selection_prop__ });
2664
2682
  const mergedProps = reactAria.mergeProps(rest, {
2665
- isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen,
2666
- /*
2667
- isDismissable on canvas (non-interactive mode) causes the following two issues:
2668
- 1. Clicking anywhere inside the modal dismisses it
2669
- 2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
2670
-
2671
- To fix the above issue, we set an interim isDismissable state to false in edit mode, because it only matters in interactive mode.
2672
- */
2683
+ // Since open/defaultOpen props are hidden when the modal is inside dialogTrigger, we also unset them here.
2684
+ isOpen: isStandalone ? isOpen2 : void 0,
2685
+ defaultOpen: isStandalone ? defaultOpen : void 0,
2686
+ // isDismissable on canvas (non-interactive mode) causes the following two issues:
2687
+ // 1. Clicking anywhere inside the modal dismisses it
2688
+ // 2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable.
2689
+ //
2690
+ // To fix the above issue, we set an interim isDismissable state to false in edit mode, because it only matters in interactive mode.
2673
2691
  isDismissable: isEditMode ? false : isDismissable
2674
2692
  });
2675
2693
  setControlContextData == null ? void 0 : setControlContextData({
@@ -2775,6 +2793,7 @@ function registerModal(loader, overrides) {
2775
2793
  type: "boolean",
2776
2794
  editOnly: true,
2777
2795
  uncontrolledProp: "defaultOpen",
2796
+ // standalone Modals should default to open so that they are visible when inserted
2778
2797
  defaultValueHint: true,
2779
2798
  defaultValue: true,
2780
2799
  hidden: hasParent
@@ -2841,15 +2860,28 @@ var __objRest$b = (source, exclude) => {
2841
2860
  }
2842
2861
  return target;
2843
2862
  };
2863
+ function TriggerWrapper$1({ children, className }) {
2864
+ const ref = React__default.default.useRef(null);
2865
+ const { buttonProps } = reactAria.useButton({}, ref);
2866
+ const mergedProps = reactAria.mergeProps(buttonProps, {
2867
+ ref,
2868
+ // We expose className to allow user control over the wrapper div's styling.
2869
+ className,
2870
+ style: COMMON_STYLES
2871
+ });
2872
+ return /* @__PURE__ */ React__default.default.createElement("div", __spreadValues$d({}, mergedProps), children);
2873
+ }
2844
2874
  function BaseDialogTrigger(props) {
2845
- var _b, _c;
2846
- const _a = props, { trigger, dialog, isOpen } = _a, rest = __objRest$b(_a, ["trigger", "dialog", "isOpen"]);
2847
- const { isSelected, selectedSlotName } = (_c = (_b = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _b(props)) != null ? _c : {};
2848
- const isAutoOpen = selectedSlotName !== "trigger" && isSelected;
2875
+ const _a = props, { trigger, dialog, isOpen, className, __plasmic_selection_prop__ } = _a, rest = __objRest$b(_a, ["trigger", "dialog", "isOpen", "className", "__plasmic_selection_prop__"]);
2876
+ const isOpen2 = useIsOpen({
2877
+ triggerSlotName: "trigger",
2878
+ isOpen,
2879
+ __plasmic_selection_prop__
2880
+ });
2849
2881
  const mergedProps = __spreadProps$b(__spreadValues$d({}, rest), {
2850
- isOpen: isAutoOpen || isOpen
2882
+ isOpen: isOpen2
2851
2883
  });
2852
- return /* @__PURE__ */ React__default.default.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues$d({}, mergedProps), trigger, dialog));
2884
+ return /* @__PURE__ */ React__default.default.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React__default.default.createElement(TriggerWrapper$1, { className }, trigger), dialog));
2853
2885
  }
2854
2886
  function registerDialogTrigger(loader, overrides) {
2855
2887
  registerComponentHelper(
@@ -2860,7 +2892,6 @@ function registerDialogTrigger(loader, overrides) {
2860
2892
  displayName: "Aria Dialog Trigger",
2861
2893
  importPath: "@plasmicpkgs/react-aria/skinny/registerDialogTrigger",
2862
2894
  importName: "BaseDialogTrigger",
2863
- styleSections: false,
2864
2895
  props: {
2865
2896
  trigger: {
2866
2897
  type: "slot",
@@ -4914,7 +4945,6 @@ function UncontrolledBaseTooltip(_a) {
4914
4945
  );
4915
4946
  }
4916
4947
  function ControlledBaseTooltip(props) {
4917
- var _a, _b;
4918
4948
  const {
4919
4949
  children,
4920
4950
  isDisabled = false,
@@ -4931,11 +4961,14 @@ function ControlledBaseTooltip(props) {
4931
4961
  className,
4932
4962
  onOpenChange = () => {
4933
4963
  },
4934
- plasmicUpdateVariant
4964
+ plasmicUpdateVariant,
4965
+ __plasmic_selection_prop__
4935
4966
  } = props;
4936
- const { isSelected, selectedSlotName } = (_b = (_a = host.usePlasmicCanvasComponentInfo) == null ? void 0 : _a(props)) != null ? _b : {};
4937
- const isSelectedOnCanvas = selectedSlotName !== "children" && isSelected;
4938
- const _isOpen = isSelectedOnCanvas || isOpen;
4967
+ const isOpen2 = useIsOpen({
4968
+ triggerSlotName: "children",
4969
+ isOpen,
4970
+ __plasmic_selection_prop__
4971
+ });
4939
4972
  const ref = React.useRef(null);
4940
4973
  const tooltipId = React.useId();
4941
4974
  const state = reactStately.useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
@@ -4946,7 +4979,7 @@ function ControlledBaseTooltip(props) {
4946
4979
  {
4947
4980
  ref,
4948
4981
  className,
4949
- tooltipId: _isOpen ? tooltipId : void 0,
4982
+ tooltipId: isOpen2 ? tooltipId : void 0,
4950
4983
  isDisabled,
4951
4984
  onOpenChange,
4952
4985
  triggerOnFocusOnly: trigger === "focus"
@@ -4957,7 +4990,7 @@ function ControlledBaseTooltip(props) {
4957
4990
  {
4958
4991
  triggerRef: ref,
4959
4992
  id: tooltipId,
4960
- isOpen: _isOpen,
4993
+ isOpen: isOpen2,
4961
4994
  offset,
4962
4995
  delay,
4963
4996
  closeDelay,