@plasmicapp/react-web 0.2.161 → 0.2.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.161",
+  "version": "0.2.162",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,9 +40,9 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.39",
+    "@plasmicapp/data-sources": "0.1.40",
     "@plasmicapp/data-sources-context": "0.1.6",
-    "@plasmicapp/host": "1.0.107",
+    "@plasmicapp/host": "1.0.108",
     "@plasmicapp/query": "0.1.61",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
@@ -109,5 +109,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "345916a2f99a5b4015f1415f26335d003d404715"
+  "gitHead": "42a82273c10229969e148da489db70aa88859c4a"
 }

package/skinny/dist/{collection-utils-b5d4be02.js → collection-utils-3496fd68.js}

@@ -60,6 +60,45 @@ import { g as getPlumeType, P as PLUME_STRICT_MODE } from './plume-utils-653f4b8
  * of list of Item/Section elements.  This is for efficiency, but we are opting
  * to only support the composite-component pattern for now for simplicity.
  */
+function deriveItemsFromProps(props, opts) {
+    if (opts.itemsProp && opts.itemsProp in props) {
+        if (!opts.ItemComponent || !opts.SectionComponent) {
+            throw new Error("You may need to re-generate your Plasmic* files");
+        }
+        var items = props[opts.itemsProp];
+        return deriveItemsFromItemsProp(items, {
+            ItemComponent: opts.ItemComponent,
+            SectionComponent: opts.SectionComponent
+        });
+    }
+    else {
+        return deriveItemsFromChildren(props.children, opts);
+    }
+}
+function deriveItemsFromItemsProp(items, opts) {
+    var _a;
+    var ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent;
+    var disabledKeys = [];
+    var transform = function (item) {
+        var _a;
+        if (typeof item === "string") {
+            return (React__default.createElement(ItemComponent, { key: item, value: item }, item));
+        }
+        else if ("children" in item) {
+            return (React__default.createElement(SectionComponent, { key: item.title, title: item.title }, item.children.map(function (x) { return transform(x); })));
+        }
+        else {
+            if (item.isDisabled) {
+                disabledKeys.push(item.value);
+            }
+            return (React__default.createElement(ItemComponent, { key: item.value, value: item.value, textValue: item.textValue, isDisabled: item.isDisabled }, (_a = item.label) !== null && _a !== void 0 ? _a : item.value));
+        }
+    };
+    return {
+        items: (_a = items === null || items === void 0 ? void 0 : items.map(function (x) { return transform(x); })) !== null && _a !== void 0 ? _a : [],
+        disabledKeys: disabledKeys
+    };
+}
 /**
  * Given children of a component like Select or Menu, derive the items
  * that we will pass into the Collections API.  These will be
@@ -132,6 +171,31 @@ function deriveItemsFromChildren(children, opts) {
     };
     return { items: flattenedChildren(children), disabledKeys: disabledKeys };
 }
+function useDerivedItems(props, opts) {
+    var children = props.children;
+    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue, ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent, itemsProp = opts.itemsProp;
+    var items = itemsProp ? props[itemsProp] : undefined;
+    return React__default.useMemo(function () {
+        return deriveItemsFromProps(props, {
+            itemPlumeType: itemPlumeType,
+            sectionPlumeType: sectionPlumeType,
+            invalidChildError: invalidChildError,
+            requireItemValue: requireItemValue,
+            itemsProp: itemsProp,
+            ItemComponent: ItemComponent,
+            SectionComponent: SectionComponent
+        });
+    }, [
+        children,
+        items,
+        itemPlumeType,
+        sectionPlumeType,
+        invalidChildError,
+        requireItemValue,
+        ItemComponent,
+        SectionComponent,
+    ]);
+}
 function useDerivedItemsFromChildren(children, opts) {
     var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue;
     return React__default.useMemo(function () {
@@ -235,5 +299,5 @@ function cloneChild(child, props) {
     return React__default.cloneElement(child, props);
 }
 
-export { renderAsCollectionChild as a, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
-//# sourceMappingURL=collection-utils-b5d4be02.js.map
+export { renderAsCollectionChild as a, useDerivedItems as b, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
+//# sourceMappingURL=collection-utils-3496fd68.js.map

package/skinny/dist/collection-utils-3496fd68.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-utils-3496fd68.js","sources":["../../src/plume/collection-utils.tsx"],"sourcesContent":["/**\n * In general, we try not to expose react-aria's Collections API to Plume users.\n * The Collections API is how react-aria users pass data about collections of\n * things using the built-in Item and Section components, which are abstract,\n * metadata-only components that don't render anything but only serve to specify\n * data.  For example, here's how you would use react-spectrum's Picker:\n *\n *   <Picker>\n *     <Section title=\"Asia\">\n *       <Item key=\"taiwan\">Taiwan</Item>\n *       <Item key=\"japan\">Japan</Item>\n *       <Item key=\"china\">China</Item>\n *     </Section>\n *     <Section title=\"Europe\">\n *       <Item key=\"germany\">Germany</Item>\n *       <Item key=\"france\">France</Item>\n *     </Section>\n *   </Picker>\n *\n * You would re-use this same Item/Section components to pass similar things to\n * Menu, Tabs, etc.\n *\n * For Plasmic, this API is too abstract.  The user has explicitly designed components\n * like Select.Option and Select.OptionGroup, and it is weird that they don't actually\n * use these components. It is more natural to do:\n *\n *   <Select>\n *     <Select.OptionGroup title=\"Asia\">\n *       <Select.Option key=\"taiwan\">Taiwan</Select>\n *     </Select.OptionGroup>\n *   </Select>\n *\n * For Plume, we let users directly use the components they designed, both to collect\n * information and to perform actual rendering.  For example, for Plume,\n * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.\n * This means that the Select.Option props will collect the same information Item\n * does.\n *\n * A component like Select.Option then serves two purposes:\n *\n * 1. Allow users to specify the collection of data, like in the above example\n *    Here, we're mainly interested in the props in those ReactElements so\n *    we can pass the Item/Section data onto react-aria's APIs.  We are not\n *    actually rendering these elements.\n * 2. Once react-aria's Collections API has gone through them and built\n *    Collection \"nodes\", we then create cloned versions of these elements\n *    with the corresponding node passed in as a secret prop.  These ReactElements\n *    are then actually used to _render_ the corresponding Option / OptionGroup.\n *\n * This file contains helper functions to help with implementing the above.\n *\n * Note also that most of the collections-based react-aria components expose\n * a parallel API that accepts a list of \"items\" and a render prop, instead\n * of list of Item/Section elements.  This is for efficiency, but we are opting\n * to only support the composite-component pattern for now for simplicity.\n */\n\nimport { Item, Section } from \"@react-stately/collections\";\nimport { Node } from \"@react-types/shared\";\nimport React from \"react\";\nimport { isString } from \"../common\";\nimport { getElementTypeName, toChildArray } from \"../react-utils\";\nimport { getPlumeType, PLUME_STRICT_MODE } from \"./plume-utils\";\n\nexport interface PlasmicLoaderProps<T> {\n  component: string;\n  componentProps: T;\n}\n\n/**\n * Props for a Plume component that corresponds to an Item\n */\nexport interface ItemLikeProps {\n  /**\n   * value key corresponding to this item. Not required if you use the\n   * `key` prop instead.\n   */\n  value?: string | null;\n\n  /**\n   * The text string value corresponding to this item. Used to support\n   * keyboard type-ahead.  If not specified, then will be derived from\n   * `children` if it is a string, or the `value` or `key`.\n   */\n  textValue?: string;\n\n  /**\n   * aria-label for this item.\n   */\n  \"aria-label\"?: string;\n\n  /**\n   * Primary content label for this item.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * If true, this item will not be selectable.\n   */\n  isDisabled?: boolean;\n}\n\ntype LoaderAwareItemLikeProps =\n  | ItemLikeProps\n  | PlasmicLoaderProps<ItemLikeProps>;\n\n/**\n * Props for a Plume component that corresponds to a Section\n */\nexport interface SectionLikeProps {\n  /**\n   * Heading content of the title\n   */\n  title?: React.ReactNode;\n\n  /**\n   * aria-label for this section\n   */\n  \"aria-label\"?: string;\n\n  /**\n   * A list of items that belong in this group\n   */\n  children?: React.ReactNode;\n}\n\ntype LoaderAwareSectionLikeProps =\n  | SectionLikeProps\n  | PlasmicLoaderProps<SectionLikeProps>;\n\nexport type ItemJson = LeafItemJson | SectionJson;\n\nexport type LeafItemJson =\n  | string\n  | {\n      value: string;\n      label?: string;\n      textValue?: string;\n      isDisabled?: boolean;\n    };\n\nexport interface SectionJson {\n  title: string;\n  children: ItemJson[];\n}\n\nexport function deriveItemsFromProps(\n  props: any,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n    ItemComponent?: React.ComponentType<ItemLikeProps>;\n    SectionComponent?: React.ComponentType<SectionLikeProps>;\n    itemsProp?: string;\n  }\n) {\n  if (opts.itemsProp && opts.itemsProp in props) {\n    if (!opts.ItemComponent || !opts.SectionComponent) {\n      throw new Error(`You may need to re-generate your Plasmic* files`);\n    }\n    const items = props[opts.itemsProp] as ItemJson[] | undefined;\n    return deriveItemsFromItemsProp(items, {\n      ItemComponent: opts.ItemComponent,\n      SectionComponent: opts.SectionComponent,\n    });\n  } else {\n    return deriveItemsFromChildren(props.children as React.ReactNode, opts);\n  }\n}\n\nfunction deriveItemsFromItemsProp(\n  items: ItemJson[] | undefined,\n  opts: {\n    ItemComponent: React.ComponentType<ItemLikeProps>;\n    SectionComponent: React.ComponentType<SectionLikeProps>;\n  }\n) {\n  const { ItemComponent, SectionComponent } = opts;\n  const disabledKeys: string[] = [];\n  const transform = (item: ItemJson) => {\n    if (typeof item === \"string\") {\n      return (\n        <ItemComponent key={item} value={item}>\n          {item}\n        </ItemComponent>\n      );\n    } else if (\"children\" in item) {\n      return (\n        <SectionComponent key={item.title} title={item.title}>\n          {item.children.map((x) => transform(x))}\n        </SectionComponent>\n      );\n    } else {\n      if (item.isDisabled) {\n        disabledKeys.push(item.value);\n      }\n      return (\n        <ItemComponent\n          key={item.value}\n          value={item.value}\n          textValue={item.textValue}\n          isDisabled={item.isDisabled}\n        >\n          {item.label ?? item.value}\n        </ItemComponent>\n      );\n    }\n  };\n  return {\n    items: items?.map((x) => transform(x)) ?? [],\n    disabledKeys,\n  };\n}\n\n/**\n * Given children of a component like Select or Menu, derive the items\n * that we will pass into the Collections API.  These will be\n * ReactElement<ItemLikeProps|SectionLikeProps>[].\n *\n * Will also assign keys to items by their index in the collection,\n * and collect the keys of disabled items.\n */\nexport function deriveItemsFromChildren<T extends React.ReactElement>(\n  children: React.ReactNode,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n  }\n) {\n  if (!children) {\n    return {\n      items: [] as T[],\n      disabledKeys: [] as React.Key[],\n    };\n  }\n\n  const { itemPlumeType, sectionPlumeType, invalidChildError } = opts;\n\n  // For Plume items without an explicit key, we assign a key as the index\n  // of the collection.\n  let itemCount = 0;\n  let sectionCount = 0;\n\n  const ensureValue = (element: React.ReactElement) => {\n    if (!propInChild(element, \"value\")) {\n      if (opts.requireItemValue && PLUME_STRICT_MODE) {\n        throw new Error(\n          `Must specify a \"value\" prop for ${getElementTypeName(element)}`\n        );\n      } else {\n        return cloneChild(element, { value: `${itemCount++}` });\n      }\n    } else {\n      // Still increment count even if key is present, so that the\n      // auto-assigned key really reflects the index\n      itemCount++;\n      return element;\n    }\n  };\n\n  const disabledKeys: React.Key[] = [];\n\n  const flattenedChildren = (\n    children: React.ReactNode\n  ): React.ReactElement[] => {\n    return toChildArray(children).flatMap((child) => {\n      if (React.isValidElement(child)) {\n        if (child.type === React.Fragment) {\n          return flattenedChildren(\n            (child as React.ReactElement<{ children: React.ReactNode }>).props\n              .children\n          );\n        }\n        const type = getPlumeType(child);\n        if (type === itemPlumeType) {\n          child = ensureValue(child);\n          const childKey = getItemLikeKey(child);\n          if (getChildProp(child, \"isDisabled\") && !!childKey) {\n            disabledKeys.push(childKey);\n          }\n          return [child];\n        }\n        if (type === sectionPlumeType) {\n          return [\n            cloneChild(child, {\n              // key of section doesn't actually matter, just needs\n              // to be unique\n              key: child.key ?? `section-${sectionCount++}`,\n              children: flattenedChildren(getChildProp(child, \"children\")),\n            }),\n          ];\n        }\n      }\n\n      if (PLUME_STRICT_MODE) {\n        throw new Error(invalidChildError ?? `Unexpected child`);\n      } else {\n        return [];\n      }\n    });\n  };\n\n  return { items: flattenedChildren(children) as T[], disabledKeys };\n}\n\nexport function useDerivedItems(\n  props: any,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n    ItemComponent?: React.ComponentType<ItemLikeProps>;\n    SectionComponent?: React.ComponentType<SectionLikeProps>;\n    itemsProp?: string;\n  }\n) {\n  const { children } = props;\n  const {\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n    ItemComponent,\n    SectionComponent,\n    itemsProp,\n  } = opts;\n  const items = itemsProp ? props[itemsProp] : undefined;\n  return React.useMemo(() => {\n    return deriveItemsFromProps(props, {\n      itemPlumeType,\n      sectionPlumeType,\n      invalidChildError,\n      requireItemValue,\n      itemsProp,\n      ItemComponent,\n      SectionComponent,\n    });\n  }, [\n    children,\n    items,\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n    ItemComponent,\n    SectionComponent,\n  ]);\n}\n\nexport function useDerivedItemsFromChildren<T extends React.ReactElement>(\n  children: React.ReactNode,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n  }\n) {\n  const {\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n  } = opts;\n  return React.useMemo(() => {\n    return deriveItemsFromChildren<T>(children, {\n      itemPlumeType,\n      sectionPlumeType,\n      invalidChildError,\n      requireItemValue,\n    });\n  }, [\n    children,\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n  ]);\n}\n\n/**\n * Given a Collection node, create the React element that we should use\n * to render it.\n */\nexport function renderCollectionNode(node: Node<any>) {\n  // node.rendered should already have our item-like or section-like Plume\n  // component elements, so we just need to clone them with a secret\n  // _node prop that we use to render.\n  return cloneChild(node.rendered as React.ReactElement, {\n    _node: node,\n    key: node.key,\n  });\n}\n\n/**\n * Renders a item-like or section-like Plume component element into an\n * Item or a Section element.\n */\nexport function renderAsCollectionChild<\n  T extends React.ReactElement<\n    LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps\n  >\n>(\n  child: T,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n  }\n) {\n  const plumeType = getPlumeType(child);\n  if (plumeType === opts.itemPlumeType) {\n    const option = child as React.ReactElement<LoaderAwareItemLikeProps>;\n\n    // We look at the children passed to the item-like element, and derive key\n    // or textValue from it if it is a string\n    const content = getChildProp(option, \"children\");\n\n    // The children render prop needs to return an <Item/>\n    return (\n      <Item\n        // We use ItemLike.value if the user explicitly specified a value,\n        // and we fallback to key.  If the user specified neither, then\n        // the Collections API will generate a unique key for this item.\n        key={getItemLikeKey(option)}\n        // textValue is either explicitly specified by the user, or we\n        // try to derive it if `content` is a string.\n        textValue={\n          getChildProp(option, \"textValue\") ??\n          (isString(content)\n            ? content\n            : propInChild(option, \"value\")\n            ? getChildProp(option, \"value\")\n            : option.key)\n        }\n        aria-label={getChildProp(option, \"aria-label\")}\n      >\n        {\n          // Note that what we setting the item-like element as the children\n          // here, and not content; we want the entire item-like Plume element to\n          // end up as Node.rendered.\n        }\n        {option}\n      </Item>\n    );\n  } else {\n    const group = child as React.ReactElement<LoaderAwareSectionLikeProps>;\n    return (\n      <Section\n        // Note that we are using the whole section-like element as the title\n        // here, and not group.props.title; we want the entire section-like\n        // Plume element to end up as Node.rendered.\n        title={group}\n        aria-label={getChildProp(group, \"aria-label\")}\n        // We are flattening and deriving the descendant Options as items here.\n        // group.props.children should've already been cleaned up by\n        // deriveItemsFromChildren()\n        items={getChildProp(group, \"children\") as React.ReactElement[]}\n      >\n        {\n          // We use the same render function to turn descendent Options into Items\n        }\n        {(c: React.ReactElement) => renderAsCollectionChild(c, opts)}\n      </Section>\n    );\n  }\n}\n\nfunction getItemLikeKey(element: React.ReactElement<LoaderAwareItemLikeProps>) {\n  return getChildProp(element, \"value\") ?? element.key;\n}\n\n// PlasmicLoader-aware function to get prop from child.\nexport function getChildProp(child: React.ReactElement, prop: string) {\n  return \"componentProps\" in child.props\n    ? child.props.componentProps[prop]\n    : child.props[prop];\n}\n\n// PlasmicLoader-aware function to check `if (prop in element.props)`.\nfunction propInChild(child: React.ReactElement, prop: string): boolean {\n  return \"componentProps\" in child.props\n    ? prop in child.props.componentProps\n    : prop in child.props;\n}\n\n// PlasmicLoader-aware function to clone React element.\nfunction cloneChild(child: React.ReactElement, props: Record<string, any>) {\n  if ((child.type as any).getPlumeType) {\n    // If React element has getPlumeType(), assume that it is PlasmicLoader,\n    // so add nodeProps to componentProps instead of element props.\n    return React.cloneElement(child, {\n      componentProps: {\n        ...child.props.componentProps,\n        ...props,\n      },\n      ...(props.key ? { key: props.key } : {}),\n    });\n  }\n\n  return React.cloneElement(child, props);\n}\n"],"names":["React"],"mappings":"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"}

