@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.
Files changed (197) hide show
  1. package/dist/.tsbuildinfo +1 -1
  2. package/dist/contexts.d.ts +4 -0
  3. package/dist/interaction-variant-utils.d.ts +4 -0
  4. package/dist/react-aria.esm.js +2494 -1120
  5. package/dist/react-aria.esm.js.map +1 -1
  6. package/dist/react-aria.js +2491 -1117
  7. package/dist/react-aria.js.map +1 -1
  8. package/dist/registerButton.d.ts +1 -0
  9. package/dist/registerCheckbox.d.ts +8 -2
  10. package/dist/registerCheckboxGroup.d.ts +2 -2
  11. package/dist/registerDescription.d.ts +2 -1
  12. package/dist/registerDialogTrigger.d.ts +1 -2
  13. package/dist/registerHeader.d.ts +1 -1
  14. package/dist/registerInput.d.ts +1 -0
  15. package/dist/registerLabel.d.ts +1 -0
  16. package/dist/registerListBox.d.ts +3 -6
  17. package/dist/registerListBoxItem.d.ts +3 -1
  18. package/dist/registerModal.d.ts +3 -1
  19. package/dist/registerPopover.d.ts +3 -0
  20. package/dist/registerRadio.d.ts +5 -2
  21. package/dist/registerRadioGroup.d.ts +3 -3
  22. package/dist/registerSection.d.ts +1 -1
  23. package/dist/registerSelect.d.ts +5 -2
  24. package/dist/registerSlider.d.ts +14 -0
  25. package/dist/registerSliderOutput.d.ts +5 -0
  26. package/dist/registerSliderThumb.d.ts +13 -0
  27. package/dist/registerSliderTrack.d.ts +14 -0
  28. package/dist/registerText.d.ts +2 -1
  29. package/dist/registerTextField.d.ts +1 -0
  30. package/dist/utils.d.ts +9 -2
  31. package/package.json +2 -2
  32. package/skinny/ErrorBoundary-c6b111d3.esm.js +20 -0
  33. package/skinny/ErrorBoundary-c6b111d3.esm.js.map +1 -0
  34. package/skinny/ErrorBoundary-e9b86248.cjs.js +22 -0
  35. package/skinny/ErrorBoundary-e9b86248.cjs.js.map +1 -0
  36. package/skinny/contexts-9475faad.esm.js +16 -0
  37. package/skinny/contexts-9475faad.esm.js.map +1 -0
  38. package/skinny/{contexts-3e42cdf9.cjs.js → contexts-b21f6b12.cjs.js} +9 -1
  39. package/skinny/contexts-b21f6b12.cjs.js.map +1 -0
  40. package/skinny/contexts.d.ts +4 -0
  41. package/skinny/{interaction-variant-utils-0f05190f.cjs.js → interaction-variant-utils-244b74fb.cjs.js} +5 -1
  42. package/skinny/interaction-variant-utils-244b74fb.cjs.js.map +1 -0
  43. package/skinny/{interaction-variant-utils-909267e5.esm.js → interaction-variant-utils-c44a9d56.esm.js} +5 -1
  44. package/skinny/interaction-variant-utils-c44a9d56.esm.js.map +1 -0
  45. package/skinny/interaction-variant-utils.d.ts +4 -0
  46. package/skinny/registerButton.cjs.js +20 -5
  47. package/skinny/registerButton.cjs.js.map +1 -1
  48. package/skinny/registerButton.d.ts +1 -0
  49. package/skinny/registerButton.esm.js +20 -6
  50. package/skinny/registerButton.esm.js.map +1 -1
  51. package/skinny/registerCheckbox.cjs.js +76 -7
  52. package/skinny/registerCheckbox.cjs.js.map +1 -1
  53. package/skinny/registerCheckbox.d.ts +8 -2
  54. package/skinny/registerCheckbox.esm.js +76 -8
  55. package/skinny/registerCheckbox.esm.js.map +1 -1
  56. package/skinny/registerCheckboxGroup.cjs.js +90 -14
  57. package/skinny/registerCheckboxGroup.cjs.js.map +1 -1
  58. package/skinny/registerCheckboxGroup.d.ts +2 -2
  59. package/skinny/registerCheckboxGroup.esm.js +89 -17
  60. package/skinny/registerCheckboxGroup.esm.js.map +1 -1
  61. package/skinny/registerComboBox.cjs.js +113 -8
  62. package/skinny/registerComboBox.cjs.js.map +1 -1
  63. package/skinny/registerComboBox.esm.js +109 -4
  64. package/skinny/registerComboBox.esm.js.map +1 -1
  65. package/skinny/registerDescription.cjs.js +10 -3
  66. package/skinny/registerDescription.cjs.js.map +1 -1
  67. package/skinny/registerDescription.d.ts +2 -1
  68. package/skinny/registerDescription.esm.js +10 -4
  69. package/skinny/registerDescription.esm.js.map +1 -1
  70. package/skinny/registerDialogTrigger.cjs.js +25 -4
  71. package/skinny/registerDialogTrigger.cjs.js.map +1 -1
  72. package/skinny/registerDialogTrigger.d.ts +1 -2
  73. package/skinny/registerDialogTrigger.esm.js +25 -4
  74. package/skinny/registerDialogTrigger.esm.js.map +1 -1
  75. package/skinny/registerFieldError.cjs.js +21 -11
  76. package/skinny/registerFieldError.cjs.js.map +1 -1
  77. package/skinny/registerFieldError.esm.js +21 -11
  78. package/skinny/registerFieldError.esm.js.map +1 -1
  79. package/skinny/registerForm.cjs.js +1 -1
  80. package/skinny/registerForm.esm.js +1 -1
  81. package/skinny/registerHeader.cjs.js +7 -3
  82. package/skinny/registerHeader.cjs.js.map +1 -1
  83. package/skinny/registerHeader.d.ts +1 -1
  84. package/skinny/registerHeader.esm.js +7 -3
  85. package/skinny/registerHeader.esm.js.map +1 -1
  86. package/skinny/registerInput.cjs.js +12 -3
  87. package/skinny/registerInput.cjs.js.map +1 -1
  88. package/skinny/registerInput.d.ts +1 -0
  89. package/skinny/registerInput.esm.js +12 -4
  90. package/skinny/registerInput.esm.js.map +1 -1
  91. package/skinny/registerLabel.cjs.js +7 -2
  92. package/skinny/registerLabel.cjs.js.map +1 -1
  93. package/skinny/registerLabel.d.ts +1 -0
  94. package/skinny/registerLabel.esm.js +7 -3
  95. package/skinny/registerLabel.esm.js.map +1 -1
  96. package/skinny/registerListBox-1effa43d.esm.js +299 -0
  97. package/skinny/registerListBox-1effa43d.esm.js.map +1 -0
  98. package/skinny/registerListBox-837b90d8.cjs.js +311 -0
  99. package/skinny/registerListBox-837b90d8.cjs.js.map +1 -0
  100. package/skinny/registerListBox.cjs.js +14 -108
  101. package/skinny/registerListBox.cjs.js.map +1 -1
  102. package/skinny/registerListBox.d.ts +3 -6
  103. package/skinny/registerListBox.esm.js +11 -106
  104. package/skinny/registerListBox.esm.js.map +1 -1
  105. package/skinny/registerListBoxItem.cjs.js +49 -5
  106. package/skinny/registerListBoxItem.cjs.js.map +1 -1
  107. package/skinny/registerListBoxItem.d.ts +3 -1
  108. package/skinny/registerListBoxItem.esm.js +49 -6
  109. package/skinny/registerListBoxItem.esm.js.map +1 -1
  110. package/skinny/registerModal.cjs.js +78 -9
  111. package/skinny/registerModal.cjs.js.map +1 -1
  112. package/skinny/registerModal.d.ts +3 -1
  113. package/skinny/registerModal.esm.js +78 -10
  114. package/skinny/registerModal.esm.js.map +1 -1
  115. package/skinny/registerPopover.cjs.js +56 -4
  116. package/skinny/registerPopover.cjs.js.map +1 -1
  117. package/skinny/registerPopover.d.ts +3 -0
  118. package/skinny/registerPopover.esm.js +55 -5
  119. package/skinny/registerPopover.esm.js.map +1 -1
  120. package/skinny/registerRadio.cjs.js +54 -24
  121. package/skinny/registerRadio.cjs.js.map +1 -1
  122. package/skinny/registerRadio.d.ts +5 -2
  123. package/skinny/registerRadio.esm.js +54 -25
  124. package/skinny/registerRadio.esm.js.map +1 -1
  125. package/skinny/registerRadioGroup.cjs.js +82 -17
  126. package/skinny/registerRadioGroup.cjs.js.map +1 -1
  127. package/skinny/registerRadioGroup.d.ts +3 -3
  128. package/skinny/registerRadioGroup.esm.js +81 -20
  129. package/skinny/registerRadioGroup.esm.js.map +1 -1
  130. package/skinny/registerSection.cjs.js +36 -12
  131. package/skinny/registerSection.cjs.js.map +1 -1
  132. package/skinny/registerSection.d.ts +1 -1
  133. package/skinny/registerSection.esm.js +36 -12
  134. package/skinny/registerSection.esm.js.map +1 -1
  135. package/skinny/registerSelect.cjs.js +133 -30
  136. package/skinny/registerSelect.cjs.js.map +1 -1
  137. package/skinny/registerSelect.d.ts +5 -2
  138. package/skinny/registerSelect.esm.js +130 -25
  139. package/skinny/registerSelect.esm.js.map +1 -1
  140. package/skinny/registerSlider-39783c91.esm.js +425 -0
  141. package/skinny/registerSlider-39783c91.esm.js.map +1 -0
  142. package/skinny/registerSlider-ac9f3b1e.cjs.js +437 -0
  143. package/skinny/registerSlider-ac9f3b1e.cjs.js.map +1 -0
  144. package/skinny/registerSlider.cjs.js +23 -0
  145. package/skinny/registerSlider.cjs.js.map +1 -0
  146. package/skinny/registerSlider.d.ts +14 -0
  147. package/skinny/registerSlider.esm.js +15 -0
  148. package/skinny/registerSlider.esm.js.map +1 -0
  149. package/skinny/registerSliderOutput.cjs.js +30 -0
  150. package/skinny/registerSliderOutput.cjs.js.map +1 -0
  151. package/skinny/registerSliderOutput.d.ts +5 -0
  152. package/skinny/registerSliderOutput.esm.js +26 -0
  153. package/skinny/registerSliderOutput.esm.js.map +1 -0
  154. package/skinny/registerSliderThumb.cjs.js +119 -0
  155. package/skinny/registerSliderThumb.cjs.js.map +1 -0
  156. package/skinny/registerSliderThumb.d.ts +13 -0
  157. package/skinny/registerSliderThumb.esm.js +111 -0
  158. package/skinny/registerSliderThumb.esm.js.map +1 -0
  159. package/skinny/registerSliderTrack.cjs.js +23 -0
  160. package/skinny/registerSliderTrack.cjs.js.map +1 -0
  161. package/skinny/registerSliderTrack.d.ts +14 -0
  162. package/skinny/registerSliderTrack.esm.js +15 -0
  163. package/skinny/registerSliderTrack.esm.js.map +1 -0
  164. package/skinny/registerSwitch.cjs.js +84 -4
  165. package/skinny/registerSwitch.cjs.js.map +1 -1
  166. package/skinny/registerSwitch.esm.js +84 -4
  167. package/skinny/registerSwitch.esm.js.map +1 -1
  168. package/skinny/registerText.cjs.js +11 -4
  169. package/skinny/registerText.cjs.js.map +1 -1
  170. package/skinny/registerText.d.ts +2 -1
  171. package/skinny/registerText.esm.js +11 -5
  172. package/skinny/registerText.esm.js.map +1 -1
  173. package/skinny/registerTextArea.cjs.js +2 -2
  174. package/skinny/registerTextArea.esm.js +2 -2
  175. package/skinny/registerTextField.cjs.js +48 -7
  176. package/skinny/registerTextField.cjs.js.map +1 -1
  177. package/skinny/registerTextField.d.ts +1 -0
  178. package/skinny/registerTextField.esm.js +51 -11
  179. package/skinny/registerTextField.esm.js.map +1 -1
  180. package/skinny/registerTooltip.cjs.js +1 -1
  181. package/skinny/registerTooltip.esm.js +1 -1
  182. package/skinny/{utils-cf2632c9.esm.js → utils-5051df41.esm.js} +3 -2
  183. package/skinny/utils-5051df41.esm.js.map +1 -0
  184. package/skinny/{utils-18b2465b.cjs.js → utils-745db876.cjs.js} +2 -1
  185. package/skinny/utils-745db876.cjs.js.map +1 -0
  186. package/skinny/utils.d.ts +9 -2
  187. package/skinny/contexts-3e42cdf9.cjs.js.map +0 -1
  188. package/skinny/contexts-49f6c298.esm.js +0 -12
  189. package/skinny/contexts-49f6c298.esm.js.map +0 -1
  190. package/skinny/interaction-variant-utils-0f05190f.cjs.js.map +0 -1
  191. package/skinny/interaction-variant-utils-909267e5.esm.js.map +0 -1
  192. package/skinny/option-utils-4f037568.esm.js +0 -153
  193. package/skinny/option-utils-4f037568.esm.js.map +0 -1
  194. package/skinny/option-utils-5e4e85bd.cjs.js +0 -162
  195. package/skinny/option-utils-5e4e85bd.cjs.js.map +0 -1
  196. package/skinny/utils-18b2465b.cjs.js.map +0 -1
  197. package/skinny/utils-cf2632c9.esm.js.map +0 -1
