"use client"; import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, useFloating } from "./chunk-54Z5R62P.js"; import { Combination_default, DismissableLayer, FocusScope, Portal, hideOthers, useFocusGuards, useId } from "./chunk-W3FPET4J.js"; import { usePrevious, useSize } from "./chunk-RVOPK2BC.js"; import { composeEventHandlers, createContextScope, useCallbackRef, useControllableState, useLayoutEffect2 } from "./chunk-3CC64B4R.js"; import { Primitive } from "./chunk-4FJT6N3H.js"; import { require_react_dom } from "./chunk-OL2EO3PE.js"; import { Slot, useComposedRefs } from "./chunk-N2W4B4AT.js"; import { require_jsx_runtime } from "./chunk-BNJCGGFL.js"; import { require_react } from "./chunk-2WIBB5DE.js"; import { __toESM } from "./chunk-DC5AMYBS.js"; // node_modules/@radix-ui/react-select/dist/index.mjs var React8 = __toESM(require_react(), 1); var ReactDOM = __toESM(require_react_dom(), 1); // node_modules/@radix-ui/number/dist/index.mjs function clamp(value, [min, max]) { return Math.min(max, Math.max(min, value)); } // node_modules/@radix-ui/react-collection/dist/index.mjs var import_react = __toESM(require_react(), 1); // node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context/dist/index.mjs var React = __toESM(require_react(), 1); var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); function createContextScope2(scopeName, createContextScopeDeps = []) { let defaultContexts = []; function createContext32(rootComponentName, defaultContext) { const BaseContext = React.createContext(defaultContext); const index = defaultContexts.length; defaultContexts = [...defaultContexts, defaultContext]; function Provider(props) { const { scope, children, ...context } = props; const Context = (scope == null ? void 0 : scope[scopeName][index]) || BaseContext; const value = React.useMemo(() => context, Object.values(context)); return (0, import_jsx_runtime.jsx)(Context.Provider, { value, children }); } function useContext22(consumerName, scope) { const Context = (scope == null ? void 0 : scope[scopeName][index]) || BaseContext; const context = React.useContext(Context); if (context) return context; if (defaultContext !== void 0) return defaultContext; throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); } Provider.displayName = rootComponentName + "Provider"; return [Provider, useContext22]; } const createScope = () => { const scopeContexts = defaultContexts.map((defaultContext) => { return React.createContext(defaultContext); }); return function useScope(scope) { const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts; return React.useMemo( () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts] ); }; }; createScope.scopeName = scopeName; return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)]; } function composeContextScopes(...scopes) { const baseScope = scopes[0]; if (scopes.length === 1) return baseScope; const createScope = () => { const scopeHooks = scopes.map((createScope2) => ({ useScope: createScope2(), scopeName: createScope2.scopeName })); return function useComposedScopes(overrideScopes) { const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => { const scopeProps = useScope(overrideScopes); const currentScope = scopeProps[`__scope${scopeName}`]; return { ...nextScopes2, ...currentScope }; }, {}); return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]); }; }; createScope.scopeName = baseScope.scopeName; return createScope; } // node_modules/@radix-ui/react-collection/dist/index.mjs var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); function createCollection(name) { const PROVIDER_NAME = name + "CollectionProvider"; const [createCollectionContext, createCollectionScope2] = createContextScope2(PROVIDER_NAME); const [CollectionProviderImpl, useCollectionContext] = createCollectionContext( PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() } ); const CollectionProvider = (props) => { const { scope, children } = props; const ref = import_react.default.useRef(null); const itemMap = import_react.default.useRef(/* @__PURE__ */ new Map()).current; return (0, import_jsx_runtime2.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children }); }; CollectionProvider.displayName = PROVIDER_NAME; const COLLECTION_SLOT_NAME = name + "CollectionSlot"; const CollectionSlot = import_react.default.forwardRef( (props, forwardedRef) => { const { scope, children } = props; const context = useCollectionContext(COLLECTION_SLOT_NAME, scope); const composedRefs = useComposedRefs(forwardedRef, context.collectionRef); return (0, import_jsx_runtime2.jsx)(Slot, { ref: composedRefs, children }); } ); CollectionSlot.displayName = COLLECTION_SLOT_NAME; const ITEM_SLOT_NAME = name + "CollectionItemSlot"; const ITEM_DATA_ATTR = "data-radix-collection-item"; const CollectionItemSlot = import_react.default.forwardRef( (props, forwardedRef) => { const { scope, children, ...itemData } = props; const ref = import_react.default.useRef(null); const composedRefs = useComposedRefs(forwardedRef, ref); const context = useCollectionContext(ITEM_SLOT_NAME, scope); import_react.default.useEffect(() => { context.itemMap.set(ref, { ref, ...itemData }); return () => void context.itemMap.delete(ref); }); return (0, import_jsx_runtime2.jsx)(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children }); } ); CollectionItemSlot.displayName = ITEM_SLOT_NAME; function useCollection2(scope) { const context = useCollectionContext(name + "CollectionConsumer", scope); const getItems = import_react.default.useCallback(() => { const collectionNode = context.collectionRef.current; if (!collectionNode) return []; const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)); const items = Array.from(context.itemMap.values()); const orderedItems = items.sort( (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current) ); return orderedItems; }, [context.collectionRef, context.itemMap]); return getItems; } return [ { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot }, useCollection2, createCollectionScope2 ]; } // node_modules/@radix-ui/react-direction/dist/index.mjs var React3 = __toESM(require_react(), 1); var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1); var DirectionContext = React3.createContext(void 0); function useDirection(localDir) { const globalDir = React3.useContext(DirectionContext); return localDir || globalDir || "ltr"; } // node_modules/@radix-ui/react-popper/dist/index.mjs var React6 = __toESM(require_react(), 1); // node_modules/@radix-ui/react-arrow/dist/index.mjs var React4 = __toESM(require_react(), 1); var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1); var NAME = "Arrow"; var Arrow = React4.forwardRef((props, forwardedRef) => { const { children, width = 10, height = 5, ...arrowProps } = props; return (0, import_jsx_runtime4.jsx)( Primitive.svg, { ...arrowProps, ref: forwardedRef, width, height, viewBox: "0 0 30 10", preserveAspectRatio: "none", children: props.asChild ? children : (0, import_jsx_runtime4.jsx)("polygon", { points: "0,0 30,0 15,10" }) } ); }); Arrow.displayName = NAME; var Root = Arrow; // node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context/dist/index.mjs var React5 = __toESM(require_react(), 1); var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1); function createContextScope3(scopeName, createContextScopeDeps = []) { let defaultContexts = []; function createContext32(rootComponentName, defaultContext) { const BaseContext = React5.createContext(defaultContext); const index = defaultContexts.length; defaultContexts = [...defaultContexts, defaultContext]; function Provider(props) { const { scope, children, ...context } = props; const Context = (scope == null ? void 0 : scope[scopeName][index]) || BaseContext; const value = React5.useMemo(() => context, Object.values(context)); return (0, import_jsx_runtime5.jsx)(Context.Provider, { value, children }); } function useContext22(consumerName, scope) { const Context = (scope == null ? void 0 : scope[scopeName][index]) || BaseContext; const context = React5.useContext(Context); if (context) return context; if (defaultContext !== void 0) return defaultContext; throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); } Provider.displayName = rootComponentName + "Provider"; return [Provider, useContext22]; } const createScope = () => { const scopeContexts = defaultContexts.map((defaultContext) => { return React5.createContext(defaultContext); }); return function useScope(scope) { const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts; return React5.useMemo( () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts] ); }; }; createScope.scopeName = scopeName; return [createContext32, composeContextScopes2(createScope, ...createContextScopeDeps)]; } function composeContextScopes2(...scopes) { const baseScope = scopes[0]; if (scopes.length === 1) return baseScope; const createScope = () => { const scopeHooks = scopes.map((createScope2) => ({ useScope: createScope2(), scopeName: createScope2.scopeName })); return function useComposedScopes(overrideScopes) { const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => { const scopeProps = useScope(overrideScopes); const currentScope = scopeProps[`__scope${scopeName}`]; return { ...nextScopes2, ...currentScope }; }, {}); return React5.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]); }; }; createScope.scopeName = baseScope.scopeName; return createScope; } // node_modules/@radix-ui/react-popper/dist/index.mjs var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1); var POPPER_NAME = "Popper"; var [createPopperContext, createPopperScope] = createContextScope3(POPPER_NAME); var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME); var Popper = (props) => { const { __scopePopper, children } = props; const [anchor, setAnchor] = React6.useState(null); return (0, import_jsx_runtime6.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children }); }; Popper.displayName = POPPER_NAME; var ANCHOR_NAME = "PopperAnchor"; var PopperAnchor = React6.forwardRef( (props, forwardedRef) => { const { __scopePopper, virtualRef, ...anchorProps } = props; const context = usePopperContext(ANCHOR_NAME, __scopePopper); const ref = React6.useRef(null); const composedRefs = useComposedRefs(forwardedRef, ref); React6.useEffect(() => { context.onAnchorChange((virtualRef == null ? void 0 : virtualRef.current) || ref.current); }); return virtualRef ? null : (0, import_jsx_runtime6.jsx)(Primitive.div, { ...anchorProps, ref: composedRefs }); } ); PopperAnchor.displayName = ANCHOR_NAME; var CONTENT_NAME = "PopperContent"; var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME); var PopperContent = React6.forwardRef( (props, forwardedRef) => { var _a, _b, _c, _d, _e, _f; const { __scopePopper, side = "bottom", sideOffset = 0, align = "center", alignOffset = 0, arrowPadding = 0, avoidCollisions = true, collisionBoundary = [], collisionPadding: collisionPaddingProp = 0, sticky = "partial", hideWhenDetached = false, updatePositionStrategy = "optimized", onPlaced, ...contentProps } = props; const context = usePopperContext(CONTENT_NAME, __scopePopper); const [content, setContent] = React6.useState(null); const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node)); const [arrow2, setArrow] = React6.useState(null); const arrowSize = useSize(arrow2); const arrowWidth = (arrowSize == null ? void 0 : arrowSize.width) ?? 0; const arrowHeight = (arrowSize == null ? void 0 : arrowSize.height) ?? 0; const desiredPlacement = side + (align !== "center" ? "-" + align : ""); const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp }; const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary]; const hasExplicitBoundaries = boundary.length > 0; const detectOverflowOptions = { padding: collisionPadding, boundary: boundary.filter(isNotNull), // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries altBoundary: hasExplicitBoundaries }; const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({ // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues strategy: "fixed", placement: desiredPlacement, whileElementsMounted: (...args) => { const cleanup = autoUpdate(...args, { animationFrame: updatePositionStrategy === "always" }); return cleanup; }, elements: { reference: context.anchor }, middleware: [ offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }), avoidCollisions && shift({ mainAxis: true, crossAxis: false, limiter: sticky === "partial" ? limitShift() : void 0, ...detectOverflowOptions }), avoidCollisions && flip({ ...detectOverflowOptions }), size({ ...detectOverflowOptions, apply: ({ elements, rects, availableWidth, availableHeight }) => { const { width: anchorWidth, height: anchorHeight } = rects.reference; const contentStyle = elements.floating.style; contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`); contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`); contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`); contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`); } }), arrow2 && arrow({ element: arrow2, padding: arrowPadding }), transformOrigin({ arrowWidth, arrowHeight }), hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions }) ] }); const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement); const handlePlaced = useCallbackRef(onPlaced); useLayoutEffect2(() => { if (isPositioned) { handlePlaced == null ? void 0 : handlePlaced(); } }, [isPositioned, handlePlaced]); const arrowX = (_a = middlewareData.arrow) == null ? void 0 : _a.x; const arrowY = (_b = middlewareData.arrow) == null ? void 0 : _b.y; const cannotCenterArrow = ((_c = middlewareData.arrow) == null ? void 0 : _c.centerOffset) !== 0; const [contentZIndex, setContentZIndex] = React6.useState(); useLayoutEffect2(() => { if (content) setContentZIndex(window.getComputedStyle(content).zIndex); }, [content]); return (0, import_jsx_runtime6.jsx)( "div", { ref: refs.setFloating, "data-radix-popper-content-wrapper": "", style: { ...floatingStyles, transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)", // keep off the page when measuring minWidth: "max-content", zIndex: contentZIndex, ["--radix-popper-transform-origin"]: [ (_d = middlewareData.transformOrigin) == null ? void 0 : _d.x, (_e = middlewareData.transformOrigin) == null ? void 0 : _e.y ].join(" "), // hide the content if using the hide middleware and should be hidden // set visibility to hidden and disable pointer events so the UI behaves // as if the PopperContent isn't there at all ...((_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden) && { visibility: "hidden", pointerEvents: "none" } }, dir: props.dir, children: (0, import_jsx_runtime6.jsx)( PopperContentProvider, { scope: __scopePopper, placedSide, onArrowChange: setArrow, arrowX, arrowY, shouldHideArrow: cannotCenterArrow, children: (0, import_jsx_runtime6.jsx)( Primitive.div, { "data-side": placedSide, "data-align": placedAlign, ...contentProps, ref: composedRefs, style: { ...contentProps.style, // if the PopperContent hasn't been placed yet (not all measurements done) // we prevent animations so that users's animation don't kick in too early referring wrong sides animation: !isPositioned ? "none" : void 0 } } ) } ) } ); } ); PopperContent.displayName = CONTENT_NAME; var ARROW_NAME = "PopperArrow"; var OPPOSITE_SIDE = { top: "bottom", right: "left", bottom: "top", left: "right" }; var PopperArrow = React6.forwardRef(function PopperArrow2(props, forwardedRef) { const { __scopePopper, ...arrowProps } = props; const contentContext = useContentContext(ARROW_NAME, __scopePopper); const baseSide = OPPOSITE_SIDE[contentContext.placedSide]; return ( // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`) // doesn't report size as we'd expect on SVG elements. // it reports their bounding box which is effectively the largest path inside the SVG. (0, import_jsx_runtime6.jsx)( "span", { ref: contentContext.onArrowChange, style: { position: "absolute", left: contentContext.arrowX, top: contentContext.arrowY, [baseSide]: 0, transformOrigin: { top: "", right: "0 0", bottom: "center 0", left: "100% 0" }[contentContext.placedSide], transform: { top: "translateY(100%)", right: "translateY(50%) rotate(90deg) translateX(-50%)", bottom: `rotate(180deg)`, left: "translateY(50%) rotate(-90deg) translateX(50%)" }[contentContext.placedSide], visibility: contentContext.shouldHideArrow ? "hidden" : void 0 }, children: (0, import_jsx_runtime6.jsx)( Root, { ...arrowProps, ref: forwardedRef, style: { ...arrowProps.style, // ensures the element can be measured correctly (mostly for if SVG) display: "block" } } ) } ) ); }); PopperArrow.displayName = ARROW_NAME; function isNotNull(value) { return value !== null; } var transformOrigin = (options) => ({ name: "transformOrigin", options, fn(data) { var _a, _b, _c; const { placement, rects, middlewareData } = data; const cannotCenterArrow = ((_a = middlewareData.arrow) == null ? void 0 : _a.centerOffset) !== 0; const isArrowHidden = cannotCenterArrow; const arrowWidth = isArrowHidden ? 0 : options.arrowWidth; const arrowHeight = isArrowHidden ? 0 : options.arrowHeight; const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement); const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign]; const arrowXCenter = (((_b = middlewareData.arrow) == null ? void 0 : _b.x) ?? 0) + arrowWidth / 2; const arrowYCenter = (((_c = middlewareData.arrow) == null ? void 0 : _c.y) ?? 0) + arrowHeight / 2; let x = ""; let y = ""; if (placedSide === "bottom") { x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`; y = `${-arrowHeight}px`; } else if (placedSide === "top") { x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`; y = `${rects.floating.height + arrowHeight}px`; } else if (placedSide === "right") { x = `${-arrowHeight}px`; y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`; } else if (placedSide === "left") { x = `${rects.floating.width + arrowHeight}px`; y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`; } return { data: { x, y } }; } }); function getSideAndAlignFromPlacement(placement) { const [side, align = "center"] = placement.split("-"); return [side, align]; } var Root2 = Popper; var Anchor = PopperAnchor; var Content = PopperContent; var Arrow2 = PopperArrow; // node_modules/@radix-ui/react-visually-hidden/dist/index.mjs var React7 = __toESM(require_react(), 1); var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1); var NAME2 = "VisuallyHidden"; var VisuallyHidden = React7.forwardRef( (props, forwardedRef) => { return (0, import_jsx_runtime7.jsx)( Primitive.span, { ...props, ref: forwardedRef, style: { // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss position: "absolute", border: 0, width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", wordWrap: "normal", ...props.style } } ); } ); VisuallyHidden.displayName = NAME2; // node_modules/@radix-ui/react-select/dist/index.mjs var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1); var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"]; var SELECTION_KEYS = [" ", "Enter"]; var SELECT_NAME = "Select"; var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME); var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [ createCollectionScope, createPopperScope ]); var usePopperScope = createPopperScope(); var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME); var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME); var Select = (props) => { const { __scopeSelect, children, open: openProp, defaultOpen, onOpenChange, value: valueProp, defaultValue, onValueChange, dir, name, autoComplete, disabled, required, form } = props; const popperScope = usePopperScope(__scopeSelect); const [trigger, setTrigger] = React8.useState(null); const [valueNode, setValueNode] = React8.useState(null); const [valueNodeHasChildren, setValueNodeHasChildren] = React8.useState(false); const direction = useDirection(dir); const [open = false, setOpen] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChange }); const [value, setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: onValueChange }); const triggerPointerDownPosRef = React8.useRef(null); const isFormControl = trigger ? form || !!trigger.closest("form") : true; const [nativeOptionsSet, setNativeOptionsSet] = React8.useState(/* @__PURE__ */ new Set()); const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";"); return (0, import_jsx_runtime8.jsx)(Root2, { ...popperScope, children: (0, import_jsx_runtime8.jsxs)( SelectProvider, { required, scope: __scopeSelect, trigger, onTriggerChange: setTrigger, valueNode, onValueNodeChange: setValueNode, valueNodeHasChildren, onValueNodeHasChildrenChange: setValueNodeHasChildren, contentId: useId(), value, onValueChange: setValue, open, onOpenChange: setOpen, dir: direction, triggerPointerDownPosRef, disabled, children: [ (0, import_jsx_runtime8.jsx)(Collection.Provider, { scope: __scopeSelect, children: (0, import_jsx_runtime8.jsx)( SelectNativeOptionsProvider, { scope: props.__scopeSelect, onNativeOptionAdd: React8.useCallback((option) => { setNativeOptionsSet((prev) => new Set(prev).add(option)); }, []), onNativeOptionRemove: React8.useCallback((option) => { setNativeOptionsSet((prev) => { const optionsSet = new Set(prev); optionsSet.delete(option); return optionsSet; }); }, []), children } ) }), isFormControl ? (0, import_jsx_runtime8.jsxs)( BubbleSelect, { "aria-hidden": true, required, tabIndex: -1, name, autoComplete, value, onChange: (event) => setValue(event.target.value), disabled, form, children: [ value === void 0 ? (0, import_jsx_runtime8.jsx)("option", { value: "" }) : null, Array.from(nativeOptionsSet) ] }, nativeSelectKey ) : null ] } ) }); }; Select.displayName = SELECT_NAME; var TRIGGER_NAME = "SelectTrigger"; var SelectTrigger = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, disabled = false, ...triggerProps } = props; const popperScope = usePopperScope(__scopeSelect); const context = useSelectContext(TRIGGER_NAME, __scopeSelect); const isDisabled = context.disabled || disabled; const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange); const getItems = useCollection(__scopeSelect); const pointerTypeRef = React8.useRef("touch"); const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => { const enabledItems = getItems().filter((item) => !item.disabled); const currentItem = enabledItems.find((item) => item.value === context.value); const nextItem = findNextItem(enabledItems, search, currentItem); if (nextItem !== void 0) { context.onValueChange(nextItem.value); } }); const handleOpen = (pointerEvent) => { if (!isDisabled) { context.onOpenChange(true); resetTypeahead(); } if (pointerEvent) { context.triggerPointerDownPosRef.current = { x: Math.round(pointerEvent.pageX), y: Math.round(pointerEvent.pageY) }; } }; return (0, import_jsx_runtime8.jsx)(Anchor, { asChild: true, ...popperScope, children: (0, import_jsx_runtime8.jsx)( Primitive.button, { type: "button", role: "combobox", "aria-controls": context.contentId, "aria-expanded": context.open, "aria-required": context.required, "aria-autocomplete": "none", dir: context.dir, "data-state": context.open ? "open" : "closed", disabled: isDisabled, "data-disabled": isDisabled ? "" : void 0, "data-placeholder": shouldShowPlaceholder(context.value) ? "" : void 0, ...triggerProps, ref: composedRefs, onClick: composeEventHandlers(triggerProps.onClick, (event) => { event.currentTarget.focus(); if (pointerTypeRef.current !== "mouse") { handleOpen(event); } }), onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => { pointerTypeRef.current = event.pointerType; const target = event.target; if (target.hasPointerCapture(event.pointerId)) { target.releasePointerCapture(event.pointerId); } if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse") { handleOpen(event); event.preventDefault(); } }), onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => { const isTypingAhead = searchRef.current !== ""; const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key); if (isTypingAhead && event.key === " ") return; if (OPEN_KEYS.includes(event.key)) { handleOpen(); event.preventDefault(); } }) } ) }); } ); SelectTrigger.displayName = TRIGGER_NAME; var VALUE_NAME = "SelectValue"; var SelectValue = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props; const context = useSelectContext(VALUE_NAME, __scopeSelect); const { onValueNodeHasChildrenChange } = context; const hasChildren = children !== void 0; const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange); useLayoutEffect2(() => { onValueNodeHasChildrenChange(hasChildren); }, [onValueNodeHasChildrenChange, hasChildren]); return (0, import_jsx_runtime8.jsx)( Primitive.span, { ...valueProps, ref: composedRefs, style: { pointerEvents: "none" }, children: shouldShowPlaceholder(context.value) ? (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: placeholder }) : children } ); } ); SelectValue.displayName = VALUE_NAME; var ICON_NAME = "SelectIcon"; var SelectIcon = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, children, ...iconProps } = props; return (0, import_jsx_runtime8.jsx)(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" }); } ); SelectIcon.displayName = ICON_NAME; var PORTAL_NAME = "SelectPortal"; var SelectPortal = (props) => { return (0, import_jsx_runtime8.jsx)(Portal, { asChild: true, ...props }); }; SelectPortal.displayName = PORTAL_NAME; var CONTENT_NAME2 = "SelectContent"; var SelectContent = React8.forwardRef( (props, forwardedRef) => { const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect); const [fragment, setFragment] = React8.useState(); useLayoutEffect2(() => { setFragment(new DocumentFragment()); }, []); if (!context.open) { const frag = fragment; return frag ? ReactDOM.createPortal( (0, import_jsx_runtime8.jsx)(SelectContentProvider, { scope: props.__scopeSelect, children: (0, import_jsx_runtime8.jsx)(Collection.Slot, { scope: props.__scopeSelect, children: (0, import_jsx_runtime8.jsx)("div", { children: props.children }) }) }), frag ) : null; } return (0, import_jsx_runtime8.jsx)(SelectContentImpl, { ...props, ref: forwardedRef }); } ); SelectContent.displayName = CONTENT_NAME2; var CONTENT_MARGIN = 10; var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2); var CONTENT_IMPL_NAME = "SelectContentImpl"; var SelectContentImpl = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, position = "item-aligned", onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, // // PopperContent props side, sideOffset, align, alignOffset, arrowPadding, collisionBoundary, collisionPadding, sticky, hideWhenDetached, avoidCollisions, // ...contentProps } = props; const context = useSelectContext(CONTENT_NAME2, __scopeSelect); const [content, setContent] = React8.useState(null); const [viewport, setViewport] = React8.useState(null); const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node)); const [selectedItem, setSelectedItem] = React8.useState(null); const [selectedItemText, setSelectedItemText] = React8.useState( null ); const getItems = useCollection(__scopeSelect); const [isPositioned, setIsPositioned] = React8.useState(false); const firstValidItemFoundRef = React8.useRef(false); React8.useEffect(() => { if (content) return hideOthers(content); }, [content]); useFocusGuards(); const focusFirst = React8.useCallback( (candidates) => { const [firstItem, ...restItems] = getItems().map((item) => item.ref.current); const [lastItem] = restItems.slice(-1); const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement; for (const candidate of candidates) { if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return; candidate == null ? void 0 : candidate.scrollIntoView({ block: "nearest" }); if (candidate === firstItem && viewport) viewport.scrollTop = 0; if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight; candidate == null ? void 0 : candidate.focus(); if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return; } }, [getItems, viewport] ); const focusSelectedItem = React8.useCallback( () => focusFirst([selectedItem, content]), [focusFirst, selectedItem, content] ); React8.useEffect(() => { if (isPositioned) { focusSelectedItem(); } }, [isPositioned, focusSelectedItem]); const { onOpenChange, triggerPointerDownPosRef } = context; React8.useEffect(() => { if (content) { let pointerMoveDelta = { x: 0, y: 0 }; const handlePointerMove = (event) => { var _a, _b; pointerMoveDelta = { x: Math.abs(Math.round(event.pageX) - (((_a = triggerPointerDownPosRef.current) == null ? void 0 : _a.x) ?? 0)), y: Math.abs(Math.round(event.pageY) - (((_b = triggerPointerDownPosRef.current) == null ? void 0 : _b.y) ?? 0)) }; }; const handlePointerUp = (event) => { if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) { event.preventDefault(); } else { if (!content.contains(event.target)) { onOpenChange(false); } } document.removeEventListener("pointermove", handlePointerMove); triggerPointerDownPosRef.current = null; }; if (triggerPointerDownPosRef.current !== null) { document.addEventListener("pointermove", handlePointerMove); document.addEventListener("pointerup", handlePointerUp, { capture: true, once: true }); } return () => { document.removeEventListener("pointermove", handlePointerMove); document.removeEventListener("pointerup", handlePointerUp, { capture: true }); }; } }, [content, onOpenChange, triggerPointerDownPosRef]); React8.useEffect(() => { const close = () => onOpenChange(false); window.addEventListener("blur", close); window.addEventListener("resize", close); return () => { window.removeEventListener("blur", close); window.removeEventListener("resize", close); }; }, [onOpenChange]); const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => { const enabledItems = getItems().filter((item) => !item.disabled); const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement); const nextItem = findNextItem(enabledItems, search, currentItem); if (nextItem) { setTimeout(() => nextItem.ref.current.focus()); } }); const itemRefCallback = React8.useCallback( (node, value, disabled) => { const isFirstValidItem = !firstValidItemFoundRef.current && !disabled; const isSelectedItem = context.value !== void 0 && context.value === value; if (isSelectedItem || isFirstValidItem) { setSelectedItem(node); if (isFirstValidItem) firstValidItemFoundRef.current = true; } }, [context.value] ); const handleItemLeave = React8.useCallback(() => content == null ? void 0 : content.focus(), [content]); const itemTextRefCallback = React8.useCallback( (node, value, disabled) => { const isFirstValidItem = !firstValidItemFoundRef.current && !disabled; const isSelectedItem = context.value !== void 0 && context.value === value; if (isSelectedItem || isFirstValidItem) { setSelectedItemText(node); } }, [context.value] ); const SelectPosition = position === "popper" ? SelectPopperPosition : SelectItemAlignedPosition; const popperContentProps = SelectPosition === SelectPopperPosition ? { side, sideOffset, align, alignOffset, arrowPadding, collisionBoundary, collisionPadding, sticky, hideWhenDetached, avoidCollisions } : {}; return (0, import_jsx_runtime8.jsx)( SelectContentProvider, { scope: __scopeSelect, content, viewport, onViewportChange: setViewport, itemRefCallback, selectedItem, onItemLeave: handleItemLeave, itemTextRefCallback, focusSelectedItem, selectedItemText, position, isPositioned, searchRef, children: (0, import_jsx_runtime8.jsx)(Combination_default, { as: Slot, allowPinchZoom: true, children: (0, import_jsx_runtime8.jsx)( FocusScope, { asChild: true, trapped: context.open, onMountAutoFocus: (event) => { event.preventDefault(); }, onUnmountAutoFocus: composeEventHandlers(onCloseAutoFocus, (event) => { var _a; (_a = context.trigger) == null ? void 0 : _a.focus({ preventScroll: true }); event.preventDefault(); }), children: (0, import_jsx_runtime8.jsx)( DismissableLayer, { asChild: true, disableOutsidePointerEvents: true, onEscapeKeyDown, onPointerDownOutside, onFocusOutside: (event) => event.preventDefault(), onDismiss: () => context.onOpenChange(false), children: (0, import_jsx_runtime8.jsx)( SelectPosition, { role: "listbox", id: context.contentId, "data-state": context.open ? "open" : "closed", dir: context.dir, onContextMenu: (event) => event.preventDefault(), ...contentProps, ...popperContentProps, onPlaced: () => setIsPositioned(true), ref: composedRefs, style: { // flex layout so we can place the scroll buttons properly display: "flex", flexDirection: "column", // reset the outline by default as the content MAY get focused outline: "none", ...contentProps.style }, onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => { const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; if (event.key === "Tab") event.preventDefault(); if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key); if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) { const items = getItems().filter((item) => !item.disabled); let candidateNodes = items.map((item) => item.ref.current); if (["ArrowUp", "End"].includes(event.key)) { candidateNodes = candidateNodes.slice().reverse(); } if (["ArrowUp", "ArrowDown"].includes(event.key)) { const currentElement = event.target; const currentIndex = candidateNodes.indexOf(currentElement); candidateNodes = candidateNodes.slice(currentIndex + 1); } setTimeout(() => focusFirst(candidateNodes)); event.preventDefault(); } }) } ) } ) } ) }) } ); } ); SelectContentImpl.displayName = CONTENT_IMPL_NAME; var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition"; var SelectItemAlignedPosition = React8.forwardRef((props, forwardedRef) => { const { __scopeSelect, onPlaced, ...popperProps } = props; const context = useSelectContext(CONTENT_NAME2, __scopeSelect); const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect); const [contentWrapper, setContentWrapper] = React8.useState(null); const [content, setContent] = React8.useState(null); const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node)); const getItems = useCollection(__scopeSelect); const shouldExpandOnScrollRef = React8.useRef(false); const shouldRepositionRef = React8.useRef(true); const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext; const position = React8.useCallback(() => { if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) { const triggerRect = context.trigger.getBoundingClientRect(); const contentRect = content.getBoundingClientRect(); const valueNodeRect = context.valueNode.getBoundingClientRect(); const itemTextRect = selectedItemText.getBoundingClientRect(); if (context.dir !== "rtl") { const itemTextOffset = itemTextRect.left - contentRect.left; const left = valueNodeRect.left - itemTextOffset; const leftDelta = triggerRect.left - left; const minContentWidth = triggerRect.width + leftDelta; const contentWidth = Math.max(minContentWidth, contentRect.width); const rightEdge = window.innerWidth - CONTENT_MARGIN; const clampedLeft = clamp(left, [ CONTENT_MARGIN, // Prevents the content from going off the starting edge of the // viewport. It may still go off the ending edge, but this can be // controlled by the user since they may want to manage overflow in a // specific way. // https://github.com/radix-ui/primitives/issues/2049 Math.max(CONTENT_MARGIN, rightEdge - contentWidth) ]); contentWrapper.style.minWidth = minContentWidth + "px"; contentWrapper.style.left = clampedLeft + "px"; } else { const itemTextOffset = contentRect.right - itemTextRect.right; const right = window.innerWidth - valueNodeRect.right - itemTextOffset; const rightDelta = window.innerWidth - triggerRect.right - right; const minContentWidth = triggerRect.width + rightDelta; const contentWidth = Math.max(minContentWidth, contentRect.width); const leftEdge = window.innerWidth - CONTENT_MARGIN; const clampedRight = clamp(right, [ CONTENT_MARGIN, Math.max(CONTENT_MARGIN, leftEdge - contentWidth) ]); contentWrapper.style.minWidth = minContentWidth + "px"; contentWrapper.style.right = clampedRight + "px"; } const items = getItems(); const availableHeight = window.innerHeight - CONTENT_MARGIN * 2; const itemsHeight = viewport.scrollHeight; const contentStyles = window.getComputedStyle(content); const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10); const contentPaddingTop = parseInt(contentStyles.paddingTop, 10); const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10); const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10); const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight); const viewportStyles = window.getComputedStyle(viewport); const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10); const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10); const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN; const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle; const selectedItemHalfHeight = selectedItem.offsetHeight / 2; const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight; const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle; const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle; const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle; if (willAlignWithoutTopOverflow) { const isLastItem = items.length > 0 && selectedItem === items[items.length - 1].ref.current; contentWrapper.style.bottom = "0px"; const viewportOffsetBottom = content.clientHeight - viewport.offsetTop - viewport.offsetHeight; const clampedTriggerMiddleToBottomEdge = Math.max( triggerMiddleToBottomEdge, selectedItemHalfHeight + // viewport might have padding bottom, include it to avoid a scrollable viewport (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth ); const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge; contentWrapper.style.height = height + "px"; } else { const isFirstItem = items.length > 0 && selectedItem === items[0].ref.current; contentWrapper.style.top = "0px"; const clampedTopEdgeToTriggerMiddle = Math.max( topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.offsetTop + // viewport might have padding top, include it to avoid a scrollable viewport (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight ); const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom; contentWrapper.style.height = height + "px"; viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop; } contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`; contentWrapper.style.minHeight = minContentHeight + "px"; contentWrapper.style.maxHeight = availableHeight + "px"; onPlaced == null ? void 0 : onPlaced(); requestAnimationFrame(() => shouldExpandOnScrollRef.current = true); } }, [ getItems, context.trigger, context.valueNode, contentWrapper, content, viewport, selectedItem, selectedItemText, context.dir, onPlaced ]); useLayoutEffect2(() => position(), [position]); const [contentZIndex, setContentZIndex] = React8.useState(); useLayoutEffect2(() => { if (content) setContentZIndex(window.getComputedStyle(content).zIndex); }, [content]); const handleScrollButtonChange = React8.useCallback( (node) => { if (node && shouldRepositionRef.current === true) { position(); focusSelectedItem == null ? void 0 : focusSelectedItem(); shouldRepositionRef.current = false; } }, [position, focusSelectedItem] ); return (0, import_jsx_runtime8.jsx)( SelectViewportProvider, { scope: __scopeSelect, contentWrapper, shouldExpandOnScrollRef, onScrollButtonChange: handleScrollButtonChange, children: (0, import_jsx_runtime8.jsx)( "div", { ref: setContentWrapper, style: { display: "flex", flexDirection: "column", position: "fixed", zIndex: contentZIndex }, children: (0, import_jsx_runtime8.jsx)( Primitive.div, { ...popperProps, ref: composedRefs, style: { // When we get the height of the content, it includes borders. If we were to set // the height without having `boxSizing: 'border-box'` it would be too big. boxSizing: "border-box", // We need to ensure the content doesn't get taller than the wrapper maxHeight: "100%", ...popperProps.style } } ) } ) } ); }); SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME; var POPPER_POSITION_NAME = "SelectPopperPosition"; var SelectPopperPosition = React8.forwardRef((props, forwardedRef) => { const { __scopeSelect, align = "start", collisionPadding = CONTENT_MARGIN, ...popperProps } = props; const popperScope = usePopperScope(__scopeSelect); return (0, import_jsx_runtime8.jsx)( Content, { ...popperScope, ...popperProps, ref: forwardedRef, align, collisionPadding, style: { // Ensure border-box for floating-ui calculations boxSizing: "border-box", ...popperProps.style, // re-namespace exposed content custom properties ...{ "--radix-select-content-transform-origin": "var(--radix-popper-transform-origin)", "--radix-select-content-available-width": "var(--radix-popper-available-width)", "--radix-select-content-available-height": "var(--radix-popper-available-height)", "--radix-select-trigger-width": "var(--radix-popper-anchor-width)", "--radix-select-trigger-height": "var(--radix-popper-anchor-height)" } } } ); }); SelectPopperPosition.displayName = POPPER_POSITION_NAME; var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {}); var VIEWPORT_NAME = "SelectViewport"; var SelectViewport = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, nonce, ...viewportProps } = props; const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect); const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect); const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange); const prevScrollTopRef = React8.useRef(0); return (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [ (0, import_jsx_runtime8.jsx)( "style", { dangerouslySetInnerHTML: { __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}` }, nonce } ), (0, import_jsx_runtime8.jsx)(Collection.Slot, { scope: __scopeSelect, children: (0, import_jsx_runtime8.jsx)( Primitive.div, { "data-radix-select-viewport": "", role: "presentation", ...viewportProps, ref: composedRefs, style: { // we use position: 'relative' here on the `viewport` so that when we call // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport // (independent of the scrollUpButton). position: "relative", flex: 1, // Viewport should only be scrollable in the vertical direction. // This won't work in vertical writing modes, so we'll need to // revisit this if/when that is supported // https://developer.chrome.com/blog/vertical-form-controls overflow: "hidden auto", ...viewportProps.style }, onScroll: composeEventHandlers(viewportProps.onScroll, (event) => { const viewport = event.currentTarget; const { contentWrapper, shouldExpandOnScrollRef } = viewportContext; if ((shouldExpandOnScrollRef == null ? void 0 : shouldExpandOnScrollRef.current) && contentWrapper) { const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop); if (scrolledBy > 0) { const availableHeight = window.innerHeight - CONTENT_MARGIN * 2; const cssMinHeight = parseFloat(contentWrapper.style.minHeight); const cssHeight = parseFloat(contentWrapper.style.height); const prevHeight = Math.max(cssMinHeight, cssHeight); if (prevHeight < availableHeight) { const nextHeight = prevHeight + scrolledBy; const clampedNextHeight = Math.min(availableHeight, nextHeight); const heightDiff = nextHeight - clampedNextHeight; contentWrapper.style.height = clampedNextHeight + "px"; if (contentWrapper.style.bottom === "0px") { viewport.scrollTop = heightDiff > 0 ? heightDiff : 0; contentWrapper.style.justifyContent = "flex-end"; } } } } prevScrollTopRef.current = viewport.scrollTop; }) } ) }) ] }); } ); SelectViewport.displayName = VIEWPORT_NAME; var GROUP_NAME = "SelectGroup"; var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME); var SelectGroup = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, ...groupProps } = props; const groupId = useId(); return (0, import_jsx_runtime8.jsx)(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: (0, import_jsx_runtime8.jsx)(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) }); } ); SelectGroup.displayName = GROUP_NAME; var LABEL_NAME = "SelectLabel"; var SelectLabel = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, ...labelProps } = props; const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect); return (0, import_jsx_runtime8.jsx)(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef }); } ); SelectLabel.displayName = LABEL_NAME; var ITEM_NAME = "SelectItem"; var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME); var SelectItem = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, value, disabled = false, textValue: textValueProp, ...itemProps } = props; const context = useSelectContext(ITEM_NAME, __scopeSelect); const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect); const isSelected = context.value === value; const [textValue, setTextValue] = React8.useState(textValueProp ?? ""); const [isFocused, setIsFocused] = React8.useState(false); const composedRefs = useComposedRefs( forwardedRef, (node) => { var _a; return (_a = contentContext.itemRefCallback) == null ? void 0 : _a.call(contentContext, node, value, disabled); } ); const textId = useId(); const pointerTypeRef = React8.useRef("touch"); const handleSelect = () => { if (!disabled) { context.onValueChange(value); context.onOpenChange(false); } }; if (value === "") { throw new Error( "A must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder." ); } return (0, import_jsx_runtime8.jsx)( SelectItemContextProvider, { scope: __scopeSelect, value, disabled, textId, isSelected, onItemTextChange: React8.useCallback((node) => { setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim()); }, []), children: (0, import_jsx_runtime8.jsx)( Collection.ItemSlot, { scope: __scopeSelect, value, disabled, textValue, children: (0, import_jsx_runtime8.jsx)( Primitive.div, { role: "option", "aria-labelledby": textId, "data-highlighted": isFocused ? "" : void 0, "aria-selected": isSelected && isFocused, "data-state": isSelected ? "checked" : "unchecked", "aria-disabled": disabled || void 0, "data-disabled": disabled ? "" : void 0, tabIndex: disabled ? void 0 : -1, ...itemProps, ref: composedRefs, onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)), onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)), onClick: composeEventHandlers(itemProps.onClick, () => { if (pointerTypeRef.current !== "mouse") handleSelect(); }), onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => { if (pointerTypeRef.current === "mouse") handleSelect(); }), onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => { pointerTypeRef.current = event.pointerType; }), onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => { var _a; pointerTypeRef.current = event.pointerType; if (disabled) { (_a = contentContext.onItemLeave) == null ? void 0 : _a.call(contentContext); } else if (pointerTypeRef.current === "mouse") { event.currentTarget.focus({ preventScroll: true }); } }), onPointerLeave: composeEventHandlers(itemProps.onPointerLeave, (event) => { var _a; if (event.currentTarget === document.activeElement) { (_a = contentContext.onItemLeave) == null ? void 0 : _a.call(contentContext); } }), onKeyDown: composeEventHandlers(itemProps.onKeyDown, (event) => { var _a; const isTypingAhead = ((_a = contentContext.searchRef) == null ? void 0 : _a.current) !== ""; if (isTypingAhead && event.key === " ") return; if (SELECTION_KEYS.includes(event.key)) handleSelect(); if (event.key === " ") event.preventDefault(); }) } ) } ) } ); } ); SelectItem.displayName = ITEM_NAME; var ITEM_TEXT_NAME = "SelectItemText"; var SelectItemText = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, className, style, ...itemTextProps } = props; const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect); const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect); const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect); const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect); const [itemTextNode, setItemTextNode] = React8.useState(null); const composedRefs = useComposedRefs( forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => { var _a; return (_a = contentContext.itemTextRefCallback) == null ? void 0 : _a.call(contentContext, node, itemContext.value, itemContext.disabled); } ); const textContent = itemTextNode == null ? void 0 : itemTextNode.textContent; const nativeOption = React8.useMemo( () => (0, import_jsx_runtime8.jsx)("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent] ); const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext; useLayoutEffect2(() => { onNativeOptionAdd(nativeOption); return () => onNativeOptionRemove(nativeOption); }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]); return (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [ (0, import_jsx_runtime8.jsx)(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null ] }); } ); SelectItemText.displayName = ITEM_TEXT_NAME; var ITEM_INDICATOR_NAME = "SelectItemIndicator"; var SelectItemIndicator = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, ...itemIndicatorProps } = props; const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect); return itemContext.isSelected ? (0, import_jsx_runtime8.jsx)(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null; } ); SelectItemIndicator.displayName = ITEM_INDICATOR_NAME; var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton"; var SelectScrollUpButton = React8.forwardRef((props, forwardedRef) => { const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect); const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect); const [canScrollUp, setCanScrollUp] = React8.useState(false); const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange); useLayoutEffect2(() => { if (contentContext.viewport && contentContext.isPositioned) { let handleScroll2 = function() { const canScrollUp2 = viewport.scrollTop > 0; setCanScrollUp(canScrollUp2); }; var handleScroll = handleScroll2; const viewport = contentContext.viewport; handleScroll2(); viewport.addEventListener("scroll", handleScroll2); return () => viewport.removeEventListener("scroll", handleScroll2); } }, [contentContext.viewport, contentContext.isPositioned]); return canScrollUp ? (0, import_jsx_runtime8.jsx)( SelectScrollButtonImpl, { ...props, ref: composedRefs, onAutoScroll: () => { const { viewport, selectedItem } = contentContext; if (viewport && selectedItem) { viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight; } } } ) : null; }); SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME; var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton"; var SelectScrollDownButton = React8.forwardRef((props, forwardedRef) => { const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect); const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect); const [canScrollDown, setCanScrollDown] = React8.useState(false); const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange); useLayoutEffect2(() => { if (contentContext.viewport && contentContext.isPositioned) { let handleScroll2 = function() { const maxScroll = viewport.scrollHeight - viewport.clientHeight; const canScrollDown2 = Math.ceil(viewport.scrollTop) < maxScroll; setCanScrollDown(canScrollDown2); }; var handleScroll = handleScroll2; const viewport = contentContext.viewport; handleScroll2(); viewport.addEventListener("scroll", handleScroll2); return () => viewport.removeEventListener("scroll", handleScroll2); } }, [contentContext.viewport, contentContext.isPositioned]); return canScrollDown ? (0, import_jsx_runtime8.jsx)( SelectScrollButtonImpl, { ...props, ref: composedRefs, onAutoScroll: () => { const { viewport, selectedItem } = contentContext; if (viewport && selectedItem) { viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight; } } } ) : null; }); SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME; var SelectScrollButtonImpl = React8.forwardRef((props, forwardedRef) => { const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props; const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect); const autoScrollTimerRef = React8.useRef(null); const getItems = useCollection(__scopeSelect); const clearAutoScrollTimer = React8.useCallback(() => { if (autoScrollTimerRef.current !== null) { window.clearInterval(autoScrollTimerRef.current); autoScrollTimerRef.current = null; } }, []); React8.useEffect(() => { return () => clearAutoScrollTimer(); }, [clearAutoScrollTimer]); useLayoutEffect2(() => { var _a; const activeItem = getItems().find((item) => item.ref.current === document.activeElement); (_a = activeItem == null ? void 0 : activeItem.ref.current) == null ? void 0 : _a.scrollIntoView({ block: "nearest" }); }, [getItems]); return (0, import_jsx_runtime8.jsx)( Primitive.div, { "aria-hidden": true, ...scrollIndicatorProps, ref: forwardedRef, style: { flexShrink: 0, ...scrollIndicatorProps.style }, onPointerDown: composeEventHandlers(scrollIndicatorProps.onPointerDown, () => { if (autoScrollTimerRef.current === null) { autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50); } }), onPointerMove: composeEventHandlers(scrollIndicatorProps.onPointerMove, () => { var _a; (_a = contentContext.onItemLeave) == null ? void 0 : _a.call(contentContext); if (autoScrollTimerRef.current === null) { autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50); } }), onPointerLeave: composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => { clearAutoScrollTimer(); }) } ); }); var SEPARATOR_NAME = "SelectSeparator"; var SelectSeparator = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, ...separatorProps } = props; return (0, import_jsx_runtime8.jsx)(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef }); } ); SelectSeparator.displayName = SEPARATOR_NAME; var ARROW_NAME2 = "SelectArrow"; var SelectArrow = React8.forwardRef( (props, forwardedRef) => { const { __scopeSelect, ...arrowProps } = props; const popperScope = usePopperScope(__scopeSelect); const context = useSelectContext(ARROW_NAME2, __scopeSelect); const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect); return context.open && contentContext.position === "popper" ? (0, import_jsx_runtime8.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null; } ); SelectArrow.displayName = ARROW_NAME2; function shouldShowPlaceholder(value) { return value === "" || value === void 0; } var BubbleSelect = React8.forwardRef( (props, forwardedRef) => { const { value, ...selectProps } = props; const ref = React8.useRef(null); const composedRefs = useComposedRefs(forwardedRef, ref); const prevValue = usePrevious(value); React8.useEffect(() => { const select = ref.current; const selectProto = window.HTMLSelectElement.prototype; const descriptor = Object.getOwnPropertyDescriptor( selectProto, "value" ); const setValue = descriptor.set; if (prevValue !== value && setValue) { const event = new Event("change", { bubbles: true }); setValue.call(select, value); select.dispatchEvent(event); } }, [prevValue, value]); return (0, import_jsx_runtime8.jsx)(VisuallyHidden, { asChild: true, children: (0, import_jsx_runtime8.jsx)("select", { ...selectProps, ref: composedRefs, defaultValue: value }) }); } ); BubbleSelect.displayName = "BubbleSelect"; function useTypeaheadSearch(onSearchChange) { const handleSearchChange = useCallbackRef(onSearchChange); const searchRef = React8.useRef(""); const timerRef = React8.useRef(0); const handleTypeaheadSearch = React8.useCallback( (key) => { const search = searchRef.current + key; handleSearchChange(search); (function updateSearch(value) { searchRef.current = value; window.clearTimeout(timerRef.current); if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3); })(search); }, [handleSearchChange] ); const resetTypeahead = React8.useCallback(() => { searchRef.current = ""; window.clearTimeout(timerRef.current); }, []); React8.useEffect(() => { return () => window.clearTimeout(timerRef.current); }, []); return [searchRef, handleTypeaheadSearch, resetTypeahead]; } function findNextItem(items, search, currentItem) { const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]); const normalizedSearch = isRepeated ? search[0] : search; const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1; let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0)); const excludeCurrentItem = normalizedSearch.length === 1; if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem); const nextItem = wrappedItems.find( (item) => item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase()) ); return nextItem !== currentItem ? nextItem : void 0; } function wrapArray(array, startIndex) { return array.map((_, index) => array[(startIndex + index) % array.length]); } var Root22 = Select; var Trigger = SelectTrigger; var Value = SelectValue; var Icon = SelectIcon; var Portal2 = SelectPortal; var Content2 = SelectContent; var Viewport = SelectViewport; var Group = SelectGroup; var Label = SelectLabel; var Item = SelectItem; var ItemText = SelectItemText; var ItemIndicator = SelectItemIndicator; var ScrollUpButton = SelectScrollUpButton; var ScrollDownButton = SelectScrollDownButton; var Separator = SelectSeparator; var Arrow22 = SelectArrow; export { Arrow22 as Arrow, Content2 as Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal2 as Portal, Root22 as Root, ScrollDownButton, ScrollUpButton, Select, SelectArrow, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, Separator, Trigger, Value, Viewport, createSelectScope }; //# sourceMappingURL=@radix-ui_react-select.js.map