@plasmicapp/react-web 0.2.201 → 0.2.203

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

@@ -1,15 +1,15 @@
-import * as React from "react";
-import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants } from "./plume-utils";
-export interface StyleProps {
-    className?: string;
-    style?: React.CSSProperties;
-}
-export declare function getStyleProps<P extends StyleProps>(props: P): StyleProps;
-export declare function getDefaultPlasmicProps<C extends AnyPlasmicClass>(plasmicClass: C, props: Record<string, any>): {
-    plasmicProps: {
-        variants: PlasmicClassVariants<C>;
-        args: PlasmicClassArgs<C>;
-        overrides: PlasmicClassOverrides<C>;
-    };
-};
-export declare function getDataProps(props: Record<string, any>): Partial<Record<string, any>>;
+import * as React from "react";
+import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants } from "./plume-utils";
+export interface StyleProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function getStyleProps<P extends StyleProps>(props: P): StyleProps;
+export declare function getDefaultPlasmicProps<C extends AnyPlasmicClass>(plasmicClass: C, props: Record<string, any>): {
+    plasmicProps: {
+        variants: PlasmicClassVariants<C>;
+        args: PlasmicClassArgs<C>;
+        overrides: PlasmicClassOverrides<C>;
+    };
+};
+export declare function getDataProps(props: Record<string, any>): Partial<Record<string, any>>;

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

@@ -1,3 +1,3 @@
-import * as React from "react";
-import type { ListState } from "@react-stately/list";
-export declare const SelectContext: React.Context<ListState<any> | undefined>;
+import * as React from "react";
+import type { ListState } from "@react-stately/list";
+export declare const SelectContext: React.Context<ListState<any> | undefined>;

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

@@ -1,4 +1,4 @@
-export { BaseSelectProps, SelectRef, SelectRefValue, useSelect, } from "./select";
-export { BaseSelectOptionProps, SelectOptionRef, useSelectOption, } from "./select-option";
-export { BaseSelectOptionGroupProps, useSelectOptionGroup, } from "./select-option-group";
-export { SelectContext } from "./context";
+export { BaseSelectProps, SelectRef, SelectRefValue, useSelect, } from "./select";
+export { BaseSelectOptionProps, SelectOptionRef, useSelectOption, } from "./select-option";
+export { BaseSelectOptionGroupProps, useSelectOptionGroup, } from "./select-option-group";
+export { SelectContext } from "./context";

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

@@ -1,15 +1,15 @@
-import { b as __assign, p as pick, d as __spreadArray, e as __read, c as __rest } from '../../common-9d6d348d.js';
+import { b as __assign, p as pick, d as __spreadArray, e as __read, c as __rest } from '../../common-ed411407.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';
 import { useSelectState } from '@react-stately/select';
 import * as React from 'react';
-import { m as mergeProps, d as mergeRefs } from '../../react-utils-ee4e03ba.js';
-import { a as useEnsureSSRProvider } from '../../ssr-c9834f50.js';
-import { g as getChildProp, r as renderCollectionNode, b as useDerivedItems, a as renderAsCollectionChild } from '../../collection-utils-0967eaf0.js';
-import { m as mergeVariantToggles, n as noOutline } from '../../plume-utils-7d68bcc0.js';
-import { g as getStyleProps } from '../../props-utils-9f9c761a.js';
+import { m as mergeProps, d as mergeRefs } from '../../react-utils-5ff031c2.js';
+import { a as useEnsureSSRProvider } from '../../ssr-8625df04.js';
+import { g as getChildProp, r as renderCollectionNode, b as useDerivedItems, a as renderAsCollectionChild } from '../../collection-utils-2f28e4eb.js';
+import { m as mergeVariantToggles, n as noOutline } from '../../plume-utils-e699cd08.js';
+import { g as getStyleProps } from '../../props-utils-9d74371f.js';
 import { T as TriggeredOverlayContext } from '../../context-034b8d25.js';
 import { useSeparator } from '@react-aria/separator';
 import 'classnames';
@@ -20,254 +20,254 @@ import '@react-stately/collections';
 
 var SelectContext = React.createContext(undefined);
 
