@plasmicpkgs/react-aria 0.0.117 → 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.
- package/dist/.tsbuildinfo +1 -1
- package/dist/react-aria.esm.js +116 -84
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +115 -83
- package/dist/react-aria.js.map +1 -1
- package/package.json +2 -2
- package/skinny/registerCheckboxGroup.cjs.js +11 -8
- package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
- package/skinny/registerCheckboxGroup.esm.js +11 -8
- package/skinny/registerCheckboxGroup.esm.js.map +1 -1
- package/skinny/registerComboBox.cjs.js.map +1 -1
- package/skinny/registerComboBox.esm.js.map +1 -1
- package/skinny/registerDialogTrigger.cjs.js +17 -2
- package/skinny/registerDialogTrigger.cjs.js.map +1 -1
- package/skinny/registerDialogTrigger.esm.js +17 -2
- package/skinny/registerDialogTrigger.esm.js.map +1 -1
- package/skinny/registerOverlayArrow.cjs.js +1 -1
- package/skinny/registerOverlayArrow.cjs.js.map +1 -1
- package/skinny/registerOverlayArrow.esm.js +2 -2
- package/skinny/registerOverlayArrow.esm.js.map +1 -1
- package/skinny/registerPopover.cjs.js.map +1 -1
- package/skinny/registerPopover.esm.js.map +1 -1
- package/skinny/registerRadioGroup.cjs.js +11 -8
- package/skinny/registerRadioGroup.cjs.js.map +1 -1
- package/skinny/registerRadioGroup.esm.js +11 -8
- package/skinny/registerRadioGroup.esm.js.map +1 -1
- package/skinny/registerSelect.cjs.js.map +1 -1
- package/skinny/registerSelect.esm.js.map +1 -1
- package/skinny/registerSlider.cjs.js +17 -14
- package/skinny/registerSlider.cjs.js.map +1 -1
- package/skinny/registerSlider.esm.js +17 -14
- package/skinny/registerSlider.esm.js.map +1 -1
- package/skinny/registerTextField.cjs.js +21 -16
- package/skinny/registerTextField.cjs.js.map +1 -1
- package/skinny/registerTextField.esm.js +21 -16
- package/skinny/registerTextField.esm.js.map +1 -1
- package/skinny/registerTooltip.cjs.js +37 -34
- package/skinny/registerTooltip.cjs.js.map +1 -1
- package/skinny/registerTooltip.esm.js +37 -34
- package/skinny/registerTooltip.esm.js.map +1 -1
|
@@ -49,22 +49,25 @@ const SLIDER_VARIANTS = ["disabled"];
|
|
|
49
49
|
const { variants, withObservedValues } = pickAriaComponentVariants(SLIDER_VARIANTS);
|
|
50
50
|
function BaseSlider(props) {
|
|
51
51
|
const _a = props, { children, plasmicUpdateVariant } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant"]);
|
|
52
|
-
return
|
|
53
|
-
PlasmicSliderContext
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
// Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
|
|
57
|
-
onChange: rest.onChange,
|
|
58
|
-
onChangeEnd: rest.onChangeEnd
|
|
59
|
-
})
|
|
60
|
-
},
|
|
61
|
-
/* @__PURE__ */ React.createElement(Slider, __spreadProps(__spreadValues({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues(
|
|
62
|
-
children,
|
|
52
|
+
return (
|
|
53
|
+
// PlasmicSliderContext is used by BaseSliderTrack
|
|
54
|
+
/* @__PURE__ */ React.createElement(
|
|
55
|
+
PlasmicSliderContext.Provider,
|
|
63
56
|
{
|
|
64
|
-
|
|
57
|
+
value: __spreadProps(__spreadValues({}, rest), {
|
|
58
|
+
// Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410
|
|
59
|
+
onChange: rest.onChange,
|
|
60
|
+
onChangeEnd: rest.onChangeEnd
|
|
61
|
+
})
|
|
65
62
|
},
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
/* @__PURE__ */ React.createElement(Slider, __spreadProps(__spreadValues({}, rest), { style: COMMON_STYLES }), ({ isDisabled }) => withObservedValues(
|
|
64
|
+
children,
|
|
65
|
+
{
|
|
66
|
+
disabled: isDisabled
|
|
67
|
+
},
|
|
68
|
+
plasmicUpdateVariant
|
|
69
|
+
))
|
|
70
|
+
)
|
|
68
71
|
);
|
|
69
72
|
}
|
|
70
73
|
function getCommonSliderProps() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerSlider.esm.js","sources":["../src/registerSlider.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { Slider, type SliderProps } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { registerSliderOutput } from \"./registerSliderOutput\";\nimport { registerSliderThumb } from \"./registerSliderThumb\";\nimport { registerSliderTrack } from \"./registerSliderTrack\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_COMPONENT_NAME = makeComponentName(\"slider\");\nconst RANGE_SLIDER_COMPONENT_NAME = makeComponentName(\"range-slider\");\nconst SLIDER_VARIANTS = [\"disabled\" as const];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(SLIDER_VARIANTS);\n\nexport interface BaseSliderProps<T extends number | number[]>\n extends SliderProps<T>,\n WithVariants<typeof SLIDER_VARIANTS> {\n children?: React.ReactNode;\n}\n\nexport function BaseSlider<T extends number | number[]>(\n props: BaseSliderProps<T>\n) {\n const { children, plasmicUpdateVariant, ...rest } = props;\n return (\n <PlasmicSliderContext.Provider\n value={{\n ...rest,\n // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410\n onChange: rest.onChange as (value: number | number[]) => void,\n onChangeEnd: rest.onChangeEnd as (value: number | number[]) => void,\n }}\n >\n <Slider<T> {...rest} style={COMMON_STYLES}>\n {({ isDisabled }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </Slider>\n </PlasmicSliderContext.Provider>\n );\n}\n\nfunction getCommonSliderProps<T extends number | number[]>(): CodeComponentMeta<\n BaseSliderProps<T>\n>[\"props\"] {\n return {\n orientation: {\n type: \"choice\",\n options: [\"horizontal\", \"vertical\"],\n defaultValueHint: \"horizontal\",\n defaultValue: \"horizontal\",\n },\n minValue: {\n type: \"number\",\n description: \"The minimum value of the slider\",\n defaultValueHint: 0,\n },\n maxValue: {\n type: \"number\",\n description: \"The maximum value of the slider\",\n defaultValueHint: 100,\n },\n step: {\n type: \"number\",\n description: \"The step value of the slider\",\n defaultValueHint: 1,\n },\n };\n}\n\nexport function registerSlider(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSlider<number>>\n) {\n const sliderOutputMeta = registerSliderOutput(loader, {\n parentComponentName: SLIDER_COMPONENT_NAME,\n });\n\n const sliderThumbMeta = registerSliderThumb(loader, {\n parentComponentName: SLIDER_COMPONENT_NAME,\n });\n const sliderTrackMeta = registerSliderTrack(sliderThumbMeta, loader, {\n parentComponentName: SLIDER_COMPONENT_NAME,\n });\n\n // Register the range slider\n registerComponentHelper(\n loader,\n BaseSlider<number[]>,\n {\n name: RANGE_SLIDER_COMPONENT_NAME,\n displayName: \"Aria Range Slider\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSlider\",\n importName: \"BaseSlider\",\n variants,\n defaultStyles: {\n width: \"300px\",\n },\n props: {\n ...getCommonProps<BaseSliderProps<number[]>>(\"slider\", [\n \"isDisabled\",\n \"aria-label\",\n ]),\n ...getCommonSliderProps<number[]>(),\n value: {\n type: \"array\",\n editOnly: true,\n displayName: \"Initial value\",\n uncontrolledProp: \"defaultValue\",\n description: \"The intial value of the slider\",\n defaultValue: [20, 50],\n validator: (value) => {\n if (!Array.isArray(value)) {\n return \"Input must be an array.\";\n }\n\n for (let i = 1; i < value.length; i++) {\n if (value[i] < value[i - 1]) {\n return \"Array elements are not in ascending order.\";\n }\n }\n\n return true;\n },\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n padding: \"8px 0px\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: sliderOutputMeta.name,\n props: {\n children: {\n type: \"text\",\n value: \"Output\",\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: sliderTrackMeta.name,\n props: {\n children: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n styles: {\n backgroundColor: \"blue\",\n },\n },\n ],\n },\n },\n ],\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n onChangeEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"array\",\n },\n },\n trapsFocus: true,\n },\n {\n parentComponentName: SLIDER_COMPONENT_NAME,\n }\n );\n\n registerComponentHelper(\n loader,\n BaseSlider<number>,\n {\n name: SLIDER_COMPONENT_NAME,\n displayName: \"Aria Slider\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSlider\",\n importName: \"BaseSlider\",\n variants,\n defaultStyles: {\n width: \"300px\",\n },\n props: {\n ...getCommonProps<BaseSliderProps<number>>(\"slider\", [\n \"isDisabled\",\n \"aria-label\",\n ]),\n ...getCommonSliderProps<number>(),\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n padding: \"8px 0px\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: sliderOutputMeta.name,\n props: {\n children: {\n type: \"text\",\n value: \"Output\",\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: sliderTrackMeta.name,\n },\n ],\n },\n value: {\n type: \"number\",\n editOnly: true,\n displayName: \"Initial value\",\n uncontrolledProp: \"defaultValue\",\n description: \"The initial value of the slider\",\n defaultValueHint: 0,\n defaultValue: 0,\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"number\" }],\n },\n onChangeEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"number\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"number\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerSlider.esm.js","sources":["../src/registerSlider.tsx"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { Slider, type SliderProps } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps } from \"./common\";\nimport { PlasmicSliderContext } from \"./contexts\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { registerSliderOutput } from \"./registerSliderOutput\";\nimport { registerSliderThumb } from \"./registerSliderThumb\";\nimport { registerSliderTrack } from \"./registerSliderTrack\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst SLIDER_COMPONENT_NAME = makeComponentName(\"slider\");\nconst RANGE_SLIDER_COMPONENT_NAME = makeComponentName(\"range-slider\");\nconst SLIDER_VARIANTS = [\"disabled\" as const];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(SLIDER_VARIANTS);\n\nexport interface BaseSliderProps<T extends number | number[]>\n extends SliderProps<T>,\n WithVariants<typeof SLIDER_VARIANTS> {\n children?: React.ReactNode;\n}\n\nexport function BaseSlider<T extends number | number[]>(\n props: BaseSliderProps<T>\n) {\n const { children, plasmicUpdateVariant, ...rest } = props;\n return (\n // PlasmicSliderContext is used by BaseSliderTrack\n <PlasmicSliderContext.Provider\n value={{\n ...rest,\n // Here's why the type casting is needed here: https://github.com/Microsoft/TypeScript/issues/3410\n onChange: rest.onChange as (value: number | number[]) => void,\n onChangeEnd: rest.onChangeEnd as (value: number | number[]) => void,\n }}\n >\n <Slider<T> {...rest} style={COMMON_STYLES}>\n {({ isDisabled }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n },\n plasmicUpdateVariant\n )\n }\n </Slider>\n </PlasmicSliderContext.Provider>\n );\n}\n\nfunction getCommonSliderProps<T extends number | number[]>(): CodeComponentMeta<\n BaseSliderProps<T>\n>[\"props\"] {\n return {\n orientation: {\n type: \"choice\",\n options: [\"horizontal\", \"vertical\"],\n defaultValueHint: \"horizontal\",\n defaultValue: \"horizontal\",\n },\n minValue: {\n type: \"number\",\n description: \"The minimum value of the slider\",\n defaultValueHint: 0,\n },\n maxValue: {\n type: \"number\",\n description: \"The maximum value of the slider\",\n defaultValueHint: 100,\n },\n step: {\n type: \"number\",\n description: \"The step value of the slider\",\n defaultValueHint: 1,\n },\n };\n}\n\nexport function registerSlider(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseSlider<number>>\n) {\n const sliderOutputMeta = registerSliderOutput(loader, {\n parentComponentName: SLIDER_COMPONENT_NAME,\n });\n\n const sliderThumbMeta = registerSliderThumb(loader, {\n parentComponentName: SLIDER_COMPONENT_NAME,\n });\n const sliderTrackMeta = registerSliderTrack(sliderThumbMeta, loader, {\n parentComponentName: SLIDER_COMPONENT_NAME,\n });\n\n // Register the range slider\n registerComponentHelper(\n loader,\n BaseSlider<number[]>,\n {\n name: RANGE_SLIDER_COMPONENT_NAME,\n displayName: \"Aria Range Slider\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSlider\",\n importName: \"BaseSlider\",\n variants,\n defaultStyles: {\n width: \"300px\",\n },\n props: {\n ...getCommonProps<BaseSliderProps<number[]>>(\"slider\", [\n \"isDisabled\",\n \"aria-label\",\n ]),\n ...getCommonSliderProps<number[]>(),\n value: {\n type: \"array\",\n editOnly: true,\n displayName: \"Initial value\",\n uncontrolledProp: \"defaultValue\",\n description: \"The intial value of the slider\",\n defaultValue: [20, 50],\n validator: (value) => {\n if (!Array.isArray(value)) {\n return \"Input must be an array.\";\n }\n\n for (let i = 1; i < value.length; i++) {\n if (value[i] < value[i - 1]) {\n return \"Array elements are not in ascending order.\";\n }\n }\n\n return true;\n },\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n padding: \"8px 0px\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: sliderOutputMeta.name,\n props: {\n children: {\n type: \"text\",\n value: \"Output\",\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: sliderTrackMeta.name,\n props: {\n children: [\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n },\n {\n type: \"component\",\n name: sliderThumbMeta.name,\n styles: {\n backgroundColor: \"blue\",\n },\n },\n ],\n },\n },\n ],\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n onChangeEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"object\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"array\",\n },\n },\n trapsFocus: true,\n },\n {\n parentComponentName: SLIDER_COMPONENT_NAME,\n }\n );\n\n registerComponentHelper(\n loader,\n BaseSlider<number>,\n {\n name: SLIDER_COMPONENT_NAME,\n displayName: \"Aria Slider\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSlider\",\n importName: \"BaseSlider\",\n variants,\n defaultStyles: {\n width: \"300px\",\n },\n props: {\n ...getCommonProps<BaseSliderProps<number>>(\"slider\", [\n \"isDisabled\",\n \"aria-label\",\n ]),\n ...getCommonSliderProps<number>(),\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n padding: \"8px 0px\",\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: sliderOutputMeta.name,\n props: {\n children: {\n type: \"text\",\n value: \"Output\",\n },\n },\n },\n ],\n },\n {\n type: \"component\",\n name: sliderTrackMeta.name,\n },\n ],\n },\n value: {\n type: \"number\",\n editOnly: true,\n displayName: \"Initial value\",\n uncontrolledProp: \"defaultValue\",\n description: \"The initial value of the slider\",\n defaultValueHint: 0,\n defaultValue: 0,\n },\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"number\" }],\n },\n onChangeEnd: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"number\" }],\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"number\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -53,22 +53,27 @@ const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
|
|
|
53
53
|
const { variants, withObservedValues } = variantUtils.pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
|
|
54
54
|
function BaseTextField(props) {
|
|
55
55
|
const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
|
|
56
|
-
return
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
56
|
+
return (
|
|
57
|
+
// PlasmicTextFieldContext is used by
|
|
58
|
+
// - BaseInput
|
|
59
|
+
// - BaseTextArea
|
|
60
|
+
/* @__PURE__ */ React__default.default.createElement(contexts.PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React__default.default.createElement(
|
|
61
|
+
reactAriaComponents.TextField,
|
|
62
|
+
__spreadProps(__spreadValues({
|
|
63
|
+
autoComplete: common.resolveAutoComplete(autoComplete)
|
|
64
|
+
}, rest), {
|
|
65
|
+
style: common.COMMON_STYLES
|
|
66
|
+
}),
|
|
67
|
+
({ isDisabled, isReadOnly }) => withObservedValues(
|
|
68
|
+
children,
|
|
69
|
+
{
|
|
70
|
+
disabled: isDisabled,
|
|
71
|
+
readonly: isReadOnly
|
|
72
|
+
},
|
|
73
|
+
plasmicUpdateVariant
|
|
74
|
+
)
|
|
75
|
+
))
|
|
76
|
+
);
|
|
72
77
|
}
|
|
73
78
|
const TEXT_FIELD_COMPONENT_NAME = utils.makeComponentName("textField");
|
|
74
79
|
function registerTextField(loader, overrides) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTextField.cjs.js","sources":["../src/registerTextField.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport type { InputProps, TextFieldProps } from \"react-aria-components\";\nimport { TextField } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst TEXT_FIELD_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseTextFieldProps\n extends Omit<TextFieldProps, \"autoComplete\">,\n WithVariants<typeof TEXT_FIELD_VARIANTS> {\n label?: ReactNode;\n description?: ReactNode;\n multiline?: boolean;\n inputProps?: InputProps;\n autoComplete?: string[];\n children: ReactNode;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TEXT_FIELD_VARIANTS);\n\nexport function BaseTextField(props: BaseTextFieldProps) {\n const { children, plasmicUpdateVariant, autoComplete, ...rest } = props;\n\n return (\n <PlasmicTextFieldContext.Provider value={props}>\n <TextField\n autoComplete={resolveAutoComplete(autoComplete)}\n {...rest}\n style={COMMON_STYLES}\n >\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n plasmicUpdateVariant\n )\n }\n </TextField>\n </PlasmicTextFieldContext.Provider>\n );\n}\n\nexport const TEXT_FIELD_COMPONENT_NAME = makeComponentName(\"textField\");\n\nexport function registerTextField(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTextField>\n) {\n registerComponentHelper(\n loader,\n BaseTextField,\n {\n name: TEXT_FIELD_COMPONENT_NAME,\n displayName: \"Aria TextField\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTextField\",\n importName: \"BaseTextField\",\n variants,\n // TODO: Support for validate prop\n props: {\n ...getCommonProps<BaseTextFieldProps>(\"Text Field\", [\n \"name\",\n \"isDisabled\",\n \"isReadOnly\",\n \"autoFocus\",\n \"aria-label\",\n \"isRequired\",\n \"value\",\n \"maxLength\",\n \"minLength\",\n \"pattern\",\n \"type\",\n \"inputMode\",\n \"validationBehavior\",\n \"autoComplete\",\n \"onChange\",\n \"onFocus\",\n \"onBlur\",\n \"onFocusChange\",\n \"onKeyDown\",\n \"onKeyUp\",\n \"onCopy\",\n \"onCut\",\n \"onPaste\",\n \"onCompositionStart\",\n \"onCompositionEnd\",\n \"onCompositionUpdate\",\n \"onSelect\",\n \"onBeforeInput\",\n \"onInput\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n gap: \"5px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Type something...\",\n },\n },\n },\n ],\n },\n },\n\n isInvalid: {\n // TODO: Not sure if needed\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n customValidationErrors: {\n // TODO: Not sure if needed\n type: \"array\",\n description: \"Errors for custom validation\",\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicTextFieldContext","TextField","resolveAutoComplete","COMMON_STYLES","makeComponentName","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","DESCRIPTION_COMPONENT_NAME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,mBAAA,GAAsB,CAAC,UAAA,EAAqB,UAAmB,CAAA,CAAA;AAarE,MAAM,EAAE,QAAA,EAAU,kBAAmB,EAAA,GACnCA,uCAA0B,mBAAmB,CAAA,CAAA;AAExC,SAAS,cAAc,KAA2B,EAAA;AACvD,EAAkE,MAAA,EAAA,GAAA,KAAA,EAA1D,EAAU,QAAA,EAAA,oBAAA,EAAsB,YAjC1C,EAAA,GAiCoE,IAAT,IAAS,GAAA,SAAA,CAAA,EAAA,EAAT,CAAjD,UAAA,EAAU,sBAAsB,EAAA,cAAA,CAAA,CAAA,CAAA;AAExC,EAAA,
|
|
1
|
+
{"version":3,"file":"registerTextField.cjs.js","sources":["../src/registerTextField.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport type { InputProps, TextFieldProps } from \"react-aria-components\";\nimport { TextField } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst TEXT_FIELD_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseTextFieldProps\n extends Omit<TextFieldProps, \"autoComplete\">,\n WithVariants<typeof TEXT_FIELD_VARIANTS> {\n label?: ReactNode;\n description?: ReactNode;\n multiline?: boolean;\n inputProps?: InputProps;\n autoComplete?: string[];\n children: ReactNode;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TEXT_FIELD_VARIANTS);\n\nexport function BaseTextField(props: BaseTextFieldProps) {\n const { children, plasmicUpdateVariant, autoComplete, ...rest } = props;\n\n return (\n // PlasmicTextFieldContext is used by\n // - BaseInput\n // - BaseTextArea\n <PlasmicTextFieldContext.Provider value={props}>\n <TextField\n autoComplete={resolveAutoComplete(autoComplete)}\n {...rest}\n style={COMMON_STYLES}\n >\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n plasmicUpdateVariant\n )\n }\n </TextField>\n </PlasmicTextFieldContext.Provider>\n );\n}\n\nexport const TEXT_FIELD_COMPONENT_NAME = makeComponentName(\"textField\");\n\nexport function registerTextField(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTextField>\n) {\n registerComponentHelper(\n loader,\n BaseTextField,\n {\n name: TEXT_FIELD_COMPONENT_NAME,\n displayName: \"Aria TextField\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTextField\",\n importName: \"BaseTextField\",\n variants,\n // TODO: Support for validate prop\n props: {\n ...getCommonProps<BaseTextFieldProps>(\"Text Field\", [\n \"name\",\n \"isDisabled\",\n \"isReadOnly\",\n \"autoFocus\",\n \"aria-label\",\n \"isRequired\",\n \"value\",\n \"maxLength\",\n \"minLength\",\n \"pattern\",\n \"type\",\n \"inputMode\",\n \"validationBehavior\",\n \"autoComplete\",\n \"onChange\",\n \"onFocus\",\n \"onBlur\",\n \"onFocusChange\",\n \"onKeyDown\",\n \"onKeyUp\",\n \"onCopy\",\n \"onCut\",\n \"onPaste\",\n \"onCompositionStart\",\n \"onCompositionEnd\",\n \"onCompositionUpdate\",\n \"onSelect\",\n \"onBeforeInput\",\n \"onInput\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n gap: \"5px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Type something...\",\n },\n },\n },\n ],\n },\n },\n\n isInvalid: {\n // TODO: Not sure if needed\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n customValidationErrors: {\n // TODO: Not sure if needed\n type: \"array\",\n description: \"Errors for custom validation\",\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","PlasmicTextFieldContext","TextField","resolveAutoComplete","COMMON_STYLES","makeComponentName","registerComponentHelper","getCommonProps","LABEL_COMPONENT_NAME","INPUT_COMPONENT_NAME","DESCRIPTION_COMPONENT_NAME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,mBAAA,GAAsB,CAAC,UAAA,EAAqB,UAAmB,CAAA,CAAA;AAarE,MAAM,EAAE,QAAA,EAAU,kBAAmB,EAAA,GACnCA,uCAA0B,mBAAmB,CAAA,CAAA;AAExC,SAAS,cAAc,KAA2B,EAAA;AACvD,EAAkE,MAAA,EAAA,GAAA,KAAA,EAA1D,EAAU,QAAA,EAAA,oBAAA,EAAsB,YAjC1C,EAAA,GAiCoE,IAAT,IAAS,GAAA,SAAA,CAAA,EAAA,EAAT,CAAjD,UAAA,EAAU,sBAAsB,EAAA,cAAA,CAAA,CAAA,CAAA;AAExC,EAAA;AAAA;AAAA;AAAA;AAAA,oBAIGC,sBAAA,CAAA,aAAA,CAAAC,gCAAA,CAAwB,QAAxB,EAAA,EAAiC,OAAO,KACvC,EAAA,kBAAAD,sBAAA,CAAA,aAAA;AAAA,MAACE,6BAAA;AAAA,MAAA,aAAA,CAAA,cAAA,CAAA;AAAA,QACC,YAAA,EAAcC,2BAAoB,YAAY,CAAA;AAAA,OAAA,EAC1C,IAFL,CAAA,EAAA;AAAA,QAGC,KAAO,EAAAC,oBAAA;AAAA,OAAA,CAAA;AAAA,MAEN,CAAC,EAAE,UAAY,EAAA,UAAA,EACd,KAAA,kBAAA;AAAA,QACE,QAAA;AAAA,QACA;AAAA,UACE,QAAU,EAAA,UAAA;AAAA,UACV,QAAU,EAAA,UAAA;AAAA,SACZ;AAAA,QACA,oBAAA;AAAA,OACF;AAAA,KAGN,CAAA;AAAA,IAAA;AAEJ,CAAA;AAEa,MAAA,yBAAA,GAA4BC,wBAAkB,WAAW,EAAA;AAEtD,SAAA,iBAAA,CACd,QACA,SACA,EAAA;AACA,EAAAC,6BAAA;AAAA,IACE,MAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,MACE,IAAM,EAAA,yBAAA;AAAA,MACN,WAAa,EAAA,gBAAA;AAAA,MACb,UAAY,EAAA,kDAAA;AAAA,MACZ,UAAY,EAAA,eAAA;AAAA,MACZ,QAAA;AAAA;AAAA,MAEA,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAAC,qBAAA,CAAmC,YAAc,EAAA;AAAA,QAClD,MAAA;AAAA,QACA,YAAA;AAAA,QACA,YAAA;AAAA,QACA,WAAA;AAAA,QACA,YAAA;AAAA,QACA,YAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,MAAA;AAAA,QACA,WAAA;AAAA,QACA,oBAAA;AAAA,QACA,cAAA;AAAA,QACA,UAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA,eAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,oBAAA;AAAA,QACA,kBAAA;AAAA,QACA,qBAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,SAAA;AAAA,OACD,CA/BI,CAAA,EAAA;AAAA,QAgCL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,eAAiB,EAAA,IAAA;AAAA,UACjB,YAAc,EAAA;AAAA,YACZ,IAAM,EAAA,MAAA;AAAA,YACN,MAAQ,EAAA;AAAA,cACN,cAAgB,EAAA,YAAA;AAAA,cAChB,UAAY,EAAA,YAAA;AAAA,cACZ,KAAO,EAAA,OAAA;AAAA,cACP,GAAK,EAAA,KAAA;AAAA,cACL,OAAS,EAAA,CAAA;AAAA,aACX;AAAA,YACA,QAAU,EAAA;AAAA,cACR;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAAC,kCAAA;AAAA,gBACN,KAAO,EAAA;AAAA,kBACL,QAAU,EAAA;AAAA,oBACR,IAAM,EAAA,MAAA;AAAA,oBACN,KAAO,EAAA,OAAA;AAAA,mBACT;AAAA,iBACF;AAAA,eACF;AAAA,cACA;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAAC,kCAAA;AAAA,gBACN,MAAQ,EAAA;AAAA,kBACN,KAAO,EAAA,MAAA;AAAA,iBACT;AAAA,eACF;AAAA,cACA;AAAA,gBACE,IAAM,EAAA,WAAA;AAAA,gBACN,IAAM,EAAAC,8CAAA;AAAA,gBACN,KAAO,EAAA;AAAA,kBACL,QAAU,EAAA;AAAA,oBACR,IAAM,EAAA,MAAA;AAAA,oBACN,KAAO,EAAA,mBAAA;AAAA,mBACT;AAAA,iBACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,QAEA,SAAW,EAAA;AAAA;AAAA,UAET,WAAa,EAAA,SAAA;AAAA,UACb,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,oCAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,SACpB;AAAA,QACA,sBAAwB,EAAA;AAAA;AAAA,UAEtB,IAAM,EAAA,OAAA;AAAA,UACN,WAAa,EAAA,8BAAA;AAAA,SACf;AAAA,OACF,CAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA;AAAA,UACL,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA,OAAA;AAAA,UACX,YAAc,EAAA,UAAA;AAAA,UACd,YAAc,EAAA,MAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;;"}
|
|
@@ -47,22 +47,27 @@ const TEXT_FIELD_VARIANTS = ["disabled", "readonly"];
|
|
|
47
47
|
const { variants, withObservedValues } = pickAriaComponentVariants(TEXT_FIELD_VARIANTS);
|
|
48
48
|
function BaseTextField(props) {
|
|
49
49
|
const _a = props, { children, plasmicUpdateVariant, autoComplete } = _a, rest = __objRest(_a, ["children", "plasmicUpdateVariant", "autoComplete"]);
|
|
50
|
-
return
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
50
|
+
return (
|
|
51
|
+
// PlasmicTextFieldContext is used by
|
|
52
|
+
// - BaseInput
|
|
53
|
+
// - BaseTextArea
|
|
54
|
+
/* @__PURE__ */ React.createElement(PlasmicTextFieldContext.Provider, { value: props }, /* @__PURE__ */ React.createElement(
|
|
55
|
+
TextField,
|
|
56
|
+
__spreadProps(__spreadValues({
|
|
57
|
+
autoComplete: resolveAutoComplete(autoComplete)
|
|
58
|
+
}, rest), {
|
|
59
|
+
style: COMMON_STYLES
|
|
60
|
+
}),
|
|
61
|
+
({ isDisabled, isReadOnly }) => withObservedValues(
|
|
62
|
+
children,
|
|
63
|
+
{
|
|
64
|
+
disabled: isDisabled,
|
|
65
|
+
readonly: isReadOnly
|
|
66
|
+
},
|
|
67
|
+
plasmicUpdateVariant
|
|
68
|
+
)
|
|
69
|
+
))
|
|
70
|
+
);
|
|
66
71
|
}
|
|
67
72
|
const TEXT_FIELD_COMPONENT_NAME = makeComponentName("textField");
|
|
68
73
|
function registerTextField(loader, overrides) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTextField.esm.js","sources":["../src/registerTextField.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport type { InputProps, TextFieldProps } from \"react-aria-components\";\nimport { TextField } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst TEXT_FIELD_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseTextFieldProps\n extends Omit<TextFieldProps, \"autoComplete\">,\n WithVariants<typeof TEXT_FIELD_VARIANTS> {\n label?: ReactNode;\n description?: ReactNode;\n multiline?: boolean;\n inputProps?: InputProps;\n autoComplete?: string[];\n children: ReactNode;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TEXT_FIELD_VARIANTS);\n\nexport function BaseTextField(props: BaseTextFieldProps) {\n const { children, plasmicUpdateVariant, autoComplete, ...rest } = props;\n\n return (\n <PlasmicTextFieldContext.Provider value={props}>\n <TextField\n autoComplete={resolveAutoComplete(autoComplete)}\n {...rest}\n style={COMMON_STYLES}\n >\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n plasmicUpdateVariant\n )\n }\n </TextField>\n </PlasmicTextFieldContext.Provider>\n );\n}\n\nexport const TEXT_FIELD_COMPONENT_NAME = makeComponentName(\"textField\");\n\nexport function registerTextField(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTextField>\n) {\n registerComponentHelper(\n loader,\n BaseTextField,\n {\n name: TEXT_FIELD_COMPONENT_NAME,\n displayName: \"Aria TextField\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTextField\",\n importName: \"BaseTextField\",\n variants,\n // TODO: Support for validate prop\n props: {\n ...getCommonProps<BaseTextFieldProps>(\"Text Field\", [\n \"name\",\n \"isDisabled\",\n \"isReadOnly\",\n \"autoFocus\",\n \"aria-label\",\n \"isRequired\",\n \"value\",\n \"maxLength\",\n \"minLength\",\n \"pattern\",\n \"type\",\n \"inputMode\",\n \"validationBehavior\",\n \"autoComplete\",\n \"onChange\",\n \"onFocus\",\n \"onBlur\",\n \"onFocusChange\",\n \"onKeyDown\",\n \"onKeyUp\",\n \"onCopy\",\n \"onCut\",\n \"onPaste\",\n \"onCompositionStart\",\n \"onCompositionEnd\",\n \"onCompositionUpdate\",\n \"onSelect\",\n \"onBeforeInput\",\n \"onInput\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n gap: \"5px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Type something...\",\n },\n },\n },\n ],\n },\n },\n\n isInvalid: {\n // TODO: Not sure if needed\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n customValidationErrors: {\n // TODO: Not sure if needed\n type: \"array\",\n description: \"Errors for custom validation\",\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,mBAAA,GAAsB,CAAC,UAAA,EAAqB,UAAmB,CAAA,CAAA;AAarE,MAAM,EAAE,QAAA,EAAU,kBAAmB,EAAA,GACnC,0BAA0B,mBAAmB,CAAA,CAAA;AAExC,SAAS,cAAc,KAA2B,EAAA;AACvD,EAAkE,MAAA,EAAA,GAAA,KAAA,EAA1D,EAAU,QAAA,EAAA,oBAAA,EAAsB,YAjC1C,EAAA,GAiCoE,IAAT,IAAS,GAAA,SAAA,CAAA,EAAA,EAAT,CAAjD,UAAA,EAAU,sBAAsB,EAAA,cAAA,CAAA,CAAA,CAAA;AAExC,EAAA,
|
|
1
|
+
{"version":3,"file":"registerTextField.esm.js","sources":["../src/registerTextField.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport type { InputProps, TextFieldProps } from \"react-aria-components\";\nimport { TextField } from \"react-aria-components\";\nimport { COMMON_STYLES, getCommonProps, resolveAutoComplete } from \"./common\";\nimport { PlasmicTextFieldContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { INPUT_COMPONENT_NAME } from \"./registerInput\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n makeComponentName,\n registerComponentHelper,\n} from \"./utils\";\nimport { WithVariants, pickAriaComponentVariants } from \"./variant-utils\";\n\nconst TEXT_FIELD_VARIANTS = [\"disabled\" as const, \"readonly\" as const];\n\nexport interface BaseTextFieldProps\n extends Omit<TextFieldProps, \"autoComplete\">,\n WithVariants<typeof TEXT_FIELD_VARIANTS> {\n label?: ReactNode;\n description?: ReactNode;\n multiline?: boolean;\n inputProps?: InputProps;\n autoComplete?: string[];\n children: ReactNode;\n}\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TEXT_FIELD_VARIANTS);\n\nexport function BaseTextField(props: BaseTextFieldProps) {\n const { children, plasmicUpdateVariant, autoComplete, ...rest } = props;\n\n return (\n // PlasmicTextFieldContext is used by\n // - BaseInput\n // - BaseTextArea\n <PlasmicTextFieldContext.Provider value={props}>\n <TextField\n autoComplete={resolveAutoComplete(autoComplete)}\n {...rest}\n style={COMMON_STYLES}\n >\n {({ isDisabled, isReadOnly }) =>\n withObservedValues(\n children,\n {\n disabled: isDisabled,\n readonly: isReadOnly,\n },\n plasmicUpdateVariant\n )\n }\n </TextField>\n </PlasmicTextFieldContext.Provider>\n );\n}\n\nexport const TEXT_FIELD_COMPONENT_NAME = makeComponentName(\"textField\");\n\nexport function registerTextField(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTextField>\n) {\n registerComponentHelper(\n loader,\n BaseTextField,\n {\n name: TEXT_FIELD_COMPONENT_NAME,\n displayName: \"Aria TextField\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTextField\",\n importName: \"BaseTextField\",\n variants,\n // TODO: Support for validate prop\n props: {\n ...getCommonProps<BaseTextFieldProps>(\"Text Field\", [\n \"name\",\n \"isDisabled\",\n \"isReadOnly\",\n \"autoFocus\",\n \"aria-label\",\n \"isRequired\",\n \"value\",\n \"maxLength\",\n \"minLength\",\n \"pattern\",\n \"type\",\n \"inputMode\",\n \"validationBehavior\",\n \"autoComplete\",\n \"onChange\",\n \"onFocus\",\n \"onBlur\",\n \"onFocusChange\",\n \"onKeyDown\",\n \"onKeyUp\",\n \"onCopy\",\n \"onCut\",\n \"onPaste\",\n \"onCompositionStart\",\n \"onCompositionEnd\",\n \"onCompositionUpdate\",\n \"onSelect\",\n \"onBeforeInput\",\n \"onInput\",\n ]),\n children: {\n type: \"slot\",\n mergeWithParent: true,\n defaultValue: {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\n gap: \"5px\",\n padding: 0,\n },\n children: [\n {\n type: \"component\",\n name: LABEL_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Label\",\n },\n },\n },\n {\n type: \"component\",\n name: INPUT_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n value: \"Type something...\",\n },\n },\n },\n ],\n },\n },\n\n isInvalid: {\n // TODO: Not sure if needed\n displayName: \"Invalid\",\n type: \"boolean\",\n description: \"Whether the input value is invalid\",\n defaultValueHint: false,\n },\n customValidationErrors: {\n // TODO: Not sure if needed\n type: \"array\",\n description: \"Errors for custom validation\",\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -109,42 +109,45 @@ function ControlledBaseTooltip(props) {
|
|
|
109
109
|
isOpen: isCanvasAwareOpen,
|
|
110
110
|
trigger: trigger === "focus" ? trigger : void 0
|
|
111
111
|
}));
|
|
112
|
-
return
|
|
113
|
-
|
|
114
|
-
{
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
id: tooltipId,
|
|
128
|
-
offset,
|
|
129
|
-
delay,
|
|
130
|
-
closeDelay,
|
|
131
|
-
crossOffset,
|
|
132
|
-
shouldFlip,
|
|
133
|
-
className: resetClassName,
|
|
134
|
-
onOpenChange,
|
|
135
|
-
placement
|
|
136
|
-
},
|
|
137
|
-
({ placement: _placement }) => withObservedValues(
|
|
138
|
-
/* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, tooltipContent),
|
|
112
|
+
return (
|
|
113
|
+
// TooltipTriggerStateContext used by BaseOverlayArrow
|
|
114
|
+
/* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Provider, { values: [[reactAriaComponents.TooltipTriggerStateContext, state]] }, /* @__PURE__ */ React__default.default.createElement(
|
|
115
|
+
TriggerWrapper,
|
|
116
|
+
{
|
|
117
|
+
ref,
|
|
118
|
+
className,
|
|
119
|
+
tooltipId: state.isOpen ? tooltipId : void 0,
|
|
120
|
+
isDisabled,
|
|
121
|
+
onOpenChange,
|
|
122
|
+
triggerOnFocusOnly: trigger === "focus"
|
|
123
|
+
},
|
|
124
|
+
children
|
|
125
|
+
), /* @__PURE__ */ React__default.default.createElement(
|
|
126
|
+
reactAriaComponents.Tooltip,
|
|
139
127
|
{
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
128
|
+
triggerRef: ref,
|
|
129
|
+
id: tooltipId,
|
|
130
|
+
offset,
|
|
131
|
+
delay,
|
|
132
|
+
closeDelay,
|
|
133
|
+
crossOffset,
|
|
134
|
+
shouldFlip,
|
|
135
|
+
className: resetClassName,
|
|
136
|
+
onOpenChange,
|
|
137
|
+
placement
|
|
144
138
|
},
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
139
|
+
({ placement: _placement }) => withObservedValues(
|
|
140
|
+
/* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, tooltipContent),
|
|
141
|
+
{
|
|
142
|
+
placementTop: _placement === "top",
|
|
143
|
+
placementBottom: _placement === "bottom",
|
|
144
|
+
placementLeft: _placement === "left",
|
|
145
|
+
placementRight: _placement === "right"
|
|
146
|
+
},
|
|
147
|
+
plasmicUpdateVariant
|
|
148
|
+
)
|
|
149
|
+
))
|
|
150
|
+
);
|
|
148
151
|
}
|
|
149
152
|
const TriggerWrapper = React__default.default.forwardRef(
|
|
150
153
|
function TriggerWrapper_({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import React, { useCallback, useId, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover } from \"react-aria\";\nimport {\n Provider,\n Tooltip,\n TooltipProps,\n TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n registerComponentHelper,\n useIsOpen,\n WithPlasmicCanvasComponentInfo,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\n// NOTE: Placement should be managed as variants, not just props.\n// When `shouldFlip` is true, the placement prop may not represent the final position\n// (e.g., if placement is set to \"bottom\" but lacks space, the tooltip may flip to \"top\").\n// However, data-selectors will consistently indicate the actual placement of the tooltip.\nconst TOOLTIP_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TOOLTIP_VARIANTS);\n\nexport interface BaseTooltipProps\n extends Omit<TooltipTriggerProps, \"trigger\">,\n TooltipProps,\n WithPlasmicCanvasComponentInfo,\n WithVariants<typeof TOOLTIP_VARIANTS> {\n children: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n trigger?: \"focus\" | \"focus and hover\" | undefined;\n className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n if (props.isOpen !== undefined) {\n return <ControlledBaseTooltip {...props} />;\n } else {\n return <UncontrolledBaseTooltip {...props} />;\n }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n const [open, setOpen] = useState(props.defaultOpen ?? false);\n const onOpenChangeMerged = useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n return (\n <ControlledBaseTooltip\n {...props}\n isOpen={open}\n onOpenChange={onOpenChangeMerged}\n />\n );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled = false,\n delay,\n closeDelay,\n trigger,\n isOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n className,\n onOpenChange = () => {},\n plasmicUpdateVariant,\n __plasmic_selection_prop__,\n } = props;\n\n const isCanvasAwareOpen = useIsOpen({\n triggerSlotName: \"children\",\n isOpen,\n __plasmic_selection_prop__,\n });\n\n // The following is a custom implementation of the <TooltipTrigger /> component.\n // The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n // However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n // However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n // Consequently, onOpenChange is called twice.\n //\n // This implementation is adapted from:\n // https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n // The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n const ref = useRef<any>(null);\n const tooltipId = useId();\n\n const state = useTooltipTriggerState({\n ...props,\n isOpen: isCanvasAwareOpen,\n trigger: trigger === \"focus\" ? trigger : undefined,\n });\n\n return (\n <Provider values={[[TooltipTriggerStateContext, state]]}>\n <TriggerWrapper\n ref={ref}\n className={className}\n tooltipId={state.isOpen ? tooltipId : undefined}\n isDisabled={isDisabled}\n onOpenChange={onOpenChange}\n triggerOnFocusOnly={trigger === \"focus\"}\n >\n {children}\n </TriggerWrapper>\n <Tooltip\n triggerRef={ref}\n // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n id={tooltipId}\n offset={offset}\n delay={delay}\n closeDelay={closeDelay}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n className={resetClassName}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {({ placement: _placement }) =>\n withObservedValues(\n <>{tooltipContent}</>,\n {\n placementTop: _placement === \"top\",\n placementBottom: _placement === \"bottom\",\n placementLeft: _placement === \"left\",\n placementRight: _placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Tooltip>\n </Provider>\n );\n}\n\ninterface TriggerWrapperProps {\n children: React.ReactElement;\n onOpenChange: (isOpen: boolean) => void;\n isDisabled: boolean;\n triggerOnFocusOnly: boolean;\n tooltipId?: string;\n className?: string;\n}\n\n// React Aria's TooltipTrigger requires a focusable element with ref.\n// To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n// https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n// (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n//\n// Discussion (React-aria-components TooltipTrigger with custom button):\n// https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n function TriggerWrapper_(\n {\n children,\n onOpenChange,\n isDisabled,\n triggerOnFocusOnly,\n tooltipId,\n className,\n },\n ref: React.Ref<HTMLDivElement>\n ) {\n const { hoverProps } = useHover({\n isDisabled,\n onHoverStart: () => !triggerOnFocusOnly && onOpenChange(true),\n onHoverEnd: () => !triggerOnFocusOnly && onOpenChange(false),\n });\n\n // useFocusWithin captures focus events for all nested focusable elements\n const { focusWithinProps } = useFocusWithin({\n isDisabled,\n onFocusWithin: () => {\n onOpenChange(true);\n },\n onBlurWithin: () => {\n onOpenChange(false);\n },\n });\n\n const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n \"aria-describedby\": tooltipId,\n // We expose className to allow user control over the wrapper div's styling.\n className,\n ref,\n style: COMMON_STYLES,\n });\n\n return <div {...mergedProps}>{children}</div>;\n }\n);\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n variants,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n background: \"black\",\n color: \"white\",\n padding: \"7px\",\n borderRadius: \"7px\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n placement: { defaultValueHint: \"top\" },\n offset: { defaultValueHint: 0 },\n containerPadding: { defaultValueHint: 12 },\n crossOffset: { defaultValueHint: 0 },\n }),\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","_a","useState","useCallback","useIsOpen","useRef","useId","useTooltipTriggerState","Provider","TooltipTriggerStateContext","Tooltip","useHover","useFocusWithin","mergeProps","COMMON_STYLES","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerTooltip.cjs.js","sources":["../src/registerTooltip.tsx"],"sourcesContent":["import React, { useCallback, useId, useRef, useState } from \"react\";\nimport { mergeProps, useFocusWithin, useHover } from \"react-aria\";\nimport {\n Provider,\n Tooltip,\n TooltipProps,\n TooltipTriggerStateContext,\n} from \"react-aria-components\";\nimport { TooltipTriggerProps, useTooltipTriggerState } from \"react-stately\";\nimport { COMMON_STYLES, getCommonOverlayProps } from \"./common\";\nimport {\n CodeComponentMetaOverrides,\n Registerable,\n registerComponentHelper,\n useIsOpen,\n WithPlasmicCanvasComponentInfo,\n} from \"./utils\";\nimport { pickAriaComponentVariants, WithVariants } from \"./variant-utils\";\n\n// NOTE: Placement should be managed as variants, not just props.\n// When `shouldFlip` is true, the placement prop may not represent the final position\n// (e.g., if placement is set to \"bottom\" but lacks space, the tooltip may flip to \"top\").\n// However, data-selectors will consistently indicate the actual placement of the tooltip.\nconst TOOLTIP_VARIANTS = [\n \"placementTop\" as const,\n \"placementBottom\" as const,\n \"placementLeft\" as const,\n \"placementRight\" as const,\n];\n\nconst { variants, withObservedValues } =\n pickAriaComponentVariants(TOOLTIP_VARIANTS);\n\nexport interface BaseTooltipProps\n extends Omit<TooltipTriggerProps, \"trigger\">,\n TooltipProps,\n WithPlasmicCanvasComponentInfo,\n WithVariants<typeof TOOLTIP_VARIANTS> {\n children: React.ReactElement<HTMLElement>;\n tooltipContent?: React.ReactElement;\n resetClassName?: string;\n trigger?: \"focus\" | \"focus and hover\" | undefined;\n className?: string;\n}\n\n// In Studio, the tooltip is always controlled because isOpen is attached to the code component's state.\n// In Codegen, the user decides whether the tooltip is controlled or not. So we need to handle both cases.\nexport function BaseTooltip(props: BaseTooltipProps) {\n if (props.isOpen !== undefined) {\n return <ControlledBaseTooltip {...props} />;\n } else {\n return <UncontrolledBaseTooltip {...props} />;\n }\n}\n\nfunction UncontrolledBaseTooltip({ onOpenChange, ...props }: BaseTooltipProps) {\n const [open, setOpen] = useState(props.defaultOpen ?? false);\n const onOpenChangeMerged = useCallback(\n (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange]\n );\n return (\n <ControlledBaseTooltip\n {...props}\n isOpen={open}\n onOpenChange={onOpenChangeMerged}\n />\n );\n}\n\nfunction ControlledBaseTooltip(props: BaseTooltipProps) {\n const {\n children,\n isDisabled = false,\n delay,\n closeDelay,\n trigger,\n isOpen,\n tooltipContent,\n resetClassName,\n placement,\n offset,\n crossOffset,\n shouldFlip,\n className,\n onOpenChange = () => {},\n plasmicUpdateVariant,\n __plasmic_selection_prop__,\n } = props;\n\n const isCanvasAwareOpen = useIsOpen({\n triggerSlotName: \"children\",\n isOpen,\n __plasmic_selection_prop__,\n });\n\n // The following is a custom implementation of the <TooltipTrigger /> component.\n // The default <TooltipTrigger /> from react-aria-components automatically manages state changes when a useFocusable element (e.g., an Aria Button) is clicked.\n // However, in our custom trigger, <TriggerWrapper>, we use useFocusWithin to explicitly handle state changes, allowing any element—not just an Aria Button—to act as a trigger.\n // However, this results in duplicate state updates when using an Aria Button, as state changes are triggered both by useFocusWithin and useFocusable.\n // Consequently, onOpenChange is called twice.\n //\n // This implementation is adapted from:\n // https://github.com/adobe/react-spectrum/blob/988096cf3f1dbd59f274d8c552e9fe7d5dcf4f41/packages/react-aria-components/src/Tooltip.tsx#L89\n // The <FocusableProvider> has been removed, as it handles automatic state updates for the Aria Button.\n const ref = useRef<any>(null);\n const tooltipId = useId();\n\n const state = useTooltipTriggerState({\n ...props,\n isOpen: isCanvasAwareOpen,\n trigger: trigger === \"focus\" ? trigger : undefined,\n });\n\n return (\n // TooltipTriggerStateContext used by BaseOverlayArrow\n <Provider values={[[TooltipTriggerStateContext, state]]}>\n <TriggerWrapper\n ref={ref}\n className={className}\n tooltipId={state.isOpen ? tooltipId : undefined}\n isDisabled={isDisabled}\n onOpenChange={onOpenChange}\n triggerOnFocusOnly={trigger === \"focus\"}\n >\n {children}\n </TriggerWrapper>\n <Tooltip\n triggerRef={ref}\n // @ts-expect-error <Tooltip> is wrongly typed to not have id prop\n id={tooltipId}\n offset={offset}\n delay={delay}\n closeDelay={closeDelay}\n crossOffset={crossOffset}\n shouldFlip={shouldFlip}\n className={resetClassName}\n onOpenChange={onOpenChange}\n placement={placement}\n >\n {({ placement: _placement }) =>\n withObservedValues(\n <>{tooltipContent}</>,\n {\n placementTop: _placement === \"top\",\n placementBottom: _placement === \"bottom\",\n placementLeft: _placement === \"left\",\n placementRight: _placement === \"right\",\n },\n plasmicUpdateVariant\n )\n }\n </Tooltip>\n </Provider>\n );\n}\n\ninterface TriggerWrapperProps {\n children: React.ReactElement;\n onOpenChange: (isOpen: boolean) => void;\n isDisabled: boolean;\n triggerOnFocusOnly: boolean;\n tooltipId?: string;\n className?: string;\n}\n\n// React Aria's TooltipTrigger requires a focusable element with ref.\n// To make sure that this requirement is fulfilled, wrap everything in a focusable div.\n// https://react-spectrum.adobe.com/react-aria/Tooltip.html#example\n// (In the example, Aria Button works as a trigger because it uses useFocusable behind the scenes)\n//\n// Discussion (React-aria-components TooltipTrigger with custom button):\n// https://github.com/adobe/react-spectrum/discussions/5119#discussioncomment-7084661\nconst TriggerWrapper = React.forwardRef<HTMLDivElement, TriggerWrapperProps>(\n function TriggerWrapper_(\n {\n children,\n onOpenChange,\n isDisabled,\n triggerOnFocusOnly,\n tooltipId,\n className,\n },\n ref: React.Ref<HTMLDivElement>\n ) {\n const { hoverProps } = useHover({\n isDisabled,\n onHoverStart: () => !triggerOnFocusOnly && onOpenChange(true),\n onHoverEnd: () => !triggerOnFocusOnly && onOpenChange(false),\n });\n\n // useFocusWithin captures focus events for all nested focusable elements\n const { focusWithinProps } = useFocusWithin({\n isDisabled,\n onFocusWithin: () => {\n onOpenChange(true);\n },\n onBlurWithin: () => {\n onOpenChange(false);\n },\n });\n\n const mergedProps = mergeProps(hoverProps, focusWithinProps, {\n \"aria-describedby\": tooltipId,\n // We expose className to allow user control over the wrapper div's styling.\n className,\n ref,\n style: COMMON_STYLES,\n });\n\n return <div {...mergedProps}>{children}</div>;\n }\n);\n\nexport function registerTooltip(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseTooltip>\n) {\n registerComponentHelper(\n loader,\n BaseTooltip,\n {\n name: \"plasmic-react-aria-tooltip\",\n displayName: \"Aria Tooltip\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerTooltip\",\n importName: \"BaseTooltip\",\n isAttachment: true,\n variants,\n props: {\n children: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Trigger\",\n defaultValue: {\n type: \"text\",\n value: \"Hover me!\",\n styles: {\n width: \"hug\",\n },\n },\n },\n tooltipContent: {\n type: \"slot\",\n mergeWithParent: true,\n displayName: \"Tooltip Content\",\n // NOTE: This is not applied in attachment\n defaultValue: {\n type: \"text\",\n value: \"Hello from Tooltip!\",\n styles: {\n background: \"black\",\n color: \"white\",\n padding: \"7px\",\n borderRadius: \"7px\",\n },\n },\n },\n resetClassName: {\n type: \"themeResetClass\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n delay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t opening due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description:\n \"The delay (in milliseconds) for the tooltip to show up.\",\n },\n closeDelay: {\n type: \"number\",\n // Default value is explicitly set to 0 to prevent users from mistakenly thinking the tooltip isn’t closing due to a delay.\n defaultValue: 0,\n defaultValueHint: 0,\n description: \"The delay (in milliseconds) for the tooltip to close.\",\n },\n trigger: {\n type: \"choice\",\n options: [\"focus\", \"focus and hover\"],\n defaultValueHint: \"focus and hover\",\n },\n ...getCommonOverlayProps<BaseTooltipProps>(\"popover\", {\n placement: { defaultValueHint: \"top\" },\n offset: { defaultValueHint: 0 },\n containerPadding: { defaultValueHint: 12 },\n crossOffset: { defaultValueHint: 0 },\n }),\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n description: \"Whether the overlay is open by default\",\n defaultValueHint: false,\n hidden: () => true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n },\n states: {\n isOpen: {\n type: \"writable\",\n valueProp: \"isOpen\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["pickAriaComponentVariants","React","_a","useState","useCallback","useIsOpen","useRef","useId","useTooltipTriggerState","Provider","TooltipTriggerStateContext","Tooltip","useHover","useFocusWithin","mergeProps","COMMON_STYLES","registerComponentHelper","getCommonOverlayProps"],"mappings":"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"}
|
|
@@ -103,42 +103,45 @@ function ControlledBaseTooltip(props) {
|
|
|
103
103
|
isOpen: isCanvasAwareOpen,
|
|
104
104
|
trigger: trigger === "focus" ? trigger : void 0
|
|
105
105
|
}));
|
|
106
|
-
return
|
|
107
|
-
|
|
108
|
-
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
id: tooltipId,
|
|
122
|
-
offset,
|
|
123
|
-
delay,
|
|
124
|
-
closeDelay,
|
|
125
|
-
crossOffset,
|
|
126
|
-
shouldFlip,
|
|
127
|
-
className: resetClassName,
|
|
128
|
-
onOpenChange,
|
|
129
|
-
placement
|
|
130
|
-
},
|
|
131
|
-
({ placement: _placement }) => withObservedValues(
|
|
132
|
-
/* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
|
|
106
|
+
return (
|
|
107
|
+
// TooltipTriggerStateContext used by BaseOverlayArrow
|
|
108
|
+
/* @__PURE__ */ React.createElement(Provider, { values: [[TooltipTriggerStateContext, state]] }, /* @__PURE__ */ React.createElement(
|
|
109
|
+
TriggerWrapper,
|
|
110
|
+
{
|
|
111
|
+
ref,
|
|
112
|
+
className,
|
|
113
|
+
tooltipId: state.isOpen ? tooltipId : void 0,
|
|
114
|
+
isDisabled,
|
|
115
|
+
onOpenChange,
|
|
116
|
+
triggerOnFocusOnly: trigger === "focus"
|
|
117
|
+
},
|
|
118
|
+
children
|
|
119
|
+
), /* @__PURE__ */ React.createElement(
|
|
120
|
+
Tooltip,
|
|
133
121
|
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
122
|
+
triggerRef: ref,
|
|
123
|
+
id: tooltipId,
|
|
124
|
+
offset,
|
|
125
|
+
delay,
|
|
126
|
+
closeDelay,
|
|
127
|
+
crossOffset,
|
|
128
|
+
shouldFlip,
|
|
129
|
+
className: resetClassName,
|
|
130
|
+
onOpenChange,
|
|
131
|
+
placement
|
|
138
132
|
},
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
133
|
+
({ placement: _placement }) => withObservedValues(
|
|
134
|
+
/* @__PURE__ */ React.createElement(React.Fragment, null, tooltipContent),
|
|
135
|
+
{
|
|
136
|
+
placementTop: _placement === "top",
|
|
137
|
+
placementBottom: _placement === "bottom",
|
|
138
|
+
placementLeft: _placement === "left",
|
|
139
|
+
placementRight: _placement === "right"
|
|
140
|
+
},
|
|
141
|
+
plasmicUpdateVariant
|
|
142
|
+
)
|
|
143
|
+
))
|
|
144
|
+
);
|
|
142
145
|
}
|
|
143
146
|
const TriggerWrapper = React.forwardRef(
|
|
144
147
|
function TriggerWrapper_({
|