UNPKG

@react-spectrum/s2

Version:
986 lines (961 loc) 42.3 kB
import "./ComboBox.css"; import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs"; import {checkmark as $13afb0ea5f0ed767$export$292abbf31ed842a, description as $13afb0ea5f0ed767$export$6d59db4903f20f7d, icon as $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27, iconCenterWrapper as $13afb0ea5f0ed767$export$31d1842a0fd736e6, label as $13afb0ea5f0ed767$export$1237798dc640739a, sectionHeading as $13afb0ea5f0ed767$export$300ac6f106ef584d} from "./Menu.mjs"; import $81cf3d4588736e7d$export$2e2bcd8739ae039 from "./Checkmark.mjs"; import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs"; import {FieldErrorIcon as $9afd80978c252040$export$bda0d075e0e342c9, FieldGroup as $9afd80978c252040$export$f0fe469072bc6950, FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414, HelpText as $9afd80978c252040$export$a67c0bc59081311a, Input as $9afd80978c252040$export$f5b8910cec6cf069} from "./Field.mjs"; import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs"; import {HeaderContext as $8e847109a6ab556d$export$e0e4026c12a8bdbb, HeadingContext as $8e847109a6ab556d$export$d688439359537581, Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs"; import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs"; import $5rXoR$intlStringsmjs from "./intlStrings.mjs"; import {PopoverBase as $88b746eba92c8d0d$export$fde1b04c590741a3} from "./Popover.mjs"; import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs"; import {ProgressCircle as $41ddd91dbbf0c389$export$c79b9d6b4cc92af7} from "./ProgressCircle.mjs"; import {useScale as $859432f3b3573fcb$export$a8d2043b2d807f4d} from "./utils.mjs"; import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs"; import {jsx as $5rXoR$jsx, Fragment as $5rXoR$Fragment, jsxs as $5rXoR$jsxs} from "react/jsx-runtime"; import {ComboBox as $5rXoR$ComboBox, ListBoxItem as $5rXoR$ListBoxItem, Provider as $5rXoR$Provider, ListBoxSection as $5rXoR$ListBoxSection, ComboBoxStateContext as $5rXoR$ComboBoxStateContext, UNSTABLE_ListBoxLoadingSentinel as $5rXoR$UNSTABLE_ListBoxLoadingSentinel, Collection as $5rXoR$Collection, InputContext as $5rXoR$InputContext, Button as $5rXoR$Button, Virtualizer as $5rXoR$Virtualizer, ListLayout as $5rXoR$ListLayout, ListBox as $5rXoR$ListBox, ListStateContext as $5rXoR$ListStateContext} from "react-aria-components"; import {createContext as $5rXoR$createContext, forwardRef as $5rXoR$forwardRef, useContext as $5rXoR$useContext, useRef as $5rXoR$useRef, useImperativeHandle as $5rXoR$useImperativeHandle, useState as $5rXoR$useState, useCallback as $5rXoR$useCallback, useMemo as $5rXoR$useMemo, useEffect as $5rXoR$useEffect} from "react"; import {createFocusableRef as $5rXoR$createFocusableRef} from "@react-spectrum/utils"; import {createLeafComponent as $5rXoR$createLeafComponent} from "@react-aria/collections"; import {useResizeObserver as $5rXoR$useResizeObserver, useSlotId as $5rXoR$useSlotId, mergeRefs as $5rXoR$mergeRefs} from "@react-aria/utils"; import {useLocalizedStringFormatter as $5rXoR$useLocalizedStringFormatter} from "@react-aria/i18n"; function $parcel$interopDefault(a) { return a && a.__esModule ? a.default : a; } /* * Copyright 2024 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ const $a2f262fac286a920$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $5rXoR$createContext)(null); const $a2f262fac286a920$var$inputButton = function anonymous(props) { let rules = " "; if (props.size === "XL") rules += ' -SFnbic-_JaP8ec91'; else if (props.size === "L") rules += ' -SFnbic-_J0K2hn91'; else if (props.size === "S") rules += ' -SFnbic-_JJOW22b91'; else if (props.size === "XS") rules += ' -SFnbic-_JICefdd91'; else rules += ' -SFnbic-_Jb91'; rules += ' -Bu7z1c-oa91'; rules += ' oj91'; rules += ' nj91'; rules += ' kj91'; rules += ' jj91'; rules += ' sd91'; rules += ' _Le91'; rules += ' _Wa91'; rules += ' _je91'; rules += ' eb91'; rules += ' _Ca91'; if (props.size === "XL") rules += ' ZC91'; else if (props.size === "L") rules += ' Zo91'; else if (props.size === "M") rules += ' Zm91'; else if (props.size === "S") rules += ' Zu91'; if (props.size === "XL") rules += ' Fx91'; else if (props.size === "L") rules += ' Fp91'; else if (props.size === "M") rules += ' Fn91'; else if (props.size === "S") rules += ' Ft91'; rules += ' Iw91'; rules += ' fa91'; rules += ' _va91'; rules += ' Yd91'; rules += ' Yle91'; rules += ' Xb91'; rules += ' Xlb91'; rules += ' _2b91'; rules += ' _2lb91'; if (props.isDisabled) rules += ' gH91'; else if (props.isOpen) rules += ' gF91'; else { if (props.isPressed) rules += ' gF91'; else if (props.isFocusVisible) rules += ' gF91'; else if (props.isHovered) rules += ' gF91'; else rules += ' gH91'; } if (props.isDisabled) rules += ' gld91'; else if (props.isOpen) rules += ' gle91'; else if (props.isHovered) rules += ' gle91'; else rules += ' glc91'; if (props.isDisabled) rules += ' pp91'; else { if (props.isPressed) rules += ' po91'; else if (props.isFocusVisible) rules += ' po91'; else if (props.isHovered) rules += ' po91'; else rules += ' pt91'; } rules += ' pla91'; return rules; }; const $a2f262fac286a920$var$iconStyles = " _va91 _Sd91 -_8sjo0b-t5ZbAob91"; const $a2f262fac286a920$var$loadingWrapperStyles = " z2mU91 yzZKy91 sd91 eb91 _Ca91 Jv91 Gv91"; const $a2f262fac286a920$var$progressCircleStyles = function anonymous(props) { let rules = " "; if (props.size === "XL") rules += ' Zp91'; else if (props.size === "L") rules += ' Zn91'; else if (props.size === "M") rules += ' Zm91'; else if (props.size === "S") rules += ' Zu91'; if (props.size === "XL") rules += ' Fq91'; else if (props.size === "L") rules += ' Fo91'; else if (props.size === "M") rules += ' Fn91'; else if (props.size === "S") rules += ' Ft91'; if (props.isInput) { rules += ' It91'; rules += ' Isu91'; } return rules; }; const $a2f262fac286a920$var$emptyStateText = function anonymous(props) { let rules = " "; rules += ' FRuFGYc91'; if (props.size === "XL") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else if (props.size === "L") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else if (props.size === "M") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else if (props.size === "S") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } if (props.size === "XL") { rules += ' vg91'; rules += ' vsj91'; } else if (props.size === "L") { rules += ' vp91'; rules += ' vsh91'; } else if (props.size === "M") { rules += ' vd91'; rules += ' vsf91'; } else if (props.size === "S") { rules += ' vb91'; rules += ' vse91'; } if (props.size === "XL") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else if (props.size === "L") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else if (props.size === "M") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else if (props.size === "S") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } if (props.size === "XL") { rules += ' _Fa91'; rules += ' _Ffb91'; } else if (props.size === "L") { rules += ' _Fa91'; rules += ' _Ffb91'; } else if (props.size === "M") { rules += ' _Fa91'; rules += ' _Ffb91'; } else if (props.size === "S") { rules += ' _Fa91'; rules += ' _Ffb91'; } if (props.size === "XL") rules += ' pt91'; else if (props.size === "L") rules += ' pt91'; else if (props.size === "M") rules += ' pt91'; else if (props.size === "S") rules += ' pt91'; rules += ' sd91'; rules += ' eb91'; rules += ' Sv91'; if (props.size === "XL") rules += ' -F_-Fz91'; else if (props.size === "L") rules += ' -F_-Fv91'; else if (props.size === "M") rules += ' -F_-Fx91'; else if (props.size === "S") rules += ' -F_-Fp91'; return rules; }; let $a2f262fac286a920$export$9901d82449b93cea = function anonymous(props) { let rules = " "; rules += ' Za91'; rules += ' _oa91'; rules += ' K40ub4c91'; rules += ' Pa91'; rules += ' _Nc91'; rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; if (props.size === "XL") { rules += ' vg91'; rules += ' vsj91'; } else if (props.size === "L") { rules += ' vp91'; rules += ' vsh91'; } else if (props.size === "S") { rules += ' vb91'; rules += ' vse91'; } else if (props.size === "XS") { rules += ' va91'; rules += ' vsc91'; } else { rules += ' vd91'; rules += ' vsf91'; } return rules; }; let $a2f262fac286a920$export$68265fb354482bae = function anonymous(props, overrides) { let rules = " "; let minWidth = false; let position = false; let gridColumnStart = false; let gridColumnEnd = false; let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g); for (let p of matches){ if (p[1] === "N") minWidth = true; if (p[1] === "_P") position = true; if (p[1] === "z") gridColumnStart = true; if (p[1] === "y") gridColumnEnd = true; rules += p[0]; } if (props.isFocusVisible) rules += ' _Lf91'; else rules += ' _Le91'; rules += ' Oh91'; rules += ' _Mc91'; rules += ' _Kd91'; if (props.size === "XL") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else if (props.size === "L") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else if (props.size === "S") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else if (props.size === "XS") { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } else { rules += ' ug91'; rules += ' uch91'; rules += ' udi91'; rules += ' uea91'; rules += ' ugb91'; rules += ' uhd91'; rules += ' uje91'; rules += ' uic91'; } if (props.size === "XL") { rules += ' vg91'; rules += ' vsj91'; } else if (props.size === "L") { rules += ' vp91'; rules += ' vsh91'; } else if (props.size === "S") { rules += ' vb91'; rules += ' vse91'; } else if (props.size === "XS") { rules += ' va91'; rules += ' vsc91'; } else { rules += ' vd91'; rules += ' vsf91'; } if (props.size === "XL") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else if (props.size === "L") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else if (props.size === "S") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else if (props.size === "XS") { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } else { rules += ' wb91'; rules += ' xb91'; rules += ' _xa91'; } if (props.size === "XL") { rules += ' _Fa91'; rules += ' _Ffb91'; } else if (props.size === "L") { rules += ' _Fa91'; rules += ' _Ffb91'; } else if (props.size === "S") { rules += ' _Fa91'; rules += ' _Ffb91'; } else if (props.size === "XS") { rules += ' _Fa91'; rules += ' _Ffb91'; } else { rules += ' _Fa91'; rules += ' _Ffb91'; } if (props.isDisabled) { rules += ' pp91'; rules += ' plc91'; } else { if (props.isPressed) rules += ' po91'; else if (props.isFocusVisible) rules += ' po91'; else if (props.isHovered) rules += ' po91'; else rules += ' pt91'; } rules += ' se91'; rules += ' ea91'; rules += ' _oa91'; rules += ' Sd91'; rules += ' Rd91'; if (props.size === "XL") { if (!minWidth) rules += ' Nl91'; } else if (props.size === "L") { if (!minWidth) rules += ' Nj91'; } else if (props.size === "S") { if (!minWidth) rules += ' Nf91'; } else if (props.size === "XS") { if (!minWidth) rules += ' Ne91'; } else if (!minWidth) rules += ' Nk91'; if (props.size === "XL") rules += ' -SFnbic-_JaP8ec91'; else if (props.size === "L") rules += ' -SFnbic-_J0K2hn91'; else if (props.size === "S") rules += ' -SFnbic-_JJOW22b91'; else if (props.size === "XS") rules += ' -SFnbic-_JICefdd91'; else rules += ' -SFnbic-_Jb91'; rules += ' -Bu7z1c-ob91'; rules += ' oj91'; rules += ' nj91'; rules += ' kj91'; rules += ' jj91'; rules += ' qh91'; rules += ' -Qg41Lb-IAxCW0c91'; rules += ' -Qg41Lb-gLWx3bIy91'; rules += ' MAyFGYc91'; rules += ' Td91'; rules += ' QAzEcG91'; rules += ' -aRvJDd-Tu7Fubd91'; if (props.isFocused) rules += ' gF91'; else rules += ' g991'; if (!position) rules += ' _Pc91'; if (!gridColumnStart) rules += ' z2mU91'; if (!gridColumnEnd) rules += ' yzZKy91'; rules += ' CHV1uCd91'; if (props.size === "XL") rules += ' DTw5ujc91'; else if (props.size === "L") rules += ' DdpPw491'; else if (props.size === "M") rules += ' Dxy3qDe91'; else if (props.size === "S") rules += ' DfLJE091'; rules += ' EpvfBwb91'; rules += ' EDNKd2dZQmDFe91'; rules += ' UDNKd2dai5a091'; rules += ' FF91'; rules += ' _Xa91'; if (props.isLink) rules += ' ry91'; else rules += ' ri91'; rules += ' Yd91'; rules += ' Xb91'; rules += ' _2b91'; if (props.size === "XL") rules += ' -M_-Mk91'; else if (props.size === "L") rules += ' -M_-Mh91'; else if (props.size === "S") rules += ' -M_-Mg91'; else if (props.size === "XS") rules += ' -M_-Mf91'; else rules += ' -M_-Mi91'; return rules; }; let $a2f262fac286a920$export$c040ba7a724e8da1 = function anonymous(props) { let rules = " "; rules += ' pt91'; rules += ' _oa91'; rules += ' MAyFGYc91'; rules += ' Tu7Fubd91'; rules += ' Qu7Fubd91'; if (props.size === "XL") rules += ' I2d3n91'; else if (props.size === "L") rules += ' IaxPIqb91'; else if (props.size === "M") rules += ' Ip2UVod91'; else if (props.size === "S") rules += ' IH8XZ7c91'; if (props.size === "XL") rules += ' H2d3n91'; else if (props.size === "L") rules += ' HaxPIqb91'; else if (props.size === "M") rules += ' Hp2UVod91'; else if (props.size === "S") rules += ' HH8XZ7c91'; if (props.size === "XL") rules += ' -M_-Mk91'; else if (props.size === "L") rules += ' -M_-Mh91'; else if (props.size === "S") rules += ' -M_-Mg91'; else if (props.size === "XS") rules += ' -M_-Mf91'; else rules += ' -M_-Mi91'; return rules; }; const $a2f262fac286a920$var$separatorWrapper = function anonymous(props) { let rules = " "; rules += ' sd91'; if (props.size === "XL") rules += ' I2d3n91'; else if (props.size === "L") rules += ' IaxPIqb91'; else if (props.size === "M") rules += ' Ip2UVod91'; else if (props.size === "S") rules += ' IH8XZ7c91'; if (props.size === "XL") rules += ' H2d3n91'; else if (props.size === "L") rules += ' HaxPIqb91'; else if (props.size === "M") rules += ' Hp2UVod91'; else if (props.size === "S") rules += ' HH8XZ7c91'; rules += ' Fk91'; rules += ' eb91'; return rules; }; const $a2f262fac286a920$var$dividerStyle = " gF91 gl_a91 og91 ng91 kg91 jg91 FLvNfn91 Za91"; const $a2f262fac286a920$export$83379f5245567d78 = { S: { medium: 24, large: 30 }, M: { medium: 32, large: 40 }, L: { medium: 40, large: 50 }, XL: { medium: 48, large: 60 } }; let $a2f262fac286a920$var$InternalComboboxContext = /*#__PURE__*/ (0, $5rXoR$createContext)({ size: 'M' }); const $a2f262fac286a920$export$72b9695b8216309a = /*#__PURE__*/ (0, $5rXoR$forwardRef)(function ComboBox(props1, ref) { [props1, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props1, ref, $a2f262fac286a920$export$d414ccceff7063c3); let formContext = (0, $5rXoR$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a)); props1 = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props1); let { size: size = 'M', labelPosition: labelPosition = 'top', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, loadingState: loadingState, ...comboBoxProps } = props1; return /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$ComboBox), { ...comboBoxProps, allowsEmptyCollection: loadingState != null, style: UNSAFE_style, className: UNSAFE_className + function anonymous(props, overrides) { let rules = " "; let gridColumnStart = false; let gridColumnEnd = false; let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g); for (let p of matches){ if (p[1] === "z") gridColumnStart = true; if (p[1] === "y") gridColumnEnd = true; rules += p[0]; } rules += ' se91'; if (props.isInForm) { if (!gridColumnStart) rules += ' z2mU91'; } if (props.isInForm) { if (props.labelPosition === "side") { if (!gridColumnEnd) rules += ' yvoofG91'; } } if (props.isInForm) rules += ' DLwlgod91'; else { if (props.labelPosition === "side") rules += ' DPlN5qb91'; else if (props.labelPosition === "top") rules += ' DM8Mfn91'; } if (props.labelPosition === "side") rules += ' EPlN5qb91'; else if (props.labelPosition === "top") rules += ' E4w1sLc91'; if (props.labelPosition === "side") rules += ' CbRM95c91'; else if (props.labelPosition === "top") rules += ' Cxaocre91'; if (props.size === "XL") { rules += ' vg91'; rules += ' vsj91'; } else if (props.size === "L") { rules += ' vp91'; rules += ' vsh91'; } else if (props.size === "S") { rules += ' vb91'; rules += ' vse91'; } else if (props.size === "XS") { rules += ' va91'; rules += ' vsc91'; } else { rules += ' vd91'; rules += ' vsf91'; } rules += ' ea91'; rules += ' _Fa91'; rules += ' _Ffb91'; if (props.size === "XL") rules += ' -BhX7R-Fz91'; else if (props.size === "L") rules += ' -BhX7R-Fv91'; else if (props.size === "S") rules += ' -BhX7R-Fp91'; else if (props.size === "XS") rules += ' -BhX7R-Fn91'; else rules += ' -BhX7R-Fx91'; rules += ' -AJjOLd-UVkF0Db91'; rules += ' qg91'; rules += ' __ca91'; return rules; }({ isInForm: !!formContext, labelPosition: labelPosition, size: size }, props1.styles), children: ({ isDisabled: isDisabled, isOpen: isOpen, isRequired: isRequired, isInvalid: isInvalid })=>/*#__PURE__*/ (0, $5rXoR$jsx)($a2f262fac286a920$var$ComboboxInner, { ...props1, isDisabled: isDisabled, isOpen: isOpen, isRequired: isRequired, isInvalid: isInvalid, ref: ref }) }); }); const $a2f262fac286a920$var$checkmarkIconSize = { S: 'XS', M: 'M', L: 'L', XL: 'XL' }; function $a2f262fac286a920$export$b674b8ff01584ab1(props) { let ref = (0, $5rXoR$useRef)(null); let isLink = props.href != null; let { size: size } = (0, $5rXoR$useContext)($a2f262fac286a920$var$InternalComboboxContext); return /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$ListBoxItem), { ...props, ref: ref, textValue: props.textValue || (typeof props.children === 'string' ? props.children : undefined), style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(ref, props.UNSAFE_style), className: (renderProps)=>(props.UNSAFE_className || '') + $a2f262fac286a920$export$68265fb354482bae({ ...renderProps, size: size, isLink: isLink }, props.styles), children: (renderProps)=>{ let { children: children } = props; return /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Fragment), { children: /*#__PURE__*/ (0, $5rXoR$jsxs)((0, $5rXoR$Provider), { values: [ [ (0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed), { slots: { icon: { render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({ slot: 'icon', styles: (0, $13afb0ea5f0ed767$export$31d1842a0fd736e6) }), styles: (0, $13afb0ea5f0ed767$export$1ca1ec8b29a4ce27) } } } ], [ (0, $8e847109a6ab556d$export$9afb8bc826b033ea), { slots: { label: { styles: (0, $13afb0ea5f0ed767$export$1237798dc640739a)({ size: size }) }, description: { styles: (0, $13afb0ea5f0ed767$export$6d59db4903f20f7d)({ ...renderProps, size: size }) } } } ] ], children: [ !isLink && /*#__PURE__*/ (0, $5rXoR$jsx)((0, $81cf3d4588736e7d$export$2e2bcd8739ae039), { size: $a2f262fac286a920$var$checkmarkIconSize[size], className: (0, $13afb0ea5f0ed767$export$292abbf31ed842a)({ ...renderProps, size: size }) }), typeof children === 'string' ? /*#__PURE__*/ (0, $5rXoR$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), { slot: "label", children: children }) : children ] }) }); } }); } function $a2f262fac286a920$export$5510125537491b61(props) { let { size: size } = (0, $5rXoR$useContext)($a2f262fac286a920$var$InternalComboboxContext); return /*#__PURE__*/ (0, $5rXoR$jsxs)((0, $5rXoR$Fragment), { children: [ /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$ListBoxSection), { ...props, children: props.children }), /*#__PURE__*/ (0, $5rXoR$jsx)($a2f262fac286a920$export$2e0a83ec2e27ecbb, { size: size }) ] }); } const $a2f262fac286a920$var$ComboboxInner = /*#__PURE__*/ (0, $5rXoR$forwardRef)(function ComboboxInner(props1, ref) { let { direction: direction = 'bottom', align: align = 'start', shouldFlip: shouldFlip = true, menuWidth: menuWidth, label: label, description: descriptionMessage, errorMessage: errorMessage, children: children, defaultItems: defaultItems, items: items, size: size = 'M', labelPosition: labelPosition = 'top', labelAlign: labelAlign = 'start', necessityIndicator: necessityIndicator, loadingState: loadingState, isDisabled: isDisabled, isOpen: isOpen, isRequired: isRequired, isInvalid: isInvalid, menuTrigger: menuTrigger, onLoadMore: onLoadMore } = props1; let stringFormatter = (0, $5rXoR$useLocalizedStringFormatter)((0, ($parcel$interopDefault($5rXoR$intlStringsmjs))), '@react-spectrum/s2'); let inputRef = (0, $5rXoR$useRef)(null); let domRef = (0, $5rXoR$useRef)(null); let buttonRef = (0, $5rXoR$useRef)(null); // Expose imperative interface for ref (0, $5rXoR$useImperativeHandle)(ref, ()=>({ ...(0, $5rXoR$createFocusableRef)(domRef, inputRef), select () { if (inputRef.current) inputRef.current.select(); }, getInputElement () { return inputRef.current; } })); // Better way to encode this into a style? need to account for flipping let menuOffset; if (size === 'S') menuOffset = 6; else if (size === 'M') menuOffset = 6; else if (size === 'L') menuOffset = 7; else menuOffset = 8; let triggerRef = (0, $5rXoR$useRef)(null); // Make menu width match input + button let [triggerWidth, setTriggerWidth] = (0, $5rXoR$useState)(null); let onResize = (0, $5rXoR$useCallback)(()=>{ if (triggerRef.current) { let inputRect = triggerRef.current.getBoundingClientRect(); let minX = inputRect.left; let maxX = inputRect.right; setTriggerWidth(maxX - minX + 'px'); } }, [ triggerRef, setTriggerWidth ]); (0, $5rXoR$useResizeObserver)({ ref: triggerRef, onResize: onResize }); let state = (0, $5rXoR$useContext)((0, $5rXoR$ComboBoxStateContext)); let timeout = (0, $5rXoR$useRef)(null); let [showLoading, setShowLoading] = (0, $5rXoR$useState)(false); let isLoadingOrFiltering = loadingState === 'loading' || loadingState === 'filtering'; let showFieldSpinner = (0, $5rXoR$useMemo)(()=>showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading'), [ showLoading, isOpen, menuTrigger, loadingState ]); let spinnerId = (0, $5rXoR$useSlotId)([ showFieldSpinner ]); let inputValue = state?.inputValue; let lastInputValue = (0, $5rXoR$useRef)(inputValue); (0, $5rXoR$useEffect)(()=>{ if (isLoadingOrFiltering && !showLoading) { if (timeout.current === null) timeout.current = setTimeout(()=>{ setShowLoading(true); }, 500); // If user is typing, clear the timer and restart since it is a new request if (inputValue !== lastInputValue.current) { clearTimeout(timeout.current); timeout.current = setTimeout(()=>{ setShowLoading(true); }, 500); } } else if (!isLoadingOrFiltering) { // If loading is no longer happening, clear any timers and hide the loading circle setShowLoading(false); if (timeout.current) clearTimeout(timeout.current); timeout.current = null; } lastInputValue.current = inputValue; }, [ isLoadingOrFiltering, showLoading, inputValue ]); (0, $5rXoR$useEffect)(()=>{ return ()=>{ if (timeout.current) clearTimeout(timeout.current); timeout.current = null; }; }, []); let renderer; let listBoxLoadingCircle = /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$UNSTABLE_ListBoxLoadingSentinel), { // Only show the spinner in the list when loading more isLoading: loadingState === 'loadingMore', onLoadMore: onLoadMore, className: $a2f262fac286a920$var$loadingWrapperStyles, children: /*#__PURE__*/ (0, $5rXoR$jsx)((0, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7), { isIndeterminate: true, size: "S", styles: $a2f262fac286a920$var$progressCircleStyles({ size: size }), // Same loading string as table "aria-label": stringFormatter.format('table.loadingMore') }) }); if (typeof children === 'function') renderer = /*#__PURE__*/ (0, $5rXoR$jsxs)((0, $5rXoR$Fragment), { children: [ /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Collection), { items: items ?? defaultItems, dependencies: props1.dependencies, children: children }), listBoxLoadingCircle ] }); else // TODO: is there a case where the user might provide items to the Combobox but doesn't provide a function renderer? // Same case for other components that have this logic (TableView/CardView/Picker) renderer = /*#__PURE__*/ (0, $5rXoR$jsxs)((0, $5rXoR$Fragment), { children: [ children, listBoxLoadingCircle ] }); let scale = (0, $859432f3b3573fcb$export$a8d2043b2d807f4d)(); return /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Fragment), { children: /*#__PURE__*/ (0, $5rXoR$jsxs)($a2f262fac286a920$var$InternalComboboxContext.Provider, { value: { size: size }, children: [ /*#__PURE__*/ (0, $5rXoR$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), { isDisabled: isDisabled, isRequired: isRequired, size: size, labelPosition: labelPosition, labelAlign: labelAlign, necessityIndicator: necessityIndicator, contextualHelp: props1.contextualHelp, children: label }), /*#__PURE__*/ (0, $5rXoR$jsxs)((0, $9afd80978c252040$export$f0fe469072bc6950), { ref: triggerRef, role: "presentation", isDisabled: isDisabled, isInvalid: isInvalid, size: size, styles: function anonymous(props) { let rules = " "; rules += ' zXcEWr91'; rules += ' yXcEWr91'; rules += ' BXcEWr91'; rules += ' AXcEWr91'; if (props.size === "XL") rules += ' Nl91'; else if (props.size === "L") rules += ' Nj91'; else if (props.size === "S") rules += ' Nf91'; else if (props.size === "XS") rules += ' Ne91'; else rules += ' Nk91'; if (props.isQuiet) rules += ' _qd91'; else rules += ' _qtb91'; if (props.size === "XL") rules += ' -Anxdcc-Zt91'; else if (props.size === "L") rules += ' -Anxdcc-ZStdtne91'; else if (props.size === "S") rules += ' -Anxdcc-Zr91'; else rules += ' -Anxdcc-Z3fn9H91'; rules += ' __v6TNLWb91'; rules += ' SMBFGYc91'; rules += ' RfBFGYc91'; rules += ' -S_-Sv91'; rules += ' -R_-Rjxyh891'; return rules; }({ size: size }), children: [ /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$InputContext).Consumer, { children: (ctx)=>/*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$InputContext).Provider, { value: { ...ctx, ref: (0, $5rXoR$mergeRefs)(ctx?.ref, inputRef) }, children: /*#__PURE__*/ (0, $5rXoR$jsx)((0, $9afd80978c252040$export$f5b8910cec6cf069), { "aria-describedby": spinnerId }) }) }), isInvalid && /*#__PURE__*/ (0, $5rXoR$jsx)((0, $9afd80978c252040$export$bda0d075e0e342c9), { isDisabled: isDisabled }), showFieldSpinner && /*#__PURE__*/ (0, $5rXoR$jsx)((0, $41ddd91dbbf0c389$export$c79b9d6b4cc92af7), { id: spinnerId, isIndeterminate: true, size: "S", styles: $a2f262fac286a920$var$progressCircleStyles({ size: size, isInput: true }), "aria-label": stringFormatter.format('table.loading') }), /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Button), { ref: buttonRef, // Prevent press scale from sticking while ComboBox is open. // @ts-ignore isPressed: false, style: (renderProps)=>(0, $10ea7662e51a285b$export$56e8cba416805d8d)(buttonRef)(renderProps), className: (renderProps)=>$a2f262fac286a920$var$inputButton({ ...renderProps, size: size, isOpen: isOpen }), children: /*#__PURE__*/ (0, $5rXoR$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), { size: size, className: $a2f262fac286a920$var$iconStyles }) }) ] }), /*#__PURE__*/ (0, $5rXoR$jsx)((0, $9afd80978c252040$export$a67c0bc59081311a), { size: size, isDisabled: isDisabled, isInvalid: isInvalid, description: descriptionMessage, children: errorMessage }), /*#__PURE__*/ (0, $5rXoR$jsx)((0, $88b746eba92c8d0d$export$fde1b04c590741a3), { hideArrow: true, triggerRef: triggerRef, offset: menuOffset, placement: `${direction} ${align}`, shouldFlip: shouldFlip, UNSAFE_style: { width: menuWidth ? `${menuWidth}px` : undefined, // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out '--trigger-width': `calc(${triggerWidth} - 2px)` }, styles: " NuHSBze91 ZuHSBze91", children: /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Provider), { values: [ [ (0, $8e847109a6ab556d$export$e0e4026c12a8bdbb), { styles: $a2f262fac286a920$export$c040ba7a724e8da1({ size: size }) } ], [ (0, $8e847109a6ab556d$export$d688439359537581), { // @ts-ignore role: 'presentation', styles: (0, $13afb0ea5f0ed767$export$300ac6f106ef584d) } ], [ (0, $8e847109a6ab556d$export$9afb8bc826b033ea), { slots: { 'description': { styles: (0, $13afb0ea5f0ed767$export$6d59db4903f20f7d)({ size: size }) } } } ] ], children: /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$Virtualizer), { layout: (0, $5rXoR$ListLayout), layoutOptions: { estimatedRowHeight: 32, padding: 8, estimatedHeadingHeight: 50, loaderHeight: $a2f262fac286a920$export$83379f5245567d78[size][scale] }, children: /*#__PURE__*/ (0, $5rXoR$jsx)((0, $5rXoR$ListBox), { dependencies: props1.dependencies, renderEmptyState: ()=>/*#__PURE__*/ (0, $5rXoR$jsx)("span", { className: $a2f262fac286a920$var$emptyStateText({ size: size }), children: loadingState === 'loading' ? stringFormatter.format('table.loading') : stringFormatter.format('combobox.noResults') }), items: items, className: $a2f262fac286a920$export$9901d82449b93cea({ size: size }), children: renderer }) }) }) }) ] }) }); }); const $a2f262fac286a920$export$2e0a83ec2e27ecbb = /*#__PURE__*/ (0, $5rXoR$createLeafComponent)('separator', function Divider({ size: size }, ref, node) { let listState = (0, $5rXoR$useContext)((0, $5rXoR$ListStateContext)); let nextNode = node.nextKey != null && listState.collection.getItem(node.nextKey); if (node.prevKey == null || !nextNode || nextNode.type === 'separator' || nextNode.type === 'loader' && nextNode.nextKey == null) return null; return /*#__PURE__*/ (0, $5rXoR$jsx)("div", { className: $a2f262fac286a920$var$separatorWrapper({ size: size }), children: /*#__PURE__*/ (0, $5rXoR$jsx)("div", { ref: ref, className: $a2f262fac286a920$var$dividerStyle }) }); }); export {$a2f262fac286a920$export$d414ccceff7063c3 as ComboBoxContext, $a2f262fac286a920$export$9901d82449b93cea as listbox, $a2f262fac286a920$export$68265fb354482bae as listboxItem, $a2f262fac286a920$export$c040ba7a724e8da1 as listboxHeader, $a2f262fac286a920$export$83379f5245567d78 as LOADER_ROW_HEIGHTS, $a2f262fac286a920$export$72b9695b8216309a as ComboBox, $a2f262fac286a920$export$b674b8ff01584ab1 as ComboBoxItem, $a2f262fac286a920$export$5510125537491b61 as ComboBoxSection, $a2f262fac286a920$export$2e0a83ec2e27ecbb as Divider}; //# sourceMappingURL=ComboBox.mjs.map