-var COLLECTION_OPTS = {
-    itemPlumeType: "select-option",
-    sectionPlumeType: "select-option-group"
-};
-/**
- * Converts props in our BaseSelectProps into props that react-aria's
- * useSelect() understands.
- *
- * Because we're not exposing the Collections API (see ./index.tsx),
- * we are converting our own API into props for useSelect.
- *
- * Specifically, in Plume's API,
- * - `children` flattens to a list of ReactElements of type Select.Option
- *   or Select.OptionGroup
- *
- * and we map it this way to the Collections API:
- * - `items` is a list of those flattened ReactElements from `children`!
- * - `children`, as a render prop, is supposed to take one of the `items`
- *   and return a `Section` or `Item` element. We take an Option/OptionGroup
- *   element, and use its props to render the appropriate `Section` or
- *   `Item`. The "trick" here is that we then stuff the Option element as
- *   `Item.children`, and the OptionGroup element as `Section.title`.
- *
- * When the Collections API does its work deriving `Node`s, the corresponding
- * Option/OptionGroup ReactElements will end up as `Node.rendered`.
- *
- * Then, when we are actually rendering the content of the dropdown, we
- * iterate through each collected `Node`, and renders
- * React.cloneElement(Node.rendered, {_node: node}).  This "secretly" passes
- * the derived collection `Node` as a prop to Option and OptionGroup, and they
- * can make use of the derived `Node.key` etc in their rendering functions.
- *
- * One thing to note here is that we never "rendered" the Option/OptionGroup
- * React elements that the user constructed; instead, we just looked at the
- * props used on those elements, and passed those onto the Collections API.
- * What gets rendered to the screen is the cloned version of these elements
- * with the secret derived `_node` prop.  That means Option and OptionGroup
- * render functions can assume that _node is passed in.
- */
-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) {
-            return function (val) {
-                return onChange((val == null || val === "null" ? null : val));
-            };
-        }
-        else {
-            return undefined;
-        }
-    }, [onChange]);
-    return {
-        ariaProps: __assign(__assign(__assign({}, rest), { children: collectionChildRenderer, onSelectionChange: onSelectionChange, items: items, disabledKeys: disabledKeys, defaultSelectedKey: defaultValue }), ("value" in props && { selectedKey: value !== null && value !== void 0 ? value : null }))
-    };
-}
-function useSelect(plasmicClass, props, config, ref) {
-    var _a, _b;
-    if (ref === void 0) { ref = null; }
-    useEnsureSSRProvider();
-    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
-        ? selectedContent !== null && selectedContent !== void 0 ? selectedContent : getChildProp(state.selectedItem.value, "children")
-        : null;
-    var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isOpenVariant, active: state.isOpen }, { def: config.placeholderVariant, active: !state.selectedItem }, { def: config.isDisabledVariant, active: isDisabled }));
-    var triggerContext = React.useMemo(function () { return ({
-        triggerRef: triggerRef,
-        state: state,
-        placement: placement,
-        overlayMatchTriggerWidth: menuMatchTriggerWidth,
-        overlayMinTriggerWidth: true,
-        overlayWidth: menuWidth
-    }); }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
-    var overrides = (_a = {},
-        _a[config.root] = {
-            props: mergeProps(getStyleProps(props), {
-                ref: rootRef
-            }),
-            wrapChildren: function (children) { return (React.createElement(React.Fragment, null,
-                !canvasCtx && (React.createElement(HiddenSelect, { state: state, triggerRef: triggerRef, name: name, isDisabled: isDisabled })),
-                children)); }
-        },
-        _a[config.trigger] = {
-            props: mergeProps(canvasCtx ? {} : triggerProps, {
-                ref: triggerRef,
-                autoFocus: autoFocus,
-                disabled: !!isDisabled,
-                // Don't trigger form submission!
-                type: "button"
-            })
-        },
-        _a[config.overlay] = {
-            wrap: function (content) { return (React.createElement(TriggeredOverlayContext.Provider, { value: triggerContext }, content)); }
-        },
-        _a[config.optionsContainer] = {
-            wrap: function (content) { return (React.createElement(ListBoxWrapper, { state: state, menuProps: menuProps }, content)); }
-        },
-        _a);
-    var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_b = {}, _b[config.triggerContentSlot] = triggerContent, _b[config.placeholderSlot] = placeholder, _b[config.optionsSlot] = (React.createElement(SelectContext.Provider, { value: state }, Array.from(state.collection).map(function (node) { return renderCollectionNode(node); }))), _b));
-    var plumeState = React.useMemo(function () { return ({
-        open: function () { return state.open(); },
-        close: function () { return state.close(); },
-        isOpen: function () { return state.isOpen; },
-        getSelectedValue: function () {
-            return state.selectedKey ? "".concat(state.selectedKey) : null;
-        },
-        setSelectedValue: function (key) { return state.setSelectedKey(key); }
-    }); }, [state]);
-    React.useImperativeHandle(ref, function () { return ({
-        getRoot: function () { return rootRef.current; },
-        getTrigger: function () { return triggerRef.current; },
-        focus: function () { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-        blur: function () { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
-        open: function () { return plumeState.open(); },
-        close: function () { return plumeState.close(); },
-        isOpen: function () { return plumeState.isOpen(); },
-        getSelectedValue: function () { return plumeState.getSelectedValue(); },
-        setSelectedValue: function (key) { return plumeState.setSelectedValue(key); }
-    }); }, [rootRef, triggerRef, plumeState]);
-    return {
-        plasmicProps: {
-            variants: variants,
-            args: args,
-            overrides: overrides
-        },
-        state: plumeState
-    };
-}
-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, canvasCtx ? {} : listBoxProps, {
-        style: noOutline(),
-        ref: ref
-    }));
+var COLLECTION_OPTS = {
+    itemPlumeType: "select-option",
+    sectionPlumeType: "select-option-group",
+};
+/**
+ * Converts props in our BaseSelectProps into props that react-aria's
+ * useSelect() understands.
+ *
+ * Because we're not exposing the Collections API (see ./index.tsx),
+ * we are converting our own API into props for useSelect.
+ *
+ * Specifically, in Plume's API,
+ * - `children` flattens to a list of ReactElements of type Select.Option
+ *   or Select.OptionGroup
+ *
+ * and we map it this way to the Collections API:
+ * - `items` is a list of those flattened ReactElements from `children`!
+ * - `children`, as a render prop, is supposed to take one of the `items`
+ *   and return a `Section` or `Item` element. We take an Option/OptionGroup
+ *   element, and use its props to render the appropriate `Section` or
+ *   `Item`. The "trick" here is that we then stuff the Option element as
+ *   `Item.children`, and the OptionGroup element as `Section.title`.
+ *
+ * When the Collections API does its work deriving `Node`s, the corresponding
+ * Option/OptionGroup ReactElements will end up as `Node.rendered`.
+ *
+ * Then, when we are actually rendering the content of the dropdown, we
+ * iterate through each collected `Node`, and renders
+ * React.cloneElement(Node.rendered, {_node: node}).  This "secretly" passes
+ * the derived collection `Node` as a prop to Option and OptionGroup, and they
+ * can make use of the derived `Node.key` etc in their rendering functions.
+ *
+ * One thing to note here is that we never "rendered" the Option/OptionGroup
+ * React elements that the user constructed; instead, we just looked at the
+ * props used on those elements, and passed those onto the Collections API.
+ * What gets rendered to the screen is the cloned version of these elements
+ * with the secret derived `_node` prop.  That means Option and OptionGroup
+ * render functions can assume that _node is passed in.
+ */
+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) {
+            return function (val) {
+                return onChange((val == null || val === "null" ? null : val));
+            };
+        }
+        else {
+            return undefined;
+        }
+    }, [onChange]);
+    return {
+        ariaProps: __assign(__assign(__assign({}, rest), { children: collectionChildRenderer, onSelectionChange: onSelectionChange, items: items, disabledKeys: disabledKeys, defaultSelectedKey: defaultValue }), ("value" in props && { selectedKey: value !== null && value !== void 0 ? value : null })),
+    };
+}
+function useSelect(plasmicClass, props, config, ref) {
+    var _a, _b;
+    if (ref === void 0) { ref = null; }
+    useEnsureSSRProvider();
+    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
+        ? selectedContent !== null && selectedContent !== void 0 ? selectedContent : getChildProp(state.selectedItem.value, "children")
+        : null;
+    var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.isOpenVariant, active: state.isOpen }, { def: config.placeholderVariant, active: !state.selectedItem }, { def: config.isDisabledVariant, active: isDisabled }));
+    var triggerContext = React.useMemo(function () { return ({
+        triggerRef: triggerRef,
+        state: state,
+        placement: placement,
+        overlayMatchTriggerWidth: menuMatchTriggerWidth,
+        overlayMinTriggerWidth: true,
+        overlayWidth: menuWidth,
+    }); }, [triggerRef, state, placement, menuMatchTriggerWidth, menuWidth]);
+    var overrides = (_a = {},
+        _a[config.root] = {
+            props: mergeProps(getStyleProps(props), {
+                ref: rootRef,
+            }),
+            wrapChildren: function (children) { return (React.createElement(React.Fragment, null,
+                (!canvasCtx || canvasCtx.interactive) && (React.createElement(HiddenSelect, { state: state, triggerRef: triggerRef, name: name, isDisabled: isDisabled })),
+                children)); },
+        },
+        _a[config.trigger] = {
+            props: mergeProps(canvasCtx && !canvasCtx.interactive ? {} : triggerProps, {
+                ref: triggerRef,
+                autoFocus: autoFocus,
+                disabled: !!isDisabled,
+                // Don't trigger form submission!
+                type: "button",
+            }),
+        },
+        _a[config.overlay] = {
+            wrap: function (content) { return (React.createElement(TriggeredOverlayContext.Provider, { value: triggerContext }, content)); },
+        },
+        _a[config.optionsContainer] = {
+            wrap: function (content) { return (React.createElement(ListBoxWrapper, { state: state, menuProps: menuProps }, content)); },
+        },
+        _a);
+    var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_b = {}, _b[config.triggerContentSlot] = triggerContent, _b[config.placeholderSlot] = placeholder, _b[config.optionsSlot] = (React.createElement(SelectContext.Provider, { value: state }, Array.from(state.collection).map(function (node) { return renderCollectionNode(node); }))), _b));
+    var plumeState = React.useMemo(function () { return ({
+        open: function () { return state.open(); },
+        close: function () { return state.close(); },
+        isOpen: function () { return state.isOpen; },
+        getSelectedValue: function () {
+            return state.selectedKey ? "".concat(state.selectedKey) : null;
+        },
+        setSelectedValue: function (key) { return state.setSelectedKey(key); },
+    }); }, [state]);
+    React.useImperativeHandle(ref, function () { return ({
+        getRoot: function () { return rootRef.current; },
+        getTrigger: function () { return triggerRef.current; },
+        focus: function () { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: function () { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        open: function () { return plumeState.open(); },
+        close: function () { return plumeState.close(); },
+        isOpen: function () { return plumeState.isOpen(); },
+        getSelectedValue: function () { return plumeState.getSelectedValue(); },
+        setSelectedValue: function (key) { return plumeState.setSelectedValue(key); },
+    }); }, [rootRef, triggerRef, plumeState]);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides,
+        },
+        state: plumeState,
+    };
+}
+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, canvasCtx && !canvasCtx.interactive ? {} : listBoxProps, {
+        style: noOutline(),
+        ref: ref,
+    }));
 }
 
