solid-baseui 0.1.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +26 -0
- package/README.md +150 -0
- package/dist/lib/client/CSPContext-faVzToiT.js +10 -0
- package/dist/lib/client/CheckboxGroupContext-1CRRHK0T.js +8 -0
- package/dist/lib/client/DialogHandle-DrN2YWCv.js +518 -0
- package/dist/lib/client/DialogPopup-ZlqmGfdk.js +136 -0
- package/dist/lib/client/DirectionContext-BwMabICS.js +7 -0
- package/dist/lib/client/FieldControl-Bc-z2og6.js +116 -0
- package/dist/lib/client/FieldItemContext-Bwzf-4tL.js +7 -0
- package/dist/lib/client/FieldRootContext-izCEh80D.js +32 -0
- package/dist/lib/client/FieldsetRootContext-BgThSAcd.js +13 -0
- package/dist/lib/client/FloatingTree-23B7KKPD.js +83 -0
- package/dist/lib/client/FocusManager-grSdNHqW.js +360 -0
- package/dist/lib/client/FormContext-BB05lWOI.js +16 -0
- package/dist/lib/client/InternalBackdrop-cSK13gaM.js +160 -0
- package/dist/lib/client/LabelableContext-DKsB0fIx.js +48 -0
- package/dist/lib/client/MenuSubmenuTrigger-QZkQ0F2v.js +1570 -0
- package/dist/lib/client/MenubarContext-BYt3fkt-.js +13 -0
- package/dist/lib/client/PopupHandle-CcJG4NMy.js +101 -0
- package/dist/lib/client/PopupStore-DjB-wO88.js +468 -0
- package/dist/lib/client/PopupViewport-DgrIqQea.js +152 -0
- package/dist/lib/client/RadioGroupContext-CZexBsPa.js +9 -0
- package/dist/lib/client/Separator-9DboD_Si.js +25 -0
- package/dist/lib/client/ToggleGroupContext-_THxLgJU.js +9 -0
- package/dist/lib/client/ToolbarGroupContext-Dpc3_mFx.js +9 -0
- package/dist/lib/client/ToolbarItemOwnerContext-DtVqVnSE.js +9 -0
- package/dist/lib/client/ToolbarRootContext-88yZoAOy.js +13 -0
- package/dist/lib/client/TriggerFocusGuards-CQ-JuASy.js +56 -0
- package/dist/lib/client/accordion/index.js +2 -0
- package/dist/lib/client/accordion-sOXt9AlG.js +399 -0
- package/dist/lib/client/alert-dialog/index.js +2 -0
- package/dist/lib/client/alert-dialog-BH_3ndio.js +30 -0
- package/dist/lib/client/autocomplete/index.js +2 -0
- package/dist/lib/client/autocomplete-Cob_FZEP.js +113 -0
- package/dist/lib/client/avatar/index.js +2 -0
- package/dist/lib/client/avatar-AF9vyD4q.js +146 -0
- package/dist/lib/client/button/index.js +2 -0
- package/dist/lib/client/button-DpUi-2g8.js +82 -0
- package/dist/lib/client/buttonSemantics-paljfpOX.js +39 -0
- package/dist/lib/client/checkbox/index.js +2 -0
- package/dist/lib/client/checkbox-BbAwOptH.js +441 -0
- package/dist/lib/client/checkbox-group/index.js +2 -0
- package/dist/lib/client/checkbox-group-CSSp_805.js +128 -0
- package/dist/lib/client/collapsible/index.js +2 -0
- package/dist/lib/client/collapsible-BIbje_ub.js +232 -0
- package/dist/lib/client/combobox/index.js +2 -0
- package/dist/lib/client/combobox-8O-vgTLL.js +352 -0
- package/dist/lib/client/compositeNavigation-sxniYTc7.js +58 -0
- package/dist/lib/client/constants-BYjBUIIi.js +424 -0
- package/dist/lib/client/context-menu/index.js +2 -0
- package/dist/lib/client/context-menu-BTMkXtrs.js +217 -0
- package/dist/lib/client/createAnchorPositioning-DcxDXUgB.js +1058 -0
- package/dist/lib/client/createAnchoredPopupScrollLock-Cx0cbh1_.js +19 -0
- package/dist/lib/client/createClickInteraction-CTaIFBiV.js +45 -0
- package/dist/lib/client/createCollapsiblePanel-DeDu0O2t.js +231 -0
- package/dist/lib/client/createFocusInteraction-D4w1-235.js +50 -0
- package/dist/lib/client/createPopupAutoResize-CGNiLhGq.js +60 -0
- package/dist/lib/client/createTransitionStatus-B1L-whed.js +53 -0
- package/dist/lib/client/csp-provider/index.js +2 -0
- package/dist/lib/client/csp-provider-C7nRHDKK.js +16 -0
- package/dist/lib/client/dialog/index.js +2 -0
- package/dist/lib/client/dialog-DkaQwIgP.js +19 -0
- package/dist/lib/client/direction-provider/index.js +3 -0
- package/dist/lib/client/direction-provider-DYhRN-8f.js +13 -0
- package/dist/lib/client/dom-BEAeQ9Eb.js +58 -0
- package/dist/lib/client/drawer/index.js +2 -0
- package/dist/lib/client/drawer-Ce2cChLt.js +1550 -0
- package/dist/lib/client/field/index.js +2 -0
- package/dist/lib/client/field-C-o7jzKW.js +469 -0
- package/dist/lib/client/fieldset/index.js +2 -0
- package/dist/lib/client/fieldset-BQTAWv2L.js +65 -0
- package/dist/lib/client/form/index.js +2 -0
- package/dist/lib/client/form-BINBiW5L.js +106 -0
- package/dist/lib/client/form-types-DFBxc1LF.js +8 -0
- package/dist/lib/client/index.js +43 -0
- package/dist/lib/client/input/index.js +2 -0
- package/dist/lib/client/input-gb0ejxkm.js +7 -0
- package/dist/lib/client/internals/composeEventHandlers.js +50 -0
- package/dist/lib/client/internals/createBaseUIEventDetails.js +31 -0
- package/dist/lib/client/internals/csp-context/index.js +2 -0
- package/dist/lib/client/internals/direction-context/index.js +2 -0
- package/dist/lib/client/internals/field-constants.js +56 -0
- package/dist/lib/client/internals/field-root-context/index.js +2 -0
- package/dist/lib/client/internals/form-context/index.js +2 -0
- package/dist/lib/client/internals/getStateAttributesProps.js +21 -0
- package/dist/lib/client/internals/labelable-provider/index.js +19 -0
- package/dist/lib/client/internals/mergeStyles.js +9 -0
- package/dist/lib/client/internals/reasons.js +2 -0
- package/dist/lib/client/internals/stateAttributesMapping.js +8 -0
- package/dist/lib/client/internals/types.js +0 -0
- package/dist/lib/client/menu/index.js +2 -0
- package/dist/lib/client/menu-DeMT08oD.js +326 -0
- package/dist/lib/client/menubar/index.js +2 -0
- package/dist/lib/client/menubar-C4aomSYv.js +185 -0
- package/dist/lib/client/mergeStyleValue-C4ITiiIV.js +42 -0
- package/dist/lib/client/meter/index.js +2 -0
- package/dist/lib/client/meter-xSU37Q0m.js +171 -0
- package/dist/lib/client/navigation-menu/index.js +2 -0
- package/dist/lib/client/navigation-menu-ZILQmdn6.js +1083 -0
- package/dist/lib/client/number-field/index.js +2 -0
- package/dist/lib/client/number-field-B8CsTb_8.js +1035 -0
- package/dist/lib/client/otp-field/index.js +2 -0
- package/dist/lib/client/otp-field-DBkMcnog.js +582 -0
- package/dist/lib/client/platform-Bk5Q32mf.js +13 -0
- package/dist/lib/client/popover/index.js +2 -0
- package/dist/lib/client/popover-CQwyp-fs.js +929 -0
- package/dist/lib/client/popupStateMapping-C9eZl19i.js +367 -0
- package/dist/lib/client/preview-card/index.js +2 -0
- package/dist/lib/client/preview-card-D_2Q8lpC.js +625 -0
- package/dist/lib/client/progress/index.js +2 -0
- package/dist/lib/client/progress-D7r0xAC9.js +188 -0
- package/dist/lib/client/radio/index.js +2 -0
- package/dist/lib/client/radio-CzGQ81z1.js +299 -0
- package/dist/lib/client/radio-group/index.js +2 -0
- package/dist/lib/client/radio-group-DpHlBKA6.js +193 -0
- package/dist/lib/client/reasons-Co5CzjKq.js +41 -0
- package/dist/lib/client/resolveStyle-XcgAuaKR.js +11 -0
- package/dist/lib/client/rolldown-runtime-Dy4uBu1J.js +11 -0
- package/dist/lib/client/runOnceAnimationsFinish-15EM-Z4l.js +48 -0
- package/dist/lib/client/safePolygon--bbKn0c8.js +316 -0
- package/dist/lib/client/scroll-area/index.js +2 -0
- package/dist/lib/client/scroll-area-CffM4U0R.js +701 -0
- package/dist/lib/client/scrollable-SRNYlhF7.js +42 -0
- package/dist/lib/client/select/index.js +2 -0
- package/dist/lib/client/select-IFhiEg73.js +1940 -0
- package/dist/lib/client/separator/index.js +2 -0
- package/dist/lib/client/setRef-fXF6OIo3.js +7 -0
- package/dist/lib/client/slider/index.js +2 -0
- package/dist/lib/client/slider-BCagYmGp.js +921 -0
- package/dist/lib/client/switch/index.js +2 -0
- package/dist/lib/client/switch-RIJeDnvS.js +308 -0
- package/dist/lib/client/tabs/index.js +2 -0
- package/dist/lib/client/tabs-fOAKs7r3.js +696 -0
- package/dist/lib/client/toast/index.js +2 -0
- package/dist/lib/client/toast-D2P8UqUs.js +1108 -0
- package/dist/lib/client/toggle/index.js +2 -0
- package/dist/lib/client/toggle-group/index.js +2 -0
- package/dist/lib/client/toggle-group-0Aue0owJ.js +129 -0
- package/dist/lib/client/toggle-momVEIBL.js +138 -0
- package/dist/lib/client/toolbar/index.js +2 -0
- package/dist/lib/client/toolbar-Du22aKCv.js +492 -0
- package/dist/lib/client/tooltip/index.js +2 -0
- package/dist/lib/client/tooltip-CyK61fl1.js +844 -0
- package/dist/lib/client/types/index.js +0 -0
- package/dist/lib/client/useFilteredItems-DTekHz39.js +2223 -0
- package/dist/lib/client/withoutComponentBinding-CcCW7fSc.js +13 -0
- package/dist/lib/server/CSPContext-DOxR0PO7.js +10 -0
- package/dist/lib/server/CheckboxGroupContext-DTP679kK.js +8 -0
- package/dist/lib/server/DialogHandle-ATZlm9RC.js +689 -0
- package/dist/lib/server/DialogPopup-BebI-w5P.js +159 -0
- package/dist/lib/server/DirectionContext-YORWLF08.js +10 -0
- package/dist/lib/server/FieldControl-Y_kI7ARp.js +174 -0
- package/dist/lib/server/FieldItemContext-x-C7ZlmX.js +7 -0
- package/dist/lib/server/FieldRootContext-IC-LWzVp.js +34 -0
- package/dist/lib/server/FieldsetRootContext-DyNqCjK6.js +14 -0
- package/dist/lib/server/FloatingTree-z1JPD1dR.js +101 -0
- package/dist/lib/server/FocusManager-BrbZVWME.js +538 -0
- package/dist/lib/server/FormContext-pvESt85v.js +17 -0
- package/dist/lib/server/InternalBackdrop-C_iDPVR-.js +260 -0
- package/dist/lib/server/LabelableContext-DZP3rgAY.js +59 -0
- package/dist/lib/server/MenuSubmenuTrigger-DA4gsv6z.js +2072 -0
- package/dist/lib/server/MenubarContext-C-62rMnO.js +14 -0
- package/dist/lib/server/PopupHandle-DthPgNjy.js +115 -0
- package/dist/lib/server/PopupStore-DEs3FAEe.js +645 -0
- package/dist/lib/server/PopupViewport-3r_KTFwX.js +220 -0
- package/dist/lib/server/RadioGroupContext-D5xmTkDz.js +10 -0
- package/dist/lib/server/Separator-vhhYxWGr.js +31 -0
- package/dist/lib/server/ToggleGroupContext-COor8gYc.js +10 -0
- package/dist/lib/server/ToolbarGroupContext-CzdHxijX.js +10 -0
- package/dist/lib/server/ToolbarItemOwnerContext-L5dsZ_vS.js +10 -0
- package/dist/lib/server/ToolbarRootContext-DD-qe7s8.js +14 -0
- package/dist/lib/server/TriggerFocusGuards-sbGwf45f.js +63 -0
- package/dist/lib/server/accordion/index.js +566 -0
- package/dist/lib/server/alert-dialog/index.js +36 -0
- package/dist/lib/server/autocomplete/index.js +173 -0
- package/dist/lib/server/avatar/index.js +199 -0
- package/dist/lib/server/button/index.js +119 -0
- package/dist/lib/server/buttonSemantics-BSwDxJhh.js +49 -0
- package/dist/lib/server/checkbox/index.js +537 -0
- package/dist/lib/server/checkbox-group/index.js +198 -0
- package/dist/lib/server/collapsible/index.js +307 -0
- package/dist/lib/server/combobox/index.js +480 -0
- package/dist/lib/server/compositeNavigation-BRVT1C38.js +68 -0
- package/dist/lib/server/constants-9H__9xbS.js +706 -0
- package/dist/lib/server/context-menu/index.js +263 -0
- package/dist/lib/server/createAnchorPositioning-C-cVOPwz.js +381 -0
- package/dist/lib/server/createAnchoredPopupScrollLock-DFuUrykR.js +20 -0
- package/dist/lib/server/createClickInteraction-BYsMgvup.js +68 -0
- package/dist/lib/server/createCollapsiblePanel-DTyVJz0G.js +297 -0
- package/dist/lib/server/createFocusInteraction-EIS0QOel.js +77 -0
- package/dist/lib/server/createPopupAutoResize-DO50jjNX.js +111 -0
- package/dist/lib/server/createTransitionStatus-BTlrerSS.js +61 -0
- package/dist/lib/server/csp-provider/index.js +15 -0
- package/dist/lib/server/dialog/index.js +19 -0
- package/dist/lib/server/direction-provider/index.js +13 -0
- package/dist/lib/server/dom-Crg_2R-j.js +67 -0
- package/dist/lib/server/drawer/index.js +2351 -0
- package/dist/lib/server/field/index.js +677 -0
- package/dist/lib/server/fieldset/index.js +91 -0
- package/dist/lib/server/form/index.js +136 -0
- package/dist/lib/server/form-types-P7-SCWyr.js +8 -0
- package/dist/lib/server/index.js +43 -0
- package/dist/lib/server/input/index.js +11 -0
- package/dist/lib/server/internals/composeEventHandlers.js +60 -0
- package/dist/lib/server/internals/createBaseUIEventDetails.js +33 -0
- package/dist/lib/server/internals/csp-context/index.js +2 -0
- package/dist/lib/server/internals/direction-context/index.js +2 -0
- package/dist/lib/server/internals/field-constants.js +64 -0
- package/dist/lib/server/internals/field-root-context/index.js +2 -0
- package/dist/lib/server/internals/form-context/index.js +2 -0
- package/dist/lib/server/internals/getStateAttributesProps.js +23 -0
- package/dist/lib/server/internals/labelable-provider/index.js +20 -0
- package/dist/lib/server/internals/mergeStyles.js +15 -0
- package/dist/lib/server/internals/reasons.js +76 -0
- package/dist/lib/server/internals/stateAttributesMapping.js +15 -0
- package/dist/lib/server/internals/types.js +1 -0
- package/dist/lib/server/menu/index.js +423 -0
- package/dist/lib/server/menubar/index.js +242 -0
- package/dist/lib/server/mergeStyleValue-Db8bRCM4.js +67 -0
- package/dist/lib/server/meter/index.js +217 -0
- package/dist/lib/server/navigation-menu/index.js +1436 -0
- package/dist/lib/server/number-field/index.js +1497 -0
- package/dist/lib/server/otp-field/index.js +811 -0
- package/dist/lib/server/platform-DYukKUir.js +13 -0
- package/dist/lib/server/popover/index.js +1187 -0
- package/dist/lib/server/popupStateMapping-nKoUwoke.js +459 -0
- package/dist/lib/server/preview-card/index.js +797 -0
- package/dist/lib/server/progress/index.js +252 -0
- package/dist/lib/server/radio/index.js +364 -0
- package/dist/lib/server/radio-group/index.js +282 -0
- package/dist/lib/server/resolveStyle-XCSFDHAL.js +11 -0
- package/dist/lib/server/rolldown-runtime-D7D4PA-g.js +13 -0
- package/dist/lib/server/runOnceAnimationsFinish-DCHzXWZU.js +59 -0
- package/dist/lib/server/safePolygon-CAm5RJGv.js +474 -0
- package/dist/lib/server/scroll-area/index.js +993 -0
- package/dist/lib/server/scrollable-CjsSxbGr.js +54 -0
- package/dist/lib/server/select/index.js +2630 -0
- package/dist/lib/server/separator/index.js +2 -0
- package/dist/lib/server/setRef-Bt70sW7c.js +7 -0
- package/dist/lib/server/slider/index.js +1333 -0
- package/dist/lib/server/switch/index.js +389 -0
- package/dist/lib/server/tabs/index.js +1007 -0
- package/dist/lib/server/toast/index.js +1588 -0
- package/dist/lib/server/toggle/index.js +201 -0
- package/dist/lib/server/toggle-group/index.js +192 -0
- package/dist/lib/server/toolbar/index.js +685 -0
- package/dist/lib/server/tooltip/index.js +1092 -0
- package/dist/lib/server/types/index.js +1 -0
- package/dist/lib/server/useFilteredItems-DvuctLt3.js +3157 -0
- package/dist/lib/server/withoutComponentBinding-BHaWr5kU.js +20 -0
- package/dist/lib/types/accordion/header/AccordionHeader.d.ts +12 -0
- package/dist/lib/types/accordion/index.d.ts +6 -0
- package/dist/lib/types/accordion/index.parts.d.ts +5 -0
- package/dist/lib/types/accordion/item/AccordionItem.d.ts +29 -0
- package/dist/lib/types/accordion/item/AccordionItemContext.d.ts +22 -0
- package/dist/lib/types/accordion/item/AccordionItemDataAttributes.d.ts +5 -0
- package/dist/lib/types/accordion/item/stateAttributesMapping.d.ts +13 -0
- package/dist/lib/types/accordion/panel/AccordionPanel.d.ts +20 -0
- package/dist/lib/types/accordion/panel/AccordionPanelCssVars.d.ts +4 -0
- package/dist/lib/types/accordion/root/AccordionRoot.d.ts +46 -0
- package/dist/lib/types/accordion/root/AccordionRootContext.d.ts +22 -0
- package/dist/lib/types/accordion/root/stateAttributesMapping.d.ts +3 -0
- package/dist/lib/types/accordion/trigger/AccordionTrigger.d.ts +27 -0
- package/dist/lib/types/accordion/trigger/AccordionTriggerDataAttributes.d.ts +4 -0
- package/dist/lib/types/alert-dialog/handle.d.ts +6 -0
- package/dist/lib/types/alert-dialog/index.d.ts +10 -0
- package/dist/lib/types/alert-dialog/index.parts.d.ts +10 -0
- package/dist/lib/types/alert-dialog/root/AlertDialogRoot.d.ts +29 -0
- package/dist/lib/types/alert-dialog/trigger/AlertDialogTrigger.d.ts +19 -0
- package/dist/lib/types/autocomplete/index.d.ts +24 -0
- package/dist/lib/types/autocomplete/index.parts.d.ts +23 -0
- package/dist/lib/types/autocomplete/input-group/AutocompleteInputGroup.d.ts +26 -0
- package/dist/lib/types/autocomplete/item/AutocompleteItem.d.ts +18 -0
- package/dist/lib/types/autocomplete/root/AutocompleteRoot.d.ts +195 -0
- package/dist/lib/types/autocomplete/root/utils/useFilter.d.ts +9 -0
- package/dist/lib/types/autocomplete/separator/AutocompleteSeparator.d.ts +17 -0
- package/dist/lib/types/autocomplete/trigger/AutocompleteTrigger.d.ts +24 -0
- package/dist/lib/types/autocomplete/value/AutocompleteValue.d.ts +15 -0
- package/dist/lib/types/avatar/fallback/AvatarFallback.d.ts +16 -0
- package/dist/lib/types/avatar/image/AvatarImage.d.ts +17 -0
- package/dist/lib/types/avatar/image/createImageLoadingStatus.d.ts +10 -0
- package/dist/lib/types/avatar/index.d.ts +4 -0
- package/dist/lib/types/avatar/index.parts.d.ts +3 -0
- package/dist/lib/types/avatar/root/AvatarRoot.d.ts +13 -0
- package/dist/lib/types/avatar/root/AvatarRootContext.d.ts +10 -0
- package/dist/lib/types/button/Button.d.ts +34 -0
- package/dist/lib/types/button/index.d.ts +2 -0
- package/dist/lib/types/checkbox/index.d.ts +3 -0
- package/dist/lib/types/checkbox/index.parts.d.ts +2 -0
- package/dist/lib/types/checkbox/indicator/CheckboxIndicator.d.ts +20 -0
- package/dist/lib/types/checkbox/root/CheckboxRoot.d.ts +56 -0
- package/dist/lib/types/checkbox/root/CheckboxRootContext.d.ts +7 -0
- package/dist/lib/types/checkbox/utils/getCheckboxStateAttributesMapping.d.ts +3 -0
- package/dist/lib/types/checkbox-group/CheckboxGroup.d.ts +32 -0
- package/dist/lib/types/checkbox-group/CheckboxGroupContext.d.ts +30 -0
- package/dist/lib/types/checkbox-group/index.d.ts +2 -0
- package/dist/lib/types/collapsible/index.d.ts +4 -0
- package/dist/lib/types/collapsible/index.parts.d.ts +3 -0
- package/dist/lib/types/collapsible/panel/CollapsiblePanel.d.ts +25 -0
- package/dist/lib/types/collapsible/panel/createCollapsiblePanel.d.ts +26 -0
- package/dist/lib/types/collapsible/root/CollapsibleRoot.d.ts +34 -0
- package/dist/lib/types/collapsible/root/CollapsibleRootContext.d.ts +19 -0
- package/dist/lib/types/collapsible/root/createCollapsibleTransitionStatus.d.ts +9 -0
- package/dist/lib/types/collapsible/root/stateAttributesMapping.d.ts +14 -0
- package/dist/lib/types/collapsible/trigger/CollapsibleTrigger.d.ts +28 -0
- package/dist/lib/types/combobox/arrow/ComboboxArrow.d.ts +16 -0
- package/dist/lib/types/combobox/backdrop/ComboboxBackdrop.d.ts +14 -0
- package/dist/lib/types/combobox/chip/ComboboxChip.d.ts +17 -0
- package/dist/lib/types/combobox/chip/ComboboxChipContext.d.ts +8 -0
- package/dist/lib/types/combobox/chip-remove/ComboboxChipRemove.d.ts +26 -0
- package/dist/lib/types/combobox/chips/ComboboxChips.d.ts +16 -0
- package/dist/lib/types/combobox/chips/ComboboxChipsContext.d.ts +26 -0
- package/dist/lib/types/combobox/clear/ComboboxClear.d.ts +35 -0
- package/dist/lib/types/combobox/collection/ComboboxCollection.d.ts +19 -0
- package/dist/lib/types/combobox/empty/ComboboxEmpty.d.ts +16 -0
- package/dist/lib/types/combobox/group/ComboboxGroup.d.ts +19 -0
- package/dist/lib/types/combobox/group/ComboboxGroupContext.d.ts +9 -0
- package/dist/lib/types/combobox/group-label/ComboboxGroupLabel.d.ts +11 -0
- package/dist/lib/types/combobox/icon/ComboboxIcon.d.ts +12 -0
- package/dist/lib/types/combobox/index.d.ts +29 -0
- package/dist/lib/types/combobox/index.parts.d.ts +28 -0
- package/dist/lib/types/combobox/input/ComboboxInput.d.ts +36 -0
- package/dist/lib/types/combobox/input-group/ComboboxInputGroup.d.ts +24 -0
- package/dist/lib/types/combobox/item/ComboboxItem.d.ts +40 -0
- package/dist/lib/types/combobox/item/ComboboxItemContext.d.ts +9 -0
- package/dist/lib/types/combobox/item-indicator/ComboboxItemIndicator.d.ts +22 -0
- package/dist/lib/types/combobox/label/ComboboxLabel.d.ts +22 -0
- package/dist/lib/types/combobox/list/ComboboxList.d.ts +24 -0
- package/dist/lib/types/combobox/popup/ComboboxPopup.d.ts +35 -0
- package/dist/lib/types/combobox/portal/ComboboxPortal.d.ts +25 -0
- package/dist/lib/types/combobox/portal/ComboboxPortalContext.d.ts +5 -0
- package/dist/lib/types/combobox/positioner/ComboboxPositioner.d.ts +37 -0
- package/dist/lib/types/combobox/positioner/ComboboxPositionerContext.d.ts +11 -0
- package/dist/lib/types/combobox/root/AriaCombobox.d.ts +82 -0
- package/dist/lib/types/combobox/root/ComboboxRoot.d.ts +180 -0
- package/dist/lib/types/combobox/root/ComboboxRootContext.d.ts +99 -0
- package/dist/lib/types/combobox/root/utils/useFilter.d.ts +25 -0
- package/dist/lib/types/combobox/root/utils/useFilteredItems.d.ts +5 -0
- package/dist/lib/types/combobox/row/ComboboxRow.d.ts +14 -0
- package/dist/lib/types/combobox/row/ComboboxRowContext.d.ts +3 -0
- package/dist/lib/types/combobox/separator/ComboboxSeparator.d.ts +21 -0
- package/dist/lib/types/combobox/status/ComboboxStatus.d.ts +17 -0
- package/dist/lib/types/combobox/store/ComboboxItemRegistry.d.ts +39 -0
- package/dist/lib/types/combobox/store/ComboboxStore.d.ts +65 -0
- package/dist/lib/types/combobox/trigger/ComboboxTrigger.d.ts +36 -0
- package/dist/lib/types/combobox/types.d.ts +15 -0
- package/dist/lib/types/combobox/utils/ComboboxInternalDismissButton.d.ts +9 -0
- package/dist/lib/types/combobox/utils/comboboxPopupId.d.ts +5 -0
- package/dist/lib/types/combobox/utils/createInitialLiveRegionTextMutation.d.ts +7 -0
- package/dist/lib/types/combobox/utils/handleInputPress.d.ts +7 -0
- package/dist/lib/types/combobox/utils/parts.d.ts +4 -0
- package/dist/lib/types/combobox/utils/stateAttributesMapping.d.ts +58 -0
- package/dist/lib/types/combobox/value/ComboboxValue.d.ts +20 -0
- package/dist/lib/types/context-menu/index.d.ts +19 -0
- package/dist/lib/types/context-menu/index.parts.d.ts +19 -0
- package/dist/lib/types/context-menu/root/ContextMenuRoot.d.ts +21 -0
- package/dist/lib/types/context-menu/root/ContextMenuRootContext.d.ts +19 -0
- package/dist/lib/types/context-menu/trigger/ContextMenuTrigger.d.ts +21 -0
- package/dist/lib/types/csp-provider/CSPProvider.d.ts +14 -0
- package/dist/lib/types/csp-provider/index.d.ts +2 -0
- package/dist/lib/types/dialog/backdrop/DialogBackdrop.d.ts +18 -0
- package/dist/lib/types/dialog/close/DialogClose.d.ts +26 -0
- package/dist/lib/types/dialog/description/DialogDescription.d.ts +11 -0
- package/dist/lib/types/dialog/index.d.ts +10 -0
- package/dist/lib/types/dialog/index.parts.d.ts +10 -0
- package/dist/lib/types/dialog/popup/DialogPopup.d.ts +24 -0
- package/dist/lib/types/dialog/portal/DialogPortal.d.ts +17 -0
- package/dist/lib/types/dialog/portal/DialogPortalContext.d.ts +8 -0
- package/dist/lib/types/dialog/root/DialogRoot.d.ts +44 -0
- package/dist/lib/types/dialog/root/DialogRootContext.d.ts +38 -0
- package/dist/lib/types/dialog/store/DialogHandle.d.ts +11 -0
- package/dist/lib/types/dialog/store/DialogStore.d.ts +20 -0
- package/dist/lib/types/dialog/title/DialogTitle.d.ts +11 -0
- package/dist/lib/types/dialog/trigger/DialogTrigger.d.ts +30 -0
- package/dist/lib/types/dialog/utils/mergeDialogStyles.d.ts +2 -0
- package/dist/lib/types/dialog/utils/stateAttributesMapping.d.ts +20 -0
- package/dist/lib/types/dialog/viewport/DialogViewport.d.ts +16 -0
- package/dist/lib/types/direction-provider/DirectionProvider.d.ts +13 -0
- package/dist/lib/types/direction-provider/index.d.ts +4 -0
- package/dist/lib/types/drawer/backdrop/DrawerBackdrop.d.ts +24 -0
- package/dist/lib/types/drawer/backdrop/DrawerBackdropCssVars.d.ts +7 -0
- package/dist/lib/types/drawer/content/DrawerContent.d.ts +14 -0
- package/dist/lib/types/drawer/content/DrawerContentDataAttributes.d.ts +1 -0
- package/dist/lib/types/drawer/handle.d.ts +14 -0
- package/dist/lib/types/drawer/indent/DrawerIndent.d.ts +16 -0
- package/dist/lib/types/drawer/indent-background/DrawerIndentBackground.d.ts +23 -0
- package/dist/lib/types/drawer/index.d.ts +17 -0
- package/dist/lib/types/drawer/index.parts.d.ts +16 -0
- package/dist/lib/types/drawer/popup/DrawerPopup.d.ts +46 -0
- package/dist/lib/types/drawer/popup/DrawerPopupCssVars.d.ts +37 -0
- package/dist/lib/types/drawer/popup/DrawerPopupDataAttributes.d.ts +25 -0
- package/dist/lib/types/drawer/provider/DrawerProvider.d.ts +15 -0
- package/dist/lib/types/drawer/provider/DrawerProviderContext.d.ts +21 -0
- package/dist/lib/types/drawer/root/DrawerRoot.d.ts +65 -0
- package/dist/lib/types/drawer/root/DrawerRootContext.d.ts +68 -0
- package/dist/lib/types/drawer/root/createDrawerSnapPoints.d.ts +24 -0
- package/dist/lib/types/drawer/swipe-area/DrawerSwipeArea.d.ts +43 -0
- package/dist/lib/types/drawer/swipe-area/DrawerSwipeAreaDataAttributes.d.ts +15 -0
- package/dist/lib/types/drawer/viewport/DrawerViewport.d.ts +31 -0
- package/dist/lib/types/drawer/viewport/DrawerViewportContext.d.ts +12 -0
- package/dist/lib/types/drawer/viewport/DrawerViewportCssVars.d.ts +8 -0
- package/dist/lib/types/drawer/virtual-keyboard-provider/DrawerVirtualKeyboardContext.d.ts +14 -0
- package/dist/lib/types/drawer/virtual-keyboard-provider/DrawerVirtualKeyboardProvider.d.ts +14 -0
- package/dist/lib/types/field/control/FieldControl.d.ts +35 -0
- package/dist/lib/types/field/description/FieldDescription.d.ts +16 -0
- package/dist/lib/types/field/error/FieldError.d.ts +19 -0
- package/dist/lib/types/field/index.d.ts +8 -0
- package/dist/lib/types/field/index.parts.d.ts +8 -0
- package/dist/lib/types/field/item/FieldItem.d.ts +16 -0
- package/dist/lib/types/field/item/FieldItemContext.d.ts +6 -0
- package/dist/lib/types/field/label/FieldLabel.d.ts +24 -0
- package/dist/lib/types/field/root/FieldRoot.d.ts +30 -0
- package/dist/lib/types/field/root/createFieldValidation.d.ts +22 -0
- package/dist/lib/types/field/validity/FieldValidity.d.ts +16 -0
- package/dist/lib/types/fieldset/index.d.ts +3 -0
- package/dist/lib/types/fieldset/index.parts.d.ts +2 -0
- package/dist/lib/types/fieldset/legend/FieldsetLegend.d.ts +21 -0
- package/dist/lib/types/fieldset/root/FieldsetRoot.d.ts +21 -0
- package/dist/lib/types/fieldset/root/FieldsetRootContext.d.ts +11 -0
- package/dist/lib/types/form/Form.d.ts +39 -0
- package/dist/lib/types/form/index.d.ts +2 -0
- package/dist/lib/types/index.d.ts +41 -0
- package/dist/lib/types/input/Input.d.ts +20 -0
- package/dist/lib/types/input/index.d.ts +2 -0
- package/dist/lib/types/internals/buttonSemantics.d.ts +10 -0
- package/dist/lib/types/internals/clamp.d.ts +1 -0
- package/dist/lib/types/internals/composeEventHandlers.d.ts +11 -0
- package/dist/lib/types/internals/constants.d.ts +4 -0
- package/dist/lib/types/internals/createBaseUIEventDetails.d.ts +57 -0
- package/dist/lib/types/internals/createTransitionStatus.d.ts +9 -0
- package/dist/lib/types/internals/csp-context/CSPContext.d.ts +7 -0
- package/dist/lib/types/internals/csp-context/index.d.ts +2 -0
- package/dist/lib/types/internals/direction-context/DirectionContext.d.ts +6 -0
- package/dist/lib/types/internals/direction-context/index.d.ts +2 -0
- package/dist/lib/types/internals/field-constants.d.ts +44 -0
- package/dist/lib/types/internals/field-root-context/FieldRootContext.d.ts +31 -0
- package/dist/lib/types/internals/field-root-context/index.d.ts +2 -0
- package/dist/lib/types/internals/filter.d.ts +18 -0
- package/dist/lib/types/internals/form-context/FormContext.d.ts +13 -0
- package/dist/lib/types/internals/form-context/index.d.ts +3 -0
- package/dist/lib/types/internals/form-types.d.ts +11 -0
- package/dist/lib/types/internals/getStateAttributesProps.d.ts +4 -0
- package/dist/lib/types/internals/installOwnedEventHandlers.d.ts +3 -0
- package/dist/lib/types/internals/isSolidAccessor.d.ts +6 -0
- package/dist/lib/types/internals/itemEquality.d.ts +17 -0
- package/dist/lib/types/internals/labelable-provider/LabelableContext.d.ts +18 -0
- package/dist/lib/types/internals/labelable-provider/LabelableProvider.d.ts +11 -0
- package/dist/lib/types/internals/labelable-provider/index.d.ts +2 -0
- package/dist/lib/types/internals/mergeStyleValue.d.ts +8 -0
- package/dist/lib/types/internals/mergeStyles.d.ts +6 -0
- package/dist/lib/types/internals/overlay/FloatingRootStore.d.ts +49 -0
- package/dist/lib/types/internals/overlay/FloatingTree.d.ts +48 -0
- package/dist/lib/types/internals/overlay/FocusGuard.d.ts +2 -0
- package/dist/lib/types/internals/overlay/FocusManager.d.ts +30 -0
- package/dist/lib/types/internals/overlay/InternalBackdrop.d.ts +6 -0
- package/dist/lib/types/internals/overlay/PopupHandle.d.ts +47 -0
- package/dist/lib/types/internals/overlay/PopupPortal.d.ts +37 -0
- package/dist/lib/types/internals/overlay/PopupStore.d.ts +89 -0
- package/dist/lib/types/internals/overlay/PopupTriggerMap.d.ts +11 -0
- package/dist/lib/types/internals/overlay/PopupViewport.d.ts +16 -0
- package/dist/lib/types/internals/overlay/ReactiveStore.d.ts +26 -0
- package/dist/lib/types/internals/overlay/TriggerFocusGuards.d.ts +14 -0
- package/dist/lib/types/internals/overlay/adaptiveOrigin.d.ts +2 -0
- package/dist/lib/types/internals/overlay/compositeNavigation.d.ts +20 -0
- package/dist/lib/types/internals/overlay/createAnchorPositioning.d.ts +57 -0
- package/dist/lib/types/internals/overlay/createAnchoredPopupScrollLock.d.ts +12 -0
- package/dist/lib/types/internals/overlay/createClickInteraction.d.ts +20 -0
- package/dist/lib/types/internals/overlay/createClientPoint.d.ts +12 -0
- package/dist/lib/types/internals/overlay/createContextMenuInteraction.d.ts +17 -0
- package/dist/lib/types/internals/overlay/createDelayGroup.d.ts +18 -0
- package/dist/lib/types/internals/overlay/createDismiss.d.ts +27 -0
- package/dist/lib/types/internals/overlay/createFloatingPosition.d.ts +22 -0
- package/dist/lib/types/internals/overlay/createFocusInteraction.d.ts +14 -0
- package/dist/lib/types/internals/overlay/createHoverInteraction.d.ts +30 -0
- package/dist/lib/types/internals/overlay/createInitialPositioning.d.ts +3 -0
- package/dist/lib/types/internals/overlay/createListNavigation.d.ts +26 -0
- package/dist/lib/types/internals/overlay/createPopupAutoResize.d.ts +18 -0
- package/dist/lib/types/internals/overlay/createPopupPresence.d.ts +18 -0
- package/dist/lib/types/internals/overlay/createSwipeDismiss.d.ts +107 -0
- package/dist/lib/types/internals/overlay/createTypeahead.d.ts +20 -0
- package/dist/lib/types/internals/overlay/dom.d.ts +19 -0
- package/dist/lib/types/internals/overlay/eventEmitter.d.ts +7 -0
- package/dist/lib/types/internals/overlay/getElementAtPoint.d.ts +8 -0
- package/dist/lib/types/internals/overlay/index.d.ts +37 -0
- package/dist/lib/types/internals/overlay/inlineRect.d.ts +32 -0
- package/dist/lib/types/internals/overlay/markOthers.d.ts +6 -0
- package/dist/lib/types/internals/overlay/popupStateMapping.d.ts +46 -0
- package/dist/lib/types/internals/overlay/safePolygon.d.ts +24 -0
- package/dist/lib/types/internals/overlay/scrollLock.d.ts +10 -0
- package/dist/lib/types/internals/overlay/tabbable.d.ts +11 -0
- package/dist/lib/types/internals/platform.d.ts +1 -0
- package/dist/lib/types/internals/reason-parts.d.ts +35 -0
- package/dist/lib/types/internals/reasons.d.ts +4 -0
- package/dist/lib/types/internals/resolveClass.d.ts +3 -0
- package/dist/lib/types/internals/resolveStyle.d.ts +3 -0
- package/dist/lib/types/internals/runOnceAnimationsFinish.d.ts +4 -0
- package/dist/lib/types/internals/scrollable.d.ts +18 -0
- package/dist/lib/types/internals/setRef.d.ts +2 -0
- package/dist/lib/types/internals/stateAttributesMapping.d.ts +8 -0
- package/dist/lib/types/internals/types.d.ts +2 -0
- package/dist/lib/types/internals/valueLabel.d.ts +28 -0
- package/dist/lib/types/internals/withoutComponentBinding.d.ts +7 -0
- package/dist/lib/types/menu/arrow/MenuArrow.d.ts +16 -0
- package/dist/lib/types/menu/backdrop/MenuBackdrop.d.ts +14 -0
- package/dist/lib/types/menu/checkbox-item/MenuCheckboxItem.d.ts +37 -0
- package/dist/lib/types/menu/checkbox-item/MenuCheckboxItemContext.d.ts +6 -0
- package/dist/lib/types/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.d.ts +18 -0
- package/dist/lib/types/menu/group/MenuGroup.d.ts +11 -0
- package/dist/lib/types/menu/group/MenuGroupContext.d.ts +9 -0
- package/dist/lib/types/menu/group-label/MenuGroupLabel.d.ts +11 -0
- package/dist/lib/types/menu/index.d.ts +20 -0
- package/dist/lib/types/menu/index.parts.d.ts +21 -0
- package/dist/lib/types/menu/item/MenuItem.d.ts +28 -0
- package/dist/lib/types/menu/item/createMenuItem.d.ts +24 -0
- package/dist/lib/types/menu/link-item/MenuLinkItem.d.ts +25 -0
- package/dist/lib/types/menu/popup/MenuPopup.d.ts +28 -0
- package/dist/lib/types/menu/portal/MenuPortal.d.ts +17 -0
- package/dist/lib/types/menu/portal/MenuPortalContext.d.ts +8 -0
- package/dist/lib/types/menu/positioner/MenuPositioner.d.ts +39 -0
- package/dist/lib/types/menu/positioner/MenuPositionerContext.d.ts +5 -0
- package/dist/lib/types/menu/radio-group/MenuRadioGroup.d.ts +24 -0
- package/dist/lib/types/menu/radio-group/MenuRadioGroupContext.d.ts +11 -0
- package/dist/lib/types/menu/radio-item/MenuRadioItem.d.ts +30 -0
- package/dist/lib/types/menu/radio-item/MenuRadioItemContext.d.ts +6 -0
- package/dist/lib/types/menu/radio-item-indicator/MenuRadioItemIndicator.d.ts +18 -0
- package/dist/lib/types/menu/root/MenuRoot.d.ts +56 -0
- package/dist/lib/types/menu/root/MenuRootContext.d.ts +23 -0
- package/dist/lib/types/menu/store/MenuCollection.d.ts +19 -0
- package/dist/lib/types/menu/store/MenuHandle.d.ts +10 -0
- package/dist/lib/types/menu/store/MenuStore.d.ts +110 -0
- package/dist/lib/types/menu/submenu-root/MenuSubmenuRoot.d.ts +17 -0
- package/dist/lib/types/menu/submenu-root/MenuSubmenuRootContext.d.ts +8 -0
- package/dist/lib/types/menu/submenu-trigger/MenuSubmenuTrigger.d.ts +33 -0
- package/dist/lib/types/menu/trigger/MenuTrigger.d.ts +36 -0
- package/dist/lib/types/menu/utils/mergeMenuStyles.d.ts +2 -0
- package/dist/lib/types/menu/utils/stateAttributesMapping.d.ts +39 -0
- package/dist/lib/types/menu/viewport/MenuViewport.d.ts +15 -0
- package/dist/lib/types/menubar/Menubar.d.ts +23 -0
- package/dist/lib/types/menubar/MenubarContext.d.ts +34 -0
- package/dist/lib/types/menubar/index.d.ts +2 -0
- package/dist/lib/types/meter/index.d.ts +6 -0
- package/dist/lib/types/meter/index.parts.d.ts +5 -0
- package/dist/lib/types/meter/indicator/MeterIndicator.d.ts +12 -0
- package/dist/lib/types/meter/label/MeterLabel.d.ts +17 -0
- package/dist/lib/types/meter/root/MeterRoot.d.ts +28 -0
- package/dist/lib/types/meter/root/MeterRootContext.d.ts +12 -0
- package/dist/lib/types/meter/track/MeterTrack.d.ts +12 -0
- package/dist/lib/types/meter/value/MeterValue.d.ts +16 -0
- package/dist/lib/types/navigation-menu/arrow/NavigationMenuArrow.d.ts +16 -0
- package/dist/lib/types/navigation-menu/backdrop/NavigationMenuBackdrop.d.ts +14 -0
- package/dist/lib/types/navigation-menu/composite/NavigationMenuCompositeContext.d.ts +22 -0
- package/dist/lib/types/navigation-menu/content/NavigationMenuContent.d.ts +21 -0
- package/dist/lib/types/navigation-menu/icon/NavigationMenuIcon.d.ts +12 -0
- package/dist/lib/types/navigation-menu/index.d.ts +14 -0
- package/dist/lib/types/navigation-menu/index.parts.d.ts +13 -0
- package/dist/lib/types/navigation-menu/item/NavigationMenuItem.d.ts +15 -0
- package/dist/lib/types/navigation-menu/item/NavigationMenuItemContext.d.ts +8 -0
- package/dist/lib/types/navigation-menu/link/NavigationMenuLink.d.ts +20 -0
- package/dist/lib/types/navigation-menu/list/NavigationMenuList.d.ts +12 -0
- package/dist/lib/types/navigation-menu/popup/NavigationMenuPopup.d.ts +23 -0
- package/dist/lib/types/navigation-menu/portal/NavigationMenuPortal.d.ts +17 -0
- package/dist/lib/types/navigation-menu/portal/NavigationMenuPortalContext.d.ts +8 -0
- package/dist/lib/types/navigation-menu/positioner/NavigationMenuPositioner.d.ts +37 -0
- package/dist/lib/types/navigation-menu/positioner/NavigationMenuPositionerContext.d.ts +5 -0
- package/dist/lib/types/navigation-menu/root/NavigationMenuRoot.d.ts +39 -0
- package/dist/lib/types/navigation-menu/root/NavigationMenuRootContext.d.ts +19 -0
- package/dist/lib/types/navigation-menu/store/NavigationMenuStore.d.ts +64 -0
- package/dist/lib/types/navigation-menu/trigger/NavigationMenuTrigger.d.ts +27 -0
- package/dist/lib/types/navigation-menu/utils/mergeNavigationMenuStyles.d.ts +2 -0
- package/dist/lib/types/navigation-menu/viewport/NavigationMenuViewport.d.ts +11 -0
- package/dist/lib/types/number-field/decrement/NumberFieldDecrement.d.ts +12 -0
- package/dist/lib/types/number-field/group/NumberFieldGroup.d.ts +12 -0
- package/dist/lib/types/number-field/increment/NumberFieldIncrement.d.ts +12 -0
- package/dist/lib/types/number-field/increment/NumberFieldStepperButton.d.ts +26 -0
- package/dist/lib/types/number-field/index.d.ts +8 -0
- package/dist/lib/types/number-field/index.parts.d.ts +7 -0
- package/dist/lib/types/number-field/input/NumberFieldInput.d.ts +25 -0
- package/dist/lib/types/number-field/root/NumberFieldRoot.d.ts +55 -0
- package/dist/lib/types/number-field/root/NumberFieldRootContext.d.ts +39 -0
- package/dist/lib/types/number-field/root/createPressAndHold.d.ts +24 -0
- package/dist/lib/types/number-field/scrub-area/NumberFieldScrubArea.d.ts +20 -0
- package/dist/lib/types/number-field/scrub-area/NumberFieldScrubAreaContext.d.ts +13 -0
- package/dist/lib/types/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts +12 -0
- package/dist/lib/types/number-field/utils/format.d.ts +2 -0
- package/dist/lib/types/number-field/utils/getViewportRect.d.ts +6 -0
- package/dist/lib/types/number-field/utils/parse.d.ts +40 -0
- package/dist/lib/types/number-field/utils/platform.d.ts +3 -0
- package/dist/lib/types/number-field/utils/stateAttributesMapping.d.ts +10 -0
- package/dist/lib/types/number-field/utils/types.d.ts +16 -0
- package/dist/lib/types/number-field/utils/validate.d.ts +9 -0
- package/dist/lib/types/otp-field/index.d.ts +3 -0
- package/dist/lib/types/otp-field/index.parts.d.ts +3 -0
- package/dist/lib/types/otp-field/input/OTPFieldInput.d.ts +29 -0
- package/dist/lib/types/otp-field/root/OTPFieldRoot.d.ts +56 -0
- package/dist/lib/types/otp-field/root/OTPFieldRootContext.d.ts +45 -0
- package/dist/lib/types/otp-field/utils/otp.d.ts +14 -0
- package/dist/lib/types/otp-field/utils/stateAttributesMapping.d.ts +5 -0
- package/dist/lib/types/popover/arrow/PopoverArrow.d.ts +16 -0
- package/dist/lib/types/popover/backdrop/PopoverBackdrop.d.ts +14 -0
- package/dist/lib/types/popover/close/PopoverClose.d.ts +25 -0
- package/dist/lib/types/popover/description/PopoverDescription.d.ts +11 -0
- package/dist/lib/types/popover/index.d.ts +12 -0
- package/dist/lib/types/popover/index.parts.d.ts +12 -0
- package/dist/lib/types/popover/popup/PopoverPopup.d.ts +26 -0
- package/dist/lib/types/popover/portal/PopoverPortal.d.ts +17 -0
- package/dist/lib/types/popover/portal/PopoverPortalContext.d.ts +8 -0
- package/dist/lib/types/popover/positioner/PopoverPositioner.d.ts +38 -0
- package/dist/lib/types/popover/positioner/PopoverPositionerContext.d.ts +5 -0
- package/dist/lib/types/popover/root/PopoverRoot.d.ts +38 -0
- package/dist/lib/types/popover/root/PopoverRootContext.d.ts +25 -0
- package/dist/lib/types/popover/store/PopoverHandle.d.ts +10 -0
- package/dist/lib/types/popover/store/PopoverStore.d.ts +65 -0
- package/dist/lib/types/popover/title/PopoverTitle.d.ts +11 -0
- package/dist/lib/types/popover/trigger/PopoverTrigger.d.ts +33 -0
- package/dist/lib/types/popover/utils/ClosePartContext.d.ts +10 -0
- package/dist/lib/types/popover/utils/mergePopoverStyles.d.ts +2 -0
- package/dist/lib/types/popover/utils/stateAttributesMapping.d.ts +26 -0
- package/dist/lib/types/popover/viewport/PopoverViewport.d.ts +15 -0
- package/dist/lib/types/preview-card/arrow/PreviewCardArrow.d.ts +16 -0
- package/dist/lib/types/preview-card/backdrop/PreviewCardBackdrop.d.ts +14 -0
- package/dist/lib/types/preview-card/index.d.ts +9 -0
- package/dist/lib/types/preview-card/index.parts.d.ts +9 -0
- package/dist/lib/types/preview-card/popup/PreviewCardPopup.d.ts +23 -0
- package/dist/lib/types/preview-card/portal/PreviewCardPortal.d.ts +17 -0
- package/dist/lib/types/preview-card/portal/PreviewCardPortalContext.d.ts +8 -0
- package/dist/lib/types/preview-card/positioner/PreviewCardPositioner.d.ts +38 -0
- package/dist/lib/types/preview-card/positioner/PreviewCardPositionerContext.d.ts +5 -0
- package/dist/lib/types/preview-card/root/PreviewCardRoot.d.ts +37 -0
- package/dist/lib/types/preview-card/root/PreviewCardRootContext.d.ts +12 -0
- package/dist/lib/types/preview-card/store/PreviewCardHandle.d.ts +10 -0
- package/dist/lib/types/preview-card/store/PreviewCardStore.d.ts +34 -0
- package/dist/lib/types/preview-card/trigger/PreviewCardTrigger.d.ts +20 -0
- package/dist/lib/types/preview-card/utils/mergePreviewCardStyles.d.ts +2 -0
- package/dist/lib/types/preview-card/utils/stateAttributesMapping.d.ts +32 -0
- package/dist/lib/types/preview-card/viewport/PreviewCardViewport.d.ts +14 -0
- package/dist/lib/types/progress/index.d.ts +6 -0
- package/dist/lib/types/progress/index.parts.d.ts +6 -0
- package/dist/lib/types/progress/indicator/ProgressIndicator.d.ts +12 -0
- package/dist/lib/types/progress/label/ProgressLabel.d.ts +17 -0
- package/dist/lib/types/progress/root/ProgressRoot.d.ts +31 -0
- package/dist/lib/types/progress/root/ProgressRootContext.d.ts +13 -0
- package/dist/lib/types/progress/root/stateAttributesMapping.d.ts +3 -0
- package/dist/lib/types/progress/track/ProgressTrack.d.ts +12 -0
- package/dist/lib/types/progress/value/ProgressValue.d.ts +16 -0
- package/dist/lib/types/radio/index.d.ts +3 -0
- package/dist/lib/types/radio/index.parts.d.ts +2 -0
- package/dist/lib/types/radio/indicator/RadioIndicator.d.ts +20 -0
- package/dist/lib/types/radio/root/RadioRoot.d.ts +39 -0
- package/dist/lib/types/radio/root/RadioRootContext.d.ts +7 -0
- package/dist/lib/types/radio-group/RadioGroup.d.ts +43 -0
- package/dist/lib/types/radio-group/RadioGroupContext.d.ts +33 -0
- package/dist/lib/types/radio-group/index.d.ts +2 -0
- package/dist/lib/types/scroll-area/constants.d.ts +2 -0
- package/dist/lib/types/scroll-area/content/ScrollAreaContent.d.ts +12 -0
- package/dist/lib/types/scroll-area/corner/ScrollAreaCorner.d.ts +11 -0
- package/dist/lib/types/scroll-area/index.d.ts +7 -0
- package/dist/lib/types/scroll-area/index.parts.d.ts +6 -0
- package/dist/lib/types/scroll-area/root/ScrollAreaRoot.d.ts +58 -0
- package/dist/lib/types/scroll-area/root/ScrollAreaRootContext.d.ts +44 -0
- package/dist/lib/types/scroll-area/root/stateAttributes.d.ts +3 -0
- package/dist/lib/types/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts +28 -0
- package/dist/lib/types/scroll-area/scrollbar/ScrollAreaScrollbarContext.d.ts +7 -0
- package/dist/lib/types/scroll-area/thumb/ScrollAreaThumb.d.ts +22 -0
- package/dist/lib/types/scroll-area/utils/dom.d.ts +2 -0
- package/dist/lib/types/scroll-area/utils/eventTarget.d.ts +2 -0
- package/dist/lib/types/scroll-area/utils/getOffset.d.ts +1 -0
- package/dist/lib/types/scroll-area/utils/scrollEdges.d.ts +1 -0
- package/dist/lib/types/scroll-area/viewport/ScrollAreaViewport.d.ts +22 -0
- package/dist/lib/types/scroll-area/viewport/ScrollAreaViewportContext.d.ts +7 -0
- package/dist/lib/types/select/arrow/SelectArrow.d.ts +16 -0
- package/dist/lib/types/select/backdrop/SelectBackdrop.d.ts +14 -0
- package/dist/lib/types/select/group/SelectGroup.d.ts +11 -0
- package/dist/lib/types/select/group/SelectGroupContext.d.ts +9 -0
- package/dist/lib/types/select/group-label/SelectGroupLabel.d.ts +11 -0
- package/dist/lib/types/select/icon/SelectIcon.d.ts +12 -0
- package/dist/lib/types/select/index.d.ts +20 -0
- package/dist/lib/types/select/index.parts.d.ts +19 -0
- package/dist/lib/types/select/item/SelectItem.d.ts +32 -0
- package/dist/lib/types/select/item/SelectItemContext.d.ts +12 -0
- package/dist/lib/types/select/item-indicator/SelectItemIndicator.d.ts +18 -0
- package/dist/lib/types/select/item-text/SelectItemText.d.ts +11 -0
- package/dist/lib/types/select/label/SelectLabel.d.ts +17 -0
- package/dist/lib/types/select/list/SelectList.d.ts +16 -0
- package/dist/lib/types/select/popup/SelectPopup.d.ts +26 -0
- package/dist/lib/types/select/portal/SelectPortal.d.ts +16 -0
- package/dist/lib/types/select/portal/SelectPortalContext.d.ts +4 -0
- package/dist/lib/types/select/positioner/SelectPositioner.d.ts +37 -0
- package/dist/lib/types/select/positioner/SelectPositionerContext.d.ts +16 -0
- package/dist/lib/types/select/root/SelectRoot.d.ts +52 -0
- package/dist/lib/types/select/root/SelectRootContext.d.ts +63 -0
- package/dist/lib/types/select/scroll-arrow/SelectScrollArrow.d.ts +22 -0
- package/dist/lib/types/select/scroll-down-arrow/SelectScrollDownArrow.d.ts +15 -0
- package/dist/lib/types/select/scroll-up-arrow/SelectScrollUpArrow.d.ts +15 -0
- package/dist/lib/types/select/separator/SelectSeparator.d.ts +17 -0
- package/dist/lib/types/select/store/SelectCollection.d.ts +25 -0
- package/dist/lib/types/select/store/SelectStore.d.ts +82 -0
- package/dist/lib/types/select/trigger/SelectTrigger.d.ts +35 -0
- package/dist/lib/types/select/types.d.ts +10 -0
- package/dist/lib/types/select/utils/equality.d.ts +2 -0
- package/dist/lib/types/select/utils/mergeSelectStyles.d.ts +1 -0
- package/dist/lib/types/select/utils/scrollEdges.d.ts +3 -0
- package/dist/lib/types/select/utils/stateAttributesMapping.d.ts +37 -0
- package/dist/lib/types/select/utils/value.d.ts +7 -0
- package/dist/lib/types/select/value/SelectValue.d.ts +18 -0
- package/dist/lib/types/separator/Separator.d.ts +19 -0
- package/dist/lib/types/separator/index.d.ts +2 -0
- package/dist/lib/types/slider/control/SliderControl.d.ts +18 -0
- package/dist/lib/types/slider/index.d.ts +8 -0
- package/dist/lib/types/slider/index.parts.d.ts +7 -0
- package/dist/lib/types/slider/indicator/SliderIndicator.d.ts +12 -0
- package/dist/lib/types/slider/label/SliderLabel.d.ts +17 -0
- package/dist/lib/types/slider/root/SliderRoot.d.ts +57 -0
- package/dist/lib/types/slider/root/SliderRootContext.d.ts +63 -0
- package/dist/lib/types/slider/stateAttributesMapping.d.ts +14 -0
- package/dist/lib/types/slider/thumb/SliderThumb.d.ts +31 -0
- package/dist/lib/types/slider/thumb/SliderThumbDataAttributes.d.ts +11 -0
- package/dist/lib/types/slider/thumb/prehydrationScript.d.ts +1 -0
- package/dist/lib/types/slider/track/SliderTrack.d.ts +12 -0
- package/dist/lib/types/slider/utils/dom.d.ts +4 -0
- package/dist/lib/types/slider/utils/getPushedThumbValues.d.ts +1 -0
- package/dist/lib/types/slider/utils/getSliderValue.d.ts +1 -0
- package/dist/lib/types/slider/utils/math.d.ts +4 -0
- package/dist/lib/types/slider/utils/resolveThumbCollision.d.ts +7 -0
- package/dist/lib/types/slider/utils/roundValueToStep.d.ts +2 -0
- package/dist/lib/types/slider/utils/validateMinimumDistance.d.ts +1 -0
- package/dist/lib/types/slider/value/SliderValue.d.ts +16 -0
- package/dist/lib/types/switch/index.d.ts +3 -0
- package/dist/lib/types/switch/index.parts.d.ts +2 -0
- package/dist/lib/types/switch/root/SwitchRoot.d.ts +55 -0
- package/dist/lib/types/switch/root/SwitchRootContext.d.ts +7 -0
- package/dist/lib/types/switch/stateAttributesMapping.d.ts +9 -0
- package/dist/lib/types/switch/thumb/SwitchThumb.d.ts +12 -0
- package/dist/lib/types/tabs/index.d.ts +6 -0
- package/dist/lib/types/tabs/index.parts.d.ts +5 -0
- package/dist/lib/types/tabs/indicator/TabsIndicator.d.ts +22 -0
- package/dist/lib/types/tabs/indicator/TabsIndicatorCssVars.d.ts +8 -0
- package/dist/lib/types/tabs/indicator/prehydrationScript.d.ts +1 -0
- package/dist/lib/types/tabs/list/TabsList.d.ts +21 -0
- package/dist/lib/types/tabs/list/TabsListContext.d.ts +14 -0
- package/dist/lib/types/tabs/panel/TabsPanel.d.ts +30 -0
- package/dist/lib/types/tabs/panel/TabsPanelDataAttributes.d.ts +6 -0
- package/dist/lib/types/tabs/root/TabsRoot.d.ts +38 -0
- package/dist/lib/types/tabs/root/TabsRootContext.d.ts +43 -0
- package/dist/lib/types/tabs/root/TabsRootDataAttributes.d.ts +4 -0
- package/dist/lib/types/tabs/root/stateAttributesMapping.d.ts +8 -0
- package/dist/lib/types/tabs/tab/TabsTab.d.ts +59 -0
- package/dist/lib/types/tabs/tab/TabsTabDataAttributes.d.ts +6 -0
- package/dist/lib/types/toast/action/ToastAction.d.ts +30 -0
- package/dist/lib/types/toast/arrow/ToastArrow.d.ts +18 -0
- package/dist/lib/types/toast/close/ToastClose.d.ts +29 -0
- package/dist/lib/types/toast/content/ToastContent.d.ts +15 -0
- package/dist/lib/types/toast/createToastManager.d.ts +15 -0
- package/dist/lib/types/toast/description/ToastDescription.d.ts +16 -0
- package/dist/lib/types/toast/index.d.ts +17 -0
- package/dist/lib/types/toast/index.parts.d.ts +11 -0
- package/dist/lib/types/toast/portal/ToastPortal.d.ts +20 -0
- package/dist/lib/types/toast/positioner/ToastPositioner.d.ts +42 -0
- package/dist/lib/types/toast/positioner/ToastPositionerContext.d.ts +6 -0
- package/dist/lib/types/toast/provider/ToastProvider.d.ts +28 -0
- package/dist/lib/types/toast/provider/ToastProviderContext.d.ts +5 -0
- package/dist/lib/types/toast/root/ToastRoot.d.ts +39 -0
- package/dist/lib/types/toast/root/ToastRootContext.d.ts +14 -0
- package/dist/lib/types/toast/store/ToastStore.d.ts +60 -0
- package/dist/lib/types/toast/title/ToastTitle.d.ts +13 -0
- package/dist/lib/types/toast/types.d.ts +77 -0
- package/dist/lib/types/toast/useToastManager.d.ts +11 -0
- package/dist/lib/types/toast/utils/createToastLabelPart.d.ts +17 -0
- package/dist/lib/types/toast/utils/focusVisible.d.ts +6 -0
- package/dist/lib/types/toast/utils/generateToastId.d.ts +5 -0
- package/dist/lib/types/toast/utils/isRenderableNode.d.ts +6 -0
- package/dist/lib/types/toast/utils/mergeToastStyles.d.ts +2 -0
- package/dist/lib/types/toast/utils/resolvePromiseOptions.d.ts +2 -0
- package/dist/lib/types/toast/viewport/ToastViewport.d.ts +13 -0
- package/dist/lib/types/toggle/Toggle.d.ts +40 -0
- package/dist/lib/types/toggle/index.d.ts +2 -0
- package/dist/lib/types/toggle-group/ToggleGroup.d.ts +37 -0
- package/dist/lib/types/toggle-group/ToggleGroupContext.d.ts +25 -0
- package/dist/lib/types/toggle-group/index.d.ts +2 -0
- package/dist/lib/types/toolbar/ToolbarItemOwnerContext.d.ts +10 -0
- package/dist/lib/types/toolbar/button/ToolbarButton.d.ts +32 -0
- package/dist/lib/types/toolbar/createToolbarItem.d.ts +13 -0
- package/dist/lib/types/toolbar/group/ToolbarGroup.d.ts +16 -0
- package/dist/lib/types/toolbar/group/ToolbarGroupContext.d.ts +8 -0
- package/dist/lib/types/toolbar/index.d.ts +8 -0
- package/dist/lib/types/toolbar/index.parts.d.ts +7 -0
- package/dist/lib/types/toolbar/input/ToolbarInput.d.ts +29 -0
- package/dist/lib/types/toolbar/link/ToolbarLink.d.ts +14 -0
- package/dist/lib/types/toolbar/root/ToolbarRoot.d.ts +29 -0
- package/dist/lib/types/toolbar/root/ToolbarRootContext.d.ts +23 -0
- package/dist/lib/types/toolbar/separator/ToolbarSeparator.d.ts +16 -0
- package/dist/lib/types/tooltip/arrow/TooltipArrow.d.ts +17 -0
- package/dist/lib/types/tooltip/index.d.ts +9 -0
- package/dist/lib/types/tooltip/index.parts.d.ts +9 -0
- package/dist/lib/types/tooltip/popup/TooltipPopup.d.ts +23 -0
- package/dist/lib/types/tooltip/portal/TooltipPortal.d.ts +17 -0
- package/dist/lib/types/tooltip/portal/TooltipPortalContext.d.ts +8 -0
- package/dist/lib/types/tooltip/positioner/TooltipPositioner.d.ts +37 -0
- package/dist/lib/types/tooltip/positioner/TooltipPositionerContext.d.ts +14 -0
- package/dist/lib/types/tooltip/provider/TooltipProvider.d.ts +15 -0
- package/dist/lib/types/tooltip/provider/TooltipProviderContext.d.ts +10 -0
- package/dist/lib/types/tooltip/root/TooltipRoot.d.ts +40 -0
- package/dist/lib/types/tooltip/root/TooltipRootContext.d.ts +11 -0
- package/dist/lib/types/tooltip/store/TooltipHandle.d.ts +10 -0
- package/dist/lib/types/tooltip/store/TooltipStore.d.ts +60 -0
- package/dist/lib/types/tooltip/trigger/TooltipTrigger.d.ts +35 -0
- package/dist/lib/types/tooltip/utils/mergeTooltipStyles.d.ts +2 -0
- package/dist/lib/types/tooltip/utils/stateAttributesMapping.d.ts +68 -0
- package/dist/lib/types/tooltip/viewport/TooltipViewport.d.ts +14 -0
- package/dist/lib/types/types/index.d.ts +29 -0
- package/package.json +583 -0
|
@@ -0,0 +1,3157 @@
|
|
|
1
|
+
import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
|
|
2
|
+
import { E as pointer, S as listNavigation, b as keyboard, g as inputClear, h as inputChange, l as escapeKey, r as clearPress, t as cancelOpen, v as inputPress, w as none, y as itemPress } from "./internals/reasons.js";
|
|
3
|
+
import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
|
|
4
|
+
import { createChangeEventDetails, createGenericEventDetails } from "./internals/createBaseUIEventDetails.js";
|
|
5
|
+
import { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
|
|
6
|
+
import { composeEventHandlers } from "./internals/composeEventHandlers.js";
|
|
7
|
+
import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
|
|
8
|
+
import { a as isElement, c as isHTMLElement, l as isInteractiveElement, n as contains, o as isElementVisible, p as ownerDocument } from "./dom-Crg_2R-j.js";
|
|
9
|
+
import { i as isListIndexDisabled, n as getMinListIndex, r as getNavigatedIndex, t as getMaxListIndex } from "./compositeNavigation-BRVT1C38.js";
|
|
10
|
+
import { t as createAnchorPositioning } from "./createAnchorPositioning-C-cVOPwz.js";
|
|
11
|
+
import { t as InternalBackdrop } from "./InternalBackdrop-C_iDPVR-.js";
|
|
12
|
+
import { t as createAnchoredPopupScrollLock } from "./createAnchoredPopupScrollLock-DFuUrykR.js";
|
|
13
|
+
import { t as createClickInteraction } from "./createClickInteraction-BYsMgvup.js";
|
|
14
|
+
import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "./FloatingTree-z1JPD1dR.js";
|
|
15
|
+
import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-DEs3FAEe.js";
|
|
16
|
+
import { t as createTransitionStatus } from "./createTransitionStatus-BTlrerSS.js";
|
|
17
|
+
import { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "./popupStateMapping-nKoUwoke.js";
|
|
18
|
+
import { t as FocusManager } from "./FocusManager-BrbZVWME.js";
|
|
19
|
+
import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "./buttonSemantics-BSwDxJhh.js";
|
|
20
|
+
import { t as setRef } from "./setRef-Bt70sW7c.js";
|
|
21
|
+
import { n as useDirection } from "./DirectionContext-YORWLF08.js";
|
|
22
|
+
import { DEFAULT_FIELD_STATE_ATTRIBUTES, fieldStateAttributesMapping } from "./internals/field-constants.js";
|
|
23
|
+
import { n as useFieldRootContext } from "./FieldRootContext-IC-LWzVp.js";
|
|
24
|
+
import { n as useFormContext } from "./FormContext-pvESt85v.js";
|
|
25
|
+
import { a as defaultItemEquality, c as removeItem, i as compareItemEquality, l as selectedValueIncludes, n as isSolidAccessor, o as findItemIndex, r as areItemArraysEqual, s as findSelectionIndex, t as mergeStyleValue } from "./mergeStyleValue-Db8bRCM4.js";
|
|
26
|
+
import { r as useLabelableContext } from "./LabelableContext-DZP3rgAY.js";
|
|
27
|
+
import { i as isScrollableY } from "./scrollable-CjsSxbGr.js";
|
|
28
|
+
import { t as isAndroid } from "./platform-DYukKUir.js";
|
|
29
|
+
import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
|
|
30
|
+
import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, untrack, useContext } from "solid-js";
|
|
31
|
+
//#region src/internals/overlay/createListNavigation.ts
|
|
32
|
+
function createListNavigation(options) {
|
|
33
|
+
const enabled = () => options.enabled?.() ?? true;
|
|
34
|
+
const orientation = () => options.orientation?.() ?? "vertical";
|
|
35
|
+
const isNavigationKey = (key) => key === "Home" || key === "End" || orientation() !== "horizontal" && (key === "ArrowDown" || key === "ArrowUp") || orientation() !== "vertical" && (key === "ArrowLeft" || key === "ArrowRight");
|
|
36
|
+
let pendingOpenNavigation = null;
|
|
37
|
+
const isForwardKey = (key) => {
|
|
38
|
+
if (key === "Home" || key === "ArrowDown") return true;
|
|
39
|
+
if (key === "End" || key === "ArrowUp") return false;
|
|
40
|
+
return key === (options.rtl?.() ?? false ? "ArrowLeft" : "ArrowRight");
|
|
41
|
+
};
|
|
42
|
+
const navigate = (event, list, initial = false) => {
|
|
43
|
+
let index = options.activeIndex() ?? options.selectedIndex?.() ?? -1;
|
|
44
|
+
if (initial) index = isForwardKey(event.key) ? getMinListIndex(list, options.disabledIndices?.()) : getMaxListIndex(list, options.disabledIndices?.());
|
|
45
|
+
else {
|
|
46
|
+
const loop = options.loopFocus?.() ?? false;
|
|
47
|
+
const escapeEnabled = loop && (options.allowEscape?.() ?? false);
|
|
48
|
+
const next = getNavigatedIndex({
|
|
49
|
+
list,
|
|
50
|
+
currentIndex: index,
|
|
51
|
+
key: event.key,
|
|
52
|
+
orientation: orientation(),
|
|
53
|
+
rtl: options.rtl?.() ?? false,
|
|
54
|
+
loop: escapeEnabled ? index === -1 : loop,
|
|
55
|
+
cols: options.cols?.() ?? 1,
|
|
56
|
+
disabledIndices: options.disabledIndices?.()
|
|
57
|
+
});
|
|
58
|
+
const isEdgeKey = event.key === "Home" || event.key === "End";
|
|
59
|
+
index = next === index && escapeEnabled && index !== -1 && !isEdgeKey ? -1 : next;
|
|
60
|
+
}
|
|
61
|
+
options.onNavigate(index === -1 ? null : index, event);
|
|
62
|
+
if (!(options.virtual?.() ?? false) && index >= 0) list[index]?.focus({ preventScroll: true });
|
|
63
|
+
};
|
|
64
|
+
createEffect(() => ({
|
|
65
|
+
open: options.context.track().open,
|
|
66
|
+
list: options.list()
|
|
67
|
+
}), (state) => {
|
|
68
|
+
if (!pendingOpenNavigation || !state.open || state.list.length === 0) return;
|
|
69
|
+
const pending = pendingOpenNavigation;
|
|
70
|
+
pendingOpenNavigation = null;
|
|
71
|
+
untrack(() => navigate(pending.event, state.list, true));
|
|
72
|
+
});
|
|
73
|
+
return {
|
|
74
|
+
onKeyDown(event) {
|
|
75
|
+
if (!enabled() || !isNavigationKey(event.key)) return;
|
|
76
|
+
event.preventDefault();
|
|
77
|
+
event.stopPropagation();
|
|
78
|
+
if (!options.context.state.open) {
|
|
79
|
+
const arrowKey = event.key.startsWith("Arrow");
|
|
80
|
+
if (!(options.openOnArrowKeyDown?.() ?? true) || !arrowKey) return;
|
|
81
|
+
pendingOpenNavigation = { event };
|
|
82
|
+
const details = createChangeEventDetails(listNavigation, event, options.context.state.domReferenceElement ?? void 0);
|
|
83
|
+
options.context.setOpen(true, details);
|
|
84
|
+
if (details.isCanceled) {
|
|
85
|
+
pendingOpenNavigation = null;
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
const list = options.list();
|
|
89
|
+
if (options.context.state.open && list.length > 0) {
|
|
90
|
+
pendingOpenNavigation = null;
|
|
91
|
+
navigate(event, list, true);
|
|
92
|
+
}
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const list = options.list();
|
|
96
|
+
if (list.length > 0) navigate(event, list);
|
|
97
|
+
},
|
|
98
|
+
onItemPointerMove(event, index) {
|
|
99
|
+
if (!enabled() || !(options.focusItemOnHover?.() ?? true) || isListIndexDisabled(options.list(), index, options.disabledIndices?.())) return;
|
|
100
|
+
options.onNavigate(index, event);
|
|
101
|
+
if (!(options.virtual?.() ?? false)) options.list()[index]?.focus({ preventScroll: true });
|
|
102
|
+
},
|
|
103
|
+
onItemPointerLeave(event) {
|
|
104
|
+
if (enabled() && (options.virtual?.() ?? false)) options.onNavigate(null, event);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
//#endregion
|
|
109
|
+
//#region src/internals/overlay/createTypeahead.ts
|
|
110
|
+
function createTypeahead(options) {
|
|
111
|
+
let typed = "";
|
|
112
|
+
let previousIndex = untrack(() => options.selectedIndex?.() ?? options.activeIndex() ?? -1);
|
|
113
|
+
let matchIndex = null;
|
|
114
|
+
let resetTimer;
|
|
115
|
+
const reset = () => {
|
|
116
|
+
clearTimeout(resetTimer);
|
|
117
|
+
typed = "";
|
|
118
|
+
previousIndex = matchIndex ?? previousIndex;
|
|
119
|
+
options.onTyping?.(false);
|
|
120
|
+
};
|
|
121
|
+
onCleanup(reset);
|
|
122
|
+
createEffect(() => ({
|
|
123
|
+
open: options.context.track().open,
|
|
124
|
+
selected: options.selectedIndex?.() ?? null
|
|
125
|
+
}), (state) => {
|
|
126
|
+
if (state.open || state.selected === null) {
|
|
127
|
+
clearTimeout(resetTimer);
|
|
128
|
+
matchIndex = null;
|
|
129
|
+
typed = "";
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
const available = (index) => {
|
|
133
|
+
const element = options.elements?.()[index];
|
|
134
|
+
if (element && !isElementVisible(element) || element?.matches(":disabled")) return false;
|
|
135
|
+
const disabled = options.disabledIndices?.();
|
|
136
|
+
return !disabled || !isListIndexDisabled([], index, disabled);
|
|
137
|
+
};
|
|
138
|
+
const matchingIndex = (query, startIndex) => {
|
|
139
|
+
const list = options.list();
|
|
140
|
+
if (!list.length) return -1;
|
|
141
|
+
const normalizedStart = (startIndex % list.length + list.length) % list.length;
|
|
142
|
+
const lowerQuery = query.toLowerCase();
|
|
143
|
+
for (let offset = 0; offset < list.length; offset += 1) {
|
|
144
|
+
const index = (normalizedStart + offset) % list.length;
|
|
145
|
+
if (list[index]?.toLowerCase().startsWith(lowerQuery) && available(index)) return index;
|
|
146
|
+
}
|
|
147
|
+
return -1;
|
|
148
|
+
};
|
|
149
|
+
return {
|
|
150
|
+
onKeyDown(event) {
|
|
151
|
+
if (!(options.enabled?.() ?? true) || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
|
|
152
|
+
const list = options.list();
|
|
153
|
+
if (typed && event.key === " ") {
|
|
154
|
+
event.preventDefault();
|
|
155
|
+
event.stopPropagation();
|
|
156
|
+
options.onTyping?.(true);
|
|
157
|
+
}
|
|
158
|
+
const newSession = typed === "";
|
|
159
|
+
if (newSession) previousIndex = options.selectedIndex?.() ?? options.activeIndex() ?? -1;
|
|
160
|
+
if (list.every((text, index) => text && available(index) ? text[0]?.toLowerCase() !== text[1]?.toLowerCase() : true) && typed === event.key) {
|
|
161
|
+
typed = "";
|
|
162
|
+
previousIndex = matchIndex ?? previousIndex;
|
|
163
|
+
}
|
|
164
|
+
typed += event.key;
|
|
165
|
+
clearTimeout(resetTimer);
|
|
166
|
+
resetTimer = setTimeout(reset, options.resetMs?.() ?? 750);
|
|
167
|
+
const start = (newSession ? options.selectedIndex?.() ?? options.activeIndex() ?? -1 : previousIndex) + 1;
|
|
168
|
+
const index = matchingIndex(typed, start);
|
|
169
|
+
if (index !== -1) {
|
|
170
|
+
if (options.context.state.open && event.key !== " ") {
|
|
171
|
+
event.preventDefault();
|
|
172
|
+
event.stopPropagation();
|
|
173
|
+
}
|
|
174
|
+
options.onTyping?.(true);
|
|
175
|
+
options.onMatch(index);
|
|
176
|
+
matchIndex = index;
|
|
177
|
+
} else if (event.key !== " ") reset();
|
|
178
|
+
},
|
|
179
|
+
onBlur(event) {
|
|
180
|
+
const next = event.relatedTarget;
|
|
181
|
+
if (!contains(options.context.state.domReferenceElement, next) && !contains(options.context.state.floatingElement, next)) reset();
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
}
|
|
185
|
+
//#endregion
|
|
186
|
+
//#region src/internals/valueLabel.ts
|
|
187
|
+
/** Serializes any value to the string a form submits for it. */
|
|
188
|
+
function serializeValue(value) {
|
|
189
|
+
if (value == null) return "";
|
|
190
|
+
if (typeof value === "string") return value;
|
|
191
|
+
try {
|
|
192
|
+
return JSON.stringify(value) ?? String(value);
|
|
193
|
+
} catch {
|
|
194
|
+
return String(value);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
function isGroupedItems(items) {
|
|
198
|
+
return Array.isArray(items) && items.length > 0 && typeof items[0] === "object" && items[0] != null && "items" in items[0];
|
|
199
|
+
}
|
|
200
|
+
function flattenItems(items) {
|
|
201
|
+
if (!Array.isArray(items)) return [];
|
|
202
|
+
if (isGroupedItems(items)) return items.flatMap((group) => group.items);
|
|
203
|
+
return items;
|
|
204
|
+
}
|
|
205
|
+
/** Whether an explicit `null` item carries a label that should win over a placeholder. */
|
|
206
|
+
function hasNullItemLabel(items) {
|
|
207
|
+
if (items == null) return false;
|
|
208
|
+
if (!Array.isArray(items)) return "null" in items;
|
|
209
|
+
for (const item of flattenItems(items)) {
|
|
210
|
+
const labeled = item;
|
|
211
|
+
if (labeled && typeof labeled === "object" && labeled.value == null && labeled.label != null) return true;
|
|
212
|
+
}
|
|
213
|
+
return false;
|
|
214
|
+
}
|
|
215
|
+
/** The string form of an item as displayed to the user. */
|
|
216
|
+
function stringifyAsLabel(item, itemToStringLabel) {
|
|
217
|
+
if (itemToStringLabel && item != null) return itemToStringLabel(item) ?? "";
|
|
218
|
+
if (item && typeof item === "object") {
|
|
219
|
+
if ("label" in item && item.label != null) return String(item.label);
|
|
220
|
+
if ("value" in item) return String(item.value);
|
|
221
|
+
}
|
|
222
|
+
return serializeValue(item);
|
|
223
|
+
}
|
|
224
|
+
/** The string form of an item as submitted with a form. */
|
|
225
|
+
function stringifyAsValue(item, itemToStringValue) {
|
|
226
|
+
if (itemToStringValue && item != null) return itemToStringValue(item) ?? "";
|
|
227
|
+
if (item && typeof item === "object" && "value" in item && "label" in item) return serializeValue(item.value);
|
|
228
|
+
return serializeValue(item);
|
|
229
|
+
}
|
|
230
|
+
/** Resolves the renderable label for one selected value, falling back to its string form. */
|
|
231
|
+
function resolveSelectedLabel(value, items, itemToStringLabel) {
|
|
232
|
+
const fallback = () => stringifyAsLabel(value, itemToStringLabel);
|
|
233
|
+
if (itemToStringLabel && value != null) return itemToStringLabel(value);
|
|
234
|
+
if (value && typeof value === "object" && "label" in value && value.label != null) return value.label;
|
|
235
|
+
if (items && !Array.isArray(items)) return items[String(value)] ?? fallback();
|
|
236
|
+
if (Array.isArray(items)) {
|
|
237
|
+
const flatItems = flattenItems(items);
|
|
238
|
+
if (value == null || typeof value !== "object") {
|
|
239
|
+
const match = flatItems.find((item) => item && item.value === value);
|
|
240
|
+
return match && match.label != null ? match.label : fallback();
|
|
241
|
+
}
|
|
242
|
+
if ("value" in value) {
|
|
243
|
+
const match = flatItems.find((item) => item && item.value === value.value);
|
|
244
|
+
if (match && match.label != null) return match.label;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
return fallback();
|
|
248
|
+
}
|
|
249
|
+
/** Renders every selected value as a comma-separated label list. */
|
|
250
|
+
function resolveMultipleLabels(values, items, itemToStringLabel) {
|
|
251
|
+
return values.flatMap((value, index) => {
|
|
252
|
+
const label = resolveSelectedLabel(value, items, itemToStringLabel);
|
|
253
|
+
return index === 0 ? [label] : [", ", label];
|
|
254
|
+
});
|
|
255
|
+
}
|
|
256
|
+
//#endregion
|
|
257
|
+
//#region src/internals/filter.ts
|
|
258
|
+
var filterCache = /* @__PURE__ */ new Map();
|
|
259
|
+
function stringifyLocale(locale) {
|
|
260
|
+
if (Array.isArray(locale)) return locale.map((value) => stringifyLocale(value)).join(",");
|
|
261
|
+
if (locale == null) return "";
|
|
262
|
+
return String(locale);
|
|
263
|
+
}
|
|
264
|
+
/** Matches items against a query using `Intl.Collator` for robust string matching. */
|
|
265
|
+
function getFilter(options = {}) {
|
|
266
|
+
const mergedOptions = {
|
|
267
|
+
usage: "search",
|
|
268
|
+
sensitivity: "base",
|
|
269
|
+
ignorePunctuation: true,
|
|
270
|
+
...options
|
|
271
|
+
};
|
|
272
|
+
const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
|
|
273
|
+
const cachedFilter = filterCache.get(cacheKey);
|
|
274
|
+
if (cachedFilter) return cachedFilter;
|
|
275
|
+
const collator = new Intl.Collator(options.locale, mergedOptions);
|
|
276
|
+
const filter = {
|
|
277
|
+
contains(item, query, itemToString) {
|
|
278
|
+
if (!query) return true;
|
|
279
|
+
const itemString = stringifyAsLabel(item, itemToString);
|
|
280
|
+
for (let index = 0; index <= itemString.length - query.length; index += 1) if (collator.compare(itemString.slice(index, index + query.length), query) === 0) return true;
|
|
281
|
+
return false;
|
|
282
|
+
},
|
|
283
|
+
startsWith(item, query, itemToString) {
|
|
284
|
+
if (!query) return true;
|
|
285
|
+
const itemString = stringifyAsLabel(item, itemToString);
|
|
286
|
+
return collator.compare(itemString.slice(0, query.length), query) === 0;
|
|
287
|
+
},
|
|
288
|
+
endsWith(item, query, itemToString) {
|
|
289
|
+
if (!query) return true;
|
|
290
|
+
const itemString = stringifyAsLabel(item, itemToString);
|
|
291
|
+
const queryLength = query.length;
|
|
292
|
+
return itemString.length >= queryLength && collator.compare(itemString.slice(itemString.length - queryLength), query) === 0;
|
|
293
|
+
}
|
|
294
|
+
};
|
|
295
|
+
filterCache.set(cacheKey, filter);
|
|
296
|
+
return filter;
|
|
297
|
+
}
|
|
298
|
+
//#endregion
|
|
299
|
+
//#region src/combobox/store/ComboboxItemRegistry.ts
|
|
300
|
+
/**
|
|
301
|
+
* The live registry of rendered `<Combobox.Item>` elements.
|
|
302
|
+
*
|
|
303
|
+
* Registration order seeds the position; once every item has an element the list is ordered by
|
|
304
|
+
* document position so a reordered or conditionally rendered list keeps indices in sync with
|
|
305
|
+
* what the user sees. An item that declares an explicit `index` keeps that index instead, which
|
|
306
|
+
* is how externally virtualized and `items`-driven lists address their windowed rows.
|
|
307
|
+
*/
|
|
308
|
+
var ComboboxItemRegistry = class {
|
|
309
|
+
registrations = /* @__PURE__ */ new Map();
|
|
310
|
+
revision;
|
|
311
|
+
setRevision;
|
|
312
|
+
order = 0;
|
|
313
|
+
constructor() {
|
|
314
|
+
const [revision, setRevision] = createSignal(0, { ownedWrite: true });
|
|
315
|
+
this.revision = revision;
|
|
316
|
+
this.setRevision = setRevision;
|
|
317
|
+
}
|
|
318
|
+
register(item) {
|
|
319
|
+
const registration = {
|
|
320
|
+
...item,
|
|
321
|
+
order: this.order
|
|
322
|
+
};
|
|
323
|
+
this.order += 1;
|
|
324
|
+
this.registrations.set(item.token, registration);
|
|
325
|
+
this.touch();
|
|
326
|
+
return () => {
|
|
327
|
+
if (this.registrations.delete(item.token)) this.touch();
|
|
328
|
+
};
|
|
329
|
+
}
|
|
330
|
+
touch() {
|
|
331
|
+
this.setRevision((value) => value + 1);
|
|
332
|
+
}
|
|
333
|
+
items() {
|
|
334
|
+
this.revision();
|
|
335
|
+
return Array.from(this.registrations.values()).sort(compareItems);
|
|
336
|
+
}
|
|
337
|
+
/** The index the item at `token` occupies, or `-1` when it is not registered. */
|
|
338
|
+
indexOf(token) {
|
|
339
|
+
const items = this.items();
|
|
340
|
+
const position = items.findIndex((item) => item.token === token);
|
|
341
|
+
if (position === -1) return -1;
|
|
342
|
+
return items[position]?.index() ?? position;
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* DOM elements addressed by index. Explicit indices can leave holes, which list navigation
|
|
346
|
+
* treats as absent rather than disabled.
|
|
347
|
+
*/
|
|
348
|
+
elements() {
|
|
349
|
+
const items = this.items();
|
|
350
|
+
const elements = [];
|
|
351
|
+
items.forEach((item, position) => {
|
|
352
|
+
elements[item.index() ?? position] = item.element();
|
|
353
|
+
});
|
|
354
|
+
for (let index = 0; index < elements.length; index += 1) elements[index] ??= null;
|
|
355
|
+
return elements;
|
|
356
|
+
}
|
|
357
|
+
values() {
|
|
358
|
+
const items = this.items();
|
|
359
|
+
const values = [];
|
|
360
|
+
items.forEach((item, position) => {
|
|
361
|
+
values[item.index() ?? position] = item.value();
|
|
362
|
+
});
|
|
363
|
+
return values;
|
|
364
|
+
}
|
|
365
|
+
labels() {
|
|
366
|
+
return this.elements().map((element) => element?.textContent ?? null);
|
|
367
|
+
}
|
|
368
|
+
disabledIndices() {
|
|
369
|
+
return this.items().flatMap((item, position) => item.disabled() ? [item.index() ?? position] : []);
|
|
370
|
+
}
|
|
371
|
+
size() {
|
|
372
|
+
return this.items().length;
|
|
373
|
+
}
|
|
374
|
+
};
|
|
375
|
+
function compareItems(first, second) {
|
|
376
|
+
const firstIndex = first.index();
|
|
377
|
+
const secondIndex = second.index();
|
|
378
|
+
if (firstIndex !== void 0 && secondIndex !== void 0) return firstIndex - secondIndex;
|
|
379
|
+
const firstElement = first.element();
|
|
380
|
+
const secondElement = second.element();
|
|
381
|
+
if (firstElement && secondElement && firstElement !== secondElement && firstElement.isConnected && secondElement.isConnected) {
|
|
382
|
+
const position = firstElement.compareDocumentPosition(secondElement);
|
|
383
|
+
if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
|
|
384
|
+
if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
|
|
385
|
+
}
|
|
386
|
+
return first.order - second.order;
|
|
387
|
+
}
|
|
388
|
+
//#endregion
|
|
389
|
+
//#region src/combobox/store/ComboboxStore.ts
|
|
390
|
+
/**
|
|
391
|
+
* A plain read/write pair. The setter always writes through a thunk so a value that happens to
|
|
392
|
+
* be a function is stored rather than invoked as an updater.
|
|
393
|
+
*/
|
|
394
|
+
function signal(initial) {
|
|
395
|
+
const [read, write] = createSignal(() => initial, { ownedWrite: true });
|
|
396
|
+
return [read, (value) => {
|
|
397
|
+
write(() => value);
|
|
398
|
+
}];
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Combobox popup state shared by every part.
|
|
402
|
+
*
|
|
403
|
+
* The highlighted and selected positions are indices rather than elements because a combobox can
|
|
404
|
+
* be driven by the `items` prop or by an external virtualizer, where no element exists for a row
|
|
405
|
+
* until it is windowed in.
|
|
406
|
+
*/
|
|
407
|
+
var ComboboxStore = class extends PopupStore {
|
|
408
|
+
collection = new ComboboxItemRegistry();
|
|
409
|
+
/**
|
|
410
|
+
* Whether the last interaction came from the keyboard. Read at event time to attribute a
|
|
411
|
+
* highlight change, so it stays a plain field rather than a signal.
|
|
412
|
+
*/
|
|
413
|
+
keyboardActive = true;
|
|
414
|
+
/**
|
|
415
|
+
* The item element that received the last `pointerdown`, used to tell a click apart from the
|
|
416
|
+
* release of a drag-select gesture that started somewhere else.
|
|
417
|
+
*/
|
|
418
|
+
pointerDownItem = null;
|
|
419
|
+
/** A keyboard event standing in for the synthetic click it dispatched on the active item. */
|
|
420
|
+
selectionEvent = null;
|
|
421
|
+
chipsContainerElement = null;
|
|
422
|
+
clearElement = null;
|
|
423
|
+
emptyElement = null;
|
|
424
|
+
startDismissElement = null;
|
|
425
|
+
endDismissElement = null;
|
|
426
|
+
activeIndex;
|
|
427
|
+
setActiveIndex;
|
|
428
|
+
selectedIndex;
|
|
429
|
+
setSelectedIndex;
|
|
430
|
+
forceMounted;
|
|
431
|
+
setForceMounted;
|
|
432
|
+
labelId;
|
|
433
|
+
setLabelId;
|
|
434
|
+
listElement;
|
|
435
|
+
setListElement;
|
|
436
|
+
popupSide;
|
|
437
|
+
setPopupSide;
|
|
438
|
+
openMethod;
|
|
439
|
+
setOpenMethod;
|
|
440
|
+
/**
|
|
441
|
+
* Whether `<Combobox.Input>` is rendered inside the popup. That inverts the anatomy: the
|
|
442
|
+
* trigger becomes the labelled combobox control and the popup becomes a dialog.
|
|
443
|
+
*/
|
|
444
|
+
inputInsidePopup;
|
|
445
|
+
setInputInsidePopup;
|
|
446
|
+
inputOwnsFormValue;
|
|
447
|
+
setInputOwnsFormValue;
|
|
448
|
+
constructor(options) {
|
|
449
|
+
super(options);
|
|
450
|
+
[this.activeIndex, this.setActiveIndex] = signal(null);
|
|
451
|
+
[this.selectedIndex, this.setSelectedIndex] = signal(null);
|
|
452
|
+
[this.forceMounted, this.setForceMounted] = signal(false);
|
|
453
|
+
[this.labelId, this.setLabelId] = signal(void 0);
|
|
454
|
+
[this.listElement, this.setListElement] = signal(null);
|
|
455
|
+
[this.popupSide, this.setPopupSide] = signal(null);
|
|
456
|
+
[this.openMethod, this.setOpenMethod] = signal(null);
|
|
457
|
+
[this.inputInsidePopup, this.setInputInsidePopup] = signal(true);
|
|
458
|
+
[this.inputOwnsFormValue, this.setInputOwnsFormValue] = signal(false);
|
|
459
|
+
}
|
|
460
|
+
/** The item elements addressed by index, as list navigation and typeahead see them. */
|
|
461
|
+
elements() {
|
|
462
|
+
return this.collection.elements();
|
|
463
|
+
}
|
|
464
|
+
/**
|
|
465
|
+
* The popup side is only meaningful while the positioner is mounted; the store retains the last
|
|
466
|
+
* resolved side after the popup unmounts so an exit animation does not lose it.
|
|
467
|
+
*/
|
|
468
|
+
resolvedPopupSide() {
|
|
469
|
+
return this.track().mounted && this.track().positionerElement ? this.popupSide() : null;
|
|
470
|
+
}
|
|
471
|
+
resetAfterClose() {
|
|
472
|
+
this.setOpenMethod(null);
|
|
473
|
+
this.pointerDownItem = null;
|
|
474
|
+
this.selectionEvent = null;
|
|
475
|
+
}
|
|
476
|
+
};
|
|
477
|
+
//#endregion
|
|
478
|
+
//#region src/combobox/root/ComboboxRootContext.ts
|
|
479
|
+
var MISSING_ROOT = Symbol("ComboboxRootContext");
|
|
480
|
+
var ComboboxRootContext = createContext(MISSING_ROOT);
|
|
481
|
+
function useComboboxRootContext() {
|
|
482
|
+
const context = useContext(ComboboxRootContext);
|
|
483
|
+
if (context === MISSING_ROOT) throw new Error("Base UI: ComboboxRootContext is missing. Combobox parts must be placed within <Combobox.Root>.");
|
|
484
|
+
return context;
|
|
485
|
+
}
|
|
486
|
+
var MISSING_GROUP_COLLECTION = Symbol("ComboboxGroupCollectionContext");
|
|
487
|
+
/** Scopes `<Combobox.Collection>` to the items of the enclosing `<Combobox.Group items>`. */
|
|
488
|
+
var ComboboxGroupCollectionContext = createContext(MISSING_GROUP_COLLECTION);
|
|
489
|
+
function useComboboxGroupCollectionContext() {
|
|
490
|
+
const context = useContext(ComboboxGroupCollectionContext);
|
|
491
|
+
return context === MISSING_GROUP_COLLECTION ? void 0 : context;
|
|
492
|
+
}
|
|
493
|
+
//#endregion
|
|
494
|
+
//#region src/combobox/root/AriaCombobox.tsx
|
|
495
|
+
var _tmpl$$1 = [
|
|
496
|
+
"<input",
|
|
497
|
+
"",
|
|
498
|
+
"",
|
|
499
|
+
"",
|
|
500
|
+
"",
|
|
501
|
+
"",
|
|
502
|
+
"",
|
|
503
|
+
"",
|
|
504
|
+
"",
|
|
505
|
+
" tabindex=\"-1\" style=\"",
|
|
506
|
+
"\" aria-hidden=\"true\"",
|
|
507
|
+
"",
|
|
508
|
+
">"
|
|
509
|
+
];
|
|
510
|
+
var _tmpl$2 = [
|
|
511
|
+
"<input",
|
|
512
|
+
" type=\"hidden\"",
|
|
513
|
+
"",
|
|
514
|
+
"",
|
|
515
|
+
"",
|
|
516
|
+
">"
|
|
517
|
+
];
|
|
518
|
+
var HIDDEN_INPUT_STYLE = {
|
|
519
|
+
"clip-path": "inset(50%)",
|
|
520
|
+
overflow: "hidden",
|
|
521
|
+
"white-space": "nowrap",
|
|
522
|
+
border: "0",
|
|
523
|
+
padding: "0",
|
|
524
|
+
width: "1px",
|
|
525
|
+
height: "1px",
|
|
526
|
+
margin: "-1px",
|
|
527
|
+
position: "fixed",
|
|
528
|
+
top: "0",
|
|
529
|
+
left: "0"
|
|
530
|
+
};
|
|
531
|
+
var HIDDEN_NAMED_INPUT_STYLE = {
|
|
532
|
+
...HIDDEN_INPUT_STYLE,
|
|
533
|
+
position: "absolute"
|
|
534
|
+
};
|
|
535
|
+
/** Sentinel meaning "nothing has been highlighted yet", distinct from a real `undefined` value. */
|
|
536
|
+
var NO_ACTIVE_VALUE = Symbol("none");
|
|
537
|
+
var INITIAL_LAST_HIGHLIGHT = {
|
|
538
|
+
value: NO_ACTIVE_VALUE,
|
|
539
|
+
index: -1
|
|
540
|
+
};
|
|
541
|
+
/**
|
|
542
|
+
* The shared combobox engine behind `Combobox.Root` and `Autocomplete.Root`.
|
|
543
|
+
* @internal
|
|
544
|
+
*/
|
|
545
|
+
function AriaCombobox(props) {
|
|
546
|
+
var _v$, _g$2, _g$, _v$6;
|
|
547
|
+
const field = useFieldRootContext(true);
|
|
548
|
+
const formContext = useFormContext();
|
|
549
|
+
const labelable = useLabelableContext();
|
|
550
|
+
const direction = useDirection();
|
|
551
|
+
const inheritedTree = useFloatingTree();
|
|
552
|
+
const inheritedParentNodeId = useFloatingParentNodeId();
|
|
553
|
+
const tree = inheritedTree ?? new FloatingTreeStore();
|
|
554
|
+
const fieldControlSource = Symbol("Combobox");
|
|
555
|
+
const generatedId = `base-ui-${createUniqueId()}`;
|
|
556
|
+
const floatingId = `base-ui-${createUniqueId()}`;
|
|
557
|
+
const nodeId = createUniqueId();
|
|
558
|
+
const controlledSelected = untrack(() => props.selectedValue !== void 0);
|
|
559
|
+
const controlledInput = untrack(() => props.inputValue !== void 0);
|
|
560
|
+
const controlledOpen = untrack(() => props.open !== void 0);
|
|
561
|
+
const hasInputValueProp = untrack(() => props.inputValue !== void 0 || props.defaultInputValue !== void 0);
|
|
562
|
+
const selectionMode = createMemo(() => props.selectionMode);
|
|
563
|
+
const multiple = createMemo(() => props.selectionMode === "multiple");
|
|
564
|
+
const single = createMemo(() => props.selectionMode === "single");
|
|
565
|
+
const comparator = createMemo(() => props.isItemEqualToValue ?? defaultItemEquality);
|
|
566
|
+
const itemToStringLabel = () => props.itemToStringLabel;
|
|
567
|
+
const itemToStringValue = () => props.itemToStringValue;
|
|
568
|
+
const initialSelectedValue = untrack(() => {
|
|
569
|
+
const defaultValue = props.defaultSelectedValue;
|
|
570
|
+
if (defaultValue !== void 0 && defaultValue !== null) return Array.isArray(defaultValue) ? defaultValue.slice() : defaultValue;
|
|
571
|
+
return props.selectionMode === "multiple" ? [] : defaultValue ?? null;
|
|
572
|
+
});
|
|
573
|
+
const [uncontrolledSelected, setUncontrolledSelected] = createSignal(() => initialSelectedValue);
|
|
574
|
+
const selectedValue = createMemo(() => controlledSelected ? props.selectedValue ?? null : uncontrolledSelected());
|
|
575
|
+
const initialDefaultInputValue = untrack(() => {
|
|
576
|
+
if (hasInputValueProp) return props.defaultInputValue ?? props.inputValue ?? "";
|
|
577
|
+
if (props.selectionMode === "single") return stringifyAsLabel(selectedValue(), props.itemToStringLabel);
|
|
578
|
+
return "";
|
|
579
|
+
});
|
|
580
|
+
const [uncontrolledInput, setUncontrolledInput] = createSignal(initialDefaultInputValue);
|
|
581
|
+
const inputValue = createMemo(() => controlledInput ? props.inputValue ?? "" : uncontrolledInput());
|
|
582
|
+
const [queryChangedAfterOpen, setQueryChangedAfterOpen] = createSignal(false);
|
|
583
|
+
const [closeQuery, setCloseQuery] = createSignal(null);
|
|
584
|
+
const [inputElement, setInputElement] = createSignal(null, { ownedWrite: true });
|
|
585
|
+
const [triggerElement, setTriggerElement] = createSignal(null, { ownedWrite: true });
|
|
586
|
+
const [inputGroupElement, setInputGroupElement] = createSignal(null, { ownedWrite: true });
|
|
587
|
+
const [internalBackdropElement, setInternalBackdropElement] = createSignal(null, { ownedWrite: true });
|
|
588
|
+
const [hiddenInputElement, setHiddenInputElement] = createSignal(null, { ownedWrite: true });
|
|
589
|
+
const id = createMemo(() => props.id ?? generatedId);
|
|
590
|
+
const disabled = createMemo(() => field.disabled() || (props.disabled ?? false));
|
|
591
|
+
const readOnly = createMemo(() => props.readOnly ?? false);
|
|
592
|
+
const required = createMemo(() => props.required ?? false);
|
|
593
|
+
const modal = createMemo(() => props.modal ?? false);
|
|
594
|
+
const grid = createMemo(() => props.grid ?? false);
|
|
595
|
+
const virtualized = createMemo(() => props.virtualized ?? false);
|
|
596
|
+
const inline = createMemo(() => props.inline ?? false);
|
|
597
|
+
const openOnInputClick = createMemo(() => props.openOnInputClick ?? true);
|
|
598
|
+
const keepHighlight = createMemo(() => props.keepHighlight ?? false);
|
|
599
|
+
const highlightItemOnHover = createMemo(() => props.highlightItemOnHover ?? true);
|
|
600
|
+
const loopFocus = createMemo(() => props.loopFocus ?? true);
|
|
601
|
+
const submitOnItemClick = createMemo(() => props.submitOnItemClick ?? false);
|
|
602
|
+
const autoCompleteMode = createMemo(() => props.autoComplete ?? "list");
|
|
603
|
+
const limit = createMemo(() => props.limit ?? -1);
|
|
604
|
+
const name = createMemo(() => field.name() ?? props.name);
|
|
605
|
+
const form = createMemo(() => props.form);
|
|
606
|
+
const hasItems = createMemo(() => props.items !== void 0);
|
|
607
|
+
const hasFilteredItemsProp = createMemo(() => props.filteredItems !== void 0);
|
|
608
|
+
const autoHighlight = createMemo(() => {
|
|
609
|
+
if (props.autoHighlight === "always") return "always";
|
|
610
|
+
return props.autoHighlight ? "input-change" : false;
|
|
611
|
+
});
|
|
612
|
+
const collatorFilter = createMemo(() => getFilter({ locale: props.locale }));
|
|
613
|
+
const filter = createMemo(() => {
|
|
614
|
+
if (props.filter === null) return () => true;
|
|
615
|
+
if (props.filter !== void 0) return props.filter;
|
|
616
|
+
const collator = collatorFilter();
|
|
617
|
+
const toLabel = props.itemToStringLabel;
|
|
618
|
+
return (item, query) => item == null ? false : collator.contains(item, query, toLabel);
|
|
619
|
+
});
|
|
620
|
+
const query = createMemo(() => closeQuery() ?? String(inputValue()).trim());
|
|
621
|
+
const selectedLabelString = createMemo(() => single() ? stringifyAsLabel(selectedValue(), props.itemToStringLabel) : "");
|
|
622
|
+
const shouldBypassFiltering = createMemo(() => {
|
|
623
|
+
const label = selectedLabelString();
|
|
624
|
+
const currentQuery = query();
|
|
625
|
+
return single() && !queryChangedAfterOpen() && currentQuery !== "" && label.length === currentQuery.length && collatorFilter().contains(label, currentQuery);
|
|
626
|
+
});
|
|
627
|
+
const filterQuery = createMemo(() => shouldBypassFiltering() ? "" : query());
|
|
628
|
+
const shouldIgnoreExternalFiltering = createMemo(() => hasItems() && hasFilteredItemsProp() && shouldBypassFiltering());
|
|
629
|
+
const flatItems = createMemo(() => flattenItems(props.items));
|
|
630
|
+
const filteredItems = createMemo(() => {
|
|
631
|
+
if (props.filteredItems !== void 0 && !shouldIgnoreExternalFiltering()) return props.filteredItems;
|
|
632
|
+
const items = props.items;
|
|
633
|
+
if (items === void 0) return [];
|
|
634
|
+
const currentQuery = filterQuery();
|
|
635
|
+
const currentLimit = limit();
|
|
636
|
+
const match = filter();
|
|
637
|
+
const toLabel = props.itemToStringLabel;
|
|
638
|
+
if (isGroupedItems(items)) {
|
|
639
|
+
const resultingGroups = [];
|
|
640
|
+
let currentCount = 0;
|
|
641
|
+
for (const group of items) {
|
|
642
|
+
if (currentLimit > -1 && currentCount >= currentLimit) break;
|
|
643
|
+
const remainingLimit = currentLimit > -1 ? currentLimit - currentCount : Infinity;
|
|
644
|
+
const itemsToTake = currentQuery === "" ? group.items.slice(0, remainingLimit) : [];
|
|
645
|
+
if (currentQuery !== "") for (const item of group.items) {
|
|
646
|
+
if (itemsToTake.length >= remainingLimit) break;
|
|
647
|
+
if (match(item, currentQuery, toLabel)) itemsToTake.push(item);
|
|
648
|
+
}
|
|
649
|
+
if (itemsToTake.length > 0) {
|
|
650
|
+
resultingGroups.push({
|
|
651
|
+
...group,
|
|
652
|
+
items: itemsToTake
|
|
653
|
+
});
|
|
654
|
+
currentCount += itemsToTake.length;
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
return resultingGroups;
|
|
658
|
+
}
|
|
659
|
+
const flat = flatItems();
|
|
660
|
+
if (currentQuery === "") return currentLimit > -1 ? flat.slice(0, currentLimit) : flat;
|
|
661
|
+
const limitedItems = [];
|
|
662
|
+
for (const item of flat) {
|
|
663
|
+
if (currentLimit > -1 && limitedItems.length >= currentLimit) break;
|
|
664
|
+
if (match(item, currentQuery, toLabel)) limitedItems.push(item);
|
|
665
|
+
}
|
|
666
|
+
return limitedItems;
|
|
667
|
+
});
|
|
668
|
+
const flatFilteredItems = createMemo(() => {
|
|
669
|
+
const current = filteredItems();
|
|
670
|
+
return isGroupedItems(current) ? current.flatMap((group) => group.items) : current;
|
|
671
|
+
});
|
|
672
|
+
const listEmpty = createMemo(() => filteredItems().length === 0);
|
|
673
|
+
let hadInputClear = false;
|
|
674
|
+
let lastHighlight = INITIAL_LAST_HIGHLIGHT;
|
|
675
|
+
let pendingQueryHighlight = null;
|
|
676
|
+
let pendingInitialHighlight = null;
|
|
677
|
+
let initializedOpen = false;
|
|
678
|
+
let previousSelectedValue = cloneValue(untrack(selectedValue));
|
|
679
|
+
let previousInputValue = untrack(inputValue);
|
|
680
|
+
let previousItems = untrack(() => props.items);
|
|
681
|
+
let previousQuery = untrack(query);
|
|
682
|
+
const store = new ComboboxStore({
|
|
683
|
+
controlledOpen: () => controlledOpen ? props.open : void 0,
|
|
684
|
+
floatingId,
|
|
685
|
+
nodeId,
|
|
686
|
+
onOpenChange: () => (open, details) => {
|
|
687
|
+
if (store.open() === open) return;
|
|
688
|
+
if (!open && props.actionsRef) details.preventUnmountOnClose();
|
|
689
|
+
if (details.reason === "escape-key" && hasItems() && flatFilteredItems().length === 0 && !store.emptyElement) details.allowPropagation();
|
|
690
|
+
props.onOpenChange?.(open, details);
|
|
691
|
+
if (details.isCanceled) return;
|
|
692
|
+
applyOpenSideEffects(open, details);
|
|
693
|
+
},
|
|
694
|
+
onOpenChangeComplete: () => props.onOpenChangeComplete
|
|
695
|
+
});
|
|
696
|
+
store.update({ open: untrack(() => props.open ?? props.defaultOpen ?? false) });
|
|
697
|
+
store.configureTriggerUnmount({ closeOnActiveTriggerUnmount: false });
|
|
698
|
+
store.setInputOwnsFormValue(untrack(() => props.selectionMode === "none"));
|
|
699
|
+
const node = createFloatingNode({
|
|
700
|
+
tree,
|
|
701
|
+
id: nodeId,
|
|
702
|
+
parentId: inheritedParentNodeId,
|
|
703
|
+
context: () => store.context.floatingRoot
|
|
704
|
+
});
|
|
705
|
+
const presence = createPopupPresence(store, () => resolvedAnimatedElement(), { onUnmount: () => handleUnmount() });
|
|
706
|
+
/**
|
|
707
|
+
* The element whose exit animation gates the unmount. An inline list has no popup of its own,
|
|
708
|
+
* so a `Dialog` composed around it owns the animation; `[role="dialog"]` is more interoperable
|
|
709
|
+
* than a context here because it also works with third-party modal libraries.
|
|
710
|
+
*/
|
|
711
|
+
function resolvedAnimatedElement() {
|
|
712
|
+
if (inline()) return store.track().positionerElement?.closest("[role=\"dialog\"]") ?? null;
|
|
713
|
+
return store.track().popupElement;
|
|
714
|
+
}
|
|
715
|
+
/** Item values addressed by index, from `items` when provided and rendered items otherwise. */
|
|
716
|
+
const itemValues = createMemo(() => hasItems() || hasFilteredItemsProp() ? flatFilteredItems() : store.collection.values());
|
|
717
|
+
createMemo(() => {
|
|
718
|
+
const rendered = store.collection.labels();
|
|
719
|
+
if (!hasItems()) return rendered;
|
|
720
|
+
const derived = flatFilteredItems().map((item) => stringifyAsLabel(item, props.itemToStringLabel));
|
|
721
|
+
if (!store.forceMounted()) return derived;
|
|
722
|
+
return derived.map((label, index) => rendered[index] ?? label);
|
|
723
|
+
});
|
|
724
|
+
const listElements = createMemo(() => {
|
|
725
|
+
const elements = store.collection.elements();
|
|
726
|
+
const length = itemValues().length;
|
|
727
|
+
if (elements.length < length) elements.length = length;
|
|
728
|
+
return elements;
|
|
729
|
+
});
|
|
730
|
+
/** Columns inferred from the first rendered `<Combobox.Row>`, for grid navigation. */
|
|
731
|
+
const cols = createMemo(() => {
|
|
732
|
+
if (!grid()) return 1;
|
|
733
|
+
store.collection.items();
|
|
734
|
+
const row = store.listElement()?.querySelector("[role=\"row\"]");
|
|
735
|
+
return Math.max(1, row?.childElementCount ?? 1);
|
|
736
|
+
});
|
|
737
|
+
const hasSelectedValue = createMemo(() => {
|
|
738
|
+
const current = selectedValue();
|
|
739
|
+
if (current == null) return false;
|
|
740
|
+
if (multiple() && Array.isArray(current)) return current.length > 0;
|
|
741
|
+
return true;
|
|
742
|
+
});
|
|
743
|
+
const hasSelectionChips = createMemo(() => {
|
|
744
|
+
const current = selectedValue();
|
|
745
|
+
return Array.isArray(current) && current.length > 0;
|
|
746
|
+
});
|
|
747
|
+
const fieldRawValue = createMemo(() => selectionMode() === "none" ? inputValue() : selectedValue());
|
|
748
|
+
const fieldStringValue = createMemo(() => {
|
|
749
|
+
if (selectionMode() === "none") return inputValue();
|
|
750
|
+
const current = selectedValue();
|
|
751
|
+
return Array.isArray(current) ? current.map((value) => stringifyAsValue(value, props.itemToStringValue)) : stringifyAsValue(current, props.itemToStringValue);
|
|
752
|
+
});
|
|
753
|
+
const serializedValue = createMemo(() => {
|
|
754
|
+
const raw = fieldRawValue();
|
|
755
|
+
return Array.isArray(raw) ? "" : stringifyAsValue(raw, props.itemToStringValue);
|
|
756
|
+
});
|
|
757
|
+
const hiddenInputName = createMemo(() => multiple() || selectionMode() === "none" && store.inputOwnsFormValue() ? void 0 : name());
|
|
758
|
+
function emitHighlight(value, index, type) {
|
|
759
|
+
if (index === -1) {
|
|
760
|
+
if (lastHighlight === INITIAL_LAST_HIGHLIGHT) return;
|
|
761
|
+
lastHighlight = INITIAL_LAST_HIGHLIGHT;
|
|
762
|
+
} else lastHighlight = {
|
|
763
|
+
value,
|
|
764
|
+
index
|
|
765
|
+
};
|
|
766
|
+
props.onItemHighlighted?.(value, createGenericEventDetails(type, void 0, { index }));
|
|
767
|
+
}
|
|
768
|
+
function setIndices(update) {
|
|
769
|
+
if (update.selectedIndex !== void 0) store.setSelectedIndex(update.selectedIndex);
|
|
770
|
+
if (update.activeIndex === void 0) return;
|
|
771
|
+
store.setActiveIndex(update.activeIndex);
|
|
772
|
+
const type = update.type || "none";
|
|
773
|
+
if (update.activeIndex === null) emitHighlight(void 0, -1, type);
|
|
774
|
+
else emitHighlight(untrack(itemValues)[update.activeIndex], update.activeIndex, type);
|
|
775
|
+
}
|
|
776
|
+
/** Resets a non-virtualized list's own scroller so a new query starts at the top. */
|
|
777
|
+
function resetListScroll() {
|
|
778
|
+
const list = store.listElement();
|
|
779
|
+
if (virtualized() || !list) return;
|
|
780
|
+
const popup = store.track().popupElement;
|
|
781
|
+
let node = list.firstElementChild ?? list;
|
|
782
|
+
while (isHTMLElement(node)) {
|
|
783
|
+
if (popup ? !contains(popup, node) : node.getAttribute("role") === "dialog") break;
|
|
784
|
+
if (isScrollableY(node)) {
|
|
785
|
+
node.scrollTop = 0;
|
|
786
|
+
break;
|
|
787
|
+
}
|
|
788
|
+
node = node.parentElement;
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
function setInputValue(next, details) {
|
|
792
|
+
hadInputClear = details.reason === inputClear;
|
|
793
|
+
props.onInputValueChange?.(next, details);
|
|
794
|
+
if (details.isCanceled) return;
|
|
795
|
+
if (details.reason === "input-change") {
|
|
796
|
+
if (store.open() && closeQuery() !== null) setCloseQuery(null);
|
|
797
|
+
const event = details.event;
|
|
798
|
+
const inputType = event.inputType;
|
|
799
|
+
if (event.type === "compositionend" || inputType != null && inputType !== "" && inputType !== "insertReplacementText") {
|
|
800
|
+
const hasQuery = next.trim() !== "";
|
|
801
|
+
if (hasQuery) setQueryChangedAfterOpen(true);
|
|
802
|
+
pendingQueryHighlight = { hasQuery };
|
|
803
|
+
resetListScroll();
|
|
804
|
+
if (hasQuery && autoHighlight() && store.activeIndex() == null && (store.open() || inline())) store.setActiveIndex(0);
|
|
805
|
+
}
|
|
806
|
+
} else if (details.reason === "input-clear" && next === "" && store.inputInsidePopup()) pendingQueryHighlight = {
|
|
807
|
+
hasQuery: false,
|
|
808
|
+
selection: true
|
|
809
|
+
};
|
|
810
|
+
if (!controlledInput) setUncontrolledInput(next);
|
|
811
|
+
}
|
|
812
|
+
function setOpen(nextOpen, details) {
|
|
813
|
+
return store.setOpen(nextOpen, details);
|
|
814
|
+
}
|
|
815
|
+
/**
|
|
816
|
+
* Runs after the change is accepted but before it commits, so `store.open()` still reports the
|
|
817
|
+
* state being left behind.
|
|
818
|
+
*/
|
|
819
|
+
function applyOpenSideEffects(nextOpen, details) {
|
|
820
|
+
if (nextOpen && store.inputInsidePopup() && !inline() && closeQuery() !== null) {
|
|
821
|
+
setQueryChangedAfterOpen(false);
|
|
822
|
+
setCloseQuery(null);
|
|
823
|
+
if (inputValue() !== "" && details.reason !== "input-change") setInputValue("", createChangeEventDetails(inputClear, details.event));
|
|
824
|
+
}
|
|
825
|
+
if (!nextOpen && queryChangedAfterOpen()) {
|
|
826
|
+
const currentQuery = query();
|
|
827
|
+
if (single()) {
|
|
828
|
+
if (!inline()) setCloseQuery(currentQuery);
|
|
829
|
+
if (currentQuery === "") setQueryChangedAfterOpen(false);
|
|
830
|
+
} else if (multiple()) {
|
|
831
|
+
if (!inline()) setCloseQuery(currentQuery);
|
|
832
|
+
if (store.inputInsidePopup()) setIndices({ activeIndex: null });
|
|
833
|
+
if (!store.inputInsidePopup() || inline()) setInputValue("", createChangeEventDetails(inputClear, details.event));
|
|
834
|
+
}
|
|
835
|
+
}
|
|
836
|
+
if (!nextOpen && store.inputInsidePopup() && (details.reason === "focus-out" || details.reason === "outside-press")) {
|
|
837
|
+
field.setTouched(true);
|
|
838
|
+
field.setFocused(false);
|
|
839
|
+
if (field.validationMode() === "onBlur") field.validation.commit(untrack(fieldRawValue));
|
|
840
|
+
}
|
|
841
|
+
}
|
|
842
|
+
function setSelectedValue(next, details) {
|
|
843
|
+
props.onSelectedValueChange?.(next, details);
|
|
844
|
+
if (details.isCanceled) return;
|
|
845
|
+
if (!controlledSelected) setUncontrolledSelected(() => next);
|
|
846
|
+
if (selectionMode() === "none" && store.track().popupElement != null && (props.fillInputOnItemPress ?? true) || single() && !store.inputInsidePopup()) setInputValue(stringifyAsLabel(next, props.itemToStringLabel), createChangeEventDetails(details.reason, details.event));
|
|
847
|
+
}
|
|
848
|
+
function handleSelection(event, itemValue) {
|
|
849
|
+
const target = event.target;
|
|
850
|
+
const overrideEvent = store.selectionEvent ?? event;
|
|
851
|
+
store.selectionEvent = null;
|
|
852
|
+
const details = createChangeEventDetails(itemPress, overrideEvent);
|
|
853
|
+
const href = target?.closest("a")?.getAttribute("href");
|
|
854
|
+
if (href) {
|
|
855
|
+
if (href.startsWith("#")) setOpen(false, details);
|
|
856
|
+
return;
|
|
857
|
+
}
|
|
858
|
+
if (multiple()) {
|
|
859
|
+
const current = Array.isArray(selectedValue()) ? selectedValue() : [];
|
|
860
|
+
setSelectedValue(selectedValueIncludes(current, itemValue, comparator()) ? removeItem(current, itemValue, comparator()) : [...current, itemValue], details);
|
|
861
|
+
if (details.isCanceled) return;
|
|
862
|
+
if (!((inputElement()?.value.trim() ?? "") !== "")) return;
|
|
863
|
+
if (store.inputInsidePopup()) setInputValue("", createChangeEventDetails(inputClear, details.event));
|
|
864
|
+
else setOpen(false, details);
|
|
865
|
+
return;
|
|
866
|
+
}
|
|
867
|
+
setSelectedValue(itemValue, details);
|
|
868
|
+
if (details.isCanceled) return;
|
|
869
|
+
setOpen(false, details);
|
|
870
|
+
}
|
|
871
|
+
function requestSubmit() {
|
|
872
|
+
const formElement = field.validation.getInputControl()?.closest("form") ?? hiddenInputElement()?.form ?? inputElement()?.form;
|
|
873
|
+
if (formElement && typeof formElement.requestSubmit === "function") formElement.requestSubmit();
|
|
874
|
+
}
|
|
875
|
+
function forceMount() {
|
|
876
|
+
if (props.items) return;
|
|
877
|
+
store.setForceMounted(true);
|
|
878
|
+
}
|
|
879
|
+
function focusInput() {
|
|
880
|
+
inputElement()?.focus();
|
|
881
|
+
}
|
|
882
|
+
function clickHighlightedItem(index, event) {
|
|
883
|
+
const item = untrack(listElements)[index];
|
|
884
|
+
if (!item) return;
|
|
885
|
+
store.selectionEvent = event;
|
|
886
|
+
item.click();
|
|
887
|
+
store.selectionEvent = null;
|
|
888
|
+
}
|
|
889
|
+
function handleUnmount() {
|
|
890
|
+
setQueryChangedAfterOpen(false);
|
|
891
|
+
setCloseQuery(null);
|
|
892
|
+
store.resetAfterClose();
|
|
893
|
+
if (selectionMode() === "none") setIndices({
|
|
894
|
+
activeIndex: null,
|
|
895
|
+
selectedIndex: null
|
|
896
|
+
});
|
|
897
|
+
else setIndices({ activeIndex: null });
|
|
898
|
+
const currentInput = inputElement();
|
|
899
|
+
if (multiple() && currentInput && currentInput.value !== "" && !hadInputClear) setInputValue("", createChangeEventDetails(inputClear));
|
|
900
|
+
if (single()) {
|
|
901
|
+
if (store.inputInsidePopup()) {
|
|
902
|
+
if (currentInput && currentInput.value !== "") setInputValue("", createChangeEventDetails(inputClear));
|
|
903
|
+
} else {
|
|
904
|
+
const label = stringifyAsLabel(selectedValue(), props.itemToStringLabel);
|
|
905
|
+
if (currentInput && currentInput.value !== label) setInputValue(label, createChangeEventDetails(label === "" ? inputClear : none));
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
}
|
|
909
|
+
const actions = { unmount() {
|
|
910
|
+
presence.forceUnmount();
|
|
911
|
+
} };
|
|
912
|
+
const expanded = createMemo(() => store.open() || inline());
|
|
913
|
+
const referenceAria = createMemo(() => {
|
|
914
|
+
const element = inputElement();
|
|
915
|
+
const isPlainInput = element?.tagName === "INPUT";
|
|
916
|
+
const treatAsInput = element == null || isPlainInput;
|
|
917
|
+
const applyAria = treatAsInput || expanded();
|
|
918
|
+
const reference = treatAsInput ? {
|
|
919
|
+
autocomplete: "off",
|
|
920
|
+
spellcheck: "false",
|
|
921
|
+
autocorrect: "off",
|
|
922
|
+
autocapitalize: "none"
|
|
923
|
+
} : {};
|
|
924
|
+
if (applyAria) {
|
|
925
|
+
reference.role = "combobox";
|
|
926
|
+
reference["aria-expanded"] = expanded() ? "true" : "false";
|
|
927
|
+
reference["aria-haspopup"] = grid() ? "grid" : "listbox";
|
|
928
|
+
reference["aria-controls"] = expanded() ? store.listElement()?.id : void 0;
|
|
929
|
+
reference["aria-autocomplete"] = autoCompleteMode();
|
|
930
|
+
}
|
|
931
|
+
return reference;
|
|
932
|
+
});
|
|
933
|
+
const click = createClickInteraction({
|
|
934
|
+
context: store.context.floatingRoot,
|
|
935
|
+
enabled: () => !readOnly() && !disabled() && openOnInputClick(),
|
|
936
|
+
event: () => "mousedown-only",
|
|
937
|
+
toggle: () => false,
|
|
938
|
+
reason: () => inputPress,
|
|
939
|
+
touchOpenDelay: () => store.inputInsidePopup() ? 0 : 100
|
|
940
|
+
});
|
|
941
|
+
const dismiss = createDismiss({
|
|
942
|
+
context: store.context.floatingRoot,
|
|
943
|
+
tree: () => tree,
|
|
944
|
+
enabled: () => !readOnly() && !disabled() && !inline(),
|
|
945
|
+
outsidePressEvent: () => ({
|
|
946
|
+
mouse: "sloppy",
|
|
947
|
+
touch: "intentional"
|
|
948
|
+
}),
|
|
949
|
+
bubbles: () => inline(),
|
|
950
|
+
outsidePress: () => (event) => {
|
|
951
|
+
const target = event.target;
|
|
952
|
+
return !contains(triggerElement(), target) && !contains(store.clearElement, target) && !contains(store.chipsContainerElement, target) && !contains(inputGroupElement(), target);
|
|
953
|
+
}
|
|
954
|
+
});
|
|
955
|
+
const listNavigation$1 = createListNavigation({
|
|
956
|
+
context: store.context.floatingRoot,
|
|
957
|
+
enabled: () => !readOnly() && !disabled(),
|
|
958
|
+
list: listElements,
|
|
959
|
+
activeIndex: store.activeIndex,
|
|
960
|
+
selectedIndex: store.selectedIndex,
|
|
961
|
+
virtual: () => true,
|
|
962
|
+
loopFocus,
|
|
963
|
+
allowEscape: () => loopFocus() && !autoHighlight(),
|
|
964
|
+
focusItemOnHover: highlightItemOnHover,
|
|
965
|
+
orientation: () => grid() ? "both" : "vertical",
|
|
966
|
+
cols,
|
|
967
|
+
rtl: () => direction() === "rtl",
|
|
968
|
+
openOnArrowKeyDown: () => false,
|
|
969
|
+
disabledIndices: () => [],
|
|
970
|
+
onNavigate(index, event) {
|
|
971
|
+
if (!event && !store.open() || store.track().transitionStatus === "ending") return;
|
|
972
|
+
if (!event) {
|
|
973
|
+
setIndices({ activeIndex: index });
|
|
974
|
+
return;
|
|
975
|
+
}
|
|
976
|
+
setIndices({
|
|
977
|
+
activeIndex: index,
|
|
978
|
+
type: store.keyboardActive ? keyboard : pointer
|
|
979
|
+
});
|
|
980
|
+
}
|
|
981
|
+
});
|
|
982
|
+
const context = {
|
|
983
|
+
store,
|
|
984
|
+
tree,
|
|
985
|
+
node,
|
|
986
|
+
presence,
|
|
987
|
+
id,
|
|
988
|
+
items: () => props.items,
|
|
989
|
+
hasItems,
|
|
990
|
+
query,
|
|
991
|
+
filteredItems,
|
|
992
|
+
flatFilteredItems,
|
|
993
|
+
listEmpty,
|
|
994
|
+
itemValues,
|
|
995
|
+
selectedValue,
|
|
996
|
+
inputValue,
|
|
997
|
+
hasSelectedValue,
|
|
998
|
+
hasSelectionChips,
|
|
999
|
+
selectionMode,
|
|
1000
|
+
multiple,
|
|
1001
|
+
single,
|
|
1002
|
+
disabled,
|
|
1003
|
+
readOnly,
|
|
1004
|
+
required,
|
|
1005
|
+
modal,
|
|
1006
|
+
grid,
|
|
1007
|
+
virtualized,
|
|
1008
|
+
inline,
|
|
1009
|
+
openOnInputClick,
|
|
1010
|
+
autoHighlight,
|
|
1011
|
+
keepHighlight,
|
|
1012
|
+
highlightItemOnHover,
|
|
1013
|
+
loopFocus,
|
|
1014
|
+
autoComplete: autoCompleteMode,
|
|
1015
|
+
submitOnItemClick,
|
|
1016
|
+
hasInputValueProp: () => hasInputValueProp,
|
|
1017
|
+
name,
|
|
1018
|
+
form,
|
|
1019
|
+
itemToStringLabel,
|
|
1020
|
+
itemToStringValue,
|
|
1021
|
+
comparator,
|
|
1022
|
+
inputElement,
|
|
1023
|
+
setInputElement,
|
|
1024
|
+
triggerElement,
|
|
1025
|
+
setTriggerElement,
|
|
1026
|
+
inputGroupElement,
|
|
1027
|
+
setInputGroupElement,
|
|
1028
|
+
internalBackdropElement,
|
|
1029
|
+
setInternalBackdropElement,
|
|
1030
|
+
setOpen,
|
|
1031
|
+
setInputValue,
|
|
1032
|
+
setSelectedValue,
|
|
1033
|
+
setIndices,
|
|
1034
|
+
handleSelection,
|
|
1035
|
+
forceMount,
|
|
1036
|
+
requestSubmit,
|
|
1037
|
+
focusInput,
|
|
1038
|
+
clickHighlightedItem,
|
|
1039
|
+
listNavigation: listNavigation$1,
|
|
1040
|
+
dismiss,
|
|
1041
|
+
click,
|
|
1042
|
+
cols,
|
|
1043
|
+
referenceAria,
|
|
1044
|
+
expanded,
|
|
1045
|
+
field,
|
|
1046
|
+
formContext
|
|
1047
|
+
};
|
|
1048
|
+
const registration = {
|
|
1049
|
+
id: generatedId,
|
|
1050
|
+
name: void 0,
|
|
1051
|
+
value: fieldRawValue,
|
|
1052
|
+
getValue: fieldStringValue,
|
|
1053
|
+
getControl: () => store.inputInsidePopup() ? triggerElement() : inputElement()
|
|
1054
|
+
};
|
|
1055
|
+
store.context.floatingRoot.context.data.insideElements = () => [
|
|
1056
|
+
internalBackdropElement(),
|
|
1057
|
+
store.startDismissElement,
|
|
1058
|
+
store.endDismissElement
|
|
1059
|
+
];
|
|
1060
|
+
createEffect(() => ({
|
|
1061
|
+
open: store.open(),
|
|
1062
|
+
activeTriggerId: store.activeTriggerId()
|
|
1063
|
+
}), () => untrack(() => store.reconcileTriggers()));
|
|
1064
|
+
createEffect(() => ({
|
|
1065
|
+
inline: inline(),
|
|
1066
|
+
open: store.open()
|
|
1067
|
+
}), (state) => {
|
|
1068
|
+
if (state.inline) store.context.floatingRoot.update({ open: true });
|
|
1069
|
+
});
|
|
1070
|
+
createEffect(() => ({
|
|
1071
|
+
mode: selectionMode(),
|
|
1072
|
+
inline: inline(),
|
|
1073
|
+
insidePopup: store.inputInsidePopup()
|
|
1074
|
+
}), (state) => store.setInputOwnsFormValue(state.mode === "none" && (state.inline || !state.insidePopup)));
|
|
1075
|
+
createEffect(() => ({
|
|
1076
|
+
open: store.open(),
|
|
1077
|
+
selected: selectedValue(),
|
|
1078
|
+
mode: selectionMode(),
|
|
1079
|
+
values: itemValues(),
|
|
1080
|
+
compare: comparator(),
|
|
1081
|
+
isMultiple: multiple()
|
|
1082
|
+
}), (state) => {
|
|
1083
|
+
if (state.open) return;
|
|
1084
|
+
store.pointerDownItem = null;
|
|
1085
|
+
if (state.mode === "none") return;
|
|
1086
|
+
untrack(() => setIndices({ selectedIndex: findSelectionIndex(hasItems() ? flatItems() : state.values, state.selected, state.compare, state.isMultiple) }));
|
|
1087
|
+
});
|
|
1088
|
+
createEffect(() => ({
|
|
1089
|
+
activeIndex: store.activeIndex(),
|
|
1090
|
+
values: itemValues(),
|
|
1091
|
+
input: inputValue(),
|
|
1092
|
+
open: store.open(),
|
|
1093
|
+
inline: inline(),
|
|
1094
|
+
highlight: autoHighlight()
|
|
1095
|
+
}), (state) => untrack(() => resolveHighlight(state)));
|
|
1096
|
+
function resolveHighlight(state) {
|
|
1097
|
+
const pending = pendingQueryHighlight;
|
|
1098
|
+
if (pending) {
|
|
1099
|
+
const listIsNavigable = state.open || state.inline || store.track().positionerElement?.hidden === false;
|
|
1100
|
+
if (pending.hasQuery) {
|
|
1101
|
+
if (state.highlight && listIsNavigable) store.setActiveIndex(0);
|
|
1102
|
+
pendingQueryHighlight = null;
|
|
1103
|
+
} else if (String(state.input).trim() === "") {
|
|
1104
|
+
pendingQueryHighlight = null;
|
|
1105
|
+
if (listIsNavigable) {
|
|
1106
|
+
const clearedBySelection = pending.selection;
|
|
1107
|
+
if (state.highlight === "always" && !clearedBySelection && selectionMode() === "none") store.setActiveIndex(0);
|
|
1108
|
+
queueMicrotask(() => untrack(() => {
|
|
1109
|
+
if (!store.open() && !inline() || (inputElement()?.value.trim() ?? "") !== "") return;
|
|
1110
|
+
const current = selectedValue();
|
|
1111
|
+
const isMultiple = multiple();
|
|
1112
|
+
const lastSelected = isMultiple && Array.isArray(current) ? current[current.length - 1] : current;
|
|
1113
|
+
const hasSelection = selectionMode() !== "none" && lastSelected != null;
|
|
1114
|
+
if (hasSelection || clearedBySelection) store.setActiveIndex(hasSelection ? findSelectionIndex(itemValues(), current, comparator(), isMultiple) : null);
|
|
1115
|
+
else if (autoHighlight() === "always") store.setActiveIndex(0);
|
|
1116
|
+
}));
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
if (!state.open && !state.inline) return;
|
|
1121
|
+
if (state.activeIndex == null) {
|
|
1122
|
+
if (state.highlight === "always" && state.values.length > 0) {
|
|
1123
|
+
store.setActiveIndex(0);
|
|
1124
|
+
return;
|
|
1125
|
+
}
|
|
1126
|
+
emitHighlight(void 0, -1, none);
|
|
1127
|
+
return;
|
|
1128
|
+
}
|
|
1129
|
+
if (state.activeIndex >= state.values.length) {
|
|
1130
|
+
emitHighlight(void 0, -1, none);
|
|
1131
|
+
store.setActiveIndex(null);
|
|
1132
|
+
return;
|
|
1133
|
+
}
|
|
1134
|
+
const itemValue = state.values[state.activeIndex];
|
|
1135
|
+
const previousValue = lastHighlight.value;
|
|
1136
|
+
const sameItem = previousValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previousValue, comparator());
|
|
1137
|
+
if (lastHighlight.index !== state.activeIndex || !sameItem) emitHighlight(itemValue, state.activeIndex, none);
|
|
1138
|
+
}
|
|
1139
|
+
createEffect(() => ({
|
|
1140
|
+
index: store.activeIndex(),
|
|
1141
|
+
elements: listElements()
|
|
1142
|
+
}), (state) => {
|
|
1143
|
+
if (state.index == null || !store.keyboardActive) return;
|
|
1144
|
+
state.elements[state.index]?.scrollIntoView?.({
|
|
1145
|
+
block: "nearest",
|
|
1146
|
+
inline: "nearest"
|
|
1147
|
+
});
|
|
1148
|
+
});
|
|
1149
|
+
createEffect(() => ({
|
|
1150
|
+
open: store.open(),
|
|
1151
|
+
mounted: presence.mounted(),
|
|
1152
|
+
count: itemValues().length
|
|
1153
|
+
}), (state) => {
|
|
1154
|
+
if (!state.open) {
|
|
1155
|
+
initializedOpen = false;
|
|
1156
|
+
pendingInitialHighlight = null;
|
|
1157
|
+
return;
|
|
1158
|
+
}
|
|
1159
|
+
if (!state.mounted || state.count === 0 || initializedOpen) return;
|
|
1160
|
+
initializedOpen = true;
|
|
1161
|
+
untrack(() => {
|
|
1162
|
+
const pending = pendingInitialHighlight;
|
|
1163
|
+
pendingInitialHighlight = null;
|
|
1164
|
+
if (store.activeIndex() != null || queryChangedAfterOpen()) return;
|
|
1165
|
+
const selected = selectionMode() === "none" ? null : store.selectedIndex();
|
|
1166
|
+
if (selected != null) {
|
|
1167
|
+
setIndices({ activeIndex: selected });
|
|
1168
|
+
return;
|
|
1169
|
+
}
|
|
1170
|
+
if (pending && (selectionMode() !== "none" || autoHighlight() !== false)) {
|
|
1171
|
+
setIndices({ activeIndex: pending === "first" ? 0 : state.count - 1 });
|
|
1172
|
+
return;
|
|
1173
|
+
}
|
|
1174
|
+
if (autoHighlight() === "always") setIndices({ activeIndex: 0 });
|
|
1175
|
+
});
|
|
1176
|
+
});
|
|
1177
|
+
createEffect(() => ({
|
|
1178
|
+
mode: selectionMode(),
|
|
1179
|
+
input: inputValue(),
|
|
1180
|
+
selected: selectedValue(),
|
|
1181
|
+
isMultiple: multiple()
|
|
1182
|
+
}), (state) => {
|
|
1183
|
+
if (state.mode === "none") {
|
|
1184
|
+
field.setFilled(String(state.input) !== "");
|
|
1185
|
+
return;
|
|
1186
|
+
}
|
|
1187
|
+
field.setFilled(state.isMultiple ? Array.isArray(state.selected) && state.selected.length > 0 : state.selected != null);
|
|
1188
|
+
});
|
|
1189
|
+
createEffect(() => ({
|
|
1190
|
+
hasItems: hasItems(),
|
|
1191
|
+
highlight: autoHighlight(),
|
|
1192
|
+
count: flatFilteredItems().length
|
|
1193
|
+
}), (state) => {
|
|
1194
|
+
if (state.hasItems && state.highlight && state.count === 0) untrack(() => setIndices({ activeIndex: null }));
|
|
1195
|
+
});
|
|
1196
|
+
createEffect(() => ({
|
|
1197
|
+
query: query(),
|
|
1198
|
+
open: store.open()
|
|
1199
|
+
}), (state) => {
|
|
1200
|
+
const previous = previousQuery;
|
|
1201
|
+
previousQuery = state.query;
|
|
1202
|
+
if (previous === state.query || !state.open) return;
|
|
1203
|
+
if (state.query === "" || state.query === String(initialDefaultInputValue)) return;
|
|
1204
|
+
setQueryChangedAfterOpen(true);
|
|
1205
|
+
});
|
|
1206
|
+
function syncInputToSelectedLabel() {
|
|
1207
|
+
const label = stringifyAsLabel(selectedValue(), props.itemToStringLabel);
|
|
1208
|
+
if (inputValue() !== label) setInputValue(label, createChangeEventDetails(none));
|
|
1209
|
+
}
|
|
1210
|
+
createEffect(() => ({
|
|
1211
|
+
selected: selectedValue(),
|
|
1212
|
+
mode: selectionMode(),
|
|
1213
|
+
compare: comparator()
|
|
1214
|
+
}), (state) => {
|
|
1215
|
+
const previous = previousSelectedValue;
|
|
1216
|
+
if (sameValue(state.selected, previous, state.compare)) return;
|
|
1217
|
+
previousSelectedValue = cloneValue(state.selected);
|
|
1218
|
+
if (state.mode === "none") return;
|
|
1219
|
+
untrack(() => {
|
|
1220
|
+
formContext.clearError(name());
|
|
1221
|
+
field.setDirty(!sameDirtyValue(state.selected, field.validityData().initialValue, state.compare));
|
|
1222
|
+
field.validation.change(state.selected);
|
|
1223
|
+
if (single() && !hasInputValueProp && !store.inputInsidePopup()) syncInputToSelectedLabel();
|
|
1224
|
+
});
|
|
1225
|
+
});
|
|
1226
|
+
createEffect(() => ({
|
|
1227
|
+
input: inputValue(),
|
|
1228
|
+
mode: selectionMode()
|
|
1229
|
+
}), (state) => {
|
|
1230
|
+
const previous = previousInputValue;
|
|
1231
|
+
previousInputValue = state.input;
|
|
1232
|
+
if (previous === state.input || state.mode !== "none") return;
|
|
1233
|
+
untrack(() => {
|
|
1234
|
+
formContext.clearError(name());
|
|
1235
|
+
field.setDirty(state.input !== field.validityData().initialValue);
|
|
1236
|
+
field.validation.change(state.input);
|
|
1237
|
+
});
|
|
1238
|
+
});
|
|
1239
|
+
createEffect(() => props.items, (items) => {
|
|
1240
|
+
const previous = previousItems;
|
|
1241
|
+
previousItems = items;
|
|
1242
|
+
if (previous === items) return;
|
|
1243
|
+
untrack(() => {
|
|
1244
|
+
if (!single() || hasInputValueProp || store.inputInsidePopup() || queryChangedAfterOpen()) return;
|
|
1245
|
+
syncInputToSelectedLabel();
|
|
1246
|
+
});
|
|
1247
|
+
});
|
|
1248
|
+
createEffect(() => ({
|
|
1249
|
+
disabled: disabled(),
|
|
1250
|
+
id: id(),
|
|
1251
|
+
name: props.name,
|
|
1252
|
+
control: store.inputInsidePopup() ? triggerElement() : inputElement()
|
|
1253
|
+
}), (current) => {
|
|
1254
|
+
registration.id = current.id;
|
|
1255
|
+
registration.name = current.name;
|
|
1256
|
+
field.registerFieldControl(fieldControlSource, current.disabled || !current.control ? void 0 : registration);
|
|
1257
|
+
});
|
|
1258
|
+
createEffect(hiddenInputElement, (input) => {
|
|
1259
|
+
if (!input) return;
|
|
1260
|
+
return field.validation.registerInput(fieldControlSource, input, () => store.inputInsidePopup() ? triggerElement() : inputElement());
|
|
1261
|
+
});
|
|
1262
|
+
createEffect(() => props.actionsRef, (actionsRef) => {
|
|
1263
|
+
actionsRef?.(actions);
|
|
1264
|
+
});
|
|
1265
|
+
/** Opens the popup from a closed arrow-key press, remembering which end to highlight. */
|
|
1266
|
+
function openWithNavigation(edge, event) {
|
|
1267
|
+
pendingInitialHighlight = edge;
|
|
1268
|
+
store.setOpenMethod("keyboard");
|
|
1269
|
+
if (!setOpen(true, createChangeEventDetails("list-navigation", event, triggerElement() ?? void 0))) pendingInitialHighlight = null;
|
|
1270
|
+
}
|
|
1271
|
+
function handleNavigationKeyDown(event) {
|
|
1272
|
+
if (readOnly() || disabled()) return;
|
|
1273
|
+
if (!store.open() && !inline()) {
|
|
1274
|
+
if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
|
|
1275
|
+
event.preventDefault();
|
|
1276
|
+
event.stopPropagation();
|
|
1277
|
+
openWithNavigation(event.key === "ArrowDown" ? "first" : "last", event);
|
|
1278
|
+
return;
|
|
1279
|
+
}
|
|
1280
|
+
listNavigation$1.onKeyDown(event);
|
|
1281
|
+
}
|
|
1282
|
+
context.listNavigation = {
|
|
1283
|
+
...listNavigation$1,
|
|
1284
|
+
onKeyDown: handleNavigationKeyDown
|
|
1285
|
+
};
|
|
1286
|
+
onCleanup(() => {
|
|
1287
|
+
field.registerFieldControl(fieldControlSource, void 0);
|
|
1288
|
+
store.clearInteractionProps();
|
|
1289
|
+
delete store.context.floatingRoot.context.data.insideElements;
|
|
1290
|
+
});
|
|
1291
|
+
return ComboboxRootContext({
|
|
1292
|
+
value: context,
|
|
1293
|
+
get children() {
|
|
1294
|
+
return FloatingTreeContext({
|
|
1295
|
+
value: tree,
|
|
1296
|
+
get children() {
|
|
1297
|
+
return FloatingParentNodeContext({
|
|
1298
|
+
get value() {
|
|
1299
|
+
return node.id ?? null;
|
|
1300
|
+
},
|
|
1301
|
+
get children() {
|
|
1302
|
+
return [
|
|
1303
|
+
memo(() => {
|
|
1304
|
+
return escape(props.children);
|
|
1305
|
+
}),
|
|
1306
|
+
(_v$ = ssrHydrationKey(), props.inputRef, _g$2 = ssrGroup(() => {
|
|
1307
|
+
return [
|
|
1308
|
+
ssrAttribute("id", hiddenInputName() == null ? `${escape(id(), true)}-hidden-input` : escape(void 0, true)),
|
|
1309
|
+
ssrAttribute("form", escape(form(), true)),
|
|
1310
|
+
ssrAttribute("name", escape(hiddenInputName(), true)),
|
|
1311
|
+
ssrAttribute("autocomplete", escape(props.formAutoComplete, true))
|
|
1312
|
+
];
|
|
1313
|
+
}, 4), _g$ = ssrGroup(() => {
|
|
1314
|
+
return [
|
|
1315
|
+
ssrAttribute("disabled", escape(disabled(), true)),
|
|
1316
|
+
ssrAttribute("required", required() && !(multiple() && hasSelectionChips())),
|
|
1317
|
+
ssrAttribute("readonly", escape(readOnly(), true)),
|
|
1318
|
+
ssrStyle(hiddenInputName() ? HIDDEN_NAMED_INPUT_STYLE : HIDDEN_INPUT_STYLE),
|
|
1319
|
+
ssrAttribute("aria-describedby", escape(labelable.getAriaDescribedBy(void 0), true)),
|
|
1320
|
+
ssrAttribute("aria-invalid", field.state().valid === false && !disabled() ? "true" : escape(void 0, true))
|
|
1321
|
+
];
|
|
1322
|
+
}, 6), _v$6 = () => {
|
|
1323
|
+
return ssrAttribute("value", escape(serializedValue(), true));
|
|
1324
|
+
}, ssr(_tmpl$$1, _v$, _g$2, _g$2, _g$2, _g$2, _v$6, _g$, _g$, _g$, _g$, _g$, _g$)),
|
|
1325
|
+
For({
|
|
1326
|
+
get each() {
|
|
1327
|
+
return memo(() => {
|
|
1328
|
+
return !!(multiple() && name());
|
|
1329
|
+
})() ? selectedValue() ?? [] : [];
|
|
1330
|
+
},
|
|
1331
|
+
children: (item) => {
|
|
1332
|
+
var _v$13, _g$3, _v$17, _v$16;
|
|
1333
|
+
return _v$13 = ssrHydrationKey(), _g$3 = ssrGroup(() => {
|
|
1334
|
+
return [ssrAttribute("form", escape(form(), true)), ssrAttribute("name", escape(name(), true))];
|
|
1335
|
+
}, 2), _v$17 = () => {
|
|
1336
|
+
return ssrAttribute("disabled", escape(disabled(), true));
|
|
1337
|
+
}, _v$16 = () => {
|
|
1338
|
+
return ssrAttribute("value", escape(stringifyAsValue(item, props.itemToStringValue), true));
|
|
1339
|
+
}, ssr(_tmpl$2, _v$13, _g$3, _g$3, _v$16, _v$17);
|
|
1340
|
+
}
|
|
1341
|
+
})
|
|
1342
|
+
];
|
|
1343
|
+
}
|
|
1344
|
+
});
|
|
1345
|
+
}
|
|
1346
|
+
});
|
|
1347
|
+
}
|
|
1348
|
+
});
|
|
1349
|
+
}
|
|
1350
|
+
function cloneValue(value) {
|
|
1351
|
+
return Array.isArray(value) ? value.slice() : value;
|
|
1352
|
+
}
|
|
1353
|
+
function sameValue(first, second, comparer) {
|
|
1354
|
+
if (Array.isArray(first) && Array.isArray(second)) return areItemArraysEqual(first, second, comparer);
|
|
1355
|
+
return Object.is(first, second);
|
|
1356
|
+
}
|
|
1357
|
+
function sameDirtyValue(current, initial, comparer) {
|
|
1358
|
+
if (Array.isArray(current) && Array.isArray(initial)) return areItemArraysEqual(current, initial, comparer);
|
|
1359
|
+
return current === initial;
|
|
1360
|
+
}
|
|
1361
|
+
//#endregion
|
|
1362
|
+
//#region src/combobox/utils/comboboxPopupId.ts
|
|
1363
|
+
/**
|
|
1364
|
+
* The default id `<Combobox.Popup>` takes when the input is rendered inside it. The popup applies
|
|
1365
|
+
* it and the trigger references it through `aria-controls`, so the convention lives in one place.
|
|
1366
|
+
*/
|
|
1367
|
+
function getComboboxPopupId(rootId) {
|
|
1368
|
+
return rootId == null ? void 0 : `${rootId}-popup`;
|
|
1369
|
+
}
|
|
1370
|
+
//#endregion
|
|
1371
|
+
//#region src/combobox/utils/stateAttributesMapping.ts
|
|
1372
|
+
/** Shared by the input, input group, and trigger, which all reflect the popup's state. */
|
|
1373
|
+
var comboboxControlStateMapping = {
|
|
1374
|
+
...pressableTriggerOpenStateMapping,
|
|
1375
|
+
...fieldStateAttributesMapping,
|
|
1376
|
+
popupSide: (side) => side ? { "data-popup-side": side } : null,
|
|
1377
|
+
listEmpty: (empty) => empty ? { "data-list-empty": "" } : null
|
|
1378
|
+
};
|
|
1379
|
+
var comboboxPositionerStateMapping = { ...popupStateMapping };
|
|
1380
|
+
var comboboxPopupStateMapping = {
|
|
1381
|
+
...popupTransitionStateMapping,
|
|
1382
|
+
instant: (value) => value ? { "data-instant": value } : null
|
|
1383
|
+
};
|
|
1384
|
+
var POPUP_OPEN = { "data-open": "" };
|
|
1385
|
+
var POPUP_CLOSED = { "data-closed": "" };
|
|
1386
|
+
var comboboxBackdropStateMapping = {
|
|
1387
|
+
open: (value) => value ? POPUP_OPEN : POPUP_CLOSED,
|
|
1388
|
+
...transitionStatusMapping
|
|
1389
|
+
};
|
|
1390
|
+
var comboboxClearStateMapping = {
|
|
1391
|
+
...triggerOpenStateMapping,
|
|
1392
|
+
...transitionStatusMapping
|
|
1393
|
+
};
|
|
1394
|
+
//#endregion
|
|
1395
|
+
//#region src/combobox/trigger/ComboboxTrigger.tsx
|
|
1396
|
+
/** A button that opens the popup. */
|
|
1397
|
+
function ComboboxTrigger(props) {
|
|
1398
|
+
const context = useComboboxRootContext();
|
|
1399
|
+
const labelable = useLabelableContext();
|
|
1400
|
+
const internalProps = props;
|
|
1401
|
+
const allProps = props;
|
|
1402
|
+
const labelSource = Symbol("ComboboxTrigger");
|
|
1403
|
+
const [element, setElement] = createSignal(null, { ownedWrite: true });
|
|
1404
|
+
const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
|
|
1405
|
+
const disabled = createMemo(() => context.disabled() || (internalProps.disabled ?? false));
|
|
1406
|
+
const insidePopup = createMemo(() => context.store.inputInsidePopup());
|
|
1407
|
+
const id = createMemo(() => insidePopup() ? internalProps.id ?? context.id() : internalProps.id);
|
|
1408
|
+
const ariaControls = createMemo(() => {
|
|
1409
|
+
if (!context.store.open()) return;
|
|
1410
|
+
if (insidePopup()) return context.store.popupId() ?? getComboboxPopupId(context.id());
|
|
1411
|
+
return context.store.listElement()?.id;
|
|
1412
|
+
});
|
|
1413
|
+
const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? context.store.labelId());
|
|
1414
|
+
const state = createMemo(() => ({
|
|
1415
|
+
...context.field.state(),
|
|
1416
|
+
open: context.store.open(),
|
|
1417
|
+
disabled: disabled(),
|
|
1418
|
+
popupSide: context.store.resolvedPopupSide(),
|
|
1419
|
+
listEmpty: context.listEmpty(),
|
|
1420
|
+
placeholder: context.selectionMode() === "none" ? false : !context.hasSelectedValue()
|
|
1421
|
+
}));
|
|
1422
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
1423
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
1424
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxControlStateMapping));
|
|
1425
|
+
const others = omit(allProps, "aria-labelledby", "as", "class", "disabled", "id", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPointerEnter", "ref", "style");
|
|
1426
|
+
const click = createClickInteraction({
|
|
1427
|
+
context: context.store.context.floatingRoot,
|
|
1428
|
+
enabled: () => !context.readOnly() && !context.disabled(),
|
|
1429
|
+
event: () => "mousedown"
|
|
1430
|
+
});
|
|
1431
|
+
const typeahead = createTypeahead({
|
|
1432
|
+
context: context.store.context.floatingRoot,
|
|
1433
|
+
enabled: () => !context.store.open() && !context.readOnly() && !context.disabled() && context.selectionMode() === "single",
|
|
1434
|
+
list: () => context.store.collection.labels(),
|
|
1435
|
+
elements: () => context.store.collection.elements(),
|
|
1436
|
+
activeIndex: context.store.activeIndex,
|
|
1437
|
+
selectedIndex: context.store.selectedIndex,
|
|
1438
|
+
onMatch(index) {
|
|
1439
|
+
const next = context.itemValues()[index];
|
|
1440
|
+
if (next !== void 0) context.setSelectedValue(next, createChangeEventDetails(none));
|
|
1441
|
+
}
|
|
1442
|
+
});
|
|
1443
|
+
let pointerType = "";
|
|
1444
|
+
let focusTimer;
|
|
1445
|
+
let removeMouseUp;
|
|
1446
|
+
createTriggerRegistration(() => context.store, id, element);
|
|
1447
|
+
function handlePointerDown(event) {
|
|
1448
|
+
pointerType = event.pointerType || "";
|
|
1449
|
+
click.onPointerDown(event);
|
|
1450
|
+
}
|
|
1451
|
+
function handleFocus() {
|
|
1452
|
+
context.field.setFocused(true);
|
|
1453
|
+
if (disabled() || context.readOnly()) return;
|
|
1454
|
+
clearTimeout(focusTimer);
|
|
1455
|
+
focusTimer = setTimeout(() => context.forceMount(), 0);
|
|
1456
|
+
}
|
|
1457
|
+
function handleBlur(event) {
|
|
1458
|
+
untrack(() => {
|
|
1459
|
+
if (contains(context.store.track().positionerElement, event.relatedTarget)) return;
|
|
1460
|
+
context.field.setTouched(true);
|
|
1461
|
+
context.field.setFocused(false);
|
|
1462
|
+
if (context.field.validationMode() === "onBlur") context.field.validation.commit(context.selectionMode() === "none" ? context.inputValue() : context.selectedValue());
|
|
1463
|
+
typeahead.onBlur(event);
|
|
1464
|
+
});
|
|
1465
|
+
}
|
|
1466
|
+
function watchCancelOpen(trigger) {
|
|
1467
|
+
removeMouseUp?.();
|
|
1468
|
+
const documentNode = ownerDocument(trigger);
|
|
1469
|
+
const onMouseUp = (event) => {
|
|
1470
|
+
removeMouseUp = void 0;
|
|
1471
|
+
const target = event.target;
|
|
1472
|
+
if (contains(trigger, target) || contains(context.store.track().positionerElement, target) || contains(context.store.listElement(), target)) return;
|
|
1473
|
+
const rect = trigger.getBoundingClientRect();
|
|
1474
|
+
if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) return;
|
|
1475
|
+
context.setOpen(false, createChangeEventDetails(cancelOpen, event));
|
|
1476
|
+
};
|
|
1477
|
+
documentNode.addEventListener("mouseup", onMouseUp, { once: true });
|
|
1478
|
+
removeMouseUp = () => documentNode.removeEventListener("mouseup", onMouseUp);
|
|
1479
|
+
}
|
|
1480
|
+
function handleMouseDown(event) {
|
|
1481
|
+
if (disabled() || context.readOnly()) return;
|
|
1482
|
+
const trigger = event.currentTarget;
|
|
1483
|
+
if (!insidePopup()) context.store.context.floatingRoot.update({ domReferenceElement: trigger });
|
|
1484
|
+
context.forceMount();
|
|
1485
|
+
if (pointerType !== "touch") {
|
|
1486
|
+
context.focusInput();
|
|
1487
|
+
if (!insidePopup()) event.preventDefault();
|
|
1488
|
+
}
|
|
1489
|
+
if (!context.store.open()) {
|
|
1490
|
+
context.store.setOpenMethod(pointerType || "mouse");
|
|
1491
|
+
if (insidePopup()) watchCancelOpen(trigger);
|
|
1492
|
+
}
|
|
1493
|
+
click.onMouseDown(event);
|
|
1494
|
+
}
|
|
1495
|
+
function handleClick(event) {
|
|
1496
|
+
if (event.detail === 0) context.store.setOpenMethod("keyboard");
|
|
1497
|
+
click.onClick(event);
|
|
1498
|
+
}
|
|
1499
|
+
function handleKeyDown(event) {
|
|
1500
|
+
if (context.readOnly()) return;
|
|
1501
|
+
typeahead.onKeyDown(event);
|
|
1502
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
1503
|
+
event.preventDefault();
|
|
1504
|
+
event.stopPropagation();
|
|
1505
|
+
context.store.setOpenMethod("keyboard");
|
|
1506
|
+
context.setOpen(true, createChangeEventDetails(listNavigation, event));
|
|
1507
|
+
context.focusInput();
|
|
1508
|
+
}
|
|
1509
|
+
}
|
|
1510
|
+
const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
|
|
1511
|
+
const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
|
|
1512
|
+
const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
|
|
1513
|
+
const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
|
|
1514
|
+
const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
|
|
1515
|
+
const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
|
|
1516
|
+
const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
|
|
1517
|
+
const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => (event) => {
|
|
1518
|
+
pointerType = event.pointerType || "";
|
|
1519
|
+
});
|
|
1520
|
+
createEffect(() => ({
|
|
1521
|
+
id: id(),
|
|
1522
|
+
element: element(),
|
|
1523
|
+
insidePopup: insidePopup()
|
|
1524
|
+
}), (current) => {
|
|
1525
|
+
context.setTriggerElement(current.element);
|
|
1526
|
+
labelable.registerControlId(labelSource, current.insidePopup ? current.id : void 0);
|
|
1527
|
+
return () => {
|
|
1528
|
+
if (untrack(context.triggerElement) === current.element) context.setTriggerElement(null);
|
|
1529
|
+
};
|
|
1530
|
+
});
|
|
1531
|
+
onCleanup(() => {
|
|
1532
|
+
clearTimeout(focusTimer);
|
|
1533
|
+
removeMouseUp?.();
|
|
1534
|
+
labelable.registerControlId(labelSource, void 0);
|
|
1535
|
+
});
|
|
1536
|
+
return Dynamic(mergeProps({
|
|
1537
|
+
get component() {
|
|
1538
|
+
return props.as ?? "button";
|
|
1539
|
+
},
|
|
1540
|
+
ref: [((value) => setElement(value)), internalProps.ref],
|
|
1541
|
+
get id() {
|
|
1542
|
+
return id();
|
|
1543
|
+
},
|
|
1544
|
+
get type() {
|
|
1545
|
+
return nativeButton() ? "button" : void 0;
|
|
1546
|
+
},
|
|
1547
|
+
get tabindex() {
|
|
1548
|
+
return insidePopup() ? 0 : -1;
|
|
1549
|
+
},
|
|
1550
|
+
get role() {
|
|
1551
|
+
return insidePopup() ? "combobox" : void 0;
|
|
1552
|
+
},
|
|
1553
|
+
get disabled() {
|
|
1554
|
+
return nativeButton() && disabled() ? true : void 0;
|
|
1555
|
+
},
|
|
1556
|
+
get ["aria-disabled"]() {
|
|
1557
|
+
return !nativeButton() && disabled() ? "true" : void 0;
|
|
1558
|
+
},
|
|
1559
|
+
get ["aria-expanded"]() {
|
|
1560
|
+
return context.store.open() ? "true" : "false";
|
|
1561
|
+
},
|
|
1562
|
+
get ["aria-haspopup"]() {
|
|
1563
|
+
return insidePopup() ? "dialog" : "listbox";
|
|
1564
|
+
},
|
|
1565
|
+
get ["aria-controls"]() {
|
|
1566
|
+
return ariaControls();
|
|
1567
|
+
},
|
|
1568
|
+
get ["aria-required"]() {
|
|
1569
|
+
return insidePopup() && context.required() ? "true" : void 0;
|
|
1570
|
+
},
|
|
1571
|
+
get ["aria-labelledby"]() {
|
|
1572
|
+
return ariaLabelledBy();
|
|
1573
|
+
},
|
|
1574
|
+
get ["aria-invalid"]() {
|
|
1575
|
+
return state().valid === false && !disabled() ? "true" : void 0;
|
|
1576
|
+
},
|
|
1577
|
+
"data-base-ui-click-trigger": "",
|
|
1578
|
+
get ["class"]() {
|
|
1579
|
+
return classValue();
|
|
1580
|
+
},
|
|
1581
|
+
get style() {
|
|
1582
|
+
return styleValue();
|
|
1583
|
+
},
|
|
1584
|
+
onBlur,
|
|
1585
|
+
onClick,
|
|
1586
|
+
onFocus,
|
|
1587
|
+
onKeyDown,
|
|
1588
|
+
onKeyUp,
|
|
1589
|
+
onMouseDown,
|
|
1590
|
+
onPointerDown,
|
|
1591
|
+
onPointerEnter
|
|
1592
|
+
}, stateAttributes, others));
|
|
1593
|
+
}
|
|
1594
|
+
//#endregion
|
|
1595
|
+
//#region src/combobox/chips/ComboboxChipsContext.ts
|
|
1596
|
+
/** The DOM-ordered registry of rendered chips, which the keyboard highlight walks. */
|
|
1597
|
+
var ComboboxChipRegistry = class {
|
|
1598
|
+
registrations = /* @__PURE__ */ new Map();
|
|
1599
|
+
revision;
|
|
1600
|
+
setRevision;
|
|
1601
|
+
order = 0;
|
|
1602
|
+
orders = /* @__PURE__ */ new Map();
|
|
1603
|
+
constructor() {
|
|
1604
|
+
const [revision, setRevision] = createSignal(0, { ownedWrite: true });
|
|
1605
|
+
this.revision = revision;
|
|
1606
|
+
this.setRevision = setRevision;
|
|
1607
|
+
}
|
|
1608
|
+
register(token, element) {
|
|
1609
|
+
this.registrations.set(token, element);
|
|
1610
|
+
this.orders.set(token, this.order);
|
|
1611
|
+
this.order += 1;
|
|
1612
|
+
this.touch();
|
|
1613
|
+
return () => {
|
|
1614
|
+
if (this.registrations.delete(token)) {
|
|
1615
|
+
this.orders.delete(token);
|
|
1616
|
+
this.touch();
|
|
1617
|
+
}
|
|
1618
|
+
};
|
|
1619
|
+
}
|
|
1620
|
+
touch() {
|
|
1621
|
+
this.setRevision((value) => value + 1);
|
|
1622
|
+
}
|
|
1623
|
+
tokens() {
|
|
1624
|
+
this.revision();
|
|
1625
|
+
return Array.from(this.registrations.keys()).sort((first, second) => {
|
|
1626
|
+
const firstElement = this.registrations.get(first)?.() ?? null;
|
|
1627
|
+
const secondElement = this.registrations.get(second)?.() ?? null;
|
|
1628
|
+
if (firstElement && secondElement && firstElement !== secondElement) {
|
|
1629
|
+
const position = firstElement.compareDocumentPosition(secondElement);
|
|
1630
|
+
if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
|
|
1631
|
+
if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
|
|
1632
|
+
}
|
|
1633
|
+
return (this.orders.get(first) ?? 0) - (this.orders.get(second) ?? 0);
|
|
1634
|
+
});
|
|
1635
|
+
}
|
|
1636
|
+
elements() {
|
|
1637
|
+
return this.tokens().map((token) => this.registrations.get(token)?.() ?? null);
|
|
1638
|
+
}
|
|
1639
|
+
indexOf(token) {
|
|
1640
|
+
return this.tokens().indexOf(token);
|
|
1641
|
+
}
|
|
1642
|
+
size() {
|
|
1643
|
+
return this.tokens().length;
|
|
1644
|
+
}
|
|
1645
|
+
};
|
|
1646
|
+
var MISSING_CONTEXT$4 = Symbol("ComboboxChipsContext");
|
|
1647
|
+
var ComboboxChipsContext = createContext(MISSING_CONTEXT$4);
|
|
1648
|
+
function useComboboxChipsContext() {
|
|
1649
|
+
const context = useContext(ComboboxChipsContext);
|
|
1650
|
+
return context === MISSING_CONTEXT$4 ? void 0 : context;
|
|
1651
|
+
}
|
|
1652
|
+
function useRequiredComboboxChipsContext() {
|
|
1653
|
+
const context = useComboboxChipsContext();
|
|
1654
|
+
if (!context) throw new Error("Base UI: ComboboxChipsContext is missing. Chip parts must be placed within <Combobox.Chips>.");
|
|
1655
|
+
return context;
|
|
1656
|
+
}
|
|
1657
|
+
//#endregion
|
|
1658
|
+
//#region src/combobox/positioner/ComboboxPositionerContext.ts
|
|
1659
|
+
var MISSING_CONTEXT$3 = Symbol("ComboboxPositionerContext");
|
|
1660
|
+
var ComboboxPositionerContext = createContext(MISSING_CONTEXT$3);
|
|
1661
|
+
function useComboboxPositionerContext(optional = false) {
|
|
1662
|
+
const context = useContext(ComboboxPositionerContext);
|
|
1663
|
+
if (context === MISSING_CONTEXT$3) {
|
|
1664
|
+
if (optional) return;
|
|
1665
|
+
throw new Error("Base UI: <Combobox.Popup> and <Combobox.Arrow> must be used within the <Combobox.Positioner> component.");
|
|
1666
|
+
}
|
|
1667
|
+
return context;
|
|
1668
|
+
}
|
|
1669
|
+
//#endregion
|
|
1670
|
+
//#region src/combobox/utils/ComboboxInternalDismissButton.tsx
|
|
1671
|
+
var _tmpl$ = [
|
|
1672
|
+
"<span",
|
|
1673
|
+
" role=\"button\" aria-label=\"Dismiss\" style=\"",
|
|
1674
|
+
"\"></span>"
|
|
1675
|
+
];
|
|
1676
|
+
var DISMISS_BUTTON_STYLE = {
|
|
1677
|
+
"clip-path": "inset(50%)",
|
|
1678
|
+
overflow: "hidden",
|
|
1679
|
+
"white-space": "nowrap",
|
|
1680
|
+
border: "0",
|
|
1681
|
+
padding: "0",
|
|
1682
|
+
width: "1px",
|
|
1683
|
+
height: "1px",
|
|
1684
|
+
margin: "-1px",
|
|
1685
|
+
position: "absolute",
|
|
1686
|
+
top: "0",
|
|
1687
|
+
left: "0"
|
|
1688
|
+
};
|
|
1689
|
+
/**
|
|
1690
|
+
* A visually hidden control that gives screen reader users a way out of the popup when the input
|
|
1691
|
+
* is inside it and the trigger is no longer reachable.
|
|
1692
|
+
* @internal
|
|
1693
|
+
*/
|
|
1694
|
+
function ComboboxInternalDismissButton(props) {
|
|
1695
|
+
useComboboxRootContext();
|
|
1696
|
+
var _v$ = ssrHydrationKey();
|
|
1697
|
+
return ssr(_tmpl$, _v$, ssrStyle(DISMISS_BUTTON_STYLE));
|
|
1698
|
+
}
|
|
1699
|
+
//#endregion
|
|
1700
|
+
//#region src/combobox/utils/parts.ts
|
|
1701
|
+
/** The arrow keys that move the chip highlight backwards and forwards, in that order. */
|
|
1702
|
+
function getChipNavigationKeys(direction) {
|
|
1703
|
+
return direction === "rtl" ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
|
|
1704
|
+
}
|
|
1705
|
+
/** Where the highlight lands once the chip at `index` is removed, or `undefined` for none. */
|
|
1706
|
+
function getIndexAfterChipRemoval(index, chipCount) {
|
|
1707
|
+
const nextIndex = index >= chipCount - 1 ? chipCount - 2 : index;
|
|
1708
|
+
return nextIndex >= 0 ? nextIndex : void 0;
|
|
1709
|
+
}
|
|
1710
|
+
//#endregion
|
|
1711
|
+
//#region src/combobox/input/ComboboxInput.tsx
|
|
1712
|
+
/** A text input to search for items in the list. */
|
|
1713
|
+
function ComboboxInput(props) {
|
|
1714
|
+
const context = useComboboxRootContext();
|
|
1715
|
+
const chips = useComboboxChipsContext();
|
|
1716
|
+
const positioner = useComboboxPositionerContext(true);
|
|
1717
|
+
const labelable = useLabelableContext();
|
|
1718
|
+
const direction = useDirection();
|
|
1719
|
+
const internalProps = props;
|
|
1720
|
+
const allProps = props;
|
|
1721
|
+
const generatedId = `base-ui-${createUniqueId()}`;
|
|
1722
|
+
const hasPositionerParent = positioner !== void 0;
|
|
1723
|
+
const insidePopup = createMemo(() => hasPositionerParent || context.inline());
|
|
1724
|
+
const focusManagerModal = createMemo(() => !insidePopup() || context.modal());
|
|
1725
|
+
const id = createMemo(() => internalProps.id ?? (insidePopup() ? generatedId : context.id()));
|
|
1726
|
+
const disabled = createMemo(() => context.field.disabled() || context.disabled() || (internalProps.disabled ?? false));
|
|
1727
|
+
const inputOwnsFormValue = createMemo(() => context.selectionMode() === "none" && !hasPositionerParent);
|
|
1728
|
+
const [composingValue, setComposingValue] = createSignal(null);
|
|
1729
|
+
let composing = false;
|
|
1730
|
+
let lastActiveIndex = null;
|
|
1731
|
+
let shouldRestoreActiveIndex = false;
|
|
1732
|
+
const fieldState = createMemo(() => hasPositionerParent ? {
|
|
1733
|
+
...context.field.state(),
|
|
1734
|
+
...DEFAULT_FIELD_STATE_ATTRIBUTES
|
|
1735
|
+
} : context.field.state());
|
|
1736
|
+
const state = createMemo(() => ({
|
|
1737
|
+
...fieldState(),
|
|
1738
|
+
open: context.store.open(),
|
|
1739
|
+
disabled: disabled(),
|
|
1740
|
+
readOnly: context.readOnly(),
|
|
1741
|
+
popupSide: context.store.resolvedPopupSide(),
|
|
1742
|
+
listEmpty: context.listEmpty()
|
|
1743
|
+
}));
|
|
1744
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
1745
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
1746
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxControlStateMapping));
|
|
1747
|
+
const activeDescendant = createMemo(() => {
|
|
1748
|
+
const activeIndex = context.store.activeIndex();
|
|
1749
|
+
return activeIndex == null ? void 0 : `${context.id()}-${activeIndex}`;
|
|
1750
|
+
});
|
|
1751
|
+
const others = omit(allProps, "as", "class", "disabled", "id", "onBlur", "onCompositionEnd", "onCompositionStart", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPointerDown", "onPointerMove", "ref", "style");
|
|
1752
|
+
function clearHighlight() {
|
|
1753
|
+
context.setIndices({
|
|
1754
|
+
activeIndex: null,
|
|
1755
|
+
selectedIndex: null,
|
|
1756
|
+
type: context.store.keyboardActive ? keyboard : pointer
|
|
1757
|
+
});
|
|
1758
|
+
}
|
|
1759
|
+
function handleFocus() {
|
|
1760
|
+
context.field.setFocused(true);
|
|
1761
|
+
if (!context.inline() || !shouldRestoreActiveIndex) return;
|
|
1762
|
+
shouldRestoreActiveIndex = false;
|
|
1763
|
+
const nextActiveIndex = lastActiveIndex;
|
|
1764
|
+
if (nextActiveIndex == null || context.itemValues()[nextActiveIndex] === void 0) return;
|
|
1765
|
+
context.setIndices({ activeIndex: nextActiveIndex });
|
|
1766
|
+
}
|
|
1767
|
+
function handleBlur() {
|
|
1768
|
+
context.field.setTouched(true);
|
|
1769
|
+
context.field.setFocused(false);
|
|
1770
|
+
const activeIndex = context.store.activeIndex();
|
|
1771
|
+
if (context.inline() && activeIndex !== null && context.autoHighlight() !== "always") {
|
|
1772
|
+
lastActiveIndex = activeIndex;
|
|
1773
|
+
shouldRestoreActiveIndex = true;
|
|
1774
|
+
context.setIndices({ activeIndex: null });
|
|
1775
|
+
}
|
|
1776
|
+
if (context.field.validationMode() === "onBlur") context.field.validation.commit(context.selectionMode() === "none" ? context.inputValue() : context.selectedValue());
|
|
1777
|
+
}
|
|
1778
|
+
function handleCompositionStart(event) {
|
|
1779
|
+
if (isAndroid()) return;
|
|
1780
|
+
composing = true;
|
|
1781
|
+
setComposingValue(event.currentTarget.value);
|
|
1782
|
+
}
|
|
1783
|
+
function handleCompositionEnd(event) {
|
|
1784
|
+
composing = false;
|
|
1785
|
+
const next = event.currentTarget.value;
|
|
1786
|
+
setComposingValue(null);
|
|
1787
|
+
context.setInputValue(next, createChangeEventDetails(inputChange, event));
|
|
1788
|
+
}
|
|
1789
|
+
function maybeOpenOnInput(trimmed, event, shouldOpen) {
|
|
1790
|
+
if (context.readOnly() || disabled() || !trimmed || !shouldOpen) return;
|
|
1791
|
+
context.setOpen(true, createChangeEventDetails(inputChange, event));
|
|
1792
|
+
if (!context.autoHighlight()) clearHighlight();
|
|
1793
|
+
}
|
|
1794
|
+
function handleInput(event) {
|
|
1795
|
+
const input = event.currentTarget;
|
|
1796
|
+
const autofillLike = !event.inputType || event.inputType === "insertReplacementText";
|
|
1797
|
+
const shouldOpenOnInput = composing || !autofillLike;
|
|
1798
|
+
if (composing) {
|
|
1799
|
+
const nextValue = input.value;
|
|
1800
|
+
setComposingValue(nextValue);
|
|
1801
|
+
if (nextValue === "" && !context.openOnInputClick() && !context.store.inputInsidePopup()) context.setOpen(false, createChangeEventDetails(inputClear, event));
|
|
1802
|
+
const trimmed = nextValue.trim();
|
|
1803
|
+
const maintainHighlight = Boolean(context.autoHighlight()) && trimmed !== "";
|
|
1804
|
+
maybeOpenOnInput(trimmed, event, shouldOpenOnInput);
|
|
1805
|
+
if (context.store.open() && context.store.activeIndex() !== null && !maintainHighlight) clearHighlight();
|
|
1806
|
+
return;
|
|
1807
|
+
}
|
|
1808
|
+
const changeDetails = createChangeEventDetails(inputChange, event);
|
|
1809
|
+
context.setInputValue(input.value, changeDetails);
|
|
1810
|
+
if (changeDetails.isCanceled) return;
|
|
1811
|
+
const empty = input.value === "";
|
|
1812
|
+
const clearDetails = createChangeEventDetails(inputClear, event);
|
|
1813
|
+
if (empty && !context.store.inputInsidePopup()) {
|
|
1814
|
+
if (context.selectionMode() === "single") context.setSelectedValue(null, clearDetails);
|
|
1815
|
+
if (!context.openOnInputClick()) context.setOpen(false, clearDetails);
|
|
1816
|
+
}
|
|
1817
|
+
maybeOpenOnInput(input.value.trim(), event, shouldOpenOnInput);
|
|
1818
|
+
if (context.store.open() && context.store.activeIndex() !== null && !context.autoHighlight()) clearHighlight();
|
|
1819
|
+
}
|
|
1820
|
+
/** Chip highlight movement driven from the input, which owns real focus. */
|
|
1821
|
+
function resolveChipIndex(event) {
|
|
1822
|
+
if (!chips) return;
|
|
1823
|
+
const input = event.currentTarget;
|
|
1824
|
+
const highlighted = chips.highlightedChipIndex();
|
|
1825
|
+
const chipCount = chips.chips.size();
|
|
1826
|
+
const [previousChipKey, nextChipKey] = getChipNavigationKeys(direction());
|
|
1827
|
+
const selected = context.selectedValue();
|
|
1828
|
+
const values = Array.isArray(selected) ? selected : [];
|
|
1829
|
+
if (highlighted !== void 0) {
|
|
1830
|
+
if (event.key === previousChipKey) {
|
|
1831
|
+
event.preventDefault();
|
|
1832
|
+
return highlighted > 0 ? highlighted - 1 : void 0;
|
|
1833
|
+
}
|
|
1834
|
+
if (event.key === nextChipKey) {
|
|
1835
|
+
event.preventDefault();
|
|
1836
|
+
return highlighted < chipCount - 1 ? highlighted + 1 : void 0;
|
|
1837
|
+
}
|
|
1838
|
+
if (event.key === "Backspace" || event.key === "Delete") {
|
|
1839
|
+
event.preventDefault();
|
|
1840
|
+
const nextIndex = getIndexAfterChipRemoval(highlighted, values.length);
|
|
1841
|
+
clearHighlight();
|
|
1842
|
+
return nextIndex;
|
|
1843
|
+
}
|
|
1844
|
+
return;
|
|
1845
|
+
}
|
|
1846
|
+
if (event.key === previousChipKey && (input.selectionStart ?? 0) === 0 && values.length > 0) {
|
|
1847
|
+
event.preventDefault();
|
|
1848
|
+
return chipCount > 0 ? chipCount - 1 : void 0;
|
|
1849
|
+
}
|
|
1850
|
+
}
|
|
1851
|
+
function handleEscapeWhileClosed(event) {
|
|
1852
|
+
const selected = context.selectedValue();
|
|
1853
|
+
const alreadyClear = context.selectionMode() === "multiple" && Array.isArray(selected) ? selected.length === 0 : selected === null;
|
|
1854
|
+
const details = createChangeEventDetails(escapeKey, event);
|
|
1855
|
+
context.setInputValue("", details);
|
|
1856
|
+
context.setSelectedValue(context.selectionMode() === "multiple" ? [] : null, details);
|
|
1857
|
+
if (!alreadyClear && !context.inline() && !details.isPropagationAllowed) event.stopPropagation();
|
|
1858
|
+
}
|
|
1859
|
+
function handleKeyDown(event) {
|
|
1860
|
+
const editable = !disabled() && !context.readOnly();
|
|
1861
|
+
const modified = event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
|
|
1862
|
+
if (editable && !modified) context.store.keyboardActive = true;
|
|
1863
|
+
if (!(context.grid() && context.store.activeIndex() == null && (event.key === "ArrowLeft" || event.key === "ArrowRight"))) context.listNavigation.onKeyDown(event);
|
|
1864
|
+
context.dismiss.onKeyDown(event);
|
|
1865
|
+
if (!editable || modified) return;
|
|
1866
|
+
const input = event.currentTarget;
|
|
1867
|
+
const isRTL = direction() === "rtl";
|
|
1868
|
+
if (event.key === "Home" || event.key === "End") {
|
|
1869
|
+
event.preventDefault();
|
|
1870
|
+
event.stopPropagation();
|
|
1871
|
+
const scrollAmount = input.scrollWidth - input.clientWidth;
|
|
1872
|
+
const atStart = event.key === "Home";
|
|
1873
|
+
const cursor = isGecko() && isRTL === atStart ? input.value.length : atStart ? 0 : input.value.length;
|
|
1874
|
+
input.setSelectionRange(cursor, cursor);
|
|
1875
|
+
input.scrollLeft = atStart ? 0 : isRTL ? -scrollAmount : scrollAmount;
|
|
1876
|
+
return;
|
|
1877
|
+
}
|
|
1878
|
+
if (!context.presence.mounted() && event.key === "Escape") {
|
|
1879
|
+
handleEscapeWhileClosed(event);
|
|
1880
|
+
return;
|
|
1881
|
+
}
|
|
1882
|
+
if (chips && event.key === "Backspace" && input.value === "" && chips.highlightedChipIndex() === void 0 && Array.isArray(context.selectedValue()) && context.selectedValue().length > 0) {
|
|
1883
|
+
const values = context.selectedValue();
|
|
1884
|
+
const chipCount = chips.chips.size();
|
|
1885
|
+
const removalIndex = chipCount > 0 ? chipCount - 1 : values.length - 1;
|
|
1886
|
+
clearHighlight();
|
|
1887
|
+
context.setSelectedValue(values.filter((_, index) => index !== removalIndex), createChangeEventDetails(none, event));
|
|
1888
|
+
return;
|
|
1889
|
+
}
|
|
1890
|
+
if (chips) {
|
|
1891
|
+
const hadHighlightedChip = chips.highlightedChipIndex() !== void 0;
|
|
1892
|
+
const nextIndex = resolveChipIndex(event);
|
|
1893
|
+
chips.setHighlightedChipIndex(nextIndex);
|
|
1894
|
+
if (nextIndex !== void 0) chips.chips.elements()[nextIndex]?.focus();
|
|
1895
|
+
else if (hadHighlightedChip) context.focusInput();
|
|
1896
|
+
}
|
|
1897
|
+
if (event.keyCode === 229) return;
|
|
1898
|
+
if (event.key === "Enter" && context.store.open()) {
|
|
1899
|
+
const activeIndex = context.store.activeIndex();
|
|
1900
|
+
if (activeIndex === null) {
|
|
1901
|
+
if (context.inline()) return;
|
|
1902
|
+
context.setOpen(false, createChangeEventDetails(none, event));
|
|
1903
|
+
return;
|
|
1904
|
+
}
|
|
1905
|
+
event.preventDefault();
|
|
1906
|
+
event.stopPropagation();
|
|
1907
|
+
context.clickHighlightedItem(activeIndex, event);
|
|
1908
|
+
}
|
|
1909
|
+
}
|
|
1910
|
+
function markPointerActive() {
|
|
1911
|
+
context.store.keyboardActive = false;
|
|
1912
|
+
}
|
|
1913
|
+
const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
|
|
1914
|
+
const onCompositionEnd = composeEventHandlers(() => internalProps.onCompositionEnd, () => handleCompositionEnd);
|
|
1915
|
+
const onCompositionStart = composeEventHandlers(() => internalProps.onCompositionStart, () => handleCompositionStart);
|
|
1916
|
+
const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
|
|
1917
|
+
const onInput = composeEventHandlers(() => internalProps.onInput, () => handleInput);
|
|
1918
|
+
const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
|
|
1919
|
+
const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => context.click.onMouseDown(event));
|
|
1920
|
+
const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => (event) => {
|
|
1921
|
+
markPointerActive();
|
|
1922
|
+
context.click.onPointerDown(event);
|
|
1923
|
+
});
|
|
1924
|
+
const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => markPointerActive);
|
|
1925
|
+
createEffect(() => ({
|
|
1926
|
+
insidePopup: insidePopup(),
|
|
1927
|
+
owns: inputOwnsFormValue()
|
|
1928
|
+
}), (current) => {
|
|
1929
|
+
context.store.setInputInsidePopup(current.insidePopup);
|
|
1930
|
+
context.store.setInputOwnsFormValue(current.owns);
|
|
1931
|
+
if (current.insidePopup && !context.hasInputValueProp()) untrack(() => context.setInputValue("", createChangeEventDetails(none)));
|
|
1932
|
+
});
|
|
1933
|
+
onCleanup(() => {
|
|
1934
|
+
if (untrack(context.inputElement) === element) context.setInputElement(null);
|
|
1935
|
+
});
|
|
1936
|
+
let element = null;
|
|
1937
|
+
return [Show({
|
|
1938
|
+
get when() {
|
|
1939
|
+
return memo(() => {
|
|
1940
|
+
return !!context.store.open();
|
|
1941
|
+
})() ? focusManagerModal() : context.store.open();
|
|
1942
|
+
},
|
|
1943
|
+
get children() {
|
|
1944
|
+
return ComboboxInternalDismissButton({ ref: (node) => {
|
|
1945
|
+
context.store.startDismissElement = node;
|
|
1946
|
+
} });
|
|
1947
|
+
}
|
|
1948
|
+
}), Dynamic(mergeProps({
|
|
1949
|
+
get component() {
|
|
1950
|
+
return props.as ?? "input";
|
|
1951
|
+
},
|
|
1952
|
+
ref: [((value) => {
|
|
1953
|
+
element = value;
|
|
1954
|
+
context.setInputElement(value);
|
|
1955
|
+
}), internalProps.ref],
|
|
1956
|
+
get id() {
|
|
1957
|
+
return id();
|
|
1958
|
+
},
|
|
1959
|
+
get value() {
|
|
1960
|
+
return composingValue() ?? context.inputValue();
|
|
1961
|
+
},
|
|
1962
|
+
get disabled() {
|
|
1963
|
+
return disabled();
|
|
1964
|
+
},
|
|
1965
|
+
get readonly() {
|
|
1966
|
+
return context.readOnly();
|
|
1967
|
+
},
|
|
1968
|
+
get required() {
|
|
1969
|
+
return memo(() => {
|
|
1970
|
+
return context.selectionMode() === "none";
|
|
1971
|
+
})() ? context.required() : void 0;
|
|
1972
|
+
},
|
|
1973
|
+
get form() {
|
|
1974
|
+
return context.form();
|
|
1975
|
+
},
|
|
1976
|
+
get name() {
|
|
1977
|
+
return memo(() => {
|
|
1978
|
+
return !!inputOwnsFormValue();
|
|
1979
|
+
})() ? context.name() : void 0;
|
|
1980
|
+
},
|
|
1981
|
+
get ["aria-readonly"]() {
|
|
1982
|
+
return context.readOnly() ? "true" : void 0;
|
|
1983
|
+
},
|
|
1984
|
+
get ["aria-required"]() {
|
|
1985
|
+
return context.required() ? "true" : void 0;
|
|
1986
|
+
},
|
|
1987
|
+
get ["aria-labelledby"]() {
|
|
1988
|
+
return labelable.labelId();
|
|
1989
|
+
},
|
|
1990
|
+
get ["aria-describedby"]() {
|
|
1991
|
+
return labelable.getAriaDescribedBy(void 0);
|
|
1992
|
+
},
|
|
1993
|
+
get ["aria-activedescendant"]() {
|
|
1994
|
+
return activeDescendant();
|
|
1995
|
+
},
|
|
1996
|
+
get ["aria-invalid"]() {
|
|
1997
|
+
return state().valid === false && !disabled() ? "true" : void 0;
|
|
1998
|
+
},
|
|
1999
|
+
"data-base-ui-click-trigger": "",
|
|
2000
|
+
get ["class"]() {
|
|
2001
|
+
return classValue();
|
|
2002
|
+
},
|
|
2003
|
+
get style() {
|
|
2004
|
+
return styleValue();
|
|
2005
|
+
},
|
|
2006
|
+
onBlur,
|
|
2007
|
+
onCompositionEnd,
|
|
2008
|
+
onCompositionStart,
|
|
2009
|
+
onFocus,
|
|
2010
|
+
onInput,
|
|
2011
|
+
onKeyDown,
|
|
2012
|
+
onMouseDown,
|
|
2013
|
+
onPointerDown,
|
|
2014
|
+
onPointerMove
|
|
2015
|
+
}, () => {
|
|
2016
|
+
return context.referenceAria();
|
|
2017
|
+
}, stateAttributes, others))];
|
|
2018
|
+
}
|
|
2019
|
+
function isGecko() {
|
|
2020
|
+
return typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox");
|
|
2021
|
+
}
|
|
2022
|
+
//#endregion
|
|
2023
|
+
//#region src/combobox/utils/handleInputPress.ts
|
|
2024
|
+
/**
|
|
2025
|
+
* Routes a press anywhere in the input's surroundings back to the input, so clicking the padding
|
|
2026
|
+
* of an input group or the empty space beside the chips focuses and opens the combobox.
|
|
2027
|
+
*/
|
|
2028
|
+
function handleInputPress(event, context, disabled, readOnly, shouldIgnoreTarget) {
|
|
2029
|
+
if (event.baseUIHandlerPrevented || readOnly) return;
|
|
2030
|
+
const target = event.target;
|
|
2031
|
+
const targetElement = isElement(target) ? target : null;
|
|
2032
|
+
if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || isInteractiveElement(targetElement))) return;
|
|
2033
|
+
event.preventDefault();
|
|
2034
|
+
if (disabled) return;
|
|
2035
|
+
context.focusInput();
|
|
2036
|
+
if (context.openOnInputClick()) context.setOpen(true, createChangeEventDetails(inputPress, event));
|
|
2037
|
+
}
|
|
2038
|
+
//#endregion
|
|
2039
|
+
//#region src/combobox/input-group/ComboboxInputGroup.tsx
|
|
2040
|
+
/** A wrapper for the input and its associated controls. */
|
|
2041
|
+
function ComboboxInputGroup(props) {
|
|
2042
|
+
const context = useComboboxRootContext();
|
|
2043
|
+
const internalProps = props;
|
|
2044
|
+
const allProps = props;
|
|
2045
|
+
const state = createMemo(() => ({
|
|
2046
|
+
...context.field.state(),
|
|
2047
|
+
open: context.store.open(),
|
|
2048
|
+
disabled: context.disabled(),
|
|
2049
|
+
readOnly: context.readOnly(),
|
|
2050
|
+
popupSide: context.store.resolvedPopupSide(),
|
|
2051
|
+
listEmpty: context.listEmpty(),
|
|
2052
|
+
placeholder: context.selectionMode() === "none" ? false : !context.hasSelectedValue()
|
|
2053
|
+
}));
|
|
2054
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2055
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
2056
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxControlStateMapping));
|
|
2057
|
+
const others = omit(allProps, "as", "class", "onMouseDown", "ref", "style");
|
|
2058
|
+
const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => handleInputPress(event, context, context.disabled(), context.readOnly(), (target) => contains(context.store.chipsContainerElement, target)));
|
|
2059
|
+
onCleanup(() => {
|
|
2060
|
+
if (untrack(context.inputGroupElement) === element) context.setInputGroupElement(null);
|
|
2061
|
+
});
|
|
2062
|
+
let element = null;
|
|
2063
|
+
return Dynamic(mergeProps({
|
|
2064
|
+
get component() {
|
|
2065
|
+
return props.as ?? "div";
|
|
2066
|
+
},
|
|
2067
|
+
ref: [((value) => {
|
|
2068
|
+
element = value;
|
|
2069
|
+
context.setInputGroupElement(value);
|
|
2070
|
+
}), internalProps.ref],
|
|
2071
|
+
role: "group",
|
|
2072
|
+
get ["class"]() {
|
|
2073
|
+
return classValue();
|
|
2074
|
+
},
|
|
2075
|
+
get style() {
|
|
2076
|
+
return styleValue();
|
|
2077
|
+
},
|
|
2078
|
+
onMouseDown
|
|
2079
|
+
}, stateAttributes, others));
|
|
2080
|
+
}
|
|
2081
|
+
//#endregion
|
|
2082
|
+
//#region src/combobox/icon/ComboboxIcon.tsx
|
|
2083
|
+
/** An icon indicating that the trigger opens the popup. */
|
|
2084
|
+
function ComboboxIcon(props) {
|
|
2085
|
+
const context = useComboboxRootContext();
|
|
2086
|
+
const internalProps = props;
|
|
2087
|
+
const allProps = props;
|
|
2088
|
+
const state = createMemo(() => ({ open: context.store.open() }));
|
|
2089
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2090
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
2091
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
|
|
2092
|
+
const others = omit(allProps, "as", "class", "ref", "style");
|
|
2093
|
+
return Show({
|
|
2094
|
+
get when() {
|
|
2095
|
+
return props.as;
|
|
2096
|
+
},
|
|
2097
|
+
get fallback() {
|
|
2098
|
+
return ssrElement("span", () => {
|
|
2099
|
+
return mergeProps({
|
|
2100
|
+
"aria-hidden": "true",
|
|
2101
|
+
get ["class"]() {
|
|
2102
|
+
return classValue();
|
|
2103
|
+
},
|
|
2104
|
+
get style() {
|
|
2105
|
+
return styleValue();
|
|
2106
|
+
}
|
|
2107
|
+
}, stateAttributes, others);
|
|
2108
|
+
}, () => {
|
|
2109
|
+
return () => {
|
|
2110
|
+
return escape(props.children ?? "▼");
|
|
2111
|
+
};
|
|
2112
|
+
}, true);
|
|
2113
|
+
},
|
|
2114
|
+
children: (component) => Dynamic(mergeProps({
|
|
2115
|
+
get component() {
|
|
2116
|
+
return component();
|
|
2117
|
+
},
|
|
2118
|
+
ref: [internalProps.ref],
|
|
2119
|
+
"aria-hidden": "true",
|
|
2120
|
+
get ["class"]() {
|
|
2121
|
+
return classValue();
|
|
2122
|
+
},
|
|
2123
|
+
get style() {
|
|
2124
|
+
return styleValue();
|
|
2125
|
+
}
|
|
2126
|
+
}, stateAttributes, others, { get children() {
|
|
2127
|
+
return props.children ?? "▼";
|
|
2128
|
+
} }))
|
|
2129
|
+
});
|
|
2130
|
+
}
|
|
2131
|
+
//#endregion
|
|
2132
|
+
//#region src/combobox/clear/ComboboxClear.tsx
|
|
2133
|
+
/** Clears the value when clicked. */
|
|
2134
|
+
function ComboboxClear(props) {
|
|
2135
|
+
const context = useComboboxRootContext();
|
|
2136
|
+
const internalProps = props;
|
|
2137
|
+
const allProps = props;
|
|
2138
|
+
const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
|
|
2139
|
+
const disabled = createMemo(() => context.field.disabled() || context.disabled() || (internalProps.disabled ?? false));
|
|
2140
|
+
const visible = createMemo(() => {
|
|
2141
|
+
const mode = context.selectionMode();
|
|
2142
|
+
if (mode === "none") return context.inputValue() !== "";
|
|
2143
|
+
if (mode === "single") return context.selectedValue() != null;
|
|
2144
|
+
return context.hasSelectionChips();
|
|
2145
|
+
});
|
|
2146
|
+
const transition = createTransitionStatus(() => visible());
|
|
2147
|
+
const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || transition.mounted());
|
|
2148
|
+
const state = createMemo(() => ({
|
|
2149
|
+
open: context.store.open(),
|
|
2150
|
+
disabled: disabled(),
|
|
2151
|
+
visible: visible(),
|
|
2152
|
+
transitionStatus: transition.transitionStatus()
|
|
2153
|
+
}));
|
|
2154
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2155
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
2156
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxClearStateMapping));
|
|
2157
|
+
const others = omit(allProps, "as", "class", "disabled", "keepMounted", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "ref", "style");
|
|
2158
|
+
let element = null;
|
|
2159
|
+
createEffect(() => ({
|
|
2160
|
+
visible: visible(),
|
|
2161
|
+
status: transition.transitionStatus(),
|
|
2162
|
+
element
|
|
2163
|
+
}), (current) => {
|
|
2164
|
+
if (current.visible || current.status !== "ending" || !current.element) return;
|
|
2165
|
+
const controller = new AbortController();
|
|
2166
|
+
runOnceAnimationsFinish(current.element, () => {
|
|
2167
|
+
if (!untrack(visible)) transition.setMounted(false);
|
|
2168
|
+
}, controller.signal);
|
|
2169
|
+
return () => controller.abort();
|
|
2170
|
+
});
|
|
2171
|
+
function handleClick(event) {
|
|
2172
|
+
if (disabled() || context.readOnly()) return;
|
|
2173
|
+
const type = context.store.keyboardActive ? keyboard : pointer;
|
|
2174
|
+
context.setInputValue("", createChangeEventDetails(clearPress, event));
|
|
2175
|
+
if (context.selectionMode() !== "none") {
|
|
2176
|
+
context.setSelectedValue(Array.isArray(context.selectedValue()) ? [] : null, createChangeEventDetails(clearPress, event));
|
|
2177
|
+
context.setIndices({
|
|
2178
|
+
activeIndex: null,
|
|
2179
|
+
selectedIndex: null,
|
|
2180
|
+
type
|
|
2181
|
+
});
|
|
2182
|
+
} else context.setIndices({
|
|
2183
|
+
activeIndex: null,
|
|
2184
|
+
type
|
|
2185
|
+
});
|
|
2186
|
+
context.focusInput();
|
|
2187
|
+
}
|
|
2188
|
+
const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
|
|
2189
|
+
const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
|
|
2190
|
+
const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
|
|
2191
|
+
const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => event.preventDefault());
|
|
2192
|
+
return Show({
|
|
2193
|
+
get when() {
|
|
2194
|
+
return shouldRender();
|
|
2195
|
+
},
|
|
2196
|
+
get children() {
|
|
2197
|
+
return Dynamic(mergeProps({
|
|
2198
|
+
get component() {
|
|
2199
|
+
return props.as ?? "button";
|
|
2200
|
+
},
|
|
2201
|
+
ref: [((value) => {
|
|
2202
|
+
element = value;
|
|
2203
|
+
context.store.clearElement = value;
|
|
2204
|
+
}), internalProps.ref],
|
|
2205
|
+
get type() {
|
|
2206
|
+
return nativeButton() ? "button" : void 0;
|
|
2207
|
+
},
|
|
2208
|
+
tabindex: -1,
|
|
2209
|
+
get disabled() {
|
|
2210
|
+
return nativeButton() && disabled() ? true : void 0;
|
|
2211
|
+
},
|
|
2212
|
+
get ["aria-disabled"]() {
|
|
2213
|
+
return !nativeButton() && disabled() ? "true" : void 0;
|
|
2214
|
+
},
|
|
2215
|
+
get ["class"]() {
|
|
2216
|
+
return classValue();
|
|
2217
|
+
},
|
|
2218
|
+
get style() {
|
|
2219
|
+
return styleValue();
|
|
2220
|
+
},
|
|
2221
|
+
onClick,
|
|
2222
|
+
onKeyDown,
|
|
2223
|
+
onKeyUp,
|
|
2224
|
+
onMouseDown
|
|
2225
|
+
}, stateAttributes, others, { get children() {
|
|
2226
|
+
return props.children ?? "x";
|
|
2227
|
+
} }));
|
|
2228
|
+
}
|
|
2229
|
+
});
|
|
2230
|
+
}
|
|
2231
|
+
//#endregion
|
|
2232
|
+
//#region src/combobox/collection/ComboboxCollection.tsx
|
|
2233
|
+
/**
|
|
2234
|
+
* Renders the filtered list items, or the items of the enclosing `<Combobox.Group items>`.
|
|
2235
|
+
* Doesn't render its own HTML element.
|
|
2236
|
+
*
|
|
2237
|
+
* If rendering a flat list, pass the same function as a child of `List`, which wraps it
|
|
2238
|
+
* implicitly.
|
|
2239
|
+
*/
|
|
2240
|
+
function ComboboxCollection(props) {
|
|
2241
|
+
const context = useComboboxRootContext();
|
|
2242
|
+
const group = useComboboxGroupCollectionContext();
|
|
2243
|
+
const items = createMemo(() => group?.items() ?? context.filteredItems());
|
|
2244
|
+
return For({
|
|
2245
|
+
get each() {
|
|
2246
|
+
return items();
|
|
2247
|
+
},
|
|
2248
|
+
get children() {
|
|
2249
|
+
return props.children;
|
|
2250
|
+
}
|
|
2251
|
+
});
|
|
2252
|
+
}
|
|
2253
|
+
//#endregion
|
|
2254
|
+
//#region src/combobox/list/ComboboxList.tsx
|
|
2255
|
+
/**
|
|
2256
|
+
* A list container for the items.
|
|
2257
|
+
*
|
|
2258
|
+
* A function child is implicitly wrapped in `<Combobox.Collection>`, so a flat list can be
|
|
2259
|
+
* rendered without naming the collection part.
|
|
2260
|
+
*/
|
|
2261
|
+
function ComboboxList(props) {
|
|
2262
|
+
const context = useComboboxRootContext();
|
|
2263
|
+
const positioner = useComboboxPositionerContext(true);
|
|
2264
|
+
const internalProps = props;
|
|
2265
|
+
const allProps = props;
|
|
2266
|
+
const state = createMemo(() => ({ empty: context.listEmpty() }));
|
|
2267
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2268
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
2269
|
+
const others = omit(allProps, "as", "children", "class", "id", "onKeyDown", "ref", "style");
|
|
2270
|
+
function handleKeyDown(event) {
|
|
2271
|
+
if (context.disabled() || context.readOnly()) return;
|
|
2272
|
+
context.store.keyboardActive = true;
|
|
2273
|
+
if (event.key !== "Enter") return;
|
|
2274
|
+
const activeIndex = context.store.activeIndex();
|
|
2275
|
+
if (activeIndex == null) return;
|
|
2276
|
+
event.preventDefault();
|
|
2277
|
+
event.stopPropagation();
|
|
2278
|
+
context.clickHighlightedItem(activeIndex, event);
|
|
2279
|
+
}
|
|
2280
|
+
const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
|
|
2281
|
+
const [listElement, setListElement] = createSignal(null, { ownedWrite: true });
|
|
2282
|
+
createEffect(listElement, (element) => {
|
|
2283
|
+
if (!element) return;
|
|
2284
|
+
const markPointerActive = () => {
|
|
2285
|
+
context.store.keyboardActive = false;
|
|
2286
|
+
};
|
|
2287
|
+
const markKeyboardActive = () => {
|
|
2288
|
+
context.store.keyboardActive = true;
|
|
2289
|
+
};
|
|
2290
|
+
element.addEventListener("pointermove", markPointerActive, true);
|
|
2291
|
+
element.addEventListener("keydown", markKeyboardActive, true);
|
|
2292
|
+
return () => {
|
|
2293
|
+
element.removeEventListener("pointermove", markPointerActive, true);
|
|
2294
|
+
element.removeEventListener("keydown", markKeyboardActive, true);
|
|
2295
|
+
};
|
|
2296
|
+
});
|
|
2297
|
+
onCleanup(() => {
|
|
2298
|
+
const element = untrack(listElement);
|
|
2299
|
+
if (context.store.listElement() === element) context.store.setListElement(null);
|
|
2300
|
+
if (!positioner && context.store.state.positionerElement === element) context.store.setPositionerElement(null);
|
|
2301
|
+
});
|
|
2302
|
+
const children = createMemo(() => {
|
|
2303
|
+
const child = props.children;
|
|
2304
|
+
if (typeof child === "function" && !isSolidAccessor(child)) return ComboboxCollection({ children: child });
|
|
2305
|
+
return child;
|
|
2306
|
+
});
|
|
2307
|
+
return Dynamic(mergeProps({
|
|
2308
|
+
get component() {
|
|
2309
|
+
return props.as ?? "div";
|
|
2310
|
+
},
|
|
2311
|
+
ref: [((element) => {
|
|
2312
|
+
setListElement(element);
|
|
2313
|
+
context.store.setListElement(element);
|
|
2314
|
+
if (!positioner) context.store.setPositionerElement(element);
|
|
2315
|
+
}), internalProps.ref],
|
|
2316
|
+
get id() {
|
|
2317
|
+
return internalProps.id ?? context.store.context.floatingId;
|
|
2318
|
+
},
|
|
2319
|
+
get role() {
|
|
2320
|
+
return context.grid() ? "grid" : "listbox";
|
|
2321
|
+
},
|
|
2322
|
+
tabindex: -1,
|
|
2323
|
+
get ["aria-multiselectable"]() {
|
|
2324
|
+
return context.multiple() ? "true" : void 0;
|
|
2325
|
+
},
|
|
2326
|
+
get ["class"]() {
|
|
2327
|
+
return classValue();
|
|
2328
|
+
},
|
|
2329
|
+
get style() {
|
|
2330
|
+
return styleValue();
|
|
2331
|
+
},
|
|
2332
|
+
onKeyDown
|
|
2333
|
+
}, others, { get children() {
|
|
2334
|
+
return children();
|
|
2335
|
+
} }));
|
|
2336
|
+
}
|
|
2337
|
+
//#endregion
|
|
2338
|
+
//#region src/combobox/utils/createInitialLiveRegionTextMutation.ts
|
|
2339
|
+
var LIVE_REGION_MARKER = "";
|
|
2340
|
+
function findLastTextNode(root) {
|
|
2341
|
+
const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
|
|
2342
|
+
let lastTextNode = null;
|
|
2343
|
+
while (walker.nextNode()) {
|
|
2344
|
+
const textNode = walker.currentNode;
|
|
2345
|
+
if (textNode.nodeValue !== "") lastTextNode = textNode;
|
|
2346
|
+
}
|
|
2347
|
+
return lastTextNode;
|
|
2348
|
+
}
|
|
2349
|
+
function isIOS() {
|
|
2350
|
+
if (typeof navigator === "undefined") return false;
|
|
2351
|
+
const platform = navigator.platform.toLowerCase();
|
|
2352
|
+
return /^i(os$|p)/.test(platform) || platform === "macintel" && navigator.maxTouchPoints > 1;
|
|
2353
|
+
}
|
|
2354
|
+
/**
|
|
2355
|
+
* Marks the first rendered text of a polite live region so screen readers announce content that
|
|
2356
|
+
* was already present when the region mounted. Later text updates announce on their own.
|
|
2357
|
+
*/
|
|
2358
|
+
function createInitialLiveRegionTextMutation(element) {
|
|
2359
|
+
createEffect(element, (root) => {
|
|
2360
|
+
if (!root || isIOS()) return;
|
|
2361
|
+
const textNode = findLastTextNode(root);
|
|
2362
|
+
if (!textNode) return;
|
|
2363
|
+
const originalValue = textNode.data;
|
|
2364
|
+
const markedValue = `${originalValue}${LIVE_REGION_MARKER}`;
|
|
2365
|
+
textNode.nodeValue = markedValue;
|
|
2366
|
+
const restore = () => {
|
|
2367
|
+
if (textNode.nodeValue === markedValue) textNode.nodeValue = originalValue;
|
|
2368
|
+
};
|
|
2369
|
+
const timer = setTimeout(restore, 200);
|
|
2370
|
+
return () => {
|
|
2371
|
+
clearTimeout(timer);
|
|
2372
|
+
restore();
|
|
2373
|
+
};
|
|
2374
|
+
});
|
|
2375
|
+
}
|
|
2376
|
+
//#endregion
|
|
2377
|
+
//#region src/combobox/status/ComboboxStatus.tsx
|
|
2378
|
+
/**
|
|
2379
|
+
* Displays a status message whose content changes are announced politely, which is useful for
|
|
2380
|
+
* the loading state of an asynchronously fetched list.
|
|
2381
|
+
*
|
|
2382
|
+
* The root element must stay mounted for screen readers to announce consistently, so hide or
|
|
2383
|
+
* conditionally render its children rather than the component itself.
|
|
2384
|
+
*/
|
|
2385
|
+
function ComboboxStatus(props) {
|
|
2386
|
+
const internalProps = props;
|
|
2387
|
+
const allProps = props;
|
|
2388
|
+
const state = {};
|
|
2389
|
+
const classValue = createMemo(() => resolveClass(props.class, state));
|
|
2390
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state));
|
|
2391
|
+
const others = omit(allProps, "as", "class", "ref", "style");
|
|
2392
|
+
const [element, setElement] = createSignal(null, { ownedWrite: true });
|
|
2393
|
+
createInitialLiveRegionTextMutation(element);
|
|
2394
|
+
return Dynamic(mergeProps({
|
|
2395
|
+
get component() {
|
|
2396
|
+
return props.as ?? "div";
|
|
2397
|
+
},
|
|
2398
|
+
ref: [((value) => setElement(value)), internalProps.ref],
|
|
2399
|
+
role: "status",
|
|
2400
|
+
"aria-live": "polite",
|
|
2401
|
+
"aria-atomic": "true",
|
|
2402
|
+
get ["class"]() {
|
|
2403
|
+
return classValue();
|
|
2404
|
+
},
|
|
2405
|
+
get style() {
|
|
2406
|
+
return styleValue();
|
|
2407
|
+
}
|
|
2408
|
+
}, others));
|
|
2409
|
+
}
|
|
2410
|
+
//#endregion
|
|
2411
|
+
//#region src/combobox/portal/ComboboxPortalContext.ts
|
|
2412
|
+
var MISSING_CONTEXT$2 = Symbol("ComboboxPortalContext");
|
|
2413
|
+
var ComboboxPortalContext = createContext(MISSING_CONTEXT$2);
|
|
2414
|
+
/** The enclosing portal's `keepMounted`, which the positioner needs while it stays mounted. */
|
|
2415
|
+
function useComboboxPortalContext() {
|
|
2416
|
+
const context = useContext(ComboboxPortalContext);
|
|
2417
|
+
if (context === MISSING_CONTEXT$2) throw new Error("Base UI: <Combobox.Portal> is missing.");
|
|
2418
|
+
return context;
|
|
2419
|
+
}
|
|
2420
|
+
//#endregion
|
|
2421
|
+
//#region src/combobox/portal/ComboboxPortal.tsx
|
|
2422
|
+
/**
|
|
2423
|
+
* Moves the popup to a different part of the DOM. By default the portal element is appended to
|
|
2424
|
+
* `<body>`.
|
|
2425
|
+
*/
|
|
2426
|
+
function ComboboxPortal(props) {
|
|
2427
|
+
const context = useComboboxRootContext();
|
|
2428
|
+
const internalProps = props;
|
|
2429
|
+
const allProps = props;
|
|
2430
|
+
const keepMounted = createMemo(() => internalProps.keepMounted ?? false);
|
|
2431
|
+
const shouldRender = createMemo(() => context.presence.mounted() || keepMounted() || context.store.forceMounted());
|
|
2432
|
+
const state = {};
|
|
2433
|
+
const classValue = createMemo(() => resolveClass(props.class, state));
|
|
2434
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state));
|
|
2435
|
+
const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
|
|
2436
|
+
return Show({
|
|
2437
|
+
get when() {
|
|
2438
|
+
return shouldRender();
|
|
2439
|
+
},
|
|
2440
|
+
get children() {
|
|
2441
|
+
return ComboboxPortalContext({
|
|
2442
|
+
get value() {
|
|
2443
|
+
return keepMounted();
|
|
2444
|
+
},
|
|
2445
|
+
get children() {
|
|
2446
|
+
return PopupPortal(mergeProps({
|
|
2447
|
+
get as() {
|
|
2448
|
+
return props.as;
|
|
2449
|
+
},
|
|
2450
|
+
get container() {
|
|
2451
|
+
return internalProps.container;
|
|
2452
|
+
},
|
|
2453
|
+
ref: (element) => setRef(internalProps.ref, element),
|
|
2454
|
+
get ["class"]() {
|
|
2455
|
+
return classValue();
|
|
2456
|
+
},
|
|
2457
|
+
get style() {
|
|
2458
|
+
return styleValue();
|
|
2459
|
+
}
|
|
2460
|
+
}, others, { get children() {
|
|
2461
|
+
return props.children;
|
|
2462
|
+
} }));
|
|
2463
|
+
}
|
|
2464
|
+
});
|
|
2465
|
+
}
|
|
2466
|
+
});
|
|
2467
|
+
}
|
|
2468
|
+
//#endregion
|
|
2469
|
+
//#region src/combobox/backdrop/ComboboxBackdrop.tsx
|
|
2470
|
+
/** An overlay displayed beneath the popup. */
|
|
2471
|
+
function ComboboxBackdrop(props) {
|
|
2472
|
+
const context = useComboboxRootContext();
|
|
2473
|
+
const internalProps = props;
|
|
2474
|
+
const allProps = props;
|
|
2475
|
+
const state = createMemo(() => ({
|
|
2476
|
+
open: context.store.open(),
|
|
2477
|
+
transitionStatus: context.store.track().transitionStatus
|
|
2478
|
+
}));
|
|
2479
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2480
|
+
const styleValue = createMemo(() => mergeStyleValue({
|
|
2481
|
+
"user-select": "none",
|
|
2482
|
+
"-webkit-user-select": "none"
|
|
2483
|
+
}, resolveStyle(props.style, state())));
|
|
2484
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxBackdropStateMapping));
|
|
2485
|
+
const others = omit(allProps, "as", "class", "ref", "style");
|
|
2486
|
+
return Dynamic(mergeProps({
|
|
2487
|
+
get component() {
|
|
2488
|
+
return props.as ?? "div";
|
|
2489
|
+
},
|
|
2490
|
+
ref: [internalProps.ref],
|
|
2491
|
+
role: "presentation",
|
|
2492
|
+
get hidden() {
|
|
2493
|
+
return !context.presence.mounted();
|
|
2494
|
+
},
|
|
2495
|
+
get ["class"]() {
|
|
2496
|
+
return classValue();
|
|
2497
|
+
},
|
|
2498
|
+
get style() {
|
|
2499
|
+
return styleValue();
|
|
2500
|
+
}
|
|
2501
|
+
}, stateAttributes, others));
|
|
2502
|
+
}
|
|
2503
|
+
//#endregion
|
|
2504
|
+
//#region src/combobox/positioner/ComboboxPositioner.tsx
|
|
2505
|
+
/**
|
|
2506
|
+
* Dropdowns can grow tall enough to reach the opposite viewport edge, so they shift within their
|
|
2507
|
+
* preferred side and use `var(--available-height)` instead of flipping to a cross axis.
|
|
2508
|
+
*/
|
|
2509
|
+
var DROPDOWN_COLLISION_AVOIDANCE = {
|
|
2510
|
+
side: "flip",
|
|
2511
|
+
align: "flip",
|
|
2512
|
+
fallbackAxisSide: "none"
|
|
2513
|
+
};
|
|
2514
|
+
/** Positions the popup against the input, or against the trigger when the input is inside it. */
|
|
2515
|
+
function ComboboxPositioner(props) {
|
|
2516
|
+
const keepMounted = useComboboxPortalContext();
|
|
2517
|
+
const context = useComboboxRootContext();
|
|
2518
|
+
const direction = useDirection();
|
|
2519
|
+
const internalProps = props;
|
|
2520
|
+
const allProps = props;
|
|
2521
|
+
const [element, setElement] = createSignal(null, { ownedWrite: true });
|
|
2522
|
+
const anchorElement = createMemo(() => resolveAnchor(internalProps.anchor) ?? (context.store.inputInsidePopup() ? context.triggerElement() : context.inputGroupElement() ?? context.inputElement()) ?? null);
|
|
2523
|
+
const positioning = createAnchorPositioning({
|
|
2524
|
+
reference: anchorElement,
|
|
2525
|
+
floating: element,
|
|
2526
|
+
mounted: () => context.presence.mounted() || keepMounted,
|
|
2527
|
+
direction,
|
|
2528
|
+
positionMethod: () => internalProps.positionMethod ?? "absolute",
|
|
2529
|
+
side: () => internalProps.side ?? "bottom",
|
|
2530
|
+
sideOffset: () => internalProps.sideOffset ?? 0,
|
|
2531
|
+
align: () => internalProps.align ?? "center",
|
|
2532
|
+
alignOffset: () => internalProps.alignOffset ?? 0,
|
|
2533
|
+
collisionBoundary: () => internalProps.collisionBoundary ?? "clipping-ancestors",
|
|
2534
|
+
collisionPadding: () => internalProps.collisionPadding ?? 5,
|
|
2535
|
+
arrowPadding: () => internalProps.arrowPadding ?? 5,
|
|
2536
|
+
sticky: () => internalProps.sticky ?? false,
|
|
2537
|
+
disableAnchorTracking: () => internalProps.disableAnchorTracking ?? false,
|
|
2538
|
+
collisionAvoidance: () => internalProps.collisionAvoidance ?? DROPDOWN_COLLISION_AVOIDANCE
|
|
2539
|
+
});
|
|
2540
|
+
const state = createMemo(() => ({
|
|
2541
|
+
open: context.store.open(),
|
|
2542
|
+
side: positioning.renderedSide(),
|
|
2543
|
+
align: positioning.renderedAlign(),
|
|
2544
|
+
anchorHidden: positioning.anchorHidden(),
|
|
2545
|
+
empty: context.listEmpty()
|
|
2546
|
+
}));
|
|
2547
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2548
|
+
const styleValue = createMemo(() => mergeStyleValue({
|
|
2549
|
+
...positioning.styles(),
|
|
2550
|
+
"pointer-events": context.store.open() ? void 0 : "none",
|
|
2551
|
+
transition: context.store.track().transitionStatus === "starting" ? "none" : void 0
|
|
2552
|
+
}, resolveStyle(props.style, state())));
|
|
2553
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxPositionerStateMapping));
|
|
2554
|
+
const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
|
|
2555
|
+
createAnchoredPopupScrollLock({
|
|
2556
|
+
enabled: () => context.store.open() && context.modal(),
|
|
2557
|
+
touchOpen: () => context.store.openMethod() === "touch",
|
|
2558
|
+
positioner: element,
|
|
2559
|
+
reference: () => context.triggerElement() ?? context.inputElement()
|
|
2560
|
+
});
|
|
2561
|
+
createEffect(positioning.renderedSide, (side) => context.store.setPopupSide(side));
|
|
2562
|
+
onCleanup(() => {
|
|
2563
|
+
if (context.store.state.positionerElement === untrack(element)) context.store.setPositionerElement(null);
|
|
2564
|
+
});
|
|
2565
|
+
const positionerContext = {
|
|
2566
|
+
...positioning,
|
|
2567
|
+
side: positioning.renderedSide,
|
|
2568
|
+
align: positioning.renderedAlign
|
|
2569
|
+
};
|
|
2570
|
+
function ModalBackdrop() {
|
|
2571
|
+
let backdrop = null;
|
|
2572
|
+
onCleanup(() => {
|
|
2573
|
+
if (context.internalBackdropElement() === backdrop) context.setInternalBackdropElement(null);
|
|
2574
|
+
});
|
|
2575
|
+
return InternalBackdrop({
|
|
2576
|
+
ref: (node) => {
|
|
2577
|
+
backdrop = node;
|
|
2578
|
+
context.setInternalBackdropElement(node);
|
|
2579
|
+
},
|
|
2580
|
+
get cutout() {
|
|
2581
|
+
return context.inputGroupElement() ?? context.inputElement() ?? context.triggerElement();
|
|
2582
|
+
},
|
|
2583
|
+
get open() {
|
|
2584
|
+
return context.store.open();
|
|
2585
|
+
}
|
|
2586
|
+
});
|
|
2587
|
+
}
|
|
2588
|
+
return ComboboxPositionerContext({
|
|
2589
|
+
value: positionerContext,
|
|
2590
|
+
get children() {
|
|
2591
|
+
return [Show({
|
|
2592
|
+
get when() {
|
|
2593
|
+
return memo(() => {
|
|
2594
|
+
return !!context.presence.mounted();
|
|
2595
|
+
})() ? context.modal() : context.presence.mounted();
|
|
2596
|
+
},
|
|
2597
|
+
get children() {
|
|
2598
|
+
return ModalBackdrop({});
|
|
2599
|
+
}
|
|
2600
|
+
}), Dynamic(mergeProps({
|
|
2601
|
+
get component() {
|
|
2602
|
+
return props.as ?? "div";
|
|
2603
|
+
},
|
|
2604
|
+
ref: [((value) => {
|
|
2605
|
+
setElement(value);
|
|
2606
|
+
context.store.setPositionerElement(value);
|
|
2607
|
+
}), internalProps.ref],
|
|
2608
|
+
role: "presentation",
|
|
2609
|
+
get hidden() {
|
|
2610
|
+
return !context.presence.mounted();
|
|
2611
|
+
},
|
|
2612
|
+
get inert() {
|
|
2613
|
+
return !context.store.open() || void 0;
|
|
2614
|
+
},
|
|
2615
|
+
get ["class"]() {
|
|
2616
|
+
return classValue();
|
|
2617
|
+
},
|
|
2618
|
+
get style() {
|
|
2619
|
+
return styleValue();
|
|
2620
|
+
}
|
|
2621
|
+
}, stateAttributes, others))];
|
|
2622
|
+
}
|
|
2623
|
+
});
|
|
2624
|
+
}
|
|
2625
|
+
function resolveAnchor(anchor) {
|
|
2626
|
+
if (typeof anchor === "function") return anchor();
|
|
2627
|
+
if (anchor && "current" in anchor) return anchor.current;
|
|
2628
|
+
return anchor;
|
|
2629
|
+
}
|
|
2630
|
+
//#endregion
|
|
2631
|
+
//#region src/combobox/popup/ComboboxPopup.tsx
|
|
2632
|
+
/** A container for the list. */
|
|
2633
|
+
function ComboboxPopup(props) {
|
|
2634
|
+
const context = useComboboxRootContext();
|
|
2635
|
+
const positioner = useComboboxPositionerContext();
|
|
2636
|
+
const internalProps = props;
|
|
2637
|
+
const allProps = props;
|
|
2638
|
+
const popupId = createMemo(() => internalProps.id ?? (context.store.inputInsidePopup() ? getComboboxPopupId(context.id()) : void 0));
|
|
2639
|
+
const state = createMemo(() => ({
|
|
2640
|
+
open: context.store.open(),
|
|
2641
|
+
side: positioner.side(),
|
|
2642
|
+
align: positioner.align(),
|
|
2643
|
+
anchorHidden: positioner.anchorHidden(),
|
|
2644
|
+
transitionStatus: context.store.track().transitionStatus,
|
|
2645
|
+
empty: context.listEmpty(),
|
|
2646
|
+
instant: context.store.track().instantType
|
|
2647
|
+
}));
|
|
2648
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2649
|
+
const styleValue = createMemo(() => mergeStyleValue({ transition: state().transitionStatus === "starting" ? "none" : void 0 }, resolveStyle(props.style, state())));
|
|
2650
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxPopupStateMapping));
|
|
2651
|
+
const others = omit(allProps, "as", "class", "finalFocus", "id", "initialFocus", "onFocus", "ref", "style");
|
|
2652
|
+
const focusManagerModal = createMemo(() => !context.store.inputInsidePopup() || context.modal());
|
|
2653
|
+
const resolvedInitialFocus = createMemo(() => {
|
|
2654
|
+
if (internalProps.initialFocus !== void 0) return internalProps.initialFocus;
|
|
2655
|
+
if (!context.store.inputInsidePopup()) return false;
|
|
2656
|
+
return (interactionType) => interactionType === "touch" ? context.store.track().popupElement : context.inputElement();
|
|
2657
|
+
});
|
|
2658
|
+
const resolvedFinalFocus = createMemo(() => {
|
|
2659
|
+
if (internalProps.finalFocus != null) return internalProps.finalFocus;
|
|
2660
|
+
return context.store.inputInsidePopup() ? true : false;
|
|
2661
|
+
});
|
|
2662
|
+
/**
|
|
2663
|
+
* Virtual focus keeps the real focus on the input, so focus landing anywhere in the popup is
|
|
2664
|
+
* handed back. This listens on `focusin` rather than `focus` because focus reaching a
|
|
2665
|
+
* descendant — the list, most often — has to be caught too, and `focus` does not bubble.
|
|
2666
|
+
*/
|
|
2667
|
+
function handleFocusIn(event) {
|
|
2668
|
+
const target = event.target;
|
|
2669
|
+
if (context.store.openMethod() !== "touch" && (contains(context.store.listElement(), target) || target === event.currentTarget)) context.focusInput();
|
|
2670
|
+
}
|
|
2671
|
+
let popupElement = null;
|
|
2672
|
+
createEffect(popupId, (id) => {
|
|
2673
|
+
context.store.setPopupId(popupElement?.id || id);
|
|
2674
|
+
return () => context.store.setPopupId(void 0);
|
|
2675
|
+
});
|
|
2676
|
+
onCleanup(() => {
|
|
2677
|
+
if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
|
|
2678
|
+
});
|
|
2679
|
+
return FocusManager({
|
|
2680
|
+
get context() {
|
|
2681
|
+
return context.store.context.floatingRoot;
|
|
2682
|
+
},
|
|
2683
|
+
get tree() {
|
|
2684
|
+
return context.tree;
|
|
2685
|
+
},
|
|
2686
|
+
get disabled() {
|
|
2687
|
+
return !context.presence.mounted();
|
|
2688
|
+
},
|
|
2689
|
+
get modal() {
|
|
2690
|
+
return focusManagerModal();
|
|
2691
|
+
},
|
|
2692
|
+
get openInteractionType() {
|
|
2693
|
+
return context.store.openMethod();
|
|
2694
|
+
},
|
|
2695
|
+
get initialFocus() {
|
|
2696
|
+
return resolvedInitialFocus();
|
|
2697
|
+
},
|
|
2698
|
+
get returnFocus() {
|
|
2699
|
+
return resolvedFinalFocus();
|
|
2700
|
+
},
|
|
2701
|
+
get previousFocusableElement() {
|
|
2702
|
+
return context.triggerElement;
|
|
2703
|
+
},
|
|
2704
|
+
referenceElement: () => context.store.inputInsidePopup() ? context.triggerElement() : context.inputElement(),
|
|
2705
|
+
getInsideElements: () => [context.store.startDismissElement, context.store.endDismissElement],
|
|
2706
|
+
get children() {
|
|
2707
|
+
return [Dynamic(mergeProps({
|
|
2708
|
+
get component() {
|
|
2709
|
+
return props.as ?? "div";
|
|
2710
|
+
},
|
|
2711
|
+
ref: [((element) => {
|
|
2712
|
+
popupElement = element;
|
|
2713
|
+
context.store.setPopupElement(element);
|
|
2714
|
+
}), internalProps.ref],
|
|
2715
|
+
get id() {
|
|
2716
|
+
return popupId();
|
|
2717
|
+
},
|
|
2718
|
+
get role() {
|
|
2719
|
+
return context.store.inputInsidePopup() ? "dialog" : "presentation";
|
|
2720
|
+
},
|
|
2721
|
+
"data-base-ui-focusable": "",
|
|
2722
|
+
get ["data-rootownerid"]() {
|
|
2723
|
+
return context.node.id;
|
|
2724
|
+
},
|
|
2725
|
+
get ["class"]() {
|
|
2726
|
+
return classValue();
|
|
2727
|
+
},
|
|
2728
|
+
get style() {
|
|
2729
|
+
return styleValue();
|
|
2730
|
+
},
|
|
2731
|
+
get onFocus() {
|
|
2732
|
+
return internalProps.onFocus;
|
|
2733
|
+
},
|
|
2734
|
+
onFocusIn: handleFocusIn
|
|
2735
|
+
}, stateAttributes, others)), Show({
|
|
2736
|
+
get when() {
|
|
2737
|
+
return focusManagerModal();
|
|
2738
|
+
},
|
|
2739
|
+
get children() {
|
|
2740
|
+
return ComboboxInternalDismissButton({ ref: (element) => {
|
|
2741
|
+
untrack(() => {
|
|
2742
|
+
context.store.endDismissElement = element;
|
|
2743
|
+
});
|
|
2744
|
+
} });
|
|
2745
|
+
}
|
|
2746
|
+
})];
|
|
2747
|
+
}
|
|
2748
|
+
});
|
|
2749
|
+
}
|
|
2750
|
+
//#endregion
|
|
2751
|
+
//#region src/combobox/arrow/ComboboxArrow.tsx
|
|
2752
|
+
/** Displays an element positioned against the anchor. */
|
|
2753
|
+
function ComboboxArrow(props) {
|
|
2754
|
+
const context = useComboboxRootContext();
|
|
2755
|
+
const positioner = useComboboxPositionerContext();
|
|
2756
|
+
const internalProps = props;
|
|
2757
|
+
const allProps = props;
|
|
2758
|
+
const state = createMemo(() => ({
|
|
2759
|
+
open: context.store.open(),
|
|
2760
|
+
side: positioner.side(),
|
|
2761
|
+
align: positioner.align(),
|
|
2762
|
+
uncentered: positioner.arrowUncentered()
|
|
2763
|
+
}));
|
|
2764
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2765
|
+
const styleValue = createMemo(() => mergeStyleValue(positioner.arrowStyles(), resolveStyle(props.style, state())));
|
|
2766
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
|
|
2767
|
+
const others = omit(allProps, "as", "class", "ref", "style");
|
|
2768
|
+
let arrow = null;
|
|
2769
|
+
onCleanup(() => {
|
|
2770
|
+
if (arrow) positioner.setArrowElement(null);
|
|
2771
|
+
});
|
|
2772
|
+
return Dynamic(mergeProps({
|
|
2773
|
+
get component() {
|
|
2774
|
+
return props.as ?? "div";
|
|
2775
|
+
},
|
|
2776
|
+
ref: [((element) => {
|
|
2777
|
+
arrow = element;
|
|
2778
|
+
positioner.setArrowElement(element);
|
|
2779
|
+
}), internalProps.ref],
|
|
2780
|
+
"aria-hidden": "true",
|
|
2781
|
+
get ["class"]() {
|
|
2782
|
+
return classValue();
|
|
2783
|
+
},
|
|
2784
|
+
get style() {
|
|
2785
|
+
return styleValue();
|
|
2786
|
+
}
|
|
2787
|
+
}, stateAttributes, others));
|
|
2788
|
+
}
|
|
2789
|
+
//#endregion
|
|
2790
|
+
//#region src/combobox/group/ComboboxGroupContext.ts
|
|
2791
|
+
var MISSING_CONTEXT$1 = Symbol("ComboboxGroupContext");
|
|
2792
|
+
var ComboboxGroupContext = createContext(MISSING_CONTEXT$1);
|
|
2793
|
+
function useComboboxGroupContext() {
|
|
2794
|
+
const context = useContext(ComboboxGroupContext);
|
|
2795
|
+
if (context === MISSING_CONTEXT$1) throw new Error("Base UI: ComboboxGroupContext is missing. ComboboxGroup parts must be placed within <Combobox.Group>.");
|
|
2796
|
+
return context;
|
|
2797
|
+
}
|
|
2798
|
+
//#endregion
|
|
2799
|
+
//#region src/combobox/group/ComboboxGroup.tsx
|
|
2800
|
+
/** Groups related items with the corresponding label. */
|
|
2801
|
+
function ComboboxGroup(props) {
|
|
2802
|
+
const internalProps = props;
|
|
2803
|
+
const allProps = props;
|
|
2804
|
+
const [labelId, setLabelId] = createSignal(void 0, { ownedWrite: true });
|
|
2805
|
+
const state = {};
|
|
2806
|
+
const classValue = createMemo(() => resolveClass(props.class, state));
|
|
2807
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state));
|
|
2808
|
+
const others = omit(allProps, "as", "class", "items", "ref", "style");
|
|
2809
|
+
return ComboboxGroupCollectionContext({
|
|
2810
|
+
value: { items: () => internalProps.items },
|
|
2811
|
+
get children() {
|
|
2812
|
+
return ComboboxGroupContext({
|
|
2813
|
+
value: {
|
|
2814
|
+
labelId,
|
|
2815
|
+
setLabelId
|
|
2816
|
+
},
|
|
2817
|
+
get children() {
|
|
2818
|
+
return Dynamic(mergeProps({
|
|
2819
|
+
get component() {
|
|
2820
|
+
return props.as ?? "div";
|
|
2821
|
+
},
|
|
2822
|
+
ref: [internalProps.ref],
|
|
2823
|
+
role: "group",
|
|
2824
|
+
get ["aria-labelledby"]() {
|
|
2825
|
+
return labelId();
|
|
2826
|
+
},
|
|
2827
|
+
get ["class"]() {
|
|
2828
|
+
return classValue();
|
|
2829
|
+
},
|
|
2830
|
+
get style() {
|
|
2831
|
+
return styleValue();
|
|
2832
|
+
}
|
|
2833
|
+
}, others));
|
|
2834
|
+
}
|
|
2835
|
+
});
|
|
2836
|
+
}
|
|
2837
|
+
});
|
|
2838
|
+
}
|
|
2839
|
+
//#endregion
|
|
2840
|
+
//#region src/combobox/group-label/ComboboxGroupLabel.tsx
|
|
2841
|
+
/** An accessible label automatically associated with its parent group. */
|
|
2842
|
+
function ComboboxGroupLabel(props) {
|
|
2843
|
+
const context = useComboboxGroupContext();
|
|
2844
|
+
const internalProps = props;
|
|
2845
|
+
const allProps = props;
|
|
2846
|
+
const generatedId = `base-ui-${createUniqueId()}`;
|
|
2847
|
+
const id = createMemo(() => internalProps.id ?? generatedId);
|
|
2848
|
+
const state = {};
|
|
2849
|
+
const classValue = createMemo(() => resolveClass(props.class, state));
|
|
2850
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state));
|
|
2851
|
+
const others = omit(allProps, "as", "class", "id", "ref", "style");
|
|
2852
|
+
createEffect(id, (currentId) => {
|
|
2853
|
+
context.setLabelId(currentId);
|
|
2854
|
+
return () => {
|
|
2855
|
+
if (context.labelId() === currentId) context.setLabelId(void 0);
|
|
2856
|
+
};
|
|
2857
|
+
});
|
|
2858
|
+
return Dynamic(mergeProps({
|
|
2859
|
+
get component() {
|
|
2860
|
+
return props.as ?? "div";
|
|
2861
|
+
},
|
|
2862
|
+
ref: [internalProps.ref],
|
|
2863
|
+
get id() {
|
|
2864
|
+
return id();
|
|
2865
|
+
},
|
|
2866
|
+
get ["class"]() {
|
|
2867
|
+
return classValue();
|
|
2868
|
+
},
|
|
2869
|
+
get style() {
|
|
2870
|
+
return styleValue();
|
|
2871
|
+
}
|
|
2872
|
+
}, others));
|
|
2873
|
+
}
|
|
2874
|
+
//#endregion
|
|
2875
|
+
//#region src/combobox/row/ComboboxRowContext.ts
|
|
2876
|
+
var ComboboxRowContext = createContext(false);
|
|
2877
|
+
/** Whether the enclosing list is a grid row, which turns items into grid cells. */
|
|
2878
|
+
function useComboboxRowContext() {
|
|
2879
|
+
return useContext(ComboboxRowContext);
|
|
2880
|
+
}
|
|
2881
|
+
//#endregion
|
|
2882
|
+
//#region src/combobox/item/ComboboxItemContext.ts
|
|
2883
|
+
var MISSING_CONTEXT = Symbol("ComboboxItemContext");
|
|
2884
|
+
var ComboboxItemContext = createContext(MISSING_CONTEXT);
|
|
2885
|
+
function useComboboxItemContext() {
|
|
2886
|
+
const context = useContext(ComboboxItemContext);
|
|
2887
|
+
if (context === MISSING_CONTEXT) throw new Error("Base UI: ComboboxItemContext is missing. ComboboxItem parts must be placed within <Combobox.Item>.");
|
|
2888
|
+
return context;
|
|
2889
|
+
}
|
|
2890
|
+
//#endregion
|
|
2891
|
+
//#region src/combobox/item/ComboboxItem.tsx
|
|
2892
|
+
/** An individual item in the list. */
|
|
2893
|
+
function ComboboxItem(props) {
|
|
2894
|
+
const context = useComboboxRootContext();
|
|
2895
|
+
const isRow = useComboboxRowContext();
|
|
2896
|
+
const internalProps = props;
|
|
2897
|
+
const allProps = props;
|
|
2898
|
+
const token = Symbol("ComboboxItem");
|
|
2899
|
+
const [element, setElement] = createSignal(null, { ownedWrite: true });
|
|
2900
|
+
const itemValue = createMemo(() => internalProps.value ?? null);
|
|
2901
|
+
const disabled = createMemo(() => context.disabled() || (internalProps.disabled ?? false));
|
|
2902
|
+
const nativeButton = createMemo(() => internalProps.nativeButton ?? false);
|
|
2903
|
+
const selectable = createMemo(() => context.selectionMode() !== "none");
|
|
2904
|
+
/**
|
|
2905
|
+
* An index the item knows without consulting the DOM: either declared directly, or derived
|
|
2906
|
+
* from the filtered items when an external virtualizer only renders a window of rows.
|
|
2907
|
+
*/
|
|
2908
|
+
const declaredIndex = createMemo(() => {
|
|
2909
|
+
if (internalProps.index != null) return internalProps.index;
|
|
2910
|
+
if (!context.virtualized()) return;
|
|
2911
|
+
const derived = findItemIndex(context.flatFilteredItems(), itemValue(), context.comparator());
|
|
2912
|
+
return derived === -1 ? void 0 : derived;
|
|
2913
|
+
});
|
|
2914
|
+
const unregister = context.store.collection.register({
|
|
2915
|
+
token,
|
|
2916
|
+
element,
|
|
2917
|
+
value: itemValue,
|
|
2918
|
+
index: declaredIndex,
|
|
2919
|
+
disabled
|
|
2920
|
+
});
|
|
2921
|
+
const index = createMemo(() => declaredIndex() ?? context.store.collection.indexOf(token));
|
|
2922
|
+
const hasRegistered = createMemo(() => index() !== -1);
|
|
2923
|
+
const id = createMemo(() => hasRegistered() ? `${context.id()}-${index()}` : void 0);
|
|
2924
|
+
const selected = createMemo(() => {
|
|
2925
|
+
if (!selectable()) return false;
|
|
2926
|
+
const current = context.selectedValue();
|
|
2927
|
+
if (Array.isArray(current)) return selectedValueIncludes(current, itemValue(), context.comparator());
|
|
2928
|
+
return compareItemEquality(itemValue(), current, context.comparator());
|
|
2929
|
+
});
|
|
2930
|
+
const highlighted = createMemo(() => context.store.activeIndex() === index());
|
|
2931
|
+
const state = createMemo(() => ({
|
|
2932
|
+
disabled: disabled(),
|
|
2933
|
+
selected: selected(),
|
|
2934
|
+
highlighted: highlighted()
|
|
2935
|
+
}));
|
|
2936
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
2937
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
2938
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state()));
|
|
2939
|
+
const others = omit(allProps, "as", "class", "disabled", "id", "index", "nativeButton", "onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerLeave", "onPointerMove", "ref", "style", "value");
|
|
2940
|
+
function commitSelection(event) {
|
|
2941
|
+
if (context.submitOnItemClick()) {
|
|
2942
|
+
context.handleSelection(event, itemValue());
|
|
2943
|
+
flush();
|
|
2944
|
+
context.requestSubmit();
|
|
2945
|
+
return;
|
|
2946
|
+
}
|
|
2947
|
+
context.handleSelection(event, itemValue());
|
|
2948
|
+
}
|
|
2949
|
+
function handlePointerDown(event) {
|
|
2950
|
+
if (event.isPrimary) context.store.pointerDownItem = event.currentTarget;
|
|
2951
|
+
event.preventDefault();
|
|
2952
|
+
}
|
|
2953
|
+
function handleMouseDown(event) {
|
|
2954
|
+
event.preventDefault();
|
|
2955
|
+
}
|
|
2956
|
+
function handleClick(event) {
|
|
2957
|
+
if (disabled() || context.readOnly()) return;
|
|
2958
|
+
commitSelection(event);
|
|
2959
|
+
}
|
|
2960
|
+
function handleMouseUp(event) {
|
|
2961
|
+
const startedOnItem = context.store.pointerDownItem === event.currentTarget;
|
|
2962
|
+
context.store.pointerDownItem = null;
|
|
2963
|
+
if (disabled() || context.readOnly() || event.button !== 0 || startedOnItem || !highlighted()) return;
|
|
2964
|
+
commitSelection(event);
|
|
2965
|
+
}
|
|
2966
|
+
function handlePointerMove(event) {
|
|
2967
|
+
if (event.pointerType === "touch") return;
|
|
2968
|
+
context.store.keyboardActive = false;
|
|
2969
|
+
if (disabled()) return;
|
|
2970
|
+
context.listNavigation.onItemPointerMove(event, index());
|
|
2971
|
+
}
|
|
2972
|
+
function handlePointerLeave(event) {
|
|
2973
|
+
if (context.keepHighlight()) return;
|
|
2974
|
+
context.listNavigation.onItemPointerLeave(event);
|
|
2975
|
+
}
|
|
2976
|
+
const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
|
|
2977
|
+
const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => handleMouseDown);
|
|
2978
|
+
const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => handleMouseUp);
|
|
2979
|
+
const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
|
|
2980
|
+
const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handlePointerMove);
|
|
2981
|
+
const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => handlePointerLeave);
|
|
2982
|
+
createEffect(() => ({
|
|
2983
|
+
registered: hasRegistered(),
|
|
2984
|
+
hasItems: context.hasItems(),
|
|
2985
|
+
index: index(),
|
|
2986
|
+
value: itemValue(),
|
|
2987
|
+
selected: context.selectedValue(),
|
|
2988
|
+
compare: context.comparator()
|
|
2989
|
+
}), (current) => {
|
|
2990
|
+
if (!current.registered || current.hasItems) return;
|
|
2991
|
+
const lastSelected = Array.isArray(current.selected) ? current.selected[current.selected.length - 1] : current.selected;
|
|
2992
|
+
if (compareItemEquality(current.value, lastSelected, current.compare)) untrack(() => context.store.setSelectedIndex(current.index));
|
|
2993
|
+
});
|
|
2994
|
+
createEffect(element, () => context.store.collection.touch());
|
|
2995
|
+
onCleanup(unregister);
|
|
2996
|
+
return ComboboxItemContext({
|
|
2997
|
+
value: {
|
|
2998
|
+
selected,
|
|
2999
|
+
index
|
|
3000
|
+
},
|
|
3001
|
+
get children() {
|
|
3002
|
+
return Dynamic(mergeProps({
|
|
3003
|
+
get component() {
|
|
3004
|
+
return props.as ?? "div";
|
|
3005
|
+
},
|
|
3006
|
+
ref: [((value) => {
|
|
3007
|
+
setElement(value);
|
|
3008
|
+
context.store.collection.touch();
|
|
3009
|
+
}), internalProps.ref],
|
|
3010
|
+
get id() {
|
|
3011
|
+
return id();
|
|
3012
|
+
},
|
|
3013
|
+
get type() {
|
|
3014
|
+
return nativeButton() ? "button" : void 0;
|
|
3015
|
+
},
|
|
3016
|
+
role: isRow ? "gridcell" : "option",
|
|
3017
|
+
get ["aria-selected"]() {
|
|
3018
|
+
return memo(() => {
|
|
3019
|
+
return !!selectable();
|
|
3020
|
+
})() ? selected() ? "true" : "false" : void 0;
|
|
3021
|
+
},
|
|
3022
|
+
get ["aria-disabled"]() {
|
|
3023
|
+
return disabled() ? "true" : void 0;
|
|
3024
|
+
},
|
|
3025
|
+
get ["class"]() {
|
|
3026
|
+
return classValue();
|
|
3027
|
+
},
|
|
3028
|
+
get style() {
|
|
3029
|
+
return styleValue();
|
|
3030
|
+
},
|
|
3031
|
+
onClick,
|
|
3032
|
+
onMouseDown,
|
|
3033
|
+
onMouseUp,
|
|
3034
|
+
onPointerDown,
|
|
3035
|
+
onPointerLeave,
|
|
3036
|
+
onPointerMove
|
|
3037
|
+
}, stateAttributes, others));
|
|
3038
|
+
}
|
|
3039
|
+
});
|
|
3040
|
+
}
|
|
3041
|
+
//#endregion
|
|
3042
|
+
//#region src/combobox/row/ComboboxRow.tsx
|
|
3043
|
+
/**
|
|
3044
|
+
* A single row of items in a grid list.
|
|
3045
|
+
* Enable `grid` on the root component to turn the listbox into a grid.
|
|
3046
|
+
*/
|
|
3047
|
+
function ComboboxRow(props) {
|
|
3048
|
+
const internalProps = props;
|
|
3049
|
+
const allProps = props;
|
|
3050
|
+
const state = {};
|
|
3051
|
+
const classValue = createMemo(() => resolveClass(props.class, state));
|
|
3052
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state));
|
|
3053
|
+
const others = omit(allProps, "as", "class", "ref", "style");
|
|
3054
|
+
return ComboboxRowContext({
|
|
3055
|
+
value: true,
|
|
3056
|
+
get children() {
|
|
3057
|
+
return Dynamic(mergeProps({
|
|
3058
|
+
get component() {
|
|
3059
|
+
return props.as ?? "div";
|
|
3060
|
+
},
|
|
3061
|
+
ref: [internalProps.ref],
|
|
3062
|
+
role: "row",
|
|
3063
|
+
get ["class"]() {
|
|
3064
|
+
return classValue();
|
|
3065
|
+
},
|
|
3066
|
+
get style() {
|
|
3067
|
+
return styleValue();
|
|
3068
|
+
}
|
|
3069
|
+
}, others));
|
|
3070
|
+
}
|
|
3071
|
+
});
|
|
3072
|
+
}
|
|
3073
|
+
//#endregion
|
|
3074
|
+
//#region src/combobox/empty/ComboboxEmpty.tsx
|
|
3075
|
+
/**
|
|
3076
|
+
* Renders its children only when the list is empty, announcing the change politely.
|
|
3077
|
+
*
|
|
3078
|
+
* The root element must stay mounted for screen readers to announce consistently, so hide or
|
|
3079
|
+
* conditionally render its children rather than the component itself.
|
|
3080
|
+
*/
|
|
3081
|
+
function ComboboxEmpty(props) {
|
|
3082
|
+
const context = useComboboxRootContext();
|
|
3083
|
+
const internalProps = props;
|
|
3084
|
+
const allProps = props;
|
|
3085
|
+
const state = {};
|
|
3086
|
+
const classValue = createMemo(() => resolveClass(props.class, state));
|
|
3087
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state));
|
|
3088
|
+
const others = omit(allProps, "as", "children", "class", "ref", "style");
|
|
3089
|
+
const [element, setElement] = createSignal(null, { ownedWrite: true });
|
|
3090
|
+
createInitialLiveRegionTextMutation(element);
|
|
3091
|
+
onCleanup(() => {
|
|
3092
|
+
if (context.store.emptyElement === element()) context.store.emptyElement = null;
|
|
3093
|
+
});
|
|
3094
|
+
return Dynamic(mergeProps({
|
|
3095
|
+
get component() {
|
|
3096
|
+
return props.as ?? "div";
|
|
3097
|
+
},
|
|
3098
|
+
ref: [((value) => {
|
|
3099
|
+
setElement(value);
|
|
3100
|
+
context.store.emptyElement = value;
|
|
3101
|
+
}), internalProps.ref],
|
|
3102
|
+
role: "status",
|
|
3103
|
+
"aria-live": "polite",
|
|
3104
|
+
"aria-atomic": "true",
|
|
3105
|
+
get ["class"]() {
|
|
3106
|
+
return classValue();
|
|
3107
|
+
},
|
|
3108
|
+
get style() {
|
|
3109
|
+
return styleValue();
|
|
3110
|
+
}
|
|
3111
|
+
}, others, { get children() {
|
|
3112
|
+
return Show({
|
|
3113
|
+
get when() {
|
|
3114
|
+
return context.listEmpty();
|
|
3115
|
+
},
|
|
3116
|
+
get children() {
|
|
3117
|
+
return props.children;
|
|
3118
|
+
}
|
|
3119
|
+
});
|
|
3120
|
+
} }));
|
|
3121
|
+
}
|
|
3122
|
+
//#endregion
|
|
3123
|
+
//#region src/combobox/separator/ComboboxSeparator.tsx
|
|
3124
|
+
/** A visual separator between items or groups. */
|
|
3125
|
+
function ComboboxSeparator(props) {
|
|
3126
|
+
const internalProps = props;
|
|
3127
|
+
const allProps = props;
|
|
3128
|
+
const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
|
|
3129
|
+
const state = createMemo(() => ({ orientation: orientation() }));
|
|
3130
|
+
const classValue = createMemo(() => resolveClass(props.class, state()));
|
|
3131
|
+
const styleValue = createMemo(() => resolveStyle(props.style, state()));
|
|
3132
|
+
const stateAttributes = createMemo(() => getStateAttributesProps(state()));
|
|
3133
|
+
const others = omit(allProps, "as", "class", "orientation", "ref", "style");
|
|
3134
|
+
return Dynamic(mergeProps({
|
|
3135
|
+
get component() {
|
|
3136
|
+
return props.as ?? "div";
|
|
3137
|
+
},
|
|
3138
|
+
ref: [internalProps.ref],
|
|
3139
|
+
role: "presentation",
|
|
3140
|
+
get ["class"]() {
|
|
3141
|
+
return classValue();
|
|
3142
|
+
},
|
|
3143
|
+
get style() {
|
|
3144
|
+
return styleValue();
|
|
3145
|
+
}
|
|
3146
|
+
}, stateAttributes, others));
|
|
3147
|
+
}
|
|
3148
|
+
//#endregion
|
|
3149
|
+
//#region src/combobox/root/utils/useFilteredItems.ts
|
|
3150
|
+
/**
|
|
3151
|
+
* The internally filtered items, as an accessor so consumers stay reactive to the query.
|
|
3152
|
+
*/
|
|
3153
|
+
function useFilteredItems() {
|
|
3154
|
+
return useComboboxRootContext().filteredItems;
|
|
3155
|
+
}
|
|
3156
|
+
//#endregion
|
|
3157
|
+
export { getFilter as A, getIndexAfterChipRemoval as C, ComboboxTrigger as D, useRequiredComboboxChipsContext as E, resolveMultipleLabels as M, resolveSelectedLabel as N, AriaCombobox as O, stringifyAsLabel as P, getChipNavigationKeys as S, ComboboxChipsContext as T, ComboboxClear as _, ComboboxItem as a, handleInputPress as b, ComboboxGroup as c, ComboboxPositioner as d, ComboboxBackdrop as f, ComboboxCollection as g, ComboboxList as h, ComboboxRow as i, hasNullItemLabel as j, useComboboxRootContext as k, ComboboxArrow as l, ComboboxStatus as m, ComboboxSeparator as n, useComboboxItemContext as o, ComboboxPortal as p, ComboboxEmpty as r, ComboboxGroupLabel as s, useFilteredItems as t, ComboboxPopup as u, ComboboxIcon as v, ComboboxChipRegistry as w, ComboboxInput as x, ComboboxInputGroup as y };
|