package/skinny/dist/plume/collection-utils.d.ts

@@ -107,6 +107,32 @@ export interface SectionLikeProps {
     children?: React.ReactNode;
 }
 type LoaderAwareSectionLikeProps = SectionLikeProps | PlasmicLoaderProps<SectionLikeProps>;
+export type ItemJson = LeafItemJson | SectionJson;
+export type LeafItemJson = string | {
+    value: string;
+    label?: string;
+    textValue?: string;
+    isDisabled?: boolean;
+};
+export interface SectionJson {
+    title: string;
+    children: ItemJson[];
+}
+export declare function deriveItemsFromProps(props: any, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+    ItemComponent?: React.ComponentType<ItemLikeProps>;
+    SectionComponent?: React.ComponentType<SectionLikeProps>;
+    itemsProp?: string;
+}): {
+    items: JSX.Element[];
+    disabledKeys: string[];
+} | {
+    items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    disabledKeys: React.Key[];
+};
 /**
  * Given children of a component like Select or Menu, derive the items
  * that we will pass into the Collections API.  These will be
@@ -124,6 +150,21 @@ export declare function deriveItemsFromChildren<T extends React.ReactElement>(ch
     items: T[];
     disabledKeys: React.Key[];
 };
+export declare function useDerivedItems(props: any, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+    ItemComponent?: React.ComponentType<ItemLikeProps>;
+    SectionComponent?: React.ComponentType<SectionLikeProps>;
+    itemsProp?: string;
+}): {
+    items: JSX.Element[];
+    disabledKeys: string[];
+} | {
+    items: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+    disabledKeys: React.Key[];
+};
 export declare function useDerivedItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
     itemPlumeType: string;
     sectionPlumeType?: string;

package/skinny/dist/plume/menu/index.js

@@ -4,7 +4,7 @@ import { useTreeState } from '@react-stately/tree';
 import * as React from 'react';
 import { m as mergeProps } from '../../react-utils-76d05959.js';
 import { a as useEnsureSSRProvider } from '../../ssr-f6caec06.js';
-import { r as renderCollectionNode, u as useDerivedItemsFromChildren, a as renderAsCollectionChild } from '../../collection-utils-b5d4be02.js';
+import { r as renderCollectionNode, u as useDerivedItemsFromChildren, a as renderAsCollectionChild } from '../../collection-utils-3496fd68.js';
 import { n as noOutline, m as mergeVariantToggles } from '../../plume-utils-653f4b8a.js';
 import { g as getStyleProps } from '../../props-utils-70c2d02a.js';
 import { T as TriggeredOverlayContext } from '../../context-034b8d25.js';

package/skinny/dist/plume/select/index.js

@@ -1,4 +1,5 @@
 import { c as __assign, p as pick, d as __spreadArray, e as __read, b as __rest } from '../../common-c2744215.js';
+import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import { usePress } from '@react-aria/interactions';
 import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
 import { useSelect as useSelect$1, HiddenSelect } from '@react-aria/select';
@@ -6,7 +7,7 @@ import { useSelectState } from '@react-stately/select';
 import * as React from 'react';
 import { m as mergeProps, d as mergeRefs } from '../../react-utils-76d05959.js';
 import { a as useEnsureSSRProvider } from '../../ssr-f6caec06.js';
-import { g as getChildProp, r as renderCollectionNode, u as useDerivedItemsFromChildren, a as renderAsCollectionChild } from '../../collection-utils-b5d4be02.js';
+import { g as getChildProp, r as renderCollectionNode, b as useDerivedItems, a as renderAsCollectionChild } from '../../collection-utils-3496fd68.js';
 import { m as mergeVariantToggles, n as noOutline } from '../../plume-utils-653f4b8a.js';
 import { g as getStyleProps } from '../../props-utils-70c2d02a.js';
 import { T as TriggeredOverlayContext } from '../../context-034b8d25.js';
@@ -58,9 +59,9 @@ var COLLECTION_OPTS = {
  * with the secret derived `_node` prop.  That means Option and OptionGroup
  * render functions can assume that _node is passed in.
  */