-function useSelectOption(plasmicClass, props, config, outerRef) {
-    var _a, _b;
-    if (outerRef === void 0) { outerRef = null; }
-    var state = React.useContext(SelectContext);
-    if (!state) {
-        // If no context, then we are being incorrectly used.  Complain or just don't
-        // bother installing any hooks.  It's okay to violate rules of hooks here
-        // because this instance won't suddenly be used correctly in another render.
-        {
-            throw new Error("You can only use a Select.Option within a Select component.");
-        }
-    }
-    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 />
-    var node = props._node;
-    var isSelected = state.selectionManager.isSelected(node.key);
-    var isDisabled = state.disabledKeys.has(node.key);
-    var isHighlighted = state.selectionManager.isFocused &&
-        state.selectionManager.focusedKey === node.key;
-    var _c = useOption({
-        isSelected: isSelected,
-        isDisabled: isDisabled,
-        "aria-label": node && node["aria-label"],
-        key: node.key,
-        shouldSelectOnPressUp: true,
-        shouldFocusOnHover: true,
-        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(canvasCtx ? {} : optionProps, getStyleProps(props), {
-                ref: onRef,
-                style: noOutline()
-            })
-        },
-        _b[config.labelContainer] = {
-            props: labelProps
-        },
-        _b);
-    return {
-        plasmicProps: {
-            variants: variants,
-            args: args,
-            overrides: overrides
-        }
-    };
+function useSelectOption(plasmicClass, props, config, outerRef) {
+    var _a, _b;
+    if (outerRef === void 0) { outerRef = null; }
+    var state = React.useContext(SelectContext);
+    if (!state) {
+        // If no context, then we are being incorrectly used.  Complain or just don't
+        // bother installing any hooks.  It's okay to violate rules of hooks here
+        // because this instance won't suddenly be used correctly in another render.
+        {
+            throw new Error("You can only use a Select.Option within a Select component.");
+        }
+    }
+    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 />
+    var node = props._node;
+    var isSelected = state.selectionManager.isSelected(node.key);
+    var isDisabled = state.disabledKeys.has(node.key);
+    var isHighlighted = state.selectionManager.isFocused &&
+        state.selectionManager.focusedKey === node.key;
+    var _c = useOption({
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        "aria-label": node && node["aria-label"],
+        key: node.key,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+        isVirtualized: false,
+        shouldUseVirtualFocus: canvasCtx && !canvasCtx.interactive,
+    }, 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(canvasCtx && !canvasCtx.interactive ? {} : optionProps, getStyleProps(props), {
+                ref: onRef,
+                style: noOutline(),
+            }),
+        },
+        _b[config.labelContainer] = {
+            props: labelProps,
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides,
+        },
+    };
 }
 
