@plasmicpkgs/react-aria 0.0.28 → 0.0.30
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 +4 -0
- package/dist/interaction-variant-utils.d.ts +4 -0
- package/dist/react-aria.esm.js +2494 -1120
- package/dist/react-aria.esm.js.map +1 -1
- package/dist/react-aria.js +2491 -1117
- package/dist/react-aria.js.map +1 -1
- package/dist/registerButton.d.ts +1 -0
- package/dist/registerCheckbox.d.ts +8 -2
- package/dist/registerCheckboxGroup.d.ts +2 -2
- package/dist/registerDescription.d.ts +2 -1
- package/dist/registerDialogTrigger.d.ts +1 -2
- package/dist/registerHeader.d.ts +1 -1
- package/dist/registerInput.d.ts +1 -0
- package/dist/registerLabel.d.ts +1 -0
- package/dist/registerListBox.d.ts +3 -6
- package/dist/registerListBoxItem.d.ts +3 -1
- package/dist/registerModal.d.ts +3 -1
- package/dist/registerPopover.d.ts +3 -0
- package/dist/registerRadio.d.ts +5 -2
- package/dist/registerRadioGroup.d.ts +3 -3
- package/dist/registerSection.d.ts +1 -1
- package/dist/registerSelect.d.ts +5 -2
- package/dist/registerSlider.d.ts +14 -0
- package/dist/registerSliderOutput.d.ts +5 -0
- package/dist/registerSliderThumb.d.ts +13 -0
- package/dist/registerSliderTrack.d.ts +14 -0
- package/dist/registerText.d.ts +2 -1
- package/dist/registerTextField.d.ts +1 -0
- package/dist/utils.d.ts +9 -2
- package/package.json +2 -2
- package/skinny/ErrorBoundary-c6b111d3.esm.js +20 -0
- package/skinny/ErrorBoundary-c6b111d3.esm.js.map +1 -0
- package/skinny/ErrorBoundary-e9b86248.cjs.js +22 -0
- package/skinny/ErrorBoundary-e9b86248.cjs.js.map +1 -0
- package/skinny/contexts-9475faad.esm.js +16 -0
- package/skinny/contexts-9475faad.esm.js.map +1 -0
- package/skinny/{contexts-3e42cdf9.cjs.js → contexts-b21f6b12.cjs.js} +9 -1
- package/skinny/contexts-b21f6b12.cjs.js.map +1 -0
- package/skinny/contexts.d.ts +4 -0
- package/skinny/{interaction-variant-utils-0f05190f.cjs.js → interaction-variant-utils-244b74fb.cjs.js} +5 -1
- package/skinny/interaction-variant-utils-244b74fb.cjs.js.map +1 -0
- package/skinny/{interaction-variant-utils-909267e5.esm.js → interaction-variant-utils-c44a9d56.esm.js} +5 -1
- package/skinny/interaction-variant-utils-c44a9d56.esm.js.map +1 -0
- package/skinny/interaction-variant-utils.d.ts +4 -0
- package/skinny/registerButton.cjs.js +20 -5
- package/skinny/registerButton.cjs.js.map +1 -1
- package/skinny/registerButton.d.ts +1 -0
- package/skinny/registerButton.esm.js +20 -6
- package/skinny/registerButton.esm.js.map +1 -1
- package/skinny/registerCheckbox.cjs.js +76 -7
- package/skinny/registerCheckbox.cjs.js.map +1 -1
- package/skinny/registerCheckbox.d.ts +8 -2
- package/skinny/registerCheckbox.esm.js +76 -8
- package/skinny/registerCheckbox.esm.js.map +1 -1
- package/skinny/registerCheckboxGroup.cjs.js +90 -14
- package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
- package/skinny/registerCheckboxGroup.d.ts +2 -2
- package/skinny/registerCheckboxGroup.esm.js +89 -17
- package/skinny/registerCheckboxGroup.esm.js.map +1 -1
- package/skinny/registerComboBox.cjs.js +113 -8
- package/skinny/registerComboBox.cjs.js.map +1 -1
- package/skinny/registerComboBox.esm.js +109 -4
- package/skinny/registerComboBox.esm.js.map +1 -1
- package/skinny/registerDescription.cjs.js +10 -3
- package/skinny/registerDescription.cjs.js.map +1 -1
- package/skinny/registerDescription.d.ts +2 -1
- package/skinny/registerDescription.esm.js +10 -4
- package/skinny/registerDescription.esm.js.map +1 -1
- package/skinny/registerDialogTrigger.cjs.js +25 -4
- package/skinny/registerDialogTrigger.cjs.js.map +1 -1
- package/skinny/registerDialogTrigger.d.ts +1 -2
- package/skinny/registerDialogTrigger.esm.js +25 -4
- package/skinny/registerDialogTrigger.esm.js.map +1 -1
- package/skinny/registerFieldError.cjs.js +21 -11
- package/skinny/registerFieldError.cjs.js.map +1 -1
- package/skinny/registerFieldError.esm.js +21 -11
- package/skinny/registerFieldError.esm.js.map +1 -1
- package/skinny/registerForm.cjs.js +1 -1
- package/skinny/registerForm.esm.js +1 -1
- package/skinny/registerHeader.cjs.js +7 -3
- package/skinny/registerHeader.cjs.js.map +1 -1
- package/skinny/registerHeader.d.ts +1 -1
- package/skinny/registerHeader.esm.js +7 -3
- package/skinny/registerHeader.esm.js.map +1 -1
- package/skinny/registerInput.cjs.js +12 -3
- package/skinny/registerInput.cjs.js.map +1 -1
- package/skinny/registerInput.d.ts +1 -0
- package/skinny/registerInput.esm.js +12 -4
- package/skinny/registerInput.esm.js.map +1 -1
- package/skinny/registerLabel.cjs.js +7 -2
- package/skinny/registerLabel.cjs.js.map +1 -1
- package/skinny/registerLabel.d.ts +1 -0
- package/skinny/registerLabel.esm.js +7 -3
- package/skinny/registerLabel.esm.js.map +1 -1
- package/skinny/registerListBox-1effa43d.esm.js +299 -0
- package/skinny/registerListBox-1effa43d.esm.js.map +1 -0
- package/skinny/registerListBox-837b90d8.cjs.js +311 -0
- package/skinny/registerListBox-837b90d8.cjs.js.map +1 -0
- package/skinny/registerListBox.cjs.js +14 -108
- package/skinny/registerListBox.cjs.js.map +1 -1
- package/skinny/registerListBox.d.ts +3 -6
- package/skinny/registerListBox.esm.js +11 -106
- package/skinny/registerListBox.esm.js.map +1 -1
- package/skinny/registerListBoxItem.cjs.js +49 -5
- package/skinny/registerListBoxItem.cjs.js.map +1 -1
- package/skinny/registerListBoxItem.d.ts +3 -1
- package/skinny/registerListBoxItem.esm.js +49 -6
- package/skinny/registerListBoxItem.esm.js.map +1 -1
- package/skinny/registerModal.cjs.js +78 -9
- package/skinny/registerModal.cjs.js.map +1 -1
- package/skinny/registerModal.d.ts +3 -1
- package/skinny/registerModal.esm.js +78 -10
- package/skinny/registerModal.esm.js.map +1 -1
- package/skinny/registerPopover.cjs.js +56 -4
- package/skinny/registerPopover.cjs.js.map +1 -1
- package/skinny/registerPopover.d.ts +3 -0
- package/skinny/registerPopover.esm.js +55 -5
- package/skinny/registerPopover.esm.js.map +1 -1
- package/skinny/registerRadio.cjs.js +54 -24
- package/skinny/registerRadio.cjs.js.map +1 -1
- package/skinny/registerRadio.d.ts +5 -2
- package/skinny/registerRadio.esm.js +54 -25
- package/skinny/registerRadio.esm.js.map +1 -1
- package/skinny/registerRadioGroup.cjs.js +82 -17
- package/skinny/registerRadioGroup.cjs.js.map +1 -1
- package/skinny/registerRadioGroup.d.ts +3 -3
- package/skinny/registerRadioGroup.esm.js +81 -20
- package/skinny/registerRadioGroup.esm.js.map +1 -1
- package/skinny/registerSection.cjs.js +36 -12
- package/skinny/registerSection.cjs.js.map +1 -1
- package/skinny/registerSection.d.ts +1 -1
- package/skinny/registerSection.esm.js +36 -12
- package/skinny/registerSection.esm.js.map +1 -1
- package/skinny/registerSelect.cjs.js +133 -30
- package/skinny/registerSelect.cjs.js.map +1 -1
- package/skinny/registerSelect.d.ts +5 -2
- package/skinny/registerSelect.esm.js +130 -25
- package/skinny/registerSelect.esm.js.map +1 -1
- package/skinny/registerSlider-39783c91.esm.js +425 -0
- package/skinny/registerSlider-39783c91.esm.js.map +1 -0
- package/skinny/registerSlider-ac9f3b1e.cjs.js +437 -0
- package/skinny/registerSlider-ac9f3b1e.cjs.js.map +1 -0
- package/skinny/registerSlider.cjs.js +23 -0
- package/skinny/registerSlider.cjs.js.map +1 -0
- package/skinny/registerSlider.d.ts +14 -0
- package/skinny/registerSlider.esm.js +15 -0
- package/skinny/registerSlider.esm.js.map +1 -0
- package/skinny/registerSliderOutput.cjs.js +30 -0
- package/skinny/registerSliderOutput.cjs.js.map +1 -0
- package/skinny/registerSliderOutput.d.ts +5 -0
- package/skinny/registerSliderOutput.esm.js +26 -0
- package/skinny/registerSliderOutput.esm.js.map +1 -0
- package/skinny/registerSliderThumb.cjs.js +119 -0
- package/skinny/registerSliderThumb.cjs.js.map +1 -0
- package/skinny/registerSliderThumb.d.ts +13 -0
- package/skinny/registerSliderThumb.esm.js +111 -0
- package/skinny/registerSliderThumb.esm.js.map +1 -0
- package/skinny/registerSliderTrack.cjs.js +23 -0
- package/skinny/registerSliderTrack.cjs.js.map +1 -0
- package/skinny/registerSliderTrack.d.ts +14 -0
- package/skinny/registerSliderTrack.esm.js +15 -0
- package/skinny/registerSliderTrack.esm.js.map +1 -0
- package/skinny/registerSwitch.cjs.js +84 -4
- package/skinny/registerSwitch.cjs.js.map +1 -1
- package/skinny/registerSwitch.esm.js +84 -4
- package/skinny/registerSwitch.esm.js.map +1 -1
- package/skinny/registerText.cjs.js +11 -4
- package/skinny/registerText.cjs.js.map +1 -1
- package/skinny/registerText.d.ts +2 -1
- package/skinny/registerText.esm.js +11 -5
- package/skinny/registerText.esm.js.map +1 -1
- package/skinny/registerTextArea.cjs.js +2 -2
- package/skinny/registerTextArea.esm.js +2 -2
- package/skinny/registerTextField.cjs.js +48 -7
- package/skinny/registerTextField.cjs.js.map +1 -1
- package/skinny/registerTextField.d.ts +1 -0
- package/skinny/registerTextField.esm.js +51 -11
- package/skinny/registerTextField.esm.js.map +1 -1
- package/skinny/registerTooltip.cjs.js +1 -1
- package/skinny/registerTooltip.esm.js +1 -1
- package/skinny/{utils-cf2632c9.esm.js → utils-5051df41.esm.js} +3 -2
- package/skinny/utils-5051df41.esm.js.map +1 -0
- package/skinny/{utils-18b2465b.cjs.js → utils-745db876.cjs.js} +2 -1
- package/skinny/utils-745db876.cjs.js.map +1 -0
- package/skinny/utils.d.ts +9 -2
- package/skinny/contexts-3e42cdf9.cjs.js.map +0 -1
- package/skinny/contexts-49f6c298.esm.js +0 -12
- package/skinny/contexts-49f6c298.esm.js.map +0 -1
- package/skinny/interaction-variant-utils-0f05190f.cjs.js.map +0 -1
- package/skinny/interaction-variant-utils-909267e5.esm.js.map +0 -1
- package/skinny/option-utils-4f037568.esm.js +0 -153
- package/skinny/option-utils-4f037568.esm.js.map +0 -1
- package/skinny/option-utils-5e4e85bd.cjs.js +0 -162
- package/skinny/option-utils-5e4e85bd.cjs.js.map +0 -1
- package/skinny/utils-18b2465b.cjs.js.map +0 -1
- package/skinny/utils-cf2632c9.esm.js.map +0 -1
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
var utils = require('@react-aria/utils');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var reactAriaComponents = require('react-aria-components');
|
|
6
|
-
var contexts = require('./contexts-
|
|
7
|
-
var
|
|
6
|
+
var contexts = require('./contexts-b21f6b12.cjs.js');
|
|
7
|
+
var registerDescription = require('./registerDescription.cjs.js');
|
|
8
|
+
var registerText = require('./registerText.cjs.js');
|
|
9
|
+
var utils$1 = require('./utils-745db876.cjs.js');
|
|
8
10
|
require('@plasmicapp/host/registerComponent');
|
|
9
11
|
|
|
10
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -12,6 +14,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
12
14
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
13
15
|
|
|
14
16
|
var __defProp = Object.defineProperty;
|
|
17
|
+
var __defProps = Object.defineProperties;
|
|
18
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
15
19
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
16
20
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
17
21
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -27,13 +31,51 @@ var __spreadValues = (a, b) => {
|
|
|
27
31
|
}
|
|
28
32
|
return a;
|
|
29
33
|
};
|
|
34
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
30
35
|
function BaseListBoxItem(props) {
|
|
31
36
|
const contextProps = React__default.default.useContext(contexts.PlasmicItemContext);
|
|
32
37
|
const mergedProps = utils.mergeProps(contextProps, props);
|
|
33
|
-
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBoxItem, __spreadValues({}, mergedProps), mergedProps.children);
|
|
38
|
+
return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBoxItem, __spreadProps(__spreadValues({}, mergedProps), { textValue: contextProps.label }), mergedProps.children);
|
|
34
39
|
}
|
|
40
|
+
const makeDefaultListBoxItemChildren = (label, description) => ({
|
|
41
|
+
type: "vbox",
|
|
42
|
+
styles: {
|
|
43
|
+
display: "flex",
|
|
44
|
+
alignItems: "flex-start",
|
|
45
|
+
gap: "2px"
|
|
46
|
+
},
|
|
47
|
+
children: [
|
|
48
|
+
{
|
|
49
|
+
type: "component",
|
|
50
|
+
name: registerText.TEXT_COMPONENT_NAME,
|
|
51
|
+
props: {
|
|
52
|
+
slot: "label",
|
|
53
|
+
children: {
|
|
54
|
+
type: "text",
|
|
55
|
+
styles: {
|
|
56
|
+
fontWeight: 500
|
|
57
|
+
},
|
|
58
|
+
value: label
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: "component",
|
|
64
|
+
name: registerDescription.DESCRIPTION_COMPONENT_NAME,
|
|
65
|
+
props: {
|
|
66
|
+
children: {
|
|
67
|
+
type: "text",
|
|
68
|
+
styles: {
|
|
69
|
+
color: "#838383"
|
|
70
|
+
},
|
|
71
|
+
value: description != null ? description : `Some description for ${label}...`
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
});
|
|
35
77
|
function registerListBoxItem(loader, overrides) {
|
|
36
|
-
utils$1.registerComponentHelper(
|
|
78
|
+
return utils$1.registerComponentHelper(
|
|
37
79
|
loader,
|
|
38
80
|
BaseListBoxItem,
|
|
39
81
|
{
|
|
@@ -43,7 +85,8 @@ function registerListBoxItem(loader, overrides) {
|
|
|
43
85
|
importName: "BaseListBoxItem",
|
|
44
86
|
props: {
|
|
45
87
|
children: {
|
|
46
|
-
type: "slot"
|
|
88
|
+
type: "slot",
|
|
89
|
+
defaultValue: makeDefaultListBoxItemChildren("Item")
|
|
47
90
|
}
|
|
48
91
|
}
|
|
49
92
|
},
|
|
@@ -52,5 +95,6 @@ function registerListBoxItem(loader, overrides) {
|
|
|
52
95
|
}
|
|
53
96
|
|
|
54
97
|
exports.BaseListBoxItem = BaseListBoxItem;
|
|
98
|
+
exports.makeDefaultListBoxItemChildren = makeDefaultListBoxItemChildren;
|
|
55
99
|
exports.registerListBoxItem = registerListBoxItem;
|
|
56
100
|
//# sourceMappingURL=registerListBoxItem.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerListBoxItem.cjs.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { ListBoxItem } from \"react-aria-components\";\nimport { PlasmicItemContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport function BaseListBoxItem(\n props: React.ComponentProps<typeof ListBoxItem>\n) {\n const contextProps = React.useContext(PlasmicItemContext);\n const mergedProps = mergeProps(contextProps, props);\n return (\n <ListBoxItem {...mergedProps}>\n {mergedProps.children as React.ReactNode}\n </ListBoxItem>\n );\n}\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n props: {\n children: {\n type: \"slot\",\n },\n },\n },\n overrides\n );\n}\n"],"names":["React","PlasmicItemContext","mergeProps","ListBoxItem","registerComponentHelper","makeComponentName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"registerListBoxItem.cjs.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { PlasmicElement } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { ListBoxItem } from \"react-aria-components\";\nimport { PlasmicItemContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { TEXT_COMPONENT_NAME } from \"./registerText\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport function BaseListBoxItem(\n props: React.ComponentProps<typeof ListBoxItem>\n) {\n const contextProps = React.useContext(PlasmicItemContext);\n const mergedProps = mergeProps(contextProps, props);\n\n return (\n <ListBoxItem {...mergedProps} textValue={(contextProps as any).label}>\n {mergedProps.children as React.ReactNode}\n </ListBoxItem>\n );\n}\n\nexport const makeDefaultListBoxItemChildren = (\n label: string,\n description?: string\n): PlasmicElement => ({\n type: \"vbox\",\n styles: {\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: \"2px\",\n },\n children: [\n {\n type: \"component\",\n name: TEXT_COMPONENT_NAME,\n props: {\n slot: \"label\",\n children: {\n type: \"text\",\n styles: {\n fontWeight: 500,\n },\n value: label,\n },\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n styles: {\n color: \"#838383\",\n },\n value: description ?? `Some description for ${label}...`,\n },\n },\n },\n ],\n});\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n return registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: makeDefaultListBoxItemChildren(\"Item\"),\n },\n },\n },\n overrides\n );\n}\n"],"names":["React","PlasmicItemContext","mergeProps","ListBoxItem","TEXT_COMPONENT_NAME","DESCRIPTION_COMPONENT_NAME","registerComponentHelper","makeComponentName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,gBACd,KACA,EAAA;AACA,EAAM,MAAA,YAAA,GAAeA,sBAAM,CAAA,UAAA,CAAWC,2BAAkB,CAAA,CAAA;AACxD,EAAM,MAAA,WAAA,GAAcC,gBAAW,CAAA,YAAA,EAAc,KAAK,CAAA,CAAA;AAElD,EACE,uBAAAF,sBAAA,CAAA,aAAA,CAACG,kEAAgB,WAAhB,CAAA,EAAA,EAA6B,WAAY,YAAqB,CAAA,KAAA,EAAA,CAAA,EAC5D,YAAY,QACf,CAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,8BAAA,GAAiC,CAC5C,KAAA,EACA,WACoB,MAAA;AAAA,EACpB,IAAM,EAAA,MAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,YAAA;AAAA,IACZ,GAAK,EAAA,KAAA;AAAA,GACP;AAAA,EACA,QAAU,EAAA;AAAA,IACR;AAAA,MACE,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAAC,gCAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,OAAA;AAAA,QACN,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,MAAQ,EAAA;AAAA,YACN,UAAY,EAAA,GAAA;AAAA,WACd;AAAA,UACA,KAAO,EAAA,KAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAAC,8CAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,MAAQ,EAAA;AAAA,YACN,KAAO,EAAA,SAAA;AAAA,WACT;AAAA,UACA,KAAA,EAAO,oCAAe,CAAwB,qBAAA,EAAA,KAAA,CAAA,GAAA,CAAA;AAAA,SAChD;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAA,EAAA;AAEgB,SAAA,mBAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAAC,+BAAA;AAAA,IACL,MAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAMC,0BAAkB,MAAM,CAAA;AAAA,MAC9B,WAAa,EAAA,kBAAA;AAAA,MACb,UAAY,EAAA,oDAAA;AAAA,MACZ,UAAY,EAAA,iBAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,YAAA,EAAc,+BAA+B,MAAM,CAAA;AAAA,SACrD;AAAA,OACF;AAAA,KACF;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { PlasmicElement } from "@plasmicapp/host";
|
|
1
2
|
import React from "react";
|
|
2
3
|
import { ListBoxItem } from "react-aria-components";
|
|
3
4
|
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
4
5
|
export declare function BaseListBoxItem(props: React.ComponentProps<typeof ListBoxItem>): React.JSX.Element;
|
|
5
|
-
export declare
|
|
6
|
+
export declare const makeDefaultListBoxItemChildren: (label: string, description?: string) => PlasmicElement;
|
|
7
|
+
export declare function registerListBoxItem(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>): import("@plasmicapp/host").CodeComponentMeta<import("react-aria-components").ListBoxItemProps<object> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { mergeProps } from '@react-aria/utils';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ListBoxItem } from 'react-aria-components';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { f as PlasmicItemContext } from './contexts-9475faad.esm.js';
|
|
5
|
+
import { DESCRIPTION_COMPONENT_NAME } from './registerDescription.esm.js';
|
|
6
|
+
import { TEXT_COMPONENT_NAME } from './registerText.esm.js';
|
|
7
|
+
import { r as registerComponentHelper, a as makeComponentName } from './utils-5051df41.esm.js';
|
|
6
8
|
import '@plasmicapp/host/registerComponent';
|
|
7
9
|
|
|
8
10
|
var __defProp = Object.defineProperty;
|
|
11
|
+
var __defProps = Object.defineProperties;
|
|
12
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
9
13
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
14
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
15
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -21,13 +25,51 @@ var __spreadValues = (a, b) => {
|
|
|
21
25
|
}
|
|
22
26
|
return a;
|
|
23
27
|
};
|
|
28
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
29
|
function BaseListBoxItem(props) {
|
|
25
30
|
const contextProps = React.useContext(PlasmicItemContext);
|
|
26
31
|
const mergedProps = mergeProps(contextProps, props);
|
|
27
|
-
return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadValues({}, mergedProps), mergedProps.children);
|
|
32
|
+
return /* @__PURE__ */ React.createElement(ListBoxItem, __spreadProps(__spreadValues({}, mergedProps), { textValue: contextProps.label }), mergedProps.children);
|
|
28
33
|
}
|
|
34
|
+
const makeDefaultListBoxItemChildren = (label, description) => ({
|
|
35
|
+
type: "vbox",
|
|
36
|
+
styles: {
|
|
37
|
+
display: "flex",
|
|
38
|
+
alignItems: "flex-start",
|
|
39
|
+
gap: "2px"
|
|
40
|
+
},
|
|
41
|
+
children: [
|
|
42
|
+
{
|
|
43
|
+
type: "component",
|
|
44
|
+
name: TEXT_COMPONENT_NAME,
|
|
45
|
+
props: {
|
|
46
|
+
slot: "label",
|
|
47
|
+
children: {
|
|
48
|
+
type: "text",
|
|
49
|
+
styles: {
|
|
50
|
+
fontWeight: 500
|
|
51
|
+
},
|
|
52
|
+
value: label
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
type: "component",
|
|
58
|
+
name: DESCRIPTION_COMPONENT_NAME,
|
|
59
|
+
props: {
|
|
60
|
+
children: {
|
|
61
|
+
type: "text",
|
|
62
|
+
styles: {
|
|
63
|
+
color: "#838383"
|
|
64
|
+
},
|
|
65
|
+
value: description != null ? description : `Some description for ${label}...`
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
});
|
|
29
71
|
function registerListBoxItem(loader, overrides) {
|
|
30
|
-
registerComponentHelper(
|
|
72
|
+
return registerComponentHelper(
|
|
31
73
|
loader,
|
|
32
74
|
BaseListBoxItem,
|
|
33
75
|
{
|
|
@@ -37,7 +79,8 @@ function registerListBoxItem(loader, overrides) {
|
|
|
37
79
|
importName: "BaseListBoxItem",
|
|
38
80
|
props: {
|
|
39
81
|
children: {
|
|
40
|
-
type: "slot"
|
|
82
|
+
type: "slot",
|
|
83
|
+
defaultValue: makeDefaultListBoxItemChildren("Item")
|
|
41
84
|
}
|
|
42
85
|
}
|
|
43
86
|
},
|
|
@@ -45,5 +88,5 @@ function registerListBoxItem(loader, overrides) {
|
|
|
45
88
|
);
|
|
46
89
|
}
|
|
47
90
|
|
|
48
|
-
export { BaseListBoxItem, registerListBoxItem };
|
|
91
|
+
export { BaseListBoxItem, makeDefaultListBoxItemChildren, registerListBoxItem };
|
|
49
92
|
//# sourceMappingURL=registerListBoxItem.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerListBoxItem.esm.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { ListBoxItem } from \"react-aria-components\";\nimport { PlasmicItemContext } from \"./contexts\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport function BaseListBoxItem(\n props: React.ComponentProps<typeof ListBoxItem>\n) {\n const contextProps = React.useContext(PlasmicItemContext);\n const mergedProps = mergeProps(contextProps, props);\n return (\n <ListBoxItem {...mergedProps}>\n {mergedProps.children as React.ReactNode}\n </ListBoxItem>\n );\n}\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n props: {\n children: {\n type: \"slot\",\n },\n },\n },\n overrides\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"registerListBoxItem.esm.js","sources":["../src/registerListBoxItem.tsx"],"sourcesContent":["import { PlasmicElement } from \"@plasmicapp/host\";\nimport { mergeProps } from \"@react-aria/utils\";\nimport React from \"react\";\nimport { ListBoxItem } from \"react-aria-components\";\nimport { PlasmicItemContext } from \"./contexts\";\nimport { DESCRIPTION_COMPONENT_NAME } from \"./registerDescription\";\nimport { TEXT_COMPONENT_NAME } from \"./registerText\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport function BaseListBoxItem(\n props: React.ComponentProps<typeof ListBoxItem>\n) {\n const contextProps = React.useContext(PlasmicItemContext);\n const mergedProps = mergeProps(contextProps, props);\n\n return (\n <ListBoxItem {...mergedProps} textValue={(contextProps as any).label}>\n {mergedProps.children as React.ReactNode}\n </ListBoxItem>\n );\n}\n\nexport const makeDefaultListBoxItemChildren = (\n label: string,\n description?: string\n): PlasmicElement => ({\n type: \"vbox\",\n styles: {\n display: \"flex\",\n alignItems: \"flex-start\",\n gap: \"2px\",\n },\n children: [\n {\n type: \"component\",\n name: TEXT_COMPONENT_NAME,\n props: {\n slot: \"label\",\n children: {\n type: \"text\",\n styles: {\n fontWeight: 500,\n },\n value: label,\n },\n },\n },\n {\n type: \"component\",\n name: DESCRIPTION_COMPONENT_NAME,\n props: {\n children: {\n type: \"text\",\n styles: {\n color: \"#838383\",\n },\n value: description ?? `Some description for ${label}...`,\n },\n },\n },\n ],\n});\n\nexport function registerListBoxItem(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseListBoxItem>\n) {\n return registerComponentHelper(\n loader,\n BaseListBoxItem,\n {\n name: makeComponentName(\"item\"),\n displayName: \"Aria ListBoxItem\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerListBoxItem\",\n importName: \"BaseListBoxItem\",\n props: {\n children: {\n type: \"slot\",\n defaultValue: makeDefaultListBoxItemChildren(\"Item\"),\n },\n },\n },\n overrides\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,gBACd,KACA,EAAA;AACA,EAAM,MAAA,YAAA,GAAe,KAAM,CAAA,UAAA,CAAW,kBAAkB,CAAA,CAAA;AACxD,EAAM,MAAA,WAAA,GAAc,UAAW,CAAA,YAAA,EAAc,KAAK,CAAA,CAAA;AAElD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,8CAAgB,WAAhB,CAAA,EAAA,EAA6B,WAAY,YAAqB,CAAA,KAAA,EAAA,CAAA,EAC5D,YAAY,QACf,CAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,8BAAA,GAAiC,CAC5C,KAAA,EACA,WACoB,MAAA;AAAA,EACpB,IAAM,EAAA,MAAA;AAAA,EACN,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,YAAA;AAAA,IACZ,GAAK,EAAA,KAAA;AAAA,GACP;AAAA,EACA,QAAU,EAAA;AAAA,IACR;AAAA,MACE,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAA,mBAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,OAAA;AAAA,QACN,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,MAAQ,EAAA;AAAA,YACN,UAAY,EAAA,GAAA;AAAA,WACd;AAAA,UACA,KAAO,EAAA,KAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,IAAM,EAAA,WAAA;AAAA,MACN,IAAM,EAAA,0BAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,MAAQ,EAAA;AAAA,YACN,KAAO,EAAA,SAAA;AAAA,WACT;AAAA,UACA,KAAA,EAAO,oCAAe,CAAwB,qBAAA,EAAA,KAAA,CAAA,GAAA,CAAA;AAAA,SAChD;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAA,EAAA;AAEgB,SAAA,mBAAA,CACd,QACA,SACA,EAAA;AACA,EAAO,OAAA,uBAAA;AAAA,IACL,MAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,kBAAkB,MAAM,CAAA;AAAA,MAC9B,WAAa,EAAA,kBAAA;AAAA,MACb,UAAY,EAAA,oDAAA;AAAA,MACZ,UAAY,EAAA,iBAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,QAAU,EAAA;AAAA,UACR,IAAM,EAAA,MAAA;AAAA,UACN,YAAA,EAAc,+BAA+B,MAAM,CAAA;AAAA,SACrD;AAAA,OACF;AAAA,KACF;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var host = require('@plasmicapp/host');
|
|
4
4
|
var React = require('react');
|
|
5
|
+
var reactAria = require('react-aria');
|
|
5
6
|
var reactAriaComponents = require('react-aria-components');
|
|
6
|
-
var
|
|
7
|
+
var contexts = require('./contexts-b21f6b12.cjs.js');
|
|
8
|
+
var utils = require('./utils-745db876.cjs.js');
|
|
7
9
|
require('@plasmicapp/host/registerComponent');
|
|
8
10
|
|
|
9
11
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -48,14 +50,26 @@ const BaseModal = React.forwardRef(
|
|
|
48
50
|
heading,
|
|
49
51
|
modalOverlayClass,
|
|
50
52
|
onOpenChange,
|
|
51
|
-
className
|
|
53
|
+
className,
|
|
54
|
+
isOpen,
|
|
55
|
+
setControlContextData
|
|
52
56
|
} = _a, rest = __objRest(_a, [
|
|
53
57
|
"children",
|
|
54
58
|
"heading",
|
|
55
59
|
"modalOverlayClass",
|
|
56
60
|
"onOpenChange",
|
|
57
|
-
"className"
|
|
61
|
+
"className",
|
|
62
|
+
"isOpen",
|
|
63
|
+
"setControlContextData"
|
|
58
64
|
]);
|
|
65
|
+
const contextProps = React__default.default.useContext(contexts.PlasmicDialogTriggerContext);
|
|
66
|
+
const isStandalone = !contextProps;
|
|
67
|
+
const mergedProps = reactAria.mergeProps(contextProps, rest, {
|
|
68
|
+
isOpen: isStandalone ? isOpen : contextProps.isOpen
|
|
69
|
+
});
|
|
70
|
+
setControlContextData == null ? void 0 : setControlContextData({
|
|
71
|
+
isStandalone
|
|
72
|
+
});
|
|
59
73
|
React.useImperativeHandle(ref, () => ({
|
|
60
74
|
close: () => {
|
|
61
75
|
onOpenChange(false);
|
|
@@ -68,7 +82,7 @@ const BaseModal = React.forwardRef(
|
|
|
68
82
|
const body = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, heading && /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Heading, { slot: "title" }, heading), children);
|
|
69
83
|
return /* @__PURE__ */ React__default.default.createElement(
|
|
70
84
|
reactAriaComponents.ModalOverlay,
|
|
71
|
-
__spreadProps(__spreadValues({},
|
|
85
|
+
__spreadProps(__spreadValues({}, mergedProps), {
|
|
72
86
|
className: modalOverlayClass,
|
|
73
87
|
onOpenChange
|
|
74
88
|
}),
|
|
@@ -76,16 +90,31 @@ const BaseModal = React.forwardRef(
|
|
|
76
90
|
);
|
|
77
91
|
}
|
|
78
92
|
);
|
|
93
|
+
const MODAL_COMPONENT_NAME = utils.makeComponentName("modal");
|
|
79
94
|
function registerModal(loader, overrides) {
|
|
80
95
|
utils.registerComponentHelper(
|
|
81
96
|
loader,
|
|
82
97
|
BaseModal,
|
|
83
98
|
{
|
|
84
|
-
name:
|
|
99
|
+
name: MODAL_COMPONENT_NAME,
|
|
85
100
|
displayName: "Aria Modal",
|
|
86
101
|
importPath: "@plasmicpkgs/react-aria/skinny/registerModal",
|
|
87
102
|
importName: "BaseModal",
|
|
88
103
|
styleSections: true,
|
|
104
|
+
defaultStyles: {
|
|
105
|
+
// centering the modal on the page by default
|
|
106
|
+
position: "fixed",
|
|
107
|
+
top: "10%",
|
|
108
|
+
left: "50%",
|
|
109
|
+
width: "50%",
|
|
110
|
+
transform: "translateX(-50%)",
|
|
111
|
+
borderWidth: "1px",
|
|
112
|
+
borderStyle: "solid",
|
|
113
|
+
borderColor: "black",
|
|
114
|
+
padding: "20px",
|
|
115
|
+
maxWidth: "300px",
|
|
116
|
+
backgroundColor: "#FDE3C3"
|
|
117
|
+
},
|
|
89
118
|
refActions: {
|
|
90
119
|
open: {
|
|
91
120
|
description: "Open the modal",
|
|
@@ -98,10 +127,46 @@ function registerModal(loader, overrides) {
|
|
|
98
127
|
},
|
|
99
128
|
props: {
|
|
100
129
|
heading: {
|
|
101
|
-
type: "slot"
|
|
130
|
+
type: "slot",
|
|
131
|
+
defaultValue: {
|
|
132
|
+
type: "text",
|
|
133
|
+
value: "Modal Heading",
|
|
134
|
+
styles: {
|
|
135
|
+
fontSize: "20px",
|
|
136
|
+
fontWeight: "bold",
|
|
137
|
+
marginBottom: "10px"
|
|
138
|
+
}
|
|
139
|
+
}
|
|
102
140
|
},
|
|
103
141
|
children: {
|
|
104
|
-
type: "slot"
|
|
142
|
+
type: "slot",
|
|
143
|
+
defaultValue: {
|
|
144
|
+
type: "vbox",
|
|
145
|
+
styles: {
|
|
146
|
+
width: "stretch",
|
|
147
|
+
padding: 0,
|
|
148
|
+
gap: "10px",
|
|
149
|
+
justifyContent: "flex-start",
|
|
150
|
+
alignItems: "flex-start"
|
|
151
|
+
},
|
|
152
|
+
children: [
|
|
153
|
+
{
|
|
154
|
+
type: "text",
|
|
155
|
+
value: "This is a Modal!"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
type: "text",
|
|
159
|
+
value: "You can put anything you can imagine here!",
|
|
160
|
+
styles: {
|
|
161
|
+
fontWeight: 500
|
|
162
|
+
}
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
type: "text",
|
|
166
|
+
value: "Use it in a `Aria Dialog Trigger` component to trigger it on a button click!"
|
|
167
|
+
}
|
|
168
|
+
]
|
|
169
|
+
}
|
|
105
170
|
},
|
|
106
171
|
modalOverlayClass: {
|
|
107
172
|
type: "class",
|
|
@@ -111,7 +176,9 @@ function registerModal(loader, overrides) {
|
|
|
111
176
|
type: "boolean",
|
|
112
177
|
editOnly: true,
|
|
113
178
|
uncontrolledProp: "defaultOpen",
|
|
114
|
-
defaultValueHint: false
|
|
179
|
+
defaultValueHint: false,
|
|
180
|
+
defaultValue: true,
|
|
181
|
+
hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
|
|
115
182
|
},
|
|
116
183
|
isDismissable: {
|
|
117
184
|
type: "boolean",
|
|
@@ -131,7 +198,8 @@ function registerModal(loader, overrides) {
|
|
|
131
198
|
type: "writable",
|
|
132
199
|
valueProp: "isOpen",
|
|
133
200
|
onChangeProp: "onOpenChange",
|
|
134
|
-
variableType: "boolean"
|
|
201
|
+
variableType: "boolean",
|
|
202
|
+
hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
|
|
135
203
|
}
|
|
136
204
|
},
|
|
137
205
|
trapsFocus: true
|
|
@@ -141,5 +209,6 @@ function registerModal(loader, overrides) {
|
|
|
141
209
|
}
|
|
142
210
|
|
|
143
211
|
exports.BaseModal = BaseModal;
|
|
212
|
+
exports.MODAL_COMPONENT_NAME = MODAL_COMPONENT_NAME;
|
|
144
213
|
exports.registerModal = registerModal;
|
|
145
214
|
//# sourceMappingURL=registerModal.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerModal.cjs.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport {\n Dialog,\n Heading,\n Modal,\n ModalOverlay,\n ModalOverlayProps,\n} from \"react-aria-components\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps extends ModalOverlayProps {\n heading: React.ReactNode;\n modalOverlayClass: string;\n onOpenChange(isOpen: boolean): void;\n}\n\nexport interface BaseModalActions {\n close(): void;\n open(): void;\n}\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n function _BaseModal(props, ref) {\n const {\n children,\n heading,\n modalOverlayClass,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n // Expose close operation using useImperativeHandle\n useImperativeHandle(ref, () => ({\n close: () => {\n onOpenChange(false);\n },\n open: () => {\n onOpenChange(true);\n },\n }));\n\n const isCanvas = usePlasmicCanvasContext();\n const body = (\n <>\n {heading && <Heading slot=\"title\">{heading}</Heading>}\n {children}\n </>\n );\n\n return (\n <ModalOverlay\n {...rest}\n className={modalOverlayClass}\n onOpenChange={onOpenChange}\n >\n <Modal className={className}>\n {isCanvas ? body : <Dialog>{body}</Dialog>}\n </Modal>\n </ModalOverlay>\n );\n }\n);\n\nexport function registerModal(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n registerComponentHelper(\n loader,\n BaseModal,\n {\n name: makeComponentName(\"modal\"),\n displayName: \"Aria Modal\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n importName: \"BaseModal\",\n styleSections: true,\n refActions: {\n open: {\n description: \"Open the modal\",\n argTypes: [],\n },\n close: {\n description: \"Close the modal\",\n argTypes: [],\n },\n },\n props: {\n heading: {\n type: \"slot\",\n },\n children: {\n type: \"slot\",\n },\n modalOverlayClass: {\n type: \"class\",\n displayName: \"Modal Overlay\",\n },\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n defaultValueHint: false,\n },\n isDismissable: {\n type: \"boolean\",\n description:\n \"Whether to close the modal when the user interacts outside it.\",\n },\n isKeyboardDismissDisabled: {\n type: \"boolean\",\n description:\n \"Whether pressing the escape key to close the modal should be disabled.\",\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":["forwardRef","useImperativeHandle","usePlasmicCanvasContext","React","Heading","ModalOverlay","Modal","Dialog","registerComponentHelper","makeComponentName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"registerModal.cjs.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n Dialog,\n Heading,\n Modal,\n ModalOverlay,\n ModalOverlayProps,\n} from \"react-aria-components\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport {\n BaseControlContextData,\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps extends ModalOverlayProps {\n heading: React.ReactNode;\n modalOverlayClass: string;\n onOpenChange(isOpen: boolean): void;\n setControlContextData?: (ctxData: BaseControlContextData) => void;\n}\n\nexport interface BaseModalActions {\n close(): void;\n open(): void;\n}\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n function _BaseModal(props, ref) {\n const {\n children,\n heading,\n modalOverlayClass,\n onOpenChange,\n className,\n isOpen,\n setControlContextData,\n ...rest\n } = props;\n\n const contextProps = React.useContext(PlasmicDialogTriggerContext);\n const isStandalone = !contextProps;\n const mergedProps = mergeProps(contextProps, rest, {\n isOpen: isStandalone ? isOpen : contextProps.isOpen,\n });\n\n setControlContextData?.({\n isStandalone,\n });\n\n // Expose close operation using useImperativeHandle\n useImperativeHandle(ref, () => ({\n close: () => {\n onOpenChange(false);\n },\n open: () => {\n onOpenChange(true);\n },\n }));\n\n const isCanvas = usePlasmicCanvasContext();\n const body = (\n <>\n {heading && <Heading slot=\"title\">{heading}</Heading>}\n {children}\n </>\n );\n\n return (\n <ModalOverlay\n {...mergedProps}\n className={modalOverlayClass}\n onOpenChange={onOpenChange}\n >\n <Modal className={className}>\n {isCanvas ? body : <Dialog>{body}</Dialog>}\n </Modal>\n </ModalOverlay>\n );\n }\n);\n\nexport const MODAL_COMPONENT_NAME = makeComponentName(\"modal\");\n\nexport function registerModal(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n registerComponentHelper(\n loader,\n BaseModal,\n {\n name: MODAL_COMPONENT_NAME,\n displayName: \"Aria Modal\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n importName: \"BaseModal\",\n styleSections: true,\n defaultStyles: {\n // centering the modal on the page by default\n position: \"fixed\",\n top: \"10%\",\n left: \"50%\",\n width: \"50%\",\n transform: \"translateX(-50%)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n maxWidth: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n refActions: {\n open: {\n description: \"Open the modal\",\n argTypes: [],\n },\n close: {\n description: \"Close the modal\",\n argTypes: [],\n },\n },\n props: {\n heading: {\n type: \"slot\",\n defaultValue: {\n type: \"text\",\n value: \"Modal Heading\",\n styles: {\n fontSize: \"20px\",\n fontWeight: \"bold\",\n marginBottom: \"10px\",\n },\n },\n },\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n gap: \"10px\",\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Modal!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n },\n modalOverlayClass: {\n type: \"class\",\n displayName: \"Modal Overlay\",\n },\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n defaultValueHint: false,\n defaultValue: true,\n hidden: (_ps: BaseModalProps, ctx: BaseControlContextData | null) =>\n !ctx?.isStandalone,\n },\n isDismissable: {\n type: \"boolean\",\n description:\n \"Whether to close the modal when the user interacts outside it.\",\n },\n isKeyboardDismissDisabled: {\n type: \"boolean\",\n description:\n \"Whether pressing the escape key to close the modal should be disabled.\",\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 hidden: (_ps: BaseModalProps, ctx: BaseControlContextData | null) =>\n !ctx?.isStandalone,\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":["forwardRef","React","PlasmicDialogTriggerContext","mergeProps","useImperativeHandle","usePlasmicCanvasContext","Heading","ModalOverlay","Modal","Dialog","makeComponentName","registerComponentHelper"],"mappings":"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"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ModalOverlayProps } from "react-aria-components";
|
|
3
|
-
import { CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
3
|
+
import { BaseControlContextData, CodeComponentMetaOverrides, Registerable } from "./utils";
|
|
4
4
|
export interface BaseModalProps extends ModalOverlayProps {
|
|
5
5
|
heading: React.ReactNode;
|
|
6
6
|
modalOverlayClass: string;
|
|
7
7
|
onOpenChange(isOpen: boolean): void;
|
|
8
|
+
setControlContextData?: (ctxData: BaseControlContextData) => void;
|
|
8
9
|
}
|
|
9
10
|
export interface BaseModalActions {
|
|
10
11
|
close(): void;
|
|
11
12
|
open(): void;
|
|
12
13
|
}
|
|
13
14
|
export declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<BaseModalActions>>;
|
|
15
|
+
export declare const MODAL_COMPONENT_NAME: string;
|
|
14
16
|
export declare function registerModal(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseModal>): void;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { usePlasmicCanvasContext } from '@plasmicapp/host';
|
|
2
2
|
import React, { forwardRef, useImperativeHandle } from 'react';
|
|
3
|
+
import { mergeProps } from 'react-aria';
|
|
3
4
|
import { Heading, ModalOverlay, Modal, Dialog } from 'react-aria-components';
|
|
4
|
-
import {
|
|
5
|
+
import { c as PlasmicDialogTriggerContext } from './contexts-9475faad.esm.js';
|
|
6
|
+
import { a as makeComponentName, r as registerComponentHelper } from './utils-5051df41.esm.js';
|
|
5
7
|
import '@plasmicapp/host/registerComponent';
|
|
6
8
|
|
|
7
9
|
var __defProp = Object.defineProperty;
|
|
@@ -42,14 +44,26 @@ const BaseModal = forwardRef(
|
|
|
42
44
|
heading,
|
|
43
45
|
modalOverlayClass,
|
|
44
46
|
onOpenChange,
|
|
45
|
-
className
|
|
47
|
+
className,
|
|
48
|
+
isOpen,
|
|
49
|
+
setControlContextData
|
|
46
50
|
} = _a, rest = __objRest(_a, [
|
|
47
51
|
"children",
|
|
48
52
|
"heading",
|
|
49
53
|
"modalOverlayClass",
|
|
50
54
|
"onOpenChange",
|
|
51
|
-
"className"
|
|
55
|
+
"className",
|
|
56
|
+
"isOpen",
|
|
57
|
+
"setControlContextData"
|
|
52
58
|
]);
|
|
59
|
+
const contextProps = React.useContext(PlasmicDialogTriggerContext);
|
|
60
|
+
const isStandalone = !contextProps;
|
|
61
|
+
const mergedProps = mergeProps(contextProps, rest, {
|
|
62
|
+
isOpen: isStandalone ? isOpen : contextProps.isOpen
|
|
63
|
+
});
|
|
64
|
+
setControlContextData == null ? void 0 : setControlContextData({
|
|
65
|
+
isStandalone
|
|
66
|
+
});
|
|
53
67
|
useImperativeHandle(ref, () => ({
|
|
54
68
|
close: () => {
|
|
55
69
|
onOpenChange(false);
|
|
@@ -62,7 +76,7 @@ const BaseModal = forwardRef(
|
|
|
62
76
|
const body = /* @__PURE__ */ React.createElement(React.Fragment, null, heading && /* @__PURE__ */ React.createElement(Heading, { slot: "title" }, heading), children);
|
|
63
77
|
return /* @__PURE__ */ React.createElement(
|
|
64
78
|
ModalOverlay,
|
|
65
|
-
__spreadProps(__spreadValues({},
|
|
79
|
+
__spreadProps(__spreadValues({}, mergedProps), {
|
|
66
80
|
className: modalOverlayClass,
|
|
67
81
|
onOpenChange
|
|
68
82
|
}),
|
|
@@ -70,16 +84,31 @@ const BaseModal = forwardRef(
|
|
|
70
84
|
);
|
|
71
85
|
}
|
|
72
86
|
);
|
|
87
|
+
const MODAL_COMPONENT_NAME = makeComponentName("modal");
|
|
73
88
|
function registerModal(loader, overrides) {
|
|
74
89
|
registerComponentHelper(
|
|
75
90
|
loader,
|
|
76
91
|
BaseModal,
|
|
77
92
|
{
|
|
78
|
-
name:
|
|
93
|
+
name: MODAL_COMPONENT_NAME,
|
|
79
94
|
displayName: "Aria Modal",
|
|
80
95
|
importPath: "@plasmicpkgs/react-aria/skinny/registerModal",
|
|
81
96
|
importName: "BaseModal",
|
|
82
97
|
styleSections: true,
|
|
98
|
+
defaultStyles: {
|
|
99
|
+
// centering the modal on the page by default
|
|
100
|
+
position: "fixed",
|
|
101
|
+
top: "10%",
|
|
102
|
+
left: "50%",
|
|
103
|
+
width: "50%",
|
|
104
|
+
transform: "translateX(-50%)",
|
|
105
|
+
borderWidth: "1px",
|
|
106
|
+
borderStyle: "solid",
|
|
107
|
+
borderColor: "black",
|
|
108
|
+
padding: "20px",
|
|
109
|
+
maxWidth: "300px",
|
|
110
|
+
backgroundColor: "#FDE3C3"
|
|
111
|
+
},
|
|
83
112
|
refActions: {
|
|
84
113
|
open: {
|
|
85
114
|
description: "Open the modal",
|
|
@@ -92,10 +121,46 @@ function registerModal(loader, overrides) {
|
|
|
92
121
|
},
|
|
93
122
|
props: {
|
|
94
123
|
heading: {
|
|
95
|
-
type: "slot"
|
|
124
|
+
type: "slot",
|
|
125
|
+
defaultValue: {
|
|
126
|
+
type: "text",
|
|
127
|
+
value: "Modal Heading",
|
|
128
|
+
styles: {
|
|
129
|
+
fontSize: "20px",
|
|
130
|
+
fontWeight: "bold",
|
|
131
|
+
marginBottom: "10px"
|
|
132
|
+
}
|
|
133
|
+
}
|
|
96
134
|
},
|
|
97
135
|
children: {
|
|
98
|
-
type: "slot"
|
|
136
|
+
type: "slot",
|
|
137
|
+
defaultValue: {
|
|
138
|
+
type: "vbox",
|
|
139
|
+
styles: {
|
|
140
|
+
width: "stretch",
|
|
141
|
+
padding: 0,
|
|
142
|
+
gap: "10px",
|
|
143
|
+
justifyContent: "flex-start",
|
|
144
|
+
alignItems: "flex-start"
|
|
145
|
+
},
|
|
146
|
+
children: [
|
|
147
|
+
{
|
|
148
|
+
type: "text",
|
|
149
|
+
value: "This is a Modal!"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: "text",
|
|
153
|
+
value: "You can put anything you can imagine here!",
|
|
154
|
+
styles: {
|
|
155
|
+
fontWeight: 500
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
type: "text",
|
|
160
|
+
value: "Use it in a `Aria Dialog Trigger` component to trigger it on a button click!"
|
|
161
|
+
}
|
|
162
|
+
]
|
|
163
|
+
}
|
|
99
164
|
},
|
|
100
165
|
modalOverlayClass: {
|
|
101
166
|
type: "class",
|
|
@@ -105,7 +170,9 @@ function registerModal(loader, overrides) {
|
|
|
105
170
|
type: "boolean",
|
|
106
171
|
editOnly: true,
|
|
107
172
|
uncontrolledProp: "defaultOpen",
|
|
108
|
-
defaultValueHint: false
|
|
173
|
+
defaultValueHint: false,
|
|
174
|
+
defaultValue: true,
|
|
175
|
+
hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
|
|
109
176
|
},
|
|
110
177
|
isDismissable: {
|
|
111
178
|
type: "boolean",
|
|
@@ -125,7 +192,8 @@ function registerModal(loader, overrides) {
|
|
|
125
192
|
type: "writable",
|
|
126
193
|
valueProp: "isOpen",
|
|
127
194
|
onChangeProp: "onOpenChange",
|
|
128
|
-
variableType: "boolean"
|
|
195
|
+
variableType: "boolean",
|
|
196
|
+
hidden: (_ps, ctx) => !(ctx == null ? void 0 : ctx.isStandalone)
|
|
129
197
|
}
|
|
130
198
|
},
|
|
131
199
|
trapsFocus: true
|
|
@@ -134,5 +202,5 @@ function registerModal(loader, overrides) {
|
|
|
134
202
|
);
|
|
135
203
|
}
|
|
136
204
|
|
|
137
|
-
export { BaseModal, registerModal };
|
|
205
|
+
export { BaseModal, MODAL_COMPONENT_NAME, registerModal };
|
|
138
206
|
//# sourceMappingURL=registerModal.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerModal.esm.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport {\n Dialog,\n Heading,\n Modal,\n ModalOverlay,\n ModalOverlayProps,\n} from \"react-aria-components\";\nimport {\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps extends ModalOverlayProps {\n heading: React.ReactNode;\n modalOverlayClass: string;\n onOpenChange(isOpen: boolean): void;\n}\n\nexport interface BaseModalActions {\n close(): void;\n open(): void;\n}\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n function _BaseModal(props, ref) {\n const {\n children,\n heading,\n modalOverlayClass,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n // Expose close operation using useImperativeHandle\n useImperativeHandle(ref, () => ({\n close: () => {\n onOpenChange(false);\n },\n open: () => {\n onOpenChange(true);\n },\n }));\n\n const isCanvas = usePlasmicCanvasContext();\n const body = (\n <>\n {heading && <Heading slot=\"title\">{heading}</Heading>}\n {children}\n </>\n );\n\n return (\n <ModalOverlay\n {...
|
|
1
|
+
{"version":3,"file":"registerModal.esm.js","sources":["../src/registerModal.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React, { forwardRef, useImperativeHandle } from \"react\";\nimport { mergeProps } from \"react-aria\";\nimport {\n Dialog,\n Heading,\n Modal,\n ModalOverlay,\n ModalOverlayProps,\n} from \"react-aria-components\";\nimport { PlasmicDialogTriggerContext } from \"./contexts\";\nimport {\n BaseControlContextData,\n CodeComponentMetaOverrides,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n} from \"./utils\";\n\nexport interface BaseModalProps extends ModalOverlayProps {\n heading: React.ReactNode;\n modalOverlayClass: string;\n onOpenChange(isOpen: boolean): void;\n setControlContextData?: (ctxData: BaseControlContextData) => void;\n}\n\nexport interface BaseModalActions {\n close(): void;\n open(): void;\n}\n\nexport const BaseModal = forwardRef<BaseModalActions, BaseModalProps>(\n function _BaseModal(props, ref) {\n const {\n children,\n heading,\n modalOverlayClass,\n onOpenChange,\n className,\n isOpen,\n setControlContextData,\n ...rest\n } = props;\n\n const contextProps = React.useContext(PlasmicDialogTriggerContext);\n const isStandalone = !contextProps;\n const mergedProps = mergeProps(contextProps, rest, {\n isOpen: isStandalone ? isOpen : contextProps.isOpen,\n });\n\n setControlContextData?.({\n isStandalone,\n });\n\n // Expose close operation using useImperativeHandle\n useImperativeHandle(ref, () => ({\n close: () => {\n onOpenChange(false);\n },\n open: () => {\n onOpenChange(true);\n },\n }));\n\n const isCanvas = usePlasmicCanvasContext();\n const body = (\n <>\n {heading && <Heading slot=\"title\">{heading}</Heading>}\n {children}\n </>\n );\n\n return (\n <ModalOverlay\n {...mergedProps}\n className={modalOverlayClass}\n onOpenChange={onOpenChange}\n >\n <Modal className={className}>\n {isCanvas ? body : <Dialog>{body}</Dialog>}\n </Modal>\n </ModalOverlay>\n );\n }\n);\n\nexport const MODAL_COMPONENT_NAME = makeComponentName(\"modal\");\n\nexport function registerModal(\n loader?: Registerable,\n overrides?: CodeComponentMetaOverrides<typeof BaseModal>\n) {\n registerComponentHelper(\n loader,\n BaseModal,\n {\n name: MODAL_COMPONENT_NAME,\n displayName: \"Aria Modal\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerModal\",\n importName: \"BaseModal\",\n styleSections: true,\n defaultStyles: {\n // centering the modal on the page by default\n position: \"fixed\",\n top: \"10%\",\n left: \"50%\",\n width: \"50%\",\n transform: \"translateX(-50%)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: \"black\",\n padding: \"20px\",\n maxWidth: \"300px\",\n backgroundColor: \"#FDE3C3\",\n },\n refActions: {\n open: {\n description: \"Open the modal\",\n argTypes: [],\n },\n close: {\n description: \"Close the modal\",\n argTypes: [],\n },\n },\n props: {\n heading: {\n type: \"slot\",\n defaultValue: {\n type: \"text\",\n value: \"Modal Heading\",\n styles: {\n fontSize: \"20px\",\n fontWeight: \"bold\",\n marginBottom: \"10px\",\n },\n },\n },\n children: {\n type: \"slot\",\n defaultValue: {\n type: \"vbox\",\n styles: {\n width: \"stretch\",\n padding: 0,\n gap: \"10px\",\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n },\n children: [\n {\n type: \"text\",\n value: \"This is a Modal!\",\n },\n {\n type: \"text\",\n value: \"You can put anything you can imagine here!\",\n styles: {\n fontWeight: 500,\n },\n },\n {\n type: \"text\",\n value:\n \"Use it in a `Aria Dialog Trigger` component to trigger it on a button click!\",\n },\n ],\n },\n },\n modalOverlayClass: {\n type: \"class\",\n displayName: \"Modal Overlay\",\n },\n isOpen: {\n type: \"boolean\",\n editOnly: true,\n uncontrolledProp: \"defaultOpen\",\n defaultValueHint: false,\n defaultValue: true,\n hidden: (_ps: BaseModalProps, ctx: BaseControlContextData | null) =>\n !ctx?.isStandalone,\n },\n isDismissable: {\n type: \"boolean\",\n description:\n \"Whether to close the modal when the user interacts outside it.\",\n },\n isKeyboardDismissDisabled: {\n type: \"boolean\",\n description:\n \"Whether pressing the escape key to close the modal should be disabled.\",\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 hidden: (_ps: BaseModalProps, ctx: BaseControlContextData | null) =>\n !ctx?.isStandalone,\n },\n },\n trapsFocus: true,\n },\n overrides\n );\n}\n"],"names":[],"mappings":"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"}
|