-function useAriaSelectProps(props) {
-    var value = props.value, defaultValue = props.defaultValue, children = props.children, onChange = props.onChange; props.placement; props.menuMatchTriggerWidth; props.menuWidth; var rest = __rest(props, ["value", "defaultValue", "children", "onChange", "placement", "menuMatchTriggerWidth", "menuWidth"]);
-    var _a = useDerivedItemsFromChildren(children, __assign(__assign({}, COLLECTION_OPTS), { invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select", requireItemValue: true })), items = _a.items, disabledKeys = _a.disabledKeys;
+function useAriaSelectProps(props, config) {
+    var value = props.value, defaultValue = props.defaultValue; props.children; var onChange = props.onChange; props.placement; props.menuMatchTriggerWidth; props.menuWidth; var rest = __rest(props, ["value", "defaultValue", "children", "onChange", "placement", "menuMatchTriggerWidth", "menuWidth"]);
+    var _a = useDerivedItems(props, __assign(__assign({}, COLLECTION_OPTS), { invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select", requireItemValue: true, ItemComponent: config.OptionComponent, SectionComponent: config.OptionGroupComponent, itemsProp: "options" })), items = _a.items, disabledKeys = _a.disabledKeys;
     var collectionChildRenderer = React.useCallback(function (child) { return renderAsCollectionChild(child, COLLECTION_OPTS); }, []);
     var onSelectionChange = React.useMemo(function () {
         if (onChange) {
@@ -80,12 +81,13 @@ function useSelect(plasmicClass, props, config, ref) {
     var _a, _b;
     if (ref === void 0) { ref = null; }
     useEnsureSSRProvider();
-    var ariaProps = useAriaSelectProps(props).ariaProps;
+    var ariaProps = useAriaSelectProps(props, config).ariaProps;
     var placement = props.placement;
     var state = useSelectState(ariaProps);
     var triggerRef = React.useRef(null);
     var rootRef = React.useRef(null);
     var isDisabled = props.isDisabled, name = props.name, menuWidth = props.menuWidth, menuMatchTriggerWidth = props.menuMatchTriggerWidth, autoFocus = props.autoFocus, placeholder = props.placeholder, selectedContent = props.selectedContent;
+    var canvasCtx = usePlasmicCanvasContext();
     var _c = useSelect$1(ariaProps, state, triggerRef), triggerPressProps = _c.triggerProps, menuProps = _c.menuProps;
     var triggerProps = usePress(__assign(__assign({}, triggerPressProps), { isDisabled: isDisabled })).pressProps;
     var triggerContent = state.selectedItem
@@ -106,11 +108,11 @@ function useSelect(plasmicClass, props, config, ref) {
                 ref: rootRef
             }),
             wrapChildren: function (children) { return (React.createElement(React.Fragment, null,
-                React.createElement(HiddenSelect, { state: state, triggerRef: triggerRef, name: name, isDisabled: isDisabled }),
+                !canvasCtx && (React.createElement(HiddenSelect, { state: state, triggerRef: triggerRef, name: name, isDisabled: isDisabled })),
                 children)); }
         },
         _a[config.trigger] = {
-            props: mergeProps(triggerProps, {
+            props: mergeProps(canvasCtx ? {} : triggerProps, {
                 ref: triggerRef,
                 autoFocus: autoFocus,
                 disabled: !!isDisabled,
@@ -158,8 +160,12 @@ function useSelect(plasmicClass, props, config, ref) {
 function ListBoxWrapper(props) {
     var state = props.state, menuProps = props.menuProps, children = props.children;
     var ref = React.useRef(null);
+    var canvasCtx = usePlasmicCanvasContext();
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), { isVirtualized: false, autoFocus: state.focusStrategy || true, disallowEmptySelection: true }), state, ref).listBoxProps;
-    return React.cloneElement(children, mergeProps(children.props, listBoxProps, { style: noOutline(), ref: ref }));
+    return React.cloneElement(children, mergeProps(children.props, canvasCtx ? {} : listBoxProps, {
+        style: noOutline(),
+        ref: ref
+    }));
 }
 
 function useSelectOption(plasmicClass, props, config, outerRef) {
@@ -175,6 +181,7 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
         }
     }
     var children = props.children;
+    var canvasCtx = usePlasmicCanvasContext();
     var rootRef = React.useRef(null);
     var onRef = mergeRefs(rootRef, outerRef);
     // We pass in the Node secretly as an undocumented prop from <Select />
@@ -190,13 +197,14 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
         key: node.key,
         shouldSelectOnPressUp: true,
         shouldFocusOnHover: true,
-        isVirtualized: false
+        isVirtualized: false,
+        shouldUseVirtualFocus: !!canvasCtx
     }, state, rootRef), optionProps = _c.optionProps, labelProps = _c.labelProps;
     var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isSelectedVariant, active: isSelected }, { def: config.isDisabledVariant, active: isDisabled }, { def: config.isHighlightedVariant, active: isHighlighted }));
     var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.labelSlot] = children, _a));
     var overrides = (_b = {},
         _b[config.root] = {
-            props: mergeProps(optionProps, getStyleProps(props), {
+            props: mergeProps(canvasCtx ? {} : optionProps, getStyleProps(props), {
                 ref: onRef,
                 style: noOutline()
             })

package/skinny/dist/plume/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/plume/select/context.tsx","../../../../src/plume/select/select.tsx","../../../../src/plume/select/select-option.tsx","../../../../src/plume/select/select-option-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ListState } from \"@react-stately/list\";\n\nexport const SelectContext = React.createContext<ListState<any> | undefined>(\n  undefined\n);\n","import { usePress } from \"@react-aria/interactions\";\nimport { useListBox } from \"@react-aria/listbox\";\nimport { HiddenSelect, useSelect as useAriaSelect } from \"@react-aria/select\";\nimport {\n  SelectState as AriaSelectState,\n  useSelectState as useAriaSelectState,\n} from \"@react-stately/select\";\nimport { Placement } from \"@react-types/overlays\";\nimport { AriaSelectProps } from \"@react-types/select\";\nimport {\n  AriaLabelingProps,\n  DOMProps,\n  FocusableDOMProps,\n  FocusableProps,\n  InputBase,\n} from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport {\n  getChildProp,\n  renderAsCollectionChild,\n  renderCollectionNode,\n  useDerivedItemsFromChildren,\n} from \"../collection-utils\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  noOutline,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\nimport {\n  TriggeredOverlayContext,\n  TriggeredOverlayContextValue,\n} from \"../triggered-overlay/context\";\nimport { SelectContext } from \"./context\";\nimport { BaseSelectOptionProps } from \"./select-option\";\nimport { BaseSelectOptionGroupProps } from \"./select-option-group\";\n\nexport interface BaseSelectProps\n  extends DOMProps,\n    AriaLabelingProps,\n    FocusableDOMProps,\n    InputBase,\n    FocusableProps,\n    StyleProps {\n  /**\n   * Key of the currently selected value\n   */\n  value?: string | null;\n\n  /**\n   * Event handler fired when currently selected value changes\n   */\n  onChange?: (value: string | null) => void;\n\n  /**\n   * Uncontrolled key of the default selected value\n   */\n  defaultValue?: string;\n\n  /**\n   * List of Select.Options\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Whether the Select is currently open\n   */\n  isOpen?: boolean;\n\n  /**\n   * Event handler fired when Select's open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Uncontrolled default open state\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Form name of the select element\n   */\n  name?: string;\n\n  /**\n   * By default, Select will render whatever is in Select.Option as the\n   * content in the trigger button when it is selected.  You can override\n   * what content by passing in `selectedContent` here.\n   */\n  selectedContent?: React.ReactNode;\n\n  /**\n   * Desired placement location of the Select dropdown\n   */\n  placement?: Placement;\n\n  /**\n   * If true, menu width will always match the trigger button width.\n   * If false, then menu width will have min-width matching the\n   * trigger button width.\n   */\n  menuMatchTriggerWidth?: boolean;\n\n  /**\n   * If set, menu width will be exactly this width, overriding\n   * menuMatchTriggerWidth.\n   */\n  menuWidth?: number;\n\n  /**\n   * Content to display when nothing is selected.\n   */\n  placeholder?: React.ReactNode;\n}\n\nconst COLLECTION_OPTS = {\n  itemPlumeType: \"select-option\",\n  sectionPlumeType: \"select-option-group\",\n};\n\ntype AriaOptionType = React.ReactElement<BaseSelectOptionProps>;\ntype AriaGroupType = React.ReactElement<BaseSelectOptionGroupProps>;\ntype AriaSelectItemType = AriaOptionType | AriaGroupType;\n\n/**\n * Converts props in our BaseSelectProps into props that react-aria's\n * useSelect() understands.\n *\n * Because we're not exposing the Collections API (see ./index.tsx),\n * we are converting our own API into props for useSelect.\n *\n * Specifically, in Plume's API,\n * - `children` flattens to a list of ReactElements of type Select.Option\n *   or Select.OptionGroup\n *\n * and we map it this way to the Collections API:\n * - `items` is a list of those flattened ReactElements from `children`!\n * - `children`, as a render prop, is supposed to take one of the `items`\n *   and return a `Section` or `Item` element. We take an Option/OptionGroup\n *   element, and use its props to render the appropriate `Section` or\n *   `Item`. The \"trick\" here is that we then stuff the Option element as\n *   `Item.children`, and the OptionGroup element as `Section.title`.\n *\n * When the Collections API does its work deriving `Node`s, the corresponding\n * Option/OptionGroup ReactElements will end up as `Node.rendered`.\n *\n * Then, when we are actually rendering the content of the dropdown, we\n * iterate through each collected `Node`, and renders\n * React.cloneElement(Node.rendered, {_node: node}).  This \"secretly\" passes\n * the derived collection `Node` as a prop to Option and OptionGroup, and they\n * can make use of the derived `Node.key` etc in their rendering functions.\n *\n * One thing to note here is that we never \"rendered\" the Option/OptionGroup\n * React elements that the user constructed; instead, we just looked at the\n * props used on those elements, and passed those onto the Collections API.\n * What gets rendered to the screen is the cloned version of these elements\n * with the secret derived `_node` prop.  That means Option and OptionGroup\n * render functions can assume that _node is passed in.\n */\nfunction useAriaSelectProps(props: BaseSelectProps) {\n  let {\n    value,\n    defaultValue,\n    children,\n    onChange,\n    placement,\n    menuMatchTriggerWidth,\n    menuWidth,\n    ...rest\n  } = props;\n\n  const { items, disabledKeys } = useDerivedItemsFromChildren(children, {\n    ...COLLECTION_OPTS,\n    invalidChildError: `Can only use Select.Option and Select.OptionGroup as children to Select`,\n    requireItemValue: true,\n  });\n\n  const collectionChildRenderer = React.useCallback(\n    (child: any) => renderAsCollectionChild(child, COLLECTION_OPTS),\n    []\n  );\n\n  const onSelectionChange = React.useMemo(() => {\n    if (onChange) {\n      return (val: string | null) =>\n        onChange!(\n          (val == null || val === \"null\" ? null : val) as string | null\n        );\n    } else {\n      return undefined;\n    }\n  }, [onChange]);\n\n  return {\n    ariaProps: {\n      ...rest,\n      children: collectionChildRenderer,\n      onSelectionChange,\n      items,\n      disabledKeys,\n      defaultSelectedKey: defaultValue,\n\n      // react-aria is picky about selectedKey; if it is null, it means \"no selection\";\n      // if it is undefined, it means \"uncontrolled\".  So here, if the user passes in a\n      // value prop, then we make sure selectedKey will be null and not undefined, so\n      // we don't accidentally enter uncontrolled mode.\n      ...(\"value\" in props && { selectedKey: value ?? null }),\n    } as AriaSelectProps<AriaSelectItemType>,\n  };\n}\n\nexport type SelectRef = React.Ref<SelectRefValue>;\n\nexport interface SelectRefValue extends SelectState {\n  getTrigger: () => HTMLElement | null;\n  getRoot: () => HTMLElement | null;\n  focus: () => void;\n  blur: () => void;\n}\n\ninterface SelectConfig<C extends AnyPlasmicClass> {\n  placeholderVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isOpenVariant: VariantDef<PlasmicClassVariants<C>>;\n  isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n  triggerContentSlot: keyof PlasmicClassArgs<C>;\n  optionsSlot: keyof PlasmicClassArgs<C>;\n  placeholderSlot: keyof PlasmicClassArgs<C>;\n\n  root: keyof PlasmicClassOverrides<C>;\n  trigger: keyof PlasmicClassOverrides<C>;\n  overlay: keyof PlasmicClassOverrides<C>;\n  optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\ninterface SelectState {\n  open: () => void;\n  close: () => void;\n  isOpen: () => boolean;\n  getSelectedValue: () => string | null;\n  setSelectedValue: (value: string | null) => void;\n}\n\nexport function useSelect<P extends BaseSelectProps, C extends AnyPlasmicClass>(\n  plasmicClass: C,\n  props: P,\n  config: SelectConfig<C>,\n  ref: React.Ref<SelectRefValue> = null\n) {\n  useEnsureSSRProvider();\n  const { ariaProps } = useAriaSelectProps(props);\n  const { placement } = props;\n  const state = useAriaSelectState<AriaSelectItemType>(ariaProps);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const rootRef = React.useRef<HTMLElement>(null);\n\n  const {\n    isDisabled,\n    name,\n    menuWidth,\n    menuMatchTriggerWidth,\n    autoFocus,\n    placeholder,\n    selectedContent,\n  } = props;\n\n  const { triggerProps: triggerPressProps, menuProps } = useAriaSelect(\n    ariaProps,\n    state,\n    triggerRef\n  );\n\n  const { pressProps: triggerProps } = usePress({\n    ...triggerPressProps,\n    isDisabled,\n  });\n\n  const triggerContent = state.selectedItem\n    ? selectedContent ?? getChildProp(state.selectedItem.value, \"children\")\n    : null;\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.isOpenVariant, active: state.isOpen },\n      { def: config.placeholderVariant, active: !state.selectedItem },\n      { def: config.isDisabledVariant, active: isDisabled }\n    ),\n  };\n\n  const triggerContext: TriggeredOverlayContextValue = React.useMemo(\n    () => ({\n      triggerRef,\n      state,\n      placement,\n      overlayMatchTriggerWidth: menuMatchTriggerWidth,\n      overlayMinTriggerWidth: true,\n      overlayWidth: menuWidth,\n    }),\n    [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]\n  );\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: mergeProps(getStyleProps(props), {\n        ref: rootRef,\n      }),\n      wrapChildren: (children) => (\n        <>\n          <HiddenSelect\n            state={state}\n            triggerRef={triggerRef}\n            name={name}\n            isDisabled={isDisabled}\n          />\n          {children}\n        </>\n      ),\n    },\n    [config.trigger]: {\n      props: mergeProps(triggerProps, {\n        ref: triggerRef,\n        autoFocus,\n        disabled: !!isDisabled,\n        // Don't trigger form submission!\n        type: \"button\",\n      }),\n    },\n    [config.overlay]: {\n      wrap: (content) => (\n        <TriggeredOverlayContext.Provider value={triggerContext}>\n          {content}\n        </TriggeredOverlayContext.Provider>\n      ),\n    },\n    [config.optionsContainer]: {\n      wrap: (content) => (\n        <ListBoxWrapper state={state} menuProps={menuProps}>\n          {content as React.ReactElement}\n        </ListBoxWrapper>\n      ),\n    },\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.triggerContentSlot]: triggerContent,\n    [config.placeholderSlot]: placeholder,\n    [config.optionsSlot]: (\n      <SelectContext.Provider value={state}>\n        {Array.from(state.collection).map((node) => renderCollectionNode(node))}\n      </SelectContext.Provider>\n    ),\n  };\n\n  const plumeState: SelectState = React.useMemo(\n    () => ({\n      open: () => state.open(),\n      close: () => state.close(),\n      isOpen: () => state.isOpen,\n      getSelectedValue: () =>\n        state.selectedKey ? `${state.selectedKey}` : null,\n      setSelectedValue: (key) => state.setSelectedKey(key as any),\n    }),\n    [state]\n  );\n\n  React.useImperativeHandle(\n    ref,\n    () => ({\n      getRoot: () => rootRef.current,\n      getTrigger: () => triggerRef.current,\n      focus: () => triggerRef.current?.focus(),\n      blur: () => triggerRef.current?.blur(),\n      open: () => plumeState.open(),\n      close: () => plumeState.close(),\n      isOpen: () => plumeState.isOpen(),\n      getSelectedValue: () => plumeState.getSelectedValue(),\n      setSelectedValue: (key) => plumeState.setSelectedValue(key),\n    }),\n    [rootRef, triggerRef, plumeState]\n  );\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n    state: plumeState,\n  };\n}\n\nfunction ListBoxWrapper(props: {\n  state: AriaSelectState<any>;\n  menuProps: React.HTMLAttributes<Element>;\n  children: React.ReactElement;\n}) {\n  const { state, menuProps, children } = props;\n\n  const ref = React.useRef<HTMLElement>(null);\n\n  const { listBoxProps } = useListBox(\n    {\n      ...menuProps,\n      isVirtualized: false,\n      autoFocus: state.focusStrategy || true,\n      disallowEmptySelection: true,\n    },\n    state,\n    ref\n  );\n\n  return React.cloneElement(\n    children,\n    mergeProps(children.props, listBoxProps, { style: noOutline(), ref })\n  );\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useOption as useAriaOption } from \"@react-aria/listbox\";\nimport { pick } from \"../../common\";\nimport { mergeProps, mergeRefs } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { ItemLikeProps } from \"../collection-utils\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  noOutline,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  PLUME_STRICT_MODE,\n  VariantDef,\n} from \"../plume-utils\";\nimport {\n  getDefaultPlasmicProps,\n  getStyleProps,\n  StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionProps extends ItemLikeProps, StyleProps {}\n\ninterface SelectOptionConfig<C extends AnyPlasmicClass> {\n  isSelectedVariant: VariantDef<PlasmicClassVariants<C>>;\n  isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isHighlightedVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n  labelSlot: keyof PlasmicClassArgs<C>;\n\n  root: keyof PlasmicClassOverrides<C>;\n  labelContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type SelectOptionRef = React.Ref<HTMLElement>;\n\nexport function useSelectOption<\n  P extends BaseSelectOptionProps,\n  C extends AnyPlasmicClass\n>(\n  plasmicClass: C,\n  props: P,\n  config: SelectOptionConfig<C>,\n  outerRef: SelectOptionRef = null\n) {\n  const state = React.useContext(SelectContext);\n\n  if (!state) {\n    // If no context, then we are being incorrectly used.  Complain or just don't\n    // bother installing any hooks.  It's okay to violate rules of hooks here\n    // because this instance won't suddenly be used correctly in another render.\n    if (PLUME_STRICT_MODE) {\n      throw new Error(\n        \"You can only use a Select.Option within a Select component.\"\n      );\n    }\n\n    return getDefaultPlasmicProps(plasmicClass, props);\n  }\n\n  const { children } = props;\n\n  const rootRef = React.useRef<HTMLElement>(null);\n  const onRef = mergeRefs(rootRef, outerRef);\n\n  // We pass in the Node secretly as an undocumented prop from <Select />\n  const node = (props as any)._node as Node<\n    React.ReactElement<BaseSelectOptionProps>\n  >;\n\n  const isSelected = state.selectionManager.isSelected(node.key);\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isHighlighted =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n\n  const { optionProps, labelProps } = useAriaOption(\n    {\n      isSelected,\n      isDisabled,\n      \"aria-label\": node && node[\"aria-label\"],\n      key: node.key,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      isVirtualized: false,\n    },\n    state,\n    rootRef\n  );\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.isSelectedVariant, active: isSelected },\n      { def: config.isDisabledVariant, active: isDisabled },\n      { def: config.isHighlightedVariant, active: isHighlighted }\n    ),\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.labelSlot]: children,\n  };\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: mergeProps(optionProps, getStyleProps(props), {\n        ref: onRef,\n        style: noOutline(),\n      }),\n    },\n    [config.labelContainer]: {\n      props: labelProps,\n    },\n  };\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n  };\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useListBoxSection } from \"@react-aria/listbox\";\nimport { useSeparator } from \"@react-aria/separator\";\nimport { pick } from \"../../common\";\nimport { Overrides } from \"../../render/elements\";\nimport { renderCollectionNode, SectionLikeProps } from \"../collection-utils\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  PLUME_STRICT_MODE,\n} from \"../plume-utils\";\nimport {\n  getDefaultPlasmicProps,\n  getStyleProps,\n  StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionGroupProps\n  extends SectionLikeProps,\n    StyleProps {}\n\ninterface SelectOptionGroupConfig<C extends AnyPlasmicClass> {\n  noTitleVariant: PlasmicClassVariants<C>;\n  isFirstVariant: PlasmicClassVariants<C>;\n\n  optionsSlot: keyof PlasmicClassArgs<C>;\n  titleSlot: keyof PlasmicClassArgs<C>;\n\n  root: keyof PlasmicClassOverrides<C>;\n  separator: keyof PlasmicClassOverrides<C>;\n  titleContainer: keyof PlasmicClassOverrides<C>;\n  optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useSelectOptionGroup<\n  P extends BaseSelectOptionGroupProps,\n  C extends AnyPlasmicClass\n>(plasmicClass: C, props: P, config: SelectOptionGroupConfig<C>) {\n  const state = React.useContext(SelectContext);\n\n  // `node` should exist if the OptionGroup was instantiated properly\n  // within a Select\n  const node = (props as any)._node as\n    | Node<React.ReactElement<BaseSelectOptionGroupProps>>\n    | undefined;\n\n  if (!state || !node) {\n    if (PLUME_STRICT_MODE) {\n      throw new Error(\n        \"You can only use a Select.OptionGroup within a Select component.\"\n      );\n    }\n    return getDefaultPlasmicProps(plasmicClass, props);\n  }\n\n  const { headingProps, groupProps } = useListBoxSection({\n    heading: props.title,\n    \"aria-label\": props[\"aria-label\"],\n  });\n\n  const { separatorProps } = useSeparator({\n    elementType: \"li\",\n  });\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.noTitleVariant, active: !props.title },\n      {\n        def: config.isFirstVariant,\n        active: state.collection.getFirstKey() === node.key,\n      }\n    ),\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.titleSlot]: props.title,\n    [config.optionsSlot]: Array.from(node.childNodes).map((childNode) =>\n      renderCollectionNode(childNode)\n    ),\n  };\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: getStyleProps(props),\n    },\n    [config.separator]: {\n      props: {\n        ...separatorProps,\n      },\n    },\n    [config.titleContainer]: {\n      props: {\n        role: \"presentation\",\n        ...headingProps,\n      },\n      ...(!props.title && {\n        render: () => null,\n      }),\n    },\n    [config.optionsContainer]: {\n      props: {\n        ...groupProps,\n      },\n    },\n  };\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n  };\n}\n"],"names":["useAriaSelectState","useAriaSelect","useAriaOption"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/plume/select/context.tsx","../../../../src/plume/select/select.tsx","../../../../src/plume/select/select-option.tsx","../../../../src/plume/select/select-option-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ListState } from \"@react-stately/list\";\n\nexport const SelectContext = React.createContext<ListState<any> | undefined>(\n  undefined\n);\n","import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { usePress } from \"@react-aria/interactions\";\nimport { useListBox } from \"@react-aria/listbox\";\nimport { HiddenSelect, useSelect as useAriaSelect } from \"@react-aria/select\";\nimport {\n  SelectState as AriaSelectState,\n  useSelectState as useAriaSelectState,\n} from \"@react-stately/select\";\nimport { Placement } from \"@react-types/overlays\";\nimport { AriaSelectProps } from \"@react-types/select\";\nimport {\n  AriaLabelingProps,\n  DOMProps,\n  FocusableDOMProps,\n  FocusableProps,\n  InputBase,\n} from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeProps } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { useEnsureSSRProvider } from \"../../render/ssr\";\nimport {\n  getChildProp,\n  ItemJson,\n  ItemLikeProps,\n  renderAsCollectionChild,\n  renderCollectionNode,\n  SectionLikeProps,\n  useDerivedItems,\n} from \"../collection-utils\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  noOutline,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  VariantDef,\n} from \"../plume-utils\";\nimport { getStyleProps, StyleProps } from \"../props-utils\";\nimport {\n  TriggeredOverlayContext,\n  TriggeredOverlayContextValue,\n} from \"../triggered-overlay/context\";\nimport { SelectContext } from \"./context\";\nimport { BaseSelectOptionProps } from \"./select-option\";\nimport { BaseSelectOptionGroupProps } from \"./select-option-group\";\n\nexport interface BaseSelectProps\n  extends DOMProps,\n    AriaLabelingProps,\n    FocusableDOMProps,\n    InputBase,\n    FocusableProps,\n    StyleProps {\n  /**\n   * Key of the currently selected value\n   */\n  value?: string | null;\n\n  /**\n   * Event handler fired when currently selected value changes\n   */\n  onChange?: (value: string | null) => void;\n\n  /**\n   * Uncontrolled key of the default selected value\n   */\n  defaultValue?: string;\n\n  /**\n   * List of Select.Options\n   */\n  children?: React.ReactNode;\n\n  /**\n   * List of options as an array, instead of using `children` prop. If this\n   * is passed in, then `children` is ignored.\n   *\n   * The options can be a list of strings, or a list of objects with\n   * fields `value` (for the value of the option), `label` (for what's rendered\n   * in the option), and `isDisabled` (if the option should be disabled).\n   */\n  options?: ItemJson[];\n\n  /**\n   * Whether the Select is currently open\n   */\n  isOpen?: boolean;\n\n  /**\n   * Event handler fired when Select's open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Uncontrolled default open state\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Form name of the select element\n   */\n  name?: string;\n\n  /**\n   * By default, Select will render whatever is in Select.Option as the\n   * content in the trigger button when it is selected.  You can override\n   * what content by passing in `selectedContent` here.\n   */\n  selectedContent?: React.ReactNode;\n\n  /**\n   * Desired placement location of the Select dropdown\n   */\n  placement?: Placement;\n\n  /**\n   * If true, menu width will always match the trigger button width.\n   * If false, then menu width will have min-width matching the\n   * trigger button width.\n   */\n  menuMatchTriggerWidth?: boolean;\n\n  /**\n   * If set, menu width will be exactly this width, overriding\n   * menuMatchTriggerWidth.\n   */\n  menuWidth?: number;\n\n  /**\n   * Content to display when nothing is selected.\n   */\n  placeholder?: React.ReactNode;\n}\n\nconst COLLECTION_OPTS = {\n  itemPlumeType: \"select-option\",\n  sectionPlumeType: \"select-option-group\",\n};\n\ntype AriaOptionType = React.ReactElement<BaseSelectOptionProps>;\ntype AriaGroupType = React.ReactElement<BaseSelectOptionGroupProps>;\ntype AriaSelectItemType = AriaOptionType | AriaGroupType;\n\n/**\n * Converts props in our BaseSelectProps into props that react-aria's\n * useSelect() understands.\n *\n * Because we're not exposing the Collections API (see ./index.tsx),\n * we are converting our own API into props for useSelect.\n *\n * Specifically, in Plume's API,\n * - `children` flattens to a list of ReactElements of type Select.Option\n *   or Select.OptionGroup\n *\n * and we map it this way to the Collections API:\n * - `items` is a list of those flattened ReactElements from `children`!\n * - `children`, as a render prop, is supposed to take one of the `items`\n *   and return a `Section` or `Item` element. We take an Option/OptionGroup\n *   element, and use its props to render the appropriate `Section` or\n *   `Item`. The \"trick\" here is that we then stuff the Option element as\n *   `Item.children`, and the OptionGroup element as `Section.title`.\n *\n * When the Collections API does its work deriving `Node`s, the corresponding\n * Option/OptionGroup ReactElements will end up as `Node.rendered`.\n *\n * Then, when we are actually rendering the content of the dropdown, we\n * iterate through each collected `Node`, and renders\n * React.cloneElement(Node.rendered, {_node: node}).  This \"secretly\" passes\n * the derived collection `Node` as a prop to Option and OptionGroup, and they\n * can make use of the derived `Node.key` etc in their rendering functions.\n *\n * One thing to note here is that we never \"rendered\" the Option/OptionGroup\n * React elements that the user constructed; instead, we just looked at the\n * props used on those elements, and passed those onto the Collections API.\n * What gets rendered to the screen is the cloned version of these elements\n * with the secret derived `_node` prop.  That means Option and OptionGroup\n * render functions can assume that _node is passed in.\n */\nfunction useAriaSelectProps(props: BaseSelectProps, config: SelectConfig<any>) {\n  let {\n    value,\n    defaultValue,\n    children,\n    onChange,\n    placement,\n    menuMatchTriggerWidth,\n    menuWidth,\n    ...rest\n  } = props;\n\n  const { items, disabledKeys } = useDerivedItems(props, {\n    ...COLLECTION_OPTS,\n    invalidChildError: `Can only use Select.Option and Select.OptionGroup as children to Select`,\n    requireItemValue: true,\n    ItemComponent: config.OptionComponent,\n    SectionComponent: config.OptionGroupComponent,\n    itemsProp: \"options\",\n  });\n\n  const collectionChildRenderer = React.useCallback(\n    (child: any) => renderAsCollectionChild(child, COLLECTION_OPTS),\n    []\n  );\n\n  const onSelectionChange = React.useMemo(() => {\n    if (onChange) {\n      return (val: string | null) =>\n        onChange!(\n          (val == null || val === \"null\" ? null : val) as string | null\n        );\n    } else {\n      return undefined;\n    }\n  }, [onChange]);\n\n  return {\n    ariaProps: {\n      ...rest,\n      children: collectionChildRenderer,\n      onSelectionChange,\n      items,\n      disabledKeys,\n      defaultSelectedKey: defaultValue,\n\n      // react-aria is picky about selectedKey; if it is null, it means \"no selection\";\n      // if it is undefined, it means \"uncontrolled\".  So here, if the user passes in a\n      // value prop, then we make sure selectedKey will be null and not undefined, so\n      // we don't accidentally enter uncontrolled mode.\n      ...(\"value\" in props && { selectedKey: value ?? null }),\n    } as AriaSelectProps<AriaSelectItemType>,\n  };\n}\n\nexport type SelectRef = React.Ref<SelectRefValue>;\n\nexport interface SelectRefValue extends SelectState {\n  getTrigger: () => HTMLElement | null;\n  getRoot: () => HTMLElement | null;\n  focus: () => void;\n  blur: () => void;\n}\n\ninterface SelectConfig<C extends AnyPlasmicClass> {\n  placeholderVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isOpenVariant: VariantDef<PlasmicClassVariants<C>>;\n  isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n  triggerContentSlot: keyof PlasmicClassArgs<C>;\n  optionsSlot: keyof PlasmicClassArgs<C>;\n  placeholderSlot: keyof PlasmicClassArgs<C>;\n\n  root: keyof PlasmicClassOverrides<C>;\n  trigger: keyof PlasmicClassOverrides<C>;\n  overlay: keyof PlasmicClassOverrides<C>;\n  optionsContainer: keyof PlasmicClassOverrides<C>;\n\n  OptionComponent?: React.ComponentType<ItemLikeProps>;\n  OptionGroupComponent?: React.ComponentType<SectionLikeProps>;\n}\n\ninterface SelectState {\n  open: () => void;\n  close: () => void;\n  isOpen: () => boolean;\n  getSelectedValue: () => string | null;\n  setSelectedValue: (value: string | null) => void;\n}\n\nexport function useSelect<P extends BaseSelectProps, C extends AnyPlasmicClass>(\n  plasmicClass: C,\n  props: P,\n  config: SelectConfig<C>,\n  ref: React.Ref<SelectRefValue> = null\n) {\n  useEnsureSSRProvider();\n  const { ariaProps } = useAriaSelectProps(props, config);\n  const { placement } = props;\n  const state = useAriaSelectState<AriaSelectItemType>(ariaProps);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const rootRef = React.useRef<HTMLElement>(null);\n\n  const {\n    isDisabled,\n    name,\n    menuWidth,\n    menuMatchTriggerWidth,\n    autoFocus,\n    placeholder,\n    selectedContent,\n  } = props;\n\n  const canvasCtx = usePlasmicCanvasContext();\n\n  const { triggerProps: triggerPressProps, menuProps } = useAriaSelect(\n    ariaProps,\n    state,\n    triggerRef\n  );\n\n  const { pressProps: triggerProps } = usePress({\n    ...triggerPressProps,\n    isDisabled,\n  });\n\n  const triggerContent = state.selectedItem\n    ? selectedContent ?? getChildProp(state.selectedItem.value, \"children\")\n    : null;\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.isOpenVariant, active: state.isOpen },\n      { def: config.placeholderVariant, active: !state.selectedItem },\n      { def: config.isDisabledVariant, active: isDisabled }\n    ),\n  };\n\n  const triggerContext: TriggeredOverlayContextValue = React.useMemo(\n    () => ({\n      triggerRef,\n      state,\n      placement,\n      overlayMatchTriggerWidth: menuMatchTriggerWidth,\n      overlayMinTriggerWidth: true,\n      overlayWidth: menuWidth,\n    }),\n    [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]\n  );\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: mergeProps(getStyleProps(props), {\n        ref: rootRef,\n      }),\n      wrapChildren: (children) => (\n        <>\n          {!canvasCtx && (\n            <HiddenSelect\n              state={state}\n              triggerRef={triggerRef}\n              name={name}\n              isDisabled={isDisabled}\n            />\n          )}\n          {children}\n        </>\n      ),\n    },\n    [config.trigger]: {\n      props: mergeProps(canvasCtx ? {} : triggerProps, {\n        ref: triggerRef,\n        autoFocus,\n        disabled: !!isDisabled,\n        // Don't trigger form submission!\n        type: \"button\",\n      }),\n    },\n    [config.overlay]: {\n      wrap: (content) => (\n        <TriggeredOverlayContext.Provider value={triggerContext}>\n          {content}\n        </TriggeredOverlayContext.Provider>\n      ),\n    },\n    [config.optionsContainer]: {\n      wrap: (content) => (\n        <ListBoxWrapper state={state} menuProps={menuProps}>\n          {content as React.ReactElement}\n        </ListBoxWrapper>\n      ),\n    },\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.triggerContentSlot]: triggerContent,\n    [config.placeholderSlot]: placeholder,\n    [config.optionsSlot]: (\n      <SelectContext.Provider value={state}>\n        {Array.from(state.collection).map((node) => renderCollectionNode(node))}\n      </SelectContext.Provider>\n    ),\n  };\n\n  const plumeState: SelectState = React.useMemo(\n    () => ({\n      open: () => state.open(),\n      close: () => state.close(),\n      isOpen: () => state.isOpen,\n      getSelectedValue: () =>\n        state.selectedKey ? `${state.selectedKey}` : null,\n      setSelectedValue: (key) => state.setSelectedKey(key as any),\n    }),\n    [state]\n  );\n\n  React.useImperativeHandle(\n    ref,\n    () => ({\n      getRoot: () => rootRef.current,\n      getTrigger: () => triggerRef.current,\n      focus: () => triggerRef.current?.focus(),\n      blur: () => triggerRef.current?.blur(),\n      open: () => plumeState.open(),\n      close: () => plumeState.close(),\n      isOpen: () => plumeState.isOpen(),\n      getSelectedValue: () => plumeState.getSelectedValue(),\n      setSelectedValue: (key) => plumeState.setSelectedValue(key),\n    }),\n    [rootRef, triggerRef, plumeState]\n  );\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n    state: plumeState,\n  };\n}\n\nfunction ListBoxWrapper(props: {\n  state: AriaSelectState<any>;\n  menuProps: React.HTMLAttributes<Element>;\n  children: React.ReactElement;\n}) {\n  const { state, menuProps, children } = props;\n\n  const ref = React.useRef<HTMLElement>(null);\n  const canvasCtx = usePlasmicCanvasContext();\n\n  const { listBoxProps } = useListBox(\n    {\n      ...menuProps,\n      isVirtualized: false,\n      autoFocus: state.focusStrategy || true,\n      disallowEmptySelection: true,\n    },\n    state,\n    ref\n  );\n\n  return React.cloneElement(\n    children,\n    mergeProps(children.props, canvasCtx ? {} : listBoxProps, {\n      style: noOutline(),\n      ref,\n    })\n  );\n}\n","import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { useOption as useAriaOption } from \"@react-aria/listbox\";\nimport { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeProps, mergeRefs } from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport { ItemLikeProps } from \"../collection-utils\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  noOutline,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  PLUME_STRICT_MODE,\n  VariantDef,\n} from \"../plume-utils\";\nimport {\n  getDefaultPlasmicProps,\n  getStyleProps,\n  StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionProps extends ItemLikeProps, StyleProps {}\n\ninterface SelectOptionConfig<C extends AnyPlasmicClass> {\n  isSelectedVariant: VariantDef<PlasmicClassVariants<C>>;\n  isDisabledVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isHighlightedVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n  labelSlot: keyof PlasmicClassArgs<C>;\n\n  root: keyof PlasmicClassOverrides<C>;\n  labelContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type SelectOptionRef = React.Ref<HTMLElement>;\n\nexport function useSelectOption<\n  P extends BaseSelectOptionProps,\n  C extends AnyPlasmicClass\n>(\n  plasmicClass: C,\n  props: P,\n  config: SelectOptionConfig<C>,\n  outerRef: SelectOptionRef = null\n) {\n  const state = React.useContext(SelectContext);\n\n  if (!state) {\n    // If no context, then we are being incorrectly used.  Complain or just don't\n    // bother installing any hooks.  It's okay to violate rules of hooks here\n    // because this instance won't suddenly be used correctly in another render.\n    if (PLUME_STRICT_MODE) {\n      throw new Error(\n        \"You can only use a Select.Option within a Select component.\"\n      );\n    }\n\n    return getDefaultPlasmicProps(plasmicClass, props);\n  }\n\n  const { children } = props;\n\n  const canvasCtx = usePlasmicCanvasContext();\n  const rootRef = React.useRef<HTMLElement>(null);\n  const onRef = mergeRefs(rootRef, outerRef);\n\n  // We pass in the Node secretly as an undocumented prop from <Select />\n  const node = (props as any)._node as Node<\n    React.ReactElement<BaseSelectOptionProps>\n  >;\n\n  const isSelected = state.selectionManager.isSelected(node.key);\n  const isDisabled = state.disabledKeys.has(node.key);\n  const isHighlighted =\n    state.selectionManager.isFocused &&\n    state.selectionManager.focusedKey === node.key;\n\n  const { optionProps, labelProps } = useAriaOption(\n    {\n      isSelected,\n      isDisabled,\n      \"aria-label\": node && node[\"aria-label\"],\n      key: node.key,\n      shouldSelectOnPressUp: true,\n      shouldFocusOnHover: true,\n      isVirtualized: false,\n      shouldUseVirtualFocus: !!canvasCtx,\n    },\n    state,\n    rootRef\n  );\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.isSelectedVariant, active: isSelected },\n      { def: config.isDisabledVariant, active: isDisabled },\n      { def: config.isHighlightedVariant, active: isHighlighted }\n    ),\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.labelSlot]: children,\n  };\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: mergeProps(canvasCtx ? {} : optionProps, getStyleProps(props), {\n        ref: onRef,\n        style: noOutline(),\n      }),\n    },\n    [config.labelContainer]: {\n      props: labelProps,\n    },\n  };\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n  };\n}\n","import { Node } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport { useListBoxSection } from \"@react-aria/listbox\";\nimport { useSeparator } from \"@react-aria/separator\";\nimport { pick } from \"../../common\";\nimport { Overrides } from \"../../render/elements\";\nimport { renderCollectionNode, SectionLikeProps } from \"../collection-utils\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  PLUME_STRICT_MODE,\n} from \"../plume-utils\";\nimport {\n  getDefaultPlasmicProps,\n  getStyleProps,\n  StyleProps,\n} from \"../props-utils\";\nimport { SelectContext } from \"./context\";\n\nexport interface BaseSelectOptionGroupProps\n  extends SectionLikeProps,\n    StyleProps {}\n\ninterface SelectOptionGroupConfig<C extends AnyPlasmicClass> {\n  noTitleVariant: PlasmicClassVariants<C>;\n  isFirstVariant: PlasmicClassVariants<C>;\n\n  optionsSlot: keyof PlasmicClassArgs<C>;\n  titleSlot: keyof PlasmicClassArgs<C>;\n\n  root: keyof PlasmicClassOverrides<C>;\n  separator: keyof PlasmicClassOverrides<C>;\n  titleContainer: keyof PlasmicClassOverrides<C>;\n  optionsContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport function useSelectOptionGroup<\n  P extends BaseSelectOptionGroupProps,\n  C extends AnyPlasmicClass\n>(plasmicClass: C, props: P, config: SelectOptionGroupConfig<C>) {\n  const state = React.useContext(SelectContext);\n\n  // `node` should exist if the OptionGroup was instantiated properly\n  // within a Select\n  const node = (props as any)._node as\n    | Node<React.ReactElement<BaseSelectOptionGroupProps>>\n    | undefined;\n\n  if (!state || !node) {\n    if (PLUME_STRICT_MODE) {\n      throw new Error(\n        \"You can only use a Select.OptionGroup within a Select component.\"\n      );\n    }\n    return getDefaultPlasmicProps(plasmicClass, props);\n  }\n\n  const { headingProps, groupProps } = useListBoxSection({\n    heading: props.title,\n    \"aria-label\": props[\"aria-label\"],\n  });\n\n  const { separatorProps } = useSeparator({\n    elementType: \"li\",\n  });\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.noTitleVariant, active: !props.title },\n      {\n        def: config.isFirstVariant,\n        active: state.collection.getFirstKey() === node.key,\n      }\n    ),\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.titleSlot]: props.title,\n    [config.optionsSlot]: Array.from(node.childNodes).map((childNode) =>\n      renderCollectionNode(childNode)\n    ),\n  };\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: getStyleProps(props),\n    },\n    [config.separator]: {\n      props: {\n        ...separatorProps,\n      },\n    },\n    [config.titleContainer]: {\n      props: {\n        role: \"presentation\",\n        ...headingProps,\n      },\n      ...(!props.title && {\n        render: () => null,\n      }),\n    },\n    [config.optionsContainer]: {\n      props: {\n        ...groupProps,\n      },\n    },\n  };\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n  };\n}\n"],"names":["useAriaSelectState","useAriaSelect","useAriaOption"],"mappings":";;;;;;;;;;;;;;;;;;;;IAGa,aAAa,GAAG,KAAK,CAAC,aAAa,CAC9C,SAAS;;ACqIX,IAAM,eAAe,GAAG;IACtB,aAAa,EAAE,eAAe;IAC9B,gBAAgB,EAAE,qBAAqB;CACxC,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAS,kBAAkB,CAAC,KAAsB,EAAE,MAAyB;QAEzE,KAAK,GAQH,KAAK,MARF,EACL,YAAY,GAOV,KAAK,aAPK,EAOV,KAAK,SANC,MACR,QAAQ,GAKN,KAAK,SALC,EAKN,KAAK,UAJE,EAIP,KAAK,sBAHc,EAGnB,KAAK,UAFE,MACN,IAAI,UACL,KAAK,EATL,oGASH,EAAS;IAEJ,IAAA,KAA0B,eAAe,CAAC,KAAK,wBAChD,eAAe,KAClB,iBAAiB,EAAE,yEAAyE,EAC5F,gBAAgB,EAAE,IAAI,EACtB,aAAa,EAAE,MAAM,CAAC,eAAe,EACrC,gBAAgB,EAAE,MAAM,CAAC,oBAAoB,EAC7C,SAAS,EAAE,SAAS,IACpB,EAPM,KAAK,WAAA,EAAE,YAAY,kBAOzB,CAAC;IAEH,IAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAC/C,UAAC,KAAU,IAAK,OAAA,uBAAuB,CAAC,KAAK,EAAE,eAAe,CAAC,GAAA,EAC/D,EAAE,CACH,CAAC;IAEF,IAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC;QACtC,IAAI,QAAQ,EAAE;YACZ,OAAO,UAAC,GAAkB;gBACxB,OAAA,QAAS,EACN,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,MAAM,GAAG,IAAI,GAAG,GAAG,EAC5C;aAAA,CAAC;SACL;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;KACF,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO;QACL,SAAS,EAAE,+BACN,IAAI,KACP,QAAQ,EAAE,uBAAuB,EACjC,iBAAiB,mBAAA,EACjB,KAAK,OAAA,EACL,YAAY,cAAA,EACZ,kBAAkB,EAAE,YAAY,MAM5B,OAAO,IAAI,KAAK,IAAI,EAAE,WAAW,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,EAAE,EAChB;KACzC,CAAC;AACJ,CAAC;SAqCe,SAAS,CACvB,YAAe,EACf,KAAQ,EACR,MAAuB,EACvB,GAAqC;;IAArC,oBAAA,EAAA,UAAqC;IAErC,oBAAoB,EAAE,CAAC;IACf,IAAA,SAAS,GAAK,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,UAAtC,CAAuC;IAChD,IAAA,SAAS,GAAK,KAAK,UAAV,CAAW;IAC5B,IAAM,KAAK,GAAGA,cAAkB,CAAqB,SAAS,CAAC,CAAC;IAChE,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACzD,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAG9C,IAAA,UAAU,GAOR,KAAK,WAPG,EACV,IAAI,GAMF,KAAK,KANH,EACJ,SAAS,GAKP,KAAK,UALE,EACT,qBAAqB,GAInB,KAAK,sBAJc,EACrB,SAAS,GAGP,KAAK,UAHE,EACT,WAAW,GAET,KAAK,YAFI,EACX,eAAe,GACb,KAAK,gBADQ,CACP;IAEV,IAAM,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAEtC,IAAA,KAAiDC,WAAa,CAClE,SAAS,EACT,KAAK,EACL,UAAU,CACX,EAJqB,iBAAiB,kBAAA,EAAE,SAAS,eAIjD,CAAC;IAEM,IAAY,YAAY,GAAK,QAAQ,uBACxC,iBAAiB,KACpB,UAAU,YAAA,IACV,WAH8B,CAG7B;IAEH,IAAM,cAAc,GAAG,KAAK,CAAC,YAAY;UACrC,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC;UACrE,IAAI,CAAC;IAET,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,aAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EACnD,EAAE,GAAG,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,EAC/D,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,CACtD,CACF,CAAC;IAEF,IAAM,cAAc,GAAiC,KAAK,CAAC,OAAO,CAChE,cAAM,QAAC;QACL,UAAU,YAAA;QACV,KAAK,OAAA;QACL,SAAS,WAAA;QACT,wBAAwB,EAAE,qBAAqB;QAC/C,sBAAsB,EAAE,IAAI;QAC5B,YAAY,EAAE,SAAS;KACxB,IAAC,EACF,CAAC,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,CAAC,CACjE,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACtC,GAAG,EAAE,OAAO;aACb,CAAC;YACF,YAAY,EAAE,UAAC,QAAQ,IAAK,QAC1B;gBACG,CAAC,SAAS,KACT,oBAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,GACtB,CACH;gBACA,QAAQ,CACR,IACJ;SACF;QACD,GAAC,MAAM,CAAC,OAAO,IAAG;YAChB,KAAK,EAAE,UAAU,CAAC,SAAS,GAAG,EAAE,GAAG,YAAY,EAAE;gBAC/C,GAAG,EAAE,UAAU;gBACf,SAAS,WAAA;gBACT,QAAQ,EAAE,CAAC,CAAC,UAAU;;gBAEtB,IAAI,EAAE,QAAQ;aACf,CAAC;SACH;QACD,GAAC,MAAM,CAAC,OAAO,IAAG;YAChB,IAAI,EAAE,UAAC,OAAO,IAAK,QACjB,oBAAC,uBAAuB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,IACpD,OAAO,CACyB,IACpC;SACF;QACD,GAAC,MAAM,CAAC,gBAAgB,IAAG;YACzB,IAAI,EAAE,UAAC,OAAO,IAAK,QACjB,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,IAC/C,OAA6B,CACf,IAClB;SACF;WACF,CAAC;IAEF,IAAM,IAAI,yBACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,0BAC9C,MAAM,CAAC,kBAAkB,IAAG,cAAc,KAC1C,MAAM,CAAC,eAAe,IAAG,WAAW,KACpC,MAAM,CAAC,WAAW,KACjB,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACjC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,oBAAoB,CAAC,IAAI,CAAC,GAAA,CAAC,CAChD,CAC1B,MACF,CAAC;IAEF,IAAM,UAAU,GAAgB,KAAK,CAAC,OAAO,CAC3C,cAAM,QAAC;QACL,IAAI,EAAE,cAAM,OAAA,KAAK,CAAC,IAAI,EAAE,GAAA;QACxB,KAAK,EAAE,cAAM,OAAA,KAAK,CAAC,KAAK,EAAE,GAAA;QAC1B,MAAM,EAAE,cAAM,OAAA,KAAK,CAAC,MAAM,GAAA;QAC1B,gBAAgB,EAAE;YAChB,OAAA,KAAK,CAAC,WAAW,GAAG,UAAG,KAAK,CAAC,WAAW,CAAE,GAAG,IAAI;SAAA;QACnD,gBAAgB,EAAE,UAAC,GAAG,IAAK,OAAA,KAAK,CAAC,cAAc,CAAC,GAAU,CAAC,GAAA;KAC5D,IAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,cAAM,QAAC;QACL,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,OAAO,GAAA;QAC9B,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,OAAO,GAAA;QACpC,KAAK,EAAE,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;QACxC,IAAI,EAAE,sBAAM,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAA,EAAA;QACtC,IAAI,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,EAAE,GAAA;QAC7B,KAAK,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,EAAE,GAAA;QAC/B,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,MAAM,EAAE,GAAA;QACjC,gBAAgB,EAAE,cAAM,OAAA,UAAU,CAAC,gBAAgB,EAAE,GAAA;QACrD,gBAAgB,EAAE,UAAC,GAAG,IAAK,OAAA,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAA;KAC5D,IAAC,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAClC,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;QACD,KAAK,EAAE,UAAU;KAClB,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,KAIvB;IACS,IAAA,KAAK,GAA0B,KAAK,MAA/B,EAAE,SAAS,GAAe,KAAK,UAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE7C,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,IAAM,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAEpC,IAAA,YAAY,GAAK,UAAU,uBAE5B,SAAS,KACZ,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,KAAK,CAAC,aAAa,IAAI,IAAI,EACtC,sBAAsB,EAAE,IAAI,KAE9B,KAAK,EACL,GAAG,CACJ,aATmB,CASlB;IAEF,OAAO,KAAK,CAAC,YAAY,CACvB,QAAQ,EACR,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,EAAE,GAAG,YAAY,EAAE;QACxD,KAAK,EAAE,SAAS,EAAE;QAClB,GAAG,KAAA;KACJ,CAAC,CACH,CAAC;AACJ;;SC7ZgB,eAAe,CAI7B,YAAe,EACf,KAAQ,EACR,MAA6B,EAC7B,QAAgC;;IAAhC,yBAAA,EAAA,eAAgC;IAEhC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAE9C,IAAI,CAAC,KAAK,EAAE;;;;QAIa;YACrB,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;SACH;KAGF;IAEO,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,IAAM,SAAS,GAAG,uBAAuB,EAAE,CAAC;IAC5C,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAChD,IAAM,KAAK,GAAG,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;;IAG3C,IAAM,IAAI,GAAI,KAAa,CAAC,KAE3B,CAAC;IAEF,IAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/D,IAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpD,IAAM,aAAa,GACjB,KAAK,CAAC,gBAAgB,CAAC,SAAS;QAChC,KAAK,CAAC,gBAAgB,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC;IAE3C,IAAA,KAA8BC,SAAa,CAC/C;QACE,UAAU,YAAA;QACV,UAAU,YAAA;QACV,YAAY,EAAE,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC;QACxC,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,qBAAqB,EAAE,IAAI;QAC3B,kBAAkB,EAAE,IAAI;QACxB,aAAa,EAAE,KAAK;QACpB,qBAAqB,EAAE,CAAC,CAAC,SAAS;KACnC,EACD,KAAK,EACL,OAAO,CACR,EAbO,WAAW,iBAAA,EAAE,UAAU,gBAa9B,CAAC;IAEF,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,aAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,EACrD,EAAE,GAAG,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,EAAE,UAAU,EAAE,EACrD,EAAE,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,EAAE,aAAa,EAAE,CAC5D,CACF,CAAC;IAEF,IAAM,IAAI,yBACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,0BAC9C,MAAM,CAAC,SAAS,IAAG,QAAQ,MAC7B,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE,UAAU,CAAC,SAAS,GAAG,EAAE,GAAG,WAAW,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;gBACpE,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,SAAS,EAAE;aACnB,CAAC;SACH;QACD,GAAC,MAAM,CAAC,cAAc,IAAG;YACvB,KAAK,EAAE,UAAU;SAClB;WACF,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;KACF,CAAC;AACJ;;SC1FgB,oBAAoB,CAGlC,YAAe,EAAE,KAAQ,EAAE,MAAkC;;IAC7D,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;;;IAI9C,IAAM,IAAI,GAAI,KAAa,CAAC,KAEf,CAAC;IAEd,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;QACI;YACrB,MAAM,IAAI,KAAK,CACb,kEAAkE,CACnE,CAAC;SACH;KAEF;IAEK,IAAA,KAA+B,iBAAiB,CAAC;QACrD,OAAO,EAAE,KAAK,CAAC,KAAK;QACpB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;KAClC,CAAC,EAHM,YAAY,kBAAA,EAAE,UAAU,gBAG9B,CAAC;IAEK,IAAA,cAAc,GAAK,YAAY,CAAC;QACtC,WAAW,EAAE,IAAI;KAClB,CAAC,eAFoB,CAEnB;IAEH,IAAM,QAAQ,yBACT,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,oBAAoB,aAChD,mBAAmB,CACpB,EAAE,GAAG,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,EACpD;QACE,GAAG,EAAE,MAAM,CAAC,cAAc;QAC1B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,GAAG;KACpD,CACF,CACF,CAAC;IAEF,IAAM,IAAI,yBACL,IAAI,8BAAC,KAAK,UAAK,YAAY,CAAC,gBAAgB,0BAC9C,MAAM,CAAC,SAAS,IAAG,KAAK,CAAC,KAAK,KAC9B,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,UAAC,SAAS;QAC9D,OAAA,oBAAoB,CAAC,SAAS,CAAC;KAAA,CAChC,MACF,CAAC;IAEF,IAAM,SAAS;QACb,GAAC,MAAM,CAAC,IAAI,IAAG;YACb,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;SAC5B;QACD,GAAC,MAAM,CAAC,SAAS,IAAG;YAClB,KAAK,eACA,cAAc,CAClB;SACF;QACD,GAAC,MAAM,CAAC,cAAc,eACpB,KAAK,aACH,IAAI,EAAE,cAAc,IACjB,YAAY,MAEb,CAAC,KAAK,CAAC,KAAK,IAAI;YAClB,MAAM,EAAE,cAAM,OAAA,IAAI,GAAA;SACnB,EACF;QACD,GAAC,MAAM,CAAC,gBAAgB,IAAG;YACzB,KAAK,eACA,UAAU,CACd;SACF;WACF,CAAC;IAEF,OAAO;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAmC;YAC7C,IAAI,EAAE,IAA2B;YACjC,SAAS,EAAE,SAAqC;SACjD;KACF,CAAC;AACJ;;;;"}

package/skinny/dist/plume/select/select.d.ts

@@ -1,6 +1,7 @@
 import { Placement } from "@react-types/overlays";
 import { AriaLabelingProps, DOMProps, FocusableDOMProps, FocusableProps, InputBase } from "@react-types/shared";
 import * as React from "react";
+import { ItemJson, ItemLikeProps, SectionLikeProps } from "../collection-utils";
 import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
 import { StyleProps } from "../props-utils";
 export interface BaseSelectProps extends DOMProps, AriaLabelingProps, FocusableDOMProps, InputBase, FocusableProps, StyleProps {
@@ -20,6 +21,15 @@ export interface BaseSelectProps extends DOMProps, AriaLabelingProps, FocusableD
      * List of Select.Options
      */
     children?: React.ReactNode;
+    /**
+     * List of options as an array, instead of using `children` prop. If this
+     * is passed in, then `children` is ignored.
+     *
+     * The options can be a list of strings, or a list of objects with
+     * fields `value` (for the value of the option), `label` (for what's rendered
+     * in the option), and `isDisabled` (if the option should be disabled).
+     */
+    options?: ItemJson[];
     /**
      * Whether the Select is currently open
      */
@@ -80,6 +90,8 @@ interface SelectConfig<C extends AnyPlasmicClass> {
     trigger: keyof PlasmicClassOverrides<C>;
     overlay: keyof PlasmicClassOverrides<C>;
     optionsContainer: keyof PlasmicClassOverrides<C>;
+    OptionComponent?: React.ComponentType<ItemLikeProps>;
+    OptionGroupComponent?: React.ComponentType<SectionLikeProps>;
 }
 interface SelectState {
     open: () => void;

package/skinny/dist/plume/triggered-overlay/index.js

@@ -1,7 +1,8 @@
 import { e as __read, c as __assign, p as pick, d as __spreadArray } from '../../common-c2744215.js';
-import * as React from 'react';
-import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
+import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import { FocusScope } from '@react-aria/focus';
+import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
+import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { d as mergeRefs, u as useIsomorphicLayoutEffect, m as mergeProps } from '../../react-utils-76d05959.js';
 import { m as mergeVariantToggles } from '../../plume-utils-653f4b8a.js';
@@ -78,7 +79,8 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
         }
     }, overlayAriaProps, overlayPositionProps);
     var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isPlacedTopVariant, active: placementAxis === "top" }, { def: config.isPlacedBottomVariant, active: placementAxis === "bottom" }, { def: config.isPlacedLeftVariant, active: placementAxis === "left" }, { def: config.isPlacedRightVariant, active: placementAxis === "right" }));