@@ -3,9 +3,20 @@
3
3
  var host = require('@plasmicapp/host');
4
4
  var React = require('react');
5
5
  var reactAriaComponents = require('react-aria-components');
6
- var contexts = require('./contexts-3e42cdf9.cjs.js');
7
- var optionUtils = require('./option-utils-5e4e85bd.cjs.js');
8
- var utils = require('./utils-18b2465b.cjs.js');
6
+ var contexts = require('./contexts-b21f6b12.cjs.js');
7
+ var registerListBox = require('./registerListBox-837b90d8.cjs.js');
8
+ var registerButton = require('./registerButton.cjs.js');
9
+ var registerLabel = require('./registerLabel.cjs.js');
10
+ var registerPopover = require('./registerPopover.cjs.js');
11
+ var utils = require('./utils-745db876.cjs.js');
12
+ require('@react-aria/utils');
13
+ require('./registerListBoxItem.cjs.js');
14
+ require('./registerDescription.cjs.js');
15
+ require('./registerText.cjs.js');
16
+ require('./registerSection.cjs.js');
17
+ require('./registerHeader.cjs.js');
18
+ require('./common-e74a9214.cjs.js');
19
+ require('./interaction-variant-utils-244b74fb.cjs.js');
9
20
  require('@plasmicapp/host/registerComponent');
