@plasmicpkgs/react-aria 0.0.116 → 0.0.118

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 (44) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/react-aria.esm.js +118 -86
  3. package/dist/react-aria.esm.js.map +1 -1
  4. package/dist/react-aria.js +117 -85
  5. package/dist/react-aria.js.map +1 -1
  6. package/package.json +2 -2
  7. package/skinny/registerCheckboxGroup.cjs.js +11 -8
  8. package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
  9. package/skinny/registerCheckboxGroup.esm.js +11 -8
  10. package/skinny/registerCheckboxGroup.esm.js.map +1 -1
  11. package/skinny/registerComboBox.cjs.js.map +1 -1
  12. package/skinny/registerComboBox.esm.js.map +1 -1
  13. package/skinny/registerDialogTrigger.cjs.js +17 -2
  14. package/skinny/registerDialogTrigger.cjs.js.map +1 -1
  15. package/skinny/registerDialogTrigger.esm.js +17 -2
  16. package/skinny/registerDialogTrigger.esm.js.map +1 -1
  17. package/skinny/registerOverlayArrow.cjs.js +1 -1
  18. package/skinny/registerOverlayArrow.cjs.js.map +1 -1
  19. package/skinny/registerOverlayArrow.esm.js +2 -2
  20. package/skinny/registerOverlayArrow.esm.js.map +1 -1
  21. package/skinny/registerPopover.cjs.js.map +1 -1
  22. package/skinny/registerPopover.esm.js.map +1 -1
  23. package/skinny/registerRadioGroup.cjs.js +11 -8
  24. package/skinny/registerRadioGroup.cjs.js.map +1 -1
  25. package/skinny/registerRadioGroup.esm.js +11 -8
  26. package/skinny/registerRadioGroup.esm.js.map +1 -1
  27. package/skinny/registerSelect.cjs.js.map +1 -1
  28. package/skinny/registerSelect.esm.js.map +1 -1
  29. package/skinny/registerSlider.cjs.js +17 -14
  30. package/skinny/registerSlider.cjs.js.map +1 -1
  31. package/skinny/registerSlider.esm.js +17 -14
  32. package/skinny/registerSlider.esm.js.map +1 -1
  33. package/skinny/registerTextField.cjs.js +21 -16
  34. package/skinny/registerTextField.cjs.js.map +1 -1
  35. package/skinny/registerTextField.esm.js +21 -16
  36. package/skinny/registerTextField.esm.js.map +1 -1
  37. package/skinny/registerTooltip.cjs.js +39 -36
  38. package/skinny/registerTooltip.cjs.js.map +1 -1
  39. package/skinny/registerTooltip.esm.js +39 -36
  40. package/skinny/registerTooltip.esm.js.map +1 -1
  41. package/skinny/registerTooltip.stories.cjs.js +153 -23
  42. package/skinny/registerTooltip.stories.cjs.js.map +1 -1
  43. package/skinny/registerTooltip.stories.esm.js +153 -24
  44. package/skinny/registerTooltip.stories.esm.js.map +1 -1
@@ -1,7 +1,7 @@
1
1
  import { usePlasmicCanvasContext, usePlasmicCanvasComponentInfo, usePlasmicLink } from '@plasmicapp/host';
2
2
  import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle, Component, useRef, useId } from 'react';
3
3
  import { mergeProps, useLink, useHover, useFocusRing, useButton, useFocusWithin } from 'react-aria';
4
- import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextAreaContext, TextField, Provider, TooltipTriggerStateContext, Tooltip } from 'react-aria-components';
4
+ import { Button, Checkbox, Text, Label, CheckboxGroup, useContextProps, InputContext, ListBoxItem, ListBox, Section, Header, PopoverContext, Popover, ComboBox, ComboBoxStateContext, Dialog, ModalOverlay, Modal, DialogTrigger, Heading, TooltipTriggerStateContext, OverlayArrow, Radio, RadioGroup, Select, SelectStateContext, SelectValue, SliderOutput, SliderThumb, Slider, SliderTrack, Switch, TextAreaContext, TextField, Provider, Tooltip } from 'react-aria-components';
5
5
  import registerComponent from '@plasmicapp/host/registerComponent';
