diff --git a/soul-admin/node_modules/.vite/deps/@radix-ui_react-dialog.js b/soul-admin/node_modules/.vite/deps/@radix-ui_react-dialog.js index 10de3052..c29919a8 100644 --- a/soul-admin/node_modules/.vite/deps/@radix-ui_react-dialog.js +++ b/soul-admin/node_modules/.vite/deps/@radix-ui_react-dialog.js @@ -1,7 +1,4 @@ "use client"; -import { - Presence -} from "./chunk-NIIVMGDR.js"; import { Combination_default, DismissableLayer, @@ -9,10 +6,13 @@ import { Portal, hideOthers, useFocusGuards -} from "./chunk-ZI3ABUEZ.js"; +} from "./chunk-F7DT5XKE.js"; +import { + Presence +} from "./chunk-F45T64ZQ.js"; import { useId -} from "./chunk-F2GLZ5N4.js"; +} from "./chunk-J6QGUIE5.js"; import { Primitive, composeEventHandlers, @@ -20,17 +20,17 @@ import { createContextScope, createSlot, useControllableState -} from "./chunk-DRHL3CIY.js"; +} from "./chunk-6P4JE5KB.js"; import { useComposedRefs -} from "./chunk-XYHIF63Q.js"; +} from "./chunk-H5WV2N77.js"; +import "./chunk-4GC24YIX.js"; import { require_jsx_runtime -} from "./chunk-NNZQKBPS.js"; -import "./chunk-BH4GTE34.js"; +} from "./chunk-GVNB4JNI.js"; import { require_react -} from "./chunk-2OBKLRK6.js"; +} from "./chunk-ZPOJ4WAM.js"; import { __toESM } from "./chunk-G3PMV62Z.js"; diff --git a/soul-admin/node_modules/.vite/deps/@radix-ui_react-label.js b/soul-admin/node_modules/.vite/deps/@radix-ui_react-label.js index 33f752d0..b398f82a 100644 --- a/soul-admin/node_modules/.vite/deps/@radix-ui_react-label.js +++ b/soul-admin/node_modules/.vite/deps/@radix-ui_react-label.js @@ -1,17 +1,17 @@ "use client"; import { createSlot -} from "./chunk-CSWCJLZQ.js"; -import "./chunk-XYHIF63Q.js"; -import { - require_jsx_runtime -} from "./chunk-NNZQKBPS.js"; +} from "./chunk-GDI5LHIV.js"; +import "./chunk-H5WV2N77.js"; import { require_react_dom -} from "./chunk-BH4GTE34.js"; +} from "./chunk-4GC24YIX.js"; +import { + require_jsx_runtime +} from "./chunk-GVNB4JNI.js"; import { require_react -} from "./chunk-2OBKLRK6.js"; +} from "./chunk-ZPOJ4WAM.js"; import { __toESM } from "./chunk-G3PMV62Z.js"; diff --git a/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js b/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js index 31e6e9bd..1b080231 100644 --- a/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js +++ b/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js @@ -6,22 +6,22 @@ import { Portal, hideOthers, useFocusGuards -} from "./chunk-ZI3ABUEZ.js"; +} from "./chunk-F7DT5XKE.js"; import { useCallbackRef, useId -} from "./chunk-F2GLZ5N4.js"; +} from "./chunk-J6QGUIE5.js"; import { clamp } from "./chunk-QSHREGVI.js"; import { createCollection, useDirection -} from "./chunk-3YHVK7S6.js"; +} from "./chunk-FFR5BFZF.js"; import { usePrevious, useSize -} from "./chunk-LRHVP6W3.js"; +} from "./chunk-TP6EWLLD.js"; import { Primitive, composeEventHandlers, @@ -29,19 +29,19 @@ import { createSlot, useControllableState, useLayoutEffect2 -} from "./chunk-DRHL3CIY.js"; +} from "./chunk-6P4JE5KB.js"; import { useComposedRefs -} from "./chunk-XYHIF63Q.js"; -import { - require_jsx_runtime -} from "./chunk-NNZQKBPS.js"; +} from "./chunk-H5WV2N77.js"; import { require_react_dom -} from "./chunk-BH4GTE34.js"; +} from "./chunk-4GC24YIX.js"; +import { + require_jsx_runtime +} from "./chunk-GVNB4JNI.js"; import { require_react -} from "./chunk-2OBKLRK6.js"; +} from "./chunk-ZPOJ4WAM.js"; import { __toESM } from "./chunk-G3PMV62Z.js"; @@ -53,7 +53,7 @@ var ReactDOM2 = __toESM(require_react_dom(), 1); // node_modules/.pnpm/@radix-ui+react-popper@1.2._670e32d9a64ee24e3a22b3ad7ddf00ff/node_modules/@radix-ui/react-popper/dist/index.mjs var React3 = __toESM(require_react(), 1); -// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs +// node_modules/.pnpm/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs var sides = ["top", "right", "bottom", "left"]; var alignments = ["start", "end"]; var placements = sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []); @@ -187,7 +187,7 @@ function rectToClientRect(rect) { }; } -// node_modules/.pnpm/@floating-ui+core@1.7.4/node_modules/@floating-ui/core/dist/floating-ui.core.mjs +// node_modules/.pnpm/node_modules/@floating-ui/core/dist/floating-ui.core.mjs function computeCoordsFromPlacement(_ref, placement, rtl) { let { reference, @@ -903,7 +903,7 @@ var size = function(options) { }; }; -// node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs +// node_modules/.pnpm/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs function hasWindow() { return typeof window !== "undefined"; } @@ -1056,7 +1056,7 @@ function getFrameElement(win) { return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null; } -// node_modules/.pnpm/@floating-ui+dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs +// node_modules/.pnpm/@floating-ui+react-dom@2.1._c27c523691b7b5617e36eea923299747/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs function getCssDimensions(element) { const css = getComputedStyle2(element); let width = parseFloat(css.width) || 0; diff --git a/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js.map b/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js.map index 81d41609..74452da4 100644 --- a/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js.map +++ b/soul-admin/node_modules/.vite/deps/@radix-ui_react-select.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../../.pnpm/@radix-ui+react-select@2.2._f9b05e8db7247fc075715ae52301583d/node_modules/@radix-ui/react-select/src/select.tsx", "../../.pnpm/@radix-ui+react-popper@1.2._670e32d9a64ee24e3a22b3ad7ddf00ff/node_modules/@radix-ui/react-popper/src/popper.tsx", "../../.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs", "../../.pnpm/@floating-ui+core@1.7.4/node_modules/@floating-ui/core/dist/floating-ui.core.mjs", "../../.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs", "../../.pnpm/@floating-ui+dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs", "../../.pnpm/@floating-ui+react-dom@2.1._c27c523691b7b5617e36eea923299747/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs", "../../.pnpm/@radix-ui+react-arrow@1.1.7_ca49517bc17aeb848c1fd64fd7d6a751/node_modules/@radix-ui/react-arrow/src/arrow.tsx", "../../.pnpm/@radix-ui+react-visually-hi_20e51f345ec6c8aedb80070ad020dacb/node_modules/@radix-ui/react-visually-hidden/src/visually-hidden.tsx"], - "sourcesContent": ["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createSlot } from '@radix-ui/react-slot';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { VISUALLY_HIDDEN_STYLES } from '@radix-ui/react-visually-hidden';\nimport { hideOthers } from 'aria-hidden';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];\nconst SELECTION_KEYS = [' ', 'Enter'];\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nconst SELECT_NAME = 'Select';\n\ntype ItemData = { value: string; disabled: boolean; textValue: string };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n SelectItemElement,\n ItemData\n>(SELECT_NAME);\n\ntype ScopedProps