10
21
 
11
22
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,6 +39,10 @@ var __spreadValues = (a, b) => {
28
39
  }
29
40
  return a;
30
41
  };
42
+ const BaseSelectValue = (props) => {
43
+ const { children, customize } = props;
44
+ return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.SelectValue, null, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, isPlaceholder ? /* @__PURE__ */ React__default.default.createElement("span", null, "Select an item") : /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("span", null, customize ? children : selectedText))));
45
+ };
31
46
  const SELECT_NAME = utils.makeComponentName("select");
32
47
  function BaseSelect(props) {
33
48
  const {
@@ -43,9 +58,9 @@ function BaseSelect(props) {
43
58
  name,
44
59
  "aria-label": ariaLabel
45
60
  } = props;
46
- const { options } = optionUtils.useStrictOptions(props);
61
+ const { options } = registerListBox.useStrictOptions(props);
47
62
  const canvas = host.usePlasmicCanvasContext();
48
- const disabledKeys = optionUtils.flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.id);
63
+ const disabledKeys = registerListBox.flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.id);
49
64
  return /* @__PURE__ */ React__default.default.createElement(
50
65
  reactAriaComponents.Select,
51
66
  __spreadValues(__spreadValues({
@@ -72,20 +87,52 @@ function BaseSelect(props) {
72
87
  );
73
88
  }
74
89
  function registerSelect(loader) {
90
+ const selectValueMeta = utils.registerComponentHelper(loader, BaseSelectValue, {
91
+ name: utils.makeComponentName("select-value"),
92
+ displayName: "Aria Selected Value",
93
+ importPath: "@plasmicpkgs/react-aria/registerSelect",
94
+ importName: "SelectValue",
95
+ parentComponentName: SELECT_NAME,
96
+ props: {
97
+ customize: {
98
+ type: "boolean",
99
+ advanced: true,
100
+ description: "Whether to customize the selected value display"
101
+ },
102
+ children: {
103
+ type: "slot",
104
+ defaultValue: [
105
+ {
106
+ type: "text",
107
+ value: "Selected value..."
108
+ }
109
+ ]
110
+ },
111
+ className: {
112
+ type: "class",
113
+ selectors: [
114
+ {
115
+ selector: ":self[data-placeholder]",
116
+ label: "Placeholder"
117
+ }
118
+ ]
119
+ }
120
+ }
121
+ });
75
122
  utils.registerComponentHelper(loader, BaseSelect, {
76
123
  name: SELECT_NAME,
77
124
  displayName: "Aria Select",
78
125
  importPath: "@plasmicpkgs/react-aria/skinny/registerSelect",
79
126
  importName: "BaseSelect",
80
127
  props: {
81
- options: optionUtils.makeOptionsPropType(),
128
+ options: registerListBox.makeOptionsPropType(),
82
129
  placeholder: {
83
130
  type: "string"
84
131
  },
85
132
  isDisabled: {
86
133
  type: "boolean"
87
134
  },
88
- value: optionUtils.makeValuePropType(),
135
+ value: registerListBox.makeValuePropType(),
89
136
  onChange: {
90
137
  type: "eventHandler",
91
138
  argTypes: [{ name: "value", type: "string" }]
@@ -134,7 +181,84 @@ function registerSelect(loader) {
134
181
  // "Return a function that takes in an option object, and returns true if option should be disabled",
135
182
  // },
136
183
  structure: {
137
- type: "slot"
184
+ type: "slot",
185
+ defaultValue: [
186
+ {
187
+ type: "vbox",
188
+ styles: {
189
+ justifyContent: "flex-start",
190
+ alignItems: "flex-start",
191
+ width: "300px",
192
+ padding: 0
193
+ },
194
+ children: [
195
+ {
196
+ type: "component",
197
+ name: registerLabel.LABEL_COMPONENT_NAME,
198
+ props: {
199
+ children: {
200
+ type: "text",
201
+ value: "Label"
202
+ }
203
+ }
204
+ },
205
+ {
206
+ type: "component",
207
+ name: registerButton.BUTTON_COMPONENT_NAME,
208
+ styles: {
209
+ width: "100%"
210
+ },
211
+ props: {
212
+ children: {
213
+ type: "hbox",
214
+ styles: {
215
+ width: "stretch",
216
+ justifyContent: "space-between",
217
+ alignItems: "center",
218
+ padding: "2px 5px"
219
+ },
220
+ children: [
221
+ {
222
+ type: "component",
223
+ name: selectValueMeta.name
224
+ },
225
+ {
226
+ type: "img",
227
+ src: "https://static1.plasmic.app/arrow-up.svg",
228
+ styles: {
229
+ height: "20px",
230
+ width: "20px",
231
+ transform: "rotate(180deg)"
232
+ }
233
+ }
234
+ ]
235
+ }
236
+ }
237
+ },
238
+ {
239
+ type: "component",
240
+ name: registerPopover.POPOVER_COMPONENT_NAME,
241
+ styles: {
242
+ backgroundColor: "white",
243
+ padding: "10px",
244
+ overflow: "scroll"
245
+ },
246
+ props: {
247
+ children: [
248
+ {
249
+ type: "component",
250
+ name: registerListBox.LIST_BOX_COMPONENT_NAME,
251
+ styles: {
252
+ borderWidth: 0,
253
+ width: "stretch"
254
+ }
255
+ }
256
+ ]
257
+ }
258
+ }
259
+ ]
260
+ }
261
+ ]
138
262
  },
139
263
  // renderOption: {
140
264
  // type: "slot",
@@ -169,30 +293,9 @@ function registerSelect(loader) {
169
293
  }
170
294
  }
171
295
  });
172
- utils.registerComponentHelper(loader, reactAriaComponents.SelectValue, {
173
- name: utils.makeComponentName("select-value"),
174
- displayName: "Aria Selected Value",
175
- importPath: "@plasmicpkgs/react-aria/registerSelect",
176
- importName: "SelectValue",
177
- parentComponentName: SELECT_NAME,
178
- props: {
179
- className: {
180
- type: "class",
181
- selectors: [
182
- {
183
- selector: ":self[data-placeholder]",
184
- label: "Placeholder"
185
- }
186
- ]
187
- }
188
- }
189
- });
190
296
  }
191
297
 
192
- Object.defineProperty(exports, 'BaseSelectValue', {
193
- enumerable: true,
194
- get: function () { return reactAriaComponents.SelectValue; }
195
- });
196
298
  exports.BaseSelect = BaseSelect;
299
+ exports.BaseSelectValue = BaseSelectValue;
197
300
  exports.registerSelect = registerSelect;
198
301
  //# sourceMappingURL=registerSelect.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"registerSelect.cjs.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport {\n SelectValue as BaseSelectValue,\n Key,\n Select,\n} from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport {\n flattenOptions,\n HasOptions,\n makeOptionsPropType,\n makeValuePropType,\n useStrictOptions,\n} from \"./option-utils\";\nimport {\n extractPlasmicDataProps,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n Styleable,\n} from \"./utils\";\n\nexport { BaseSelectValue };\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectProps<T extends object>\n extends HasOptions<T>,\n Styleable {\n placeholder?: string;\n isDisabled?: boolean;\n\n value?: Key;\n onChange?: (value: Key) => void;\n\n previewOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n structure?: React.ReactNode;\n\n name?: string;\n \"aria-label\"?: string;\n\n renderOption?: (item: {\n value: string;\n label?: string;\n isDisabled?: boolean;\n }) => React.ReactNode;\n}\n\nexport function BaseSelect<T extends object>(props: BaseSelectProps<T>) {\n const {\n value,\n onChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n structure,\n name,\n \"aria-label\": ariaLabel,\n } = props;\n\n const { options } = useStrictOptions(props);\n\n const canvas = usePlasmicCanvasContext();\n\n const disabledKeys = flattenOptions(options)\n .filter((op) => op.isDisabled)\n .map((op) => op.id);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={value}\n onSelectionChange={onChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n aria-label={ariaLabel}\n {...(previewOpen && canvas ? { isOpen: previewOpen } : undefined)}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicListBoxContext.Provider\n value={{\n items: options,\n disabledKeys: disabledKeys,\n }}\n >\n {structure}\n </PlasmicListBoxContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n options: makeOptionsPropType(),\n placeholder: {\n type: \"string\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n value: makeValuePropType(),\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n // optionValue: {\n // type: \"string\",\n // displayName: \"Field key for an option's value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the key to use\",\n // },\n // optionText: {\n // type: \"string\",\n // displayName: \"Field key for an option's text value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the text value to use\",\n // },\n // optionDisabled: {\n // type: \"string\",\n // displayName: \"Field key for whether an option is disabled\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns true if option should be disabled\",\n // },\n\n structure: {\n type: \"slot\",\n },\n\n // renderOption: {\n // type: \"slot\",\n // displayName: \"Custom render option\",\n // renderPropParams: [\"item\"],\n // hidePlaceholder: true\n // },\n\n name: {\n type: \"string\",\n displayName: \"Form field key\",\n description: \"Name of the input, when submitting in an HTML form\",\n advanced: true,\n },\n\n \"aria-label\": {\n type: \"string\",\n displayName: \"Aria Label\",\n description: \"Label for this input, if no visible label is used\",\n advanced: true,\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"readonly\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n });\n\n registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/registerSelect\",\n importName: \"SelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n });\n}\n"],"names":["makeComponentName","useStrictOptions","usePlasmicCanvasContext","flattenOptions","React","Select","extractPlasmicDataProps","PlasmicListBoxContext","registerComponentHelper","makeOptionsPropType","makeValuePropType","BaseSelectValue"],"mappings":"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"}
1
+ {"version":3,"file":"registerSelect.cjs.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { Key, Select, SelectValue } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport {\n flattenOptions,\n HasOptions,\n makeOptionsPropType,\n makeValuePropType,\n useStrictOptions,\n} from \"./option-utils\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n Styleable,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectProps<T extends object>\n extends HasOptions<T>,\n Styleable {\n placeholder?: string;\n isDisabled?: boolean;\n\n value?: Key;\n onChange?: (value: Key) => void;\n\n previewOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n structure?: React.ReactNode;\n\n name?: string;\n \"aria-label\"?: string;\n\n renderOption?: (item: {\n value: string;\n label?: string;\n isDisabled?: boolean;\n }) => React.ReactNode;\n}\n\nexport function BaseSelect<T extends object>(props: BaseSelectProps<T>) {\n const {\n value,\n onChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n structure,\n name,\n \"aria-label\": ariaLabel,\n } = props;\n\n const { options } = useStrictOptions(props);\n\n const canvas = usePlasmicCanvasContext();\n\n const disabledKeys = flattenOptions(options)\n .filter((op) => op.isDisabled)\n .map((op) => op.id);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={value}\n onSelectionChange={onChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n aria-label={ariaLabel}\n {...(previewOpen && canvas ? { isOpen: previewOpen } : undefined)}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicListBoxContext.Provider\n value={{\n items: options,\n disabledKeys: disabledKeys,\n }}\n >\n {structure}\n </PlasmicListBoxContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/registerSelect\",\n importName: \"SelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n advanced: true,\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n options: makeOptionsPropType(),\n placeholder: {\n type: \"string\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n value: makeValuePropType(),\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n // optionValue: {\n // type: \"string\",\n // displayName: \"Field key for an option's value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the key to use\",\n // },\n // optionText: {\n // type: \"string\",\n // displayName: \"Field key for an option's text value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the text value to use\",\n // },\n // optionDisabled: {\n // type: \"string\",\n // displayName: \"Field key for whether an option is disabled\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns true if option should be disabled\",\n // },\n\n structure: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\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: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\n },\n },\n ],\n },\n },\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n\n // renderOption: {\n // type: \"slot\",\n // displayName: \"Custom render option\",\n // renderPropParams: [\"item\"],\n // hidePlaceholder: true\n // },\n\n name: {\n type: \"string\",\n displayName: \"Form field key\",\n description: \"Name of the input, when submitting in an HTML form\",\n advanced: true,\n },\n\n \"aria-label\": {\n type: \"string\",\n displayName: \"Aria Label\",\n description: \"Label for this input, if no visible label is used\",\n advanced: true,\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"readonly\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n });\n}\n"],"names":["React","SelectValue","makeComponentName","useStrictOptions","usePlasmicCanvasContext","flattenOptions","Select","extractPlasmicDataProps","PlasmicListBoxContext","registerComponentHelper","makeOptionsPropType","makeValuePropType","LABEL_COMPONENT_NAME","BUTTON_COMPONENT_NAME","POPOVER_COMPONENT_NAME","LIST_BOX_COMPONENT_NAME"],"mappings":"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"}
@@ -1,8 +1,11 @@
1
1
  import React from "react";
2
- import { SelectValue as BaseSelectValue, Key } from "react-aria-components";
2
+ import { Key, SelectValue } from "react-aria-components";
3
3
  import { HasOptions } from "./option-utils";
4
4
  import { Registerable, Styleable } from "./utils";
5
- export { BaseSelectValue };
5
+ export interface BaseSelectValueProps extends React.ComponentProps<typeof SelectValue> {
6
+ customize?: boolean;
7
+ }
8
+ export declare const BaseSelectValue: (props: BaseSelectValueProps) => React.JSX.Element;
6
9
  export interface BaseSelectProps<T extends object> extends HasOptions<T>, Styleable {
7
10
  placeholder?: string;
8
11
  isDisabled?: boolean;
@@ -1,10 +1,20 @@
1
1
  import { usePlasmicCanvasContext } from '@plasmicapp/host';
2
2
  import React from 'react';
3
- import { Select, SelectValue } from 'react-aria-components';
4
- export { SelectValue as BaseSelectValue } from 'react-aria-components';
5
- import { P as PlasmicListBoxContext } from './contexts-49f6c298.esm.js';
6
- import { u as useStrictOptions, f as flattenOptions, m as makeOptionsPropType, a as makeValuePropType } from './option-utils-4f037568.esm.js';
7
- import { e as extractPlasmicDataProps, r as registerComponentHelper, m as makeComponentName } from './utils-cf2632c9.esm.js';
3
+ import { SelectValue, Select } from 'react-aria-components';
4
+ import { a as PlasmicListBoxContext } from './contexts-9475faad.esm.js';
5
+ import { u as useStrictOptions, f as flattenOptions, m as makeOptionsPropType, a as makeValuePropType, L as LIST_BOX_COMPONENT_NAME } from './registerListBox-1effa43d.esm.js';
6
+ import { BUTTON_COMPONENT_NAME } from './registerButton.esm.js';
7
+ import { LABEL_COMPONENT_NAME } from './registerLabel.esm.js';
8
+ import { POPOVER_COMPONENT_NAME } from './registerPopover.esm.js';
9
+ import { e as extractPlasmicDataProps, r as registerComponentHelper, a as makeComponentName } from './utils-5051df41.esm.js';
10
+ import '@react-aria/utils';
11
+ import './registerListBoxItem.esm.js';
12
+ import './registerDescription.esm.js';
13
+ import './registerText.esm.js';
14
+ import './registerSection.esm.js';
15
+ import './registerHeader.esm.js';
16
+ import './common-52c26d37.esm.js';
17
+ import './interaction-variant-utils-c44a9d56.esm.js';
8
18
  import '@plasmicapp/host/registerComponent';
9
19
 
10
20
  var __defProp = Object.defineProperty;
@@ -23,6 +33,10 @@ var __spreadValues = (a, b) => {
23
33
  }
24
34
  return a;
25
35
  };
36
+ const BaseSelectValue = (props) => {
37
+ const { children, customize } = props;
38
+ return /* @__PURE__ */ React.createElement(SelectValue, null, ({ isPlaceholder, selectedText }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isPlaceholder ? /* @__PURE__ */ React.createElement("span", null, "Select an item") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", null, customize ? children : selectedText))));
39
+ };
26
40
  const SELECT_NAME = makeComponentName("select");
27
41
  function BaseSelect(props) {
28
42
  const {
@@ -67,6 +81,38 @@ function BaseSelect(props) {
67
81
  );
68
82
  }
69
83
  function registerSelect(loader) {
84
+ const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {
85
+ name: makeComponentName("select-value"),
86
+ displayName: "Aria Selected Value",
87
+ importPath: "@plasmicpkgs/react-aria/registerSelect",
88
+ importName: "SelectValue",
89
+ parentComponentName: SELECT_NAME,
90
+ props: {
91
+ customize: {
92
+ type: "boolean",
93
+ advanced: true,
94
+ description: "Whether to customize the selected value display"
95
+ },
96
+ children: {
97
+ type: "slot",
98
+ defaultValue: [
99
+ {
100
+ type: "text",
101
+ value: "Selected value..."
102
+ }
103
+ ]
104
+ },
105
+ className: {
106
+ type: "class",
107
+ selectors: [
108
+ {
109
+ selector: ":self[data-placeholder]",
110
+ label: "Placeholder"
111
+ }
112
+ ]
113
+ }
114
+ }
115
+ });
70
116
  registerComponentHelper(loader, BaseSelect, {
71
117
  name: SELECT_NAME,
72
118
  displayName: "Aria Select",
@@ -129,7 +175,84 @@ function registerSelect(loader) {
129
175
  // "Return a function that takes in an option object, and returns true if option should be disabled",
130
176
  // },
131
177
  structure: {
132
- type: "slot"
178
+ type: "slot",
179
+ defaultValue: [
180
+ {
181
+ type: "vbox",
182
+ styles: {
183
+ justifyContent: "flex-start",
184
+ alignItems: "flex-start",
185
+ width: "300px",
186
+ padding: 0
187
+ },
188
+ children: [
189
+ {
190
+ type: "component",
191
+ name: LABEL_COMPONENT_NAME,
192
+ props: {
193
+ children: {
194
+ type: "text",
195
+ value: "Label"
196
+ }
197
+ }
198
+ },
199
+ {
200
+ type: "component",
201
+ name: BUTTON_COMPONENT_NAME,
202
+ styles: {
203
+ width: "100%"
204
+ },
205
+ props: {
206
+ children: {
207
+ type: "hbox",
208
+ styles: {
209
+ width: "stretch",
210
+ justifyContent: "space-between",
211
+ alignItems: "center",
212
+ padding: "2px 5px"
213
+ },
214
+ children: [
215
+ {
216
+ type: "component",
217
+ name: selectValueMeta.name
218
+ },
219
+ {
220
+ type: "img",
221
+ src: "https://static1.plasmic.app/arrow-up.svg",
222
+ styles: {
223
+ height: "20px",
224
+ width: "20px",
225
+ transform: "rotate(180deg)"
226
+ }
227
+ }
228
+ ]
229
+ }
230
+ }
231
+ },
232
+ {
233
+ type: "component",
234
+ name: POPOVER_COMPONENT_NAME,
235
+ styles: {
236
+ backgroundColor: "white",
237
+ padding: "10px",
238
+ overflow: "scroll"
239
+ },
240
+ props: {
241
+ children: [
242
+ {
243
+ type: "component",
244
+ name: LIST_BOX_COMPONENT_NAME,
245
+ styles: {
246
+ borderWidth: 0,
247
+ width: "stretch"
248
+ }
249
+ }
250
+ ]
251
+ }
252
+ }
253
+ ]
254
+ }
255
+ ]
133
256
  },
134
257
  // renderOption: {
135
258
  // type: "slot",
@@ -164,25 +287,7 @@ function registerSelect(loader) {
164
287
  }
165
288
  }
166
289
  });
167
- registerComponentHelper(loader, SelectValue, {
168
- name: makeComponentName("select-value"),
169
- displayName: "Aria Selected Value",
170
- importPath: "@plasmicpkgs/react-aria/registerSelect",
171
- importName: "SelectValue",
172
- parentComponentName: SELECT_NAME,
173
- props: {
174
- className: {
175
- type: "class",
176
- selectors: [
177
- {
178
- selector: ":self[data-placeholder]",
179
- label: "Placeholder"
180
- }
181
- ]
182
- }
183
- }
184
- });
185
290
  }
186
291
 
187
- export { BaseSelect, registerSelect };
292
+ export { BaseSelect, BaseSelectValue, registerSelect };
188
293
  //# sourceMappingURL=registerSelect.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"registerSelect.esm.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport {\n SelectValue as BaseSelectValue,\n Key,\n Select,\n} from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport {\n flattenOptions,\n HasOptions,\n makeOptionsPropType,\n makeValuePropType,\n useStrictOptions,\n} from \"./option-utils\";\nimport {\n extractPlasmicDataProps,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n Styleable,\n} from \"./utils\";\n\nexport { BaseSelectValue };\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectProps<T extends object>\n extends HasOptions<T>,\n Styleable {\n placeholder?: string;\n isDisabled?: boolean;\n\n value?: Key;\n onChange?: (value: Key) => void;\n\n previewOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n structure?: React.ReactNode;\n\n name?: string;\n \"aria-label\"?: string;\n\n renderOption?: (item: {\n value: string;\n label?: string;\n isDisabled?: boolean;\n }) => React.ReactNode;\n}\n\nexport function BaseSelect<T extends object>(props: BaseSelectProps<T>) {\n const {\n value,\n onChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n structure,\n name,\n \"aria-label\": ariaLabel,\n } = props;\n\n const { options } = useStrictOptions(props);\n\n const canvas = usePlasmicCanvasContext();\n\n const disabledKeys = flattenOptions(options)\n .filter((op) => op.isDisabled)\n .map((op) => op.id);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={value}\n onSelectionChange={onChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n aria-label={ariaLabel}\n {...(previewOpen && canvas ? { isOpen: previewOpen } : undefined)}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicListBoxContext.Provider\n value={{\n items: options,\n disabledKeys: disabledKeys,\n }}\n >\n {structure}\n </PlasmicListBoxContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n options: makeOptionsPropType(),\n placeholder: {\n type: \"string\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n value: makeValuePropType(),\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n // optionValue: {\n // type: \"string\",\n // displayName: \"Field key for an option's value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the key to use\",\n // },\n // optionText: {\n // type: \"string\",\n // displayName: \"Field key for an option's text value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the text value to use\",\n // },\n // optionDisabled: {\n // type: \"string\",\n // displayName: \"Field key for whether an option is disabled\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns true if option should be disabled\",\n // },\n\n structure: {\n type: \"slot\",\n },\n\n // renderOption: {\n // type: \"slot\",\n // displayName: \"Custom render option\",\n // renderPropParams: [\"item\"],\n // hidePlaceholder: true\n // },\n\n name: {\n type: \"string\",\n displayName: \"Form field key\",\n description: \"Name of the input, when submitting in an HTML form\",\n advanced: true,\n },\n\n \"aria-label\": {\n type: \"string\",\n displayName: \"Aria Label\",\n description: \"Label for this input, if no visible label is used\",\n advanced: true,\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"readonly\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n });\n\n registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/registerSelect\",\n importName: \"SelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n });\n}\n"],"names":["BaseSelectValue"],"mappings":"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"}
1
+ {"version":3,"file":"registerSelect.esm.js","sources":["../src/registerSelect.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport React from \"react\";\nimport { Key, Select, SelectValue } from \"react-aria-components\";\nimport { PlasmicListBoxContext } from \"./contexts\";\nimport {\n flattenOptions,\n HasOptions,\n makeOptionsPropType,\n makeValuePropType,\n useStrictOptions,\n} from \"./option-utils\";\nimport { BUTTON_COMPONENT_NAME } from \"./registerButton\";\nimport { LABEL_COMPONENT_NAME } from \"./registerLabel\";\nimport { LIST_BOX_COMPONENT_NAME } from \"./registerListBox\";\nimport { POPOVER_COMPONENT_NAME } from \"./registerPopover\";\nimport {\n extractPlasmicDataProps,\n makeComponentName,\n Registerable,\n registerComponentHelper,\n Styleable,\n} from \"./utils\";\n\nexport interface BaseSelectValueProps\n extends React.ComponentProps<typeof SelectValue> {\n customize?: boolean;\n}\n\nexport const BaseSelectValue = (props: BaseSelectValueProps) => {\n const { children, customize } = props;\n return (\n <SelectValue>\n {({ isPlaceholder, selectedText }) => (\n <>\n {isPlaceholder ? (\n <span>Select an item</span>\n ) : (\n <>\n <span>\n {customize ? (children as React.ReactNode) : selectedText}\n </span>\n </>\n )}\n {}\n </>\n )}\n </SelectValue>\n );\n};\n\nconst SELECT_NAME = makeComponentName(\"select\");\n\nexport interface BaseSelectProps<T extends object>\n extends HasOptions<T>,\n Styleable {\n placeholder?: string;\n isDisabled?: boolean;\n\n value?: Key;\n onChange?: (value: Key) => void;\n\n previewOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n structure?: React.ReactNode;\n\n name?: string;\n \"aria-label\"?: string;\n\n renderOption?: (item: {\n value: string;\n label?: string;\n isDisabled?: boolean;\n }) => React.ReactNode;\n}\n\nexport function BaseSelect<T extends object>(props: BaseSelectProps<T>) {\n const {\n value,\n onChange,\n placeholder,\n previewOpen,\n onOpenChange,\n isDisabled,\n className,\n style,\n structure,\n name,\n \"aria-label\": ariaLabel,\n } = props;\n\n const { options } = useStrictOptions(props);\n\n const canvas = usePlasmicCanvasContext();\n\n const disabledKeys = flattenOptions(options)\n .filter((op) => op.isDisabled)\n .map((op) => op.id);\n\n return (\n <Select\n placeholder={placeholder}\n selectedKey={value}\n onSelectionChange={onChange}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n className={className}\n style={style}\n name={name}\n aria-label={ariaLabel}\n {...(previewOpen && canvas ? { isOpen: previewOpen } : undefined)}\n {...extractPlasmicDataProps(props)}\n >\n <PlasmicListBoxContext.Provider\n value={{\n items: options,\n disabledKeys: disabledKeys,\n }}\n >\n {structure}\n </PlasmicListBoxContext.Provider>\n </Select>\n );\n}\n\nexport function registerSelect(loader?: Registerable) {\n const selectValueMeta = registerComponentHelper(loader, BaseSelectValue, {\n name: makeComponentName(\"select-value\"),\n displayName: \"Aria Selected Value\",\n importPath: \"@plasmicpkgs/react-aria/registerSelect\",\n importName: \"SelectValue\",\n parentComponentName: SELECT_NAME,\n props: {\n customize: {\n type: \"boolean\",\n advanced: true,\n description: \"Whether to customize the selected value display\",\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"text\",\n value: \"Selected value...\",\n },\n ],\n },\n className: {\n type: \"class\",\n selectors: [\n {\n selector: \":self[data-placeholder]\",\n label: \"Placeholder\",\n },\n ],\n },\n },\n });\n\n registerComponentHelper(loader, BaseSelect, {\n name: SELECT_NAME,\n displayName: \"Aria Select\",\n importPath: \"@plasmicpkgs/react-aria/skinny/registerSelect\",\n importName: \"BaseSelect\",\n props: {\n options: makeOptionsPropType(),\n placeholder: {\n type: \"string\",\n },\n isDisabled: {\n type: \"boolean\",\n },\n value: makeValuePropType(),\n onChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"value\", type: \"string\" }],\n },\n previewOpen: {\n type: \"boolean\",\n displayName: \"Preview opened?\",\n description: \"Preview opened state while designing in Plasmic editor\",\n editOnly: true,\n },\n onOpenChange: {\n type: \"eventHandler\",\n argTypes: [{ name: \"isOpen\", type: \"boolean\" }],\n },\n // optionValue: {\n // type: \"string\",\n // displayName: \"Field key for an option's value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the key to use\",\n // },\n // optionText: {\n // type: \"string\",\n // displayName: \"Field key for an option's text value\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns the text value to use\",\n // },\n // optionDisabled: {\n // type: \"string\",\n // displayName: \"Field key for whether an option is disabled\",\n // hidden: (ps) =>\n // !ps.options ||\n // !ps.options[0] ||\n // typeof ps.options[0] === \"string\" ||\n // \"value\" in ps.options[0],\n // exprHint:\n // \"Return a function that takes in an option object, and returns true if option should be disabled\",\n // },\n\n structure: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"vbox\",\n styles: {\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n width: \"300px\",\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: BUTTON_COMPONENT_NAME,\n styles: {\n width: \"100%\",\n },\n props: {\n children: {\n type: \"hbox\",\n styles: {\n width: \"stretch\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"2px 5px\",\n },\n children: [\n {\n type: \"component\",\n name: selectValueMeta.name,\n },\n {\n type: \"img\",\n src: \"https://static1.plasmic.app/arrow-up.svg\",\n styles: {\n height: \"20px\",\n width: \"20px\",\n transform: \"rotate(180deg)\",\n },\n },\n ],\n },\n },\n },\n {\n type: \"component\",\n name: POPOVER_COMPONENT_NAME,\n styles: {\n backgroundColor: \"white\",\n padding: \"10px\",\n overflow: \"scroll\",\n },\n props: {\n children: [\n {\n type: \"component\",\n name: LIST_BOX_COMPONENT_NAME,\n styles: {\n borderWidth: 0,\n width: \"stretch\",\n },\n },\n ],\n },\n },\n ],\n },\n ],\n },\n\n // renderOption: {\n // type: \"slot\",\n // displayName: \"Custom render option\",\n // renderPropParams: [\"item\"],\n // hidePlaceholder: true\n // },\n\n name: {\n type: \"string\",\n displayName: \"Form field key\",\n description: \"Name of the input, when submitting in an HTML form\",\n advanced: true,\n },\n\n \"aria-label\": {\n type: \"string\",\n displayName: \"Aria Label\",\n description: \"Label for this input, if no visible label is used\",\n advanced: true,\n },\n },\n states: {\n value: {\n type: \"writable\",\n valueProp: \"value\",\n onChangeProp: \"onChange\",\n variableType: \"text\",\n },\n isOpen: {\n type: \"readonly\",\n onChangeProp: \"onOpenChange\",\n variableType: \"boolean\",\n },\n },\n });\n}\n"],"names":[],"mappings":"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"}