@plasmicpkgs/react-aria 0.0.114 → 0.0.116
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.
- package/dist/.tsbuildinfo +1 -1
- package/dist/contexts.d.ts +1 -1
- package/dist/react-aria.esm.js +125 -45
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +124 -44
- package/dist/react-aria.js.map +1 -1
- package/dist/registerInput.d.ts +2 -2
- package/dist/registerOverlayArrow.d.ts +2 -1
- package/dist/registerTextArea.d.ts +2 -2
- package/dist/utils.d.ts +2 -0
- package/package.json +2 -2
- package/skinny/{common-c8beb360.cjs.js → common-45acb83c.cjs.js} +2 -2
- package/skinny/{common-c8beb360.cjs.js.map → common-45acb83c.cjs.js.map} +1 -1
- package/skinny/{common-10d1b069.esm.js → common-616eb178.esm.js} +2 -2
- package/skinny/{common-10d1b069.esm.js.map → common-616eb178.esm.js.map} +1 -1
- package/skinny/contexts.d.ts +1 -1
- package/skinny/registerButton.cjs.js +2 -2
- package/skinny/registerButton.esm.js +2 -2
- package/skinny/registerButton.stories.cjs.js +2 -2
- package/skinny/registerButton.stories.esm.js +2 -2
- package/skinny/registerCheckbox.cjs.js +2 -2
- package/skinny/registerCheckbox.esm.js +2 -2
- package/skinny/registerCheckboxGroup.cjs.js +2 -2
- package/skinny/registerCheckboxGroup.esm.js +2 -2
- package/skinny/registerCheckboxGroup.stories.cjs.js +2 -2
- package/skinny/registerCheckboxGroup.stories.esm.js +2 -2
- package/skinny/registerComboBox.cjs.js +3 -3
- package/skinny/registerComboBox.esm.js +3 -3
- package/skinny/registerComboBox.stories.cjs.js +3 -3
- package/skinny/registerComboBox.stories.esm.js +3 -3
- package/skinny/registerDescription.cjs.js +2 -2
- package/skinny/registerDescription.esm.js +2 -2
- package/skinny/registerDialog.cjs.js +2 -2
- package/skinny/registerDialog.esm.js +2 -2
- package/skinny/registerDialogTrigger.cjs.js +2 -2
- package/skinny/registerDialogTrigger.esm.js +2 -2
- package/skinny/registerDialogTrigger.stories.cjs.js +2 -2
- package/skinny/registerDialogTrigger.stories.esm.js +2 -2
- package/skinny/registerFieldError.cjs.js +1 -1
- package/skinny/registerFieldError.esm.js +1 -1
- package/skinny/registerForm.cjs.js +1 -1
- package/skinny/registerForm.esm.js +1 -1
- package/skinny/registerHeading.cjs.js +2 -2
- package/skinny/registerHeading.esm.js +2 -2
- package/skinny/registerInput.cjs.js +43 -21
- package/skinny/registerInput.cjs.js.map +1 -1
- package/skinny/registerInput.d.ts +2 -2
- package/skinny/registerInput.esm.js +46 -24
- package/skinny/registerInput.esm.js.map +1 -1
- package/skinny/registerLabel.cjs.js +2 -2
- package/skinny/registerLabel.esm.js +2 -2
- package/skinny/{registerListBox-87d0e61a.cjs.js → registerListBox-040b0374.cjs.js} +3 -3
- package/skinny/{registerListBox-87d0e61a.cjs.js.map → registerListBox-040b0374.cjs.js.map} +1 -1
- package/skinny/{registerListBox-a5fd72be.esm.js → registerListBox-21dc99fa.esm.js} +3 -3
- package/skinny/{registerListBox-a5fd72be.esm.js.map → registerListBox-21dc99fa.esm.js.map} +1 -1
- package/skinny/registerListBox.cjs.js +3 -3
- package/skinny/registerListBox.esm.js +3 -3
- package/skinny/registerListBoxItem.cjs.js +2 -2
- package/skinny/registerListBoxItem.esm.js +2 -2
- package/skinny/registerListbox.stories.cjs.js +3 -3
- package/skinny/registerListbox.stories.esm.js +3 -3
- package/skinny/registerModal.cjs.js +2 -2
- package/skinny/registerModal.esm.js +2 -2
- package/skinny/registerModal.stories.cjs.js +2 -2
- package/skinny/registerModal.stories.esm.js +2 -2
- package/skinny/registerOverlayArrow.cjs.js +18 -10
- package/skinny/registerOverlayArrow.cjs.js.map +1 -1
- package/skinny/registerOverlayArrow.d.ts +2 -1
- package/skinny/registerOverlayArrow.esm.js +18 -10
- package/skinny/registerOverlayArrow.esm.js.map +1 -1
- package/skinny/registerPopover.cjs.js +2 -2
- package/skinny/registerPopover.esm.js +2 -2
- package/skinny/registerPopover.stories.cjs.js +65 -5
- package/skinny/registerPopover.stories.cjs.js.map +1 -1
- package/skinny/registerPopover.stories.esm.js +65 -6
- package/skinny/registerPopover.stories.esm.js.map +1 -1
- package/skinny/registerRadio.cjs.js +2 -2
- package/skinny/registerRadio.esm.js +2 -2
- package/skinny/registerRadioGroup.cjs.js +2 -2
- package/skinny/registerRadioGroup.esm.js +2 -2
- package/skinny/registerRadioGroup.stories.cjs.js +2 -2
- package/skinny/registerRadioGroup.stories.esm.js +2 -2
- package/skinny/registerSection.cjs.js +3 -3
- package/skinny/registerSection.esm.js +3 -3
- package/skinny/registerSelect.cjs.js +3 -3
- package/skinny/registerSelect.esm.js +3 -3
- package/skinny/registerSelect.stories.cjs.js +3 -3
- package/skinny/registerSelect.stories.esm.js +3 -3
- package/skinny/registerSlider.cjs.js +2 -2
- package/skinny/registerSlider.esm.js +2 -2
- package/skinny/registerSlider.stories.cjs.js +2 -2
- package/skinny/registerSlider.stories.esm.js +2 -2
- package/skinny/registerSliderOutput.cjs.js +2 -2
- package/skinny/registerSliderOutput.esm.js +2 -2
- package/skinny/registerSliderThumb.cjs.js +2 -2
- package/skinny/registerSliderThumb.esm.js +2 -2
- package/skinny/registerSliderTrack.cjs.js +2 -2
- package/skinny/registerSliderTrack.esm.js +2 -2
- package/skinny/registerSwitch.cjs.js +2 -2
- package/skinny/registerSwitch.esm.js +2 -2
- package/skinny/registerSwitch.stories.cjs.js +2 -2
- package/skinny/registerSwitch.stories.esm.js +2 -2
- package/skinny/registerText.cjs.js +2 -2
- package/skinny/registerText.esm.js +2 -2
- package/skinny/registerTextArea.cjs.js +49 -19
- package/skinny/registerTextArea.cjs.js.map +1 -1
- package/skinny/registerTextArea.d.ts +2 -2
- package/skinny/registerTextArea.esm.js +52 -22
- package/skinny/registerTextArea.esm.js.map +1 -1
- package/skinny/registerTextField-common-stories.cjs.js +2 -2
- package/skinny/registerTextField-common-stories.esm.js +2 -2
- package/skinny/registerTextField-input.stories.cjs.js +2 -2
- package/skinny/registerTextField-input.stories.esm.js +2 -2
- package/skinny/registerTextField-textarea.stories.cjs.js +2 -2
- package/skinny/registerTextField-textarea.stories.esm.js +2 -2
- package/skinny/registerTextField.cjs.js +2 -2
- package/skinny/registerTextField.esm.js +2 -2
- package/skinny/registerTooltip.cjs.js +2 -2
- package/skinny/registerTooltip.esm.js +2 -2
- package/skinny/registerTooltip.stories.cjs.js +2 -2
- package/skinny/registerTooltip.stories.esm.js +2 -2
- package/skinny/{utils-91eee672.cjs.js → utils-fc1ddd7c.cjs.js} +22 -1
- package/skinny/utils-fc1ddd7c.cjs.js.map +1 -0
- package/skinny/{utils-59f72eb9.esm.js → utils-fd88ad47.esm.js} +22 -2
- package/skinny/utils-fd88ad47.esm.js.map +1 -0
- package/skinny/utils.d.ts +2 -0
- package/skinny/utils-59f72eb9.esm.js.map +0 -1
- package/skinny/utils-91eee672.cjs.js.map +0 -1
package/dist/contexts.d.ts
CHANGED
|
@@ -17,4 +17,4 @@ export declare const PlasmicListBoxContext: React.Context<{
|
|
|
17
17
|
idManager: OptionsItemIdManager;
|
|
18
18
|
} | undefined>;
|
|
19
19
|
export declare const PlasmicSectionContext: React.Context<import("./registerSection").BaseSectionProps | undefined>;
|
|
20
|
-
export declare const PlasmicInputContext: React.Context<import("./registerInput").BaseInputProps | undefined>;
|
|
20
|
+
export declare const PlasmicInputContext: React.Context<(import("./registerInput").BaseInputProps & React.RefAttributes<HTMLInputElement>) | undefined>;
|
package/dist/react-aria.esm.js
CHANGED
|
@@ -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,
|
|
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';
|
|
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';
|
|
@@ -26,6 +26,18 @@ var __spreadValues$s = (a, b) => {
|
|
|
26
26
|
return a;
|
|
27
27
|
};
|
|
28
28
|
var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
|
|
29
|
+
var __objRest$o = (source, exclude) => {
|
|
30
|
+
var target = {};
|
|
31
|
+
for (var prop in source)
|
|
32
|
+
if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
if (source != null && __getOwnPropSymbols$s)
|
|
35
|
+
for (var prop of __getOwnPropSymbols$s(source)) {
|
|
36
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
|
|
37
|
+
target[prop] = source[prop];
|
|
38
|
+
}
|
|
39
|
+
return target;
|
|
40
|
+
};
|
|
29
41
|
function useIsOpen({
|
|
30
42
|
triggerSlotName,
|
|
31
43
|
isOpen,
|
|
@@ -99,6 +111,14 @@ function extractPlasmicDataProps(props) {
|
|
|
99
111
|
function isDefined(thing) {
|
|
100
112
|
return thing !== void 0 && thing !== null;
|
|
101
113
|
}
|
|
114
|
+
function filterHoverProps(props) {
|
|
115
|
+
const _a = props, otherProps = __objRest$o(_a, [
|
|
116
|
+
"onHoverStart",
|
|
117
|
+
"onHoverChange",
|
|
118
|
+
"onHoverEnd"
|
|
119
|
+
]);
|
|
120
|
+
return otherProps;
|
|
121
|
+
}
|
|
102
122
|
|
|
103
123
|
var __defProp$r = Object.defineProperty;
|
|
104
124
|
var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
|
|
@@ -1540,14 +1560,14 @@ const inputHelpers$1 = {
|
|
|
1540
1560
|
}
|
|
1541
1561
|
}
|
|
1542
1562
|
};
|
|
1543
|
-
function
|
|
1563
|
+
function BaseInput_(props, ref) {
|
|
1544
1564
|
const _a = props, {
|
|
1545
1565
|
plasmicUpdateVariant,
|
|
1546
1566
|
setControlContextData,
|
|
1547
1567
|
autoComplete,
|
|
1548
1568
|
value,
|
|
1549
1569
|
className
|
|
1550
|
-
} = _a,
|
|
1570
|
+
} = _a, restProps = __objRest$i(_a, [
|
|
1551
1571
|
"plasmicUpdateVariant",
|
|
1552
1572
|
"setControlContextData",
|
|
1553
1573
|
"autoComplete",
|
|
@@ -1556,33 +1576,55 @@ function BaseInput(props) {
|
|
|
1556
1576
|
]);
|
|
1557
1577
|
const textFieldContext = React.useContext(PlasmicTextFieldContext);
|
|
1558
1578
|
const context = React.useContext(PlasmicInputContext);
|
|
1579
|
+
const [inputContextProps, inputRef] = useContextProps(
|
|
1580
|
+
restProps,
|
|
1581
|
+
ref,
|
|
1582
|
+
InputContext
|
|
1583
|
+
);
|
|
1584
|
+
const { hoverProps, isHovered } = useHover(props);
|
|
1585
|
+
const { isFocused, isFocusVisible, focusProps } = useFocusRing({
|
|
1586
|
+
isTextInput: true,
|
|
1587
|
+
autoFocus: inputContextProps.autoFocus
|
|
1588
|
+
});
|
|
1589
|
+
const mergedProps = mergeProps(
|
|
1590
|
+
filterHoverProps(inputContextProps),
|
|
1591
|
+
focusProps,
|
|
1592
|
+
hoverProps,
|
|
1593
|
+
{
|
|
1594
|
+
style: COMMON_STYLES,
|
|
1595
|
+
value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
|
|
1596
|
+
autoComplete: resolveAutoComplete(autoComplete),
|
|
1597
|
+
className
|
|
1598
|
+
}
|
|
1599
|
+
);
|
|
1600
|
+
const isDisabled = mergedProps.disabled || false;
|
|
1601
|
+
const isInvalid = !!mergedProps["aria-invalid"] && mergedProps["aria-invalid"] !== "false";
|
|
1559
1602
|
setControlContextData == null ? void 0 : setControlContextData({
|
|
1560
1603
|
parent: textFieldContext
|
|
1561
1604
|
});
|
|
1562
|
-
|
|
1563
|
-
({
|
|
1564
|
-
|
|
1565
|
-
isFocusVisible,
|
|
1566
|
-
isFocused,
|
|
1567
|
-
isHovered
|
|
1568
|
-
}) => {
|
|
1569
|
-
plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
|
|
1605
|
+
useEffect(() => {
|
|
1606
|
+
if (plasmicUpdateVariant) {
|
|
1607
|
+
plasmicUpdateVariant({
|
|
1570
1608
|
disabled: isDisabled,
|
|
1571
1609
|
focused: isFocused,
|
|
1572
1610
|
focusVisible: isFocusVisible,
|
|
1573
1611
|
hovered: isHovered
|
|
1574
1612
|
});
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1613
|
+
}
|
|
1614
|
+
}, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
|
|
1615
|
+
return /* @__PURE__ */ React.createElement(
|
|
1616
|
+
"input",
|
|
1617
|
+
__spreadProps$g(__spreadValues$k({}, mergedProps), {
|
|
1618
|
+
ref: inputRef,
|
|
1619
|
+
"data-focused": isFocused || void 0,
|
|
1620
|
+
"data-disabled": isDisabled || void 0,
|
|
1621
|
+
"data-hovered": isHovered || void 0,
|
|
1622
|
+
"data-focus-visible": isFocusVisible || void 0,
|
|
1623
|
+
"data-invalid": isInvalid || void 0
|
|
1624
|
+
})
|
|
1578
1625
|
);
|
|
1579
|
-
const mergedProps = mergeProps(rest, {
|
|
1580
|
-
value: (context == null ? void 0 : context.isUncontrolled) ? void 0 : value,
|
|
1581
|
-
autoComplete: resolveAutoComplete(autoComplete),
|
|
1582
|
-
className: classNameProp
|
|
1583
|
-
});
|
|
1584
|
-
return /* @__PURE__ */ React.createElement(Input, __spreadProps$g(__spreadValues$k({}, mergedProps), { style: COMMON_STYLES }));
|
|
1585
1626
|
}
|
|
1627
|
+
const BaseInput = React.forwardRef(BaseInput_);
|
|
1586
1628
|
const INPUT_COMPONENT_NAME = makeComponentName("input");
|
|
1587
1629
|
function registerInput(loader, overrides) {
|
|
1588
1630
|
registerComponentHelper(
|
|
@@ -3041,20 +3083,28 @@ const { variants: variants$a, withObservedValues: withObservedValues$9 } = pickA
|
|
|
3041
3083
|
);
|
|
3042
3084
|
function BaseOverlayArrow({
|
|
3043
3085
|
children,
|
|
3044
|
-
plasmicUpdateVariant
|
|
3086
|
+
plasmicUpdateVariant,
|
|
3087
|
+
className
|
|
3045
3088
|
}) {
|
|
3046
3089
|
const popoverContext = React.useContext(PopoverContext);
|
|
3047
3090
|
const tooltipContext = React.useContext(TooltipContext);
|
|
3048
3091
|
const isStandalone = !popoverContext && !tooltipContext;
|
|
3049
|
-
const overlayArrow = /* @__PURE__ */ React.createElement(
|
|
3050
|
-
|
|
3092
|
+
const overlayArrow = /* @__PURE__ */ React.createElement(
|
|
3093
|
+
OverlayArrow,
|
|
3051
3094
|
{
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
placementRight: placement === "right"
|
|
3095
|
+
className,
|
|
3096
|
+
style: __spreadValues$b({ lineHeight: "0" }, COMMON_STYLES)
|
|
3055
3097
|
},
|
|
3056
|
-
|
|
3057
|
-
|
|
3098
|
+
({ placement }) => withObservedValues$9(
|
|
3099
|
+
children,
|
|
3100
|
+
{
|
|
3101
|
+
placementTop: placement === "top",
|
|
3102
|
+
placementLeft: placement === "left",
|
|
3103
|
+
placementRight: placement === "right"
|
|
3104
|
+
},
|
|
3105
|
+
plasmicUpdateVariant
|
|
3106
|
+
)
|
|
3107
|
+
);
|
|
3058
3108
|
if (isStandalone) {
|
|
3059
3109
|
return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, overlayArrow);
|
|
3060
3110
|
}
|
|
@@ -4624,34 +4674,64 @@ const inputHelpers = {
|
|
|
4624
4674
|
}
|
|
4625
4675
|
}
|
|
4626
4676
|
};
|
|
4627
|
-
function
|
|
4628
|
-
const _a = props, {
|
|
4677
|
+
function BaseTextArea_(props, ref) {
|
|
4678
|
+
const _a = props, {
|
|
4679
|
+
className,
|
|
4680
|
+
plasmicUpdateVariant,
|
|
4681
|
+
setControlContextData
|
|
4682
|
+
} = _a, restProps = __objRest$2(_a, [
|
|
4683
|
+
"className",
|
|
4684
|
+
"plasmicUpdateVariant",
|
|
4685
|
+
"setControlContextData"
|
|
4686
|
+
]);
|
|
4629
4687
|
const textFieldContext = React.useContext(PlasmicTextFieldContext);
|
|
4688
|
+
const [textAreaContextProps, textAreaRef] = useContextProps(
|
|
4689
|
+
restProps,
|
|
4690
|
+
ref,
|
|
4691
|
+
TextAreaContext
|
|
4692
|
+
);
|
|
4693
|
+
const { hoverProps, isHovered } = useHover(textAreaContextProps);
|
|
4694
|
+
const { isFocused, isFocusVisible, focusProps } = useFocusRing({
|
|
4695
|
+
isTextInput: true,
|
|
4696
|
+
autoFocus: textAreaContextProps.autoFocus
|
|
4697
|
+
});
|
|
4698
|
+
const mergedProps = mergeProps(
|
|
4699
|
+
filterHoverProps(textAreaContextProps),
|
|
4700
|
+
focusProps,
|
|
4701
|
+
hoverProps,
|
|
4702
|
+
{
|
|
4703
|
+
style: COMMON_STYLES,
|
|
4704
|
+
className
|
|
4705
|
+
}
|
|
4706
|
+
);
|
|
4707
|
+
const isDisabled = mergedProps.disabled || false;
|
|
4708
|
+
const isInvalid = !!mergedProps["aria-invalid"] && mergedProps["aria-invalid"] !== "false";
|
|
4630
4709
|
setControlContextData == null ? void 0 : setControlContextData({
|
|
4631
4710
|
parent: textFieldContext
|
|
4632
4711
|
});
|
|
4633
|
-
|
|
4634
|
-
({
|
|
4635
|
-
|
|
4636
|
-
isFocusVisible,
|
|
4637
|
-
isFocused,
|
|
4638
|
-
isHovered
|
|
4639
|
-
}) => {
|
|
4640
|
-
plasmicUpdateVariant == null ? void 0 : plasmicUpdateVariant({
|
|
4712
|
+
useEffect(() => {
|
|
4713
|
+
if (plasmicUpdateVariant) {
|
|
4714
|
+
plasmicUpdateVariant({
|
|
4641
4715
|
disabled: isDisabled,
|
|
4642
4716
|
focused: isFocused,
|
|
4643
4717
|
focusVisible: isFocusVisible,
|
|
4644
4718
|
hovered: isHovered
|
|
4645
4719
|
});
|
|
4646
|
-
|
|
4647
|
-
|
|
4648
|
-
|
|
4720
|
+
}
|
|
4721
|
+
}, [isFocused, isFocusVisible, isHovered, isDisabled, plasmicUpdateVariant]);
|
|
4722
|
+
return /* @__PURE__ */ React.createElement(
|
|
4723
|
+
"textarea",
|
|
4724
|
+
__spreadProps$2(__spreadValues$2({}, mergedProps), {
|
|
4725
|
+
ref: textAreaRef,
|
|
4726
|
+
"data-focused": isFocused || void 0,
|
|
4727
|
+
"data-disabled": isDisabled || void 0,
|
|
4728
|
+
"data-hovered": isHovered || void 0,
|
|
4729
|
+
"data-focus-visible": isFocusVisible || void 0,
|
|
4730
|
+
"data-invalid": isInvalid || void 0
|
|
4731
|
+
})
|
|
4649
4732
|
);
|
|
4650
|
-
const mergedProps = mergeProps(rest, {
|
|
4651
|
-
className: classNameProp
|
|
4652
|
-
});
|
|
4653
|
-
return /* @__PURE__ */ React.createElement(TextArea, __spreadProps$2(__spreadValues$2({}, mergedProps), { style: COMMON_STYLES }));
|
|
4654
4733
|
}
|
|
4734
|
+
const BaseTextArea = React.forwardRef(BaseTextArea_);
|
|
4655
4735
|
function registerTextArea(loader, overrides) {
|
|
4656
4736
|
registerComponentHelper(
|
|
4657
4737
|
loader,
|