= P & { __scopeSelect?: Scope };\nconst [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [\n createCollectionScope,\n createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\ntype SelectContextValue = {\n trigger: SelectTriggerElement | null;\n onTriggerChange(node: SelectTriggerElement | null): void;\n valueNode: SelectValueElement | null;\n onValueNodeChange(node: SelectValueElement): void;\n valueNodeHasChildren: boolean;\n onValueNodeHasChildrenChange(hasChildren: boolean): void;\n contentId: string;\n value: string | undefined;\n onValueChange(value: string): void;\n open: boolean;\n required?: boolean;\n onOpenChange(open: boolean): void;\n dir: SelectProps['dir'];\n triggerPointerDownPosRef: React.MutableRefObject<{ x: number; y: number } | null>;\n disabled?: boolean;\n};\n\nconst [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);\n\ntype NativeOption = React.ReactElement>;\n\ntype SelectNativeOptionsContextValue = {\n onNativeOptionAdd(option: NativeOption): void;\n onNativeOptionRemove(option: NativeOption): void;\n};\nconst [SelectNativeOptionsProvider, useSelectNativeOptionsContext] =\n createSelectContext(SELECT_NAME);\n\ninterface ControlledClearableSelectProps {\n value: string | undefined;\n defaultValue?: never;\n onValueChange: (value: string | undefined) => void;\n}\n\ninterface ControlledUnclearableSelectProps {\n value: string;\n defaultValue?: never;\n onValueChange: (value: string) => void;\n}\n\ninterface UncontrolledSelectProps {\n value?: never;\n defaultValue?: string;\n onValueChange?: {\n (value: string): void;\n (value: string | undefined): void;\n };\n}\n\ntype SelectControlProps =\n | ControlledClearableSelectProps\n | ControlledUnclearableSelectProps\n | UncontrolledSelectProps;\n\ninterface SelectSharedProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n dir?: Direction;\n name?: string;\n autoComplete?: string;\n disabled?: boolean;\n required?: boolean;\n form?: string;\n}\n\n// TODO: Should improve typing somewhat, but this would be a breaking change.\n// Consider using in the next major version (along with some testing to be sure\n// it works as expected and doesn't cause problems)\ntype _FutureSelectProps = SelectSharedProps & SelectControlProps;\n\ntype SelectProps = SelectSharedProps & {\n value?: string;\n defaultValue?: string;\n onValueChange?(value: string): void;\n};\n\nconst Select: React.FC = (props: ScopedProps) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n dir,\n name,\n autoComplete,\n disabled,\n required,\n form,\n } = props;\n const popperScope = usePopperScope(__scopeSelect);\n const [trigger, setTrigger] = React.useState(null);\n const [valueNode, setValueNode] = React.useState(null);\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);\n const direction = useDirection(dir);\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n caller: SELECT_NAME,\n });\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange as any,\n caller: SELECT_NAME,\n });\n const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null);\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = trigger ? form || !!trigger.closest('form') : true;\n const [nativeOptionsSet, setNativeOptionsSet] = React.useState(new Set());\n\n // The native `select` only associates the correct default value if the corresponding\n // `option` is rendered as a child **at the same time** as itself.\n // Because it might take a few renders for our items to gather the information to build\n // the native `option`(s), we generate a key on the `select` to make sure React re-builds it\n // each time the options change.\n const nativeSelectKey = Array.from(nativeOptionsSet)\n .map((option) => option.props.value)\n .join(';');\n\n return (\n \n \n \n {\n setNativeOptionsSet((prev) => new Set(prev).add(option));\n }, [])}\n onNativeOptionRemove={React.useCallback((option) => {\n setNativeOptionsSet((prev) => {\n const optionsSet = new Set(prev);\n optionsSet.delete(option);\n return optionsSet;\n });\n }, [])}\n >\n {children}\n \n \n\n {isFormControl ? (\n setValue(event.target.value)}\n disabled={disabled}\n form={form}\n >\n {value === undefined ? \n );\n};\n\nSelect.displayName = SELECT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger';\n\ntype SelectTriggerElement = React.ComponentRef;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef;\ninterface SelectTriggerProps extends PrimitiveButtonProps {}\n\nconst SelectTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, disabled = false, ...triggerProps } = props;\n const popperScope = usePopperScope(__scopeSelect);\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect);\n const isDisabled = context.disabled || disabled;\n const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);\n const getItems = useCollection(__scopeSelect);\n const pointerTypeRef = React.useRef('touch');\n\n const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {\n const enabledItems = getItems().filter((item) => !item.disabled);\n const currentItem = enabledItems.find((item) => item.value === context.value);\n const nextItem = findNextItem(enabledItems, search, currentItem);\n if (nextItem !== undefined) {\n context.onValueChange(nextItem.value);\n }\n });\n\n const handleOpen = (pointerEvent?: React.MouseEvent | React.PointerEvent) => {\n if (!isDisabled) {\n context.onOpenChange(true);\n // reset typeahead when we open\n resetTypeahead();\n }\n\n if (pointerEvent) {\n context.triggerPointerDownPosRef.current = {\n x: Math.round(pointerEvent.pageX),\n y: Math.round(pointerEvent.pageY),\n };\n }\n };\n\n return (\n \n {\n // Whilst browsers generally have no issue focusing the trigger when clicking\n // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n // We force `focus` in this case. Note: this doesn't create any other side-effect\n // because we are preventing default in `onPointerDown` so effectively\n // this only runs for a label \"click\"\n event.currentTarget.focus();\n\n // Open on click when using a touch or pen device\n if (pointerTypeRef.current !== 'mouse') {\n handleOpen(event);\n }\n })}\n onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {\n pointerTypeRef.current = event.pointerType;\n\n // prevent implicit pointer capture\n // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n }\n\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click); also not for touch\n // devices because that would open the menu on scroll. (pen devices behave as touch on iOS).\n if (event.button === 0 && event.ctrlKey === false && event.pointerType === 'mouse') {\n handleOpen(event);\n // prevent trigger from stealing focus from the active item after opening.\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(triggerProps.onKeyDown, (event) => {\n const isTypingAhead = searchRef.current !== '';\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);\n if (isTypingAhead && event.key === ' ') return;\n if (OPEN_KEYS.includes(event.key)) {\n handleOpen();\n event.preventDefault();\n }\n })}\n />\n \n );\n }\n);\n\nSelectTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue';\n\ntype SelectValueElement = React.ComponentRef;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef;\ninterface SelectValueProps extends Omit {\n placeholder?: React.ReactNode;\n}\n\nconst SelectValue = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const { __scopeSelect, className, style, children, placeholder = '', ...valueProps } = props;\n const context = useSelectContext(VALUE_NAME, __scopeSelect);\n const { onValueNodeHasChildrenChange } = context;\n const hasChildren = children !== undefined;\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);\n\n useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren);\n }, [onValueNodeHasChildrenChange, hasChildren]);\n\n return (\n \n {shouldShowPlaceholder(context.value) ? <>{placeholder} : children}\n \n );\n }\n);\n\nSelectValue.displayName = VALUE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst ICON_NAME = 'SelectIcon';\n\ntype SelectIconElement = React.ComponentRef;\ninterface SelectIconProps extends PrimitiveSpanProps {}\n\nconst SelectIcon = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, children, ...iconProps } = props;\n return (\n \n {children || '\u25BC'}\n \n );\n }\n);\n\nSelectIcon.displayName = ICON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'SelectPortal';\n\ntype PortalProps = React.ComponentPropsWithoutRef;\ninterface SelectPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n}\n\nconst SelectPortal: React.FC = (props: ScopedProps) => {\n return ;\n};\n\nSelectPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent';\n\ntype SelectContentElement = SelectContentImplElement;\ninterface SelectContentProps extends SelectContentImplProps {}\n\nconst SelectContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);\n const [fragment, setFragment] = React.useState();\n\n // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server\n useLayoutEffect(() => {\n setFragment(new DocumentFragment());\n }, []);\n\n if (!context.open) {\n const frag = fragment as Element | undefined;\n return frag\n ? ReactDOM.createPortal(\n \n \n

{props.children}
\n \n ,\n frag\n )\n : null;\n }\n\n return ;\n }\n);\n\nSelectContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContentImpl\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_MARGIN = 10;\n\ntype SelectContentContextValue = {\n content?: SelectContentElement | null;\n viewport?: SelectViewportElement | null;\n onViewportChange?: (node: SelectViewportElement | null) => void;\n itemRefCallback?: (node: SelectItemElement | null, value: string, disabled: boolean) => void;\n selectedItem?: SelectItemElement | null;\n onItemLeave?: () => void;\n itemTextRefCallback?: (\n node: SelectItemTextElement | null,\n value: string,\n disabled: boolean\n ) => void;\n focusSelectedItem?: () => void;\n selectedItemText?: SelectItemTextElement | null;\n position?: SelectContentProps['position'];\n isPositioned?: boolean;\n searchRef?: React.RefObject;\n};\n\nconst [SelectContentProvider, useSelectContentContext] =\n createSelectContext(CONTENT_NAME);\n\nconst CONTENT_IMPL_NAME = 'SelectContentImpl';\n\ntype SelectContentImplElement = SelectPopperPositionElement | SelectItemAlignedPositionElement;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef;\ntype FocusScopeProps = React.ComponentPropsWithoutRef;\n\ntype SelectPopperPrivateProps = { onPlaced?: PopperContentProps['onPlaced'] };\n\ninterface SelectContentImplProps\n extends Omit,\n Omit {\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n\n position?: 'item-aligned' | 'popper';\n}\n\nconst Slot = createSlot('SelectContent.RemoveScroll');\n\nconst SelectContentImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeSelect,\n position = 'item-aligned',\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n //\n // PopperContent props\n side,\n sideOffset,\n align,\n alignOffset,\n arrowPadding,\n collisionBoundary,\n collisionPadding,\n sticky,\n hideWhenDetached,\n avoidCollisions,\n //\n ...contentProps\n } = props;\n const context = useSelectContext(CONTENT_NAME, __scopeSelect);\n const [content, setContent] = React.useState(null);\n const [viewport, setViewport] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n const [selectedItem, setSelectedItem] = React.useState(null);\n const [selectedItemText, setSelectedItemText] = React.useState(\n null\n );\n const getItems = useCollection(__scopeSelect);\n const [isPositioned, setIsPositioned] = React.useState(false);\n const firstValidItemFoundRef = React.useRef(false);\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (content) return hideOthers(content);\n }, [content]);\n\n // Make sure the whole tree has focus guards as our `Select` may be\n // the last element in the DOM (because of the `Portal`)\n useFocusGuards();\n\n const focusFirst = React.useCallback(\n (candidates: Array) => {\n const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);\n const [lastItem] = restItems.slice(-1);\n\n const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n for (const candidate of candidates) {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n candidate?.scrollIntoView({ block: 'nearest' });\n // viewport might have padding so scroll to its edges when focusing first/last items.\n if (candidate === firstItem && viewport) viewport.scrollTop = 0;\n if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;\n candidate?.focus();\n if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n }\n },\n [getItems, viewport]\n );\n\n const focusSelectedItem = React.useCallback(\n () => focusFirst([selectedItem, content]),\n [focusFirst, selectedItem, content]\n );\n\n // Since this is not dependent on layout, we want to ensure this runs at the same time as\n // other effects across components. Hence why we don't call `focusSelectedItem` inside `position`.\n React.useEffect(() => {\n if (isPositioned) {\n focusSelectedItem();\n }\n }, [isPositioned, focusSelectedItem]);\n\n // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n // and close on `pointerup` outside.\n const { onOpenChange, triggerPointerDownPosRef } = context;\n React.useEffect(() => {\n if (content) {\n let pointerMoveDelta = { x: 0, y: 0 };\n\n const handlePointerMove = (event: PointerEvent) => {\n pointerMoveDelta = {\n x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),\n y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0)),\n };\n };\n const handlePointerUp = (event: PointerEvent) => {\n // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n event.preventDefault();\n } else {\n // otherwise, if the event was outside the content, close.\n if (!content.contains(event.target as HTMLElement)) {\n onOpenChange(false);\n }\n }\n document.removeEventListener('pointermove', handlePointerMove);\n triggerPointerDownPosRef.current = null;\n };\n\n if (triggerPointerDownPosRef.current !== null) {\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp, { capture: true, once: true });\n }\n\n return () => {\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp, { capture: true });\n };\n }\n }, [content, onOpenChange, triggerPointerDownPosRef]);\n\n React.useEffect(() => {\n const close = () => onOpenChange(false);\n window.addEventListener('blur', close);\n window.addEventListener('resize', close);\n return () => {\n window.removeEventListener('blur', close);\n window.removeEventListener('resize', close);\n };\n }, [onOpenChange]);\n\n const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {\n const enabledItems = getItems().filter((item) => !item.disabled);\n const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);\n const nextItem = findNextItem(enabledItems, search, currentItem);\n if (nextItem) {\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => (nextItem.ref.current as HTMLElement).focus());\n }\n });\n\n const itemRefCallback = React.useCallback(\n (node: SelectItemElement | null, value: string, disabled: boolean) => {\n const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;\n const isSelectedItem = context.value !== undefined && context.value === value;\n if (isSelectedItem || isFirstValidItem) {\n setSelectedItem(node);\n if (isFirstValidItem) firstValidItemFoundRef.current = true;\n }\n },\n [context.value]\n );\n const handleItemLeave = React.useCallback(() => content?.focus(), [content]);\n const itemTextRefCallback = React.useCallback(\n (node: SelectItemTextElement | null, value: string, disabled: boolean) => {\n const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;\n const isSelectedItem = context.value !== undefined && context.value === value;\n if (isSelectedItem || isFirstValidItem) {\n setSelectedItemText(node);\n }\n },\n [context.value]\n );\n\n const SelectPosition = position === 'popper' ? SelectPopperPosition : SelectItemAlignedPosition;\n\n // Silently ignore props that are not supported by `SelectItemAlignedPosition`\n const popperContentProps =\n SelectPosition === SelectPopperPosition\n ? {\n side,\n sideOffset,\n align,\n alignOffset,\n arrowPadding,\n collisionBoundary,\n collisionPadding,\n sticky,\n hideWhenDetached,\n avoidCollisions,\n }\n : {};\n\n return (\n \n \n {\n // we prevent open autofocus because we manually focus the selected item\n event.preventDefault();\n }}\n onUnmountAutoFocus={composeEventHandlers(onCloseAutoFocus, (event) => {\n context.trigger?.focus({ preventScroll: true });\n event.preventDefault();\n })}\n >\n event.preventDefault()}\n onDismiss={() => context.onOpenChange(false)}\n >\n event.preventDefault()}\n {...contentProps}\n {...popperContentProps}\n onPlaced={() => setIsPositioned(true)}\n ref={composedRefs}\n style={{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n ...contentProps.style,\n }}\n onKeyDown={composeEventHandlers(contentProps.onKeyDown, (event) => {\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n\n // select should not be navigated using tab key so we prevent it\n if (event.key === 'Tab') event.preventDefault();\n\n if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);\n\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const items = getItems().filter((item) => !item.disabled);\n let candidateNodes = items.map((item) => item.ref.current!);\n\n if (['ArrowUp', 'End'].includes(event.key)) {\n candidateNodes = candidateNodes.slice().reverse();\n }\n if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n const currentElement = event.target as SelectItemElement;\n const currentIndex = candidateNodes.indexOf(currentElement);\n candidateNodes = candidateNodes.slice(currentIndex + 1);\n }\n\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n\n event.preventDefault();\n }\n })}\n />\n \n \n \n \n );\n }\n);\n\nSelectContentImpl.displayName = CONTENT_IMPL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemAlignedPosition\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_ALIGNED_POSITION_NAME = 'SelectItemAlignedPosition';\n\ntype SelectItemAlignedPositionElement = React.ComponentRef;\ninterface SelectItemAlignedPositionProps extends PrimitiveDivProps, SelectPopperPrivateProps {}\n\nconst SelectItemAlignedPosition = React.forwardRef<\n SelectItemAlignedPositionElement,\n SelectItemAlignedPositionProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, onPlaced, ...popperProps } = props;\n const context = useSelectContext(CONTENT_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(CONTENT_NAME, __scopeSelect);\n const [contentWrapper, setContentWrapper] = React.useState(null);\n const [content, setContent] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n const getItems = useCollection(__scopeSelect);\n const shouldExpandOnScrollRef = React.useRef(false);\n const shouldRepositionRef = React.useRef(true);\n\n const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;\n const position = React.useCallback(() => {\n if (\n context.trigger &&\n context.valueNode &&\n contentWrapper &&\n content &&\n viewport &&\n selectedItem &&\n selectedItemText\n ) {\n const triggerRect = context.trigger.getBoundingClientRect();\n\n // -----------------------------------------------------------------------------------------\n // Horizontal positioning\n // -----------------------------------------------------------------------------------------\n const contentRect = content.getBoundingClientRect();\n const valueNodeRect = context.valueNode.getBoundingClientRect();\n const itemTextRect = selectedItemText.getBoundingClientRect();\n\n if (context.dir !== 'rtl') {\n const itemTextOffset = itemTextRect.left - contentRect.left;\n const left = valueNodeRect.left - itemTextOffset;\n const leftDelta = triggerRect.left - left;\n const minContentWidth = triggerRect.width + leftDelta;\n const contentWidth = Math.max(minContentWidth, contentRect.width);\n const rightEdge = window.innerWidth - CONTENT_MARGIN;\n const clampedLeft = clamp(left, [\n CONTENT_MARGIN,\n // Prevents the content from going off the starting edge of the\n // viewport. It may still go off the ending edge, but this can be\n // controlled by the user since they may want to manage overflow in a\n // specific way.\n // https://github.com/radix-ui/primitives/issues/2049\n Math.max(CONTENT_MARGIN, rightEdge - contentWidth),\n ]);\n\n contentWrapper.style.minWidth = minContentWidth + 'px';\n contentWrapper.style.left = clampedLeft + 'px';\n } else {\n const itemTextOffset = contentRect.right - itemTextRect.right;\n const right = window.innerWidth - valueNodeRect.right - itemTextOffset;\n const rightDelta = window.innerWidth - triggerRect.right - right;\n const minContentWidth = triggerRect.width + rightDelta;\n const contentWidth = Math.max(minContentWidth, contentRect.width);\n const leftEdge = window.innerWidth - CONTENT_MARGIN;\n const clampedRight = clamp(right, [\n CONTENT_MARGIN,\n Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n ]);\n\n contentWrapper.style.minWidth = minContentWidth + 'px';\n contentWrapper.style.right = clampedRight + 'px';\n }\n\n // -----------------------------------------------------------------------------------------\n // Vertical positioning\n // -----------------------------------------------------------------------------------------\n const items = getItems();\n const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;\n const itemsHeight = viewport.scrollHeight;\n\n const contentStyles = window.getComputedStyle(content);\n const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);\n const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);\n const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);\n const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);\n const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore\n const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);\n\n const viewportStyles = window.getComputedStyle(viewport);\n const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);\n const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);\n\n const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;\n const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;\n\n const selectedItemHalfHeight = selectedItem.offsetHeight / 2;\n const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;\n const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;\n const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;\n\n const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;\n\n if (willAlignWithoutTopOverflow) {\n const isLastItem =\n items.length > 0 && selectedItem === items[items.length - 1]!.ref.current;\n contentWrapper.style.bottom = 0 + 'px';\n const viewportOffsetBottom =\n content.clientHeight - viewport.offsetTop - viewport.offsetHeight;\n const clampedTriggerMiddleToBottomEdge = Math.max(\n triggerMiddleToBottomEdge,\n selectedItemHalfHeight +\n // viewport might have padding bottom, include it to avoid a scrollable viewport\n (isLastItem ? viewportPaddingBottom : 0) +\n viewportOffsetBottom +\n contentBorderBottomWidth\n );\n const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;\n contentWrapper.style.height = height + 'px';\n } else {\n const isFirstItem = items.length > 0 && selectedItem === items[0]!.ref.current;\n contentWrapper.style.top = 0 + 'px';\n const clampedTopEdgeToTriggerMiddle = Math.max(\n topEdgeToTriggerMiddle,\n contentBorderTopWidth +\n viewport.offsetTop +\n // viewport might have padding top, include it to avoid a scrollable viewport\n (isFirstItem ? viewportPaddingTop : 0) +\n selectedItemHalfHeight\n );\n const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;\n contentWrapper.style.height = height + 'px';\n viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;\n }\n\n contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;\n contentWrapper.style.minHeight = minContentHeight + 'px';\n contentWrapper.style.maxHeight = availableHeight + 'px';\n // -----------------------------------------------------------------------------------------\n\n onPlaced?.();\n\n // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n // so we explicitly turn it on only after they've registered.\n requestAnimationFrame(() => (shouldExpandOnScrollRef.current = true));\n }\n }, [\n getItems,\n context.trigger,\n context.valueNode,\n contentWrapper,\n content,\n viewport,\n selectedItem,\n selectedItemText,\n context.dir,\n onPlaced,\n ]);\n\n useLayoutEffect(() => position(), [position]);\n\n // copy z-index from content to wrapper\n const [contentZIndex, setContentZIndex] = React.useState();\n useLayoutEffect(() => {\n if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n }, [content]);\n\n // When the viewport becomes scrollable at the top, the scroll up button will mount.\n // Because it is part of the normal flow, it will push down the viewport, thus throwing our\n // trigger => selectedItem alignment off by the amount the viewport was pushed down.\n // We wait for this to happen and then re-run the positining logic one more time to account for it.\n const handleScrollButtonChange = React.useCallback(\n (node: SelectScrollButtonImplElement | null) => {\n if (node && shouldRepositionRef.current === true) {\n position();\n focusSelectedItem?.();\n shouldRepositionRef.current = false;\n }\n },\n [position, focusSelectedItem]\n );\n\n return (\n \n \n \n \n \n );\n});\n\nSelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectPopperPosition\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_POSITION_NAME = 'SelectPopperPosition';\n\ntype SelectPopperPositionElement = React.ComponentRef;\ntype PopperContentProps = React.ComponentPropsWithoutRef;\ninterface SelectPopperPositionProps extends PopperContentProps, SelectPopperPrivateProps {}\n\nconst SelectPopperPosition = React.forwardRef<\n SelectPopperPositionElement,\n SelectPopperPositionProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n __scopeSelect,\n align = 'start',\n collisionPadding = CONTENT_MARGIN,\n ...popperProps\n } = props;\n const popperScope = usePopperScope(__scopeSelect);\n\n return (\n \n );\n});\n\nSelectPopperPosition.displayName = POPPER_POSITION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\ntype SelectViewportContextValue = {\n contentWrapper?: HTMLDivElement | null;\n shouldExpandOnScrollRef?: React.RefObject;\n onScrollButtonChange?: (node: SelectScrollButtonImplElement | null) => void;\n};\n\nconst [SelectViewportProvider, useSelectViewportContext] =\n createSelectContext(CONTENT_NAME, {});\n\nconst VIEWPORT_NAME = 'SelectViewport';\n\ntype SelectViewportElement = React.ComponentRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface SelectViewportProps extends PrimitiveDivProps {\n nonce?: string;\n}\n\nconst SelectViewport = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, nonce, ...viewportProps } = props;\n const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);\n const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);\n const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);\n const prevScrollTopRef = React.useRef(0);\n return (\n <>\n {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n \n \n {\n const viewport = event.currentTarget;\n const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;\n if (shouldExpandOnScrollRef?.current && contentWrapper) {\n const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);\n if (scrolledBy > 0) {\n const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;\n const cssMinHeight = parseFloat(contentWrapper.style.minHeight);\n const cssHeight = parseFloat(contentWrapper.style.height);\n const prevHeight = Math.max(cssMinHeight, cssHeight);\n\n if (prevHeight < availableHeight) {\n const nextHeight = prevHeight + scrolledBy;\n const clampedNextHeight = Math.min(availableHeight, nextHeight);\n const heightDiff = nextHeight - clampedNextHeight;\n\n contentWrapper.style.height = clampedNextHeight + 'px';\n if (contentWrapper.style.bottom === '0px') {\n viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;\n // ensure the content stays pinned to the bottom\n contentWrapper.style.justifyContent = 'flex-end';\n }\n }\n }\n }\n prevScrollTopRef.current = viewport.scrollTop;\n })}\n />\n \n \n );\n }\n);\n\nSelectViewport.displayName = VIEWPORT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup';\n\ntype SelectGroupContextValue = { id: string };\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext(GROUP_NAME);\n\ntype SelectGroupElement = React.ComponentRef;\ninterface SelectGroupProps extends PrimitiveDivProps {}\n\nconst SelectGroup = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props;\n const groupId = useId();\n return (\n \n \n \n );\n }\n);\n\nSelectGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel';\n\ntype SelectLabelElement = React.ComponentRef;\ninterface SelectLabelProps extends PrimitiveDivProps {}\n\nconst SelectLabel = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props;\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);\n return ;\n }\n);\n\nSelectLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem';\n\ntype SelectItemContextValue = {\n value: string;\n disabled: boolean;\n textId: string;\n isSelected: boolean;\n onItemTextChange(node: SelectItemTextElement | null): void;\n};\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext(ITEM_NAME);\n\ntype SelectItemElement = React.ComponentRef;\ninterface SelectItemProps extends PrimitiveDivProps {\n value: string;\n disabled?: boolean;\n textValue?: string;\n}\n\nconst SelectItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n ...itemProps\n } = props;\n const context = useSelectContext(ITEM_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);\n const isSelected = context.value === value;\n const [textValue, setTextValue] = React.useState(textValueProp ?? '');\n const [isFocused, setIsFocused] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n contentContext.itemRefCallback?.(node, value, disabled)\n );\n const textId = useId();\n const pointerTypeRef = React.useRef('touch');\n\n const handleSelect = () => {\n if (!disabled) {\n context.onValueChange(value);\n context.onOpenChange(false);\n }\n };\n\n if (value === '') {\n throw new Error(\n '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.'\n );\n }\n\n return (\n {\n setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim());\n }, [])}\n >\n \n setIsFocused(true))}\n onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))}\n onClick={composeEventHandlers(itemProps.onClick, () => {\n // Open on click when using a touch or pen device\n if (pointerTypeRef.current !== 'mouse') handleSelect();\n })}\n onPointerUp={composeEventHandlers(itemProps.onPointerUp, () => {\n // Using a mouse you should be able to do pointer down, move through\n // the list, and release the pointer over the item to select it.\n if (pointerTypeRef.current === 'mouse') handleSelect();\n })}\n onPointerDown={composeEventHandlers(itemProps.onPointerDown, (event) => {\n pointerTypeRef.current = event.pointerType;\n })}\n onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {\n // Remember pointer type when sliding over to this item from another one\n pointerTypeRef.current = event.pointerType;\n if (disabled) {\n contentContext.onItemLeave?.();\n } else if (pointerTypeRef.current === 'mouse') {\n // even though safari doesn't support this option, it's acceptable\n // as it only means it might scroll a few pixels when using the pointer.\n event.currentTarget.focus({ preventScroll: true });\n }\n })}\n onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {\n if (event.currentTarget === document.activeElement) {\n contentContext.onItemLeave?.();\n }\n })}\n onKeyDown={composeEventHandlers(itemProps.onKeyDown, (event) => {\n const isTypingAhead = contentContext.searchRef?.current !== '';\n if (isTypingAhead && event.key === ' ') return;\n if (SELECTION_KEYS.includes(event.key)) handleSelect();\n // prevent page scroll if using the space key to select an item\n if (event.key === ' ') event.preventDefault();\n })}\n />\n \n \n );\n }\n);\n\nSelectItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText';\n\ntype SelectItemTextElement = React.ComponentRef;\ninterface SelectItemTextProps extends PrimitiveSpanProps {}\n\nconst SelectItemText = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const { __scopeSelect, className, style, ...itemTextProps } = props;\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);\n const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);\n const [itemTextNode, setItemTextNode] = React.useState(null);\n const composedRefs = useComposedRefs(\n forwardedRef,\n (node) => setItemTextNode(node),\n itemContext.onItemTextChange,\n (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)\n );\n\n const textContent = itemTextNode?.textContent;\n const nativeOption = React.useMemo(\n () => (\n \n ),\n [itemContext.disabled, itemContext.value, textContent]\n );\n\n const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;\n useLayoutEffect(() => {\n onNativeOptionAdd(nativeOption);\n return () => onNativeOptionRemove(nativeOption);\n }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);\n\n return (\n <>\n \n\n {/* Portal the select item text into the trigger value node */}\n {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode)\n : null}\n \n );\n }\n);\n\nSelectItemText.displayName = ITEM_TEXT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator';\n\ntype SelectItemIndicatorElement = React.ComponentRef;\ninterface SelectItemIndicatorProps extends PrimitiveSpanProps {}\n\nconst SelectItemIndicator = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props;\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);\n return itemContext.isSelected ? (\n \n ) : null;\n }\n);\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';\n\ntype SelectScrollUpButtonElement = SelectScrollButtonImplElement;\ninterface SelectScrollUpButtonProps extends Omit {}\n\nconst SelectScrollUpButton = React.forwardRef<\n SelectScrollUpButtonElement,\n SelectScrollUpButtonProps\n>((props: ScopedProps, forwardedRef) => {\n const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);\n const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);\n const [canScrollUp, setCanScrollUp] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);\n\n useLayoutEffect(() => {\n if (contentContext.viewport && contentContext.isPositioned) {\n const viewport = contentContext.viewport;\n function handleScroll() {\n const canScrollUp = viewport.scrollTop > 0;\n setCanScrollUp(canScrollUp);\n }\n handleScroll();\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n }, [contentContext.viewport, contentContext.isPositioned]);\n\n return canScrollUp ? (\n {\n const { viewport, selectedItem } = contentContext;\n if (viewport && selectedItem) {\n viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;\n }\n }}\n />\n ) : null;\n});\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';\n\ntype SelectScrollDownButtonElement = SelectScrollButtonImplElement;\ninterface SelectScrollDownButtonProps extends Omit {}\n\nconst SelectScrollDownButton = React.forwardRef<\n SelectScrollDownButtonElement,\n SelectScrollDownButtonProps\n>((props: ScopedProps, forwardedRef) => {\n const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);\n const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);\n const [canScrollDown, setCanScrollDown] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);\n\n useLayoutEffect(() => {\n if (contentContext.viewport && contentContext.isPositioned) {\n const viewport = contentContext.viewport;\n function handleScroll() {\n const maxScroll = viewport.scrollHeight - viewport.clientHeight;\n // we use Math.ceil here because if the UI is zoomed-in\n // `scrollTop` is not always reported as an integer\n const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;\n setCanScrollDown(canScrollDown);\n }\n handleScroll();\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n }, [contentContext.viewport, contentContext.isPositioned]);\n\n return canScrollDown ? (\n {\n const { viewport, selectedItem } = contentContext;\n if (viewport && selectedItem) {\n viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;\n }\n }}\n />\n ) : null;\n});\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;\n\ntype SelectScrollButtonImplElement = React.ComponentRef;\ninterface SelectScrollButtonImplProps extends PrimitiveDivProps {\n onAutoScroll(): void;\n}\n\nconst SelectScrollButtonImpl = React.forwardRef<\n SelectScrollButtonImplElement,\n SelectScrollButtonImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;\n const contentContext = useSelectContentContext('SelectScrollButton', __scopeSelect);\n const autoScrollTimerRef = React.useRef(null);\n const getItems = useCollection(__scopeSelect);\n\n const clearAutoScrollTimer = React.useCallback(() => {\n if (autoScrollTimerRef.current !== null) {\n window.clearInterval(autoScrollTimerRef.current);\n autoScrollTimerRef.current = null;\n }\n }, []);\n\n React.useEffect(() => {\n return () => clearAutoScrollTimer();\n }, [clearAutoScrollTimer]);\n\n // When the viewport becomes scrollable on either side, the relevant scroll button will mount.\n // Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)\n // the viewport, potentially causing the active item to now be partially out of view.\n // We re-run the `scrollIntoView` logic to make sure it stays within the viewport.\n useLayoutEffect(() => {\n const activeItem = getItems().find((item) => item.ref.current === document.activeElement);\n activeItem?.ref.current?.scrollIntoView({ block: 'nearest' });\n }, [getItems]);\n\n return (\n {\n if (autoScrollTimerRef.current === null) {\n autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);\n }\n })}\n onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {\n contentContext.onItemLeave?.();\n if (autoScrollTimerRef.current === null) {\n autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);\n }\n })}\n onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {\n clearAutoScrollTimer();\n })}\n />\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'SelectSeparator';\n\ntype SelectSeparatorElement = React.ComponentRef;\ninterface SelectSeparatorProps extends PrimitiveDivProps {}\n\nconst SelectSeparator = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...separatorProps } = props;\n return ;\n }\n);\n\nSelectSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'SelectArrow';\n\ntype SelectArrowElement = React.ComponentRef;\ntype PopperArrowProps = React.ComponentPropsWithoutRef;\ninterface SelectArrowProps extends PopperArrowProps {}\n\nconst SelectArrow = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...arrowProps } = props;\n const popperScope = usePopperScope(__scopeSelect);\n const context = useSelectContext(ARROW_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);\n return context.open && contentContext.position === 'popper' ? (\n \n ) : null;\n }\n);\n\nSelectArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SelectBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef;\ninterface SwitchBubbleInputProps extends InputProps {}\n\nconst SelectBubbleInput = React.forwardRef(\n ({ __scopeSelect, value, ...props }: ScopedProps, forwardedRef) => {\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const prevValue = usePrevious(value);\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const select = ref.current;\n if (!select) return;\n\n const selectProto = window.HTMLSelectElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(\n selectProto,\n 'value'\n ) as PropertyDescriptor;\n const setValue = descriptor.set;\n if (prevValue !== value && setValue) {\n const event = new Event('change', { bubbles: true });\n setValue.call(select, value);\n select.dispatchEvent(event);\n }\n }, [prevValue, value]);\n\n /**\n * We purposefully use a `select` here to support form autofill as much as\n * possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange`\n * event. Adding the `value` will cause React to consider the programmatic\n * dispatch a duplicate and it will get swallowed.\n *\n * We use visually hidden styles rather than `display: \"none\"` because\n * Safari autofill won't work otherwise.\n */\n return (\n \n );\n }\n);\n\nSelectBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction shouldShowPlaceholder(value?: string) {\n return value === '' || value === undefined;\n}\n\nfunction useTypeaheadSearch(onSearchChange: (search: string) => void) {\n const handleSearchChange = useCallbackRef(onSearchChange);\n const searchRef = React.useRef('');\n const timerRef = React.useRef(0);\n\n const handleTypeaheadSearch = React.useCallback(\n (key: string) => {\n const search = searchRef.current + key;\n handleSearchChange(search);\n\n (function updateSearch(value: string) {\n searchRef.current = value;\n window.clearTimeout(timerRef.current);\n // Reset `searchRef` 1 second after it was last updated\n if (value !== '') timerRef.current = window.setTimeout(() => updateSearch(''), 1000);\n })(search);\n },\n [handleSearchChange]\n );\n\n const resetTypeahead = React.useCallback(() => {\n searchRef.current = '';\n window.clearTimeout(timerRef.current);\n }, []);\n\n React.useEffect(() => {\n return () => window.clearTimeout(timerRef.current);\n }, []);\n\n return [searchRef, handleTypeaheadSearch, resetTypeahead] as const;\n}\n\n/**\n * This is the \"meat\" of the typeahead matching logic. It takes in a list of items,\n * the search and the current item, and returns the next item (or `undefined`).\n *\n * We normalize the search because if a user has repeatedly pressed a character,\n * we want the exact same behavior as if we only had that one character\n * (ie. cycle through items starting with that character)\n *\n * We also reorder the items by wrapping the array around the current item.\n * This is so we always look forward from the current item, and picking the first\n * item will always be the correct one.\n *\n * Finally, if the normalized search is exactly one character, we exclude the\n * current item from the values because otherwise it would be the first to match always\n * and focus would never move. This is as opposed to the regular case, where we\n * don't want focus to move if the current item still matches.\n */\nfunction findNextItem(\n items: T[],\n search: string,\n currentItem?: T\n) {\n const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);\n const normalizedSearch = isRepeated ? search[0]! : search;\n const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;\n let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0));\n const excludeCurrentItem = normalizedSearch.length === 1;\n if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);\n const nextItem = wrappedItems.find((item) =>\n item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase())\n );\n return nextItem !== currentItem ? nextItem : undefined;\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray(array: T[], startIndex: number) {\n return array.map((_, index) => array[(startIndex + index) % array.length]!);\n}\n\nconst Root = Select;\nconst Trigger = SelectTrigger;\nconst Value = SelectValue;\nconst Icon = SelectIcon;\nconst Portal = SelectPortal;\nconst Content = SelectContent;\nconst Viewport = SelectViewport;\nconst Group = SelectGroup;\nconst Label = SelectLabel;\nconst Item = SelectItem;\nconst ItemText = SelectItemText;\nconst ItemIndicator = SelectItemIndicator;\nconst ScrollUpButton = SelectScrollUpButton;\nconst ScrollDownButton = SelectScrollDownButton;\nconst Separator = SelectSeparator;\nconst Arrow = SelectArrow;\n\nexport {\n createSelectScope,\n //\n Select,\n SelectTrigger,\n SelectValue,\n SelectIcon,\n SelectPortal,\n SelectContent,\n SelectViewport,\n SelectGroup,\n SelectLabel,\n SelectItem,\n SelectItemText,\n SelectItemIndicator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n SelectSeparator,\n SelectArrow,\n //\n Root,\n Trigger,\n Value,\n Icon,\n Portal,\n Content,\n Viewport,\n Group,\n Label,\n Item,\n ItemText,\n ItemIndicator,\n ScrollUpButton,\n ScrollDownButton,\n Separator,\n Arrow,\n};\nexport type {\n SelectProps,\n SelectTriggerProps,\n SelectValueProps,\n SelectIconProps,\n SelectPortalProps,\n SelectContentProps,\n SelectViewportProps,\n SelectGroupProps,\n SelectLabelProps,\n SelectItemProps,\n SelectItemTextProps,\n SelectItemIndicatorProps,\n SelectScrollUpButtonProps,\n SelectScrollDownButtonProps,\n SelectSeparatorProps,\n SelectArrowProps,\n};\n", "import * as React from 'react';\nimport {\n useFloating,\n autoUpdate,\n offset,\n shift,\n limitShift,\n hide,\n arrow as floatingUIarrow,\n flip,\n size,\n} from '@floating-ui/react-dom';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useSize } from '@radix-ui/react-use-size';\n\nimport type { Placement, Middleware } from '@floating-ui/react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport type { Measurable } from '@radix-ui/rect';\n\nconst SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const;\nconst ALIGN_OPTIONS = ['start', 'center', 'end'] as const;\n\ntype Side = (typeof SIDE_OPTIONS)[number];\ntype Align = (typeof ALIGN_OPTIONS)[number];\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype ScopedProps

