@plasmicpkgs/react-aria 0.0.2

package/dist/react-aria.js

@@ -0,0 +1,1198 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+var registerComponent = require('@plasmicapp/host/registerComponent');
+var i18n = require('@react-aria/i18n');
+var React = require('react');
+var utils = require('@react-aria/utils');
+var host = require('@plasmicapp/host');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp$9 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+function registerComponentHelper(loader, component, meta, overrides) {
+  if (overrides) {
+    meta = __spreadProps$3(__spreadValues$9(__spreadValues$9({}, meta), overrides), {
+      props: __spreadValues$9(__spreadValues$9({}, meta.props), overrides.props)
+    });
+    if (overrides.parentComponentName) {
+      meta.name = makeChildComponentName(
+        overrides.parentComponentName,
+        meta.name
+      );
+    }
+  }
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent__default.default(component, meta);
+  }
+}
+function makeComponentName(name) {
+  return `plasmic-react-aria-${name}`;
+}
+function makeChildComponentName(fullParentName, fullChildName) {
+  if (!fullParentName) {
+    return fullChildName;
+  }
+  return `${fullParentName}-${fullChildName.replace(
+    "plasmic-react-aria-",
+    ""
+  )}`;
+}
+function extractPlasmicDataProps(props) {
+  return Object.fromEntries(
+    Object.entries(props).filter(
+      ([key, val]) => key.startsWith("data-plasmic-")
+    )
+  );
+}
+function withoutNils(array) {
+  return array.filter((x) => x != null);
+}
+
+function registerButton(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    reactAriaComponents.Button,
+    {
+      name: "plasmic-react-aria-button",
+      displayName: "BaseButton",
+      importPath: "@plasmicpkgs/react-aria/registerButton",
+      importName: "BaseButton",
+      props: {
+        children: {
+          type: "slot"
+        }
+      }
+    },
+    overrides
+  );
+}
+
+const PlasmicLabelContext = React__default.default.createContext(void 0);
+const PlasmicListBoxContext = React__default.default.createContext(void 0);
+const PlasmicPopoverContext = React__default.default.createContext(void 0);
+const PlasmicItemContext = React__default.default.createContext(void 0);
+const PlasmicSectionContext = React__default.default.createContext(void 0);
+const PlasmicHeaderContext = React__default.default.createContext(void 0);
+const PlasmicInputContext = React__default.default.createContext(void 0);
+
+function useStrictOptions(props) {
+  const { options, optionInfo } = props;
+  return React__default.default.useMemo(() => {
+    return deriveStrictOptions({ options, optionInfo });
+  }, [options, optionInfo]);
+}
+function deriveStrictOptions(props) {
+  var _a;
+  const { options, optionInfo } = props;
+  let sectionCount = 0;
+  const makeStrict = (op) => {
+    var _a2, _b, _c, _d, _e, _f;
+    if (!op) {
+      return void 0;
+    } else if (typeof op === "string" || typeof op === "number") {
+      const item = {
+        value: op
+      };
+      return item;
+    } else if (optionInfo) {
+      const info = optionInfo(op);
+      if (info.type === "section") {
+        const section = {
+          type: "section",
+          items: (_c = (_b = (_a2 = info.items) == null ? void 0 : _a2.map) == null ? void 0 : _b.call(_a2, (item) => makeStrict(item))) == null ? void 0 : _c.filter((x) => !!x),
+          label: info.label,
+          key: `section-${sectionCount}`
+        };
+        sectionCount += 1;
+        return section;
+      } else {
+        let item = info;
+        if (!("value" in item)) {
+          item = {
+            type: "item",
+            value: JSON.stringify(item)
+          };
+        }
+        return item;
+      }
+    } else if (typeof op === "object") {
+      if ("items" in op) {
+        const section = {
+          type: "section",
+          items: (_f = (_e = (_d = op.items) == null ? void 0 : _d.map) == null ? void 0 : _e.call(_d, (item) => makeStrict(item))) == null ? void 0 : _f.filter((x) => !!x),
+          label: op.label,
+          key: `section-${sectionCount}`
+        };
+        sectionCount += 1;
+        return section;
+      } else {
+        let item = op;
+        if (!("value" in item)) {
+          item = {
+            type: "item",
+            value: JSON.stringify(item)
+          };
+        }
+        return item;
+      }
+    } else {
+      return void 0;
+    }
+  };
+  const strictOptions = (_a = options == null ? void 0 : options.map(makeStrict)) == null ? void 0 : _a.filter((x) => !!x);
+  const optionText = (op) => {
+    var _a2;
+    return (_a2 = op.label) != null ? _a2 : op.value;
+  };
+  return { options: strictOptions, optionText };
+}
+function flattenOptions(options) {
+  if (!options) {
+    return [];
+  } else {
+    return options.flatMap(
+      (op) => {
+        var _a;
+        return op.type === "section" ? (_a = op.items) != null ? _a : [] : op;
+      }
+    );
+  }
+}
+function makeOptionsPropType() {
+  const type = {
+    type: "array",
+    itemType: {
+      type: "object",
+      nameFunc: (item) => item.label || item.value,
+      fields: {
+        type: {
+          type: "choice",
+          options: [
+            { value: "option", label: "Option" },
+            { value: "option-group", label: "Option Group" }
+          ],
+          defaultValue: "option"
+        },
+        value: {
+          type: "string",
+          hidden: (_ps, _ctx, { item }) => item.type !== "option"
+        },
+        label: "string",
+        items: {
+          type: "array",
+          displayName: "Options",
+          hidden: (_ps, _ctx, { item }) => {
+            return item.type !== "option-group";
+          },
+          itemType: {
+            type: "object",
+            nameFunc: (item) => item.label || item.value,
+            fields: {
+              value: "string",
+              label: "string"
+            }
+          }
+        }
+      }
+    },
+    defaultValue: [
+      {
+        value: "option1",
+        label: "Option 1",
+        type: "option"
+      },
+      {
+        value: "option2",
+        label: "Option 2",
+        type: "option"
+      }
+    ]
+  };
+  return type;
+}
+function makeValuePropType() {
+  const type = {
+    type: "choice",
+    options: (ps) => {
+      const { options, optionText } = deriveStrictOptions(ps);
+      return flattenOptions(options).map((op) => ({
+        value: op.value,
+        label: optionText(op)
+      }));
+    }
+  };
+  return type;
+}
+
+var __defProp$8 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+function BaseComboBox(props) {
+  const {
+    value,
+    onChange,
+    menuTrigger,
+    filterValue,
+    onFilterValueChange,
+    valueType,
+    allowsCustomValue,
+    placeholder,
+    previewOpen,
+    onOpenChange,
+    isDisabled,
+    className,
+    style,
+    structure,
+    name
+  } = props;
+  const { options, optionText } = useStrictOptions(props);
+  const { contains } = i18n.useFilter({ sensitivity: "base" });
+  const [showAllOptions, setShowAllOptions] = React__default.default.useState(false);
+  const filteredOptions = React__default.default.useMemo(() => {
+    if (!filterValue || filterValue.trim().length === 0) {
+      return options;
+    }
+    if (!options) {
+      return options;
+    }
+    const filterOptions = (options2) => {
+      return withoutNils(
+        options2.map((op) => {
+          if (op.type === "section") {
+            return __spreadProps$2(__spreadValues$8({}, op), {
+              items: op.items ? filterOptions(op.items) : void 0
+            });
+          } else {
+            if (contains(optionText(op), filterValue)) {
+              return op;
+            } else {
+              return void 0;
+            }
+          }
+        })
+      );
+    };
+    return filterOptions(options);
+  }, [options, filterValue, contains]);
+  const flattenedOptions = React__default.default.useMemo(
+    () => flattenOptions(options),
+    [options]
+  );
+  const disabledKeys = flattenedOptions.filter((op) => op.isDisabled).map((op) => op.value);
+  const onSelectionChange = React__default.default.useCallback(
+    (key) => {
+      const selectedOption = flattenedOptions == null ? void 0 : flattenedOptions.find((op) => op.value === key);
+      if (valueType === "text") {
+        if (selectedOption) {
+          onChange == null ? void 0 : onChange(optionText(selectedOption));
+        }
+      } else {
+        onChange == null ? void 0 : onChange(key);
+      }
+      if (selectedOption) {
+        onFilterValueChange == null ? void 0 : onFilterValueChange(optionText(selectedOption));
+      }
+    },
+    [onChange, onFilterValueChange, flattenedOptions, optionText]
+  );
+  const onInputValueChange = React__default.default.useCallback(
+    (newValue) => {
+      onFilterValueChange == null ? void 0 : onFilterValueChange(newValue);
+      setShowAllOptions(false);
+      if (valueType === "text") {
+        if (allowsCustomValue) {
+          onChange == null ? void 0 : onChange(newValue);
+        } else {
+          const matchingOption = flattenedOptions == null ? void 0 : flattenedOptions.find(
+            (op) => optionText(op) === newValue
+          );
+          if (matchingOption) {
+            onChange == null ? void 0 : onChange(optionText(matchingOption));
+          }
+        }
+      }
+    },
+    [
+      onFilterValueChange,
+      onChange,
+      flattenedOptions,
+      optionText,
+      valueType,
+      allowsCustomValue
+    ]
+  );
+  const onBlur = React__default.default.useCallback(() => {
+    if (!allowsCustomValue) {
+      const selectedOption = flattenedOptions == null ? void 0 : flattenedOptions.find(
+        (op) => valueType === "text" ? optionText(op) === value : op.value === value
+      );
+      if (selectedOption) {
+        const selectedOptionText = optionText(selectedOption);
+        if (selectedOptionText !== filterValue) {
+          onFilterValueChange == null ? void 0 : onFilterValueChange(selectedOptionText);
+        }
+      }
+    }
+  }, [
+    allowsCustomValue,
+    valueType,
+    flattenedOptions,
+    value,
+    optionText,
+    onFilterValueChange
+  ]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactAriaComponents.ComboBox,
+    __spreadValues$8({
+      selectedKey: value,
+      onSelectionChange,
+      isDisabled,
+      className,
+      style,
+      items: showAllOptions ? options : filteredOptions,
+      menuTrigger,
+      inputValue: filterValue,
+      onInputChange: onInputValueChange,
+      allowsCustomValue,
+      disabledKeys,
+      onOpenChange: (isOpen, trigger) => {
+        if (isOpen && trigger === "manual") {
+          setShowAllOptions(true);
+        } else {
+          setShowAllOptions(false);
+        }
+        onOpenChange == null ? void 0 : onOpenChange(isOpen);
+      },
+      onBlur,
+      formValue: valueType === "text" ? "text" : "key",
+      name
+    }, extractPlasmicDataProps(props)),
+    /* @__PURE__ */ React__default.default.createElement(
+      PlasmicListBoxContext.Provider,
+      {
+        value: {
+          makeItemProps: (item) => ({
+            key: item.value,
+            textValue: optionText(item),
+            children: optionText(item)
+          }),
+          makeSectionProps: (section) => ({
+            section,
+            key: section.key
+          }),
+          getItemType: (option) => option.type === "section" ? "section" : "item"
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement(PlasmicInputContext.Provider, { value: { placeholder } }, structure)
+    ),
+    /* @__PURE__ */ React__default.default.createElement(BaseComboBoxEffects, { previewOpen })
+  );
+}
+function BaseComboBoxEffects(props) {
+  const { previewOpen } = props;
+  const comboBoxState = React__default.default.useContext(reactAriaComponents.ComboBoxStateContext);
+  const prevPreviewOpenRef = React__default.default.useRef(previewOpen);
+  React__default.default.useEffect(() => {
+    if (comboBoxState) {
+      if (previewOpen) {
+        comboBoxState.open(void 0, "manual");
+      } else if (prevPreviewOpenRef.current) {
+        comboBoxState.close();
+      }
+    }
+    prevPreviewOpenRef.current = previewOpen;
+  }, [previewOpen, comboBoxState, prevPreviewOpenRef]);
+  return null;
+}
+function registerComboBox(loader) {
+  const rootName = makeComponentName("combobox");
+  registerComponentHelper(loader, BaseComboBox, {
+    name: rootName,
+    displayName: "BaseComboBox",
+    importPath: "@plasmicpkgs/react-aria/registerComboBox",
+    importName: "BaseComboBox",
+    props: {
+      options: makeOptionsPropType(),
+      value: makeValuePropType(),
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "value", type: "string" }]
+      },
+      filterValue: {
+        type: "string"
+      },
+      onFilterValueChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "value", type: "string" }]
+      },
+      isDisabled: {
+        type: "boolean"
+      },
+      valueType: {
+        displayName: "`value` Type",
+        type: "choice",
+        options: [
+          { value: "value", label: "By option value" },
+          { value: "text", label: "By option text" }
+        ],
+        defaultValueHint: "value",
+        description: "This controls whether `value` and `onChange` are option values or option text.  Choosing `text` allows you to optionally allow a custom value that's not in the provided list of options.",
+        advanced: true
+      },
+      allowsCustomValue: {
+        type: "boolean",
+        displayName: "Allows custom value?",
+        description: "Allows entering a value that is not one of the options",
+        hidden: (ps) => ps.valueType !== "text",
+        advanced: true
+      },
+      onOpenChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "isOpen", type: "boolean" }]
+      },
+      structure: {
+        type: "slot"
+      },
+      previewOpen: {
+        type: "boolean",
+        displayName: "Preview opened?",
+        description: "Preview opened state while designing in Plasmic editor",
+        editOnly: true
+      }
+    },
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      },
+      filterValue: {
+        type: "writable",
+        valueProp: "filterValue",
+        onChangeProp: "onFilterValueChange",
+        variableType: "text"
+      },
+      isOpen: {
+        type: "readonly",
+        onChangeProp: "onOpenChange",
+        variableType: "boolean"
+      }
+    }
+  });
+}
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+function BaseInput(props) {
+  const contextProps = React__default.default.useContext(PlasmicInputContext);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Input, __spreadValues$7({}, utils.mergeProps(contextProps, props)));
+}
+function registerInput(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseInput,
+    {
+      name: makeComponentName("input"),
+      displayName: "BaseInput",
+      importPath: "@plasmicpkgs/react-aria/registerInput",
+      importName: "BaseInput",
+      props: {
+        className: {
+          type: "class",
+          displayName: "Styles in different states",
+          selectors: [
+            {
+              selector: ":self[data-hovered]",
+              label: "Hovered"
+            },
+            {
+              selector: ":self[data-focused]",
+              label: "Focused"
+            },
+            {
+              selector: ":self[data-focus-visible]",
+              label: "Focus visible"
+            },
+            {
+              selector: ":self[data-disabled]",
+              label: "Disabled"
+            },
+            {
+              selector: ":self::placeholder",
+              label: "Placeholder"
+            }
+          ]
+        }
+      }
+    },
+    overrides
+  );
+}
+
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+function BaseLabel(props) {
+  const contextProps = React__default.default.useContext(PlasmicLabelContext);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Label, __spreadValues$6({}, utils.mergeProps(contextProps, props)));
+}
+function registerLabel(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseLabel,
+    {
+      name: "plasmic-react-aria-label",
+      displayName: "BaseLabel",
+      importPath: "@plasmicpkgs/react-aria/registerLabel",
+      importName: "BaseLabel",
+      props: {
+        children: {
+          type: "slot",
+          defaultValue: {
+            type: "text",
+            value: "Label"
+          }
+        }
+      }
+    },
+    overrides
+  );
+}
+
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+function BaseListBoxItem(props) {
+  var _a;
+  const contextProps = React__default.default.useContext(PlasmicItemContext);
+  const mergedProps = utils.mergeProps(contextProps, props);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBoxItem, __spreadValues$5({ id: (_a = mergedProps.key) != null ? _a : void 0 }, mergedProps));
+}
+function registerListBoxItem(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseListBoxItem,
+    {
+      name: makeComponentName("item"),
+      displayName: "BaseListBoxItem",
+      importPath: "@plasmicpkgs/react-aria/registerListBoxItem",
+      importName: "BaseListBoxItem",
+      props: {
+        className: {
+          type: "class",
+          displayName: "Styles in different states",
+          selectors: [
+            {
+              selector: ":self[data-selected]",
+              label: "Selected"
+            },
+            {
+              selector: ":self[data-focused], :self[data-hovered]",
+              label: "Focused"
+            },
+            {
+              selector: ":self[data-disabled]",
+              label: "Disabled"
+            }
+          ]
+        }
+      }
+    },
+    overrides
+  );
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const STANDALONE_PROPS = {
+  getItemType: (item) => item.type,
+  items: [
+    { type: "item", value: "op1", label: "Option 1" },
+    { type: "item", value: "op2", label: "Option 2" },
+    { type: "item", value: "op3", label: "Option 3" },
+    {
+      type: "section",
+      label: "Section 1",
+      items: [
+        { type: "item", value: "s1op1", label: "Section 1 Option 1" },
+        { type: "item", value: "s1op2", label: "Section 1 Option 2" },
+        { type: "item", value: "s1op3", label: "Section 1 Option 3" }
+      ]
+    },
+    {
+      type: "section",
+      label: "Section 2",
+      items: [
+        { type: "item", value: "s2op1", label: "Section 2 Option 1" },
+        { type: "item", value: "s2op2", label: "Section 2 Option 2" },
+        { type: "item", value: "s2op3", label: "Section 2 Option 3" }
+      ]
+    }
+  ],
+  makeItemProps: (item) => ({
+    key: item.value,
+    textValue: item.label,
+    children: item.label
+  }),
+  makeSectionProps: (section) => ({
+    section,
+    key: section.label
+  })
+};
+function BaseListBox(props) {
+  const contextProps = React__default.default.useContext(PlasmicListBoxContext);
+  const isStandalone = !React__default.default.useContext(reactAriaComponents.ListBoxContext);
+  const _a = utils.mergeProps(contextProps, props, isStandalone ? STANDALONE_PROPS : {}), {
+    makeItemProps,
+    makeSectionProps,
+    renderItem,
+    renderSection,
+    getItemType
+  } = _a, rest = __objRest$2(_a, [
+    "makeItemProps",
+    "makeSectionProps",
+    "renderItem",
+    "renderSection",
+    "getItemType"
+  ]);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.ListBox, __spreadValues$4({}, utils.mergeProps(contextProps, rest)), (item) => {
+    if ((getItemType == null ? void 0 : getItemType(item)) === "section") {
+      const sectionProps = makeSectionProps == null ? void 0 : makeSectionProps(item);
+      return /* @__PURE__ */ React__default.default.createElement(
+        PlasmicSectionContext.Provider,
+        {
+          key: sectionProps == null ? void 0 : sectionProps.key,
+          value: __spreadProps$1(__spreadValues$4({}, sectionProps), { makeItemProps, renderItem })
+        },
+        renderSection == null ? void 0 : renderSection(item)
+      );
+    } else {
+      const itemProps = makeItemProps == null ? void 0 : makeItemProps(item);
+      return /* @__PURE__ */ React__default.default.createElement(PlasmicItemContext.Provider, { key: itemProps == null ? void 0 : itemProps.key, value: itemProps }, renderItem == null ? void 0 : renderItem(item));
+    }
+  });
+}
+function registerListBox(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseListBox,
+    {
+      name: makeComponentName("listbox"),
+      displayName: "BaseListBox",
+      importPath: "@plasmicpkgs/react-aria/registerListBox",
+      importName: "BaseListBox",
+      props: {
+        renderItem: {
+          type: "slot",
+          displayName: "Render Item",
+          renderPropParams: ["item"]
+        },
+        renderSection: {
+          type: "slot",
+          displayName: "Render Section",
+          renderPropParams: ["section"]
+        }
+      }
+    },
+    overrides
+  );
+  registerListBoxItem(loader, {
+    parentComponentName: makeComponentName("listbox")
+  });
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BasePopover(props) {
+  const _a = props, restProps = __objRest$1(_a, ["resetClassName"]);
+  const isStandalone = !React__default.default.useContext(reactAriaComponents.PopoverContext);
+  const contextProps = React__default.default.useContext(PlasmicPopoverContext);
+  const canvas = host.usePlasmicCanvasContext();
+  const mergedProps = utils.mergeProps(contextProps, restProps, {
+    className: `${props.resetClassName}`
+  });
+  if (isStandalone) {
+    const triggerRef = React__default.default.useRef(null);
+    return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("div", { ref: triggerRef }), /* @__PURE__ */ React__default.default.createElement(
+      reactAriaComponents.Popover,
+      __spreadProps(__spreadValues$3({}, mergedProps), {
+        triggerRef,
+        isNonModal: true,
+        isOpen: true
+      })
+    ));
+  } else {
+    return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Popover, __spreadProps(__spreadValues$3({}, mergedProps), { isNonModal: !!canvas }));
+  }
+}
+function registerPopover(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BasePopover,
+    {
+      name: "plasmic-react-aria-popover",
+      displayName: "BasePopover",
+      importPath: "@plasmicpkgs/react-aria/registerPopover",
+      importName: "BasePopover",
+      props: {
+        children: {
+          type: "slot"
+        },
+        offset: {
+          type: "number",
+          displayName: "Offset",
+          description: "Additional offset applied vertically between the popover and its trigger",
+          defaultValueHint: 0
+        },
+        placement: {
+          type: "choice",
+          description: "Default placement of the popover relative to the trigger, if there is enough space",
+          options: [
+            "bottom",
+            "bottom left",
+            "bottom right",
+            "top",
+            "top left",
+            "top right"
+          ]
+        },
+        resetClassName: {
+          type: "themeResetClass"
+        }
+      },
+      styleSections: true
+    },
+    overrides
+  );
+}
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+function BaseHeader(props) {
+  const contextProps = React__default.default.useContext(PlasmicHeaderContext);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Header, __spreadValues$2({}, utils.mergeProps(contextProps, props)));
+}
+function registerHeader(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseHeader,
+    {
+      name: makeComponentName("header"),
+      displayName: "BaseHeader",
+      importPath: "@plasmicpkgs/react-aria/registerHeader",
+      importName: "BaseHeader",
+      props: {}
+    },
+    overrides
+  );
+}
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function BaseSection(props) {
+  const contextProps = React__default.default.useContext(PlasmicSectionContext);
+  const mergedProps = utils.mergeProps(contextProps, props);
+  const _a = mergedProps, { section, renderHeader, key, makeItemProps, renderItem } = _a, rest = __objRest(_a, ["section", "renderHeader", "key", "makeItemProps", "renderItem"]);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Section, __spreadValues$1({ id: key != null ? key : void 0 }, rest), /* @__PURE__ */ React__default.default.createElement(PlasmicHeaderContext.Provider, { value: { children: section == null ? void 0 : section.label } }, renderHeader == null ? void 0 : renderHeader(section)), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Collection, { items: section == null ? void 0 : section.items }, (item) => {
+    const itemProps = makeItemProps == null ? void 0 : makeItemProps(item);
+    return /* @__PURE__ */ React__default.default.createElement(PlasmicItemContext.Provider, { key: itemProps == null ? void 0 : itemProps.key, value: itemProps }, renderItem == null ? void 0 : renderItem(item));
+  }));
+}
+function registerSection(loader, overrides) {
+  registerComponentHelper(
+    loader,
+    BaseSection,
+    {
+      name: makeComponentName("section"),
+      displayName: "BaseSection",
+      importPath: "@plasmicpkgs/react-aria/registerSection",
+      importName: "BaseSection",
+      props: {
+        renderHeader: {
+          type: "slot",
+          displayName: "Render section header",
+          renderPropParams: ["section"]
+        }
+      }
+    },
+    overrides
+  );
+  const thisName = makeChildComponentName(
+    overrides == null ? void 0 : overrides.parentComponentName,
+    makeComponentName("section")
+  );
+  registerHeader(loader, {
+    parentComponentName: thisName
+  });
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const SELECT_NAME = makeComponentName("select");
+function BaseSelect(props) {
+  const {
+    value,
+    onChange,
+    placeholder,
+    previewOpen,
+    onOpenChange,
+    isDisabled,
+    className,
+    style,
+    structure,
+    renderOption,
+    name,
+    "aria-label": ariaLabel
+  } = props;
+  const { options, optionText } = useStrictOptions(props);
+  const canvas = host.usePlasmicCanvasContext();
+  const disabledKeys = flattenOptions(options).filter((op) => op.isDisabled).map((op) => op.value);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactAriaComponents.Select,
+    __spreadValues(__spreadValues({
+      placeholder,
+      selectedKey: value,
+      onSelectionChange: onChange,
+      onOpenChange,
+      isDisabled,
+      className,
+      style,
+      name,
+      "aria-label": ariaLabel
+    }, previewOpen && canvas ? { isOpen: previewOpen } : void 0), extractPlasmicDataProps(props)),
+    /* @__PURE__ */ React__default.default.createElement(
+      PlasmicListBoxContext.Provider,
+      {
+        value: {
+          items: options,
+          disabledKeys,
+          makeItemProps: (item) => ({
+            key: item.value,
+            textValue: optionText(item),
+            children: renderOption ? renderOption(item) : optionText(item)
+          }),
+          makeSectionProps: (section) => ({
+            section,
+            key: section.key
+          }),
+          getItemType: (option) => option.type === "section" ? "section" : "item"
+        }
+      },
+      structure
+    )
+  );
+}
+function registerSelect(loader) {
+  registerComponentHelper(loader, BaseSelect, {
+    name: SELECT_NAME,
+    displayName: "BaseSelect",
+    importPath: "@plasmicpkgs/react-aria/registerSelect",
+    importName: "BaseSelect",
+    props: {
+      options: makeOptionsPropType(),
+      placeholder: {
+        type: "string"
+      },
+      isDisabled: {
+        type: "boolean"
+      },
+      value: makeValuePropType(),
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "value", type: "string" }]
+      },
+      previewOpen: {
+        type: "boolean",
+        displayName: "Preview opened?",
+        description: "Preview opened state while designing in Plasmic editor",
+        editOnly: true
+      },
+      onOpenChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "isOpen", type: "boolean" }]
+      },
+      // optionValue: {
+      //   type: "string",
+      //   displayName: "Field key for an option's value",
+      //   hidden: (ps) =>
+      //     !ps.options ||
+      //     !ps.options[0] ||
+      //     typeof ps.options[0] === "string" ||
+      //     "value" in ps.options[0],
+      //   exprHint:
+      //     "Return a function that takes in an option object, and returns the key to use",
+      // },
+      // optionText: {
+      //   type: "string",
+      //   displayName: "Field key for an option's text value",
+      //   hidden: (ps) =>
+      //     !ps.options ||
+      //     !ps.options[0] ||
+      //     typeof ps.options[0] === "string" ||
+      //     "value" in ps.options[0],
+      //   exprHint:
+      //     "Return a function that takes in an option object, and returns the text value to use",
+      // },
+      // optionDisabled: {
+      //   type: "string",
+      //   displayName: "Field key for whether an option is disabled",
+      //   hidden: (ps) =>
+      //     !ps.options ||
+      //     !ps.options[0] ||
+      //     typeof ps.options[0] === "string" ||
+      //     "value" in ps.options[0],
+      //   exprHint:
+      //     "Return a function that takes in an option object, and returns true if option should be disabled",
+      // },
+      structure: {
+        type: "slot"
+      },
+      // renderOption: {
+      //   type: "slot",
+      //   displayName: "Custom render option",
+      //   renderPropParams: ["item"],
+      //   hidePlaceholder: true
+      // },
+      name: {
+        type: "string",
+        displayName: "Form field key",
+        description: "Name of the input, when submitting in an HTML form",
+        advanced: true
+      },
+      "aria-label": {
+        type: "string",
+        displayName: "Aria Label",
+        description: "Label for this input, if no visible label is used",
+        advanced: true
+      }
+    },
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      },
+      isOpen: {
+        type: "readonly",
+        onChangeProp: "onOpenChange",
+        variableType: "boolean"
+      }
+    }
+  });
+  registerComponentHelper(loader, reactAriaComponents.SelectValue, {
+    name: makeComponentName("select-value"),
+    displayName: "Base Selected Value",
+    importPath: "@plasmicpkgs/react-aria/registerSelect",
+    importName: "SelectValue",
+    parentComponentName: SELECT_NAME,
+    props: {}
+  });
+}
+
+function registerAll(loader) {
+  registerSelect(loader);
+  registerComboBox(loader);
+  registerButton(loader);
+  registerLabel(loader);
+  registerListBox(loader);
+  registerPopover(loader);
+  registerInput(loader);
+  registerSection(loader);
+}
+
+exports.registerAll = registerAll;
+//# sourceMappingURL=react-aria.js.map