-    var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.contentSlot] = (React.createElement(FocusScope, { restoreFocus: true },
+    var canvasCtx = usePlasmicCanvasContext();
+    var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.contentSlot] = canvasCtx ? (children) : (React.createElement(FocusScope, { restoreFocus: true },
         React.createElement(DismissButton, { onDismiss: state.close }),
         children)), _a));
     var overrides = (_b = {},

package/skinny/dist/plume/triggered-overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/plume/triggered-overlay/triggered-overlay.tsx"],"sourcesContent":["import { DOMProps } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport {\n  DismissButton,\n  useOverlay,\n  useOverlayPosition,\n} from \"@react-aria/overlays\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport * as ReactDOM from \"react-dom\";\nimport { pick } from \"../../common\";\nimport {\n  mergeProps,\n  mergeRefs,\n  useIsomorphicLayoutEffect,\n} from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  PLUME_STRICT_MODE,\n  VariantDef,\n} from \"../plume-utils\";\nimport {\n  getDefaultPlasmicProps,\n  getStyleProps,\n  StyleProps,\n} from \"../props-utils\";\nimport { TriggeredOverlayContext } from \"./context\";\n\nexport interface BaseTriggeredOverlayProps extends StyleProps, DOMProps {\n  children?: React.ReactNode;\n}\n\nexport interface TriggeredOverlayConfig<C extends AnyPlasmicClass> {\n  isPlacedTopVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isPlacedBottomVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isPlacedLeftVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isPlacedRightVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n  contentSlot: keyof PlasmicClassArgs<C>;\n  root: keyof PlasmicClassOverrides<C>;\n  contentContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type TriggeredOverlayRef = React.Ref<HTMLElement>;\n\nexport function useTriggeredOverlay<\n  P extends BaseTriggeredOverlayProps,\n  C extends AnyPlasmicClass\n>(\n  plasmicClass: C,\n  props: P,\n  config: TriggeredOverlayConfig<C>,\n  outerRef: TriggeredOverlayRef = null,\n  isDismissable = true\n) {\n  const overlayRef = React.useRef<HTMLElement>(null);\n  const onOverlayRef = mergeRefs(overlayRef, outerRef);\n\n  const context = React.useContext(TriggeredOverlayContext);\n\n  if (!context) {\n    // If no context, then we are not being correctly used.  Either complain, or\n    // exit early.  It's okay to exit early and break the rules of React hooks\n    // because we won't suddenly have the appropriate context anyway for this instance.\n    if (PLUME_STRICT_MODE) {\n      throw new Error(\n        \"You can only use a triggered overlay with a TriggeredOverlayContext\"\n      );\n    }\n    return getDefaultPlasmicProps(plasmicClass, props);\n  }\n\n  const { children } = props;\n  const {\n    triggerRef,\n    placement,\n    overlayMatchTriggerWidth,\n    overlayMinTriggerWidth,\n    overlayWidth,\n    state,\n  } = context;\n\n  // Measure the width of the trigger to inform the width of the menu (below).\n  const [isRendered, setRendered] = React.useState(false);\n  const triggerWidth =\n    triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n      ? triggerRef.current.offsetWidth\n      : undefined;\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      !isRendered &&\n      triggerRef.current &&\n      (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n    ) {\n      setRendered(true);\n    }\n  }, [\n    triggerRef,\n    isRendered,\n    overlayMatchTriggerWidth,\n    overlayMinTriggerWidth,\n  ]);\n\n  const { overlayProps: overlayAriaProps } = useOverlay(\n    {\n      isOpen: state.isOpen,\n      onClose: state.close,\n      isDismissable,\n      shouldCloseOnBlur: true,\n    },\n    overlayRef\n  );\n\n  const {\n    overlayProps: overlayPositionProps,\n    updatePosition,\n    placement: placementAxis,\n  } = useOverlayPosition({\n    targetRef: triggerRef,\n    overlayRef,\n    placement: placement ?? \"bottom left\",\n    shouldFlip: true,\n    isOpen: state.isOpen,\n    onClose: state.close,\n    containerPadding: 0,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (state.isOpen) {\n      requestAnimationFrame(() => {\n        updatePosition();\n      });\n    }\n  }, [state.isOpen, updatePosition]);\n\n  const overlayProps = mergeProps(\n    {\n      style: {\n        left: \"auto\",\n        right: \"auto\",\n        top: \"auto\",\n        bottom: \"auto\",\n        position: \"absolute\",\n        width:\n          overlayWidth ?? (overlayMatchTriggerWidth ? triggerWidth : \"auto\"),\n        minWidth: overlayMinTriggerWidth ? triggerWidth : \"auto\",\n      },\n    },\n    overlayAriaProps,\n    overlayPositionProps\n  );\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.isPlacedTopVariant, active: placementAxis === \"top\" },\n      { def: config.isPlacedBottomVariant, active: placementAxis === \"bottom\" },\n      { def: config.isPlacedLeftVariant, active: placementAxis === \"left\" },\n      { def: config.isPlacedRightVariant, active: placementAxis === \"right\" }\n    ),\n  };\n\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.contentSlot]: (\n      <FocusScope restoreFocus>\n        <DismissButton onDismiss={state.close} />\n        {children}\n        {/* We don't use the DismissButton at the end because it ends up taking up 1px space :-/ */}\n        {/* <DismissButton onDismiss={state.close} /> */}\n      </FocusScope>\n    ),\n  };\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: mergeProps(overlayProps, getStyleProps(props), {\n        ref: onOverlayRef,\n      }),\n      wrap: (root) => {\n        if (typeof document !== \"undefined\") {\n          return ReactDOM.createPortal(root, document.body);\n        } else {\n          // Possibly being invoked on the server during SSR; no need to\n          // bother with a portal in that case.\n          return root;\n        }\n      },\n    },\n  };\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/plume/triggered-overlay/triggered-overlay.tsx"],"sourcesContent":["import { usePlasmicCanvasContext } from \"@plasmicapp/host\";\nimport { FocusScope } from \"@react-aria/focus\";\nimport {\n  DismissButton,\n  useOverlay,\n  useOverlayPosition,\n} from \"@react-aria/overlays\";\nimport { DOMProps } from \"@react-types/shared\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport { pick } from \"../../common\";\nimport {\n  mergeProps,\n  mergeRefs,\n  useIsomorphicLayoutEffect,\n} from \"../../react-utils\";\nimport { Overrides } from \"../../render/elements\";\nimport {\n  AnyPlasmicClass,\n  mergeVariantToggles,\n  PlasmicClassArgs,\n  PlasmicClassOverrides,\n  PlasmicClassVariants,\n  PLUME_STRICT_MODE,\n  VariantDef,\n} from \"../plume-utils\";\nimport {\n  getDefaultPlasmicProps,\n  getStyleProps,\n  StyleProps,\n} from \"../props-utils\";\nimport { TriggeredOverlayContext } from \"./context\";\n\nexport interface BaseTriggeredOverlayProps extends StyleProps, DOMProps {\n  children?: React.ReactNode;\n}\n\nexport interface TriggeredOverlayConfig<C extends AnyPlasmicClass> {\n  isPlacedTopVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isPlacedBottomVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isPlacedLeftVariant?: VariantDef<PlasmicClassVariants<C>>;\n  isPlacedRightVariant?: VariantDef<PlasmicClassVariants<C>>;\n\n  contentSlot: keyof PlasmicClassArgs<C>;\n  root: keyof PlasmicClassOverrides<C>;\n  contentContainer: keyof PlasmicClassOverrides<C>;\n}\n\nexport type TriggeredOverlayRef = React.Ref<HTMLElement>;\n\nexport function useTriggeredOverlay<\n  P extends BaseTriggeredOverlayProps,\n  C extends AnyPlasmicClass\n>(\n  plasmicClass: C,\n  props: P,\n  config: TriggeredOverlayConfig<C>,\n  outerRef: TriggeredOverlayRef = null,\n  isDismissable = true\n) {\n  const overlayRef = React.useRef<HTMLElement>(null);\n  const onOverlayRef = mergeRefs(overlayRef, outerRef);\n\n  const context = React.useContext(TriggeredOverlayContext);\n\n  if (!context) {\n    // If no context, then we are not being correctly used.  Either complain, or\n    // exit early.  It's okay to exit early and break the rules of React hooks\n    // because we won't suddenly have the appropriate context anyway for this instance.\n    if (PLUME_STRICT_MODE) {\n      throw new Error(\n        \"You can only use a triggered overlay with a TriggeredOverlayContext\"\n      );\n    }\n    return getDefaultPlasmicProps(plasmicClass, props);\n  }\n\n  const { children } = props;\n  const {\n    triggerRef,\n    placement,\n    overlayMatchTriggerWidth,\n    overlayMinTriggerWidth,\n    overlayWidth,\n    state,\n  } = context;\n\n  // Measure the width of the trigger to inform the width of the menu (below).\n  const [isRendered, setRendered] = React.useState(false);\n  const triggerWidth =\n    triggerRef.current && (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n      ? triggerRef.current.offsetWidth\n      : undefined;\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      !isRendered &&\n      triggerRef.current &&\n      (overlayMatchTriggerWidth || overlayMinTriggerWidth)\n    ) {\n      setRendered(true);\n    }\n  }, [\n    triggerRef,\n    isRendered,\n    overlayMatchTriggerWidth,\n    overlayMinTriggerWidth,\n  ]);\n\n  const { overlayProps: overlayAriaProps } = useOverlay(\n    {\n      isOpen: state.isOpen,\n      onClose: state.close,\n      isDismissable,\n      shouldCloseOnBlur: true,\n    },\n    overlayRef\n  );\n\n  const {\n    overlayProps: overlayPositionProps,\n    updatePosition,\n    placement: placementAxis,\n  } = useOverlayPosition({\n    targetRef: triggerRef,\n    overlayRef,\n    placement: placement ?? \"bottom left\",\n    shouldFlip: true,\n    isOpen: state.isOpen,\n    onClose: state.close,\n    containerPadding: 0,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (state.isOpen) {\n      requestAnimationFrame(() => {\n        updatePosition();\n      });\n    }\n  }, [state.isOpen, updatePosition]);\n\n  const overlayProps = mergeProps(\n    {\n      style: {\n        left: \"auto\",\n        right: \"auto\",\n        top: \"auto\",\n        bottom: \"auto\",\n        position: \"absolute\",\n        width:\n          overlayWidth ?? (overlayMatchTriggerWidth ? triggerWidth : \"auto\"),\n        minWidth: overlayMinTriggerWidth ? triggerWidth : \"auto\",\n      },\n    },\n    overlayAriaProps,\n    overlayPositionProps\n  );\n\n  const variants = {\n    ...pick(props, ...plasmicClass.internalVariantProps),\n    ...mergeVariantToggles(\n      { def: config.isPlacedTopVariant, active: placementAxis === \"top\" },\n      { def: config.isPlacedBottomVariant, active: placementAxis === \"bottom\" },\n      { def: config.isPlacedLeftVariant, active: placementAxis === \"left\" },\n      { def: config.isPlacedRightVariant, active: placementAxis === \"right\" }\n    ),\n  };\n\n  const canvasCtx = usePlasmicCanvasContext();\n  const args = {\n    ...pick(props, ...plasmicClass.internalArgProps),\n    [config.contentSlot]: canvasCtx ? (\n      children\n    ) : (\n      <FocusScope restoreFocus>\n        <DismissButton onDismiss={state.close} />\n        {children}\n        {/* We don't use the DismissButton at the end because it ends up taking up 1px space :-/ */}\n        {/* <DismissButton onDismiss={state.close} /> */}\n      </FocusScope>\n    ),\n  };\n\n  const overrides: Overrides = {\n    [config.root]: {\n      props: mergeProps(overlayProps, getStyleProps(props), {\n        ref: onOverlayRef,\n      }),\n      wrap: (root) => {\n        if (typeof document !== \"undefined\") {\n          return ReactDOM.createPortal(root, document.body);\n        } else {\n          // Possibly being invoked on the server during SSR; no need to\n          // bother with a portal in that case.\n          return root;\n        }\n      },\n    },\n  };\n\n  return {\n    plasmicProps: {\n      variants: variants as PlasmicClassVariants<C>,\n      args: args as PlasmicClassArgs<C>,\n      overrides: overrides as PlasmicClassOverrides<C>,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}