6
6
  import { mergeProps as mergeProps$1 } from '@react-aria/utils';
7
7
  import flattenChildren from 'react-keyed-flatten-children';
@@ -1378,14 +1378,17 @@ function BaseCheckboxGroup(props) {
1378
1378
  setIds(_ids);
1379
1379
  });
1380
1380
  }, [idManager]);
1381
- return /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$c(
1382
- children,
1383
- {
1384
- disabled: isDisabled,
1385
- readonly: isReadOnly
1386
- },
1387
- plasmicUpdateVariant
1388
- )));
1381
+ return (
1382
+ // PlasmicCheckboxGroupContext is used by BaseCheckbox
1383
+ /* @__PURE__ */ React.createElement(PlasmicCheckboxGroupContext.Provider, { value: __spreadProps$h(__spreadValues$l({}, rest), { idManager }) }, /* @__PURE__ */ React.createElement(CheckboxGroup, __spreadProps$h(__spreadValues$l({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$c(
1384
+ children,
1385
+ {
1386
+ disabled: isDisabled,
1387
+ readonly: isReadOnly
1388
+ },
1389
+ plasmicUpdateVariant
1390
+ )))
1391
+ );
1389
1392
  }
1390
1393
  const componentName = makeComponentName("checkboxGroup");
1391
1394
  function registerCheckboxGroup(loader, overrides) {
@@ -2906,7 +2909,19 @@ function TriggerWrapper$1({ children, className }) {
2906
2909
  return /* @__PURE__ */ React.createElement("div", __spreadValues$d({}, mergedProps), children);
2907
2910
  }
2908
2911
  function BaseDialogTrigger(props) {
2909
- const _a = props, { trigger, dialog, isOpen, className, __plasmic_selection_prop__ } = _a, rest = __objRest$b(_a, ["trigger", "dialog", "isOpen", "className", "__plasmic_selection_prop__"]);
2912
+ const _a = props, {
2913
+ trigger,
2914
+ dialog,
2915
+ isOpen,
2916
+ className,
2917
+ __plasmic_selection_prop__
2918
+ } = _a, rest = __objRest$b(_a, [
2919
+ "trigger",
2920
+ "dialog",
2921
+ "isOpen",
2922
+ "className",
2923
+ "__plasmic_selection_prop__"
2924
+ ]);
2910
2925
  const isOpen2 = useIsOpen({
2911
2926
  triggerSlotName: "trigger",
2912
2927
  isOpen,
@@ -2915,7 +2930,10 @@ function BaseDialogTrigger(props) {
2915
2930
  const mergedProps = __spreadProps$b(__spreadValues$d({}, rest), {
2916
2931
  isOpen: isOpen2
2917
2932
  });
2918
- return /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper$1, { className }, trigger), dialog));
2933
+ return (
2934
+ // PlasmicDialogTriggerContext is used by BaseModal
2935
+ /* @__PURE__ */ React.createElement(PlasmicDialogTriggerContext.Provider, { value: mergedProps }, /* @__PURE__ */ React.createElement(DialogTrigger, __spreadValues$d({}, mergedProps), trigger && /* @__PURE__ */ React.createElement(TriggerWrapper$1, { className }, trigger), dialog))
2936
+ );
2919
2937
  }
2920
2938
  function registerDialogTrigger(loader, overrides) {
2921
2939
  registerComponentHelper(
@@ -3087,7 +3105,7 @@ function BaseOverlayArrow({
3087
3105
  className
3088
3106
  }) {
3089
3107
  const popoverContext = React.useContext(PopoverContext);
3090
- const tooltipContext = React.useContext(TooltipContext);
3108
+ const tooltipContext = React.useContext(TooltipTriggerStateContext);
3091
3109
  const isStandalone = !popoverContext && !tooltipContext;
3092
3110
  const overlayArrow = /* @__PURE__ */ React.createElement(
3093
3111
  OverlayArrow,
@@ -3369,14 +3387,17 @@ function BaseRadioGroup(props) {
3369
3387
  setIds(_ids);
3370
3388
  });
3371
3389
  }, [idManager]);
3372
- return /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$7(
3373
- children,
3374
- {
3375
- disabled: isDisabled,
3376
- readonly: isReadOnly
3377
- },
3378
- plasmicUpdateVariant
3379
- )));
3390
+ return (
3391
+ // PlasmicRadioGroupContext is used by BaseRadio
3392
+ /* @__PURE__ */ React.createElement(PlasmicRadioGroupContext.Provider, { value: __spreadProps$8(__spreadValues$9({}, props), { idManager }) }, /* @__PURE__ */ React.createElement(RadioGroup, __spreadProps$8(__spreadValues$9({}, rest), { style: COMMON_STYLES }), ({ isDisabled, isReadOnly }) => withObservedValues$7(
3393
+ children,
3394
+ {
3395
+ disabled: isDisabled,
3396
+ readonly: isReadOnly
3397
+ },
3398
+ plasmicUpdateVariant
3399
+ )))
3400
+ );
3380
3401
  }
3381
3402
  const RADIO_GROUP_COMPONENT_NAME = makeComponentName("radioGroup");
3382
3403
  function registerRadioGroup(loader, overrides) {
@@ -4183,22 +4204,25 @@ const SLIDER_VARIANTS = ["disabled"];
4183
4204
  const { variants: variants$4, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(SLIDER_VARIANTS);
4184
4205
  function BaseSlider(props) {
4185
4206
  const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest$4(_a, ["children", "plasmicUpdateVariant"]);
4186
- return /* @__PURE__ */ React.createElement(
4187
- PlasmicSliderContext.Provider,
4188
- {
4189
- value: __spreadProps$4(__spreadValues$4({}, rest), {
4190
- // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
4191
- onChange: rest.onChange,
4192
- onChangeEnd: rest.onChangeEnd
4193
- })
4194
- },
4195
- /* @__PURE__ */ React.createElement(Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$3(
4196
- children,
4207
+ return (
4208
+ // PlasmicSliderContext is used by BaseSliderTrack
4209
+ /* @__PURE__ */ React.createElement(
4210
+ PlasmicSliderContext.Provider,
4197
4211
  {
4198
- disabled: isDisabled
4212
+ value: __spreadProps$4(__spreadValues$4({}, rest), {
4213
+ // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
4214
+ onChange: rest.onChange,
4215
+ onChangeEnd: rest.onChangeEnd
4216
+ })
4199
4217
  },
4200
- plasmicUpdateVariant
4201
- ))
4218
+ /* @__PURE__ */ React.createElement(Slider, __spreadProps$4(__spreadValues$4({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues$3(
4219
+ children,
4220
+ {
4221
+ disabled: isDisabled
4222
+ },
4223
+ plasmicUpdateVariant
4224
+ ))
4225
+ )
4202
4226
  );
4203
4227
  }
4204
4228
  function getCommonSliderProps() {
@@ -4822,22 +4846,27 @@ const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
4822
4846
  const { variants: variants$1, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
4823
4847
  function BaseTextField(props) {
4824
4848
  const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest$1(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
4825
- return /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
4826
- TextField,
4827
- __spreadProps$1(__spreadValues$1({
4828
- autoComplete: resolveAutoComplete(autoComplete)
4829
- }, rest), {
4830
- style: COMMON_STYLES
4831
- }),
4832
- ({ isDisabled, isReadOnly }) => withObservedValues$1(
4833
- children,
4834
- {
4835
- disabled: isDisabled,
4836
- readonly: isReadOnly
4837
- },
4838
- plasmicUpdateVariant
4839
- )
4840
- ));
4849
+ return (
4850
+ // PlasmicTextFieldContext is used by
4851
+ // - BaseInput
4852
+ // - BaseTextArea
4853
+ /* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
4854
+ TextField,
4855
+ __spreadProps$1(__spreadValues$1({
4856
+ autoComplete: resolveAutoComplete(autoComplete)
4857
+ }, rest), {
4858
+ style: COMMON_STYLES
4859
+ }),
4860
+ ({ isDisabled, isReadOnly }) => withObservedValues$1(
4861
+ children,
4862
+ {
4863
+ disabled: isDisabled,
4864
+ readonly: isReadOnly
4865
+ },
4866
+ plasmicUpdateVariant
4867
+ )
4868
+ ))
4869
+ );
4841
4870
  }
4842
4871
  const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
4843
4872
  function registerTextField(loader, overrides) {
@@ -5036,7 +5065,7 @@ function ControlledBaseTooltip(props) {
5036
5065
  plasmicUpdateVariant,
5037
5066
  __plasmic_selection_prop__
5038
5067
  } = props;
5039
- const isOpen2 = useIsOpen({
5068
+ const isCanvasAwareOpen = useIsOpen({
5040
5069
  triggerSlotName: "children",
5041
5070
  isOpen,
5042
5071
  __plasmic_selection_prop__
@@ -5044,45 +5073,48 @@ function ControlledBaseTooltip(props) {
5044
5073
  const ref = useRef(null);
5045
5074
  const tooltipId = useId();
5046
5075
  const state = useTooltipTriggerState(__spreadProps(__spreadValues({}, props), {
5076
+ isOpen: isCanvasAwareOpen,
5047
5077
  trigger: trigger === "focus" ? trigger : void 0
5048
5078
  }));
5049
- return /* @__PURE__ */ React.createElement(Provider, { values: [[TooltipTriggerStateContext, state]] }, /* @__PURE__ */ React.createElement(
5050
- TriggerWrapper,
5051
- {
5052
- ref,
5053
- className,
5054
- tooltipId: isOpen2 ? tooltipId : void 0,
5055
- isDisabled,
5056
- onOpenChange,
5057
- triggerOnFocusOnly: trigger === "focus"
5058
- },
5059
- children
5060
- ), /* @__PURE__ */ React.createElement(
5061
- Tooltip,
5062
- {
5063
- triggerRef: ref,
5064
- id: tooltipId,
5065
- isOpen: isOpen2,
5066
- offset,
5067
- delay,
5068
- closeDelay,
5069
- crossOffset,
5070
- shouldFlip,
5071
- className: resetClassName,
5072
- onOpenChange,
5073
- placement
5074
- },
5075
- ({ placement: _placement }) => withObservedValues(
5076
- /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
5079
+ return (
5080
+ // TooltipTriggerStateContext used by BaseOverlayArrow
5081
+ /* @__PURE__ */ React.createElement(Provider, { values: [[TooltipTriggerStateContext, state]] }, /* @__PURE__ */ React.createElement(
5082
+ TriggerWrapper,
5077
5083
  {
5078
- placementTop: _placement === "top",
5079
- placementBottom: _placement === "bottom",
5080
- placementLeft: _placement === "left",
5081
- placementRight: _placement === "right"
5084
+ ref,
5085
+ className,
5086
+ tooltipId: state.isOpen ? tooltipId : void 0,
5087
+ isDisabled,
5088
+ onOpenChange,
5089
+ triggerOnFocusOnly: trigger === "focus"
5082
5090
  },
5083
- plasmicUpdateVariant
5084
- )
5085
- ));
5091
+ children
5092
+ ), /* @__PURE__ */ React.createElement(
5093
+ Tooltip,
5094
+ {
5095
+ triggerRef: ref,
5096
+ id: tooltipId,
5097
+ offset,
5098
+ delay,
5099
+ closeDelay,
5100
+ crossOffset,
5101
+ shouldFlip,
5102
+ className: resetClassName,
5103
+ onOpenChange,
5104
+ placement
5105
+ },
5106
+ ({ placement: _placement }) => withObservedValues(
5107
+ /* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
5108
+ {
5109
+ placementTop: _placement === "top",
5110
+ placementBottom: _placement === "bottom",
5111
+ placementLeft: _placement === "left",
5112
+ placementRight: _placement === "right"
5113
+ },
5114
+ plasmicUpdateVariant
5115
+ )
5116
+ ))
5117
+ );
5086
5118
  }
5087
5119
  const TriggerWrapper = React.forwardRef(
5088
5120
  function TriggerWrapper_({