= P & { __scopePopper?: Scope };\nconst [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);\n\ntype PopperContextValue = {\n anchor: Measurable | null;\n onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);\n\ninterface PopperProps {\n children?: React.ReactNode;\n}\nconst Popper: React.FC = (props: ScopedProps) => {\n const { __scopePopper, children } = props;\n const [anchor, setAnchor] = React.useState(null);\n return (\n \n {children}\n \n );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorElement = React.ComponentRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface PopperAnchorProps extends PrimitiveDivProps {\n virtualRef?: React.RefObject;\n}\n\nconst PopperAnchor = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props;\n const context = usePopperContext(ANCHOR_NAME, __scopePopper);\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n const anchorRef = React.useRef(null);\n React.useEffect(() => {\n const previousAnchor = anchorRef.current;\n anchorRef.current = virtualRef?.current || ref.current;\n if (previousAnchor !== anchorRef.current) {\n // Consumer can anchor the popper to something that isn't\n // a DOM node e.g. pointer position, so we override the\n // `anchorRef` with their virtual ref in this case.\n context.onAnchorChange(anchorRef.current);\n }\n });\n\n return virtualRef ? null : ;\n }\n);\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n placedSide: Side;\n onArrowChange(arrow: HTMLSpanElement | null): void;\n arrowX?: number;\n arrowY?: number;\n shouldHideArrow: boolean;\n};\n\nconst [PopperContentProvider, useContentContext] =\n createPopperContext(CONTENT_NAME);\n\ntype Boundary = Element | null;\n\ntype PopperContentElement = React.ComponentRef;\ninterface PopperContentProps extends PrimitiveDivProps {\n side?: Side;\n sideOffset?: number;\n align?: Align;\n alignOffset?: number;\n arrowPadding?: number;\n avoidCollisions?: boolean;\n collisionBoundary?: Boundary | Boundary[];\n collisionPadding?: number | Partial>;\n sticky?: 'partial' | 'always';\n hideWhenDetached?: boolean;\n updatePositionStrategy?: 'optimized' | 'always';\n onPlaced?: () => void;\n}\n\nconst PopperContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopePopper,\n side = 'bottom',\n sideOffset = 0,\n align = 'center',\n alignOffset = 0,\n arrowPadding = 0,\n avoidCollisions = true,\n collisionBoundary = [],\n collisionPadding: collisionPaddingProp = 0,\n sticky = 'partial',\n hideWhenDetached = false,\n updatePositionStrategy = 'optimized',\n onPlaced,\n ...contentProps\n } = props;\n\n const context = usePopperContext(CONTENT_NAME, __scopePopper);\n\n const [content, setContent] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n const [arrow, setArrow] = React.useState(null);\n const arrowSize = useSize(arrow);\n const arrowWidth = arrowSize?.width ?? 0;\n const arrowHeight = arrowSize?.height ?? 0;\n\n const desiredPlacement = (side + (align !== 'center' ? '-' + align : '')) as Placement;\n\n const collisionPadding =\n typeof collisionPaddingProp === 'number'\n ? collisionPaddingProp\n : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };\n\n const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];\n const hasExplicitBoundaries = boundary.length > 0;\n\n const detectOverflowOptions = {\n padding: collisionPadding,\n boundary: boundary.filter(isNotNull),\n // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries\n altBoundary: hasExplicitBoundaries,\n };\n\n const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({\n // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues\n strategy: 'fixed',\n placement: desiredPlacement,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, {\n animationFrame: updatePositionStrategy === 'always',\n });\n return cleanup;\n },\n elements: {\n reference: context.anchor,\n },\n middleware: [\n offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),\n avoidCollisions &&\n shift({\n mainAxis: true,\n crossAxis: false,\n limiter: sticky === 'partial' ? limitShift() : undefined,\n ...detectOverflowOptions,\n }),\n avoidCollisions && flip({ ...detectOverflowOptions }),\n size({\n ...detectOverflowOptions,\n apply: ({ elements, rects, availableWidth, availableHeight }) => {\n const { width: anchorWidth, height: anchorHeight } = rects.reference;\n const contentStyle = elements.floating.style;\n contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);\n contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);\n contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);\n contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);\n },\n }),\n arrow && floatingUIarrow({ element: arrow, padding: arrowPadding }),\n transformOrigin({ arrowWidth, arrowHeight }),\n hideWhenDetached && hide({ strategy: 'referenceHidden', ...detectOverflowOptions }),\n ],\n });\n\n const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n\n const handlePlaced = useCallbackRef(onPlaced);\n useLayoutEffect(() => {\n if (isPositioned) {\n handlePlaced?.();\n }\n }, [isPositioned, handlePlaced]);\n\n const arrowX = middlewareData.arrow?.x;\n const arrowY = middlewareData.arrow?.y;\n const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n\n const [contentZIndex, setContentZIndex] = React.useState();\n useLayoutEffect(() => {\n if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n }, [content]);\n\n return (\n