-function useSelectOptionGroup(plasmicClass, props, config) {
-    var _a, _b;
-    var state = React.useContext(SelectContext);
-    // `node` should exist if the OptionGroup was instantiated properly
-    // within a Select
-    var node = props._node;
-    if (!state || !node) {
-        {
-            throw new Error("You can only use a Select.OptionGroup within a Select component.");
-        }
-    }
-    var _c = useListBoxSection({
-        heading: props.title,
-        "aria-label": props["aria-label"]
-    }), headingProps = _c.headingProps, groupProps = _c.groupProps;
-    var separatorProps = useSeparator({
-        elementType: "li"
-    }).separatorProps;
-    var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.noTitleVariant, active: !props.title }, {
-        def: config.isFirstVariant,
-        active: state.collection.getFirstKey() === node.key
-    }));
-    var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.titleSlot] = props.title, _a[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
-        return renderCollectionNode(childNode);
-    }), _a));
-    var overrides = (_b = {},
-        _b[config.root] = {
-            props: getStyleProps(props)
-        },
-        _b[config.separator] = {
-            props: __assign({}, separatorProps)
-        },
-        _b[config.titleContainer] = __assign({ props: __assign({ role: "presentation" }, headingProps) }, (!props.title && {
-            render: function () { return null; }
-        })),
-        _b[config.optionsContainer] = {
-            props: __assign({}, groupProps)
-        },
-        _b);
-    return {
-        plasmicProps: {
-            variants: variants,
-            args: args,
-            overrides: overrides
-        }
-    };
+function useSelectOptionGroup(plasmicClass, props, config) {
+    var _a, _b;
+    var state = React.useContext(SelectContext);
+    // `node` should exist if the OptionGroup was instantiated properly
+    // within a Select
+    var node = props._node;
+    if (!state || !node) {
+        {
+            throw new Error("You can only use a Select.OptionGroup within a Select component.");
+        }
+    }
+    var _c = useListBoxSection({
+        heading: props.title,
+        "aria-label": props["aria-label"],
+    }), headingProps = _c.headingProps, groupProps = _c.groupProps;
+    var separatorProps = useSeparator({
+        elementType: "li",
+    }).separatorProps;
+    var variants = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false))), mergeVariantToggles({ def: config.noTitleVariant, active: !props.title }, {
+        def: config.isFirstVariant,
+        active: state.collection.getFirstKey() === node.key,
+    }));
+    var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (_a = {}, _a[config.titleSlot] = props.title, _a[config.optionsSlot] = Array.from(node.childNodes).map(function (childNode) {
+        return renderCollectionNode(childNode);
+    }), _a));
+    var overrides = (_b = {},
+        _b[config.root] = {
+            props: getStyleProps(props),
+        },
+        _b[config.separator] = {
+            props: __assign({}, separatorProps),
+        },
+        _b[config.titleContainer] = __assign({ props: __assign({ role: "presentation" }, headingProps) }, (!props.title && {
+            render: function () { return null; },
+        })),
+        _b[config.optionsContainer] = {
+            props: __assign({}, groupProps),
+        },
+        _b);
+    return {
+        plasmicProps: {
+            variants: variants,
+            args: args,
+            overrides: overrides,
+        },
+    };
 }
 
 export { SelectContext, useSelect, useSelectOption, useSelectOptionGroup };